W.T.的博客

Every day to be a little better

前端-JS学习笔记-HTML中的JavaScript

发表于 更新于 分类于
本文字数： 4.9k 阅读时长 ≈ 4 分钟
<script>元素，js编写方式，script标签位置，执行js脚本的顺序，编写JavaScript注意事项，<noscript>元素

1. <script>元素

  • 将JavaScript插入HTML的主要方法是使用 <script>元素

  • <script>元素由网景公司创造，后来正式被加入到HTML规范

  • <script>元素有8个属性

1.1. async

  • 告诉浏览器立即下载脚本，但不保证脚本的次序执行
  • 告诉浏览器不必等脚本下载和执行完后再加载页面，同样不必等到异步脚本下载和执行后再加载其他脚本
  • 只对外部脚本文件有效

1.2. defer

  • 告诉浏览器立即下载脚本
  • 但是脚本会被延迟到整个页面都解析完毕后运行
  • 只对外部脚本文件有效

1.3. charset

  • 使用src属性指定代码字符集

1.4. crossorigin

  • 配置相关请求的跨资源共享设置
  • crossorigin = “anonymous” 配置文件请求不必设置凭据标志
  • crossorigin = “use-credentials” 设置凭据标志

1.5. interity

  • 比对接收到的资源和指定的加密签名以验证子资源完整性
  • 如果不匹配，页面会报错，脚本不会执行

1.6. language

  • 废弃
  • 最初用于表示代码块中的脚本语言(JavaScript，JavaScript1.2，VBScript等)

1.7. src

  • 指定外部文件地址

1.8. type

  • 代替language，表示代码块中脚本语言的内容类型(MIME类型)
  • 值可以为
    • text/javascript：废弃
    • text/ecmascript：废弃
    • application/x-javascript
    • appplication/javascript
    • application/ecmascript
    • module：作为es6模块，匹配代码中的import/export关键字

2. JavaScript的编写方式

2.1. 行内式-HTML代码行内

1
2
3
4
<body>
  <input type="button" value="点击一下" onclick="alert('Hello World')">
  <a href="javascript:alert('Hello World')"></a>
</body>

2.2. 内嵌式-script标签中

  • 嵌入行内JavaScript代码，直接把代码放在<script>元素中
  • 包含在script标签内的代码会被从上到下解释
1
2
3
4
5
6
7
8
9
<body>
  <input type="button" value="点击一下">
  <script>
    const button = document.querySelector("input");
    button.onclick = function(){
      alert('Hello World');
    }
  </script>
</body>

  • 要注意行内代码中不能出现字符串</script>，浏览器解析行内脚本时看到字符串</script>就会当作script的结束标签。为了避免这个问题，需要使用转义字符\

    1
    2
    3
    4
    5
    6
    <script>
      // Unterminated string literal.
      console.log("</script>");

    	console.log("<\/script>");
    </script>

2.3. 外联式-外部的script文件

  • 需要通过src属性来引入JavaScript文件

    1
    2
    3
    4
    <body>
      <input type="button" value="点击一下">
    	<script src="index.js"></script>
    </body>

    Index.js

    1
    2
    3
    4
    const button = document.querySelector("input");
    button.onclick = function(){
      alert('Hello World');
    }

  • 使用了src属性的script元素不能在<script></script>标签中再包含其他代码。如果两者存在浏览器只会下载并执行脚本文件，忽略行内代码

    1
    2
    3
    4
    5
    6
    <body>
      <input type="button" value="点击一下">
    	<script src="index.js">
        console.log("<\/script>");
      </script>
    </body>

  • src属性值可以是一个完整的，和HTML页面不在同一个域的URL

    1
    <script src="https://r.bing.com/rs/7b/xb/nj/jQ1w07qyCcc9l2abcuV-aLzD-d8.js"></script>
    • 浏览器在解析这个资源时会向src属性指定的路径发送一个GET请求，取回相应资源
    • 这个请求不受浏览器同源策略限制但受父页面HTTP/HTTPS协议限制，而返回被执行的JavaScript受浏览器同源策略限制

  • 浏览器会根据特定的设置缓存所有外部链接的JavaScript文件。对于不同页面引用同一个JavaScript文件时，该js文件只需被下载一次，加快页面记载速度

3. script标签位置

  • 所有<script>元素都被放在页面的<head>标签内

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
      <head>
        <script src="a.js"></script>
        <script src="b.js"></script>
      </head>
      <body>
        <!-- 页面内容 -->
      </body>
    </html>
    • 是为了把外部的CSS和JavaScript文件都集中放在一起，但也意味着必须等JavaScript代码都下载，解析和解释完才能开始渲染页面
    • 页面在浏览器解析到<body>起始标签时才开始渲染
    • 这会导致页面渲染的明显延迟，使得在此期间浏览器窗口完全空白

  • 将所有JavaScript引用放在<body>元素中页面内容最后

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
      <head>
        <!-- ... -->
      </head>
      <body>
        <script src="a.js"></script>
        <script src="b.js"></script>
      </body>
    </html>
    • 页面会在处理JavaScript代码之前完全渲染页面

4. 执行JavaScript脚本

4.1. 顺序执行脚本

  • 浏览器会按照<script>在页面中出现的顺序依次解释脚本

  • 必须等到上一个脚本解释完才能开始下一个

4.2. 推迟执行脚本

  • <script>元素中的defer属性表示告诉浏览器应该立即开始下载脚本，但执行推迟
  • 使得脚本在执行时不会改变页面结构
  • 因此脚本完全可以在整个页面解析完之后运行

a.js

1
console.log("js-a");

b.js

1
console.log("js-b");

完整html

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <script src="a.js" defer></script>
		<script src="b.js" defer></script>
  </head>
  <body>
    <script>
      console.log("js-html");
    </script>
  </body>
</html>

输出结果

1
2
3
js-html
a
b
  • 上述代码中<script>元素包含在页面的<head>中，但是会在浏览器解析到html结束标签后才执行
  • HTML5规范脚本按照出现顺序执行，因此第一个推迟的脚本执行后才会执行第二个，依次执行
  • 但是推迟的脚本都会在DOMContentLoaded事件之前执行完

4.3. 异步执行脚本

  • <script>元素中的async属性表示告诉浏览器不必等脚本下载和执行完再加载页面，同样不必等异步脚本下载和执行后在下载其他脚本
  • 从改变脚本处理方式上看，defer和async属性类。但是不同于defer属性的是，async不保证多个外部脚本执行顺序
  • 异步脚本会在页面的load事件前执行，可能在DOMContentLoaded事件之前或之后
1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <script src="a.js" async></script>
		<script src="b.js" async></script>
  </head>
  <body>
    <script>
      console.log("js-html");
    </script>
  </body>
</html>

执行结果

1
2
3
js-html
js-b
js-a

5. JavaScript编写的注意事项

5.1. script元素不能写成单标签

  • 在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签
  • 即不能写成 <script src=”index.js”/>

5.2. 省略type属性

  • 在以前的代码中，script标签中会使用 type=“text/javascript”
  • 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言

5.3. 加载顺序

  • 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序
  • 推荐将JavaScript代码和编写位置放在body子元素的最后一行

5.4. 严格区分大小写

  • HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写

6. noscript元素

  • 针对早期浏览器不支持 JavaScript 的问题，noscript元素被用于给不支持 JavaScript 的浏览器提供替代内容

    1
    2
    3
    4
    5
    <body>
      <noscript>
        <p>您的浏览器不支持或者关闭原型JavaScript</p>
      </noscript>
    </body>

  • 下面的情况下, 浏览器将显示包含在noscript中的内容

本文结束  感谢您的阅读