天天看點

javascript基礎部分

javascript基礎部分

 1  資料類型:

       基礎資料類型(通過typeof來檢測):Number,string,undefined,null,boolean,function

    typeof隻能檢測:number,string,boolean,undefined,function,object,無法識别:null,regExparagument等細分對象類型;

      對象資料類型(以基礎資料類型為基本,通過instanceof來檢測):isstring,isfunction,isarray,isNode etc.

 2 條件、循環語句

if:

    function age(){

        var num=document.getElementById('age').value;

        if(num<=18){

            alert("你還未成年")

        }

        else if(num<=30){

            alert("你是青年");

        else{

            alert("你老啦");

    }

switch:

switch(num){

              case 90:

                  msg="A"

                  break;

              case 80:

                  msg="B"

              case 70:

                  msg="C"

              case 60:

                  msg="D"

          }

for:

 for(var i=0;i<=10;i=i+1){

               s+=i;

           }

  3 DOM基礎

一、DOM基礎: 文檔對象模型(Doucment Object Model,DOM)是表示文檔(如HTML文檔、XML文檔)和通路、操作構成文檔的各種元素的應用程式接口。HTML文檔的層次結構被表示成樹形結構

Node接口為周遊和操作樹定義了屬性和方法。Node對象的childNodes屬性将傳回子節點的清單NodeList對象,firstChild、lastChild、nextSibling、previousSibling和parentNode屬性提供了周遊樹的方法。appendChild()、removeChild()、replaceChild(old,new)和insertBefore()方法,可以給文檔樹添加節點或從文檔中删除節點。

1.節點(node)層次 Document--最頂層的節點,所有的其他節點都是附屬于它的。 DocumentType--DTD引用(使用<!DOCTYPE>文法)的對象表現形式,它不能包含子節點。 DocumentFragment--可以像Document一樣來儲存其他節點。 Element--表示起始标簽和結束标簽之間的内容,例如<tag></tab>或者<tag/>。這是唯一可以同時包含特性和子節點的節點類型。 Attr--代表一對特性名和特性值。這個節點類型不能包含子節點。 Text--代表XML文檔中的在起始标簽和結束标簽之間,或者CDataSection内包含的普通文本。這個節點類型不能包含子節點。 CDataSection--<![CDATA[]]>的對象表現形式。這個節點類型僅能包含文本節點Text作為子節點。 Entity--表示在DTD中的一個實體定義,例如<!ENTITY foo"foo">。這個節點類型不能包含子節點。 EntityReference--代表一個實體引用,例如&quot;。這個節點類型不能包含子節點。 ProcessingInstruction--代表一個PI。這個節點類型不能包含子節點。 Comment--代表XML注釋。這個節點不能包含子節點。 Notation--代表在DTD中定義的記号。這個很少用到。

Node接口定義了所有節點類型都包含的特性和方法。

特性/方法 類型/傳回類型 說明
nodeName String 節點的名字;根據節點的類型而定義
nodeValue 節點的值;根據節點的類型而定義
nodeType Number 節點的類型常量值之一
ownerDocument Document 指向這個節點所屬的文檔
firstChild Node 指向在childNodes清單中的第一個節點
lastChild 指向在childNodes清單中的最後一個節點
childNodes NodeList 所有子節點的清單
previousSibling 指向前一個兄弟節點;如果這個節點就是第一個兄弟節點,那麼該值為null
nextSibling 指向後一個兄弟節點;如果這個節點就是最後一個兄弟節點,那麼該值為null
hasChildNodes() Boolean 當childNodes包含一個或多個節點時,傳回真
attributes NamedNodeMap 包含了代表一個元素的特性的Attr對象;僅用于Element節點
appendChild(node) 将node添加到childNodes的末尾
removeChild(node) 從childNodes中删除node
replaceChild(newnode,oldnode) 将childNodes中的oldnode替換成newnode
insertBefore(newnode,refnode) 在childNodes中的refnode之前插入newnodd

除節點外,DOM還定義了一些助手對象,它們可以和節點一起使用,但不是DOM文檔必有的部分。 NodeList--節點數組,按照數值進行索引;用來表示和一個元素的子節點。 NamedNodeMap--同時使用數值和名字進行索引的節點表;用于表示元素特性。

2.通路相關的節點 下面的幾節中考慮下面的HTML頁面

javascript基礎部分
<html>
    <head>
        <title>DOM Example</title>
    </head>
    <body>
        <p>Hello World!</p>
        <p>Isn't this exciting?</p>
        <p>You're learning to use the DOM!</p>
    </body>
</html>      
javascript基礎部分

3.處理特性 正如前面所提到的,即便Node接口已具有attributes方法,且已被所有類型的節點繼承,然而,隻有 Element節點才能有特性。Element節點的attributes屬性其實是NameNodeMap,它提供一些用于通路和處理其内容的方法: getNamedItem(name)--傳回nodename屬性值等于name的節點; removeNamedItem(name)--删除nodename屬性值等于name的節點; setNamedItem(node)--将node添加到清單中,按其nodeName屬性進行索引; item(pos)--像NodeList一樣,傳回在位置pos的節點; 注:請記住這些方法都是傳回一個Attr節點,而非特性值。

NamedNodeMap對象也有一個length屬性來訓示它所包含的節點的數量。 當NamedNodeMap用于表示特性時,其中每個節點都是Attr節點,這的nodeName屬性被設定為特性名稱,而nodeValue屬性被設定為特性的值。例如,假設有這樣一個元素: <p style="color:red" id="p1">Hello world!</p> 同時,假設變量oP包含指向這個元素的一個引用。于是可以這樣通路id特性的值: var sId = oP.attributes.getNamedItem("id").nodeValue; 當然,還可以用數值方式通路id特性,但這樣稍微有些不直覺: var sId = oP.attributes.item(1).nodeValue; 還可以通過給nodeValue屬性賦新值來改變id特性: oP.attributes.getNamedItem("id").nodeValue="newId"; Attr節點也有一個完全等同于(同時也完全同步于)nodeValue屬性的value屬性,并且有name屬性和nodeName屬性保持同步。我們可以随意使用這些屬性來修改或變更特性。 因為這個方法有些累贅,DOM又定義了三個元素方法來幫助通路特性: getAttribute(name)--等于attributes.getNamedItem(name).value; setAttribute(name,newvalue)--等于attribute.getNamedItem(name).value=newvalue; removeAttribute(name)--等于attribute.removeNamedItem(name)。

4.通路指定節點

(1)getElementsByTagName() 核心(XML) DOM定義了getElementsByTagName()方法,用來傳回一個包含所有的tagName(标簽名)特性等于某個指定值的元素的NodeList。在Element對象中,tagName特性總是等于小于号之後緊跟随的名稱--例如,<img />的tagName是"img"。下一行代碼傳回文檔中所有<img />元素的清單: var oImgs = document.getElementsByTagName("img"); 把所有圖形都存于oImgs後,隻需使用方括号或者Item()方法(getElementsByTagName()傳回一個和childNodes一樣的NodeList),就可以像通路子節點那樣逐個通路這些節點了: alert(oImgs[0].tagName);      //outputs "IMG" 假如隻想擷取在某個頁面第一個段落的所有圖像,可以通過對第一個段落元素調用getElementsByTagName()來完成,像這樣: var oPs = document.getElementByTagName("p"); var oImgsInp = oPs[0].getElementByTagName("img"); 可以使用一個星号的方法來擷取document中的所有元素: var oAllElements = document.getElementsByTagName("*"); 當參數是一個星号的時候,IE6.0并不傳回所有的元素。必須使用document.all來替代它。

(2)getElementsByName() HTML DOM 定義了getElementsByName(),這用來擷取所有name特性等于指定值的元素的。

(3)getElementById() 這是HTML DOM定義的第二種方法,它将傳回id特性等于指定值的元素。在HTML中,id特性是唯一的--這意味着沒有兩個元素可以共享同一個id。毫無疑問這是從文檔樹中擷取單個指定元素最快的方法。 注:如果給定的ID比對某個元素的name特性,IE6.0還會傳回這個元素。這是一個bug,也是必須非常小心的一個問題。

5.建立新節點 最常用到的幾個方法是 createDocumentFragment()--建立文檔碎片節點 createElement(tagname)--建立标簽名為tagname的元素 createTextNode(text)--建立包含文本text的文本節點

createElement()、createTextNode()、appendChild()

javascript基礎部分
<html>
    <head>
        <title>createElement() Example</title>
        <script type="text/javascript">
            function createMessage() {
                var oP = document.createElement("p");
                var oText = document.createTextNode("Hello World!");
                oP.appendChild(oText);
                document.body.appendChild(oP);
            }
        </script>
    </head>
    <body onload="createMessage()">
    </body>
</html>      
javascript基礎部分

removeChild()、replaceChild()、insertBefore() 删除節點

javascript基礎部分
<html>
    <head>
        <title>removeChild() Example</title>
        <script type="text/javascript">
            function removeMessage() {
                var oP = document.body.getElementsByTagName("p")[0];
                oP.parentNode.removeChild(oP);
            }
        </script>
    </head>
    <body onload="removeMessage()">
        <p>Hello World!</p>
    </body>
</html>      
javascript基礎部分

替換

javascript基礎部分
<html>
    <head>
        <title>replaceChild() Example</title>
        <script type="text/javascript">
            function replaceMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                oNewP.appendChild(oText);
                var oOldP = document.body.getElementsByTagName("p")[0];
                oOldP.parentNode.replaceChild(oNewP, oOldP);
            }
        </script>
    </head>
    <body onload="replaceMessage()">
        <p>Hello World!</p>
    </body>
</html>      
javascript基礎部分

新消息添加到舊消息之前

javascript基礎部分
<html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function insertMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                oNewP.appendChild(oText);
                var oOldP = document.getElementsByTagName("p")[0];
                document.body.insertBefore(oNewP, oOldP);
            }
        </script>
    </head>
    <body onload="insertMessage()">
        <p>Hello World!</p>
    </body>
