一天赚五千元的捕鱼游戏

書名： Python高效開發實戰：Django、Tornado、Flask、Twisted（第3版）
作者名：劉長龍
本章字數： 2249字
更新時間： 2021-10-15 17:52:56

3.3　JavaScript

JavaScript是一種直譯式腳本語言，是一種動態類型語言，內置支持類型。它的解釋器被稱為JavaScript引擎，該引擎內置于現代的所有瀏覽器中。在HTML網頁上使用JavaScript可以為HTML網頁增加動態功能。

3.3.1　在HTML中嵌入JavaScript

作為一種所有瀏覽器都支持的解釋性腳本語言，在HTML中應用JavaScript一般有如下目的。

? 在客戶端讀寫HTML元素，實現切換文字、滾動條等動態效果。

? 響應瀏覽器事件，如窗口變大、變小等。

? 驗證表單輸入，常見于密碼的兩次輸入是否相同、出生年月是否小于當前時間等。

在HTML中嵌入JavaScript有兩種方式：內部嵌入和外部鏈接。內部嵌入是指直接在HTML中用<script>標簽寫入腳本；外部鏈接是指在HTML中通過文件名引用獨立的腳本文件。

【示例3-9】在HTML中嵌入JavaScript的示例如下：

技巧：外部JavaScript文件通常以*.js命名，這樣有利于各種編輯器進行智能解析。

本例中在頁面上定義了一個按鈕，當用戶單擊它時界面顯示“Hello world of JavaScript”。內部腳本可以寫在HTML文件中的任何地方，可以寫在<head>標簽中，也可以寫在<body>標簽中。

3.3.2　JavaScript的基本語法

我們在3.3.1節中已經完成了JavaScript的“Hello World”的學習，可以體會到JavaScript的語法與Java很像，但其動態類型的特點與Python也有類似之處。本節對JavaScript的基本語法進行講解。

1. 語句

JavaScript區分大小寫，每條語句以分號“;”結尾，用大括號“{ }”表示作用域（而不是Python中的縮進），所以每條語句和變量之間可以有任意空格、Tab符或回車符。JavaScript用C、C++風格的“/* … */”表示注釋。比如：

2. 變量及數據類型

JavaScript是動態數據類型，即一個變量的類型隨著其值的變化而變化。變量用“var”關鍵字聲明，變量名可以由字母、數字、下畫線等組成。常用的數據類型有字符串、數字、布爾、數組、對象等，字符串用雙引號表示。變量及數據類型的舉例如下：

關鍵字new是JavaScript中用于新建組件實例的關鍵字，定義數組時需用new建立一個Array對象，并在其參數中給出數組元素（如本例中的變量xx）；也可以在定義數組時不給初始值，而在之后通過下標賦值（如本例中的變量arr）。JavaScript中的數組下標從0開始。

JavaScript中的對象類型與Python中的Dictionary類型相似，都是用大括號以鍵值對的方式表示，但其語法略有不同。在Python中Dictionary的“鍵”是任意數據類型，示例如下：

在JavaScript的對象中，“鍵”只能以成員變量的方式出現，定義時鍵上不加雙引號，示例如下：

3. 操作符

常用操作符與Python類似，有+、-、*、/、%、==、>=、<=等。此外，JavaScript還允許自增操作（++）、自減操作（--）。操作符的示例如下：

4. 函數

JavaScript中用關鍵字function定義函數，語法如下：

和Python一樣，JavaScript函數中的返回值是可選的，如果函數有返回值，則可以在block_of_function中用return語句返回，示例如下：

5. 判斷語句

JavaScript中有兩種判斷語句：if和switch。if語句用于對不同的條件執行不同的代碼塊；switch語句用于對一個表達式的不同結果執行不同的代碼塊。判斷語句的語法如下：

if語句的語義與Python中相似，此處不再舉例。switch語句舉例如下：

每個條件的block中可以放多條語句，但是每個塊中都應該以break語句結尾。

