本教程向您展示如何将JavaScript代码嵌入HTML页面,来帮助您开始学习 JavaScript。
要将JavaScript插入HTML页面,请使用元素。在HTML页面中使用
元素有两种方式。
第一种是将JavaScript代码直接嵌入HTML页面。第二种是引用外部JavaScript文件。
通常不建议将JavaScript代码直接放在元素中,这种方式多是应用于概念验证或测试目的。
元素中的JavaScript代码是从上到下解释的。在下面的
index.html
页面元素中,我们使用
alert()
函数来显示Hello, World!
消息。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Exampletitle>
<script>
alert('Hello, World!');
script>
head>
<body>
body>
html>
要引用来自外部JavaScript文件。首先创建一个扩展名为.js
的文件,比如app.js
文件并将其放在js
子文件夹中。
虽然不需要将JavaScript文件放在单独的文件夹中,但这是一个很好的做法。然后在元素的
src
属性设置URL,该URL指向JavaScript源代码文件。
如果您在Web浏览器打开helloworld.html
文件,您将看到一条警告消息Hello, World!
。
alert('Hello, World!');
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Exampletitle>
<script src="js/app.js">script>
head>
<body>
body>
html>
请注意,您可以从远程服务器加载JavaScript文件。这允许您从其它域引用JavaScript 文件,最常见的做法使用内容交付CDN加速页面Javascript文件的载入。
当页面上有多个 JavaScript 文件时,JavaScript引擎会按照文件出现的顺序解释这些文件。
在此示例中,JavaScript引擎将依次解释service.js
和app.js
文件。换句话说,在解释app.js
文件之前,浏览器会先完成 service.js
文件的解释。
<script src="js/service.js">script>
<script src="js/app.js">script>
对于包含许多外部JavaScript文件的页面,在页面渲染阶段将会显示空白的页面。
为避免这种情况,您可以在
标签之前包含JavaScript文件。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Hello World Exampletitle>
head>
<body>
<script src="js/service.js">script>
<script src="js/app.js">script>
body>
html>
要更改浏览器加载和执行JavaScript文件的方式,您可以使用元素的两个属性
async
和defer
。
这些属性只对外部包含外部脚本文件生效。async
属性指示Web浏览器异步执行JavaScript文件。
脚本及其所有依赖都会在延缓队列中执行,因此它们会被并行请求,并尽快解析和执行。
async
属性能够消除解析阻塞的Javascript。解析阻塞的Javascript会导致浏览器必须加载并且执行脚本,之后才能继续解析。
async
属性不保证Javascript文件按照它们出现的顺序执行。例如以下test.html
的两个script
标签,都添加async
属性使用javascript文件异步运行。
app.js
文件可能在service.js
文件之前执行。也可能会在service.js
文件执行之后运行。因此,您必须确保它们之间没有依赖关系。
<script async src="service.js">script>
<script async src="app.js">script>
script
元素defer
属性表示当浏览器在HTML文档解析完成后再运行javascript文件。
即使我们将元素放在
节中,脚本也会等待浏览器解释完HTML文档才开始运行javascript文件。
当一个HTML页面中包含两个script
元素并设置defer
属性时,将出现的顺序运行两个script元素Javascript文件。
通常设置defer
属性script
元素将不再需要设置async
属性,因为defer也有async类似的能力。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript defer demonstrationtitle>
<script defer src="app.js">script>
<script defer src="service.js">script>
head>
<body>
body>
html>
你已经知道如何使用元素在HTML页面包含JavaScript文件。
元素的
async
属性指示Web浏览器并行获取JavaScript文件,然后在JavaScript文件可用时立即解析和执行。
元素的
defer
属性允许Web浏览器在HTML文档解析完成运行JavaScript文件。
打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
- 相关推荐
- HTML
- 代码
- javascript
-
如何将PHP的结果输出到非PHP页面中
2009-01-11 0
-
JavaScript 简介
2020-09-09 0
-
如何将大型HTML、CSS、Javascript文件缩小为progmem?
2023-02-28 0
-
esp8266如何将这些变量发送到spiffs上的html?
2023-06-07 0
-
HTML Encryptv2.04
2010-04-09 340
-
JavaScript有什么特点_Java与JavaScript有什么不同
2017-12-04 5263
-
JavaScript让HTML静态页面传值的方法
2018-01-09 5960
-
HTML JavaScript的详细资料简介
2019-02-21 885
-
Javascript的学习资料总结
2019-10-17 795
-
HTML DOM的使用教程详细说明
2020-03-10 664
-
JavaScript代码嵌入HTML的文档详细资料概述
2021-03-10 631
-
嵌入式web服务器boa -- html、cgi设计总结
2021-11-04 782
-
使用HTML和JavaScript设计指示器按钮
2022-12-13 636
-
使用JavaScript提升代码游戏的方法是什么
2023-02-28 670
-
javascript可以关闭吗
2023-11-16 1818
全部0条评论
快来发表一下你的评论吧 !
×
20
完善资料,
赚取积分