JavaScript高级程序设计(二)：在HTML中使用JavaScript

一、使用<script>元素

　　1、<script>元素定义了6个属性：

　　　　async:可选。表示应该立即下载脚本，但不应该妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
　　　　charset:可选。表示通过src属性指定的代码的字符集。很少人用。
　　　　defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部文件有效。
　　　　language：已废弃。
　　　　src:可选。表示包含要执行代码的外部文件。
　　　　type:可选。表示编写代码使用的脚本语言的内容类型【MIME类型】。例如：text/javascript、text/ecmascript。实际上服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript。但是为了兼容性和约定俗称，目前type属性的值依旧还是text/javascript。

　　2、<script>元素的使用　　

　　　　使用<script>元素的方式有两种：直接在页面引入和外部js的引入。

1）页面直接引入js时，只须为<script>指定type属性。例如：

<scritpt type="text/javascript">function sayhi(){alert('hi,world!');}
</script>

　　注意：A、直接引入的js的解析是从上到下的。

　　　　　B、在使用<script>嵌入JavaScript代码时，记住不要在代码中的任何地方出现“</script>”字符串。例如：浏览器在加载下面代码时就会产生一个错误：

<script type="text/javascript">function sayScript(){alert('</script>');
}
</script>

　　　　因为按照解析嵌入式代码的规则，当浏览器遇到字符串“</script>”时，就会认为那是结束的</script>标签。但是通过把这个字符串分割为两部分可以解决这个问题，例如：

<script type="text/javascript">function sayScript(){alert('<\/script>');
}
</script>

　　2）外部引入js，src属性是必需的，这个属性的值是一个指向外部JavaScript文件的链接，例如：

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

　　特别提示：

　　　　1)、通过<script>元素的src属性还可以包含来自外部域的JavaScript。这一点即使<script>元素倍显强大，又让它备受争议。在这一点上，<script>与<img>元素非常相似，即它的src属性可以是指向当前HTML页面所在域之外的某个域中的URL，例如：

<script type='text/javascript' src="http://www.joyplus.com/example.js"></script>

　　　　不过，在访问自己不能控制的服务器上的JavaScript文件时则要多加小心。

　　　　2)、无论如何包含代码，只要不存在defer和ansync属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。

3、<script>元素标签的位置

　　按照惯例，所有<script>元素都应该放在页面<head>元素中。例如：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' src='example1.js'></script><script type='text/javascript' src='example2.js'></script></head><body><!--主题内容--></body>
</html>

　　这种做法的目的就是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。可是，在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。这无疑导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般都把全部JavaScript引用到<body>元素内容后面，例如：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Demo</title></head><body><!--主题内容--></body><script type='text/javascript' src='example1.js'></script><script type='text/javascript' src='example2.js'></script>
</html>

　　这样就加快了用户看到页面的时间。

4、<script>延迟脚本【属性defer】

　　defer属性和async属性都可以起到页面不受<head>元素中外部引入的js文件的下载而现实缓慢。例如：

　　defer属性：

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

　　外部脚本文件延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行。但在实际中，延迟脚本并不一定会按照顺序执行。因此最好只包含一个延迟脚本。

　　由于并非所有浏览器都支持defer属性，所以，把延迟脚本放在页面底部仍然是最佳选择。

5、异步脚本【属性async】

　　async属性：只适用于外部脚本，并告诉浏览器立即下载文件。但是js脚本的执行的先后顺序就不能保证了。因此，使用async属性的脚本之间确保不能相互依赖。

　　async属性:目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Demo</title><script type='text/javascript' async='async' src='example1.js'></script><script type='text/javascript' async='async'  src='example2.js'></script></head><body><!--主题内容--></body>
</html>

6、<script>元素在XHTML中的使用

　　XHTML，是将HTML作为XML的应用而重新定义的一个标准。即可扩展超文本标记语言。

　　编写XHTML代码的规则要比编写HTML严格得多，而且直接影响能否在嵌入JavaScript代码时使用<script>标签。如下代码：在HTML中有效，但在XHTML中无效。

<script type='text/javascript'>function compare(a,b){if(a<b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}}
</script>

　　在XHTML中无效的原因是：

