Développement JavaScript et Web à l'aide du modèle d'objet document

Cet article vous présente le squelette de document avec lequel JavaScript fonctionne. Ayant une connaissance pratique de ce modèle d'objet de document abstrait, vous pouvez écrire du JavaScript. Qu'est-ce que JavaScript et Internet peut-il exister sans lui? Qu'est-ce que JavaScript et Internet peut-il exister sans cela? JavaScript est l'une de ces choses que beaucoup prennent pour acquis. Tout le monde l'utilise. Lire plus qui fonctionne sur n'importe quelle page Web.

introduction

Comment les pages Web et JavaScript fonctionnent-ils ensemble et comment peuvent-ils se parler? Les réponses reposent sur la compréhension du fonctionnement du modèle objet de document..

But du DOM

Le DOM organise le contenu d'une page Web et fournit une feuille de route à l'intérieur. Le modèle est composé de nœuds. Les nœuds sont organisés dans une hiérarchie qui est mieux conçue comme une structure arborescente. Nous devrions pouvoir prendre n'importe quel code HTML et le représenter de cette façon.

Par exemple, le texte de ce paragraphe est un nœud du modèle d'objet de document. Le paragraphe est un autre noeud et le parent du noeud de texte. Le document lui-même est finalement un nœud parent pour les deux.

Nous pouvons écrire du code JavaScript pour agir sur la page Web en identifiant des nœuds. Étant donné que chaque élément de contenu est un nœud, nous pouvons alors écrire du code JavaScript qui convient à l’entité à modifier. Vous remarquerez que cela ressemble à la façon dont fonctionne CSS Création d'interfaces Web: par où commencer Création de interfaces Web: par où commencer faites-vous un concepteur de sites Web du 21e siècle. En savoir plus: il applique un style ou une apparence visuelle au contenu en utilisant les attributs id et class des éléments HTML, tout comme le comportement du contrôle JavaScript.

Il est important de noter que CSS et JavaScript ne se trouvent pas dans le DOM, mais en dehors de celui-ci. Ils manipulent tous deux le contenu du DOM plutôt que de l'habiter.

Réutilisation du code

Pourquoi le code source des pages Web est-il géré de cette manière? Il y a deux principales raisons:

1. Le stockage de JavaScript dans des fichiers séparés permet de réutiliser plus facilement le code. Lorsque JavaScript est écrit en ligne, à côté du contenu auquel il est associé, il doit être copié pour que la même fonctionnalité se produise ailleurs..
2. JavaScript séparé en un fichier externe rend le code source plus lisible en supprimant les fonctionnalités de la page Web (JavaScript) du contenu (HTML).

Les nœuds du DOM

Les nœuds que vous créez et contrôlez sont limités à ce que la spécification HTML et les navigateurs prennent en charge. C'est l'une des raisons pour lesquelles l'introduction de nouveaux éléments de niveau supérieur par HTML5 était importante. Qu'est-ce que HTML5 et en quoi cela modifie-t-il ma façon de naviguer? [MakeUseOf explique] Qu'est-ce que HTML5 et comment cela change-t-il la façon dont je navigue? [MakeUseOf explique] Au cours des dernières années, vous avez peut-être entendu le terme HTML5 de temps en temps. Que vous sachiez quoi que ce soit sur le développement Web ou non, le concept peut être quelque peu nébuleux et déroutant. Évidemment,… Lire la suite .

Pour nos besoins, les types de nœuds les plus importants sont:

• Élément
• Attribut
• Texte

Bien que la spécification mentionne en réalité douze au total.

Utilisation d'un script pour créer des nœuds dans le DOM

Dans le but d'une démonstration simple, nous allons utiliser JavaScript pour créer un élément particulier.

Ici, nous allons vous montrer combien JS est puissant en l’utilisant pour créer l’un des objets de page Web les plus fondamentaux et les plus communs du Web, l’en-tête.

