<script>元素的使用

<script>元素的使用

　　我们要在网页进行JavaScript的脚本编写，进行网页的交互的操作，就不得不涉及Web核心语言--HTML。但我们怎么在HTML代码中编写JavaScript代码呢？下面我跟大家一起学习<script>元素来编写JavaScript代码啦！！！

一、<script>元素

　　HTML 4.01为<script>定义了下列6个元素：

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

　　在html中嵌入JavaScript代码虽然没有问题。但为了为了更好的管理JavaScript代码，您一定要尽可能的使用外部文件来写JavaScript代码，使用外部文件可以有以下的优点：

可维护性：维护轻松，方便开发。
可缓存：只要下载一次，第二次一样可以使用，页面加载速度也会变快。
适应未来：HTML 和 XHTML包含外部文件的语法是相同的。

页面嵌入

　　在页面使用<script>元素嵌入JavaScript代码是，只须对其指定type属性，然后直接放在元素内部就可以了。

1 <script type='text/javascript'>
2     function sayHello() {
3            alert("Hello World!!");
4     }
5 </script>//遇到这个标签就会结束运行

引用外部域JavaScript文件

　　如果要通过<srcipt>元素来包含外部域的JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接,这个外部链接可能是个URL。如果引用外部域的JavaScript文件，那么就不能在<script>包含代码了，如果嵌入了代码，则会自动忽略掉。

还有一种方法是：

<script type="text/javascript" src="外部文件" />

要注意的就是，不能在HTML中使用这种语法。因为这是在XHTML文档中，才能正确解析。

二、<script>标签的位置

　　那么问题来了！JavaScript代码的解析与<script>标签嵌入的位置是否有关系呢？

　　我们看下如下代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head lang="en">
 4         <meta charset="UTF-8">
 5         <title>This is html page</title>
 6         <script type="text/javascript" src="file1.js"></script>
 7         <script type="text/javascript" src="file2.js"></script>
 8     </head>
 9     <body>
10         <!---这里内容-->
11     </body>
12 </html>

　　一开始加载页面是空白的，然后要读到<body>部分才会有页面的效果出现。如果遇到很多的JavaScript代码需要加载的话，这就会造成加载页面的长时间的空白，用户体验就会下降。

　　我们来看一看另外的一种写法：

 1 <!DOCTYPE html>
 2 <html>
 3     <head lang="en">
 4         <meta charset="UTF-8">
 5         <title>This is html page</title>
 6     </head>
 7     <body>
 8         <!---这里内容-->
 9         <script type="text/javascript" src="file1.js"></script>
10         <script type="text/javascript" src="file2.js"></script>
11     </body>
12 </html>

　　这是改进的写法，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器上，短暂的窗口显示空白的时间缩短，可以让用户感觉到速度变快了，大大提升了用户体验。

三、<script>的defer属性

　　在<script>标签定义了defer属性。这个属性的出现解决了脚本执行时不会影响页面的构造。JavaScript脚本会被延迟到整个页面都解析完毕后再运行。

　　所以说，<script>标签的defer属性的设置，可以让浏览器先把脚本文件下载下来，但是延迟执行它。

 1 <html>
 2     <head lang="en">
 3         <meta charset="UTF-8">
 4         <title>This is html page</title>
 5         <script type="text/javascript" defer="defer" src="file1.js"></script>
 6         <script type="text/javascript" defer="defer" src="file2.js"></script>
 7     </head>
 8     <body>
 9         <!---这里内容-->
10     </body>
11 </html

四、<script>标签的async属性。

　　这个时HTML5中为该标签定义的一个属性。这个与defer类似，都可以用于改变处理脚本的行为。跟defer有一样的特性，async只适用与外部脚本文件，并让浏览器立即下载文件。被标记的async的脚本并不保证按照指定它们的先后顺序执行。

 1 <!DOCTYPE html>
 2 <html>
 3     <head lang="en">
 4         <meta charset="UTF-8">
 5         <title>This is html page</title>
 6         <script type="text/javascript" async src="file1.js"></script>
 7         <script type="text/javascript" async src="file2.js"></script>
 8     </head>
 9     <body>
10         <!---这里内容-->
11     </body>
12 </html>

　　以上的代码中，第二个脚本文件可能会在第一个脚本文件之前执行。所以你应该保证这两个脚本文件之间互不依赖的关系尤为重要。指定async属性的唯一目的时不让页面等待两个脚本下载和执行，从而异步加载其他内容。也就是说，建议异步脚本不要加载期间修改DOM。

总结：

把JavaScript代码插入到HTML页面中要使用<script>标签，可以嵌入到html里面，也可以引用外部域JavaScript文件。
当包含使用了JavaScript文件时，必须的src要指向URL，这个文件可以任何域的文件。
在不使用defer和async属性的情况下，是按先后顺序执行的。
浏览器会先解析完不使用defer属性的<script>标签的代码，然后就是defer。
使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照它指定它们的顺序执行。
使用async属性可以表示当前脚本不必等待其它脚本，也不必阻塞文档呈现，不能保证异步脚本按照它们在页面中的出现顺序执行。

　　本人参照了JavaScript高级程序设计(第三版)，如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎学习，对作者也是一种鼓励。

<script>元素的使用

猜你喜欢