在HTML中使用Javascript （第二章）

最新推荐文章于 2024-11-11 19:29:13 发布

活捉一只小星星

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量284

点赞数

分类专栏： javascript高级程序设计读书笔记文章标签： javascript

javascript高级程序设计读书笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

只要一提到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>元素

如果浏览器出现

浏览器不支持脚本
浏览器支持但是禁用脚本

<noscript></noscript>中内容显示，其他时间均隐藏。

总结：如何引入js文件。