本教程向您展示如何将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文件
要引用来自外部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文件的页面,在页面渲染阶段将会显示空白的页面。
为避免这种情况,您可以在
评论