Les origines du langage JavaScript, DOM

Les origines du langage JavaScript

JavaScript a été développé par Netscape, en collaboration avec Sun Microsystems. Avant de JavaScript, les navigateurs web ont été assez basique des morceaux de logiciel capable d'afficher des documents hypertexte. JavaScript a plus tard été introduit pour ajouter un peu de piment supplémentaire pour les pages Web et de les rendre plus interactifs. La première version, le JavaScript 1.0, a fait ses débuts dans Netscape Navigator 2 en 1995. Au moment de JavaScript 1.0 's sortie, Netscape Navigator dominé le marché des navigateurs. Microsoft avait du mal à rattraper son propre navigateur, Internet Explorer, et n'a pas tardé à suivre l'exemple de Netscape en libérant son propre langage VBScript, avec une version de JavaScript, appelée JScript, avec la diffusion d'Internet Explorer 3. En réponse à cela, Netscape et Sun se mit à la normalisation du langage, avec les EUROPEENNE CNFORMATIQUE Manufacturers Unssociation (ECMA).

Le résultat a été ECMAScript, encore un autre nom pour la même langue. Bien que le nom n'a jamais vraiment bloqué, on devrait vraiment se référant à JavaScript comme ECMAScript. JavaScript, ECMAScript, JScript-ce que vous voulez l'appeler, gagne du terrain en 1996. Version 3 navigateurs de Netscape et Microsoft ont tous deux appuyé les 1,1 language Javascript à divers degrés. Je tiens à souligner que JavaScript n'a rien à voir avec Java, un langage de programmation développé par Sun Microsystems. JavaScript a été à l'origine être appelé LiveScript. "JavaScript" a probablement été choisi pour rendre le son nouveau langage, comme il était en bonne compagnie. Malheureusement, le choix de ce nom vraiment seulement eu pour effet de confondre les deux langues dans l'esprit des gens, une confusion qui a été amplifié par le fait que les navigateurs web a également appuyé une forme de client-side Java. Cependant, alors que la force de Java réside dans le fait qu'elle ne peut théoriquement être déployé dans presque n'importe quel environnement, JavaScript a toujours été destiné à la limite du navigateur Web. JavaScript est un langage de script.

Cela signifie que, contrairement à un programme qui fait tout lui-même, le langage JavaScript indique simplement le navigateur quoi faire. Le navigateur Web interprète le script et fait tout le travail, c'est pourquoi JavaScript est souvent comparé défavorablement, compilée avec les langages de programmation tels que Java et C + +. Mais la relative simplicité de JavaScript est aussi sa force. Parce qu'il a une faible barrière à l'entrée, les non-programmeurs qui voulait couper et coller les scripts dans leurs pages Web existantes ont rapidement adopté la langue. JavaScript également offert aux développeurs la possibilité de manipuler les aspects du navigateur web. Par exemple, la langue pourrait être utilisé pour manipuler les propriétés d'une fenêtre de navigateur, telles que sa hauteur, la largeur et la position. Le plan des caractéristiques propres du navigateur de cette façon peut être considéré comme un navigateur Object Model (BOM). Les premières versions de JavaScript a également fourni une espèce primitive de Document Object Model.

Qu'est-ce qu'un modèle objet de document?

En bref, un Document Object Model (DOM) est une façon de conceptualiser le contenu d'un document. Dans le monde réel, nous avons tous quelque part que je vais appeler un monde Object Model. Nous pouvons nous référer à des objets dans notre environnement en utilisant des termes comme "voiture", "maison", et "arbre" et être à peu près certain que nos termes seront compris. C'est parce que nous sommes convenus sur laquelle les objets, les mots se réfèrent expressément. Si je dis: "La voiture est au garage,« il est raisonnable de supposer que vous ne serez pas considérer que le sens de «L'oiseau est dans le placard." Our World Object Model n'est pas limité à des objets tangibles, mais elle s'applique également à des concepts.

Par exemple, je pourrais parler de «la troisième maison sur la gauche, quand vous donnant les directions. Pour que la description de donner un sens, les concepts de «tiers» et «de gauche» doit être comprise. Si je donne cette description à quelqu'un qui ne peut pas compter, ou qui ne peuvent pas dire à droite de la gauche, puis la description est essentiellement vide de sens, qu'ils soient ou non les mots ont été bien comprises. En réalité, parce que les gens d'accord sur un modèle monde conceptuel , des descriptions très succinctes peuvent être pleine de sens. Je peux être à peu près sûr que d'autres partagent mes concepts de "gauche" et "tiers". C'est la même situation avec les pages web. Les premières versions de JavaScript offert aux développeurs la possibilité d'interroger et manipuler une partie du contenu effectif des documents Web, principalement des images et des formes. Parce que les termes «images» et «formes» ont été prédéfinis, JavaScript peut être utilisé pour l'adresse "la troisième image dans le document" ou "le formulaire nommé" détails "», comme le montre:

