男友布置的任务之-JS红宝书每日一讲

---

第一章什么是JavaScript

感觉不是很重要哈哈哈，但是确实很有必要了解呀~

---

1.1、JavaScript历史回顾

诞生原因？：为验证简单的表单而需要大量与服务器的往返通
信

填写完表单，单击“提交”按钮，等 30 秒处理，然后看到一条消息，告诉你有一个必填字段没填。

谁来做的呢？：网景（当时引领技术革新的公司），JS之父- Brendan Eich（布兰登·艾克），其实还和Sun公司结为开发联盟，共同完成
做的事情？：开发一个客户端脚本语言来处理这种简单的数据验证
具体的过程？：

                  网景                       |                 微软
 Netscape Navigator 2中第一版 JavaScript
 Netscape Navigator 3中 JavaScript1.1
                  不久                         IE3包含自己名为 JScript（叫这个名字是为了免与网景发生许可纠纷）的 JavaScript 实现
                  打击  <--------------------- 重磅进入 Web 浏览器领域
 

两个版本的 JavaScript：Netscape Navigator 中的 JavaScript，以及 IE 中的 JScript带来的问题->没有规范其语法或特性的标准
标准化：
谁？：Ecma TC39（欧洲计算机制造商协会-第 39 技术委员会）
干什么？：“标准化一门通用、跨平台、厂商中立的脚本语言的语法和语义”
结果？： ECMA-262（发音为“ek-ma-script”）新的脚本语言标准。
最终进程：
标准出来1年后，我出生前一年1998 年，国际标准化组织（ISO）和国际电工委员会（IEC）也将 ECMAScript 采纳为标准（ISO/IEC-16262）。自此以后，各家浏览器均以 ECMAScript 作为自己 JavaScript 实现的依据，虽然具体实现各有不同。

1.2、什么是JavaScript？

JavaScript（简称“JS”）

• 是一门用来与网页交互的脚本语言。 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。
• 虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript
• 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

1.3、JavaScript与ECMAScript的关系？

基本同义但准确来说是一种包含关系（看图）
JavaScript组成：

1. 核心ECMAScript，描述了该语言的语法和基本对象。
2. 文档对象模型（DOM，Document Object Model），是一个应用编程接口（API），用于在 HTML 中使用扩展的 XML。DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点，包含不同的数据。DOM 通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用 DOM API，
   可以轻松地删除、添加、替换、修改节点。
3. 浏览器对象模型（BOM），用于支持访问和操作浏览器的窗口。

1.4、JavaScript的不同版本？

多数浏览器对 JavaScript 的支持，指的是实现 ECMAScript 和 DOM 的程度。
原因：Netscape/Mozilla仍然沿用这种版本方案。而 IE 的 JScript 有不同的版本号规则。这些 JScript 版本与上表提到的 JavaScript 版本并不对应。

1.5、第一章小结

JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。

1. ECMAScript：由 ECMA-262 定义并提供核心功能。
2. 文档对象模型（DOM）：提供与网页内容交互的方法和接口。
3. 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口。

JavaScript 的这三个部分得到了五大 Web 浏览器（IE、Firefox、Chrome、Safari 和 Opera）不同程度的支持。
所有浏览器基本上对 ES5提供了完善的支持，而对ES6和ES7的支持度也在不断提升。这些浏览器对 DOM 的支持各不相同，但对 Level 3 的支持日益趋于规范。
HTML5 中收录的 BOM 会因浏览器而异，不过开发者仍然可以假定存在很大一部分
公共特性。

第二章HTML 中的 JavaScript

2.1、使用</Script>元素

2.1.1 标签位置

• </head>标签：
  过去</vscript> 元素都被放在页面的 </head> 标签内,意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。
• </body> 标签：
  现代 Web 应用程序通常将所有 JavaScript 引用放在 </body> 元素中的页面内容后面。页面会在处理 JavaScript 代码之前完全渲染页面。
  用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

2.1.2 推迟执行脚本

defer 属性：

• 告诉浏览器立即下载，但延迟执行。
• 会在浏览器解析到结束的<\html> 标签后才会执行。
• 只对外部脚本文件才有效。
  

2.1.3 异步执行脚本

async 属性（不推荐）:

• defer 类似。只适用于外部脚本，都会告诉浏览器立即开始下载。
• 与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行。例子中，第二个脚本可能先于第一个脚本执行
• 告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到
  该异步脚本下载和执行后再加载其他脚本。
• 异步脚本保证会在页面的 load 事件前执行，但可能会在 DOMContentLoaded （参见第 17 章）之前或之后。

2.1.4 动态加载脚本

除了 </script> 标签，还有其他方式可以加载脚本。因为 JavaScript 可以使用 DOM API，所以通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。

2.1.5 XHTML 中的变化

可扩展超文本标记语言（XHTML，Extensible HyperText Markup Language）是将 HTML 作为 XML的应用重新包装的结果。

这种格式适用于所有现代浏览器。不支持 CDATA 块的非 XHTML兼容浏览器都行。

2.2、行内脚本与外部脚本的比较

推荐使用外部文件：

• 可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
• 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
• 适应未来。通过把 JavaScript 放到外部文件中，就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。

2.3、确保 JavaScript 不可用时的用户体验

</noscript> 元素:

• 浏览器不支持脚本；
• 浏览器对脚本的支持被关闭。
• 任何一个条件被满足，包含在 </noscript> 中的内容就会被渲染。否则，浏览器不会渲染 </noscript>中的内容。

2.4、第二章小结

JavaScript 是通过 </script> 元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可以总结如下。

• 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
• 所有 </script> 元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在 </script> 元素中的代码必须严格按次序解释。
• 对不推迟执行的脚本，浏览器必须解释完位于 </script> 元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把 </script> 元素放到页面末尾，介于主内容之后及 </body> 标签之前。
• 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
• 可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
• 通过使用 </noscript> 元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则 </noscript> 元素中的任何内容都不会被渲染。