Faire le quizz close

Où implanter le code JavaScript ?

#1 Où a-t-on le droit de mettre du code JavaScript ? open

Du code JavaScript dans le Boby

  1. Lancez Sublime Text. Faites CTRL+N puis CTRL+S et sauvegardez sur le bureau en donnant le nom implanter-javascript.html.
  2. Tapez ensuite !>script+tab et vous avez une structure minimale avec un élément script.
  3. Tapez encore un tab pour aller vous positionner au milieu de l'élément script puis tapez entrée.
  4. Tapez al pour "activer" la complétion et allez chercher un alert puis entrée puis vous tapez une double quote " pour encadrer le message qui est dans le alert et comme il est sélectionné vous tapez 1 pour le remplacer puis Fin pour aller à la fin de la ligne et enfin le point virgule pour terminer l'instruction ;.
  5. Ensuite vous cliquez droit dans la fenêtre Sublime et vous choisissez Open In Browser et vous devez voir une popup qui affiche 1.

Du code JavaScript dans l'élément Head

Ici on a placé un premier morceau de code JavaScript au milieu du body. On va en placer un autre dans l'élément head.

  1. Placez le curseur devant la balise ouvrante script.
  2. Faites CTRL+SHIFT+J pour sélectionner le niveau d'indentation de l'élément script.
  3. Faites CTRL+SHIFT+D pour dupliquer la sélection.
  4. Faites plusieurs CTRL+SHIFT+ Flèche vers le haut pour remonter le bloc sélectionné juste en dessus de la balise fermante de l'élément head. Lorsque vous y êtes vous cliquez dans le noir de l'écran ou vous tapez sur escape pour désélectionner.
  5. Remplacer le 1 par un 2 sur le deuxième alert.
  6. Faites à nouveau un Open In Browser et vous devez constater que les alert s'exécutent dans l'ordre où ils sont positionnés dans le code HTML.

Du code JavaScript dans un fichier séparé

Maintenant on va faire le dernier cas de figure. On va placer notre code dans un fichier séparé.

  1. On va le faire en utilisant les menus Sublime. Vous allez dans le menu File puis vous choisissez New File puis Save As et vous sauvegardez sur le bureau sous le nom code-javascript.js.
  2. Vous tapez al vous choisissez alert puis vous tapez entrée. Appuyer sur Supr pour supprimer le message sélectionné puis tapez une double quote " puis 3 puis Fin et ; puis CTRL+S.

A ce stade si vous faites Open In Browser rien n'a changé puisque code-javascript.js n'est pas connu dans implanter-javascript.html. Pour régler ça on va à nouveau utiliser l'élément script.

  1. Allez dans implanter-javascript.html positionnez vous juste devant la balise fermante de l'élément body. Vous tapez entrée puis tab puis script[src]+tab.
  2. Vous tapez code-javascript.js puis CTRL+S.
  3. Maintenant vous refaites Open In Browser et c'est 1 2 et 3 qui doivent s'afficher.

#2 Où doit-on mettre le code JavaScript en fonction de ce que l'on fait ? open

Déjà on va situer un petit peu ce qu'il peut y avoir en plus dans notre page.

Les fichiers séparés JavaScript sont mis en cache ce qui signifie qu'ils ne sont chargés qu'une seule fois et peuvent être partagés par plusieurs fichiers HTML.

On va détailler les différents cas que l'on a codé.

  1. A l'endroit du alert("1"). Si vous mettez des quantités importantes de code JavaScript à cet endroit vous allez bloquer le chargement du HTML et vous aurez une page blanche jusqu'à ce que tout soit chargé. De plus l'exécution de votre JavaScript va démarrer avant le chargement du HTML ce qui risque fort de poser problème si votre JavaScript veut justement accéder à ce fameux HTML. Donc à cet endroit quand on met du JavaScript on en met peu. On le fait par exemple pour implanter des marqueurs pour des outils statistiques où pour ce qui est lié au fonctionnement des régies publicitaires.
  2. A l'endroit du alert("2"). Le plus souvent c'est peu. C'est un peu comme en 1. Si vous implantez des publicités Adsense vous serez amené à placer des petits bouts de JavaScript dans différents endroit de votre page HTML.
  3. A l'endroit du alert("3"). C'est à cet endroit, avant la balise fermante du body que vous devez placer votre JavaScript qu'il soit dans un fichier séparé ou pas. Mettez le derrière les éventuelles librairies auxquelles vous faites appel. A cet endroit le HTML sera chargé mais vous devrez vous en assurer en mettant en place un gestionnaire d'événement. On verra ça plus tard. Ca nous empêchera pas de faire nos programmes de test qui fonctionneront correctement dans le cadre de ces tutoriels.

#3 Ce que vous pouvez encore rencontrer open

Il arrive que l'on ait besoin de récupérer du code JavaScript et dans ce cas là il est possible de trouver du code qui a été correctement implanté en son temps mais qui est devenu obsolète. Afin que vous ne soyez pas surpris on va en parler un peu.

Implantations aujourd'hui obsolètes
Implantation obsolète

Ces deux cas de figures se rencontrent encore souvent. Sachez le et ne les utiliser plus. On verra comment utiliser des gestionnaires d'événements placés dans des fichiers séparés.