注意：switch語句的每個塊中都應該以break作為最后一條語句。

6. 循環語句

JavaScript的循環語句有for和while兩種，各有兩種用法。for的第1種語法如下：

其中sentence1在for語句開始時執行且只執行一次；sentence2在每個loop開始時執行，sentence2應該返回一個布爾值，如果sentence2的結果為true，則執行該loop，否則立即結束for循環；sentence3在每次循環結束時執行。for語句的典型用法如下：

本例中的循環體將執行10次，即在document中寫入10個<br>標簽。

for的第2種用法和while語句及Python中的for語句用法相似，此處只列出其語法規則，讀者可以自行編寫代碼練習。

3.3.3　DOM及其讀寫

DOM（Document Object Model）是當網頁被加載時瀏覽器創建的頁面文檔對象模型。DOM用結構化的方式描述了標記語言的文件內容。JavaScript中幾乎所有有意義的行為都是圍繞DOM展開的，如讀寫頁面元素、響應頁面事件、進行表單驗證等。本節介紹DOM的基本語義及使用DOM實現HTML頁面元素的讀寫。

HTML DOM被構建為樹結構，在DOM內部每個HTML頁面被描述為一個以document為根節點的樹，HTML中的每一個標簽<..>都被表示為該樹中的一個節點，例如下面的HTML文件：

瀏覽器加載時生成的DOM樹如圖3.12所示。

圖3.12　DOM樹示例

通過操作DOM樹，JavaScript可以讀、增、刪、改HTML標簽的元素、內容、屬性、樣式等。DOM提供了一系列支持JavaScript遍歷和修改DOM的方法，下面逐個舉例。

1. 查找節點

一般情況下在DOM中查找節點時無須遍歷樹結構，而通過document對象的如下3個函數直接實現。

? getElementById( id )：返回對擁有指定id的第1個對象的引用。

? getElementsByName( name )：返回帶有指定名稱的對象集合。

? getElementsByTagName( tagName )：返回帶有指定標簽名的對象集合。

例如，對于圖3.12中的DOM樹可以編寫如下腳本：

找到一個節點后，可以根據其相對位置的屬性查找其周圍的節點，這些相對位置查找的常用屬性如表3.6所示。

表3.6　DOM相對位置查找的常用屬性

注意：本節中的obj.xxxx表示該函數或屬性是通過節點進行調用或訪問的。

節點的相對位置屬性舉例如下：

2. 增加節點

查找到一個節點后可以在其中插入子節點，新增節點通過document.createElement()和obj.appendChild()/obj.insertBefore()/obj.replaceChild()等實現，仍然以圖3.12為例：

3. 刪除節點

刪除節點通過obj.removeChild()方法實現，針對圖3.12中的DOM舉例如下：

4. 訪問及修改屬性節點

屬性節點是指HTML標簽中的屬性，以鍵和值的方式呈現，例如，<div id="container">中的id = "container"就是<div>標簽節點的一個屬性節點。通過設置屬性節點，可以控制一個HTML標簽的id、name、CSS等。屬性節點的讀取與設置通過obj.getAttribute()和obj.setAttribute()函數完成。同時，JavaScript允許以成員變量的方式訪問屬性節點，舉例如下：

5. 訪問及修改節點的內容

大多數節點都有內容，例如，本例中的兩個<p>節點都有文本內容，而兩個<p>節點本身又是<div>的內容。DOM中通過obj.innerHTML訪問和修改節點內容，示例如下：

3.3.4　window對象

在JavaScript編程中，除了用DOM模型訪問HTML頁面中的內容，有時還需要訪問和操作除HTML本身外的一些信息，如瀏覽器的窗口大小、網址等，這些信息通過window對象和其子對象document（文檔）、history（瀏覽歷史）、location（URL相關）、navigator（瀏覽器）的一些固有屬性和方法進行訪問。常用的window對象的屬性或方法如表3.7所示。

表3.7　常用的window對象的屬性或方法