document.images [2] document.forms [ 'details']

Cette première tentative de tri de Document Object Model est souvent appelée DOM Level 0. Dans ceux-ci, Les premiers jours sans soucis, l'utilisation la plus courante du DOM niveau 0 est pour rollovers et certains clients de validation de formulaire côté. Mais lorsque la quatrième génération de navigateurs de Netscape et Microsoft apparu, le DOM a vraiment touché le ventilateur.

La guerre des navigateurs

Netscape Navigator 4 (NN4) a été publié en Juin 1997 et, en Octobre de cette année, Internet Explorer 4 (IE4) avait également été libéré. Les deux navigateurs a promis de nombreuses améliorations par rapport aux versions précédentes, avec de nombreux ajouts à ce qui pouvait être accompli avec JavaScript, en utilisant une considérablement élargi DOM. Concepteurs de sites Web ont été encouragés à tester le dernier mot à la mode: DHTML.

Le mot D: DHTML

DHTML est un raccourci pour le HTML dynamique. Pas une technologie en soi, le DHTML est un terme décrivant un raccourci pour le mariage de HTML, CSS et JavaScript. Les réflexions sur le DHTML s'est déroulée comme suit: Vous pouvez utiliser du code HTML à l'occasion de votre page web dans les éléments. Vous pouvez utiliser les CSS pour le style et la position de ces éléments. Vous pouvez utiliser JavaScript pour manipuler et modifier ces styles à la volée. DHTML renvoyée à la combinaison de ces trois techniques. Utiliser DHTML, des effets d'animation complexes soudain devenue possible. Disons que vous avez utilisé HTML pour marquer un élément de page comme ceci:

Ceci est mon élément

Vous pouvez ensuite utiliser les CSS pour appliquer des styles de positionnement comme ceci:

# myElement (position: absolute; left: 50px; top: 100px;)

Puis, en utilisant JavaScript, vous pouvez modifier les styles de gauche et en haut de myElement pour le déplacer sur la page. Eh bien, c'était la théorie de toute façon. Malheureusement pour les développeurs, les deux navigateurs utilisés DOM, différents et incompatibles. Bien que les fabricants de navigateurs ont été la promotion de ces mêmes objectifs, ils ont chacun abordé la question du DOM de manière complètement différente.

Le Choc des navigateurs

Le DOM Netscape fait usage d'éléments propriétaire appelé couches. Ces couches ont reçu des identifiants uniques et ensuite adressée par le Javascript comme ceci:

document.layers [ 'myElement']

Pendant ce temps, le DOM de Microsoft porterait sur le même élément comme ceci:

document.all [ 'myElement']

Les différences ne s'arrêtent pas là. Disons que vous avez toujours voulu connaître la position gauche de myElement et l'assigner à la variable xpos. Dans Netscape Navigator 4, vous serait-il fait comme cela:

var xpos = document.layers [ 'myElement']. left;

Voici comment vous pourriez faire la même chose dans Internet Explorer 4:

var xpos = document.all [ 'myElement']. leftpos;

Ceci a été clairement une situation ridicule. Les développeurs ont leur code à la fourchette pour accomplir toutes sortes de scripts DOM. En effet, beaucoup de scripts ont été écrits à deux reprises, une fois pour NN4 et une fois pour IE4. Navigateur Convoluted sniffing était souvent appelé à servir jusqu'à l'écriture correcte. DHTML promis un monde de possibilités. Mais toute personne qui a réellement tenté de l'utiliser découvert un monde de douleur à la place. Il ne fallut pas longtemps avant DHTML est devenue une sale (buzz) mot. La technologie a rapidement valu la réputation d'être à la fois plus de battage et trop difficile à appliquer.

Relever le niveau

Alors que les fabricants de navigateurs étaient occupés à se livrer à leur bataille pour la suprématie, et en utilisant DOM concurrentes comme des armes dans leur guerre, le W3C a été mise tranquillement ensemble un standard Document Object Model. Heureusement, les fournisseurs de navigateurs ont été en mesure de mettre de côté leur animosité mutuelle. Netscape, Microsoft et les fabricants de navigateurs autres travaillé avec le W3C sur la nouvelle norme et DOM Level 1 a été achevée en Octobre 1998. Pour en revenir à notre exemple, jetons un regard sur la façon dont le nouveau standard DOM, de s'attaquer au même situation. Rappelez-vous, nous avons une

