javascript L'apprentissage
du javascript peut être grossièrement divisé en 3 parties différentes : Core (ECMAscript), Text Object (DOM), Browser Object (BOM)
Core (ECMAscript) : Mots clés, instructions, opérateurs, objet
Text Object (DOM) : DOM planifiera le page entière dans un document composé de niveaux de nœuds.
L'analyse suit la norme HTML dom du W3C :
La référence dom du W3C accorde une attention particulière à la description du nœud DOM,
à l'objet du navigateur BOM, au nouveau navigateur contextuel et à la taille des paramètres du navigateur.
Core (ECMAscript) Objet intégré global ;
Méthodes : parseInt(), isNan(), encodeURI()...etc sont toutes des méthodes de cet objet.
Faites particulièrement attention à eval(); un symbole de langage dynamique tel que : eval("alert('hi')"); mais cette méthode est très mauvaise (aspect sécurité)
Description de l'objet texte (DOM) :
<librairie> <bookcategory="cooking"> <title lang="fr">Italien de tous les jours</title> <auteur>Giada De Laurentiis</auteur> <année>2005</année> <prix>30,00</prix > </livre> </librairie>
1. Bases d'ECMAscript
$ Type faible variable ; désignation du type hongrois : var iOuouValue=100 ;
$ peut terminer la ligne avec ou sans point-virgule ; mais onsubmit="javascript:function();return false;"
$ keyword;
"typeof" var test=1; alert(typeof testX); //sortie "indéfini"
"NaN" - pas un nombre -> isNan("blue"); //sortie "true" ->isNan("123") ; //sortie "false"
$ object; var o = new Object();
Voici une explication spéciale selon laquelle une fonction que nous écrivons habituellement est un objet.
Cette
var a = {name:"Liu Kaiyi"} est équivalente à var a = function(){this.name="Liu Kaiyi"};
nom : "test" ,pass :"123456",addr :"bj"} //Qu'est-ce que c'est ? ! json
Lorsque var str = '{name:"test",pass:"123456",addr:"bj"}'
var objectBean = eval(str); //Voici l'objet objectBea.name utilisant
le concept de domaine :
<SCRIPT type = texte/javascript>
var sMessage = 'Bonjour';
fonction setQuelquechose() {
sCouleur = 'rouge';
sMessage = 'Bonjour tout le monde !';
}
setQuelquechose();
alert(sMessage); //Bonjour tout le monde !
alerte(sCouleur); //rouge
</SCRIPT> <SCRIPT type=texte/javascript>
var sMessage = 'Bonjour';
fonction setQuelquechose() {
var sColor = 'rouge';
sMessage = 'Bonjour tout le monde !';
}
setQuelquechose();
alert(sMessage); //Bonjour tout le monde !
alerte(sCouleur); // rien
</SCRIPT>
<SCRIPT type=texte/javascript>
var sMessage = 'Bonjour';
fonction setQuelquechose() {
var sColor = 'rouge';
var sMessage = 'Bonjour tout le monde !';
}
setQuelquechose();
alerte(sMessage); //Bonjour
alerte(sCouleur); // rien
</SCRIPT>
Poser les bases d'une application orientée objet : objet de type prototype d'objet. Référence
// L'héritage le plus simple
Objet.prototype.inObj = 1;
fonction A()
{
ceci.inA = 2 ;
}
A.prototype.inAProto = 3;
B.prototype = new A; // Connectez A à la chaîne de prototypes de B
B.prototype.constructor = B;
fonction B()
{
ceci.inB = 4 ;
}
B.prototype.inBProto = 5;
x = nouveau B ;
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto)
; , 5
//Augmenter une certaine confiance http://www.json.org/json.js
Object.prototype.toJSONString = function (filter) { return JSON.stringify(this, filter); Ensuite, nous pouvons utiliser bean.toJSONString( ) n'est-ce pas ?
$ arguments ;
function getFun(){alert(arguments.length);} ;
getFun("xx") //sortie 1
getFun("xx",23) //sortie 2
Instruction $ ; sous des instructions spéciales pour
for(var i=0i<iCount;i++) ou for(attr in object);
Si vous vous ennuyez, vous pouvez for( sProp in window ){alert(sProp+"Hey, s'il vous plaît!");} //Regardez le reflet de javascript
Orienté objet :
var bean = new Bean();
1.Fonction de la méthode d'usine
getAttr(){
alert(this.attr)
}
function Bean(tattr){
var bean = new Object;
bean.attr = tattr;
bean.getAttr = getAttr
;
}
Il s'agit essentiellement d'une version copiée de l'orientation objet
2. Construire
la fonction Bean(tattr){
this.attr = tattr;
bean.getAttr = function(){
alert(this.attr);
}
Au-dessus de 2, lorsque l'objet Beanest
créé, la méthode "générera la fonction à plusieurs reprises". " !
3. Fonction du mode prototype
Bean(){}
Bean.prototype.attr = "";
Bean.prototype.getAttr=function(){alert(this.attr);}
Résolvez le problème de la "fonction générée en double", mais nouveau problème Bean.prototype.getArray = new Array();
Ses nouveaux objets bean1 et bean2 partageront le nouvel espace Array (que nous ne voulons pas voir)
4. Modèle mixte :) Haha
function Bean(){
this.attr= "";
this.getArray=nouveau tableau ;
}
Bean.prototype.getAttr=function(){alert(this.attr);}
5. Prototype dynamique (à noter qu'il est désormais véritablement orienté objet !!!)
function Bean(){
this.attr= "";
this.getArray=new Array;
//classload lors du chargement
if(typeof Bean._initialized == "undefined" ){
Bean.prototype.getAttr=function(){alert(this.attr);};
Bean._initialized=true
}
}
/*************************************************** ***** ****************/
Héritage d'objets
1. Usurpation d’identité d’objet ! ! (Peut prendre en charge l'héritage multiple, copycat est très puissant)
function classA(sstr){
this.color = sstr;
this.sayColor = function(){
alert(this.color);
} ;
}
fonction classeC(){}
function classB(){
this.newMethod =ClassA;
this.newMethod()
;
this.newMethod =ClassC ;
this.newMethod();
supprimer this.newMethod ;
this.arrt = "google" ;
}
2.call() apply() est également un copieur,
function classA(sstr){
this.color = sstr;
this.sayColor = function(str){
alert(str+this.color);
} ;
}
function classB(){
// this.newMethod =ClassA ;
// this.newMethod();
// supprime this.newMethod
(this,"red")
; "rouge"))
this.arrt = "baidu" ;
}
3. Chaîne de prototypes d'héritage orthodoxe (mais ne prend pas en charge l'héritage multiple)
fonction classA(){this.oo="test";}
classA.prototype.color = "rouge" ;
fonction classeB(){}
classB.prototype = nouvelle classeA ;
classB.prototype.sayName = function(){
alerte( this.color );
}
varbb = nouvelle classeB;
bb.sayName(); // sortie rouge
alert(bb.oo); //sortie du test d'
alerte (bb instanceof classA); //sortie true
alert(bb instanceof classB); //sortie vrai
4. Si vous voulez plus d’héritage ! ! Et prend également en charge l'instance de
Méthode de mélange :
fonction classeA(){}
fonction classeB(){}
fonction classeC(){
classA.call(this);
classC.call(this);
}
classC.prototype = new classA;//Notez que instanceof ne peut être utilisé que pour A