javascript 學習
javascript 大體上可分為3個不同部分組成： 核心（ECMAscript）,文本對象(DOM),瀏覽器對象(BOM)
核心（ECMAscript）： 關鍵字，語句，運算符，對象
文本對象(DOM) ：DOM將把整個頁面規劃成由節點層級構成的文件.
解析遵循W3C html dom 標準：
W3C dom 參考特別關注DOM Node 說明
BOM 瀏覽器物件. cookie,彈出新瀏覽器，瀏覽器設定大小
核心（ECMAscript）Global 內建物件；
方法： parseInt(),isNan(),encodeURI()...等都為此物件方法
特別注意eval();動態語言的象徵例如：eval("alert('hi')"); 但這方法很邪惡（安全方面）
文字物件(DOM)說明：
<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基礎
$ 變數弱型別; 匈牙利型別標示: var iOuouValue=100;
$ 結束行分號有無都可以; 但再onsubmit="javascript:function();return false;"
$ 關鍵字; 提別注意
"typeof" var test=1; alert(typeof testX); //output "undefined"
"NaN" - not a number -> isNan("blue"); //output "true" ->isNan("123") ; //output "false"
$ 物件; var o = new Object(); var a = {}
這裡特別說明下我們普通寫的一個function 就是一個object
這 var a = {name:"劉凱毅"} 等同與var a = function(){this.name="劉凱毅"};
來個{name:"test" ,pass:"123456",addr:"bj"} //這是什麼？ ！ json
當var str = '{name:"test",pass:"123456",addr:"bj"}'
var objectBean = eval(str); //這裡就是物件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); // 什麼都沒有
</SCRIPT>
<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
var sColor = 'red';
var sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello
alert(sColor); // 什麼都沒有
</SCRIPT>
為物件導向做基礎：object prototype 類型的物件應用。 參考
// 最簡單的繼承
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
//增加點信心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
$ 語句;特殊說明下for
for(var i=0i<iCount;i++) 或for( attr in object ) ;
如果無聊你可以for( sProp in window ){alert(sProp+"你丫點啊！");} //看看javascript 的反射
物件導向：
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 ;
}
根本就是山寨版物件導向
2.建構
function Bean(tattr){
this.attr = tattr ;
bean.getAttr = function(){
alert(this.attr);
}
}
其上2 總再Bean 物件建立時，方法會「重複產生函數」！
3.原型模式
function Bean(){}
Bean.prototype.attr = "";
Bean.prototype.getAttr=function(){alert(this.attr);}
解決「重複產生函數」 問題，但新的問題Bean.prototype.getArray = new Array();
其new 物件bean1 和bean2 都會共用new Array 空間(是我們不想看到的)
4.混合模型:) 哈哈
function Bean(){
this.attr= "";
this.getArray=new Array;
}
Bean.prototype.getAttr=function(){alert(this.attr);}
5. 動態原型（注意下面開始，就是真正的物件導向！！！）
function Bean(){
this.attr= "";
this.getArray=new Array;
//classload 載入時
if(typeof Bean._initialized == "undefined" ){
Bean.prototype.getAttr=function(){alert(this.attr);};
Bean._initialized= true ;
}
}
/************************************************* ***************/
物件繼承
1.對象冒充！ ！ (可支持多繼承，山寨很強大)
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.正統的繼承原型鏈(但不支援多繼承)
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 true
4.如果你要多繼承！ ！並且也支援instanceof
混合方式：
function classA(){}
function classB(){}
function classC(){
classA.call(this);
classC.call(this);
}
classC.prototype = new classA ;//注意這instanceof 只能對A有用