《JavaScript高级程序设计（第3版）》阅读总结记录第二章之在HTML中使用JavaScript

本章目录：

　　2.1 <script> 元素
　　　　2.1.1 标签的位置
　　　　2.1.2 延迟脚本
　　　　2.1.3 异步脚本
　　　　2.1.4 在XHTML 中的用法
　　　　2.1.5 不推荐使用的语法
　　2.2 嵌入代码与外部文件
　　2.3 文档模式
　　2.4 <noscript> 元素
　　2.5 总结

本章主要内容：

　　使用 <script> 元素

　　嵌入脚本与外部脚本

　　文档模式对 JavaScript 的影响

　　考虑禁用 JavaScript 的场景

2.1　　<script> 元素

可选元素：async 、charset 、defer 、src 、type

已废弃元素：language

<script type="text/javascript" charset="UTF-8" language="javascript"></script>

　　有 charset ，表示通过 src 属性指定的代码的字符，（由于此属性被大多浏览器忽略，因此很少用）；
　　有 language ，已废弃；
　　有 type ，可看是 language 的替代属性；表示编写代码的脚本语言的内容类型（也称为MIME类型）。

<script src="script.js"></script>

　　有 src ，表示包含要执行代码的外部文件；
　　没有 async 或 defer ，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
　　

<script async src="script.js"></script>

　　有 async ，加载和渲染后续加载文档的过程将和 script.js 的加载与执行并行进行（异步）。

<script defer src="script.js"></script>

　　有 defer ，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

注：

1）：在使用 <script> 嵌入JavaScript代码时，不可在代码中的任何地方出现“</script>”字符串，因为按照解析嵌入式代码的规则，当浏览器遇到字符串“</script>”的时候会认为是结束的 </script>标签。

解决方法：通过转义字符“/”

2）：<script src="index.js"> 此写法只是在 XHTML 文档中有效，不可在 HTML 文档中使用，因这种语法不符合 HTML 规范，而且也得不到有些浏览器的正确解析（尤其是 IE ）。

3）：带有 src 属性的 <script> 元素不应在其 <script> 和 </script> 标签之间再包含额外的 JavaScript 代码。否则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

2.2.1 标签的位置

按照传统做法应将所有的 <script> 元素都应该放在 <head> 元素中，如：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta http-equiv="content-type" content="text/html;charset=utf-8">

     <title>javaScript test</title>

     <script src="index.js"></script>

     <script src="main.js"></script>

 </head>

 <body>

 <!-- 这里是内容 -->

 </body>

 </html>

这种做法的目的是把所有的外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。但如果有多个 JavaScript 代码的页面时会导致浏览器在呈现页面时出现明显的延迟，在此期间浏览器窗口将是一片空白显示。为避免此问题现代 Web 应用程序一般会把全部 JavaScript 引用放在 <body> 元素中页面内容的后面，如：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta http-equiv="content-type" content="text/html;charset=utf-8">

     <title>javaScript test</title>

 </head>

 <body>

 　　 <!-- 这里是内容 -->

     <script src="index.js"></script>

     <script src="main.js"></script>

 </body>

 </html>

这样在解析包含 JavaScript 代码之前页面将会完全呈现在浏览器中，用户打开页面的速度也会加快。

2.1.2 延迟脚本

HTML 4.0 为 <script> 标签定义了 defer 属性，这个属性的用途是表明脚本在执行时不会影响页面的构造，即使我们按照传统的写法将 <script> 元素放在了文档的 <head> 元素中，其包含的脚本延迟到浏览器遇到 </html> 标签之后再执行，也就是说，脚本会被延迟到整个页面都解析完毕后再运行。

注：

defer 只适用于外部脚本文件。

2.1.3 异步脚本

HTML5 为 <script> 标签定义了 async 属性，这个属性与 defer 属性类似，都用于改变处理脚本的行为。与 defer 不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。如：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta http-equiv="content-type" content="text/html;charset=utf-8">

     <title>javaScript test</title>

     <script src="index.js" async="async" type="text/javascript"></script>

     <script src="main.js"  async="async" type="text/javascript"></script>

 </head>

 <body>

 <!-- 这里是内容 -->

 </body>

 </html>

