L'essentiel de JavaScript

Étudier les erreurs et les pratiques courantes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Faites un tour d'horizon de quelques pratiques courantes en JavaScript qu'il vaut mieux proscrire autant que faire se peut.

Transcription

Après avoir parlé des meilleures pratiques, Nous allons, maintenant examiner du code JavaScript que vous allez rencontrer, mais qui est vraiment à éviter. Il s'agit souvent de méthodes qui avaient cours, il y a quelques années, au début du JavaScript et qui ont été dépréciées depuis, mais qui, malheureusement, sont toujours en cours dans certaines pages, des pages, qui parfois, n'ont plus jamais été mises à jour, depuis cette époque. La première chose à éviter, c'est « document.write ». Comme vous pouvez le deviner, « document.write » est une méthode de l'objet document, qui me permet d'écrire des choses dans le document. Je peux écrire de simples chaînes de caractères, ou des choses un peu plus complexes comme ici, des petits bouts de codes HTML, remarquez la balise « strong ». Alors dans le navigateur, vous allez voir que cela fonctionne très bien, Donc, voici le contenu généré par « document.write ». Alors, pourquoi faut-il éviter cette méthode ? Eh bien, sachez que « document.write » est l'une des méthodes les plus anciennes, les plus primitives, du JavaScript. Elle existait avant le « DOM ». Donc, cette méthode n'est pas au courant du « DOM », des meilleures pratiques et des conventions, du JavaScript moderne. En plus de cela, eh bien vous allez voir, que si vous exécutez cette méthode, à un autre moment qu'au chargement initial de la page, eh bien vous allez avoir des problèmes. Regardez, je vais dé-commenter, ici, le code qui est en bas, et je vais déplacer mon « document.write » à l'intérieur de cette fonction, que j'ai appelé « simpleFunction ». Ensuite, je vais utiliser l’événement « onload », ici, pour attendre que la page ait complètement fini de charger. Une fois que la page est prête, eh bien, je vais demander à « setTimeOut » d'exécuter la fonction « simpleFunction », au bout d'un délai de deux secondes, c'est-à-dire, deux secondes après le chargement de la page. Alors, regardons ce que cela donne, je reviens dans mon navigateur, je rafraîchis, et dans deux secondes, vous voyez que « document.write » va carrément détruire le contenu existant de la page et remplacer ce contenu par ce qu'il a envie de jeter, de manière très malpropre, dans le document. Alors, vous connaissez d'autres façons d'ajouter du contenu à votre document. Il s'agit des méthodes « createElement », « createTextNode », et « happenChild », du « DOM », dont on a déjà parlé plus tôt, ce sont les bonnes méthodes pour faire cela, « document.write », on va éviter à tout prix. Autre chose que vous allez rencontrer, et qu'il faut éviter, c'est ce qu'on appelle du « browser sniffing », cela veut veut dire qu'on essaie de détecter le navigateur qui est utilisé. C'est quelque chose qui avait cours, à la fin des années 90, quand la guerre des navigateurs faisait rage, entre « Netscape » et « Internet Explorer », ces deux navigateurs qui se disputaient le marché et qui avaient un support JavaScript tellement différent l'un de l'autre, que nous devions, à l'époque, détecter quel navigateur était utilisé, pour ensuite choisir quelle version du JavaScript il fallait utiliser, en fonction du navigateur. Alors, aujourd'hui, cette guerre est terminée. Nous avons, encore, besoin de détecter, parfois, certaines choses, mais alors, on va faire ce qu'on appelle du « feature detection », c'est-à-dire, on va détecter de fonctionnalités, pas des navigateurs. Et je vous montrerai, plus tard, dans ce chapître, comment on fait cela. Si vous rencontrez un code comme ceci, soit c'est un très vieux code, soit c'est un code qui a été écrit par quelqu'un qui n'a plus mis à jour ses compétences JavaScript, depuis très longtemps. Alors, autre chose que vous voulez éviter, c'est ce qu'on appelle la fonction « eval », alors, regardez, j'ai trois variables, ici, « a », « b », « c ». Ce sont trois chaînes de caractères et, remarquez que quand je mets ces chaînes de caractères bout-à-bout, quand je les concatène, pour utiliser le bon mot, cela donne « alert » : « Bonjour le monde », c'est-à-dire un petit bout de code JavaScript. Eh bien, grâce à la fonction « eval », que vous voyez, ici, je peux faire en sorte que le résultat de cette concaténation, soit alors exécuté, comme si c'était du code JavaScript. Pourquoi veut-on éviter cela ? D'abord, on veut l'éviter parce qu'on a, toujours, une autre solution, qui est meilleure pour réaliser ce type d'opérations. Ensuite, imaginez que la valeur d'une de ces trois variables, vienne du monde extérieur, vienne, par exemple, d'un champ de formulaire, dans lequel on peut taper quelque chose. Eh bien, cela veut dire que vous autorisez n'importe quel internaute à venir mettre du code directement dans votre application JavaScript, c'est un risque de sécurité énorme. Tellement énorme, qu'il y a cette petite phrase célèbre, dans la communauté des développeurs JavaScript, « eval is evil », « eval », c'est le diable ! À ne pas utiliser, donc ! Autre chose que vous ne voulez pas utiliser, c'est ce que l'on appelle des « pseudoProtocols », alors, un « pseudoProtocols », vous en avez un exemple, ici, vous voyez le « href », qui utilise le, soi-disant, protocole JavaScript, plutôt que d'utiliser de vrais protocoles comme « http » ou « https ». « javacript : » ce n'est pas un vrai protocole, c'est pas un protocole officiel de la norme. C'est simplement une façon de dire au navigateur, que je vais exécuter du JavaScript, plutôt que d'envoyer mon internaute, autre part. Ce qui se passera, c'est que si jamais l'internaute a désactivé son JavaScript, eh bien, voici un lien qui ne fonctionnera pas du tout. Et il faut éviter cela. Alors, une meilleure façon de réaliser cette opération, vous l'avez, ici, juste dans le fond, c'est d'utiliser « onclick », Alors là, c'est un petit peu mieux, remarquez qu'encore une fois, je mélange du JavaScript et de l'HTML, ce qui n'est jamais bon, mais, c'est un petit peu mieux, que la situation précédente parce que cela libère l'attribut « href », pour faire son boulot d'attribut « href », c'est-à-dire, envoyer l'internaute, sur une autre page, qui s’appellerait, ici, « noJS.html ». Et l'idée, c'est de dire que si le JavaScript n'est pas disponible, je vais envoyer mon internaute quelque part. Il aura quand même une réaction de la page. Ce ne sera pas quelque chose qui ne marchera pas. On est de nouveau dans l'idée du « progressive enhancement », de l'amélioration progressive. Alors, allons voir ce que cela donne dans le navigateur. Si je clique sur ce lien, vous voyez ma petite boîte qui apparaît. Et puis je vais aller vers cette page « noJS.html », qui n'existe pas, dans ce petit exemple. C'est pour cela que l'on a une erreur, alors, je vais revenir en arrière. Et vous montrer, dans le code « HTML », que l'on peut également ajouter une deuxième instruction JavaScript, après le « ; », qui serait, ici, « return false », avec un autre « ; », et ce « return false » aura pour effet d'annuler eh bien, le comportement normal de ce lien qui serait d'envoyer l'internaute sur une autre page. Vous voyez maintenant que quand je rafraîchis ma page que ma boîte apparaît, mais je ne me rends plus sur la page « noJS.html ». Je reviens dans mon code, pour vous dire que de toutes façons, vous n'utiliserez aucune de ces deux méthodes, elles sont toutes les deux à proscrire, puisqu'elles mélangent du JavaScript et de l' « HTML ». Vous connaissez d'autres façons de lier des événements à du code JavaScript, nous en avons parlé plus tôt, dans ce cours.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 avr. 2016
Durée :5h09 (47 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !