閱讀(1.1k) 書簽贊(0) 我要糾錯(cuò)

Javascript Hello, world!

2023-02-17 10:37 更新

本教程的這一部分內(nèi)容是關(guān)于 JavaScript 語(yǔ)言本身的。

但是，我們需要一個(gè)工作環(huán)境來(lái)運(yùn)行我們的腳本，由于本教程是在線的，所以瀏覽器是一個(gè)不錯(cuò)的選擇。我們會(huì)盡可能少地使用瀏覽器特定的命令（比如 ?alert?），所以如果你打算專注于另一個(gè)環(huán)境（比如 Node.js），你就不必多花時(shí)間來(lái)關(guān)心這些特定指令了。我們將在本教程的下一部分中專注于瀏覽器中的 JavaScript。

首先，讓我們看看如何將腳本添加到網(wǎng)頁(yè)上。對(duì)于服務(wù)器端環(huán)境（如 Node.js），你只需要使用諸如 ?"node my.js"? 的命令行來(lái)執(zhí)行它。

“script” 標(biāo)簽

我們幾乎可以使用 ?<script>? 標(biāo)簽將 JavaScript 程序插入到 HTML 文檔的任何位置。

比如：

<!DOCTYPE HTML>
<html>

<body>

  <p>script 標(biāo)簽之前...</p>

  <script>
    alert('Hello, world!');
  </script>

  <p>...script 標(biāo)簽之后</p>

</body>

</html>

<script> 標(biāo)簽中包裹了 JavaScript 代碼，當(dāng)瀏覽器遇到 <script> 標(biāo)簽，代碼會(huì)自動(dòng)運(yùn)行。

現(xiàn)代的標(biāo)記（markup）

<script> 標(biāo)簽有一些現(xiàn)在很少用到的特性（attribute），但是我們可以在老代碼中找到它們：

type 特性：<script type=…>

在老的 HTML4 標(biāo)準(zhǔn)中，要求 script 標(biāo)簽有 type 特性。通常是 type="text/javascript"。這樣的特性聲明現(xiàn)在已經(jīng)不再需要。而且，現(xiàn)代 HTML 標(biāo)準(zhǔn)已經(jīng)完全改變了此特性的含義。現(xiàn)在，它可以用于 JavaScript 模塊。但這是一個(gè)高階話題，我們將在本教程的另一部分中探討 JavaScript 模塊。

language 特性：<script language=…>

這個(gè)特性是為了顯示腳本使用的語(yǔ)言。這個(gè)特性現(xiàn)在已經(jīng)沒(méi)有任何意義，因?yàn)檎Z(yǔ)言默認(rèn)就是 JavaScript。不再需要使用它了。

腳本前后的注釋。

在非常古老的書籍和指南中，你可能會(huì)在 <script> 標(biāo)簽里面找到注釋，就像這樣：

<script type="text/javascript"><!--
    ...
//--></script>

現(xiàn)代 JavaScript 中已經(jīng)不這樣使用了。這些注釋是用于不支持 <script> 標(biāo)簽的古老的瀏覽器隱藏 JavaScript 代碼的。由于最近 15 年內(nèi)發(fā)布的瀏覽器都沒(méi)有這樣的問(wèn)題，因此這種注釋能幫你辨認(rèn)出一些老掉牙的代碼。

外部腳本

如果你有大量的 JavaScript 代碼，我們可以將它放入一個(gè)單獨(dú)的文件。

腳本文件可以通過(guò) ?src ?特性（attribute）添加到 HTML 文件中。

<script src="/path/to/script.js"></script>

這里，/path/to/script.js 是腳本文件從網(wǎng)站根目錄開(kāi)始的絕對(duì)路徑。當(dāng)然也可以提供當(dāng)前頁(yè)面的相對(duì)路徑。例如，src ="script.js"，就像 src="./script.js"，表示當(dāng)前文件夾中的 "script.js" 文件。

我們也可以提供一個(gè)完整的 URL 地址，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js" rel="external nofollow" ></script>

要附加多個(gè)腳本，請(qǐng)使用多個(gè)標(biāo)簽：

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

請(qǐng)注意：
一般來(lái)說(shuō)，只有最簡(jiǎn)單的腳本才嵌入到 HTML 中。更復(fù)雜的腳本存放在單獨(dú)的文件中。
使用獨(dú)立文件的好處是瀏覽器會(huì)下載它，然后將它保存到瀏覽器的緩存中。
之后，其他頁(yè)面想要相同的腳本就會(huì)從緩存中獲取，而不是下載它。所以文件實(shí)際上只會(huì)下載一次。
這可以節(jié)省流量，并使得頁(yè)面（加載）更快。

如果設(shè)置了 ?src ?特性，?script ?標(biāo)簽內(nèi)容將會(huì)被忽略。
一個(gè)單獨(dú)的 ?<script>? 標(biāo)簽不能同時(shí)有 ?src ?特性和內(nèi)部包裹的代碼。
這將不會(huì)工作：
<script src="file.js">
  alert(1); // 此內(nèi)容會(huì)被忽略，因?yàn)樵O(shè)定了 src
</script>
我們必須進(jìn)行選擇，要么使用外部的 ?<script src="…">?，要么使用正常包裹代碼的 ?<script>?。

為了讓上面的例子工作，我們可以將它分成兩個(gè) ?<script>? 標(biāo)簽。
<script src="file.js"></script>
<script>
  alert(1);
</script>

總結(jié)

我們可以使用一個(gè) ?<script>? 標(biāo)簽將 JavaScript 代碼添加到頁(yè)面中。
?type ?和 ?language ?特性（attribute）不是必需的。
外部的腳本可以通過(guò) ?<script src="path/to/script.js"></script>? 的方式插入。

有關(guān)瀏覽器腳本以及它們和網(wǎng)頁(yè)的關(guān)系，還有很多可學(xué)的。但是請(qǐng)記住，教程的這部分主要是針對(duì) JavaScript 語(yǔ)言本身的，所以我們不該被瀏覽器特定的實(shí)現(xiàn)分散自己的注意力。我們將使用瀏覽器作為運(yùn)行 JavaScript 的一種方式，這種方式非常便于我們?cè)诰€閱讀，但這只是很多種方式中的一種。

任務(wù)

顯示一個(gè)提示語(yǔ)

重要程度: 5

創(chuàng)建一個(gè)頁(yè)面，然后顯示一個(gè)消息 “I’m JavaScript!”。

在沙箱中或者在你的硬盤上做這件事都無(wú)所謂，只要確保它能運(yùn)行起來(lái)。

解決方案：

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "I'm JavaScript!" );
  </script>

</body>

</html>

使用外部的腳本顯示一個(gè)提示語(yǔ)

重要程度: 5

打開(kāi)前一個(gè)任務(wù) 顯示一個(gè)提示語(yǔ) 的答案。將腳本的內(nèi)容提取到一個(gè)外部的 alert.js 文件中，放置在相同的文件夾中。

打開(kāi)頁(yè)面，確保它能夠工作。

解決方案：

HTML 代碼：
<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>
同一個(gè)文件夾中的 alert.js 文件：
alert("I'm JavaScript!");

以上內(nèi)容是否對(duì)您有幫助：

← Javascript 開(kāi)發(fā)者控制臺(tái)

Javascript 代碼結(jié)構(gòu) →

寫筆記

我要補(bǔ)充