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;"
?????? $ 關鍵字 ; 提別注意
??????????????? "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"?
?????? $ 對象; 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.動態原型 （注意下面開始，就是真正的面向對象！?。。?/b>
?? ??? 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? true4.如果你要多繼承??！并且還支持 instanceof
?? ???? 混合方式：
?? ???? function classA(){}
?? ???? function classB(){}
?? ???? function classC(){
?? ??? ???? classA.call(this);
?? ??? ???? classC.call(this);
?? ??? ?}
?? ???? classC.prototype = new classA ;//注意 這 instanceof 只能對 A有用
?? ??? ?
???