Avant de lire ce livre, je voudrais remercier l'équipe technique de Taobao pour la traduction de ce noyau JavaScript et Flanagan pour avoir écrit ce livre. Merci pour votre partage altruiste, et seule cette note est dédiée à votre travail acharné.
1: noyau de langue javascript
Après ce chapitre, nous nous concentrerons principalement sur les bases de JavaScript. Chapitre 2 Nous expliquerons les commentaires, les demi-colons et les ensembles de caractères Unicode de JavaScript; Le chapitre 3 sera plus intéressant, expliquant principalement les variables et les affectations de JavaScript
Voici quelques exemples de codes pour illustrer le contenu clé des deux premiers chapitres.
La copie de code est la suivante:
<script type = "text / javascript">
// Le contenu après la double slash appartient au commentaire
// Lisez attentivement les commentaires ici, il expliquera le code JavaScript
// La variable est un nom symbolique qui représente la valeur
// Les variables sont déclarées via le mot-clé var
var x; // déclare une variable x
// La valeur peut être attribuée à la variable via des symboles
x = 0; // La valeur de la variable x est maintenant 0
x // Obtenez sa valeur par nom de variable.
// JavaScript prend en charge plusieurs types de données
x = 1; //Nombre
x = 0,01; // Les entiers et les nombres réels partagent un type de données
x = "Hello World"; // Construisez une chaîne de texte en doubles citations
x = 'Hello World'; // Les citations simples forment également des chaînes.
x = true; // boolean
x = false; // une autre valeur booléenne
x = null; // null est une valeur spéciale. Ce qui signifie vide
x = non défini; // Undefined et null sont très similaires
</cript>
Dans JavaScript, les types les plus importants sont les objets et les tableaux. Le chapitre 6 présente des objets et le chapitre 7 présente des tableaux. Les objets et les tableaux sont si importants en JavaScript. À tel point qu'ils peuvent être vus partout dans ce livre.
La copie de code est la suivante:
<script type = "text / javascript">
// Le type le plus important en javascript est l'objet
// L'objet est une collection de paires de nom / valeur, ou une collection de valeurs de chaîne aux valeurs mappées.
var book = {// Les objets sont enfermés en accolades bouclées
Sujet: "javascript", // La valeur de l'attribut "sujet" est javascript
gras: vrai // La valeur de la graisse de propriété est vraie
}; // Les accolades bouclées à l'extrémité droite.
// Accédez aux propriétés d'objet via "." ou "[]".
book.topic // => "javascript"
réserver ["fat"] // => vrai une autre façon d'obtenir des attributs,
book.author = "ahthw"; // Créer un nouvel attribut par affectation
book.content = {}; // {} est un objet vide. Il n'a pas d'attributs
// JavaScript prend également en charge les tableaux (listes indexées par les tableaux)
var primes = [2, 3, 5, 7]; // a une combinaison de 4 valeurs, la frontière est tracée par "[" "" "]"
nombrables [0] // => 2: le premier objet du tableau, l'index est 0
pmimes.length // => 4, le nombre d'éléments dans le tableau
Primes [pmimes.length-1] // => 7: le dernier élément du tableau
Primes [4] = 9; // ajouter de nouveaux éléments par affectation
primes [4] = 11; // modifier les éléments existants par affectation
var vide = []; // tableau vide, avec 0 éléments
vide.length // =>: 0
// Les tableaux et objets peuvent contenir un autre tableau ou objet.
var point = [// tableau avec deux éléments
{x: 0, y: 0}, // Chaque élément est un objet
{x: 1, y: 1}
]]
var data = {// un objet contenant deux attributs
essai1: [[1,2], [3,4]], // chaque objet est un tableau
essai2: [[2,3], [4,5]] // Les éléments du tableau sont également
};
</cript>
La syntaxe du code ci-dessus qui définit les éléments du tableau via des supports carrés et définit la relation de mappage entre les noms d'attribut d'objet et les valeurs d'attribut via des supports bouclés. Le chapitre 4 est spécifiquement introduit. Les expressions sont une phrase en javascript. Cette phrase peut être calculée pour obtenir une valeur et référencer la valeur des attributs d'objet ou des éléments de tableau via "," et "[]" pour former une expression.
La méthode d'écriture d'expression la plus courante dans JavaScript est les opérateurs comme le code suivant (Oprator)
La copie de code est la suivante:
// L'opérateur en tant qu'opérateur génère une nouvelle valeur
// l'opérateur arithmétique le plus commun
3 + 2 // => 5 ajout
3-2 // => soustraction
3 * 2 // => multiple
3/2 // => Division
point [1] .x -point [0] .x // => Les opérations complexes peuvent également fonctionner comme d'habitude
"3" + "2" // => 32. Vous pouvez terminer les opérations d'addition ou l'épissage de chaîne.
// javascript définit certains opérateurs arithmétiques comme l'abréviation
Var Count = 0; // définir une variable
Count ++; // augmenter de 1
compter--; // décrément de 1
Count + = 2; // L'auto-incrément 2 est le même que "Count = Count + 2;"
Count * = 3 // Multipliez 3. De la même manière que "Count = Count * 3;" est écrit
compter // => 6: le nom de variable lui-même est également une expression
// L'opérateur de relation d'égalité est utilisé pour déterminer si les deux valeurs sont égales ou non
// inégal, supérieur à un résultat inférieur au fonctionnement de l'opérateur est vrai ou faux
var x = 2, y = 3; // le signe égal ici signifie une affectation, pas relativement égal
x == y; // => faux égal
X! = y; // => true
x <y; // => vrai: moins que
x <= y; // vrai est inférieur ou égal à
x> y; // faux plus que
x> = y; // faux supérieur ou égal à
"deux" == "trois"; // Faux deux chaînes ne sont pas égales
"deux"> "trois"; // Vrai l'indice de "TW" dans l'alphabet est supérieur à "th"
false == (x> y); // tire false = false;
// Les opérateurs logiques sont fusionnés ou inverses des valeurs booléennes
(x == 2) && (y == 3); // => Vrai Les deux comparaisons sont vraies. && est "et"
(x> 3) || (y <3); // => false aucune comparaison n'est vraie. || signifie "ou"
! (x == y); // => true! Indique une recherche inverse
Si la "phrase" dans JavaScript est une expression, alors la phrase entière est appelée déclaration, qui sera expliquée en détail au chapitre 5.
Dans le code ci-dessus, les lignes se terminant par un point-virgule sont toutes des déclarations. D'une manière approximative, l'expression ne calcule qu'une valeur (ou la valeur dont il contient ne concerne pas) mais ils modifient l'état de fonctionnement du programme. Dans ce qui précède, des instructions de déclaration variable et des instructions d'affectation ont été observées. Un autre type de déclaration est la «structure de contrôle», telle que le jugement conditionnel et la boucle. Après avoir introduit la fonction, nous donnons un exemple de code pertinent.
Les fonctions sont des extraits de code JavaScript avec des noms et des paramètres qui peuvent être définis et utilisés plusieurs fois à la fois. Le chapitre 8 expliquera officiellement les fonctions en détail. Comme les objets et les tableaux, les fonctions sont mentionnées dans de nombreux endroits de ce livre, alors voici quelques exemples de code simples.
La copie de code est la suivante:
// La fonction est un segment de code JavaScript avec des paramètres de traitement, qui peuvent être transférés plusieurs fois
fonction plus1 (x) {// définir une fonction nommée Plus1 avec le paramètre x
retour x + 1; // Renvoie une valeur plus supérieure à celle passée.
} // Le bloc de code de la fonction est la pièce enveloppée dans des accolades bouclées
plus1 (y) //
var carré = fonction (x) {// La fonction est une valeur qui peut être affectée à une variable
retour x * x; // Calculez la valeur de la fonction
}; // Le point-virgule indique la fin de l'énoncé de cession
carré (plus1 (y)); // deux fonctions dans une expression
Lorsque la fonction et l'objet sont écrits ensemble, la fonction est programmée avec une "méthode" (méthode)
La copie de code est la suivante:
// Lorsqu'une fonction est affectée à l'attribut d'un objet, nous l'appelons
// "Méthode", tous les objets JavaScript contiennent des méthodes
var a = []; // Créer un tableau vide
A.Push (1,2,3); // ajouter des objets au tableau à la méthode push ()
a.reverse (); // Inversion de données
// document.write (a)
// nous pouvons définir la méthode de sous- , le mot-clé "ceci" est la méthode de définition
Référence à l'objet de //, l'exemple ici est le tableau contenant deux informations de position de point mentionnées ci-dessus.
Point.dist = function () {// Définissez une méthode pour calculer la distance entre deux points
var p1 = this [0]; // Obtenez la référence au tableau actuel via ce mot-clé
var p2 = ce [1]; // et obtenir les deux premiers éléments du tableau appelé
var a = p2.x- p1.y; // Distance sur l'axe des coordonnées x
var b = p2.y - p1.y; // Distance sur l'axe de coordonnées y
return math.sqrt (a * a + "nous l'appelons" + b * b); // Théorème de Pythagore
}; //Math.sqrt () calcule la racine carrée
Point.dist () // => Trouvez la distance entre deux points
Maintenant, donnez quelques exemples d'instructions de contrôle. Ici, l'exemple de fonction contient les instructions de contrôle JavaScript les plus courantes dans le corps.
La copie de code est la suivante:
// Ici, l'instruction JavaScript utilise cette syntaxe pour inclure un jugement conditionnel et une boucle
// La syntaxe similaire à Java C ++ et à d'autres langues est utilisée
fonction ABS (x) {// Trouvez la fonction de valeur absolue
if (x> = 0) {// si
retour x; // Si vrai, exécutez ce code
} else {// false exécuter
return -x;
}
}
fonction factPrial (n) {// calcul le factoriel
produit var = 1; // attribue une valeur de 1 au produit
While (n> 1) {// boucle pour exécuter le contenu {} lorsque l'expression de valeur () est vraie
produit * = n; // Produit = produit * Abréviation
n--; // n = N-1 Méthode d'écriture
} // La boucle se termine
produit de retour; // Return Produit
}
factPrial (4) // => 24 1 * 4 * 3 * 2 document.write (factPrial (4))
fonction factorial2 (n) {// Une autre façon d'écrire une boucle
var i, produit = 1; //
pour (i = 2; i <= n; i ++) // augmenter I de 2 à n
produit * = i; // Corps de boucle, lorsqu'il n'y a qu'une seule phrase de code dans le corps de la boucle, omettez {}
produit de retour; // Calculer et retourner le bon factoriel;
}
factorial2 (5) //document.write(factorial2(5)) => 120: 1 * 2 * 3 * 4 * 5
JavaScript est un langage de programmation orienté objet, mais il est très différent des objets de page traditionnels. Le chapitre 9 expliquera en détail le JavaScript orienté objet. Ce chapitre aura beaucoup d'exemples de code, qui est le plus long chapitre de ce livre.
Voici un exemple simple, ce code montre comment définir une classe en JavaScript pour représenter des points en géométrie des faces 2D. L'objet instancié dans cette classe a une méthode appelée r () pour calculer la distance entre les points de modification des points en origine.
La copie de code est la suivante:
// définir un constructeur pour initialiser un nouvel objet ponctuel
Point de fonction (x, y) {// Les constructeurs commencent généralement par des lettres majuscules
this.x = x; // le mot-clé cela fait référence à l'instance initialisée
this.y = y; // Paramètres de fonction de stockage comme attributs d'un objet
}
// Créer une instance en utilisant le nouveau mot-clé et le constructeur
var p = nouveau point (1, 1); // points 1, 1 dans la géométrie plane,
// attribue la valeur via l'objet prototype constructeur
// pour définir des méthodes pour les objets ponctuels
Point.prototype.r = fonction () {
return math.sqrt (// retourne la racine carrée de x carré + y carré
this.x * this.x + // Cela fait référence à l'objet qui transporte cette méthode
this.y * this.y);
};
// L'objet d'instance de point p (et tous les objets d'instance de point) hérite de la méthode r ()
pr () // => 1.4142135623730951 /document.write (pr ())
Le chapitre 9 est l'essence de la première partie . Les chapitres suivants ont été étendus sporadiquement, ce qui nous mènera à la fin de notre exploration de JavaScript.
Le chapitre 10 parle principalement des modèles de correspondance de texte effectués par des expressions régulières.
Chapitre 11 Le sous-ensemble de base de la langue principale et le sur-ensemble de Gypsum JavaScript .
Avant d'entrer dans le contenu de JavaScript sur le client, le chapitre 12, nous introduisons uniquement deux environnements en cours d'exécution JavaScript en dehors du Web.
2. Client JavaScript
Il existe de nombreuses références croisées aux points de connaissance du contenu dans la partie fondamentale de la langue javascript, et le sentiment de connaissance n'est pas clair. L'orchestration de contenu de JavaScript du côté client a beaucoup changé. Selon ce chapitre, vous pouvez utiliser JavaScript dans un navigateur Web. (Mais si vous voulez apprendre JavaScript en lisant ce livre, vous ne pouvez pas vous concentrer uniquement sur la deuxième partie) Le chapitre 13 est la première partie de la deuxième partie, qui présente comment faire fonctionner JavaScript dans un navigateur Web. Le chapitre 14 explique la technologie de script de navigateur Web et couvre une fonction globale importante du client Javascipt.
Par exemple:
La copie de code est la suivante:
fonction moveon () {
// pose une question via la boîte de dialogue
var réponse = confirm ("Êtes-vous prêt?");
// Cliquez sur OK et le navigateur chargera une nouvelle page
if (réponse) window.location = "http://www.baidu.com";
}
// Exécuter cette fonction après 1 minute (60000 millisecondes)
setTimeout (moveon, 300);
Le chapitre 15 vous indiquera comment JavaScript peut manipuler le style HTML pour définir la méthode d'affichage du contenu . Le contenu du chapitre 15 sera plus pragmatique. Grâce aux scripts, il montrera comment sélectionner des éléments de page Web spécifiques, comment définir des attributs pour les éléments HTML, si le contenu de l'élément est modifié et comment ajouter de nouveaux nœuds au document
La fonction d'exemple suivant montre si vous trouvez et modifiez le contenu de l'article de base
La copie de code est la suivante:
// une information spécifiée dans le document et l'arbre régional est sur les informations de débogage
// Si cet élément n'existe pas sur le document, créez un
Fonction Debug (msg) {
// Trouvez la partie de débogage du document en affichant l'attribut ID de l'élément HTML
var log = document.getElementById ("Debuglog");
// Si l'élément n'existe pas, créez un
if (! log) {
log = document.CreateElement ("div"); // Créer un nouvel élément div
log.id = "debuglog"; // attribue la valeur à l'ID de chaque élément
log.innerhtml = "<h1> debug log </h1>"; // Personnalisez le contenu initial
document.body.appendChild (log); // l'ajoute à la fin du document
}
// Incluez le message dans <pre> et ajoutez-le au journal
var pre = document.CreateElement ("pre"); // Créer un élément pré-
var text = document.CreateElement (msg); // Inclure MSG sur un nœud de texte
pre.appendChild (texte); // ajouter du texte à pré
Log.ApendChild (pré); // pre ajouter au journal
}
Le chapitre 16 expliquera comment utiliser JavaScript pour utiliser des éléments , qui utilise généralement le style et les attributs de classe de l'élément.
La copie de code est la suivante:
Fonction Hide (E, reflé
if (reflow) {// si le deuxième paramètre est vrai
e.style.display = "non" // cachez cet élément, et l'espace qu'il occupe est également vendu
} autre {
e.style.visibilité = "Hidden"; // cacher e, conserver l'espace qu'il faut
}
}
Fonction survient (e) {// en surbrillance en définissant CSS
if (! e.classname) e.classname = "highcss";
autre
e.classname + = "highcss";
}
Le contenu et le style d'éléments CSS peuvent être contrôlés via JavaScript, et le comportement du document peut également être défini via des gestionnaires d'événements. La gestion des événements est une fonction JavaScript enregistrée dans le centre de navigateur. Lorsqu'un événement spécifique se produit, le navigateur peut appeler cette fonction.
Habituellement, les types d'événements sur lesquels nous nous concentrons sont des clics de souris et des événements clés du clavier (les smartphones sont divers événements tactiles). Ou lorsque le navigateur termine le chargement du document, un événement de personne sera déclenché lorsque l'utilisateur modifie la taille de la fenêtre ou lorsque l'utilisateur entre les données dans le formulaire.
Le chapitre 17 décrira en détail comment définir, enregistrer les gestionnaires de temps et comment le navigateur les appelle lorsque des événements se produisent.
Le moyen le plus simple de personnaliser les gestionnaires d'événements est de lier un rappel à l'attribut préfixé par HTML. Lors de l'écriture de tests de programme simples, le moyen le plus pratique est de lier un rappel au gestionnaire "onclick". En supposant que les fonctions Debug () et Mide () ci-dessus sont enregistrées dans les fichiers Debug.js et Mide.js ci-dessus, vous pouvez simplement spécifier un gestionnaire d'événements pour l'attribut onClick. comme suit
La copie de code est la suivante:
<script type = "text / javascript">
// une information spécifiée dans le document et l'arbre régional est sur les informations de débogage
// Si cet élément n'existe pas sur le document, créez un
Fonction Debug (msg) {
// Trouvez la partie de débogage du document en affichant l'attribut ID de l'élément HTML
var log = document.getElementById ("Debuglog");
// Si l'élément n'existe pas, créez un
if (! log) {
log = document.CreateElement ("div"); // Créer un nouvel élément div
log.id = "debuglog"; // attribue la valeur à l'ID de chaque élément
log.innerhtml = "<h1> debug log </h1>"; // Personnalisez le contenu initial
document.body.appendChild (log); // l'ajoute à la fin du document
}
// Incluez le message dans <pre> et ajoutez-le au journal
var pre = document.CreateElement ("pre"); // Créer un élément pré-
var text = document.CreateElement (msg); // Inclure MSG sur un nœud de texte
pre.appendChild (texte); // ajouter du texte à pré
Log.ApendChild (pré); // pre ajouter au journal
}
Fonction Hide (E, reflé
if (reflow) {// si le deuxième paramètre est vrai
e.style.display = "non" // cachez cet élément, et l'espace qu'il occupe est également vendu
} autre {
e.style.visibilité = "Hidden"; // cacher e, conserver l'espace qu'il faut
}
}
Fonction survient (e) {// en surbrillance en définissant CSS
if (! e.classname) e.classname = "highcss";
autre
e.classname + = "highcss";
}
</cript>
Bonjour
<bouton onclick = "hide (this, true); débogue ('Masquer le bouton 1');"> hide1 </futton>
<bouton onclick = "hide (this); debug ('Hide Button 2');"> hide2 </tutotn>
Le client suivant JavaScript utilise des événements, ce qui donne un événement très important: l'événement "Load" enregistre un événement pour gérer le Chenxing. Les collègues montrent également un moyen plus avancé de l'enregistrement des gestionnaires d'événements "cliquez sur"
La copie de code est la suivante:
<script type = "text / javascript">
// L'événement "Charge" ne peut être licencié qu'après le chargement du document
// Si vous avez généralement besoin d'attendre que l'événement de chargement se produise avant de pouvoir exécuter le code JavaScript
window.onload = function () {
// Trouvez toutes les balises IMG dans le document
var images = document.getElementsByTagName ("img");
// transférer les images et ajouter un gestionnaire à l'événement de clic de chaque nœud
// masque l'image lorsque vous cliquez dessus
pour (var i = 0; i <images.length; i ++) {
var imge = images [i];
if (imge.addeventListener) // Une autre façon d'enregistrer le gestionnaire de temps
imge.addeventListener ("cliquez", masquer, false);
else // compatible avec les opérations précédentes de IE8
imge.attachevent ("onclick", masquer);
}
// C'est la fonction de traitement des événements enregistrés ci-dessus
Fonction Hide (evnet) {
event.target.style.visibilité = "Hidden";
}
};
</cript>
Le chapitre 15-17 raconte comment utiliser JavaScript pour contrôler le contenu, le style et le comportement des pages Web (traitement des événements). Ce chapitre discute un peu compliqué de l'API et a jusqu'à présent une mauvaise compatibilité du navigateur. C'est pourquoi de nombreux programmeurs JavaScript choisissent d'utiliser "bibliothèque" ou "framework" pour simplifier leur travail de codage. Le plus populaire est jQuery. Le chapitre 19 présente la bibliothèque jquery
La copie de code est la suivante:
Fonction Debug (msg) {
var log = $ ("# debuglog");
if (log.length == 0) {
log = $ ("<div id = 'debuglog'> <h1> debuglog </h1> </div>");
Log.APPENDTO (document.body);
}
Document.Write (Log)
Log.APPEnd ($ ("<pre />"). Text (msg));
};
Les quatre chapitres de la deuxième partie que nous avons mentionnés sont tous discutés autour des pages Web. Les quatre chapitres suivants se concentreront sur le magasin et se tourneront vers les applications Web. Ces contenus ne sont pas discutés de la façon d'écrire et de manipuler du contenu. Les styles et les scripts prospères utilisent des navigateurs Web pour rendre des documents; Expliquez plutôt comment utiliser les navigateurs Web comme plate-forme d'application. Et décrit les API pour prendre en charge les applications Web client plus complexes et raffinées et les navigateurs modernes.
Le chapitre 18 explique comment utiliser JavaScript pour lancer les demandes HTTP.
Le chapitre 20 décrit le mécanisme de stockage des données et la maintenance de l'état de session des applications client . Le chapitre 21 couvre la nouvelle génération d'API d'application / graphiques de stockage réseau entraînés par HTML5. Ceux-ci sont basés sur le développement du navigateur qui prend en charge de nouvelles API. Zhejiang est votre moment le plus excitant en tant que programmeur JavaScript. Il n'y a pas beaucoup d'exemples de code dans les 4 derniers chapitres. L'exemple suivant utilise ces nouvelles API.