Web基礎之JavaScript（三）

DOM+ 概念： 1）HTML DOM定義了用於HTML的一系列標準的對象，以及訪問和處理HTML文檔的標準方法 2）HTML標籤對象化：將網頁中的每個元素都看作一個對象。 3）常用HTML DOM對象：

Select對象
1）Select對象代表HTML表單中的一個下拉列表，標籤即表示一個Select對象。
2）常用屬性：options（選項數組）、selectedIndex（索引從0開始）、size
3）常用方法：add(option)、remove(index)
4）事件：onchange

Option對象
1）Option對象代表HTML表單中下拉列表中的一個選項，標籤表示一個Option對象
2）創建對象：var obj=new Option(text,value);
3）常用屬性：index、text、value、selected

Table對象
1）Table對象代表一個HTML表格，

標籤表示一個Table對象。
2）常用屬性：rows（返回所有行數組）、cells（返回所有單元格數組）
3）常用方法：
—> table.insertRow(index)：返回TableRow對象（插入新行）。
—> table.deleteRow(index)：刪除TableRow對象（刪除行）。

TableRow對象
1）TableCell對象代表一個HTML表格單元格，標籤表示一個TableCell對象。
2）常用屬性：cellIndex、innerHTML、colSpan、rowSpan

window其他子對象(DHTML模型)
screen對象
1）包含有關客戶端顯示屏幕的信息（封裝了屏幕相關的信息，供讀取）。
2）常用屬性：width/height、availWidth/availHeight、colorDepth(顏色位數)、pixelDepth(顏色位數)
瀏覽器窗口可視區域大小在各瀏覽器兼容的方法：

var w= document.documentElement.clientWidth  || document.body.clientWidth;
var h= document.documentElement.clientHeight  || document.body.clientHeight;

網頁尺寸scrollHeight/offsetHeight在各瀏覽器兼容的方法:

var w=document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight || document.body.scrollHeight;

history對象

1）包含用戶在瀏覽器窗口中訪問過的URL（封裝了歷史訪問記錄）。
2）length屬性：瀏覽器歷史列表中的URL數量。
3）方法：
—> history.back()：單擊後退按鈕。
—> history.forward()：單擊向前按鈕。
—> history.go(n)：前進到歷史列表中的第幾個頁面，1表示前進，-1表示後退。

location對象
1）包含有關當前URL的信息（地址欄），常用於獲取和改變當前瀏覽的網址。
2）href屬性：完整的url。
host：URL端口號； hostname:主機名； hash:從#開始的URL(錨)
pathname：路徑部分; protocol：url協議； search：從?開的url(查詢部分)
3）方法：
—> location.href=”url”：在當前頁面打開，保留歷史訪問記錄。
—> location.replace(“url”)：在當前頁面打開url，不保留歷史訪問記錄。
—> location.reload()：重新載入當前網址，等同於按刷新。
—> location.assign()：加載新的文檔
【注意：location.href=“url”也等同於location[“href”]，但很少這麼用；location=”url”好像也可以。】

navigator對象
1）包含瀏覽器軟件的相關信息，常用於獲取客戶端和操作系統信息。
2）屬性：appCodeName：瀏覽器代碼名的字符串表示；
appName：瀏覽器名稱； appVersion：瀏覽器平臺和版本信息
platform：運行瀏覽器的操作系統平臺；
userAgent：由客戶機發送服務器的user-agent頭部的值
【注意：可用window.userAgent.indexOf(“Firefox”)>-1來判斷是否是某種瀏覽器】

事件
指DHTML對象在狀態改變、鼠標操作或鍵盤操作時觸發的動作。
1）事件的類別：
①鼠標事件：onclick/ondblclick/onmouseover/onmouseout ……
②鍵盤事件：onkeydown/onkeyup ……
③狀態改變事件：onblur/onfocus/onchange/onload（body裏）/onsubmit（form裏） ……
④內容事件：onselect/onchange/
⑤body裏內容加載 ：onload/ 窗口關閉事件： window.onunload
2）定義事件：
①<標籤裏 onXXX=“代碼”>：靜態，寫在html代碼中
②obj.onclick = function(){}：動態，在JavaScript代碼中定義
3）取消事件：onXXX = “return false;”
4）事件處理機制(冒泡機制)：當處於DHTML對象模型底部的對象事件發生時，會依次激活上面對象定義的同類事件處理（即當有層次關係，且定義了相同事件時，會發生）。如：

