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

元素

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

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

function sayHi(){    alert("Hi!");}

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

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

标签的位置

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

    Example HTML Page

延迟脚本

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

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

Example HTML Page

第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。## 嵌入代码与外部文件在 HTML 中嵌入 JavaScript 代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含 JavaScript 代码。使用外部文件的优点：1. 可维护性1. 可缓存1. 适应未来## 元素早期浏览器都面临一个特殊的问题，即当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个元素，用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档中的任何 HTML 元素——元素除外。包含在元素中的内容只有在下列情况下才会显示出来：1. 浏览器不支持脚本；1. 浏览器支持脚本，但脚本被禁用。符合上述任何一个条件，浏览器都会显示中的内容。而在除此之外的其他情况下，浏览器不会呈现中的内容。

Example HTML Page

本页面需要浏览器支持（启用） JavaScript。

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！