JAVASCRIPT學習總結

    1.JavaScript

      1.1.介紹:嵌入式腳本語言,瀏覽器執行,它是以字符串解析執行的,它是一種基於對象的語言,不具有封裝,繼承,多態等特點。

      1.2.核心:1.事件,2.對象(Bom,Dom).

      1.3.js是事件驅動語言:

           1.區分大小寫.

           2.每句話後分號可有可無(最好有).

           3.註釋和java一樣.

           4.弱類型語言.

      1.4.有兩種數據類型:

          1.原始數據類型:放在棧裏的簡單數據類型(值在變量的地址).(boolean,String,undefind,null,Number..)

          2.引用數據類型:放在堆裏的複雜數據類型.

    2.Array對象-提供對創建任何數據類型的數組的支持。

      2.1.concat 方法 (Array)---返回一個新數組,這個新數組是由兩個或更多數組組合而成的。

      2.2.join 方法-返回字符串值,其中包含了連接到一起的數組的所有元素,元素由指定的分隔符分隔開來

      2.3.pop 方法--移除數組中的最後一個元素並返回該元素

      2.4.shift 方法--移除數組中的第一個元素並返回該元素。

      2.5.unshift 方法--將指定的元素插入數組開始位置並返回該數組。

      2.6.push 方法--將新元素添加到一個數組中,並返回數組的新長度值。結束位置

      2.7.slice 方法 (2,4)--返回一個數組的一段。

      2.8.splice 方法--從一個數組中移除一個或多個元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。

      2.9.toLocaleString 方法--返回一個日期,該日期使用當前區域設置並已被轉換爲字符串。

    3.Boolean 對象-創建新的 Boolean值。

    4.Date對象-啓用基本存儲器並取得日期和時間

    5.Error對象-保存有關錯誤的信息。

    6.Global 對象-把所有全局方法集中在一個對象中.

      6.1.escape(str) 方法--- String對象編碼以便它們能在所有計算機上可讀,;

      6.2.unescape(str) 方法---解碼用 escape方法進行了編碼的 String對象。

      6.3.eval 方法--檢查 JScript代碼並執行. eval(codeString),這個字符串將由 JScript分析器進行分析和執行

      6.4.isNaN 方法---返回一個 Boolean值,指明提供的值是否是保留值 NaN(不是數字)。

    7.Math 對象-是一個固有對象,提供基本數學函數和常數。

      7.1.alert(Math.round(1.5)); //四捨五入

    8.Number 對象-代表數值數據類型和提供數值常數的對象。

    9.String 對象-可用於處理或格式化文本字符串以及確定和定位字符串

      9.1.在每個空格字符處進行分解。--var ss = s.split("-");

    10.typeof 返回原始值類型

      10.1.typeof 運算符把類型信息當作字符串返回。typeof返回值有六種可能:

      "number," "string," "boolean," "object," "function," "undefined."

    11.instanceof 判斷對象類型

    12.this表示:永遠都指向調用它的那個對象-不加this,undefined - this .

    13.prototype原型

      13.1.prototype 屬性提供對象的類的一組基本功能。對象的新實例“繼承”賦予該對象原型的操作。

 

    14.定義方法的方式:結構體,對象引用(定義是私有的),通過原型(定義是公共的)

      14.1.結構體

          function pe(){...}

           1.1--pe = function(){}

           1.2--HashMap.prototype = {size :function(){

                 return this.elements.length;

           },put..}

      14.2.對象引用

          s1.q1 = function(){

           alert('I am q1.');

      }

      14.3.原型

          pe.prototype.fun1 = function(){

           alert('我是原型220');

      }

    1.constructor:對創建對象構造器的引用

      var date = new Date();

      var d = date.constructor;

      var ss = new d();

      //alert(ss.getDay());

    2.StringBuffer

      append-push(value);

      toString-join(',');

      以及在Java裏面StringBufferString的區別

    3.className-p標籤顏色改變,引用css

      p.className="oa"; --css裏面.oa;

    4

       4.1--getElementsByTagName-獲得目標對象.

         var img = document.getElementsByTagName("img");

       4.2--getElementById-通過id獲得標籤對象

         var p = document.getElementById('pa');

    5.arguments-類似於數組,但是不能用join(); length屬性表示參數列表的長度.--方法重載

    6

      6.1--clearInterval 使用 setInterval 方法取消先前開始的間隔事件。

      6.2--clearTimeout 取消先前用 setTimeout 方法設置的超時事件。

      6.3--setInterval 每經過指定毫秒值後計算一個表達式。

      6.4--setTimeout 經過指定毫秒值後計算一個表達式。

 

    7.定義對象的三種方式

      //1.

      var obj = new Object();

      obj.name = '123d';

      //alert(obj.name);

 

      //2.

      var obj = {x:'123123',y:'aaa'};

      alert(obj.y);

      //3

      function point(){}

 

    8.動態創建span對象

      document.createElement("span");

      span.innerText='..';

      span.attachEvent("onclick",fn);

      //span對象追加到div後面

      var div = document.getElementById('sss');

      div.appendChild(span);

 

    9.圖片顯示

      var img = document.createElement("img");

      body.appendChild(img); //動態創建img對象

      i = window.setInterval("fun()",1000);

      定義一個變量 i進行  window.clearTimeout(i)控制暫停.

      onmouseover 當用戶將鼠標指針移動到對象內時觸發。

      onmouseout 當用戶將鼠標指針移出對象邊界時觸發。

    10.計時器,HashMap.

 

    1.document.cookie -短期-關閉瀏覽器,cookie結束,長期-存於本地

      1.1.介紹:JavaScript中的另一個機制:cookie,則可以達到真正全局變量的要求。

      cookie是瀏覽器提供的一種機制,它將document對象的cookie屬性提供給JavaScript

      可以由JavaScript對其進行控制.(cookie文件存儲於documents and settings\userName\cookie\文件夾下)

      1.2.可以作爲全局變量,這是它最大的一個優點.用於:

          1.2.1.保存用戶登錄狀態。例如將用戶id存儲於一個cookie內,這樣當用戶下次訪問該頁面時就不需要重新登錄了.

          1.2.2.跟蹤用戶行爲,例如一個天氣預報網站,能夠根據用戶選擇的地區顯示,當地的天氣情況上次用戶所在地區的天氣情況.

          1.2.3.定製頁面。如果網站提供了換膚或更換佈局的功能,那麼可以使用cookie來記錄用戶的選項.背景,分辨率...

          1.2.4.創建購物車。正如在前面的例子中使用cookie來記錄用戶需要購買的商品一樣,在結賬的時候可以統一提交。例如淘寶網就使用cookie記錄了用戶曾經瀏覽過的商品,方便隨時進行比較。

      1.3.cookie的缺點主要集中於安全性和隱私保護。主要包括以下幾種:

          1.3.1.cookie可能被禁用。當用戶非常注重個人隱私保護時,他很可能禁用瀏覽器的cookie功能;

          1.3.2.cookie是與瀏覽器相關的。這意味着即使訪問的是同一個頁面,不同瀏覽器之間所保存的cookie也是不能互相訪問的

          1.3.3.cookie可能被刪除。因爲每個cookie都是硬盤上的一個文件,因此很有可能被用戶刪除;

          1.3.4.cookie安全性不夠高。所有的cookie都是以純文本的形式記錄於文件中,因此如果要保存用戶名密碼等信息時,最好事先經過加密處理。

      1.4.設置cookie每個cookie都是一個名/值對,可以把下面這樣一個字符串賦值給document.cookie

          document.cookie="userId=828";//document.cookie =key+"="+value+";expires="+date.toGMTString();

    2.insertRow.

      主要用到的方法有:

          var tr = table.insertRow();//插入行.

          var td =  tr.insertCell();//插入列.

          td.innerText = ''+i;//置或獲取位於對象起始和結束標籤內的文本。

          tr.appendChild(td);//列加入指定行.

          table.appendChild(tr);//行加入指定表格.

          !!!thisbutton對象button.td(parentNode).tr.table .removeChild(button.td.tr); -刪除指定行.

    3.new操作

      1.當解析器遇到new並操作的時候創建空對象.

      2.開始運行A()函數,並將this指針指向新建的對象.

      3.當給對象不存在的屬性賦值的時,解析器就會爲該對象創建該屬性.這樣A()函數的執行就是初始化空對象的過程.

      4.當函數執行完成以後,new操作符就會返回該對象.(早綁定,晚綁定)

    4.繼承

      1.構造繼承

          1.1.this.newMethod = A;//A的地址(引用)賦給newMethod.--A爲父類

           this.newMethod('admin','永州');//繼承屬性(方法)到this關鍵字裏面.

           ...獲取子類的實例調用父類的方法.

      2.冒充繼承call

          2.1.父類.call(子類對象,parmers...);...

      3.冒充繼承apply

          3.1.父類.apply(子類對象,Array)...

      4.原型繼承

          4.1.E.prototype  = new A('lishi','北京');--A爲父類,E爲子類,...

      5.copy繼承

          5.1 G.prototype.method1 = F.prototype.method1; //F爲父類

          5.2 for(var par in F.prototype){ //1.1種方式.

               G.prototype[par] = F.prototype[par];

           }

          5.3 var str = 'method1';

           G.prototype[str] = F.prototype[str];

    5.計算器.

    6.冒泡排序.

         閉包

      1.介紹:調用函數,返回函數.閉包有返回,返回的是最終值.

      2.作用:閉包保護棧,保護資源.

      3.特點

          1.作爲一個函數變量引用.當函數返回時,處於激活狀態.

          2.閉包就是當一個函數返回時,一個沒有釋放資源的棧區.

    動態插入表格全JavaScript.首先調用init(隨便定義的方法)方法.

 

      1.js文件壓縮(http://code.google.com/p/closure-compiler/)

           壓縮的時候,首先去掉空格,之後去掉註釋,之後去掉長的變量名這個時候,還會有多行,不是壓縮成一行,

           使用高級的那種就可以實現一行,但我們這裏來不了(SIMPLE_OPTIMIZATIONS).

           java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js base.js.js --js_output_file base-debug.js

           WHITESPACE_ONLY(最簡單的.),SIMPLE_OPTIMIZATIONS-簡單的,ADVANCED_OPTIMIZATIONS-高級的

      2.節點(node)

          節點類型共12個常量.

           1.Node.ELEMENT_NODE (1)-元素節點

           2.Node.TEXT_NODE (3)-   文本節點

           3.Node.COMMENT_NODE (8) 註釋

          克隆節點—cloneNode

           var p1 = document.getElementById("p1");

           var p2 = p1.cloneNode();

           document.body.appendChild(p2);//頁面上將會多出一個段落,不過段落中什麼都沒有

           p2 = p1.cloneNode(true);//使用參數true表示克隆節點時包含子節點

           document.body.appendChild(p2); //克隆出來了.

      3.表單(form)

          var fm = document.formName;//可以這樣來直接引用該表單對象

           document.formName.onsubmit = function () { //當表單提交的時候觸發

                 if (result) {//檢查表單

                      this.submit();

                 } else {

                      return false;//阻止表單提交

                 }

           };

          表單重置

           <input type ='reset' value='重置'/><br> //IE不需要註冊下面的事件

           document.f.onreset = function(){  //firefox可以,也可以不註冊該事件.

                 document.f.reset();//ie報堆,棧溢出

           }

          單選按鈕與複選框有個共同的屬性——checked,指明該按鈕是否被選中  fm.sex[0].checked //返回Boolean

          select,它包含option標籤(下拉框)

           alert(select.selectedIndex);//這個索引號是從0開始的

           alert(select.options[select.selectedIndex].value\(text文本內容));//輸出選中項的

           document.f.age.onchange = function(){

                 alert(this.value); //輸出選中的值

           }

      4.表格(table)

           <tfoot><tr><td colspan="3">腳註</td></tr></tfoot> //在最下面的.

      5.動畫

          動態文字顯示

           var s = document.getElementById('ss').innerText.split("");

           t = setInterval(function(){

                 s.push(s.shift());

                 sss.innerText = s.join("");

           },100);

          div動畫

           animate(oDiv,'width',2,100,50,500);

           執行動畫的對象:obj,執行動畫的屬性:attr,執行動畫間隔時間:timer,增量:increment,end:結束位置

           function animate(obj,attr,increment,timer,start,end){

           var saved = start;

           setInterval(function(){

                 if(saved>=end){

                      return;

                 }

                 saved+=increment;

                 obj.style[attr]=saved;

           },timer);

 

 

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章