<div style="width:100px;height:100px;border:1px solid red;" onclick="alert('3');">
          <p onclick="alert('2');">p text
          <input type="button" value="1" onclick="alert('1');" />
          </p>
<div>

【注意：使用event對象可以禁止事件冒泡】

event對象
1）任何事件觸發後將會產生一個event對象。
2）event對象記錄事件發生時的鼠標位置、鍵盤按鍵狀態和觸發對象等信息（獲得event對象後，可以獲得相關信息）。
3）常用屬性：clientX/clientY/cancelBubble=true（取消冒泡） ……
4）獲取event對象：
—> IE/Chrome等瀏覽器：直接使用event關鍵字。
—> Firefox瀏覽器：在事件定義中，使用event關鍵字將事件對象作爲參數傳入方法。
【注意：在Firefox裏直接在JavaScript中使用event，則不行！不認識！即只能在html頁面獲得event對象！其他瀏覽器既可以在JavaScript中獲得，也可以在html頁面中獲得。】
5）獲取事件源：
—> IE/Chrome等瀏覽器：event.srcElement
—> Firefox瀏覽器：event.target
【注意：兩種獲得事件源對象的方式最新的Chrome瀏覽器都支持。】

 <div onclick="func(event);">div text</div>
    <!--注意把event傳入方法中！這樣也可以在JavaScript中寫複雜代碼了！-->
    //如下操作可兼容各瀏覽器
    function func(e){ alert(e.clientX+":"+e.clientY);
                var obj=e.srcElement || e.target;
                alert(obj.nodeName);//DIV（大寫的） }

面向對象基礎
對象是一種特殊的數據類型，由屬性和方法封裝而成；
1）屬性：對象名.屬性名
2）方法：對象名.方法名()
3）定義對象：
① 創建對象的實例：使用Object創建，可以實現簡單的封裝，但不方便重用。

function TestObject(){ //創建對象，封裝數據和行爲
      var s=new Object();  s.name="mary";  s.age=18;  s.sing=function(){alert("hello");};
             //匿名方法，賦進去一個function，所以sing是個方法
      alert(s.name); alert(s.age); s.sing();

② 創建對象的模版：可重用的封裝；定義構造函數，以創建自定義的對象。

—>語法：function ObjName(參數1,參數2,…){}
③ 使用JSON（相當於Java中的Map）

  function Student(n1,a1){//定義一個對象的模版：Student
        this.name=n1;//用了this關鍵字，就認爲Student是一個類，而不是方法
        this.age=a1;  this.introduceSelf=function(){
       alert("i am "+this.name+", i am "+this.age +" year old");  }  }
   function testOwnObject(){//測試自定義的Student對象
     var p1=new Student("mary",18);
     var p2=new Student("join",20);
     alert(p1.name);  alert(p2.age);  p1.introduceSelf();   p2.introduceSelf();
  }

JSON（ JavaScript Object Notation ）
是一種輕量級的數據交換格式。使用名 / 值對的方式定義。名稱需要使用 “” 引起來。多對定義之間使用 “ ， ” 隔開。
 1）數據的傳遞：
① 數據在 JavaScript 範圍裏傳遞，使用 Object 創建對象或者創建對象的模版，兩種都可用。 
 ② 數據傳遞到服務器端，採用一種通用的格式， Xml 或者 JSON 。
 2）操作：
 ① var name=obj[“name”];// 相當於 [obj.nam]，取鍵所對應的值  
② obj[“score”]=99;// 放入一個新的鍵值對【注意：名稱可以是屬性，需要使用“”引起來；】

博客地址：Web基礎之JavaScript（三）