　　　　比较语句a<b中的小于号（<）在XHTML中被当做开始一个新标签来解析。但是作为标签来讲，小于号后面不能跟空格，因此就会导致语法错误。

　　避免在XHTML中出现类似语法错误的方法有两个：

　　一是用相应的HTML实体替换（<）代码中的所有小于号；如：

<script type='text/javascript'>function compare(a,b){if(a &lt; b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}}
</script>

　　　　这种方法，是代码不好理解。因此，我们可以使用另一种方法。　　

　　二是使用CDATA片段来包含js代码。在CDATA片段中可以使用任意字符，且不会导致语法错误。具体代码如下：

<script type='text/javascript'>//<![CDATA[
    function compare(a,b){if(a<b){alert("a is less than b!");}else if(a>b){alert("a is greater than b!");}else{alert("a is equals to b!");}}//]]>
</script>

　　但是由于不是所有浏览器都兼容XHTML的CDATA片段的语法，因此，在使用js注释将CDATA标记注释掉就可以了。

二、嵌入脚本与外部脚本

　　Js嵌入代码与外部文件，最好的做法还是尽可能使用外部文件包含js代码。优点是：

　　　　可维护性强：单独将js放到一个文件中，维护方便，且变成也方便。
　　　　可缓存：多个HTML都是用一个js文件时，那么js文件只需下载一次。加快了页面加载的速度。
　　　　适应未来：外部文件无须使用XHTML或注释hack。Html和XHTML包含外部文件的语法相同。【注释hack：CDATA片段】

三、考虑禁用JavaScript的场景【<noscript>元素】

　　<noscript>元素只有在下列情况下才会显示出来：

　　　　1）浏览器不支持脚本；
　　　　2）浏览器支持脚本，但脚本被禁用。
　　符合上述任何一个条件，浏览器都会显示<noscript>中的内容。而除此之外的请他情况下，浏览器不会呈现<noscript>中的内容。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Demo</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.cnblogs.com/renxiaoren/p/5780801.html

JavaScript高级程序设计(二)：在HTML中使用JavaScript相关推荐

打码进行中-JavaScript高级程序设计-第1章-什么是javaScript
1.1简短的历史回顾输入验证网景微软欧洲计算机制造商协会(Ecma) ECMAScript 1.2JavaScript实现完整的JavaScript实现包含以下几个部分: 核心(ECMASc ...
我与《JavaScript高级程序设计》的相爱相杀----JavaScript摘记
您的点赞与关注是对我最好的鼓励文章目录第3章语言基础 3.1 语法 3.2 关键字与保留字 3.3 变量 3.4 数据类型第4章变量, 作用域与内存第5章基本引用类型 5.1 Date ...
攻下《JavaScript高级程序设计》——第二章在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
《JavaScript高级程序设计》学习笔记（一）
文章目录一.什么是JavaScript JavaScript的组成二.HTML中的JavaScript 2.1 <script>元素 2.1.1 标签位置 2.1.2推迟执行脚本 2. ...
读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/> 本笔记是为了方便日后查阅,仅作学习交 ...
回顾《JavaScript高级程序设计》目录篇
<JavaScript高级程序设计>看这一份够了,前提是等我更完... 回顾<JavaScript高级程序设计>目录篇精简<JavaScript高级程序设计>四 ...
javascript高级程序设计(python编程代码大全)
JavaScript权威指南和JavaScript高级程序设计哪本好? <JavaScript权威指南>比<JavaScript高级程序设计>难很多,个人看法先看:<J ...
读《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）心得
今天读了<Javascript高级程序设计>中的javascript事件处理程序(事件侦听器)部分的内容,总结一些自己的心得: 事件就是用户或者浏览器自身执行的某种动作.例如click . ...
《JavaScript高级程序设计（第3版）》教程大纲
词条 <JavaScript高级程序设计>是2006年人民邮电出版社出版的图书,作者是(美)(Nicholas C.Zakas)扎卡斯.本书适合有一定编程经验的开发人员阅读,也可作为高校相 ...

JavaScript高级程序设计(二)：在HTML中使用JavaScript

JavaScript高级程序设计(二)：在HTML中使用JavaScript相关推荐

最新文章

热门文章