Das Erlernen von Javascript durch Javascript
kann grob in drei verschiedene Teile unterteilt werden: Kern (ECMAscript), Textobjekt (DOM), Browserobjekt (BOM)
Kern (ECMAscript): Schlüsselwörter, Anweisungen, Operatoren, Objekt
Textobjekt (DOM): DOM plant das gesamte Seite in ein Dokument, das aus Knotenebenen besteht.
Das Parsen folgt dem W3C-HTML-Dom-Standard:
Die W3C-Dom-Referenz legt besonderen Wert auf die DOM-Knotenbeschreibung,
das BOM-Browserobjekt, den neuen Browser-Popup und die Größe der Browsereinstellungen
Core (ECMAscript) Globales integriertes Objekt;
Methoden: parseInt(), isNan(), encodeURI()...usw. sind alle Methoden dieses Objekts
Achten Sie besonders auf eval(); ein Symbol für dynamische Sprache wie: eval("alert('hi')"); aber diese Methode ist sehr böse (Sicherheitsaspekt)
Beschreibung des Textobjekts (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-Grundlagen
$ Variable schwacher Typ; ungarische Typbezeichnung: var iOuouValue=100;
$ kann die Zeile mit oder ohne Semikolon beenden; aber dann ist onsubmit="javascript:function();return false;
"
"typeof" var test=1; warning(typeof testX); //output "undefiniert"
"NaN" - keine Zahl -> isNan("blue"); //output "true" ->isNan("123") ; //Ausgabe „false“
$ object; var o = new Object();
,
ein Objekt ist.
Diese var a = {name:"Liu Kaiyi"} entspricht var a = function(){this.name="Liu Kaiyi"};
name:"test" ,pass:"123456",addr:"bj"} //Was ist das? ! json
When var str = '{name:"test",pass:"123456",addr:"bj"}'
var objectBean = eval(str); //Hier ist das Objekt objectBea.name unter Verwendung
des Domänenkonzepts:
<SCRIPT type =text/javascript>
var sMessage = 'Hallo';
Funktion setSomething() {
sColor = 'rot';
sMessage = 'Hallo Welt!';
}
setSomething();
warning(sMessage); //Hallo Welt!
alarm(sColor); //red
</SCRIPT> <SCRIPT type=text/javascript>
var sMessage = 'Hallo';
Funktion setSomething() {
var sColor = 'rot';
sMessage = 'Hallo Welt!';
}
setSomething();
warning(sMessage); //Hallo Welt!
alarm(sColor); // nichts
</SCRIPT>
<SCRIPT type=text/javascript>
var sMessage = 'Hallo';
Funktion setSomething() {
var sColor = 'rot';
var sMessage = 'Hallo Welt!';
}
setSomething();
Alert(sMessage); //Hallo
alarm(sColor); // nichts
</SCRIPT>
Den Grundstein für die Objektorientierung legen: Objektanwendung vom Typ Objektprototyp. Referenz
// Die einfachste Vererbung
Object.prototype.inObj = 1;
Funktion A()
{
this.inA = 2;
}
A.prototype.inAProto = 3;
B.prototype = new A; // A in die Prototypenkette von B einbinden
B.prototype.constructor = B;
Funktion B()
{
this.inB = 4;
}
B.prototype.inBProto = 5;
x = neues B;
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto)
; , 5
//Erhöhen Sie das Vertrauen http://www.json.org/json.js
Object.prototype.toJSONString = function (filter) { return JSON.stringify(this, filter }; nicht wahr?
$ arguments ;
function getFun(){alert(arguments.length);} ;
getFun("xx") //Ausgabe 1
getFun("xx",23) //Ausgabe 2
$-Anweisung; unter speziellen Anweisungen für
for(var i=0i<iCount;i++) oder for(attr in object);
Wenn Ihnen langweilig ist, können Sie for( sProp in window ){alert(sProp+"Hey, please!");} //Sehen Sie sich die Reflexion von Javascript an
Objektorientiert:
var bean = new Bean();
1.Factory-
Methodenfunktion getAttr(){
Alert(this.attr)
}
function Bean(tattr){
var bean = new
bean.attr = tattr;
getAttr
;
}
Es ist im Grunde eine Nachahmerversion von objektorientiert
2. Konstruieren Sie
die Funktion Bean(tattr){
this.attr = tattr;
bean.getAttr = function(){
warning(this.attr)
}
Wenn
das Bean-Objekt oben erstellt wird, generiert die Methode wiederholt die Funktion „!
3. Prototyp-Modus
-Funktion Bean(){}
Bean.prototype.attr = "";
Bean.prototype.getAttr=function(){alert(this.attr);}
Lösen Sie das Problem „doppelte generierte Funktion“, aber neues Problem Bean.prototype.getArray = new Array();
Seine neuen Objekte bean1 und bean2 teilen sich den neuen Array-Bereich (den wir nicht sehen möchten).
4. Gemischtes Modell:) Haha
function Bean(){
this.attr= "";
this.getArray=new Array;
}
Bean.prototype.getAttr=function(){alert(this.attr);}
5. Dynamischer Prototyp (beachten Sie, dass er von nun an wirklich objektorientiert ist!!!)
function Bean(){
this.attr= "";
this.getArray=new Array;
//classload beim Laden
if(typeof Bean._initialized == "undefiniert" ){
Bean.prototype.getAttr=function(){alert(this.attr);};
Bean._initialized= true
;
}
/***************************************************** ***** ***************/
Objektvererbung
1. Objektimitation! ! (Kann Mehrfachvererbung unterstützen, Nachahmer ist sehr leistungsfähig)
function classA(sstr){
this.color = sstr;
this.sayColor = function(){
alarm(this.color);
};
}
Funktion 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() ist ebenfalls ein Nachahmer,
function classA(sstr){
this.color
= sstr
;
};
}
function classB(){
// this.newMethod =ClassA ;
// this.newMethod();
// delete this.newMethod
(this,"red")
; "Rot"))
this.arrt = "baidu";
}
3. Orthodoxe Vererbungs-Prototypkette (unterstützt jedoch keine Mehrfachvererbung)
Funktion classA(){this.oo="test";}
classA.prototype.color = "rot";
Funktion classB(){}
classB.prototype = neue KlasseA;
classB.prototype.sayName = function(){
alarm( this.color );
}
varbb = neue KlasseB;
bb.sayName(); // Ausgabe rot
Alert(bb.oo); //Ausgabe Test
Alert(bb Instanz von KlasseA); //Ausgabe wahr
Alert(bb Instanz von KlasseB); //Ausgabe wahr
4. Wenn Sie mehr Erbe wollen! ! Und unterstützt auch Instanzen
Mischmethode:
Funktion classA(){}
Funktion classB(){}
Funktion classC(){
classA.call(this);
classC.call(this);
}
classC.prototype = new classA;//Beachten Sie, dass „instanceof“ nur für A verwendet werden kann