學習javascript筆記

javascript 學習筆記特殊資料類型是： * Undefinedvar a;//聲明一個變數,但沒有對其賦值   alert(a);//但它仍然有值的,它的值為undefined   alert(b);//但注意,輸出一個未定義的變數將出現錯誤,而不是輸出undefinedNaN是一個特殊的值,含義是"Not A Number"-不是一個數字,當將其它值轉換成數字失敗時會得到這個值var str ="some string here!";var num = 123;alert(str*num);//將輸出NaN,因為乘法運算子只能針對數字,所以進行運算時電腦會將欄位串轉換成數字Bool類型轉換var str = "some string";alert(!!str);//true,因為非運算子是針對布爾值進行運算的,所以將其它類型轉換成布爾值只須將其連續非兩次str ="";alert(!!str);//輸出false,只有Null 字元串轉換成布爾值時會是false,非Null 字元串轉換成布爾值都會返回truevar num =0;alert(!!num);//falsenum=-123.345;alert(!!num);//true,除0以外的任何數字轉換成布爾值都會是true//還有一個非常重要的是,Null 字元串轉換成數字將會是0alert(""*1);//輸出0擷取變數類型 typeof 運算子使用window.prompt可以彈出包含輸入框的視窗，使用者輸入的內容將是此函數的傳回值內建對象Math與DateDate對象像一個時光機var d = new Date();//Date對象需要建立Date 對象能夠表示的日期範圍約等於 1970 年 1 月 1 日前後各 285,616 年。 alert(d);//直接輸出這個對象,將會得到一個表示時間的字串這個對象有一些方法,可以用來擷取時間的各個部分alert(d.getYear());//擷取年,//個人測試顯示有點問題，待驗證alert(d.getFullYear());//始終返回年份的4位元表達方式alert(d.getMonth());//返回月份,注意,月份是從0開始計數的,所以1月時將返回0alert(d.getDate());//返回今天幾號alert(d.getDay());//返回今天星期幾,星期天是0,星期1是1....alert(d.getHours());//返回小時alert(d.getMinutes());//返回分鐘alert(d.getSeconds());//返回秒alert(d.getMilliSeconds());//返回毫秒//個人測試不支援1次alert(d.getTime());返回一個整數值,這個整數代表了從1970年1月1日開始計算到Date對象中的時間之間的毫秒數日期的範圍大約是1970年1月1日午夜的前後各285616年,負數代表1970年之前的日期我們不但能從中擷取時間值,還可以設定時間值與那些getXXX方法對應的設定時間的函數僅僅是將get改成setvar d = new Date();d.setFullYear(1690);//設定年份為1900alert(d.getFullYear());//返回1900alert(d.getTime());//輸出的值是負的,這驗證了上面所說的getTime()傳回值    setXXX這樣的方法有個最大的好處就是如果我們設定了錯誤的值,指令碼並不會出錯,但日期會自動校正    記住,月份是從0開始計數的數組與對象    Array和Date一樣,也是一個內建對象,需要使用new運算子建立    var arr = new Array();    JavaScript中數組長度會自動成長,並且length屬性會自動更新    arr = new Array(6);//將得不到預期效果,因為這是在聲明一個長度為6的空數組    還可以使用數組字面量的方式arr = [];//一個空中括弧幾乎是等價的但更靈活和簡便數組中可以混合存放字串,數值,布爾值...,幾乎所以類型的值,包括數組arr = new Array(1,0,true,"some string",new Array("a",3));//第五個元素放的是一個數組alert(arr[4]);//輸出"a",3alert(arr[4][0]);//輸出"a"向數組中添加,刪除元素(push,delete)arr.push(a);//push方法將元素添加到數組未尾arr.push("a","b");//可以一次添加多個元素利用數組長度自動成長的特性arr[arr.length]="new element";使用delete與下面的語句效果一樣arr = ["#","$","%"];alert(arr);arr[2]=undefined;//undefined是一個值alert(arr);join方法,返回數組中的所有元素以指的分隔字元間隔的字串數組和對象是相通的var arr = new Array();var obj = new Object();alert(typeof arr);//objectalert(typeof obj);//object數組可以使用字串下標的var person = new Array();person["age"] = 18;//注意,中括弧裡的下標是一個字串,所以需要使用引號person["weight"] = "123kg";person["height"] = "170cm";person["arm"] = 2;person["leg"] = 2;而對象也可以使用類似文法訪問它的屬性var obj = new Object();obj.property = "some data";alert(obj["property"]);//"some data"//當然也可以使用數字下標obj[1]=123;alert(obj[1]);//123alert(obj.property);//"some data"alert(obj.length);//但與數組不同的是,它沒有length屬性,輸出undefined    與數組字面量相對應的,也有對象字面量的聲明方式var obj = {a:123,//這裡的a,b等同樣是對象的屬性名稱b:456 //注意,最後沒有逗號};還可以這樣寫obj = {"a":345,  //雖然如果用引號引起來就可以使用空格等不符合變數命名規範的字元,但強烈不推薦"b":333  };for.. in...迴圈出現了 (對於研究對象,for in迴圈太有用了)String對象以及一些用於字串的方法和屬性    str = new String("some string here");//表面上看,這和直接建立的字串是一樣的效果str = "some string here";但由於使用new String();所以建立出來的是對象var str = new String();alert(typeof str);//object//因為是對象,所以自然有很多屬性和方法字串本身也存這樣的方法有很多用於處理字串的方法以及一些屬性•length 屬性,返回字串的長度•indexOf 方法,返回字串內第一次出現子字串的字元位置•lastIndexOf 方法,返回字串中子字串最後出現的位置•charCodeAt 方法,返回一個整數，代表指定位置上字元的 Unicode 編碼•fromCharCode 方法,從一些 Unicode 字元值中返回一個字串•replace 方法,進行文字替換,返回替換後的字串的複製•substr 方法,返回一個從指定位置開始的指定長度的子字串•substring 方法,返回位於 String 對象中指定位置的子字串•toLowerCase 方法,返回一個字串，該字串中的字母被轉換為小寫字母•toUpperCase 方法,返回一個字串，該字串中的所有字母都被轉化為大寫字母•split 方法,把字串分割為字串數組。Script標籤與訪問HTML頁面this對象是一個一直存在的一個對象,它不能被聲明(this是關鍵字).這裡,this就是指"這個",指這個標籤!對於HTML中的元素,JavaScript會自動將其解析成一個對象.    推薦將script放在head部分!那麼,這就要用到另一個事件onload window.onload = initAll;//將所有代碼寫在一個函數之中,然後註冊到window對象的onload事件屬性上 //window表示視窗對象,只要視窗開啟,它就始終存在,當頁面載入完成後,會觸發window對象上的onload事件 function initAll() {var img = document.getElementById("myImg"); img.onclick = myFn;function myFn() {alert("圖象載入完成了!");}}這樣,代碼就不出錯了,不管將指令碼放在什麼位置,initAll只有當頁面載入完成後才會被執行訪問HTML頁面:HTML DOMHTML DOM將整個頁面當成一個document對象,HTML裡的標籤都要通過document對象來訪問.而文檔中的每個標籤,又會轉換成一個對象<p class="demo" title="第一個段落:DOM樹" id="p1">我們用一個p標籤來示範</p>它又會被轉換成下面這個對象{tagName:"p",className:"demo",title:"第一個段落:DOM樹",id:"p1",innerHTML:"我們用一個p標籤來示範"}你也許會奇怪,為什麼標籤的class屬性會變成對象的className屬性而不是class.class是JavaScript保留字!!!tagName表示它的標籤名,而innerHTML表示它裡面的HTML代碼瀏覽將HTML標籤轉換成這樣的對象後,在JavaScript中訪問該標籤的屬性或裡面的內容就簡單多了,但問題是如何訪問到這個對象!!*首先要給該標籤加個ID,然後使用document.getElementById方法就能夠訪問到它了注意,要將所要訪問HTML頁面的代碼都放在window的onload事件處理上!window.onload = initAll;function initAll() {var p = document.getElementById("p1");alert(p.className);alert(p.tagName);alert(p.title);alert(p.id);alert(p.innerHTML);}訪問HTML頁面就這麼簡單!擷取一個元素之後,不但可以讀取它的屬性值,還可以設定它的屬性值!利用這些,我們已經能做出一些激動人心的事了!//一些CSS.over {color:red;background:blue;font-size:larger;}.out {color:black;background:white;font-size:smaller;}.click {color:yellow;background:yellow;font-size:12px;}//HTML代碼<p id="p1" class="out">一大行文字,它們都是普通的文字!</p>//JavaScript代碼window.onload = initAll;function initAll() {var p = document.getElementById("p1");p.onclick=clickFn;//這裡的事件註冊方式除了比行內註冊方式少了括弧,其它的是一樣的p.onmouseover = overFn;p.onmouseout = outFn;}function clickFn() {this.className="click";//這裡,this也是可用的//注意是className,而不是class}function overFn() {this.className="over";}function outFn() {this.className="out";}擷取頁面元素不止這一種方法.document.getElementsByTagName方法也能擷取頁面元素,顧名思意,它是通過HTML的標籤來擷取元素的,而不是ID. 因為一張HTML頁面,一個ID名稱是唯一的,而標籤名則大多數是相同的,所以,getElementsByTagName方法只有一個參數,即一個字串形式的標籤名(tagName),而傳回值則是一個類似數組的HTML元素列表window.onload = initAll;//仍然要寫在window.onload事件處理函數中function initAll() {var pList = document.getElementsByTagName("P");//為什麼要用大寫的P?其實用小寫p也可以,不區分大小寫,但由於對象的tagName總報告的是大寫的alert(pList.length);//與數組相似,length報告有多少個元素,頁面上有多少個p標籤,就報告多少alert(pList[0].innerHTML);//這樣來訪問第一個p元素}另外,對於document.getElementsByTagName方法,還可以傳一個"*"號作為參數,以擷取頁面的所有元素,類似於CSS裡面的萬用字元window.onload = initAll;function initAll() {var allThings = document.body.getElementsByTagName("*");//可在任何DOM元素上調用getElementsByTagName方法,在body上調用此方法時,body外的標籤不會擷取到alert(allThings.length);//頁面上有多少個標籤,就報告多少(包含DOCTYPE)alert(allThings[3].innerHTML);//這樣來訪問第四個元素}javascript:偽協議偽協議不同於網際網路上所真實存在的如http://,https://,ftp://,而是為分支機構應用程式而使用的.如:tencent://(關聯QQ),data:(用base64編碼來在瀏覽器端輸出二進位檔案),還有就是javascript:javascript:偽協議有個問題,它會將執行結果返回給當然的頁面<a href="javascript:window.prompt('輸入內容將替換當前頁面!','');">A</a>解決方案很簡單<a href="javascript:window.prompt('輸入內容將替換當前頁面!','');undefined;">A</a>//將undefined加到最後儘管javascript偽協議提供了一定的靈活性,但在頁面中盡量不要使用!而對於調試JavaScript,javascript偽協議則顯得十分有用!