JavaScript 編程基礎
一、函數
JavaScript 中提供了函數，函數可以將程序中繁瑣的代碼模塊化，提高程序的可讀性，並且便於後期的維護。
（1）函數的定義
爲了使代碼更爲簡潔並可以重複使用，通常將某段實現特定功能對的代碼定義成一個函數。所謂函數，就是在程序中多條語句組成的邏輯單元。
在 JavaScript 中，函數使用關鍵字 function 來定義，其語法格式如下：
<script type="text/javascript">
function 函數名 ([參數1,參數2,......]){
函數體
}
</script>
- function：在聲明函數時，必須使用的關鍵男子。
- 函數名：創建函數的名稱，函數名唯一。
- 參數： 外界傳遞給函數的值，可選，當有多個參數時，各參數之間用“,”隔開。
- 函數體：函數定義的主體，用於實現特定的功能。
（2）函數的調用
函數定義後不會自動執行，而是需要在特定的位置調用函數。函數調用很簡單，只許引入函數名，並傳入相應的參數即可。語法格式如下：
函數名稱 ([參數1,參數2,......])
例：下面定義一個帶有參數的函數 show(text) ，在頁面中輸出“Hello World”.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>調用函數</title>
<script type="text/javascript">
//定義一個含有形參text的函數
function show(text){
document.write(text);
}
</script>
</head>
<body>
<script type="text/javascript">
//調用函數show(),給出實參“Hello World”
show("Hello World");
</script>
</body>
</html>
首先 執行函數 show() 的函數體，然後，JavaScript 在其執行函數體之前會把實參值“Hello World”傳遞給形參 text。
（3）函數中變量的作用域
函數中的變量需要先定義後使用，但並不意味着定義變量後就可以隨意使用。變量需要在它的作用範圍內纔可以被使用，這個作用範圍稱爲變量的作用域。
變量的作用域取決於這個變量是哪一種變量，在 JavaScript 中，變量一般分爲全局變量和局部變量。
- 全局變量： 定義在所有函數之外，作用於整個程序的變量。
- 局部變量： 定義在函數體之內，作用於函數體的變量。
二、Array 數組
與其他計算機語言一樣，JavaScript 也是通過數組來保存具有相同類型的數據。
（1）創建數組
在 JavaScript 中，使用內置對象類 Array 可以創建數組對象,其語法格式如下：
var arrayname= new Array(); //新建一個長度爲0的數組
var arrayname=new Array(n); //新建一個指定長度爲n的數組
//新建一個指定長度的數組，並賦值
var arrayname= new Array(元素1,元素2,元素3,......);
var arraryname=[元素1,元素2,元素3,......];
一個數組元素由數組名、一對方括號**[ ]** 和括號中的下標組合而成，不同的數組元素可以通過下標進行區別。
例如，創建一個長度爲 Y 的數組對象 year ,對於這個 year 數組對象，它包含數組元素year[0]、year[1]、year[2]、…、year[Y-1]。
（2）使用 for…in 語句
JavaScript 的 for…in 語句是一種特殊的 for 語句，專門用於處理與數組和對象相關的循環操作。for…,in 語句可以依次對數組中的每個元素執行一條或多條語句。其語法格式如下：
for (變量 in 對象){
//此處爲JavaScript代碼
}
（3）數組的常用屬性和方法
| 屬性/方法 | 說明 |
|---|---|
| length | 返回數組中數組元素的個數，即數組長度 |
| toString | 返回一個字符串，該字符串包含數組中所有元素，各個元素之間用逗號隔開 |
數組的 length屬性是數組最常用的屬性，另外，由於數組索引值是從0開始的，因此 length 屬性值比數組中的最大索引值大 1。
（4）二維數組
對於複雜的業務邏輯，有時簡單的一維數組不能夠滿足需求，需要使用二維數組。當數組中所有的元素也是數組時，就形成了二維數組。
例如，要保存一個班級所有人的姓名、年齡、性別等數據。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二維數組</title>
</head>
<body>
<script typr="text/javascript">
var students,i,j;
students = new Array();
studetns[0]=new Array("張三","18歲","男");
students[1]=new Array("李四","17歲","男");
students[2]=new Array("王五","18歲","女");
for(i in students[i]){
for(j in students[i]){
document.write(students[i][j]+"\t");
}
document,write.("<br />");
}
</body>
</html>
三、DOM 節點樹
DOM（Document Object Model）稱爲文檔對象模型，是一個表示和處理文檔的應用程序接口（API），可用於動態訪問、更新文檔的內容、結構和樣式。DOM將網頁中文檔對象的關係規劃爲節點層級，構成他們之間的等級關係，這種各對象間的層次結構被稱爲節點樹。
DOM 節點樹
如上圖展示了DOM文檔的樹形結構，其中“html、head、body”都表示節點，一個文檔的樹形結構就是由各種不同的節點組成的。文檔對象節點樹有以下特點。
- 每個節點樹有一個根節點。
- 除了根節點，每個節點都有一個父節點。
- 每個節點都可以有許多子節點。
- 具有相同父節點的節點叫“兄弟節點”。
四、節點的訪問
在 DOM 中，每個節點都是一個對象，因此每個節點對象都有一系列的屬性、方法。JavaScript 中可使用節點的屬性和方法訪問指定元素，來得到文檔中的對象。
（1）訪問指定元素
訪問指定節點的常用方法。
| 方法 | 說明 |
|---|---|
| getElementById() | 獲取擁有指定id的第一個元素引用對象 |
| getElementByName() | 獲取帶有指定名稱的元素對象集合 |
| getElementByTagName() | 獲取帶有指定標籤名的元素對象集合 |
| getElementByClassName() | 獲取指定class的元素對象集合（不支持IE6~8瀏覽器） |
（2）訪問相關元素
節點對象的常用屬性
| 屬性 | 說明 |
|---|---|
| parentNode | 元素節點的父節點 |
| childNode | 元素節點的子節點數組 |
| firstChild | 第一個子節點 |
| lastChild | 最後一個子節點 |
| previousSibling | 前一個兄弟節點 |
| nextSibling | 下一個兄弟節點 |
*需要注意的是，document 對象是所有 DOM 對象的的訪問入口，進行節點訪問的時候需要首先從 document 對象開始。
五、元素對象常用操作
| 類型 | 方法 | 說明 |
|---|---|---|
| 創建節點 | createElement() | 創建元素節點 |
| createTextNode | 創建文本節點 | |
| 節點操作 | appendChild() | 爲當前節點增加一個子節點（作爲最後一個節點） |
| insertBedore() | 爲當前節點增加一個子節點（插入到指定子節點之前） | |
| removeChild() | 刪除當前節點的某個子節點 |
使用Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>節點的創建和追加操作</title>
</head>
<script type="text/javascript">
function init(){
//創建一個<h1>節點
var h1 = document.createElement("h1");
//創建一個文本節點
var text = document.createTextNode("Hello World!");
//爲<h1>追加文本節點
h1.appendChild(text);
//爲<body>追加<h1>元素
document.body.appendChild(h1);
}
</script>
<body onload="init()">
</body>
</html>
運行Demo結果
六、元素屬性與操作
元素對象除了節點操作，還具有一些屬性和內容的操作。
| 類型 | 屬性/方法 | 說明 |
|---|---|---|
| 元素內容 | inneHTML | 獲取或設置元素的HTML內容 |
| 樣式屬性 | classnName | 獲取或設置元素的class屬性 |
| style | 獲取或設置元素的style樣式屬性 | |
| 位置屬性 | offsetWidth、offsetHeight | 獲取或設置元素的寬和高（不含滾動條） |
| scrollEidth、scrollHeight | 獲取或設置元素的完整的寬和高（含滾動條） | |
| offsetTop、offsetLeft | 獲取或設置包含滾動條，距離上或左邊滾動過的距離 | |
| scrollTop、scrollLeft | 獲取或設置元素在網頁中的座標 | |
| 屬性操作 | getAttribute() | 獲得元素指定屬性值 |
| getAttribute() | 爲元素設置新到的屬性 | |
| removeAttribute() | 爲元素刪除指定的屬性 |
七、元素的樣式操作
在操作元素屬性時，style 屬性可以修改元素的樣式，className 屬性可以修改元素的雷鳴，通過這兩種方法即可完成元素的樣式操作。
（1）style 屬性
var test = document,getElementById("test"); //獲得需要操作的對象
test.style.width="200px"; //設置樣式，相當於： #test{width:200px;}
test.style.height="100px"; //相當於：#test{height:100px;}
test.style.backgroundColor = "#ff0000": //相當於： #test{background-color:#ff0000;}
var testWidth=test.style.width; //獲得width樣式
在CSS屬性中帶有“-”的樣式（如background-color）,在style 操作中需要用“駝峯式”（如backgroundColor）,即在第二個及後續單詞的首字母大寫。
（2）className 屬性
元素對象的className 屬性用於切換元素的類名或爲元素追加類名。
var test = document.getElementById("test"); //獲得元素對象<div id="test">
test.className = "aa"; //添加樣式，執行：<div id="tesst" class="aa">
test.className +="bb"' //追加樣式，執行： <div id="test" class="aa bb">
test.className = test.className.replace("bb","cc");
//替換樣式，執行：<div id="test" class="aa cc">
tes.className = test.className.replace("cc","");
//刪除cc，執行：<div id="test" class="aa">
test.className=""; //刪除所有的樣式
- Authors
- 杜小白
文章內容借鑑於《HTML+CSS+JavaScript 網頁製作案例教程》 編著：傳智播客