====== JS et html ====== Le Javascript (JS) est utilisé à l'intérieur d'une page html pour en manipuler le contenu. * Le navigateur reçoit la page html. Cette page fait référence à un contenu JS. * Le contenu JS est éventuellement exécuté de qui a un effet sur la page. * Quand on agit sur la page -- clic, mouvements du curseur de souris... -- le navigateur le signal au script JS qui, s'il a été programmé pour, réagit. Donc nous devons envisager le JS intégré dans une page html ou dans un fichier joint à une page html. J'utilise JsFiddle pour visualiser les résultats. JsFiddle propose une interface montrant simultanément les contenus html, css et javascript, ainsi que la page web résultante. On peut ainsi simuler et visualiser l'effet d'un changement dans l'un ou l'autre fichier. ===== JS dans une balise html ===== C'est le premier niveau que vous pouvez visualiser dans [[https://jsfiddle.net/gromax/ce1tywpo/4/|JsFiddle]]. Vous pouvez voir un ensemble formé de deux fichiers : * la page html, * le fichier de styles css. Le CSS n'a pas beaucoup d'importance ici. Concentrons-nous sur le html. JS dans les balises

Cette page ne contient que 3 carrés. On veut qu'il se passe quelque chose quand on appuie sur un des carrés. Dans le code html vous pouvez constater que le carré rouge est associé à une commande en Javascript. Il suffit d'ajouter la même commande pour les 2 autres.

Remarque : ce sont les styles définis dans le fichier CSS qui nous permettent d'afficher ainsi ces carrés.

 En ligne 10, on crée le bloc ''%%
%%'' pour le carré rouge. Ce bloc a un attribut ''onclick'' qui dit ce qu'il faut faire si l'élément est cliqué. ''onclick'' est associé à un code JS. Si on clique l'élément, le code JS est exécuté. **Problème :** On peut pas écrire beaucoup de JS de cette façon. Et puis ce n'est pas une bonne idée de mélanger le contenu et la forme. Si on fait cela, on aura un gros fichier avec, tout mélangé, des morceaux de textes correspondant à ce que l'on voulait afficher dans la page et des morceaux de code JS. N'oubliez pas que dans un site web, la personne qui écrit le contenu des pages -- les articles d'un journal par exemple -- n'est pas la même que celle qui écrit les morceaux de code JS pour rendre le site plus agréable à l’œil. ===== Javascript dans un bloc à part ===== On a la possibilité d'écrire le code nécessaire dans un bloc à part ce qui constituera une première séparation entre le code et le contenu de la page. Pour cela, je vous donne l'exemple d'une fonction qui compte le nombre de clics sur le carré rouge et l'affiche en console. JS dans le head

Cette page ne contient que 3 carrés. On veut qu'il se passe quelque chose quand on appuie sur un des carrés. Dans le code html vous pouvez constater que le carré rouge est associé à une commande en Javascript. Il suffit d'ajouter la même commande pour les 2 autres.

Remarque : ce sont les styles définis dans le fichier CSS qui nous permettent d'afficher ainsi ces carrés.

 Voir dans [[https://jsfiddle.net/gromax/knsf9ed8/12/|JsFiddle]]. Remarquez, lignes 7 à 13, l'apparition d'un bloc ''%%

Cette page ne contient que 3 carrés. On veut qu'il se passe quelque chose quand on appuie sur un des carrés. Dans le code html vous pouvez constater que le carré rouge est associé à une commande en Javascript. Il suffit d'ajouter la même commande pour les 2 autres.

Remarque : ce sont les styles définis dans le fichier CSS qui nous permettent d'afficher ainsi ces carrés.

Voir dans [[https://jsfiddle.net/gromax/s9nq2maL/4/|JsFiddle]]. * Le bloc ''%% * Maintenant le script est déclaré à la fin, en ligne 15. * En ligne 10, il n'y a plus de JS. En revanche, on a ajouté un identifiant ''%%id = "rouge"%%'' au bloc qui nous intéresse. // fichier script.js let nombreClicks = 0; function addMessage(){ nombreClicks++; console.log(nombreClicks); } noeud = document.getElementById("rouge"); noeud.addEventListener("click", addMessage); * En ligne 8, ''document'' désigne la racine du DOM. ''getElementById'' permet d'atteindre l'élément du DOM désigné par l'id demandé. * En ligne 9, on attache un événement //clic// au bloc désigné par ''noeud''. Voir dans [[https://jsfiddle.net/gromax/690sum8f/3/|JsFiddle]].