本教程向您展示如何將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文件的頁面,在頁面渲染階段將會顯示空白的頁面。
為避免這種情況,您可以在
評論