嵌入脚本与外部脚本

本节目标：理解“嵌入脚本与外部脚本”的核心思路，并能把它用于实际开发或面试表达。 内嵌脚本 在使用内嵌脚本时，只须为

<script>

指定type属性。然后把JavaScript代码直接放在元素内部即可：

<script

type="text/javascript">

function

sayHi()

{

alert("Hi!");

}

</script>

注意：

包含在\<script\>内部的JavaScript代码未执行完毕以前，页面中的其余内容都不会被浏览器加或或显示。
在使用内嵌脚本时，不要在代码中的任何地方出现
```
</script>
```
字符串。因为当浏览器遇到字符\</script\>时，就会认为那是结束的\</script\>标签。
而通过转义字符"/"可以解决这个冋题，例如：

<script

type="text/javascript">

 `function`

sayScript()

{

alert("<\/script>");

`}`

</script>

外部脚本 如果要通过

<script>

元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接，例如：

<script

type="text/javascript"

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

省略js后缀：按照惯例，外部
```
JavaScript
```
文件件带有.js扩展名。但这个扩展名不是必需的，因为浏览器不会检査包含
```
JavaScript
```
的文件的扩展名。这样一来，使用JSP、PHP或其他服务器端动态生成JavaScript代码也就成为了可能。但是服务器通常还是要看扩展名决定为响应应用哪种MIME类型。如果不使用.js扩展名，请确保服务器能返回正确的MIME类型。
外联脚本优先：需要注意的是，带有src属性的
```
<script>
```
元素不应该在其\<script\>和
```
</script>
```
标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
可跨域：另外，通过\<Script\>元素的src属性还可以包含来自外部域的JavaScript文件。例如：

<script

type="text/javascript"

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

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

加载顺序 默认情况，浏览器会按照

<script>

元素在页面中出现的先后顺序依次进行解析。换句话说，在第一个

<script>

元素包含的代码解析完成后，第二个才会被解析，然后才是第三个、第四个……

标签的位置 按照传统的做法，所有

<script>

元素都应该放在页面的\<head\>元素中，例如： <!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>  </body> </html>

放在head元素中的问题：在文档的\<head\>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到

<body>

标签时才开始呈现内容，对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延退，而延迟期间的浏览器窗口中将是一片空白。

为了避免这个问题可采取以下方法：一、把全部JavaScript引用放在\<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>

嵌入脚本与外部脚本 ​

嵌入脚本与外部脚本