首页 > 基础资料 博客日记
JavaScript简介
2024-04-18 10:00:05基础资料围观277次
目录
概要：
说明：
JavaScript（简称"js"）是一种轻量级的面向对象编程的语言，既能用在浏览器里控制页面的交互，也能用在服务器中作为网站的后台(Node.js),所以JavaScript是一种全栈式的编程语言。
学习JS的原因：
JS是目前最流行的最广泛的客户端脚本语言，在Web中的重要程度是不言而喻的，是一位优秀的前端工程师必备的技能之一。不仅如此JS还有以下优点：
- JavaScript是最流行的脚本语言，简易好学，学成之后还可以使用一些JavaScript框架(如JQuery，Node.js)来开发前端或后端应用程序。
- JavaScript还能再Web浏览器中运行，所以学习JavaScript，不需要配置任何特殊的环境。
- JavaScript还可以应用到移动应用的开发，Web游戏等等都会用到JavaScript。
- JavaScript有大量的框架和库，使用这些框架和库和大大减少开发的时间。
JS可以干什么：
JavaScript可以用在Web的各个开发领域，如:
Web应用的开发，如我们日常使用的网页基本都是由HTML，CSS，JavaScript构成的，通过JavaScript我们可以实时更新网页中元素的样式，并可以实现人跟网页之间的交互(如监听用户是否点击了鼠标或按下了某个按键等等)。初识CSS-CSDN博客 0基础看这一篇就够了HTML教程(详细汇总)_php代码格式-CSDN博客
JavaScript 指南 - JavaScript | MDN (mozilla.org) 此网站有着完整的js基础资源：
移动应用开发：我们可以进行Web应用开发，JavaScript还可以用来开发手机或者电脑上的应用程序，我们还可以借助一些优秀的框架(如react native),让开发过程变得更加轻松。
Web游戏：在网页上面玩的游戏都可以使用JavaScript来实现。
后端Web开发：我们可以使用JavaScript来进行web应用程序的前端部分的开发，但是随着Node.JS(一个JavaScript运行环境)让JavaScript可以用来开发Web应用程序的后端。
了解JavaScript：
前言：
我们知道一个网页基本是由JavaScript，HTML和CSS构成的，其中：
- HTML用来定义网页的内容，如图片，文本。
- CSS用来控制网页的外观，如颜色，字体，背景等等
- JavaScript用来实时更新网页中的内容，如从服务获取数据并更新到网页中，修改某些标签的演示或中的内容等，可以让网页更加生动。
JavaScript的历史：
JavaScript最初被称为LiveScript，由Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登-艾奇(Brenda Eich)在1995年开发。在Nescape与Sun(一家互联万公司，全称为"Sun Microsystems",现已被甲骨文公司收购)合作之后将其更名为了JavaScript。
之所以将LiveScript更名为JavaScript，是因为JavaScript是受Java的启发而设计的，因此在语法上他们有很多相似之处，JavaScript中的许多命名规范也都借鉴自Java，还有一个原因就是为了营销，蹭Java的热度。
同时期，微软和Nombas(一家名为Nombas的公司)也分别开发了JScript和ScriptEase两种脚本语言，与JavaScript形成了三足鼎立之势，他们之间没有统一的标准，不能互用，为了解决这一问题，1997年，在ECMA(欧洲计算机制造商协会)的协调下，Netscape，Sun，微软，Borland(一家软件公司)组成了工作组，并以JavaScript为基础制定了ECMA-262标准(ECMAScript).
第二年，ISO/IEC(国际标准化组织及国际电工委员会)也采用了ECMAScript作为标准(即ISO/IEC-16262)。
JavaScript与ECMAScript：
ECMAScript(简称"ES")是根据ECMA-262标准实现的通用脚本语言，ECMA-262标准主要规定了这门语言的语法,类型，语句，关键字，保留字，操作符，对象等几个部分，目前ECMAScript的最新版是ECMAScript6(简称"ES6"),
至于JavaScript，有人会将JavaScript与ECMAScript看作是相同的，其实不然，JavaScript中包含的内容远比ECMA-262中规定的多得多，完整的JavaScript是由以下三个部分组成：
- 核心(ECMAScript):提供语言的语法和基本对象；
- 文档对象模型(DOM):提供处理网页内容的方法和接口；
- 浏览器对象模型(BOM):提供与浏览器进行交互的方法和接口；
如何运行JavaScript以及JavaScrip的特点：
如何运行JavaScript：
作为一种脚本语言，JavaScript代码不能独立运行，通常情况下我们需要借助浏览器来运行JavaScript代码，所有Web浏览器都支持JavaScript.
除了可以再浏览器中执行外，也可以在服务器端或者搭载了JavaScript引擎的设备中执行JavaScript代码，浏览器之所以能够运行JavaScript代码就是因为浏览器中都嵌入了JavaScript引擎，常见的JavaScript引擎有：
- V8：Chrom和Opera中的JavaScript引擎。
- SpiderMonkey：firefox中的JavaScript引擎。
- Chakra：IE中的JavaScript引擎。
- ChakraCore：Microsoft Edge中的JavaScript引擎。
- SquirreIFish：Safari中的JavaScript引擎。
JavaScript的特点：
- 解释型脚本语言：JavaScript是一种解释型脚本语言，与C,C++等语言需要先编译再运行不同，使用JavaScript编写的代码不需要编译，可以直接运行。
- 面向对象：JavaScript是一种面向对象语言，使用JavaScript不仅可以创建对象，也能操作使用已有的对象。
- 弱类型：JavaScript是一种弱类型的变成语言，对使用的数据类型没有严格的要求，如你可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
- 动态性：JavaScript是一种采用事件驱动的脚本语言，它不需要借助Web服务器就可以对用户输入做出响应，如我们在访问一个网页时，通过鼠标在网页中进行点击或者滚动窗口时，通过JavaScript可以直接对这些事件做出响应。
- 跨平台：JavaScript不依赖操作系统，在浏览器中就可以运行，因此一个JavaScript脚本在编写完之后可以再任意系统上运行，只要系统上的浏览器支持JavaScript即可。
编写JavaScript代码并运行：
在HTML文档中编写JavaScript代码：
在HTML页面中嵌入JavaScript脚本需要使用<script>标签,用户可以在<script>标签中直接编写JavaScript代码。
现代浏览器默认<script>标签的脚本类型为JavaScript，因此可以省略type属性，如果是浏览器版本太早了就需要设置type属性。
如下：document.write("<h1>bilibili：https://www.bilibili.com/</h1>");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.write("<h1>bilibili：https://www.bilibili.com/</h1>");
</script>
</head>
<body>
</body>
</html>在JavaScript脚本中，document表示网页文档对象，document.write()表示调用Document对象的write()方法，在当前网页源代码中写入HTML字符串"<h1>bilibili：https://www.bilibili.com/</h1>".运行结果如下：
在脚本中编写JavaScript代码：
JavaScript程序不仅可以直接放在HTML文档中，也可以放在JavaScript脚本中，JavaScript脚本文件是文本文件，扩展名为.js,使用任何文件编辑器都可以编辑。
常用的文本编辑器有windows系统中的记事本，Linux系统中的Vim，Sublime Text，Notepad++等，对于初学者来说建议先使用文本编辑器来编写JavaScript代码，这样有助于我们队JavaScript语法，关键字，函数等内容的记忆。等到了实际开发阶段，则可以选择一些更加专业的代码编辑器，如Visual Studio Code(简称"VS Code")，WebStorm(收费)，Atom等，这样可以提高开发效率。
新建 JavaScript 文件的步骤如下。
第1步，新建文本文件，保存为 test.js。注意，扩展名为.js，它表示该文本文件是 JavaScript 类型的文件。
第2步，打开 test.js 文件，在其中编写如下 JavaScript 代码。
alert("bilibili：https://www.bilibili.com/");
在上面代码中，alert() 表示 Window 对象的方法，调用该方法将弹出一个提示对话框，显示参数字符串 "Hi, JavaScript!"。
第3步，保存 JavaScript 文件。在此建议把 JavaScript 文件和网页文件放在同一个目录下。
JavaScript 文件不能够独立运行，需要导入到网页中，通过浏览器来执行。使用 <script> 标签可以导入 JavaScript 文件。
第4步，新建 HTML 文档，保存为 test.html。
第5步，在 <head> 标签内插入一个 <script> 标签。定义 src 属性，设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下：
<script type="text/javascript" src="test.js></script>
注意：使用＜script＞标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。
第6步，保存网页文档，在浏览器中预览，显示效果如图所示。
定义 src 属性的 <script> 标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。
JavaScript代码执行的顺序：
浏览器在解析HTML文档时，将根据文档流从上打下逐行解析和显示，JavaScript代码也是HTML文档的组成部分，因此JavaScript脚本的执行顺序也是根据<script>标签的位置来确定的。
使用浏览器测试下面实例，可以更加直观的看到JavaScript被逐步解析的过程。
<!DOCTYPE html>
<script>
alert("顶部脚本");
</script>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script>
alert("头部脚本");
</script>
</head>
<body>
<h1>网页标题</h1>
<script>
alert("页面脚本");
</script>
<p>正文内容</p>
</body>
<script>
alert("底部脚本");
</script>
</html>在浏览器中浏览上面实例网页，首先弹出提示文本"顶部脚本"，然后显示网页标题"test"，紧接着弹出提示文本"头部脚本"，下面才显示一级标题文本"网页标题"，继续弹出提示文本"页面脚本"，接着显示段落文本"正文内容"，最后弹出提示文本"底部脚本"。
对于导入的JavaScript文件，也将按照<script>标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。
JS中如何注释：
1.单行注释：
在javaScript中我们可以使用//来进行注释，//只对当前行有效，如下：
document.write(23); //这里输出了一个23
//下面定义了两个变量
var x=20;
var y=23;2.多行注释：
在JavaScript我们可以使用/**/来进行注释,其中/*是开头，*/是结尾，里面的所有内容都是注释，示例如下：
document.write("<h1>bilibili：https://www.bilibili.com/</h1>");
/*document.write(23); 这里输出了一个23
下面定义了两个变量
var x = 20;
var y = 23;*/JavaScript的基本概念：
JavaScript的几个简单概念包括标识符，关键字，保留字，大小写和字面量，这些都是JavaScript的基本组成。
1.标识符：
标识符(Identifier),就是名字，JavaScript中的标识符包含了变量名，函数名，参数名，属性名，类名等等
定义标识符的时候应该注意的是:
- 第一个字符必须是字符，下划线(_)或美元符号($).
- 除了第一个字符以外，其他位置可以使用Unicode字符，一般建议使用ASCII编码的字母，不建议使用双字节的字符。
- 不能与JavaScript关键字，保留字重名。
- 可以使用Unicode转义序列，如字符a可以使用"\u0061"表示。
下面示例中，arr就是变量的名字：
var arr="https://www.bilibili.com/";
document.write(arr);
第一行代码定义了一个变量，名字为arr，第二行通过arr这个名字使用了变量。
2.关键字：
关键字(Keyword)是JavaScript语言内容的一组名字(或称为命令)，这些名字具有特定的用途，用户不能自定义同名的标识符，具体说明如表:
| break | delete | if | this | while |
| case | do | in | throw | with |
| catch | else | instanceof | try | continue |
| finally | new | typeof | debugger(ECMAScript5新增) | for |
| return | var | default | function | switch |
| void |
3.保留字：
保留字就是JavaScript语言内部预备使用的一组名字(或称为命令)，这些名字目前还没有具体的用途，是为JavaScript升级版预留备用的，建议用户不要使用，具体说明如表：
| abstract | double | goto | native | static | boolean |
| enum | implements | package | super | byte | export |
| import | private | synchronized | char | extends | int |
| protected | throws | class | final | interface | public |
| transient | const | float | long | short | volatile |
ECMAScript 3将Java所有关键字都列为保留字，而ECMAScript 5规定较为灵活，如：
在非严格模式下，仅规定class，const，enums，export，extends，import，super为保留字，其他ECMAScript 3保留字可以自由使用；
在严格模式下，ECMAScript 5变得更加谨慎，严格限制implements，interface，let，package，private，protected，public，static，yield，eval(非保留字)，arguments(非保留字)的使用。
JavaScript预定了很多全局变量和函数，用户也应该避免使用他们，如表：
| arguments | encodeURL | Infinity | Number | RegExp |
| Array | encodeURLComponent | isFinite | Object | String |
| Boolean | Error | isNaN | parseFloat | SyntaxError |
| Data | eval | JSON | parseInt | TypeError |
| decodeURL | EvalError | Math | RangeError | undefined |
| decodeURLComponent | Function | NaN | ReferenceError | URLError |
不同的JavaScript运行环境都会预定义一些全局变量和函数，上表列出的是仅针对Web浏览器运行环境。
无论是在严格模式下还是在非严格模式下，都不要使用变量名，函数名或者属性名时使用上面的保留字，以免入坑。
4.区分大小写：
JavaScript严格区分大小写，所以arr和Arr是两个不同的标识符。
为了避免输入混乱和语法错误，建议采用小写字符编码写代码，在一些特殊情况可以使用大写形式：
1）构造函数的首字母建议大写。构造函数不同于普通函数。
2）如果标识符由多个单词组成，可以考虑使用驼峰命名法--除首个单词外，后面单词的首字母大写。
5.直接量：
字面量(Literal)也叫直接量，就是具体的值，即能够直接参与运算或显示的值，如字符串，数值，布尔值，正则表达式，对象直接量，数组直接量，函数直接量等等。
下面示例分别定义不同类型的直接量：字符串，数值，布尔值，正则表达式，特殊值，对象，数组和函数。
//空字符串直接量
1 //数值直接量
true//布尔值直接量
/a/g//正则表达式直接量
null//特殊值直接量
{}//空对象直接量
[]//空数组直接量
function(){}//空函数直接量，也就是函数表达式最后祝愿大家一路前行不忘初心：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
标签：
相关文章
最新发布
点击排行
本站推荐
