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

JavaScript高级程序设计学习笔记 02

2016-02-16 23:11 585 查看

纯属个人笔记，全为原创，仅供参考

第二章在HTML中使用JavaScript

--

<script>

元素

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

HTML 4.01 定义了下列6个属性：(都是可选属性)

async 表示应该立即下载脚本，但不应妨碍页面中的其他操作。仅对外部脚本文件有效。

charset 表示通过src属性指定代码的字符集。

defer 表示脚本可以延迟到文档完全被解析和显示之后再执行。仅对外部脚本文件有效。(一般放在head头的对HTML进行DOM操作的JS可以加上这个属性，防止JS获取不到DOM树)

language 这个属性已经被弃用，用于表示编写代码所用的脚本语言。

src 表示包含要执行代码的外部代码。

type 可以看作是 language 的替代属性，表示编写代码使用的脚本语言的内容类型。常用为 text/javascript (默认值)

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

在页面中嵌入JavaScript代码时，只需为<script>指定type属性。

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

包含在<script>元素内部的JavaScript代码将被从上至下依次解释。上面例子，解释器会解释到一个函数的定义，然后将该定义保存在自己的环境中。*注意在使用<script>嵌入JavaScript代码时，不要在代码中的任何地方出现“</script>”因为会认为那是结束的标志。因此要用转义符反斜杠转义<\/script>

如果要通过<script>元素来包含外部JavaScript文件，那么 src 属性就是必需的，它指向了外部文件的链接。

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

ps : 按照惯例，外部JavaScript文件带有 .js扩展名，但是这个扩展名不是必需的，因为浏览器不会检查包含JavaScript的文件的扩展名。这样一来就可以用JSP，PHP或其他服务器端语言动态生成JavaScript代码。但确保服务器能返回正确的MIME类型。

如果<script>元素带有 src 属性，则不应该在<script>之间包含额外的JS代码，如果包含了嵌入的代码，则只会下载并执行脚本文件。嵌入的代码会被忽略。

另外，通过 src 属性还可以包含来自外部域的 JavaScript 文件。如：

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

一般是配合各个CDN用于获取各种JS库或者插件文件，不过缺点就是离开网络就获取不到外部域文件。

--

<script>

元素的位置

一般<script>元素都应该放在页面的<head>元素中。目的是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。

可是在文档的<head>元素中包含所有的JavaScript文件，意味着必须等到全部JavaScript代码都被下载，解析和执行完成之后才能开始呈现页面的内容 (浏览器在遇到<body>标签时才开始显现内容)。对于那些需要很多JS代码的页面来说，这无疑会造成页面延迟，而页面的延迟会造成空白页面糟糕的用户体验。为了避免这个问题，现在一般都是把全部JavaScript引用放在<body>元素中，放在页面的内容后面。这样做在解析JS代码之前页面的内容就已经完全的呈现在浏览器中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航