您的位置：首页 > Web前端 > JavaScript

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

2016-07-19 17:39 676 查看 

<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>


这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它——尽管它是页面的一部分。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript html
相关文章推荐
新的分享
章节导航