天天看點

《JavaScript入門經典(第6版)》——第2章 建立簡單的腳本2.1 在Web頁面裡添加JavaScript

本節書摘來自異步社群《javascript入門經典(第6版)》一書中的第2章,第2.1節,作者: 【美】 phil ballard 譯者:李 軍陳冀康,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

javascript入門經典(第6版)

本章主要内容包括:

在web頁面裡添加javascript的各種方式

javascript語句的基本文法

聲明和使用變量

使用算術操作符

代碼的注釋

捕獲滑鼠事件

第1章介紹了javascript是一種能夠讓web頁面更具有互動性的腳本語言。

本章将介紹如何向web頁面添加javascript,以及編寫javascript程式的一些基本文法,比如語句、變量、操作符和注釋。同時,本章将涉及更加實用的腳本範例。

正如上一章所介紹的,javascript代碼是和頁面内容一起發送給浏覽器的,這是如何做到的呢?有兩種方法可以把javascript代碼關聯到html頁面,它們都要使用第1章介紹的标簽。

第一種方法是把javascript語句直接包含在html檔案裡,就像上一章所介紹的一樣。

《JavaScript入門經典(第6版)》——第2章 建立簡單的腳本2.1 在Web頁面裡添加JavaScript

第二種方法,也是更好的方法,是把javascript代碼儲存到單獨的檔案,然後利用< script>元素的src(源)屬性來指定檔案名,進而把這個檔案包含到頁面裡。

《JavaScript入門經典(第6版)》——第2章 建立簡單的腳本2.1 在Web頁面裡添加JavaScript

前例包含了一個名為mycode.js的檔案,其中有我們編寫的javascript語句。如果javascript檔案與調用腳本不在同一個檔案夾,就需要添加一個相對或絕對路徑:

《JavaScript入門經典(第6版)》——第2章 建立簡單的腳本2.1 在Web頁面裡添加JavaScript

《JavaScript入門經典(第6版)》——第2章 建立簡單的腳本2.1 在Web頁面裡添加JavaScript

把javascript代碼儲存到單獨的檔案中有不少好處:

當javascript代碼有更新時,這些更新可以立即作用于使用這個javascript檔案的頁面。這對于javascript庫是尤為重要的(本書稍後會有介紹)。

html頁面的代碼可以保持簡潔,進而提高易讀性和可維護性。

可以稍微提高一點性能。浏覽器會把包含檔案進行緩存,目前頁面或其他頁面再次需要使用這個檔案時,就可以使用一個本地副本了。

說明:按照慣例,javascript代碼檔案的名稱字尾是.js。但從實際情況來看,代碼檔案的名稱可以使用任何字尾,浏覽器都會把其中的内容當作javascript來解釋。

注意:外部檔案中的javascript語句不能放到标簽中,也不能使用任何html标簽,隻能是純粹的javascript代碼。

程式清單2.1是第1章裡web頁面的代碼,但是現在,修改為在

區域裡包含了一個javascript代碼檔案。javascript可以放置到html頁面的或區域裡,但一般情況下,我們把javascript代碼放到頁面的區域,進而讓文檔的其他部分能夠調用其中的函數。第3章将介紹函數的有關内容。就目前而言,我們把範例代碼暫時放到文檔的區域。

程式清單2.1 包含了一個javascript檔案的一個html文檔

《JavaScript入門經典(第6版)》——第2章 建立簡單的腳本2.1 在Web頁面裡添加JavaScript

當javascript代碼位于文檔的body區域時,在頁面被呈現時,遇到這些代碼就會解釋和執行,然後繼續呈現,直到完成頁面的内容。

提示:你并不是隻能夠使用一個script元素,需要的話,可以在頁面中使用任意多個script元素。

說明:有時在< script>标簽裡可以看到html風格的注釋标簽,它們包含着javascript語句,比如:

《JavaScript入門經典(第6版)》——第2章 建立簡單的腳本2.1 在Web頁面裡添加JavaScript

這是為了相容不能識别

繼續閱讀