《JavaScript高级程序设计》研读（一）——JS简介与在HTML中使用JavaScript-CSDN博客

本文链接：https://blog.csdn.net/TalonZhang/article/details/82710453

前言：

本来打算学习一下主流的前端框架，但是在学习的过程中，深深地感受到了自己基础的薄弱，对很多js的基础知识一知半解，尤其是一些比较冷门或者涉及到底层知识的问题。因此决定先把根基打牢，准备研读一下《JavaScript高级程序设计》，俗话说磨刀不误砍柴工嘛。
大一时候刚接触前端，心血来潮买了这本书，结果看了没几页就扔到一边去了。一方面是页数实在太多，更主要的是因为当时对于JS完全零基础，阅读起来难度较大。而且书中内容偏理论，不像一些实战类教程看了就能上手做项目。
现在再拿起这本书，读起来已经不像最初一样不知所云了。在看了章节目录和随意翻阅了几章之后，发现这本书写的真的非常好，十分的有条理，而且书中内容几乎涵盖JavaScript中所有的知识。因此决定将《JavaScript高级程序设计》作为第一块“磨刀石”。
写这篇博客的目的主要是记录一下书中的知识点，方便将来回首整理。

第一章 JS简介

1. JavaScript的实现由三部分组成：

核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）

2. ECMAScript，提供核心语言功能：

ECMA-262定义了这门语言的基础，主要包含了：语法、类型、语句、关键字、保留字、操作符、对象。

3. DOM，提供访问和操作网页内容的方法和接口：

文档对象模型（DOM，Document Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构，开发人员通过DOM提供的API来对这些节点进行增删查改等操作。

4. BOM，提供与浏览器交互的方法和接口：

浏览器对象模型（BOM，Browser Object Model），开发人员可以通过BOM控制浏览器显示的页面以外的部分。例如弹出新浏览器窗口、移动缩放关闭浏览器等等。

第二章在HTML中使用JavaScript

1. <script>元素:

使用<script>元素的方式有两种：直接在页面嵌入JavaScript代码和包含外部JavaScript文件

1.1 使用<script>元素嵌入JavaScript代码

在使用<script>元素嵌入JavaScript代码时，只需要为<script>指定type属性。然后像下面这样把JavaScript代码直接放在元素内即可：

<script type="text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>

注意：
包含在<script>元素内部的JS代码将被从上至下依次解释。
在使用<script>嵌入JS代码时，要保证在代码的任何地方不能出现“</script>”字符串，因为按照解析规则，会认为这是结束标签。可以通过转义字符“\”解决，例如：

<script type="text/javascript">
    function sayScript(){
        alert("<\/script>");
    }
</script>

1.2 通过<script>元素包含外部JavaScript文件

如果通过<script>元素来包含外部JS文件，那么必须填写 src 属性，这个属性的值是一个指向外部JS文件的链接，例如：

<script type="text/javascript" scr="example.js"></script>

注意：
1. 带有 src 属性的<script>元素不应该在<script>和</script>标签之间再包含额外的JS代码。如果嵌入了代码，则嵌入的代码会被忽略。
2. 通过<script>元素的 src 属性还可以包含来自外部域的JS文件，即它的 src 属性可以指向当前HTML页面所在域之外的某个域中的完整 URL，例如：

<script type="text/javascript" scr="http://www.somewhere.com/afile.js"></script>

1.3 标签的位置

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中，但是对于需要很多JS代码的页面来说，会导致浏览器在呈现页面时出现明显的延迟。因此，现代 web 应用程序一般会把全部JS引用都放在<body>元素中页面的后面。如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
        <!-- 页面内容 -->
        <script type="text/javascript" scr="example1.js"></script>
        <script type="text/javascript" scr="example2.js"></script>
    </body>
</html>

这样，在解析包含的 JS 代码之前，页面的内容将完全呈现在浏览器中。

1.4 延迟脚本

HTML 4.01 为<script>标签定义了 defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
        <!-- 页面内容 -->
        <script type="text/javascript" defer="defer" scr="example1.js"></script>
        <script type="text/javascript" defer="defer" scr="example2.js"></script>
    </body>
</html>

注意：
HTML5 规范要求脚本按照出现的先后顺序执行，并且脚本会先于 DOMContentLoaded 事件执行但是，延迟脚本并不按照顺序执行，也不一定会在 DOMContentLoaded 事件触发前执行，因此最好只包含一个延迟脚本。

1.5 异步脚本

HTML5 为<script>元素定义了 async 属性。与 defer 类似，都用于改变处理脚本的行为，同样也只适用于外部脚本文件。但与 defer 不同的是，标记为 async 的脚本并不保证按照指定他们的先后顺序执行。例如：

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
        <!-- 页面内容 -->
        <script type="text/javascript" async scr="example1.js"></script>
        <script type="text/javascript" async scr="example2.js"></script>
    </body>
</html>

注意：
1. 在以上代码中，第二个脚本可能会在第一个脚本之前执行。因此，确保两者之间互不依赖非常重要。
2. 指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，异步脚本最好不要在加载期间修改DOM.
3. 异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。

1.6 在 XHTML 中的语法（暂不介绍）

2. 使用外部文件的优点：

可维护性：JS文件集中存放，维护相对轻松
可缓存：浏览器能够缓存外部JS文件，当多个页面使用同一文件时只需下载一次。
适应未来：对于 HTML 和 XHTML 来说语法是相同的。

3. 文档模式：

混杂模式
标准模式

4. <noscript>元素：

适用场景：
1. 浏览器不支持脚本
2. 浏览器支持脚本，但脚本被禁用
当出现上述情况时，浏览器会显示<noscript>中的内容。除此之外，浏览器中不会呈现<noscript>中的内容。

<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" scr="example1.js"></script>
    </head>
    <body>
        <noscript>
            <p>本页面需要浏览器支持（启用）JavaScript。</p>
        </noscript>
    </body>
</html>