JavaScript学习第二天

TimYang
155 阅读3分钟

第2章(上):HTML中的JavaScript

介绍:将JavaScript引入网页,首先要解决它和网页主导语言HTML关系,在早期:网景希望将JavaScript引入HTML页面同时,不会导致页面在其他浏览器渲染出问题,经过不断讨论达成了向网页引入通用脚本能力的共识。

2.1:<脚本script>元素

😱

  • async:可选,表示立即开始下载脚本,但不可阻止其他页面动作,比如下载资源或等待其他脚本加载，只对外部的脚本文件有效。
  • charset:可选,使用src属性指定的代码字符集,使用率低。
  • crossorigin:可选,配置相关请求的CORS(跨源资源共享)设置。默认是不使用CORS的。crossorigin="anonymous"配置文件请求是不必设置凭据标志。crossorigin="use-credentials"设置凭据标志,意味着出站请求会包含凭据。
  • defer:可选表示脚本延迟到文档完全被解析和显示之后再进行执行,只对外部的脚本文件有效:了解更多。
  • integrity:可选,允许比对接收到的资源和指定的加密签名来验证子资源完整性(SRI,Subresource Integrity)。如果接收到的资源和签名这个属性指定的签名不匹配,则会报错和脚本不执行,这个属性可以确保内容分发网络不会提供恶意内容(CDN，Content Delivery Network)。了解更多。
  • language:废弃,可以忽略。
  • src:可选,表示包含要执行的代码外部文件。
  • type:可选,代替language表示代码块中脚本语言的内容类型(MIME类型)。type值默认是"text/javascript","text/javascript"和"text/ecmascript"已经出局,type值如果是module会被当成ES6模块,会出现两个关键字导出和导入(export和import）

使用脚本

  1. 通过脚本<脚本script>直接在网页中嵌入JavaScript代码。
  2. 通过脚本<脚本script>在网页中包含外部JavaScript文件

如果要嵌入行内JavaScript代码,需要把代码放在<脚本script>元素中,例子如下:

<script>
  function spell() {
    console.log("spell")
}
</script>

❕注意事项:

  1. 包含在

  2. 使用行内JavaScript代码的时候,要注意代码中不能出现字符串</script>,除非使用转义字符""才可以避免,例子如下:

    <script>
  function nottypeScript() {
    console.log("<\/script>")
}
</script>

  3. 如果要包含外部文件中的JavaScript,就必须使用src属性,这个属性值是URL,指向包含JavaScript代码的文件:

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

    注意事项图片

  4. 使用了src属性的标签中包含其他JavaScript代码。如果两者都提供会导致浏览器值下载并执行脚本文件,而去忽略行内的代码

  5. script>元素一个最为强大同时也饱受争议的特性是:它可以包含来自外部域的JavaScript文件,跟元素相似, 

    <script src="http://www.somewhere.com/afile.js"></script>

  6. 浏览器在解析这个资源的时候会向src属性指定的路径发送一个GET请求以获得相应的资源,假定是一个JavaScript文件,这个初始的请求不受浏览器同源策略限制,但返回并被执行的JavaScript则受限制,当然,这个请求仍受父页面HTTP/HTTPS协议限制

  7. 来自外部域的代码会被当成加载它的页面的一部分来加载和解析,这个能力可以让我们通过不同的域分发JavaScript,不过饮用比尔服务器上的JavaScript文件时候要格外的小心,某些恶意的程序员随时可能替换了这个文件,要确保该域是安全的可信的来源<脚本script>标签的integrity属性就是来防范这问题可惜不是所有浏览器都支持

  8. 不管是什么代码,浏览器都会按照<脚本script>在页面依次解析,前提是没有使用defer与async属性

2.1.1: 标签位置

在过去的时候,所有的<脚本script>元素都会放在页面的标签内:

<!DOCTYPE html> 10 <html>
<head>
<title>Example HTML Page</title> <script src="example1.js"></script> <script src="example2.js"></script> </head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>

为什么这么做呢❔

解释:

主要的目的是把外部的CSS和JavaScript文件都集中放在一起,但是把所有的JavaScript文件都放在中,也就是意味必须把所有的JavaScript代码都下载,解析完成后,才能渲染页面(页面在浏览器解析到的起始标签才开始渲染),对于大量的JavaScript页面这会导致渲染延迟,此期间浏览器窗口完全空白,为了解决这个问题,现代Web用程序通常把所有的JavaScript饮用在元素中页面内容的后面,例子:

<!DOCTYPE html>
    <html>
<head>
<title>Example HTML Page</title> </head>
<body>
  <!-- 这里是页面内容 -->
  <script src="example1.js"></script> <script src="example2.js">      </script> 
</body>
</html>

2.1.2: 推迟执行脚本

HTML4.01为<脚本script>元素定义了一个叫defer的属性。这个属性表示脚本在执行的时候不会改变页面的结构,也就是说脚本会被延迟到整个页面解析完毕后再进行运行,所以,在<脚本script>元素上设置defer属性,相当于告诉浏览器立即下载,但延迟执行

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script defer src="example1.js"></script> 
<script defer src="example2.js"></script> 
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>

虽然这个例子中的<脚本script>元素包含在页面的中,但它们会在浏览器解析到结束的标签后才执行,HTML5规范要求脚本应该按照它们出现的顺序执行,因此第一个推迟的脚本会在第二个推迟的脚本之前执行,而且两者都会在DOMContentLoaded事件之前执行,因此最好包含一个这样的脚本.

如上述,defer属性只对外部脚本文件有效,这是HTML5中明确规定,因此支持HTML5的浏览器都会忽略行内脚本的defer属性

小总结:

<脚本script>元素有文章中八个属性,分别代表不同的作用,在之前学习javascript到这个部分的时候,根本就没管这是干什么用的,静下心来慢慢边抄书边总结才发现之前学的知识很散装的知识🥲,文章中指出非常多的注意事项,可以记住,如果实在记不住请记住这个知识点在哪里说过解释过

avatar
文章
阅读
粉丝