myElement avec l'ID et nous essayons de déterminer la valeur qui a été appliqué à sa position de gauche afin de pouvoir stocker cette valeur comme étant la xpos variable. Voici la syntaxe, nous utiliserons:

xpos = document.getElementById ( 'myElement'). style.left

À première vue, qui pourraient ne pas apparaître comme une amélioration par rapport au non-standard, les DOM propriétaires. Toutefois, le DOM normalisée est beaucoup plus ambitieuse dans sa portée. Alors que les fabricants de navigateurs voulais simplement un moyen de manipuler des pages Web avec JavaScript, le W3C a proposé un modèle qui pourrait être utilisé par n'importe lequel langage de programmation pour manipuler n'importe lequel document écrit en n'importe lequel Markup Language.

Penser en dehors du navigateur

Le DOM est ce qu'on appelle une interface de programmation (API). API sont essentiellement des conventions qui ont été convenus par consentement mutuel. Real-équivalents dans le monde seraient des choses comme:

Code Morse
Temps des zones internationales
Le tableau périodique des éléments

Toutes ces choses sont des normes, et ils rendent plus facile pour les gens de communiquer et de coopérer. Dans les situations où une convention unique n'a pas été convenu, le résultat est souvent désastreux. Rappelez-vous, la concurrence entre les mesures métriques et impériales a entraîné au moins une mission a échoué Mars. Dans le monde de la programmation, il ya beaucoup de différentes langues, mais il ya beaucoup de tâches similaires. C'est pourquoi API sont si pratique. Une fois que vous savez la norme, vous pouvez l'appliquer dans de nombreux environnements différents. La syntaxe mai changer en fonction de la langue que vous utilisez, mais la convention reste le même.

Ainsi, alors que je me concentre spécifiquement sur l'utilisation du DOM et JavaScript dans cet article, vos nouvelles connaissances sur les DOM sera également très utile si jamais vous avez besoin pour analyser un document XML en utilisant un langage de programmation comme PHP ou Python. Le W3C définit les DOM comme étant une «plate-forme et langue de l'interface neutre qui permettra aux programmes et aux scripts d'accéder et mettre à jour dynamiquement le contenu, la structure et le style des documents." L'indépendance des DOM normalisés, ainsi que son champ d'application puissante, le place au tête et des épaules DOM-dessus de la propriété créés par les fabricants de chamailleries navigateur.

La fin de la guerre des navigateursMicrosoft a gagné la bataille pour la domination du marché des navigateurs action. Ironie du sort, le choc des DOM concurrentes et de balisage propriétaire avait peu d'effet sur le résultat final. Internet Explorer a été destinée à gagner simplement en raison du fait qu'il était préinstallé sur tous les ordinateurs exécutant le système d'exploitation Windows. Les gens qui ont été les plus durement touchés par la guerre des navigateurs, des concepteurs Web. Le développement multi-navigateur était devenue un cauchemar. Ainsi que les écarts dans les implémentations de JavaScript qui je l'ai mentionné précédemment, les deux navigateurs avaient aussi un niveau très différent de l'aide pour CSS. Création de feuilles de style et de scripts qui ont travaillé sur les deux navigateurs est devenu une sorte de magie noire. Un jeu a commencé contre l'orientation de la propriété des fabricants de navigateurs.