</html>      
javascript基礎部分

createDocumentFragment() 一旦把節點添加到document.body(或者它的後代節點)中,頁面就會更新并反映出這個變化。對于少量的更新,這是很好的,然而,當要向document添加大量資料時,如果逐個添加這些變動,這個過程有可能會十分緩慢。為解決這個問題,可以建立一個文檔碎片,把所有的新節點附加其上,然後把文檔碎片的内容一次性添加到document中,假如想建立十個新段落。

javascript基礎部分
<html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function addMessages() {
                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
                
                var oFragment = document.createDocumentFragment();
                
                for (var i=0; i < arrText.length; i++) {
                    var oP = document.createElement("p");
                    var oText = document.createTextNode(arrText[i]);
                    oP.appendChild(oText);
                    oFragment.appendChild(oP);
                }
                
                document.body.appendChild(oFragment);

            }
        </script>
    </head>
    <body onload="addMessages()">

    </body>
</html>      
javascript基礎部分

6.讓特性像屬性一樣 大部分情況下,HTML DOM元素中包含的所有特性都是可作為屬性。 假設有如下圖像元素: <img src = "mypicture.jpg" border=0 /> 如果要使用核心的DOM來擷取和設定src和border特性,那麼要用getAttribute()和setAttribute()方法: alert(oImg.getAttribute("src")); alert(oImg.getAttribute("border")); oImg.setAttribute("src","mypicture2.jpg"); oImg.setAttribute("border",1); 然而,使用HTML DOM,可以使用同樣名稱的屬性來擷取和設定這些值: alert(oImg.src); alert(oImg.border); oImg.src="mypicture2.jpg"; oImg.border ="1"; 唯一的特性名和屬性名不一樣的特例是class屬性,它是用來指定應用于某個元素的一個CSS類,因為class在ECMAScript中是一個保留字,在javascript中,它不能被作為變量名、屬性名或都函數名。于是,相應的屬性名就變成了className; 注:IE在setAttribute()上有很大的問題,最好盡可能使用屬性。

