JavaScript入门基础（2）

JavaScript引入方式

1、嵌入式

嵌入式就是使用<script >标签包裹JavaScript代码，直接编写到HTML文件中。

语法：

//<script>JavaScript语句;
</script>

// <script>JavaScript语句;
</script>

实例：

//<script type="text/javascript">JavaScript语句;
</script>

// <script type="text/javascript">JavaScript语句;
</script>

·type属性用于告知浏览器脚本的类型。
·type默认值为text/javascript（HTML5），可以省略type属性。

2、外链式

外链式是指将JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用

语法：

//HTML文件
……
<script src="js/test.js"></script>
……

示例：

// js/test.js文件
……
alert('Hello');
……

相对路径

① 相对路径
……test.html
……js
…………test.js
外链引入方式：js/test.js
② 相对路径
……html
…………test.html
……js
…………test.js
外链引入方式：…/js/test.js

绝对路径

①绝对路径
website（网站根目录）
……test.html
……js
…………test.js
外链引入方式：/js/test.js
② 绝对路径
…………test.html
C:
……js
…………test.js
外链引入方式：file:///C:/js/test.js

URL地址

URL地址
website（网站根目录）
……test.html
js.test（某网站根目录）
……file.js
外链引入方式：http://js.test/file.js

若自动使用当前页面协议，可写为 //js.test/file.js

     相比嵌入式，外链式的优势可以总结为以下3点：

① 嵌入式会导致HTML与JavaScript代码混合在一起，不利用修改和维护。
② 嵌入式会增加HTML文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。
③ 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上，利用CDN的优势加快下载速度。

3、行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。
例如，单击“test‘’按钮时，弹出一个警告框提示“HELLO"。