文章目录

第一章什么是JavaScript
1.1、JavaScript历史回顾
1.2、什么是JavaScript？
1.3、JavaScript与ECMAScript的关系？
1.4、JavaScript的不同版本？
1.5、第一章小结
第二章HTML 中的 JavaScript
2.1、使用<\/Script>元素
- 2.1.1 标签位置
- 2.1.2 推迟执行脚本
- 2.1.3 异步执行脚本
- 2.1.4 动态加载脚本
- 2.1.5 XHTML 中的变化
2.2、行内脚本与外部脚本的比较
2.3、确保 JavaScript 不可用时的用户体验
2.4、第二章小结

第一章什么是JavaScript

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

1.1、JavaScript历史回顾

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

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

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

                  网景                       |                 微软Netscape Navigator 2中第一版 JavaScriptNetscape 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组成：

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

1.4、JavaScript的不同版本？

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

1.5、第一章小结

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

ECMAScript：由 ECMA-262 定义并提供核心功能。
文档对象模型（DOM）：提供与网页内容交互的方法和接口。
浏览器对象模型（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> 元素中的任何内容都不会被渲染。

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

JS红宝书·读书笔记
JavaScript高级程序设计花了半个多月的时间,终于又把"JS红宝书"又撸了一遍. 第一次读"JS红宝书"还是2015年初学JS的时候,那时候只是把语法部 ...
JS红宝书学习记录（四）
js红宝书13-19 事件事件处理程序 DOM0级事件处理程序:on+事件名,如onresize,onload等 DOM2级事件处理程序: addHandler: (element, type, h ...
【JS红宝书学习】9客户端检测
因为浏览器间存在大大小小的差异以及怪癖(quirk),开发人员应当优先采取一种更通用的方法,然后在使用特定于浏览器的技术增强该方案.当然这是红宝书的观点,是一种渐进增强的观点,还有与之相对的优雅降级思 ...
js 红宝书学习笔记精简版第一至三章
注: 本文js代码均已在本地实现过,如有异常问题,请在评论区留言.ctrl+f 可搜索有效内容, 加粗为重点蓝色字体为重中之重 (一) 什么是js 1995 年,JavaScript 问世. 完整 ...
javascript 高级程序设计_JavaScript 经典「红宝书」，几代前端人的入门选择
人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...
《JavaScript高级程序设计（第四版）》红宝书学习笔记（1）
个人对第四版红宝书的学习笔记.不适合小白阅读.这是part1,包含原书第二章(HTML中的Javascript)和第三章(语言基础).持续更新,其他章节笔记看我主页. (记 * 的表示是ES6新增的知 ...
《JavaScript高级程序设计》红宝书第二遍阅读（动手实践）
<JavaScript高级程序设计>红宝书第二遍阅读(动手实践) 第1章--什么是JavaScript 第2章--HTML中的JavaScript 第3章--语言基础第4章--变量.作用 ...
《JavaScript高级程序设计》红宝书第一遍阅读（了解概念）
<JavaScript高级程序设计>红宝书第一遍阅读(了解概念) 第1章--什么是JavaScript 第2章--HTML中的JavaScript 第3章--语言基础第4章--变量.作用 ...
红宝书初步研读随手笔记
红宝书初步研读系列–第一二三章红宝书第一遍研读,知识点整理–随手笔记第一章什么是JavaScriptS 1.1. JavaScript包括: ECMAScript (核心)DOM(文档对象模型) ...

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