javascript 學(xué)習(xí)
?? ? ?
javascript 大體上可分為3個(gè)不同部分組成： 核心（ECMAscript）,文本對(duì)象(DOM),瀏覽器對(duì)象(BOM)
-
?核心（ECMAscript）： 關(guān)鍵字，語(yǔ)句，運(yùn)算符，對(duì)象
-
文本對(duì)象(DOM)：DOM將把整個(gè)頁(yè)面規(guī)劃成由節(jié)點(diǎn)層級(jí)構(gòu)成的文檔.
-
解析遵循 W3C html dom 標(biāo)準(zhǔn)：
-
?
W3C dom 參考特別關(guān)注 DOM Node 說(shuō)明???
-
BOM 瀏覽器對(duì)象.? cookie,彈出新瀏覽器，瀏覽器設(shè)置大小
?
核心（ECMAscript）Global 內(nèi)置對(duì)象；
????? 方法： parseInt(),isNan(),encodeURI()...等都為此對(duì)象方法
????? 特別注意 eval();動(dòng)態(tài)語(yǔ)言的象征 比如：eval("alert('hi')"); 但這個(gè)方法很邪惡（安全方面）
文本對(duì)象(DOM)說(shuō)明：
?? ??? ?<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore> | 
| 
|
??? ?
? 1. ECMAscript基礎(chǔ)
?????? $ 變量弱類(lèi)型 ; ??? 匈牙利類(lèi)型標(biāo)示 : var iOuouValue=100;?
?????? $ 結(jié)束行分號(hào)有無(wú)都可以; ??? 但再 onsubmit="javascript:function();return false;"
?????? $ 關(guān)鍵字 ; 提別注意
??????????????? "constructor" bean.constructor
???????????????????? //print bean function(){
????????????????????????? ....
????????????????????? }
??????????????? "typeof" ? var test=1; alert(typeof testX); //output "undefined"
??????????????? "NaN" - not a number ->? isNan("blue"); //output "true" ? ->isNan("123"); //output "false"?
?????? $ 對(duì)象; var o = new Object(); var a = {}?
?? ??? ??? ??? ?這里特別說(shuō)明下 我們普通寫(xiě)的 一個(gè) function 就是一個(gè) object?
?? ??? ??? ?? 這?? var a = {name:"劉凱毅"} 等同與 var a = function(){this.name="劉凱毅"};
?? ??? ??? ??? ???? 來(lái)個(gè) {name:"test",pass:"123456",addr:"bj"} //這是什么 ？！ json
?? ??? ??? ???????? 當(dāng) var str = '{name:"test",pass:"123456",addr:"bj"}'
?? ??? ??? ??? ???? var objectBean = eval(str); //這里就是 對(duì)象 objectBea.name 使用了
?
域概念：
<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
? sColor = 'red';
? sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); //red
</SCRIPT> | <SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
? var sColor = 'red';
? sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); // 什么都沒(méi)有
</SCRIPT>
| <SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
? var sColor = 'red';
? var sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello
alert(sColor); // 什么都沒(méi)有
</SCRIPT>
|
??????????
為面向?qū)ο笞龌A(chǔ)：object prototype 類(lèi)型的對(duì)象應(yīng)用。參考
// 最簡(jiǎn)單的 繼承
Object.prototype.inObj?=?1;
function?A()
{
????this.inA?=?2;
}
?
A.prototype.inAProto?=?3;
?
B.prototype?=?new?A;????????????//?Hook?up?A?into?B's?prototype?chain
B.prototype.constructor?=?B;
function?B()
{
????this.inB?=?4;
}
?
B.prototype.inBProto?=?5;
?
x?=?new?B;
document.write(x.inObj?+?',?'?+?x.inA?+?',?'?+?x.inAProto?+?',?'?+?x.inB?+?',?'?+?x.inBProto);
//1, 2, 3, 4, 5
//增加點(diǎn)信心 http://www.json.org/json.js
Object.prototype.toJSONString = function (filter) {
return JSON.stringify(this, filter);
};
后我們就可以使用 bean.toJSONString()不是嗎？
|
??? $ arguments ;
???????? function getFun(){alert(arguments.length);}?? ;
?
?? ??? ??? ??? ?getFun("xx") //output 1
?? ??? ??? ??? ?getFun("xx",23) //output 2
?? $ 語(yǔ)句 ;特殊說(shuō)明下 for?
?????????? for(var i=0i<iCount;i++)?? 或 for( attr in object ) ;
?????????? 如果無(wú)聊 你可以 for( sProp in window ){alert(sProp+"你丫點(diǎn)啊！");} //看看 javascript 的反射
??????????????
? ? ? ? ? ? ? ??
???
面向?qū)ο螅?/b>
? var bean = new Bean();
??
? 1.工廠方法
??????? ??? function getAttr(){
???? ?? ??? ???? alert(this.attr)
??????????? }
??????????? function Bean(tattr){
?? ??? ??? ???? var bean = new Object;
?? ??? ??? ?????bean.attr = tattr;
?? ??? ??? ?????bean.getAttr = getAttr;
?? ??? ??? ???? return bean ;
??????????? }
?? ???? 根本就是山寨版 面向?qū)ο?br />
? 2.構(gòu)造
????? ??? function Bean(tattr){
?? ??? ?????? this.attr = tattr ;
?? ??? ??? ?? bean.getAttr = function(){
?? ??? ??? ?????alert(this.attr);
?? ??? ??? ? ?} ? ?
?? ??? ???}
?? 其上 2 總 再Bean 對(duì)象創(chuàng)建時(shí)，方法會(huì) “重復(fù)生成函數(shù)”！
? 3.原型模式
??? function Bean(){}
??? Bean.prototype.attr = "";
??? Bean.prototype.getAttr=function(){alert(this.attr);}
?? ?
?? 解決 “重復(fù)生成函數(shù)” 問(wèn)題，但新的問(wèn)題 Bean.prototype.getArray = new Array();
?? 其 new 對(duì)象 bean1 和 bean2 都會(huì)共享 new Array 空間(是我們不想看到的)
? 4.混合 模型 :)? 哈哈
???? function Bean(){
?? ??? ?this.attr= "";
?? ??? ?this.getArray=new Array;
?? ?}
?? ?Bean.prototype.getAttr=function(){alert(this.attr);}
?
? 5.動(dòng)態(tài)原型 （注意下面開(kāi)始，就是真正的面向?qū)ο?/span>！！！）
?? ??? function Bean(){
?? ???? this.attr= "";
?? ??? ?this.getArray=new Array;
?? ???? //classload 加載 時(shí)
?? ???? if(typeof Bean._initialized == "undefined" ){
?? ??? ???? Bean.prototype.getAttr=function(){alert(this.attr);};
?? ???? ??? Bean._initialized= true ;
?? ??? ?}
???? }
???
/****************************************************************/
對(duì)象繼承
? 1.對(duì)象冒充！！(可支持多繼承，山寨很強(qiáng)大)
????? function classA(sstr){
?? ???? this.color = sstr ;
?? ???? this.sayColor = function(){
?? ??? ???? alert(this.color);
?? ??? ?};
?? ???}
?? ?? function classC(){}
?? ??? function classB(){
?? ??? ???? this.newMethod =ClassA ;
?? ??? ???? this.newMethod();
?? ??? ???? delete this.newMethod ;
?? ??? ???? this.newMethod =ClassC ;
?? ??? ???? this.newMethod();
?? ??? ???? delete this.newMethod ;
?? ??? ????
?? ??? ???? this.arrt = "google";
?? ??? ?}
?? ?
? 2.call() apply() 也山寨,
????? function classA(sstr){
?? ???? this.color = sstr ;
?? ???? this.sayColor = function(str){
?? ??? ???? alert(str+this.color);
?? ??? ?};
?? ???}
?? ??? function classB(){
?? ??? ??? // this.newMethod =ClassA ;
?? ??? ??? // this.newMethod();
?? ??? ??? // delete this.newMethod ;
?? ??? ???? classA.call(this,"red");
?? ??? ???? //classA.apply(this,new Array("red"))
?? ??? ???? this.arrt = "baidu";
?? ??? }
3.正統(tǒng)的繼承 原型鏈 (但不支持多繼承)
??? function classA(){this.oo="test";}
??? classA.prototype.color = "red";
??? function classB(){}
??? classB.prototype = new classA ;
??? classB.prototype.sayName = function(){
?? ???? alert( this.color );
?? ?}
?? ?var bb = new classB ;
?? ?bb.sayName(); // output red
?? ?alert(bb.oo); // output test
?? ?alert( bb instanceof classA); //output true
?? ?alert( bb instanceof classB); //output? true4.如果你要多繼承！！并且還支持 instanceof
?? ???? 混合方式：
?? ???? function classA(){}
?? ???? function classB(){}
?? ???? function classC(){
?? ??? ???? classA.call(this);
?? ??? ???? classC.call(this);
?? ??? ?}
?? ???? classC.prototype = new classA ;//注意 這 instanceof 只能對(duì) A有用
?? ??? ?
???