以上使用了 async 的代码中，main.js 文件有可能会在 index.js 文件之前执行。

2.1.4 在XHTML中的用法

可扩展超文本标记语言，即 XHTML （Extensible HyperText Markup Language），是将 HTML 作为 XML 的应用重新定义的一个标准。编写 XHTML 代码的规则要比编写 HTML 严格得多。在 HTML 中，有特殊的规则用以确定 <script> 元素中的哪些内容可以被解析，但这些特殊的规则在 XHTML 中不适用。作为一名前端开发人员，HTML5正在快速地被使用，建议在学习开发中遵循 HTML5 标准。

2.1.5 不推荐使用的写法

不推荐使用语法是针对早期<script> 元素与传统元素 HTML 的解析规则有冲突而编写的语法。如：

以上写法是针对 Mosaic 对 JavaScript 的不支持而编写的方案。

2.2　　嵌入代码与外部文件

在 HTML 中嵌入 JavaScript 代码虽然没有问题，但最好的做法还是尽可能的使用外部文件来包含 JavaScript 代码。

使用外部文件的优点：
（1）可维护性
（2）可缓存
（3）适应未来

2.3　　文档模式

IE5.5 通过使用文档类型（docutype）引入了文档模式的概念。最初的两种文档模式是：混杂模式（quirks mode）和标准模式（standards mode）。
混杂模式会让 IE 的行为与（包含非标准特性的）IE5 相同，而标准模式则让 IE 的行为更接近标准模式行为。
两种模式主要影响 CSS 内容的呈现，在某些情况下也会影响到 JavaScript 的解释执行。

而后期，IE又提出一种准标准模式（almost standards mode）。除了在处理图片间隙的的时候有些不标准其他模式下的浏览器特性都是符合标准的。

对于标准模式，可通过下面任意一种文档类型来开启：

<!--HTML 4.01 严格型 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

<!--XHTML 1.0 严格型 -->

<!DOCTYPE html PUBLIC

        "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML 5  -->

<!DOCTYPE html>

对于准标准模式，可通过文档类型来开启：

<!--HTML 4.01 过渡型 -->

<!DOCTYPE HTML PUBLIC

        "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<!--HTML 4.01 框架集型 -->

<!DOCTYPE HTML PUBLIC

        "-//W3C//DTD HTML 4.01 Frameset//EN"

        "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 过渡型  -->

<!DOCTYPE html PUBLIC

        "-//W3C//DTD XHTML 1.0 Frameset//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!-- XHTML 1.0 框架集型  -->

<!DOCTYPE html PUBLIC

        "-//W3C//DTD XHTML 1.0 Frameset//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

总之，准标准模式和标准模式很接近，当我们提到“标准模式的时候”，也有可能是其中的一种，检测文档模式的时候也不会发现什么不同。

2.4　　<noscript>元素

包含在 <noscript> 元素中的内容只有在以下两种情况才会显示出来：

（1）：浏览器不支持脚本；

（2）：浏览器支持脚本，但脚本被禁用。

<html>

<head>

    <title>noscript age</title>

    <script type="text/javascript" defer="defer" src="js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" defer="defer" src="js/jquery-1.11.1.min.js"></script>

</head>

<body>

<noscript>

    <p>此页面需要浏览器支持（启用）JavaScript 。</p>

</noscript>

</body>

</html>

此页面会在脚本无效的情况下向用户显示一条信息，而启用了脚本的浏览器中，用户将看不到这条信息。

2.5　　小结

（1）：将 JavaScript 插入到 HTML 页面中要使用 <script> 元素；

（2）：在包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 URL；

（3）：所有的 <script> 元素都会按照它们在页面中出现的先后顺序依次被解析，

（4）：由于浏览器会先解析不使用 defer 属性的 <script> 元素中的代码，然后再解析后面的内容，所以一般把 <script> 元素放在页面最后，即主要内容后面，</body> 标签之前；

（5）：使用 defer 属性可以让脚本在文档完全呈现之后再执行；

（6）：使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。

如果文中有错误，非常感谢您指出，但请不要刻薄诋毁。

文章我会尽量添加一些实用的例子，方便理解阅读。

本文属于连载性随时更新文章。