7.table方法 為了協助建立表格,HTML DOM給<table/>,<tbody/>和<tr/>等元素添加了一些特性和方法。 給<table/>元素添加了以下内容:

caption 指向<caption/>元素并将其放入表格
tBodies <tbody/>元素的集合
tFoot 指向<tfoot/>元素(如果存在)
tHead 指向<thead/>元素(如果存在)
rows 表格中所有行的集合
createTHead() 建立<thead/>元素并将其放入表格
createTFood() 建立<tfoot/>元素并将其放入表格
createCpation() 建立<caption/>元素并将其放入表格
deleteTHead() 删除<thead/>元素
deleteTFood() 删除<tfoot/>元素
deleteCaption() 删除<caption/>元素
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一個新行

<tbody/>元素添加了以下内容

<tbody/>中所有行的集合

<tr/>元素添加了以下内容

cells <tr/>元素中所有的單元格的集合
deleteCell(postion) 删除給定位置上的單元格
insertCell(postion) 在cells集合的給點位置上插入一個新的單元格

8.周遊DOM NodeIterator,TreeWalker DOM Level2的功能,這些功能隻有在Mozilla和Konqueror/Safari中才有

4  數組和對象

Javascript是由浏覽器解釋運作的,是以其和作業系統也是無關的,也是平台無關性的。

一、javascript對象

javascript的object類型

1.使用new運算符

  var ob=new Object();建立一個對象

測試對象是什麼類型:用typeof ,使用例子:typeof ob;

對象中包含哪些元素:

   1.屬性

   2.函數

屬性的建立方法:ob.name="例子",alert(ob.name);

2.可以省略new關鍵字

  var ob=Object();

