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裏面StringBuffer與String的區別
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);//行加入指定表格.
!!!this是button對象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);
}