JavaScript笔记(二)
读书笔记
《JavaScript高级程序设计(第4版)》
HTML中的JavaScript
JavaScript是通过<script>元素插入到HTML页面中的。
- 要包含外部JavaScript文件,必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上,也可以位于完全不同的域。
- 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下,包含在<script>元素中的代码必须严格按次序解释。
- 对不推迟执行的脚本,浏览器必须解释完位于<script>元素的代码,然后才能继续渲染页面的剩余部分。为此,通常应该把<script>元素放到页面末尾,介于主内容之后及</body>标签之前。
- 可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
- 可以使用async属性表示脚本不需要等待其他脚本,同时也不阻塞文档渲染,即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
- 通过使用<noscript>元素,可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本,则<noscript>元素中的任何内容都不会被渲染。
内容概要
2.1 <\script>元素
将JavaScript插入HTML的主要方法是使用<script>元素。
<script>元素有8个属性。
-
async:可选。表示应该立即开始下载脚本,但不能阻止其他页面动作,比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
-
charset:可选。使用src属性指定的代码字符集。
-
crossorigin:可选。配置相关请求的CORS(跨源资源共享)设置。默认不使用CORS。
//配置文件请求不必设置凭据标志 crossorigin="anonymous" //设置凭据标志,意味着出站请求会包含凭据 crossorigin="use-credentials"
-
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
-
integrity:可选。允许接收到的资源和指定的加密签名以验证子资源完整性(SRI,Subresource Integrity)。
-
language:废弃。最初用于表示代码块中的脚本语言(如"JavaScript"、“JavaScript 1.2” 或 “VBScript”)。
-
src:可选。表示包含要执行的代码的外部文件。
-
type:可选。代替language,表示代码块中脚本语言的内容类型(也称MIME类型)。
使用<script>的方法:
-
直接在网页中嵌入JavaScript代码。
包含在<script>内的代码会被从上到下解释。在<script>元素中的代码被计算完成之前,页面的其余内容不会被加载,也不会被显示。//嵌入行内JavaScript代码 <script> function sayHi() { console.log("Hi!"); } </script>
在使用行内JavaScript代码时,要注意代码中不能出现字符串</script>,否则会导致浏览器报错。
//使用转义字符" \" <script> function sayHi() { console.log("<\/script>"); } </script>
-
在网页中包含外部JavaScript文件。
使用src属性。这个属性的值是一个URL,指向包含JavaScript代码的文件。比如:<script src="example.js"></script>
与解释行内JavaScript一样,在解释外部JavaScript文件时,页面也会阻塞。(阻塞时间也包含下载文件的时间。)
在XHTML文档中,可以忽略结束标签。
2.1.1 标签位置
过去,所有<script>元素都被放在页面