【C2】在HTML中使用JavaScript

来源：互联网发布：淘宝网牛仔连衣裙新款编辑：程序博客网时间：2024/06/03 18:36

2.在HTML中使用JavaScript

JavaScript是一种专为网页交互而设计的脚本语言，也就是说，JavaScript是作用于Web的，所以在此不得不提到Web的核心语言——HTML。在最初开发JavaScript时，其中一个重要问题就是如何在不破坏原有HTML的基础上实现JavaScript，经过前人的不断努力和尝试，最终的决定就是为Web添加统一的脚本支持。

2.1 <script元素>

在HTML页面中插入JavaScript的主要方法，就是使用<script>元素。HTML4.01为<script>定义了下列6个属性：

属性定义备注 async 表示立即下载该脚本使用该属性的目的是不让页面等待脚本文件的下载和执行，页面在下载该脚本的同时也可以下载资源或等待加载其他脚本。只对外部脚本文件有效。可选 charset 表示通过src属性指定的代码的字符集由于大多数浏览器会忽略charset的值，因此很少有人会用charset属性。可选 defer 表示脚本可以延迟到文档完全被解析和显示后再执行即定义该属性的脚本文件会在HTML页面完全加载完后再执行。只对外部脚本文件有效，嵌入的JavaScript代码会忽略该属性，延迟的脚本不一定按顺序执行，因此最好只包含一个延迟脚本。可选 language 表示编写代码所使用的脚本语言由于大多数浏览器会忽略其值，已废弃 src 表示包含执行代码的脚本文件的路径（含文件名）可选 type 表示编写代码使用的脚本语言的内容类型（也称MIME类型）人们使用JavaScript设置的type值一直都是text/JavaScript，但实际上服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript，而在type中设置这个值却可能导致该脚本文件被忽略，目前type值默认是text/JavaScript。可选

2.1.1 元素的位置

按照惯例，所有的<script>元素都应该放在页面的<head>元素中，例如：

<!DOCTYPE HTML><html>    <head>        <title>This is title</title>        <script src="js1.js"></script>        <script src="js2.js"></script>    </head>    <body>        <!--HTML code-->    </body></html>

这种做法的目的是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。但是在<head>元素中包含所有JavaScript文件意味着该网页需要在所有JavaScript文件都下载、解析、执行完毕才能显示原有的HTML页面，如果某个网页需要引用许多个JavaScript文件，那无疑会延长页面内容呈现的时间，而在延迟期间，页面会是一片空白。

为解决这个问题，一般选择将所有JavaScript引用放到<body>内主要内容之后及</body>之前，如：

<!DOCTYPE HTML><html>    <head>        <title>This is title</title>    </head>    <body>        <!--HTML code-->        <script src="js1.js"></script>        <script src="js2.js"></script>    </body></html>

这样，在下载、解析、执行JavaScript文件前，HTML页面就已经呈现了，用户也会明显感觉到“网页打开得很快”。

2.2 嵌入代码和外部文件

使用<script>元素有两种方式：

1.页面嵌入js代码：在<script>和</script>中插入JavaScript代码：

<script>    alert("hello world.");</script>

2.引用js外部文件：使用src属性指定外部js文件链接，将外部文件加载进页面：

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

无论是哪种方式，在解析JavaScript的过程中，页面的处理都处于暂时停止状态。虽然两种方式都是合法的，但建议将JavaScript代码写到外部js文件中。不过，没有硬性规定一定要这么做，一般选择引用外部文件的原因有：

可维护性
可缓存
适应未来

2.3 <noscript>元素

早期浏览器都面临一个特殊的问题，那就是当浏览器不支持JavaScript时页面该如何友好地反馈给用户。这个问题的解决方法是：创造一个<noscript>元素，在浏览器不支持JavaScript时显示替代的内容：

<!DOCTYPE HTML><html>    <head>        <title>This is title</title>    </head>    <body>        <noscript>This page requires browser support  JavaScript or turn it enabled </noscript>        <!--HTML code-->        <script src="js1.js"></script>        <script src="js2.js"></script>    </body></html>

当浏览器不支持脚本或脚本被禁用时，<noscript>元素代码将执行。

2.4 小结

本章介绍了如何使用JavaScript。可以了解的有：

如何将JavaScript插入到页面中
添加JavaScript的两种方式
<script>元素的六种属性
<noscript>元素的作用

参考文献：

Nicholas C. Zakas.JavaScript高级程序设计(第三版)[M].北京:人民邮电出版社,2012:10-18

阅读全文

0 0