Share
Bonjour et bienvenue dans la première partie de ce qui sera, espérons-le, une vaste série couvrant les aspects fondamentaux du langage de programmation JavaScript et de l'API DOM..
Bien que les frameworks tels que jQuery, Prototype et MooTools soient un excellent moyen de supprimer les bogues du navigateur et d'accélérer le développement, il est important de connaître et de comprendre les technologies sous-jacentes. Cette série a pour but de vous dire ce que vous devez savoir sur JavaScript et le modèle de document objet (DOM). Même si vous ne jurez que par une bibliothèque en particulier, cela vous sera tout de même bénéfique: savoir comment quelque chose fonctionne sous la peau ne peut être qu'une bonne chose.!
JavaScript est un dynamique, lâchement tapé, à base de prototype langage de programmation utilisé dans de nombreux environnements. En plus d'être le langage de programmation côté client répandu du Web, il est également utilisé pour écrire des plugins pour les IDE, dans les fichiers PDF et comme base pour d'autres plateformes et abstractions supérieures..
JavaScript est basé sur le standard ECMAScript (ECMA-262) et a été créé par Brendan Eich de Netscape. Il s'appelait à l'origine LiveScript, mais il a ensuite été renommé en JavaScript, probablement dans le seul but de semer la confusion..
Voici quelques unes de ses caractéristiques plus en détail:
Comprendre les points ci-dessus n’est pas important pour apprendre à utiliser JavaScript. Ce ne sont là que quelques idées pour faire fonctionner votre cerveau et devraient vous aider à différencier JavaScript des autres langages de programmation que vous avez pu expérimenter..
Le modèle de document, généralement abrégé en DOM, est l’API par laquelle JavaScript interagit avec le contenu d’un site Web. JavaScript et les DOM sont généralement considérés comme une seule et même entité, car JavaScript est généralement utilisé à cette fin (interaction avec le contenu sur le Web). L'API DOM est utilisée pour accéder, parcourir et manipuler des documents HTML et XML..
Voici quelques points remarquables sur le DOM:
') alors on peut y accéder via le DOM en tant que noeud.
Si vous utilisez Firefox et que vous ne possédez pas déjà l'addon Firebug, je vous recommande de le télécharger et de l'installer maintenant. C'est un outil très utile pour obtenir une image correcte de l'ensemble de la structure du document..
Lorsque vous souhaitez utiliser JavaScript sur un site Web, vous devez l'inclure dans un élément SCRIPT:
JavaScript!
Comme vous pouvez le constater, nous avons un élément SCRIPT au bas de notre document.. L'attribut TYPE doit être strictement défini sur 'application / javascript' mais ce n’est pas une surprise si cela ne fonctionne pas dans Internet Explorer, nous sommes donc bloqués avec l’attribut 'text / javascript' ou aucun attribut TYPE. Si la validation vous tient à cœur, la première suggestion vous conviendra probablement..
Vous aurez également remarqué que cet élément SCRIPT comporte quelques lignes commentées. Ceux-ci informent les navigateurs prenant en charge XHTML que le contenu de l'élément SCRIPT est un 'caractère de données' et qu'il ne doit pas être interprété comme un balisage XHTML. Ce n’est vraiment nécessaire que si vous prévoyez d’utiliser le<' or '>'caractères dans votre code JavaScript. Évidemment, vous pouvez oublier tout cela si vous utilisez du HTML simple.
Tout code JavaScript que nous mettons à l'intérieur de cet élément SCRIPT s'exécutera au chargement de la page. La seule exception est lorsqu'un élément SCRIPT a un attribut 'différer'. Par défaut, lorsqu'un navigateur rencontre un élément SCRIPT, il arrête et exécute le code, puis analyse le document. L'attribut DEFER informe le navigateur que le code ne contient aucun code modifiant le document et peut donc être exécuté ultérieurement. Le seul problème avec cela est que cela ne fonctionne que dans IE, il est donc probablement préférable d'éviter cet attribut.
Si vous souhaitez créer un lien vers un fichier de script externe, ajoutez simplement un attribut SRC à votre élément SCRIPT correspondant à son emplacement. Il est généralement préférable d’avoir des fichiers de script distincts que d’écrire du code en ligne car cela signifie que le navigateur peut mettre le fichier en cache. De plus, vous n'avez pas à vous soucier de ces absurdités CDATA:
Avant de continuer avec le DOM, il est judicieux de maîtriser quelques notions de base de JavaScript. Si vous avez du mal à comprendre certaines de ces choses, ne vous inquiétez pas, vous finirez par les prendre.!
En JavaScript, vous pouvez avoir différents types de valeurs. Il y a des nombres, des chaînes, des booléens, des objets, des indéfinis et des nuls:
Les commentaires sur une seule ligne sont écrits en utilisant deux barres obliques (//), tout le texte restant sur cette ligne est supposé être un commentaire de l'analyseur. Les commentaires multi-lignes sont signifiés en utilisant '/ *' et '* /' pour finir le commentaire.
En JavaScript, tous les nombres sont représentés sous forme de valeurs à virgule flottante. Lorsque vous définissez une variable numérique, n'oubliez pas de la mettre entre guillemets.
// Remarque: utilisez TOUJOURS 'var' pour déclarer une variable: var leftSide = 100; var topSide = 50; var areaOfRectangle = leftSide * topSide; // = 5000
Toute chaîne que vous définissez est prise à la lettre, JavaScript ne la traitera pas. Une chaîne est une séquence de caractères Unicode et doit être entourée d'une paire de guillemets simples ou doubles..
var firstPart = 'Bonjour'; var secondPart = 'World!'; var allOfIt = firstPart + "+ secondPart; // Hello World! // Le signe + est utilisé en tant qu'opérateur de concaténation de chaînes // (il est également utilisé pour l'addition numérique)
Les types booléens sont utiles lorsque vous souhaitez évaluer une condition - pour voir si elle répond à un critère spécifié. Il n'y a que deux valeurs booléennes possibles: true et false. Toute comparaison, à l’aide d’opérateurs logiques, donnera un booléen.
5 === (3 + 2); // = true // Vous pouvez affecter des valeurs booléennes à des variables: var veryTired = true; // Vous pouvez le tester comme ceci: if (veryTired) // Sleep
Le '===' que vous voyez ci-dessus est un opérateur de comparaison, nous le couvrirons plus tard.
Une fonction est un objet spécialisé:
Accentsconagua
// Utilisation de l'opérateur de fonction pour créer une nouvelle fonction: function myFunctionName (arg1, arg2) // Le code de fonction va ici. // Si vous omettez le nom de la fonction, // vous créez une "fonction anonyme": function (arg1, arg2) // Le code de la fonction va ici. // Exécuter une fonction consiste simplement à la référencer // puis à ajouter une parenthèse (avec arguments): myFunctionName (); // Pas d'argument myFunctionName ('foo', 'bar'); // avec arguments // Vous pouvez également exécuter une fonction sans // l'assinguer à une variable: (function () // Ceci est appelé une fonction anonyme auto-invoquante) (); Un tableau est également un objet spécialisé et peut contenir un nombre quelconque de valeurs de données. Pour accéder aux valeurs de données dans un tableau, vous devez utiliser un nombre, appelé "index" de l'élément que vous essayez d'extraire:
// 2 manières différentes de déclarer un nouveau tableau, // Literal: var fruit = ['apple', 'lemon', 'banana']; // Utilisation du constructeur Array: var fruit = new Array ('pomme', 'citron', 'banane'); fruit [0]; // Accéder au 1er élément du tableau (pomme) fruit [1]; // Accède au 2ème élément du tableau (citron) fruit [2]; // Accéder au 3ème élément du tableau (banane) Un objet est une collection de valeurs nommées (paires clé-valeur). C'est semblable à un tableau, la seule différence est que vous pouvez spécifier un nom pour chaque valeur de données.
// 2 manières différentes de déclarer un nouvel objet, // Literal (accolades): var profile = name: 'Bob', age: 99 ans, job: 'Freelance Hitman'; // Utilisation du constructeur Object: var profile = new Object (); profile.name = 'Bob'; profil.age = 99; profile.job = 'Hitman indépendant';
L’une des constructions les plus courantes en JavaScript est la 'SINON' déclaration. Ca fait plutot comme ca:
var legalDrinkingAge = 21; var yourAge = 29; if (yourAge> = legalDrinkingAge) // Nous pouvons utiliser 'alert' pour avertir l'utilisateur: alert ('Vous pouvez boire.'); else alert ('Désolé, vous ne pouvez pas boire.'); Au lieu de les énumérer ici, je vous suggère de consulter l'article du MDC sur les opérateurs. Cela les explique en détail. J'ai configuré quelques exemples pour vous donner une idée de la façon dont certains opérateurs sont utilisés ci-dessous:
// additioa / soustraction / multiplier / diviser var someMaths = 2 + 3 + 4 - 10 * 100/2; // Egalité si (2 == (5 - 3) / * Faire des choses * / // == vérifie l’équivalence // Inégalité si (2! = (5 - 3) / * Faire des choses * / / / Opérateurs d'égalité strictes: // (je suggère d'utiliser ces outils) 2 === 2 // Au lieu de 2 == 2 2! == 3 // Au lieu de 2! = 3 // Affectation: var numberOfFruit = 9; numberOfFruit - = 2; // Identique à "numberOfFruit = numberOfFruit - 2" numberOfFruit + = 2; // Identique à "numberOfFruit = numberOfFruit + 2"
La mise en boucle est utile lorsque vous devez parcourir tous les éléments d'un tableau ou tous les membres d'un objet. Le moyen le plus courant de boucler en JavaScript consiste à utiliser l'instruction FOR ou WHILE..
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS']; // WHILE loop var counter = 0; var lengthOfArray = envatoTutSites.length; tandis que (compteur < lengthOfArray) alert(envatoTutSites[counter]); counter++; // Same as counter += 1; // FOR loop // (The i stands for "iterator" - you could name it anything) for (var i = 0, length = envatoTutSites.length; i < length; i++) alert(envatoTutSites[i]);
Supposons que nous ayons un document XHTML de base contenant un paragraphe et une liste non ordonnée:
JavaScript! Mon premier paragraphe…
Dans ce premier exemple, nous allons accéder à notre paragraphe en utilisant la méthode DOM 'getElementById':
(Ce code est contenu dans l'élément SCRIPT du modèle ci-dessus.).
var introParagraph = document.getElementById ('intro'); // Nous avons maintenant une référence au nœud DOM. Ce nœud DOM // représente le paragraphe d'introduction. La variable 'introParagraph' est maintenant une référence au noeud DOM. Nous pouvons faire un certain nombre de choses avec ce nœud, nous pouvons interroger son contenu et ses attributs et en manipuler n’importe quel aspect. Nous pouvons le supprimer, le cloner ou le déplacer vers d'autres parties de l'arborescence DOM.
Tout ce qui est présent dans un document auquel nous pouvons accéder à l'aide de JavaScript et de l'API DOM. Ainsi, nous pourrions vouloir accéder à la liste non ordonnée de la même manière, le seul problème est qu’elle n’a pas d’ID. Vous pouvez lui donner un identifiant puis utiliser la même méthode que ci-dessus ou nous pourrions y accéder en utilisant 'getElementsByTagName':
var allUnorderedLists = document.getElementsByTagName ('ul'); // 'getElementsByTagName' retourne une collection / liste de noeuds vivants // - C'est très similaire à un tableau avec quelques légères différences. La méthode 'getElementsByTagName' renvoie une collection / liste de nœuds actifs. Cela ressemble à un tableau en ce sens qu'il a une propriété length. Une chose importante à noter est que ces collections sont "live" - si vous ajoutez un nouvel élément au DOM, la collection se mettra à jour. Comme c'est un objet de type tableau, nous pouvons accéder à chaque nœud via un index, de 0 à la longueur totale de la collection (moins 1):
// Accès à une liste non ordonnée unique: [0] index var unorderedList = document.getElementsByTagName ('ul') [0]; // Créer la liste des noeuds de tous les éléments de la liste au sein de l'UL: var allListItems = unorderedList.getElementsByTagName ('li'); // Maintenant, nous pouvons parcourir chaque élément de la liste en utilisant une boucle FOR: for (var i = 0, length = allListItems.length; i < length; i++) // Extract text node within and alert its content: alert( allListItems[i].firstChild.data ); 
Le terme "traverse" est utilisé pour décrire l'action de traverser le DOM pour trouver des nœuds. L'API DOM nous donne beaucoup de propriétés de nœud que nous pouvons utiliser pour parcourir tous les nœuds d'un document..
Ces propriétés sont inhérentes à tous les nœuds et vous permettent d'accéder aux nœuds liés / proches:
Donc, comme vous pouvez le constater, parcourir le DOM est incroyablement facile, il suffit de connaître les noms de propriété..
Une chose à noter à propos du graphique ci-dessus: les éléments de la liste ne peuvent être récupérés de cette manière que s’ils ne sont pas séparés par des espaces. Comme vous pouvez avoir des nœuds de texte et des nœuds d'élément dans un document, l'espace entre
C’est ainsi que fonctionnent toutes les principales bibliothèques JavaScript. en utilisant des méthodes et des propriétés DOM natives pour vous donner accès à ces éléments via une abstraction bien polie. Ce qui vous sépare du cadre inflexible, c'est que vous avez maintenant une idée de la façon de survivre sans cadre (si vous ne l'avez pas déjà fait)!
Eh bien, c'est tout pour la première partie. J'espère que vous avez appris quelque chose de toutes mes divagations. Nous espérons que, dans la prochaine partie de la série, nous nous concentrerons sur des exemples plus applicables; nous allons probablement couvrir le modèle d'événement du navigateur ainsi.
En attendant, et si vous ne l’avez pas encore fait, consultez ces exposés de Doug Crockford (site Yahoo! Video):
Merci d'avoir lu!
