page 1

%%'' qui ont eux-mêmes des enfants, par exemple ''

''... ==== Exemple ==== * on crée un élément de texte (on parle de nœuds, en anglais //node//), * pour contenir ce texte on crée un élément paragraphe (balise de type ''

'', * on récupère le nœud de la zone réservée aux messages qui est identifiée par un attribut ''id = "divMessages"'', * on ajoute le le nœud de texte dans le noeud paragraphe et le nœud paragraphe dans le nœud ''divMessages''. page 3

`Démonstration`


    Cliquez sur les boutons.

**À faire :** ouvrez ''page_3.html'' dans un navigateur. Vérifiez le bon fonctionnement. Modifiez le code pour que les messages s'affichent dans une liste ordonnée type ''



  
  
    
    page 4
    
    
  
  
    Cliquez sur les boutons.
    
    
    

    Zone pour les messages


// script_4.js
// Fichier script mis à part
function addMessage(message){
  let nodeMessages = document.getElementById("listeMessages");
  let nouvelleLigne = message;
  let nodeText = document.createTextNode(nouvelleLigne);
  let nodeLi = document.createElement("li");
  nodeLi.appendChild(nodeText);
  nodeMessages.appendChild(nodeLi);
}


node.classList.add("nom_de_la_classe");

**À faire :** ouvrez ''page_4.html'' dans un navigateur. Testez son bon fonctionnement puis modifiez ''script_4.js'' pour que les messages apparaissent une ligne sur deux alternativement en rouge et en bleu.



  
  
    
    page 5
    
    
  
  
    Cliquez sur les boutons.
    
    
    

    Zone pour les messages


// script_5.js
// Fichier script mis à part
function addMessage(message){
  let nodeMessages = document.getElementById("listeMessages");
  let nouvelleLigne = message;
  let nodeText = document.createTextNode(nouvelleLigne);
  let nodeLi = document.createElement("li");
  nodeLi.appendChild(nodeText);
  nodeMessages.appendChild(nodeLi);
}

document.getElementById("bouton_rouge").addEventListener(
  "click",
  function(){ addMessage("clic sur rouge"); });
document.getElementById("bouton_bleu").addEventListener(
  "click",
  function(){ addMessage("clic sur bleu"); });
document.getElementById("bouton_vert").addEventListener(
  "click",
  function(){ addMessage("clic sur vert"); });

**À faire :** ouvrez ''page_5.html'' dans un navigateur. Constatez que cela ne fonctionne pas -- pensez à observer la console.

**À faire :** faites-le et constatez que maintenant, ça fonctionne.

Il y a beaucoup d'événements, inutile de les connaître par cœur... Internet est plein de références permettant de trouver tout ce que l'on a besoin de savoir. Par exemple [[https://developer.mozilla.org/fr/|MDN web docs]].



  
  
    
    page 6
    
  
  
    Démonstration
    

    Zone pour la réponse


// script_6.js
let villes = ["Paris", "Marseille", "Lyon", ... ]; // j'abrège...

document.getElementById("champ_saisie").addEventListener("input", saisieInput)

// Il y a une suite dans script_6.js

**À faire :** on aimerait que quand il n'y a aucun résultat apparaisse un message comme //Aucun résultat//. Faites la modification dans ''script_6.js''.


event


// script_7.js
function clickButton(e){
    console.log(e);
}

document.getElementById("bouton_event1").addEventListener("click", clickButton );
document.getElementById("bouton_event2").addEventListener("click", clickButton );

**À faire :** ouvrez ''page_7.html'' dans un navigateur, ouvrez la console et cliquez sur l'un des boutons de la section //event//. Observez ce qui s'affiche en console.

L'objet ''event'' qui apparaît en console a beaucoup d'attributs. Ils renseignent sur la nature de l'événement. Par exemple, l'attribut ''target'' nous indique quel nœud du DOM est la cible de cet événement. Ici, deux boutons sont attachés au même événement. L'attribut ''target'' nous permet de savoir lequel a été cliqué.

**À faire :** modifiez la fonction ''clickButton'' dans ''script_7.js'' pour que le texte du bouton cliqué change, passant de ''%%"Cliquez-moi !"%%'' à ''%%"Cliquez-moi ! (1)"%%'' au premier clic, puis ''%%"Cliquez-moi ! (2)"%%'' et ainsi de suite.


this


// script_8.js
function quiSuisJe(e){
    console.log(this.value);
}

document.getElementById("bouton_this_gauche").addEventListener("click", quiSuisJe );
document.getElementById("bouton_this_droite").addEventListener("click", quiSuisJe );

**À faire :** testez en visualisant la console. Modifiez en ajoutant après les boutons une balise ''%%%%'' et modifiez la fonction ''quiSuisJe'' pour que le bouton de gauche provoque l'affichage de ''pikachu.jpeg'' dans la balise ''%%%%'' et le bouton droit provoque l'affichage de ''salamèche.jpeg''. //Les fichiers images sont dans l'archive fournie.//

%%'' déclenche un événement et c'est le script qui se charge de construire la nouvelle page. Le lien est alors détourné de sa fonction première qui est de demander au serveur de fournir une nouvelle page. Pour une bonne conception, on utilise tout de même la balise ''%%

%%'' : * on peut parcourir les liens avec le clavier (touche TAB),\\ //c'est une fonctionnalité des navigateurs// * les outils d'accessibilité (//déficience visuelle par ex.//) détectent les liens. Donc on veut utiliser une balise ''%%

%%'' même si on ne veut pas qu'elle fonctionne comme une balise ''%%

%%'' normal... Voyons un exemple.


Détourner les balises

Mon faux lien


// script_9.js
function click_faux_lien(e){
    alert('au lieu d\'un lien vous avez une popup !');
    e.preventDefault();
}

document.getElementById("faux_lien").addEventListener("click", click_faux_lien );

%%'' est liée à un événement qui provoque l'affichage d'un popup avec ''alert''. En ligne 4, ''e.preventDefault()'' commande de ne pas faire ce qui devrait se faire normalement dans ce cas. Cela revient à demander que la balise ''%%

%%'' ne demande pas le chargement de la page ''%%"fausse_page.html"%%'' qui d'ailleurs n'existe pas. ===== Bibliothèques, exemple de jQuery ===== Les fonctions de JS et surtout celles qui permettent d'accéder au éléments du DOM sont assez limitées. Elles se développent mais pas toujours suffisamment. De plus, on doit faire avec les différences entre //Firefox//, //Chrome//, //Edge//, //Safari//... Le plus souvent on préfère utiliser une bibliothèque qui ajoute des fonctionnalités. La plus populaire (de loin) est [[https://jquery.com/|jQuery]]. J'ai ajouté ''jQuery.3.4.1'' à ''page_10.html''. Le fichier **minifié** -- //c'est une façon spéciale de compresser les fichiers JS// -- ne pèse même pas 100 ko. Ce n'est rien au regard de tout ce qu'apporte jQuery. Par exemple, dans un site web, s'il y a un beau menu déroulant, vous pouvez être certains que jQuery est utilisé. Pour illustrer l'utilisation de jQuery, dans ''page_10.html'',


Des bibliothèques

Je veux que chaque carré soit cliquable, c'est à dire que chaque carré soit lié à un événement. Vais-je devoir doré chaque ''%%

%%'' d'un id pour les atteindre depuis le script ''script_10.js'' ? Ce serait fastidieux, on préférerait éviter...


// script_10.js
function bouton_couleur(e){
    let $item = $(e.target);
    if ($item.hasClass("rouge")) {
        alert("Ce bouton est rouge");
    } else if ($item.hasClass("vert")) {
        alert("Ce bouton est vert");
    } else {
        alert("Ce bouton est bleu");
    }
}

$(".carre").click(bouton_couleur)

Ci-dessus, en ligne 13, ''$'' est un raccourci pour désigner ''jQuery''. Le code ''%%$(".carre")%%'' permet d'atteindre directement tous les nœuds de la page qui possèdent la classe ''carre''. Ainsi on atteint tous les ''%%

%%''. Ensuite, on associe à tous ces nœuds l'événement ''click'' qui déclenche la fonction ''bouton_couleur''. En ligne 3, on veut récupérer la cible du clic avec ''e.target''. Mais ''e.target'' désigne un nœud ordinaire. En notant ''$(e.target)'' on obtient une version augmentée par jQuery qui nous donne accès à des fonctionnalités supplémentaires. Vous comprenez que de tels outils font gagner en **productivité**, c'est à dire qu'une simple ligne de code permet de faire beaucoup. **À faire :** n'oubliez pas de tester.