Pour suivre cet exemple, créer un serveur virtuel complet ne vaut pas la peine. Comment créer un serveur et un environnement de développement Web virtuels? Comment créer un serveur et un environnement de développement Web virtuels? besoin de développer des applications Web dans le contexte natal où elles seront exécutées? Entrez les machines virtuelles. En savoir plus, utilisez donc un bac à sable en ligne. Vous voudrez un terrain de jeu léger à expérimenter comme JSBin. JSBin est génial car il comporte plusieurs volets et inclut un moyen de tout voir et de tout manipuler: HTML, JS, CSS et l'aperçu de la page Web en même temps..

(Codepen est similaire et, pour cet exemple, fonctionnera aussi bien.)

JSBin peut également créer dynamiquement des URL pour votre bloc-notes JS pouvant être partagées ultérieurement. Voici celui que j'ai généré pour cet exemple.

J'ai reproduit et commenté les extraits suivants pour créer un nouveau titre H1 dans le corps:

• Extrait de code HTML
• Extrait de code JavaScript

  // déclare une nouvelle variable pour contenir un nouvel élément h1 var newHeading = document.createElement ("h1"); // ajoute le noeud de texte au document var h1Text = document.createTextNode ("Heading Level 1"); // en fait un nœud enfant du nouveau titre newHeading.appendChild (h1Text); // ajoute ceci en tant qu'enfant d'un élément défini comme "bt" document.getElementById ("bt"). appendChild (newHeading);

Ce qui crée un nouvel élément H1 et son contenu directement subordonné à la balise d'ouverture.

Notez que le code HTML source dans le volet de gauche ne change pas. Ce code est assez facile à lire dans cet exemple. En Javascript avancé, les choses peuvent devenir beaucoup plus complexes.

Un peu sur la structure lexicale de JavaScript

L'extrait ci-dessus porte une petite explication.

• var crée une variable qui stocke une valeur arbitraire à utiliser par votre code.
• = est un opérateur d'affectation. Ici, il fonctionne avec le var terme et le nom de la nouvelle variable (par exemple, newHeading) pour former une déclaration complète.
• object.method est une invocation qui utilise “point” syntaxe pour séparer les objets, comme le document, des méthodes utilisées à leur égard, comme dans getElementById.
  • Le concept de “objets” en programmation D'où provient la programmation "orientée objet"? D'où la programmation "orientée objet" tire-t-elle son nom? Orienté objet n'est pas simplement un mot à la mode aléatoire que vous entendez dans les cercles de programmation. Il y a une raison derrière le nom - mais quoi? Rejoignez-moi alors que j'explore certains des concepts fondamentaux de la programmation et que j'explique… Read More mérite beaucoup de discussion et sort du cadre de cet article. Autant dire qu'ils sont des composants importants de votre application.
  • Les méthodes sont ce que vous attendez: une procédure particulière ou une action planifiée pouvant être appliquée aux objets.

Nous avons certainement beaucoup de bonnes ressources pour apprendre JavaScript. Vraiment apprendre JavaScript avec 5 meilleurs cours Udemy vraiment apprendre JavaScript avec 5 meilleurs cours Udemy JavaScript est le langage de programmation du Web. Si vous avez une raison d’apprendre le JavaScript, ces cinq excellents cours d’Udemy pourraient être le lieu idéal pour commencer votre aventure de codage. Lire la suite . Revenez dans notre section de programmation pour encore plus.

Et après

JQuery Making The Web Interactive: une introduction à jQuery Making The Web Interactive: une introduction à jQuery jQuery est une bibliothèque de scripts côté client utilisée par presque tous les sites Web modernes: elle rend les sites Web interactifs. . Ce n'est pas la seule bibliothèque Javascript, mais c'est la plus développée, la plus supportée et la plus utilisée… Lire la suite. C’est une base importante pour la dernière itération de pages Web et d’applications riches, et c’est là que vous voudrez peut-être commencer..

Cet article vous a-t-il aidé à en savoir plus sur le démarrage de JavaScript? Avoir une approche différente? Nous voulons avoir de vos nouvelles dans les commentaires ci-dessous!

Crédit d'image: Imagentle via Shutterstock.com

Explorer plus sur: JavaScript, Programmation.