JavaScript高级程序设计第二章 --- 在HTML中使用JavaScript

来源：互联网发布：淘宝店铺怎么设置打折编辑：程序博客网时间：2024/05/17 03:06

在HTML中使用 JavaScript
- script元素
  - 标签的位置
  - 延迟脚本
- 嵌入代码与外部文件
- noscript元素
- 小结

在HTML中使用 JavaScript

`<script>`元素

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

直接在页面中嵌入Javascritpt

<script type="text/javascript">    function sayHi(){        alert("Hi!");    }</script>

包含在外部Javascript

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

标签的位置

现代Web应用程序一般都把全部Javascript引用放到<body>元素中页面内容的后面
有利于加快用户打开浏览器窗口.

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <!-- 这里放内容 -->    <script src="example.js"></script></body>

延迟脚本

defer属性：这个属性只适用于外部脚本文件，脚本会被延迟到整个页面都解析完毕后再运行

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</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>

嵌入代码与外部文件

一般尽可能的使用外部文件来包含Javascript代码，他有如下优点：

可维护性强：把所有JavaScript戴安放到一个文件夹，维护比较轻松
可缓存：如果有两个页面使用同一个文件，那么这个文件只需加载一次，最终加快页面加载速度
适应未来

`<noscript>`元素

<noscript>元素中的内容只有在下列情况下显示：

浏览器不支持脚本
浏览器支持脚本，但脚本被禁用

比如：

<html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <noscript>        <p>本页面需要浏览器支持JavaScript</p>    </noscript></body></html>

小结

在包含外部文件时，必须将src属性设成相应文件的URL。
所有<script>元素会按照他们在页面上面的先后顺序被解析(不使用 defer和 async 的情况下）。

0 0

JavaScript高级程序设计 第二章 --- 在HTML中使用JavaScript