码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript 【在HTML中使用 JavaScript】

时间:2020-05-01 10:53:47      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:col   amp   传统   项目   head   --   html   meta   方式   

使用 <script> 元素的方式

有 2 种方式:

1. 直接在页面嵌入 JavaScript 代码

2. 包含外部 JavaScript 文件

直接在页面嵌入 JavaScript 代码

指定 type 属性( 一般为 text/javascript ,将 JavaScript 代码直接放在元素内部。

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             alert(hello world~);
 8         </script>
 9     </head>
10     <body>
11     </body>
12 </html>

包含外部 JavaScript 文件

使用 src 属性指向外部 JavaScript 文件的链接

比如说有一个项目文件目录如下:

技术图片

 

可以在 test.html 中引用外部的 js 文件,例如:

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <script src="js/example.js" type="text/javascript"></script>
5     </head>
6     <body>
7     </body>
8 </html>

 

<script>标签的位置

传统的做法:<script> 元素放在 <head> 元素中

缺点:

  必须等到所有 js 代码被下载、解析和执行完成之后,才开始呈现页面的内容(浏览器在遇到 <body> 标签时才开始呈现内容)。这会导致呈现页面出现延迟。

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <script src="js/example.js" type="text/javascript"></script>
5     </head>
6     <body>
7     </body>
8 </html>

另外的做法:将全部 JavaScript 引用放在 <body> 元素中页面内容的后面。

有点:更快地呈现页面内容。

1 <!DOCTYPE html>
2 <html>
3     <head>
4     </head>
5     <body>
6         <!-- 这里放内容 -->
7         <script src="js/example.js" type="text/javascript"></script>
8     </body>
9 </html>

 

JavaScript 【在HTML中使用 JavaScript】

标签:col   amp   传统   项目   head   --   html   meta   方式   

原文地址:https://www.cnblogs.com/xiaoxuStudy/p/12812658.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!