在网页编写JavaScript时,可以通过嵌入式、外链式和行内式

发布时间:2022年12月28日 阅读:2765 次

在网页编写JavaScript时,可以通过嵌入式、外链式和行内式

网页编写JavaScript时,可以通过嵌入式、外链式行内式这3种方式来引入JavaScript代码,下面针对这3种方式分别进行讲解。

1.嵌入式

    嵌入式就是使用<script>标签包裹JavaScript代码,直接编写到HTML文件中,具体实例如下:

 

<script>

        JavaScript语句

</script>

 


 

<script  type="text/javascript">

         JavaScript语句

</script>


上述示例演示了两种书写方式,其中<script>标签的type属性用于告知浏览器脚本的类型,由于HTML5中该属性默认值为"text/javascript",因此在编写时可以省略。

2外链式

    外链式是指将JavaScript代码保存到一个单独的文件中,通常使用“js”作为文件的扩展名,然后使用<script>标签的src属性引入文件,具体示例如下:

              HTML文件

……

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

…… 


 

         js/demo.js 文件

……

alert("Hello World");

 ……


通过示例可以看出,src属性是一个文件路径或URL地址,可以指定为如下形式。

在实际开发中,当需编写大量、逻辑复杂、特有功能的JavaScript代码时,推荐大家使用外链式。相比嵌入式,外链式的优势可以总结为以下3点。

    为了降低JavaScript阻塞问题对页面造成的影响,可以使用HTML5为<script>标签新增的两个可选属性:async和defer,下面分别介绍其作用。

  1. 1)   async

    async用于异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行。

 

<script src="//js.test/demo.js" async></script>

 
  1. 2)   defer

    defer用于延后执行,即先下载文件,知道网页加载完成后再执行。

 

<script src="//js.test/demo.js" defer></script>

 

    添加async或defer属性后,即使文件下载失败,也不会阻塞后面的JavaScript代码执行。

3行内式

    行内式是将JavaScript代码作为HTML标签的属性值使用。例如,单击“test”按钮时,弹出一个警告框提示“Hello World”,具体示例如下。

 

<a href="javascript:alert('Hello  World');">test</a>

 

    JavaScript还可以写在HTML标签的实际属性中,事件是JavaScript中的一种机制。例如,单击网页中的一个按钮时,就会触发按钮的单击事件,具体示例如下。

 

<input type="button"  onclick="alert('Hello World');" value="test">

 

上述代码实现了单击“test”按钮时,弹出一个警告框提示“Hello World”。

由于现代网页开发提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScript三部分的代码,避免直接写在HTML标签的属性中,从而更有利于维护。因此在实际开发中不推荐使用行内式。


Tag:网页编写 JavaScript 嵌入式 外链式 行内式
相关文章

发表评论: