首頁 > 開發者 > JavaScript
標籤：
語句
JavaScript編寫的代碼必須嵌在一份html/XHTML 文檔中才能得以執行。
<!DOCTYPE html><html><head><script type="text/javascript">JavaScript goes here ……</script></head><body>Mark-up goes here……</body></html>
更好的辦法把JavaScript代碼存入一個獨立的檔案——.js(副檔名)
<!DOCTYPE html><html><head><script type="text/javascript" src="file.js"></script></head><body>Mark-up goes here……</body></html>
樣本：test.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Just a test</title><script type="text/javascript" src="example.js"></script></head><body>Mark-up goes here……</body></html>
文法
JavaScript語言的文法與Java和C++等一些程式設計語言的文法非常相似。
語句
JavaScript或任何一種其他程式設計語言編寫出來的指令碼都是由一系列指令構成的，稱為語句（statement）。
良好的編程習慣：
first statement；
second statement；
注釋
不希望JavaScript解譯器真的去執行這樣的語句。稱為注釋（comment）。
可以把編寫代碼時的一些想法和考慮記載下來供今後參考，追蹤有關代碼的執行流程。
單行注釋：
//Note to self：comments are good.
多行注釋：
/*Note to self：comments art good*/
變數
會發生變化的東西稱為變數（variable）。
把值存入變數的操作稱為賦值（assinment）。
JavaScript中對這些變數進行賦值發文法：
mood = “happy”；age = 33 ；
彈出式警告視窗：
alert（mood）;alert（age）;
聲明
JavaScript允許程式員直接對變數進行賦值而無需提前對它們做出聲明（declare）。
做出聲明：
var mood；var age；
JavaScript不允許變數的名字中包含空格或是標點符號（$ 例外）。
資料類型
JavaScript指令碼中不需要對資料類型做出聲明，型別宣告（typing）。
JavaScript被稱為弱類型（weakly typed）語言。
字串
var mood = "happy";var mood = ‘happy‘;var mood = ‘don\‘t ask‘; （\ 字元轉義 escaping）
數值
var age = 33.25;
布爾值 （boolean）
var sleeping = true;var married = false;
數組（array）
集合中的每個值都是這個數組的元素（element）。
array[index] = element;
var beatles = Array(4);beatles[0] = "John";beatles[1] = "Paul";beatles[2] = "George";beatles[3] = "Ringo";
var beatles = Array("John","Paul","George","Ringo");var beatles =["John","Paul","George","Ringo"];
var beatles = Array(1990,3554,1244,6565);
操作
算術操作符
var year = 2015;var message = "The year is";message += year;alert（message）;
條件陳述式
JavaScript指令碼需要使用條件陳述式（conditional statement）來做出判斷和決策。
if語句
if（condition）{statement；}
樣本
if（1>2）{alert("The world has gone mad!");}else{alert("All is well with the world");}
比較操作符
= 賦值== 等於 比較！= 不等於 比較
邏輯操作符 （operand）
&& 邏輯與|| 邏輯或！邏輯非
迴圈語句
if語句或許是最重要、最有用的條件陳述式。不足是無法用來完成重複性的操作。
while語句
while（condition）{statement；}
樣本
var count = 1;while(count < 11){alert(count);count++;}
do...while語句
do{statements;} while(condition );
樣本
var count = 1;do{alert(count);count++;}while(count < 11);
變體
var count = 1;do{alert （count）;count++;} while(count < 1);
for語言
initialize;while(condition){statements;increment;}
for迴圈
for（initial condition; test condition; alter condition）{statement;}
樣本
for（var count=1；count < 11; count++）{alert(count);}
樣本
var beatles = Array（"John","Paul","George","Ringo"）;for(var count = 0; count < beatles.length; count++){alert(beatles[count]);}
函數（function）
先對函數做出定義再調用它們：
function shout(){var beatles = Array("John","Paul","George","Ringo");for( var count = 0; count < beatles.length; count++ ){ alert(beatles[count]);}}
定義一個函數的文法：
function name(arguments){statements；}
傳遞兩個參數的函數：
function multiplay(num1,num2){var total = num1*num2;alert(total);}
在定義了這個函數的指令碼裡，我們可以從任意位置去調用這個函數：
multiply(10,2);
函數不僅能夠（以參數的形式）接收資料，還能夠返回資料。需要用到return語句：
function multiplay(num1,num2){var total = num1*num2;return total;}
函數只是個參數，並返回一個數值：
function convertToCelsius(temp){var result = temp - 32;result = result / 1.8;return result;}
函數真正價值可以當作一種資料類型來實用，這意味著我們可以把一個函數的調用結果賦值給一個變數：
var temp_fahrenheit = 95;var temp_celsius = convertToCelsius(temp_fahrenheit);alert(temp_celsius);
把華氏溫度值95轉為攝氏溫度值：35
變數的範圍(scope)
全域變數（global variable）
局部變數（local variable）
對象（object）
對象是自我包含的資料集合，可以通過兩種形式——屬性（property）和方法（method）訪問：
屬性是隸屬於某個特定對象的變數；
方法是知識某個特定對象才能調用的函數。
在JavaScript指令碼裡，屬性和方法都需要使用如下所示的“點”文法來訪問：
Object.propertyObject.method()
一、使用者定義對象（user-defined object）
利用JavaScript語言建立自己的對象。
JavaScript提供一系列預先定義好的對象，可以把這些對象直接用在自己的指令碼裡，這些對象稱為內建對象（native object）。
二、內建對象（native Object）
Array數組就是一種JavaScript內建對象。Math 對象和Date 對象也是內建對象。
建立一個Array對象的新執行個體：
var beatles = new Array（）；
擷取數組有多少個元素時：
beatles.length;
Math對象
var num = 7.651;
var num = Math.round(num);
alert(num);
Date對象
JavaScript解譯器會自動使用當前日期和時間：
var current_date = new Date();
Date對象提供了 getDay（）、getHours（）、getMouth（），用來檢索與特定日期有關的各種資訊。
var today = current_date.getDay();
三、宿主對象（host Object）
由Web瀏覽器提供的預定義對象被稱為宿主對象（host object）。主要包括Form、Image和Element。
document對象也可以用來獲得關於某給定網頁上的任何一個元素的資訊。
四個非常實用的DOM方法：
getElementById
getElementsByTagName
getAttribute
setAttribute
DOM（Document Object Model）文件物件模型
D 文檔
O 對象
M 模型
BOM （Window Object Model）瀏覽器物件模型
家譜樹：parent （父）、child（子）、sibling（兄弟）
基本網頁——購物清單
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><!-- 視口標籤 --><title>Shopping list</title></head><body><h1>What to buy</h1><p title="a gentle reminder">Don‘t forget to buy this stuff.</p><ul id="purchases"><li>A tin of beans</li><li>Cheese</li><li>Milk</li></ul></body></html>
節點（node）
文檔是由節點構成的集合。
元素節點（element node）：p、ul……
文本節點（text node）：元素裡麵包含的文本。
屬性節點（attribute node）： title……
CSS（層疊樣式表）：繼承（inheritance）
class屬性：所有的元素都有class屬性，不同的元素可以有同樣的class屬性值。
id屬性：給網頁裡的某個元素加上一個獨一無二的標識符。
getElementById（）方法
document.getElementById（id）；
樣本
document.getElementById（"purchases"）;
getElementById（）方法將返回一個對象，可以用typeof操作符來驗證。
<script type="text/javascript">alert(typeof document.getElementById（"purchases"）);</script>
getElementsByTagName（）方法
element.getElementsByTagName（tag）;
樣本
document.getElementsByTagName（"li"）;
getElementsByTagName（）方法將返回一個對象數組，每個對象分別對應著文檔裡有著給定標籤的一個元素。也是只有一個參數的函數。
<script type="text/javascript">
alert(document.getElementsByTagName（"li"）.length);
</script>
利用迴圈語句和typeof操作符去遍曆這個數組的辦法驗證：
for（var i=0; i< document.getElementsByTagName（"li"）.length; i++）{
alert(typeof document.getElementsByTagName（"li"）[ i ]);
}
賦值變數：
var items = document.getElementsByTagName（"li"）;
for( var i=0; i < items.length; i++){
alert(typeof items[ i ]);
}
擷取某份文檔總共有多少個元素節點：
alert（document.getElementsByTagName（"*"）.length）;
擷取id屬性purchase的元素包含著多少個清單項目（li）：
var shopping = document.getElementById（"purchases"）;
var items = shopping.getElementsByTagName（"*"）;
items數組的長度剛好與這份文檔裡的清單項目元素的總數相等：
alert（items.length）;
證明items數組裡的每個值確實是一個對象：
for( var i=0; i < items.length; i++){
alert(typeof items[ i ]);
}
一份文檔就是一棵節點樹。
節點分為不同的類型：元素節點、屬性節點和文本節點等。
getElementById（）方法將返回一個對象，該對象對應著文檔裡的一個特定的元素節點。
getElementsByTagName（）方法將返回一個對象數組，它們分別對應著文檔裡的一個特定的元素節點。
這些節點中的每個都是一個對象。
getAttribute（）方法
是一個函數，它只有一個參數——打算查詢的屬性的名字：
objece.getAttribute( attribute );
不能通過document對象調用，只能通過一個元素節點對象調用。
查詢每個P元素的title屬性：
var paras = document.getElementsByTagName（"p"）;
for( var i=0; i< paras.length; i++ ){
alert( paras[ i ].getAttribute(" title ") );
}
只在title屬性存在時彈出一條訊息：
var paras = document.getElementsByTagName（"p"）;
for( var i=0; i< paras.length; i++ ){
var title_text = paras[i].getAttribute(" title ") ;
if( title_text != null ){
alert( title_text );
}
}
簡化：
var paras = document.getElementsByTagName（"p"）;
for( var i=0; i< paras.length; i++ ){
var title_text = paras[i].getAttribute(" title ") ;
if( title_text ) alert( title_text );
}
setAttribute（）方法
允許我們對屬性節點的值做出修改。
只能通過元素節點對象調用的函數，但setAttribute（）方法需要我們向它傳遞兩個參數：
object.setAttribute( attribute,value );
樣本：檢索id屬性purchase，把title屬性設定為a list of goods：
var shopping = document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");
利用getAttribute（）方法來證明這個元素的title屬性值確實發生了變化：
var shopping = document.getElementById("purchases");
alert（shopping.getAttribute("title")）;
shopping.setAttribute("title","a list of goods");
alert（shopping.getAttribute("title")）;
p元素有了title屬性，通過setAttribute（）方法來改變它的當前值：
var paras = document.getElementsByTagName（"p"）;
for( var i=0; i< paras.length; i++ ){
var title_text = paras[i].getAttribute(" title ") ;
if（title_text）{
paras[ i ].setAttribute("title","brand new title text");
alert（paras[ i ].getAttribute("title")）;
}
}
DOM的工作模式：先載入文檔的靜態內容，再以動態方式對它們進行重新整理，動態重新整理不影響文檔的靜態內容。
DOM其他屬性與方法
nodeName
nodeValue
chileNodes
nextSibling
parentNode
樣本：用JavaScript和DOM建立一個圖片庫
思想
編寫一份優秀的標記語言文檔。
編寫一個JavaScript函數以顯示使用者想要查看的圖片。
在標記語言文檔裡觸發一個調用JavaScript圖片顯示的函數。
對這個JavaScript函數的功能進行擴充，這需要用到幾個新的DOM方法。
編寫標記語言文檔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><!-- 視口標籤 -->
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display"></a>
</li>
<li>
<a href="images/fireworks.jpg" title="A fireworks display"></a>
</li>
<li>
<a href="images/fireworks.jpg" title="A fireworks display"></a>
</li>
<li>
<a href="images/fireworks.jpg" title="A fireworks display"></a>
</li>
</ul>
</body>
</html>
把這份文檔儲存為gallery.html檔案，圖片儲存在子目錄images裡。
當點擊某個連結時，留在這個網頁而不是轉到另一個視窗。
當點擊某個連結時，在這個網頁上同時看到那張圖片以及原有的圖片清單。
需要做的幾項改進：
通過增加一個”預留位置“圖片的辦法在這個首頁上為圖片預留一個瀏覽地區。
在點擊某個連結時，將攔截這個網頁的預設行為。
在點擊某個連結時，將把”預留位置“圖片替換為與那個連結相對應的圖片。
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
通過改變”預留位置“圖片的src屬性的辦法將其替換為想要查看的那張圖片：
function showPic（whichpic）
whichpic.getAttribute("href");
var source = whichpic.getAttribute("href");
document.getElementById("placeholder");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
document.getElementById("placeholder").setAttribute("src",whichpic.getAttribute（"href"）);
JavaScript DOM編程藝術-閱讀筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