3.字面量方式建立對象

  var ob={};

  建立屬性:var ob={name:'例子',age:18};

  建立屬性也可以是:var ob={‘name':'例子'};雙引号也可以

  輸出:alert(ob.name);

        alert(ob.['name']);用數組的方式輸出,雙引号也可以

4.給對象建立方法

1.傳統的建立方法

function objrun(){

return '123';

}

var ob=new Object();

ob.name='lizi';

ob.age=18;

ob.run=objrun();會傳回值,ob.run=getrun這個會列印出代碼

alert(ob.run);

2.字面量的建立方法

var obj={

     name:'我的名字',

     age:21,

     run:function(){//匿名方法

       return '123';

      }

};

測試調用函數

alert(obj.run());

5.删除屬性

  delete obj.name;

小技巧:字面量的對象顯得代碼更加簡潔,具有封裝的感覺

   例如:我們要穿多個參數,字面量方法更加簡潔

  function box(obj){

      if(obj.name!=undefined)alert(obj.name);

      if(obj.love!=undefined) alert(obj.age);

  a. var obj={

     name:‘我的名字’,

     age:21

     }

b.匿名對象傳參數

   box({

     });

二、Array類型

   建立Array的方法有兩種:

 1.使用new關鍵字

  var obj=new Array();

var obj=new Array(10);建立一個包含10元素的數組

var obj=new Array('我的名字','位址');建立了一個數組,并配置設定了2個元素

   alert(typeof obj);obj屬于Object類型

var obj=new Array('我的名字','位址'),數組值的列印:

  1.以下标

  2.直接alert(obj);

2.字面量的數組建立

ps:和object一樣,字面量的寫法不會調用Array()構造方法,(Firefox除外)

字面量的增加修改

toLocaleString()方法有本地格式化的功能,其得到的日期是本電腦的時間

join()方法是将數組以某種方式(在這裡是用%分隔)分隔傳回的字元串

數組的棧方法(後進先出),就是類似于有底的杯子中裝了東西,再取出的過程

 alert(obe.push("我家門前")); 在數組的最後位置添加一個元素,并傳回長度

alert(obe.shift());   移除數組中的第一個元素  ,并傳回被移除的那個元素

alert(obe.unshift("我家111"));   在數組的第一個位置添加一個元素 ,并傳回長度

alert(obe.pop());   移除數組中的最後一個元素  ,并傳回被移除的那個元素

 alert(box.reverse());傳回一個倒序的數組

var box=[1,5,7,9,3,2];

       box.sort();從小到大排序

數組中操作方法:

1.concat()方法,是在原來的數組中添加一個新的元素并建立一個新的數組

  var box=['你好',123];

        var info=box.concat("世界");

                  alert(info); 是在原來的數組中添加一個新的元素并建立一個新的數組

        alert(box); 原來的數組沒有變化

2.slice()方法的用法,取值

    var box=['你好',123,'世界'];

        var info=box.slice(1);  從下标為1開始讀取資料直到把該數組的值讀完

                 alert(info);

var box=['你好',123,'世界'];

 //注意不是從第1個位置取3個,而是從第一個位置取到第3個位置(也就是不管從什麼位置開始,都隻取到第三個元素的地方)

        var info=box.slice(1,3); 

        alert(info);

3.splice()方法的用法

     a.篩選功能

     var box=['你好',123,'世界'];

        alert(box.splice(0,3));    //傳回從第0個位置取3個元素

     b.删除功能

     box.splice(0,2);//删除了從第0個位置取3個的元素

        alert(box); //原對象隻剩下’世界‘了

      c.插入功能

//1,0的意思是從下标為1的位置開始不取值,  1,0,"真","好"代表的是從下标為1的位置開始插入資料

       //box.splice(1,0,"真","好");

//1,2的意思是從下标為1的位置開始截掉2個值,  1,2,"真","好"代表的是從下标為1的位置開始插入資料

         box.splice(1,2,"真","好");

        alert(box);

     d.替換功能

      var box=['你好',123,'世界'];

//1,1的意思是從下标為1的位置開始截掉1個值,并以100來替換 ,其實和插入功能差不多

box.splice(1,1,100);//傳回被删除的那一條

alert(box);

4 Window對象

Window屬性:closed,frames[],history,location

Window對象的重要方法 alert() confirm() prompt()      

向使用者顯示簡單的對話框,confirm()和prompt()用于擷取使用者的響應   close()      關閉視窗  

 focus() blur()      請求或放棄視窗的鍵盤焦點。focus()方法還通過把視窗提前到堆棧順序的最前面,  進而確定視窗可見

  moveBy() moveTo()      移動視窗  

 open()      打開新的定義視窗,用指定的特性顯示指定的URL   print()      列印視窗或架構中的内容,就像使用者點選了視窗工具欄中的Print按鈕一樣(某些老版  本浏覽器不支援此方法)     resizeBy() resizeTo()      調整視窗大小   scrollBy() scrollTo()      滾動視窗中顯示的文檔   setInterval() clearInterval()      設定或者取消重複調用的函數,該函數在兩次調用之間有指定的延遲   setTimeout() clearTimeout()      設定或取消在指定的若幹毫秒後要調用一次的函數

  Window對象的onerror屬性比較特殊,如果給這個屬性賦一個函數,那麼隻要這個視窗中發生JavaScript錯誤,該函數就會被調用,它就成了視窗的錯誤處理函數。定義onerror屬性方法,如:           window.onerror=method; //注意method為要處理錯誤調用的函數,不要();

Window.navigator屬性引用的是包含Web浏覽器總體資訊的Navigator對象

 5 String

1.擷取字元串的長度:

var s = Hello world; document.write(length:+s.length);   2.為字元串添加各種樣式,如:  var txt ="Hello world";   document.write('length:' + txt.fontsize(15)); txt.big() txt.small() txt.bold() fixed() txt.strike() txt.link('http://www.w3school.com.cn')

3.擷取字元串中部分内容首次出現的位置 var hw_text = 'Hello world'; document.write(hw_text.indexOf('Hello')

4.内容替換:  var str='Visit Microsoft!';             document.write(str.replace('Microsoft', 'W3School'));

5 要在字元串中添加換行符,需要使用轉義字元"\n": var confirmString = "You did not enter a response to the last " +         "question.\n\nSubmit form anyway?"; var confirmValue = confirm(confirmString);   但這種方法隻能用在像警告、确認對話框之類的情況下,如果将這段文本作為HTML内容呈現,就無效了,此時用"<br>"代替它:             var confirmString = "You did not enter <br /> a response to the last ";             document.write(confirmString);

6 将兩個或多個字元串拼接為一個大的字元串,String對象還提供了方法concat(),它完成與"+"相同的功能: var longString = "One piece " + "plus one more piece.";

7 通路字元串的子串 使用substring()或slice()方法, 還有一個方法是substr(),其原型為: string.substr(start, length) substring()的原型為:  string.substring(from, to) substring()總是從兩個參數中較小的那個開始,到較大的那個結束

 slice()的原型為:  string.slice(start, end)     參數start表示子串的起始位置,如果為負數,那麼可以了解為倒數第幾個開始,例如-3表示從倒數第三個開始;參數end表示結束位置,與start一 樣,它也可以為負數,其含義也表示到倒數第幾個結束。slice()的參數可以為負數,是以要比substring()更加靈活,但沒那麼寬容了,如果 start比end要大,它将傳回一個空字元串(示例略)。

8 字元串的大小寫轉換 使用toLowerCase()和toUpperCase()方法.

9 判斷兩個字元串是否相等 先将使用者的輸入值全部轉換為大寫(或小寫),然後再行比較:== ===   != !== var name = document.form1.txtUserName.value.toLowerCase();     if(name == "urname")

var strA = "i love you!"; var strB = new String("i love you!");

    這兩個變量含有相同的字元序列,但資料類型卻不同,前者為string,後者為object,在使用"=="操作符時,JavaScript會嘗試各種求值,以檢測兩者是否會在某種情況下相等。是以下面的表達式結果為true: strA == strB。     第二種操作符是"嚴格"的"===",它在求值時不會這麼寬容,不會進行類型轉換。是以表達式strA === strB的值為false,雖然兩個變量持有的值相同。     有時代碼的邏輯要求你判斷兩個值是否不相等,這裡也有兩個選擇:"!="和嚴格的"!==",它們的關系就類似于"=="和"==="。

    if(document.form1.txtAge.value == someNumericVar)  也可以提前轉換:     if(parseInt(document.form1.txtAge.value) == someNumericVar)

10 字元串的查找  String對象有一個與indexOf()對應的方法,lastIndexOf():

使用string的indexOf()方法:     strObj.indexOf(subString[, startIndex])

11 在Unicode值和字元串中的字元間轉換 strObj.charCodeAt(index)   String.fromCharCode(c1, c2, ...)     var strObj = "ABCDEFG";     var code = strObj.charCodeAt(2); // Unicode value of character 'C' is 67 如果index指定的索引處沒有字元,則傳回值為NaN。

    要将Unicode編碼轉換為一個字元,使用String.fromCharCode()方法,注意它是String對象的一個"靜态方法",也就是說在使用前不需要建立字元串執行個體:

    var str = String.fromCharCode(72, 101, 108, 108, 111);  // str == "Hello"

12 JavaScript中定義的轉義字元加單引号或雙引号來表示,如“/'”或“/"”。JavaScript的轉義序列有:

     /0           NUL字元(/u0000)

     /b            倒退符(/u0008)

     /t            水準制表符(/u0009)

     /n            換行符(/u000A)

     /v            垂直制表符(/u000B)

     /f              換頁符(/u000C)

     /r             回車符(/u000D)

     /"             雙引号(/u0022)

     /'             單引号或撇号(/u0027)

     //             反斜杠(/u005C)

     /xXX     由兩位十六進制數值XX指定的Latin-1字元

     /uXXXX    由四位十六進制數XXXX指定的Unicode字元

     /XXX     由一位到三位八進制數(1到377)指定的Latin-1字元。ECMAScript不支援。

 6 Math方法

1.Math.random() -- 傳回0和1之間的僞随機數 可能為0,但總是小于1,[0,1)。  Math.random()*10//傳回 0-10 之間的随機數。 随機整數  Math.random()*(20-10)+10 //傳回10-20之間的随機數。

2 Math.floor() -- 向下取得一個最接近的整數 隻取出其中的整數   Math.floor(12.2)// 傳回12 Math.floor(12.0)//傳回12

3 Math.ceil() -- 向上取得一個最接近的整數 Math.ceil(12.2)//傳回13 Math.ceil(12.0)// 傳回12

4 Math.round() -- 進行四舍五入 Math.round(12.2)// 傳回12                             Math.round(12.7)//傳回13                             Math.round(12.0)//傳回12

  7 Date類

Date方法 //UTC()世界協調時間,它會按照它的基準去計算,是以中國大陸是屬于東八區,是以時間要被加8個小時 alert(Date.UTC(2014,3,4,22,22,22,45));//傳回的毫秒數 //如果沒有UTC()就傳回本地時間

1 通用方法,new Date()得到目前時間,但各個浏覽器顯示的方法不同,是以不提倡使用

  Date(2014,3,4,22,22,22,45);   var date=new Date(2014,3,4,22,22,22,45);      

   alert(date); //傳回Fri Apr 04 2014 22:22:22 GMT+0800         alert("toString: "+date.toString());  //傳回Fri Apr 04 2014 22:22:22 GMT+0800         alert("toLocaleString: "+date.toLocaleString()); //傳回2014年4月4日 22:22:22         alert("valueOf"+date.valueOf());//傳回1396621342045

2 Date類型的日期格式化方法

var date=new Date(2014,3,4,22,22,22,45); alert(date.toDateString()); //Fri Apr 04 2014 alert(date.toTimeString());  

  //22:22:22 GMT+0800 alert(date.toLocaleDateString());//2014年4月4日 alert(date.toLocaleTimeString());  //22:22:22  alert(date.toUTCString());  //Fri, 04 Apr 2014 14:22:22 GMT

3 元件方法 date.get....或者date.set....各種方法的使用da.getYear(),da.getMonth()  da.setHours(9);      

      alert(da.getUTCHours()); //傳回上午1點(減去了8個小時)     alert(da.getTimezoneOffset());   //計算本時區和UTC時區之間的差距,谷歌不支援

  8 資料類型轉換

1從數字到字元串的轉換在JavaScript中是最常執行的。

我們可以通過以下方法顯式的實作:    

  var str = String(number);     

 var str = number + "";     

 var string = number.toString();   //number被轉換成Number對象,再調用Number.toString()方法

2這三種方法都回對結果字元串的數字進行适當舍入toFixed。    

  var n = 123456.789;      n.toFixed(0);      //"123457"      n.toFixed(2);      //"123456.79"      n.toExponential(1);  //"1.2e+5"      n.toExponential(3);  //"1.235e+5"      n.toPrecision(4);   //"1.235e+5"      n.toPrecision(7);   //"123456.8"

3 如果parseInt()和parseFloat()不能将指定的字元串轉換成數字,将傳回NaN:   

       parseInt("3 abc");                  //3      parseFloat("3.15 abc");       //3.15      parseInt("12.34");                 //12      parseInt("0xFF");                  //255

         parseInt("eleven");     //NaN      parseFloat("s12.35");   //NaN

  9 定時器

1使用定時器實作JavaScript的延期執行或重複執行 window對象提供了兩個方法來實作定時器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代碼在指定時間後運作;而後者則可以使一段代碼每過指定時間就運作一次。它們的原型如下: window.setTimeout(expression,milliseconds); window.setInterval(expression,milliseconds); 其中,expression可以是用引号括起來的一段代碼,也可以是一個函數名,到了指定的時間,系統便會自動調用該函數,當使用函數名作為調用句柄時, 不能帶有任何參數;而使用字元串時,則可以在其中寫入要傳遞的參數。兩個方法的第二個參數是milliseconds,表示延時或者重複執行的毫秒數。

2 window.setTimeout方法

這段代碼将使得頁面打開5秒鐘後顯示對話框“hello”。其中最後一句也可以寫為: window.setTimeout("hello()",5000);

function hello(){ alert("hello"); } window.setTimeout(hello,5000);

如果要取消顯示,隻需單擊頁面任何一部分,就執行了window.clearTimeout方法,使得逾時操作被取消。 function hello(){       alert("hello"); } var id=window.setTimeout(hello,5000); document.onclick=function(){      window.clearTimeout(id); z }

3 window.setInterval方法

該方法使得一個函數每隔固定時間被調用一次,是一個很常用的方法。如果想要取消定時執行,和clearTimeout方法類似,可以調用 window.clearInterval方法。clearInterval方法同樣接收一個setInterval方法傳回的值作為參數。例如:

複制代碼 代碼如下:

//定義一個反複執行的調用 var id=window.setInterval("somefunction",10000); //取消定時執行 window.clearInterval(id);

10 浏覽器對象

Window對象是用戶端JavaScript的全局對象,它定義了大量的屬性和方法,提供給客戶對Web浏覽器的視窗進行操作。它還定義了引用其他重要對象的屬性(如引用Document對象的document屬性)。此外Window對象還包括兩個自我引用的屬性:window和self,可以使用它們來直接引用Windwo對象。

Window對象的document屬性引用與這個視窗關聯在一起的Document對象;location屬性引用與該視窗關聯在一起的Location對象。Window對象還包括一個frames[]數組,引用代表原是視窗的架構的Window對象。是以,document代表的是目前視窗的Document對象,而frames[1].document引用的是目前視窗的第二個子架構的Document對象。

  對于多視窗或多架構,除了考慮Window對象中定義的變量和函數的持續性外,還需要考慮Window對象自身的持續性。隻要浏覽器的頂級視窗存在,那代表它的Window對象會一直存在,對它的Window對象的引用都有效。

  這意味着,Window對象的生存期可能比它包含和顯示的網頁長,也可能比它顯示的網頁所包含的腳本長。

如果JavaScript作為一個檔案中使用的唯一腳本,在<head>部分加入如下代碼:

 <meta http equiv="Centent-Script-type" content="text/javascript">

  這樣,就無需指定<script>的language和type屬性了。

 如果<script>标簽包含了src屬性,浏覽器會忽略<script>和</script>标記之間的代碼。

  使用src性質可以将JavaScript代碼與HTML代碼分離,進而簡化HTML檔案;如果JavaScript函數被多個頁面共享,可以将它們放置在單獨JavaScript檔案中,使浏覽器将其緩存起來,這樣可以提高裝載速度;由于src的值可以是任意URL,是以來自一個Web伺服器的JavaScript程式或網頁可以使用由另一個Web伺服器輸出的代碼(如子程式庫)。

任何使用正規的URL的地方都可以使用javascript:URL。

 11 建立對象後,我們可以通過"."運算符,在對象中建立新屬性、引用已有屬性、設定屬性值等。

            var book = new Object();

            book.title = "Book Title";//建立新屬性 設定屬性值

            book.name = new Object();//

            book.chaptor1 = new Object();//建立新屬性

            book.chaptor1.title = "dd";// 設定屬性值

            book.name.year = "20"; 

            alert(book.name.year);

12 JavaScript 函數

1   由于JavaScript是一種無類型語言,是以不能給函數的參數指定類型,JavaScript也不會檢測傳遞的參數的資料類型。而且JavaScript也不會檢測傳遞的參數的個數是否正确,如果參數比函數需要的個數多,多餘的值會被忽略;如果傳遞的參數比函數需要的個數少,缺少處補undefined。

  同樣,由于JavaScript是一種無類型語言,是以無需定義函數的傳回值類型,如果在函數體中不包含return語句,将傳回undefined。

2    同樣,由于JavaScript是一種無類型語言,是以無需定義函數的傳回值類型,如果在函數體中不包含return語句,将傳回undefined。

13 正規表達式定義

  1 RegExp對象   構造函數RegExp()有兩個字元串參數,其中第二個參數是可選的,它們是"g"、"i"、"m"的組合。第一個參數是包含正規表達式主體的字元串,也就是正規表達式直接量中出現斜線之間的文本。

  RegExp對象定義了兩個用于執行模式比對操作的方法。   exec()方法與String的match()方法相似,它是以字元串為參數的RegExp方法。exec()方法對一個指定的字元串執行一個正規表達式,也就是在一個字元串中檢索比對。如果沒有比對傳回null,如果找到比對傳回一個數組。結果與match()方法的非全局檢索傳回的數組一樣,而不管正規表達式中是否具有全局屬性g。

            var patt1 = new RegExp("e");

            var patt1 = /e/;

            document.write(patt1.test("The best things in life are free"));  //test();exec();compile()

2 正規表達式:  

     1 直接量,var pattern = /s$/;  //與所有以字母"s"結尾的字元串比對   

     2   構造函數,var pattern = new RegExp('s$');

var patt1=new RegExp("e");當您使用該 RegExp 對象在一個字元串中檢索時,将尋找的是字元 "e"。

RegExp 對象的方法 RegExp 對象有

3 個方法:test()、exec() 以及 compile()。

test() test() 方法檢索字元串中的指定值。傳回值是 true 或 false。

例子: var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free")); 由于該字元串中存在字母 "e",以上代碼的輸出将是:

 14  JavaScript 變量

1 JavaScript的變量是無類型(untype)的 2 JavaScript的變量可以存放任何類型的值 3 JavaScript可以在必要的時候自動将一種類型的值轉換成另外一種類型。

4 在JavaScript中聲明一個變量的方法有:     var i;     var sum;     var i,sum;     var i =0;     var sum = 20;     var str = "hello";

  如果一個變量被聲明了,但是沒有指派,它的初始值就是undefined

5 在JavaScript中可以使用var語句多次聲明同一個變量,而不造成錯誤。 如果嘗試給一個未用var聲明的變量指派,JavaScript會隐式地聲明這個變量,不過這個變量将被建立為全局變量,即使是在一個函數體内。 如果嘗試讀一個未聲明的變量的值,JavaScript會生成一個錯誤。如果讀一個聲明後,未指派的變量的值,将傳回undefined

6 對于無用的存儲單元,JavaScript提供了一種無用存儲單元收集的方法,自動釋放無用的記憶體空間。

7 不管是全局變量還是局部變量,JavaScrit都提供了一個獨立的對象來存儲它們。

 15 JavaScript語句

1 複合語句:如語句塊。

  if語句:

  else if語句:

  switch語言:JavaScript的switch語言與Java和C非常相似,但要注意,在JavaScript中switch語言比對case表達式是用===等同運算符判定的,而不是==相等運算符。

  while語句:

  do/while語句:

  for語句:

  for/in語句:for/in語句

   但要注意,在JavaScript中switch語言比對case表達式是用===等同運算符判定的,而不是==相等運算符。

2 标簽語句:給語句或語句塊命名,常用于語句跳轉和引用。

    break語句:

  continue語句:

  var語句:

  function語句:

  return語句:

  throw語句:在JavaScript中,當發生運作時錯誤或程式明确地使用throw語句時就會抛出異常(exception),是用try/catch/finally語句可以捕捉異常(這點很像Java的異常機制)。

  try/catch/finally語句: 空語句 ;:空語句是不會執行任何操作的,但人們在實踐中發現,空語句在建立一個具有空主體的循環時是很有用的。

 16 JavaScript 詞法結構

1 字元集: JavaScript程式用的是Unicode字元集。由于ASCII編碼和Latin-1編碼都是Unicode編碼的子集,是以用這兩種編碼寫的JavaScript程式都是絕對有效的。

2 大小寫敏感性: JavaScript是一種區分大小寫的語言。需要注意的一點是,HTML并不區分大小寫,而HTML經常會和JavaScript一起使用,是以要注意不要把二者的這一特性混淆使用。

3 可選的分号,在JavaScript中,為分隔語句,在簡單語句後的分号(;)是可選的,為了保持良好的程式設計習慣和增加代碼的可讀性,強烈建議養成使用分号的習慣。

4 注釋:JavaScript的注釋和Java的注釋非常類似,“//”作為行注釋,“ /* ”和“ */ ”之間的所有内容都被注釋。

5 直接量:所謂直接量,就是程式中直接顯示出來的資料值。

6 辨別符:所謂辨別符,就是一個名字,通常用來命名變量、函數等。JavaScript中的辨別符命名規則同Java等多種語言一樣,第一個字元必須以字母、下劃線(_)或美元符号($)。此外,ECMAScript v3标準中還允許辨別符中有Unicode轉義序列。所謂Unicode轉義序列,使字元/u後接4個十六進制數字,用來指定一個16位的字元編碼。

7 保留字:同許都其他語言一樣,JavaScript中預留了許多保留字。包括

  JavaScript關鍵字:                                                         break   do  if  switch  typeof  case  else  in  this  var  catch  false instanceof  throw  void  continue  finally  new  true  while  default  for  null  try  with  delete function  return

繼續閱讀