Un groupe a été formé qui se fait appeler WEB SORMES Projet, ou le WaSP pour faire court (http://webstandards.org/). La première tâche que la guêpe a été entrepris pour encourager les fabricants de navigateurs à adopter des recommandations aux recommandations W3C-là même que les fabricants de navigateur avait contribué à la rédaction. Que ce soit en raison de la pression de la guêpe ou le résultat de décisions internes de l'entreprise, il était beaucoup plus grande Support des standards Web dans la prochaine génération de navigateurs web.

Un nouveau départ

Internet Explorer 5 livré avec un support intégré pour les DOM normalisé WC3, tout en conservant également un soutien pour les personnes âgées, propriétaires de Microsoft DOM. Netscape a décidé de faire une rupture nette et a publié un navigateur qui avait à peu près rien en commun avec NN4. Netscape Navigator 6, même sauté un numéro de version, et il a utilisé un moteur de rendu avec tout autre présent, le soutien CSS beaucoup plus important. Elle a également appuyé le DOM standard, mais sans la rétrocompatibilité pour les DOM vieux Netscape. Les versions ultérieures de Netscape et Microsoft améliorée sur les précédentes incarnations d'un soutien accru pour les standards du web. Malheureusement, le développement d'Internet Explorer a stagné à la version 6. C'est dommage, car certains problèmes restent encore avec la mise en œuvre du navigateur de CSS. Support pour les DOM Niveau 1, toutefois, est la roche solide. Dans l'intervalle, d'autres navigateurs sont apparus sur la scène. Quand Apple a débuté son navigateur web Safari en 2003, il n'était pas question qu'elle suivrait les standards DOM.

Firefox, Mozilla et Camino, tous basés sur le même moteur de rendu open-source que Netscape 6 et 7, sont un excellent support pour le DOM. Opera et Konqueror offrons également un soutien DOM grande. Plus de 95% des navigateurs en utilisation active d'aujourd'hui ont un support intégré pour les DOM. La guerre des navigateurs des années nonante tardive semblent bel et bien derrière nous. Bien qu'aucun navigateur unique a mis en œuvre le DOM du W3C parfaitement, tous les navigateurs modernes couvrent environ 95% du cahier des charges. Cela signifie qu'il ya une énorme quantité que nous pouvons accomplir sans avoir à se soucier de branchement de code. La stagnation du développement d'Internet Explorer nonobstant, la vie s'est grandement améliorée pour les concepteurs Web. Au lieu d'écrire des scripts avec le code fourchue servis avec le navigateur compliquée prisés, nous sommes maintenant en mesure d'écrire quelque chose une fois et le publier partout. Tant que nous suivons les standards DOM, nous pouvons être sûrs que nos scripts fonctionnent presque universellement.

What's next?

Une chose que vous devriez vraiment loin de ma leçon JavaScript bref historique est que les différents navigateurs utilisés pour accomplir les mêmes tâches de différentes manières. Cette réalité incontournable, dominée non pas seulement l'écriture de scripts JavaScript, il a également dicté combien d'articles ont été écrits à propos de JavaScript. Tous les articles JavaScript visant à démontrer comment apprendre la langue par exemple souvent dû faire preuve les mêmes scripts écrits en différentes manières pour les différents navigateurs. Tout comme le code trouvé sur la plupart des sites web, les exemples dans la plupart des articles JavaScript étaient pleins de navigateur et le code de renifler de branchement. De même, les articles de référence technique sur JavaScript pourrait ne pas contenir de simples listes de fonctions et méthodes. Ils ont également dû document qui fonctions et les méthodes ont été soutenus par les différents navigateurs. La situation a changé maintenant.

Merci à la standardisation du DOM, les différents navigateurs faire les mêmes choses dans une grande partie de la même manière. Cela signifie que lorsque je vous montre comment faire quelque chose en utilisant JavaScript et le Document Object Model, nous n'allons pas nous laisser dérouter par des incohérences navigateur. Je vais essayer d'éviter de mentionner tous les navigateurs spécifiques dans cet article. Je suis aussi vont pas utiliser le terme DHTML plus. Le terme toujours mieux fonctionné comme un mot à la mode de commercialisation que comme une description technique. D'une part, il semble prêter à confusion, comme une autre saveur du langage HTML ou XHTML. Aussi, le terme vient avec beaucoup de bagages. Si vous parlez de DHTML pour ceux qui ont essayé de l'utiliser dans les années nonante en retard, vous aurez du mal à les convaincre que c'est une pure et simple, technologie normalisée maintenant. DHTML était censé se référer à la combinaison de (X) HTML, CSS et JavaScript, mais en réalité, ce qui lie ces choses ensemble est le DOM. S'il nous faut un terme pour décrire ce processus, nous allons utiliser quelque chose de plus précis. Bien que le terme DHTML peut être utilisé pour faire référence au navigateur de codage spécifique, il ne semble pas juste d'essayer d'appliquer le même terme basés sur les standards de codage.

DOM Scripting est un moyen plus précis pour décrire la manipulation de documents et feuilles de style en utilisant le W3C Document Object Model. considérant DHTML ne vise que des documents Web, DOM Scripting peut être utilisé en conjonction avec n'importe quel document de balisage à l'aide d'une langue qui prend en charge l'API DOM . Dans le cas des documents Web, l'omniprésence de JavaScript en fait le meilleur choix pour les DOM Scripting.

un article présenté par Jacques Goudreau

Disclaimer:Notre site n'est pas responsable du contenu de cet article. Webarticles est une ressource d'information gratuite.
Important: Cet article «Les origines du langage JavaScript, DOM" a été traduit par un logiciel automatique. Nous nous sentons désolés pour les fautes d'orthographe que mai ont eu lieu. Nous vous remercions de votre compréhension.