本教程向您展示如何將JavaScript代碼嵌入HTML頁(yè)面,來(lái)幫助您開始學(xué)習(xí) JavaScript。
要將JavaScript插入HTML頁(yè)面,請(qǐng)使用元素。在HTML頁(yè)面中使用
元素有兩種方式。
第一種是將JavaScript代碼直接嵌入HTML頁(yè)面。第二種是引用外部JavaScript文件。
通常不建議將JavaScript代碼直接放在元素中,這種方式多是應(yīng)用于概念驗(yàn)證或測(cè)試目的。
元素中的JavaScript代碼是從上到下解釋的。在下面的
index.html
頁(yè)面元素中,我們使用
alert()
函數(shù)來(lái)顯示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文件
要引用來(lái)自外部JavaScript文件。首先創(chuàng)建一個(gè)擴(kuò)展名為.js
的文件,比如app.js
文件并將其放在js
子文件夾中。
雖然不需要將JavaScript文件放在單獨(dú)的文件夾中,但這是一個(gè)很好的做法。然后在元素的
src
屬性設(shè)置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>
請(qǐng)注意,您可以從遠(yuǎn)程服務(wù)器加載JavaScript文件。這允許您從其它域引用JavaScript 文件,最常見的做法使用內(nèi)容交付CDN加速頁(yè)面Javascript文件的載入。
當(dāng)頁(yè)面上有多個(gè) JavaScript 文件時(shí),JavaScript引擎會(huì)按照文件出現(xiàn)的順序解釋這些文件。
在此示例中,JavaScript引擎將依次解釋service.js
和app.js
文件。換句話說,在解釋app.js
文件之前,瀏覽器會(huì)先完成 service.js
文件的解釋。
<script src="js/service.js">script>
<script src="js/app.js">script>
對(duì)于包含許多外部JavaScript文件的頁(yè)面,在頁(yè)面渲染階段將會(huì)顯示空白的頁(yè)面。
為避免這種情況,您可以在
評(píng)論