只要一提到javascript,就不得不设计web的核心语言——HTML。在开发JavaScript的时候,网景要解决的一个重要问题就是如何让js既能与HTML页面共存,又不影响页面在浏览器中的脚本呈现。后来采取的方案就是为web增加统一的脚本支持。后来这些早期的做法被保存,并被正式纳入HTML规范当中。

2.1 <script> 元素

像HTML插入js的主要做法就是使用<script> 元素,HTML4.01为其定义了下列6个属性。

1、ansyc 可选。表示应该立即下载脚本但不应妨碍页面中的其他操作(异步),只对外部脚本文件有效

2、charset 可选。通过src指定代码的字符集。大多浏览器会忽略,很少有人用。

3、defer 可选。表示脚本可以延迟到文档被全部解析和显示之后再执行。只对外部脚本文件有效。ie7及更早版本也支持

4、language 已废弃。

5、src  可选。表示包含要执行代码的外部文件

6、type 可选。表示编写代码使用的脚本语言类型,默认text/javascript。

使用<script> 的方式有两种,外部引用和嵌入

嵌入式:

<script>
    function sayHi(){
        alert ('Hi!')
    }
</script>

包含在浏览器内部的js代码被从上到下依次执行。

特殊字符如/需要转义。

链入(外部引用):

<script src="../js/H5.js" type="text/javascript" charset="utf-8"></script>

注意:带有src的script元素中间不可以再包含额外的js代码了,如果包含了嵌入式代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。

2.1.1 标签的位置

按照传统做法,所有的script都应该包含在<header> 之中。这意味着所有的js下载完成以后,才开始加载页面。但是如果js过多,可能会引起代码阻塞。所以一般会被放在body里面即

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <script src="../js/H5.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

当然,也可以设置延迟脚本在script中,使脚本延迟到整个页面解析完毕后执行,但是这个属性只对外部脚本文件有效。

2.1.3 异步脚本

没错,是async,与defer类似,但是标记为async的脚本不保证按照指定他们的先后顺序执行。

2.1.4 在XHTML中的用法(拓展内容,略,回头有时间补)

2.4 <noscript>元素

如果浏览器出现

  1. 浏览器不支持脚本
  2. 浏览器支持但是禁用脚本
<noscript></noscript>中内容显示,其他时间均隐藏。

总结:如何引入js文件。