本教程的這壹部分內容是關于 JavaScript 語言本身的。
但是,我們需要壹個工作環境來運行我們的腳本,由于本教程是在線的,所以浏覽器是壹個不錯的選擇。我們會盡可能少地使用浏覽器特定的命令(比如 alert),所以如果妳打算專注于另壹個環境(比如 Node.js),妳就不必多花時間來關心這些特定指令了。我們將在本教程的 下壹部分 中專注于浏覽器中的 JavaScript。
首先,讓我們看看如何將腳本添加到網頁上。對于服務器端環境(如 Node.js),妳只需要使用諸如 "node my.js" 的命令行來執行它。
我們幾乎可以使用 <script> 標簽將 JavaScript 程序插入到 HTML 文檔的任何位置。
比如:
<!DOCTYPE HTML>
<html>
<body>
<p>script 標簽之前...</p>
<script>
alert('Hello, world!');
</script>
<p>...script 標簽之後</p>
</body>
</html>妳可以通過點擊右上角的“播放”按鈕來運行這個例子。
<script> 標簽中包裹了 JavaScript 代碼,當浏覽器遇到 <script> 標簽,代碼會自動運行。
<script> 標簽有壹些現在很少用到的特性(attribute),但是我們可以在老代碼中找到它們:
type 特性:<script type=…>
在老的 HTML4 標准中,要求 script 標簽有 type 特性。通常是 type="text/javascript"。這樣的特性聲明現在已經不再需要。而且,現代 HTML 標准已經完全改變了此特性的含義。現在,它可以用于 JavaScript 模塊。但這是壹個高階話題,我們將在本教程的另壹部分中探討 JavaScript 模塊。
language 特性:<script language=…>
這個特性是爲了顯示腳本使用的語言。這個特性現在已經沒有任何意義,因爲語言默認就是 JavaScript。不再需要使用它了。
腳本前後的注釋。
在非常古老的書籍和指南中,妳可能會在 <script> 標簽裏面找到注釋,就像這樣:
<script type="text/javascript"><!-- ... //--></script>
現代 JavaScript 中已經不這樣使用了。這些注釋是用于不支持 <script> 標簽的古老的浏覽器隱藏 JavaScript 代碼的。由于最近 15 年內發布的浏覽器都沒有這樣的問題,因此這種注釋能幫妳辨認出壹些老掉牙的代碼。
如果妳有大量的 JavaScript 代碼,我們可以將它放入壹個單獨的文件。
腳本文件可以通過 src 特性(attribute)添加到 HTML 文件中。
<script src="/path/to/script.js"></script>
這裏,/path/to/script.js 是腳本文件從網站根目錄開始的絕對路徑。當然也可以提供當前頁面的相對路徑。例如,src="script.js",就像 src="./script.js",表示當前文件夾中的 "script.js" 文件。
我們也可以提供壹個完整的 URL 地址,例如:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
要附加多個腳本,請使用多個標簽:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
請注意:
壹般來說,只有最簡單的腳本才嵌入到 HTML 中。更複雜的腳本存放在單獨的文件中。
使用獨立文件的好處是浏覽器會下載它,然後將它保存到浏覽器的 緩存 中。
之後,其他頁面想要相同的腳本就會從緩存中獲取,而不是下載它。所以文件實際上只會下載壹次。
這可以節省流量,並使得頁面(加載)更快。
如果設置了 src 特性,script 標簽內容將會被忽略。
壹個單獨的 <script> 標簽不能同時有 src 特性和內部包裹的代碼。
這將不會工作:
<script src="file.js"> alert(1); // 此內容會被忽略,因爲設定了 src </script>
我們必須進行選擇,要麽使用外部的 <script src="…">,要麽使用正常包裹代碼的 <script>。
爲了讓上面的例子工作,我們可以將它分成兩個 <script> 標簽。
<script src="file.js"></script> <script> alert(1); </script>
我們可以使用壹個 <script> 標簽將 JavaScript 代碼添加到頁面中。
type 和 language 特性(attribute)不是必需的。
外部的腳本可以通過 <script src="path/to/script.js"></script> 的方式插入。
有關浏覽器腳本以及它們和網頁的關系,還有很多可學的。但是請記住,教程的這部分主要是針對 JavaScript 語言本身的,所以我們不該被浏覽器特定的實現分散自己的注意力。我們將使用浏覽器作爲運行 JavaScript 的壹種方式,這種方式非常便于我們在線閱讀,但這只是很多種方式中的壹種。
重要程度: 5
創建壹個頁面,然後顯示壹個消息 “I’m JavaScript!”。
在沙箱中或者在妳的硬盤上做這件事都無所謂,只要確保它能運行起來。
在新窗口中演示
<!DOCTYPE html> <html> <body> <script> alert( "I'm JavaScript!" ); </script> </body> </html>
使用沙箱打開解決方案。
重要程度: 5
打開前壹個任務 顯示壹個提示語 的答案。將腳本的內容提取到壹個外部的 alert.js 文件中,放置在相同的文件夾中。
打開頁面,確保它能夠工作。
HTML 代碼:
<!DOCTYPE html> <html> <body> <script src="alert.js"></script> </body> </html>
同壹個文件夾中的 alert.js 文件:
alert("I'm JavaScript!");