个人属于中级程序媛，现于成都某公司任职Web前端开发，希望通过自己的学习然后巩固提升我的技术，大神勿喷，谢谢 /haha

《JavaScript高级程序设计（第3版）》阅读总结记录第二章之在HTML中使用JavaScript的更多相关文章

JavaScript高级程序设计第三版-读书笔记（1-3章）
这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript 提供核心语言功能 DOM 提供访问 ...
JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
JavaScript 高级程序设计 (第4版) 思维导图/脑图 All In One
JavaScript 高级程序设计 (第4版) 思维导图/脑图 All In One JavaScript 高级程序设计 (第4版) 思维导图下载 JavaScript 高级程序设计 (第4版) 脑图 ...
2.1 <script>元素【JavaScript高级程序设计第三版】
向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...
javascript高级程序设计第三版书摘
在HTML 中使用JavaScript <script>元素在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...
《Javascript高级程序设计第3版》精华总结
一.JavaScript简介 1.1 javascript简史 1.2 javascript实现 + javascript是一种专为网页交互而设计的一种脚本语言,javascript由三大部分组成 ...
【读书笔记】读《JavaScript高级程序设计-第2版》 - 非函数部分
章节列表: 第08章:BOM 第09章:客户端检测第10章:DOM 第11章:DOM2和DOM3 第12章:事件第13章:表单脚本第14章:错误处理与调试第17章:Ajax和JSON第20章: ...
DOM 操作技术【JavaScript高级程序设计第三版】
很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...
10.2 DOM 操作技术【JavaScript高级程序设计第三版】
很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

随机推荐

raw_input与input
raw_input 不管用户输入的是什么,最后打印的类型都会是str字符串类型 input 会根据用户的输入变换成相应的类型,但是需要注意的是我们用户在输入字符或者字符串的时候,需要给他们加上双引号, ...
java -jar和hadoop jar的区别
hadoop jar可以看做是java -jar的升级,可以和它一样带参数,程序一样的解析不同的是hadoop jar运行的jar包他会依赖于hadoop安装目录下面的一些环境,并且你jar包里指定 ...
P5304 [GXOI/GZOI2019]旅行者
题目地址:P5304 [GXOI/GZOI2019]旅行者这里是官方题解一个图 \(n\) 点 \(m\) 条边,里面有 \(k\) 个特殊点,问这 \(k\) 个点之间两两最短路的最小值是多少? ...
python自定义封装logging模块
#coding:utf-8 import logging class TestLog(object): ''' 封装后的logging ''' def __init__(self , logger = ...
WPF 10天修炼第十天- WPF数据绑定
WPF数据绑定数据绑定到元素属性是将源对象指定为一个WPF元素,并且源属性是一个依赖属性,依赖属性内置了变更通知.当改变源对象依赖属性值之后,绑定目标可以立即得到更新,开发人员不需要手动编写响应事件 ...
vue搭建app, M端项目流程
思路:安装sass预处理嵌套css,flex布局,flexible手机淘宝适配和fastclick移动300s延迟打开cmd,使用命令行 1.切换盘符:e: 2.使用vue建立一个项目,具体请看我的 ...
spring boot正常启动但是访问会找不到“ localhost 的网页”的错误
最近启动springboot项目访问localhost老报找不到网页,找了很久发现yml配置文件中配置了“context.path”,只要在端口号后面加上context.path地址就可以访问了. 如 ...
set操作
Set操作,Set集合就是不允许重复的列表 sadd(name,values) # name对应的集合中添加元素 scard(name) 获取name对应的集合中元素个数 sdiff(keys, *a ...
vue结构详解
相关文件和文件夹的含义: build 文件夹: 里面是对 webpack 开发和打包的相关设置,包括入口文件.输出文件.使用的模块等:config 文件夹: 主要是指定开发和打包中的静态资源路径.要压 ...
L1-049 天梯赛座位分配
L1-049 天梯赛座位分配 (20 分) 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i ...

《JavaScript高级程序设计（第3版）》阅读总结记录第二章之在HTML中使用JavaScript

《JavaScript高级程序设计（第3版）》阅读总结记录第二章之在HTML中使用JavaScript的更多相关文章

随机推荐

热门专题