JavaScript的学习
1 JavaScript概述
1.1 JavaScript的作用
| 技术 | 作用 |
|---|---|
| HTML | 用于创建网页的结构 |
| CSS | 对页面进行美化 |
| javaScript | 用于与用户进行交互 |
1.2 JavaScript的历史
1995 年 2 月，Netscape 公司发布 Netscape Navigator 2 浏览器，并在这个浏览器中免费提供了一个开发工具——LiveScript。由于当时 Java 比较流行，Netscape管理层希望它外观看起来像java，因此便把 LiveScript 改名为 JavaScript,但实际上它的语法风格与其他语言更像。这也是最初的 JavaScript 1.0版本。
由于 JavaScript 1.0 很受欢迎，Netscape 在 Netscape Navigator 3 中又发布了 JavaScript 1.1 版本。不久，微软在 Internet Explorer 3 中也加入了脚本编程功能。为了避免与 Netscape 的 JavaScript 产生纠纷，微软特意将其命名为 JScript。
1997 年，欧洲计算机制造商协会（ECMA）以 JavaScript 1.1 为基础制订了脚本语言标准——ECMA-262，并命名为 ECMAScript。
1998 年，国际标准化组织和国际电工委员会（ISO/IEC）采用了 ECMAScript 标准（即 ISO/IEC-16262）。自此，浏览器厂商就以 ECMAScript 作为各自 JavaScript 实现的规范标准。JavaScript 正式从各自为政走向了规范统一。
1.3 ECMAScript 起源
1997 年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了脚本语言的实现标准，并将这种语言命名为 ECMAScript。这个版本就是 ECMAScript 1.0 版。
之所以不叫 JavaScript，主要有以下两个原因：
- 商标限制。Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法使用JavaScript 这个名字，而且 JavaScript 己经被 Netscape 公司注册为商标。
- 体现公益性。该标准的制订者是 ECMA 组织，而不是 Netscape 公司，这样有利于确保规范的开放性和中立性。
简单概括，ECMAScript 是 JavaScript 语言的规范标准，JavaScript 是 ECMAScript 的一种实现。注意，这两个词在一般语境中是可以互换的。
以下是JS语言在所有语言中的排行榜。
2020 年 7 月编程语言排行榜
1.4 JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript 灵活轻巧，兼顾函数式编程和面向对象编程。
Java 与 JavaScript 对比：
| 特点 | java | javaScript |
|---|---|---|
| 面向对象 | 完全面向对象的语言：继承、封装、多态 | 基于对象的语言，不完全符合面向对象的思想 |
| 运行方式 | 运行过程需要先生成字节码文件 | 解释型语言，不会生成中间文件，解释一定行数，再执行。 |
| 跨平台 | 安装了JVM就可以运行在不同的操作系统中 | 只要有浏览器的地方就可以运行 |
| 大小写 | 区分大小写 | 区分大小写 |
| 数据类型 | 强类型语言，不同的数据类型有严格区分 | 弱类型语言，不同类型的数据可以直接赋值给同一个变量 |
1.5 JavaScript的语法组成
ECMAScript 是 JavaScript 的标准，但它并不等同于 JavaScript，也不是唯一被标准化的规范。
实际上，一个完整的 JavaScript 实现由以下 3 个不同部分组成：
| 组成部分 | 作用 |
|---|---|
| ECMA Script | 构成了JS核心的语法基础 |
| BOM | Browser Object Model 浏览器对象模型，用来操作客户端和浏览器窗口上的对象 |
| DOM | Document Object Model 文档对象模型，用来操作网页中的元素 |
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳
1.5.1 ECMAScript 版本
JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式 添加try/catch |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 | 添加“strict mode”，严格模式 添加JSON支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符(**) 增加 Array.prototype.includes |
ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。
1.6 浏览器支持
目前 5 大主流浏览器都支持 ECMAScript 5，具体说明如下：
- Opera 11.60+
- IE 9+
- Firefox 4+
- Safari 5.1+
- Chrome 13+
练习：编写第一个JavaScript程序
<script type="text/javascript">
alert("我的第一个 JavaScript 程序");
</script>
2 JavaScript的基础语法
2.1 JavaScript的编写方式
- 写在HTML内部的脚本,在
<script>标签体中编写js代码，脚本可被放置在 HTML 页面的<body>和<head>部分中。
<head>
<script type="text/javascript">
// JavaScript 代码
</script>
</head>
<body>
<script type="text/javascript">
// JavaScript 代码
</script>
</body>
- 以js文件的形式单独存在HTML的外部，使用的时候使用script标签的src属性导入进来即可。
<script src="myScript.js" type="text/javascript"></scrip>
myScript.js 是一个 .js 格式的 JavaScript 文件。使用任何文本编辑器都可以编辑
2.1.1 < script> 标签:
<script>中的src属性和type属性：
- src：要导入的外部JS文件,一旦导入了其他的js文件,此标签体中的js代码就失效了
- type： 指定脚本的类型，固定值：text/javascript
<script>标签个数： 在一个HTML网页中可以出现多个script标签，每个标签中的脚本都会依次执行。- 出现的位置： 可以出现在网页中的任意位置，甚至是html标签之外,一般根据情况选择，最常用的是出现在
</body>前 - 关于语句后面的分号： 如果一条语句一行，可以省略分号，但不建议省略。
注意：
- 使用＜script＞标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。
- 定义 src 属性的
<script>标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。
2.1.2 JS文件延迟和异步加载
执行并观察如下代码：
<!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> 标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。
—般情况下，在文档的 <head> 标签中包含 JavaScript 脚本，或者导入的 JavaScript 文件。这意味着必须等到全部 JavaScript 代码都被加载、解析和执行完以后，才能继续解析后面的 HTML 部分。如果加载的 JavaScript 文件很大， HTML 文档解析就容易出现延迟，网页会出现留白现象。
为了避免这个问题，在开发 Web 应用程序时，建议把导入 JavaScript 文件的操作放在 后面，让浏览器先将网页内容解析并呈现出来后，再去加载JavaScript 文件，以便加快网页响应速度。
如果想改变 JavaScript 文件的执行顺序，可以给 <script> 标签增加 defer 或者 async 属性
2.1.2.1 延迟执行 JavaScript 文件
<script> 标签有一个布尔型属性 defer，设置该属性能够将 JavaScript 文件延迟到页面解析完毕后再运行。
<script src="myScript.js" defer type="text/javascript"></script>
注意：defer 属性适用于外部 JavaScript 文件（只有在使用 src 属性时），不适用于 <script> 签包含的 JavaScript 脚本。
在部分网站上你们会发现对于 defer 属性的描述是只有在 IE 浏览器中才生效，这个说法是错误的。
2.1.2.2 异步加载JavaScript文件
在默认情况下，网页都是同步加载外部 JavaScript 文件的，如果 JavaScript 文件比较大， 就会影响后面 HTML 代码的解析。上面提到一种解决方法：就是最后加载 JavaScript 文件。
现在可以为 <script> 标签设置 async 属性，让浏览器异步加载 JavaScript 文件，即在加载 JavaScript文件时，浏览器不会暂停，而是继续解析。这样能节省时间，提升响应速度。
<script type="text/javascript" async src="myScript.js"></script>
注意：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
async 是 HTML5 新增的布尔型属性，通过设置 async 属性，就不用考虑 <script> 标签的放置位置，用户可以根据习惯继续把很多大型 JavaScript 库文件放在 <head> 标签内。
2.1.3 JavaScript代码块
代码块就是使用 <script> 标签包含的 JavaScript 代码段。
2.1.4 JavaScript字符编码
JavaScript 遵循 Unicode 字符编码规则。Unicode 字符集中每个字符使用 2 个字节来表示，这意味着用户可以使用中文来命名 Java 变量。
Unicode 是 Latin-1 字符集的超集，编码数目达到百万级；Latin-1是 ASCII 字符集的扩展，包含 256 个拉丁字母； ASCII 字符集包含 128 个基本字符，即常用英文字母和符号。
var 书名="《JavaScript从入门到精通》",
姓名="张三";
function 彩蛋(谁){
document.write("<h1>" + 谁 + "</h1><p> 欢迎你学习 " + 书名 + "。</p>");
}
彩蛋(姓名);
注意：在 JavaScript第 1、2 版本中，仅支持 ASCII 字符编码，Unicode 字符只能出现在注释或者引号包含的字符串中。考虑到 JavaScript 版本的兼容性以及开发习惯，不建议使用双字节的中文字符命名变量或函数名。
2.2 JavaScript中的几个概念
JavaScript遵循 ECMA-262 规范，目前其最新版是 ECMAScript 2018，而获得所有主流浏览器完全支持的则是 ECMAScript 5。我们将以ECMAScript 5版本为基础，兼顾 ECMAScript 6 版本中获得较大支持的新特性进行介绍
2.2.1 基本词法
JavaScript 语法就是指构成合法的 JavaScript 程序的所有规则和特征的集合，包括词法和句法。简单描述如下：
- 词法定义了 JavaScript 的基本名词规范，包括字符编码、命名规则、标识符、关键字、注释规则、 运算符和分隔符等。
- 句法定义了 JavaScript的基本运算逻辑和程序结构，包括短语、句子和代码段的基本规则，如表达式、语句和程序结构等。
2.2.2 区分大小写
JavaScript 严格区分大小写。为了避免输入混乱和语法错误，建议采用小写字符编写代码。在以下特殊情况下可以使用大写形式：
- 构造函数的首字母建议大写。构造函数不同于普通函数
new Date(); //获取当前日期和时间
- 如果标识符由多个单词组成，可以考虑使用骆驼命名法——除首个单词外，后面单词的首字母大写
typeOf();
myGirlFriend;
上述都是约定俗成的一般习惯，不构成强制性要求，用户可以根据个人习惯进行命名
扫一扫
6686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
