第02章 在 HTML 中使用 JavaScript

2.1 <script> 标签

<script> 标签定义了 6 个属性:

属性说明
async异步加载脚本,即加载脚本的同时加载页面其他内容。只对外部脚本有效。
charset忽略
defer延迟脚本执行,直到文档全部被解析和显示之后再执行脚本
language已废弃
src引用外部脚本
typeMIME 类型,一般为 text/javascript 可以省略

注意:正常情况下,解释器需要将所有脚本解释完毕后,才会加载页面其他内容。

三种加载脚本的方式:

  • 内嵌脚本
<script type="text/javascript">
  function sayHi(){
    alert("Hi!");
  }
</script>
  • 引用外部脚本
<script type="text/javascript" src="example.js"></script>
  • 引用域外脚本,但是要注意安全:
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

2.1.1 标签位置

按照惯例,脚本都应该放在 <head> 元素中

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>

<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>

</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

<head> 元素中引入外部脚本,必须要等脚本全部解析完成后才会解析页面其他内容,这样会导致页面出现卡顿和显示空白。为了避免这个问题,可以将脚本放在<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>

2.1.2 延迟脚本

使用 defer 属性后,脚本就会延迟到整个页面加载完毕后再执行。

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>

<script type=”text/javascript” defer src=”example1.js”></script>
<script type=”text/javascript” defer src=”example2.js”></script>

</head>
<body>
<!-- content here -->
</body>
</html>

正常情况下,脚本是按照在页面中出现的顺序执行的;如果使用多个延迟脚本,多个脚本执行顺序并不确定,因此一个页面中最好只有一个 defer 脚本。

2.1.3 异步脚本

浏览器在加载异步脚本的同时也会加载文档内容,因此要确保脚本与页面内容之间、异步脚本之间不存在相互依赖。

<!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>
    <!-- content here -->
</body>
</html>

2.1.4 在 XHTML 中的用法

HTML5 已经成熟,该小节可以跳过

2.1.5 不推荐使用的语法

浏览器已经成熟,该小节可以跳过

2.2 嵌入代码与外部文件

尽可能使用外部脚本,使用外部脚本有更多地优点

2.3 文档模式

不同的文档模式下,浏览器有不同的解析行为。下面是几种文档模式。现在一般都使用 HTML 5 模式


<!-- HTML 4.01 严格 -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>


<!-- HTML 4.01 过渡 -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

<!-- HTML 4.01 框架集 -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

<!-- XHTML 1.0 严格 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<!-- XHTML 1.0 过渡 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!-- XHTML 1.0 框架集 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

<!-- HTML5 -->
<!DOCTYPE html>

2.4 <noscript> 元素

如果浏览器不支持 Javascript ,将显示一条消息;如果浏览器支持,则什么也不做

<!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>
    <noscript>
    <p>浏览器不支持 Javascript</p>
    </noscript>
</body>
</html>
    原文作者:勤劳的悄悄
    原文地址: https://www.jianshu.com/p/5477353fcba4
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