L'essentiel de JavaScript

Comprendre où placer le code

Testez gratuitement nos 1246 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Explorez divers endroits où du code JavaScript peut être placé. Discutez du meilleur endroit pour placer votre code.

Transcription

Où placer son javascript ? Une question aux réponses multiples, et aux implications très importantes. Jusqu'à présent nous avions placé javascript dans un bloc script qui se trouve dans le fond de la page HTML. Alors quand le navigateur chargera cette page, il lira ce fichier de haut en bas, ligne par ligne, de la ligne 1 à la ligne 25. Il exécutera les lignes de code au fur et à mesure qu'elle se présente à lui. Notre javascript va s'exécuter après que le navigateur ait pris connaissance des éléments de l'HTML définis plus haut dans le code. Faisons une expérience, prenons ce bloc script déplaçons-le dans le "head", c'est-à-dire tout en haut du code, avant le "body". Avant que le navigateur ait eu le temps de lire les différents élèments de l'HTML que nous voulons placer sur cette page. Nous sauvegardons, retournons dans le navigateur et ouvrons ce fichier simple.html. Mon alerte fonctionne, j'ai mon message "Bonjour tout le monde" mais la page derrière est completement blanche. Pourquoi? Simplement parce que mon navigateur a commencé à lire le code de haut en bas et il s'est arrêté à mon alerte javascript. Il est toujours dans le "head" de mon HTML il n'est pas descendu plus bas. Il n'a pas encore eu le temps de lire les H1 paragraphes et les listes non ordonnées, ces éléments ne sont pas présents sur la page. Quand je clique sur ok, le navigateur continue la lecture du fichier et prend connaissance de ces différents éléments. Il les affiche correctement sur la page. Je retourne dans mon éditeur, je reprends ma balise script et je la replace en fin de parcours, à la suite des différents éléments de l'HTML définis plus haut. Si je refais la même expérience, que je reviens dans mon navigateur dans un nouvel onglet, je rouvre le même fichier, mon alerte apparait comme tout à l'heure mais cette fois-ci la page n'est pas vide, les éléments de l'HTML sont déjà présents parce qu'ils sont définis plus haut dans le code. Dans le cas d'une page de test ce n'est pas très important que le javascript s'exécute au début ou à la fin du parcours de la lecture de ce document par le navigateur. Dans des pages compliquées vous vous servirez du javascript pour manipulez les éléments de l'HTML. Vous ne pourrez pas le faire si ces éléments ne sont pas dans le navigateur. Il sera très important de maitriser le moment ou vous voulez que ce script javascript s'exécute. C'est pourquoi, très souvent nous rencontrons ces blocs script à la fin du code HTML, simplement pour être certain que les éléments que nous désirons manipuler soient déjà présents dans le navigateur au moment ou nous exécutons le javascript. Jusqu'à présent nous avons défini ce script dans la page HTML. En anglais nous l'appelons du script inline. En français nous parlons de script en ligne, avec l'HTLM mélangé au fichier HTML. Il y a quelques problèmes à cette fonction. D'abord vous retrouverez dans les pages complexes des blocs script partout dans votre code HTML. Puisque vous voulez exécuter différentes parties de ce javascript pendant le chargement de la page avec du script complétement éclaté un peu partout dans votre fichier HTML, ce sera très difficile à lire. Vous vous rendrez rapidement compte que dans les pages de votre site vous réutilserez le même javascript car vous voudrez faire les mêmes opérations de page en page. Donc si vous mettez des blocs script mélangés à de l'HTML, vous devrez répéter ces blocs script de page en page et vous devrez faire vos modifications sur toutes les pages. Une autre technique, consiste à créer un autre fichier en faisant un clique droit dans Brackets pour créer un nouveau fichier que appelerai par exemple myScript.js. Ce fichier est complétement vide, j'y transférerai uniquement le code javascript avec le commentaire visible sans la balise script en elle-même. Je vais couper ceci et le recoller dans myScript.js. Je fais un peu de ménage sans oublier de sauvegarder myScript.js j'ai ainsi un fichier javascript externe. Je reviens dans mon fichier HTML et ma balise script qui ne fait pas partie du langage javascript, mais bien de la spécification HTML. Cette balise n'a donc rien à faire dans le fichier js qui lui ne peut contenir que du javascript. C'est bien dans le fichier HTML que cette balise doit se trouver. Je me servirai de cette balise script pour établir le lien entre mon fichier HTML et mon fichier javascript. Je vais pour cela utiliser l'attribut SRC de cette balise script et le rendre égal au nom du fichier myScript.js. Puisque la page HTML et le fichier javascript sont dans le même dossier. Si je sauvegarde, que je reviens dans mon navigateur et que je rafraichis ma page cela fonctionne comme avant, mon alerte apparait, en plein milieu de ma page mais cette fois-ci mon fichier javascript est chargé d'un fichier externe plutôt que d'être incorporé à la page HTML. Le gros avantage est que je peux lier ce fichier myScript.js à plusieurs pages HTML différentes, donc réutiliser le même code plusieurs fois. Les modifications faites dans ce fichier affecteraient toutes les pages HTML auxquelles j'ai lié ce fichier javascript. Dernière chose, vous verrez souvent cette balise script affublée d'un attribut supplémentaire, l'attribut type, il est égal à "text/javascript". Ce n'est pas une erreur de le mettre en HTML 5. Cet attribut type a été rendu optionnel, si vous ne le mettez pas nous assumons par défaut que c'est "text/javascript". La plupart du temps c'est "text/javascript" donc vous pouvez sans problème omettre cet attribut en HTML 5. J'utilise la déclaration "type", le DOCTYPE de l'HTML 5. Il n'est pas necessaire de spécifier cet attribut type, une nouveauté de l'HTML 5. Si vous utilisez une ancienne version de l'HTML il est indispensable de le mettre. Vous savez où placer votre javascript, différentes solutions à ce problème ont des implications importantes pour l'exécution de votre script. Nous verrons dans le chapitre sur les évènements comment nous pouvons attendre la fin du chargement de la page avant d'exécuter le javascript. Peu importe sa place si c'est dans le "head"ou plus bas dans la page. Nous le verrons quand nous parlerons des évènements.

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
Date de parution :26 avr. 2016

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 !