《JavaScript高级程序设计》笔记系列1-- 在 HTML 中使用 JavaScript

来源：互联网发布：免费国际电话软件编辑：程序博客网时间：2024/06/05 18:32

`<script>`元素

向 HTML 页面中插入 JavaScript 的主要方法，就是使用 <script>元素。

使用<script>元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件。

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

从外部引入js文件，src是必须属性，指向外部js文件

<script type="text/javascript" src="example.js"></script>

需要注意的是，带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的 JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

标签的位置

现代 Web 应用程序一般都把全部 JavaScript引用放在<body>元素中页面内容的后面

<!DOCTYPE html><html><head>    <title>Example HTML Page</title></head><body>    <!-- 这里放内容 -->    <script type="text/javascript" src="example1.js"></script>    <script type="text/javascript" src="example2.js"></script></body></html>

延迟脚本

HTML 4.01 为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html><html><head><title>Example HTML Page</title>    <script type="text/javascript" defer="defer" src="example1.js"></script>    <script type="text/javascript" defer="defer" src="example2.js"></script></head><body>    <!-- 这里放内容 --></body></html

异步脚本

async用于改变处理脚本的行为。async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与 defer不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。

<!DOCTYPE html><html><head><title>Example HTML Page</title>    <script type="text/javascript" async src="example1.js"></script>    <script type="text/javascript" async src="example2.js"></script></head><body>    <!-- 这里放内容 --></body></html>

第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的 load事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。

嵌入代码与外部文件

在HTML中嵌入JavaScript代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript 代码。使用外部文件的优点：

可维护性
可缓存
适应未来

元素

早期浏览器都面临一个特殊的问题，即当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript>元素，用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来：
- 浏览器不支持脚本；
- 浏览器支持脚本，但脚本被禁用。

符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下，浏览器不会呈现<noscript>中的内容。

<html><head><title>Example HTML Page</title>    <script type="text/javascript" defer="defer" src="example1.js"></script>    <script type="text/javascript" defer="defer" src="example2.js"></script></head><body><noscript>    <p>本页面需要浏览器支持（启用） JavaScript。</noscript></body></html>

这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它——尽管它是页面的一部分。

0 0