R112 – CM #2

Développement web S1

Fonctions

Fonction sous-programme, ensemble d'instructions cachées derrière un nom 

// prompt() : affiche une chaîne de caractères 
// dans une fenêtre modale avec un champs de texte, 
// renvoie le texte écrit par l'utilisateur
let nom = prompt("Votre nom ?")

// alert() : affiche une chaîne de caractères
// dans une fenêtre modale, ne renvoie rien
alert(`Vous êtes ${nom}`)

Une fonction peut avoir des paramètres (entre les parenthèses) et rendre une valeur

Faire une fonction

On peut faire nos propres fonctions avec deux nouveaux mots-clés de JavaScript :

  • function introduit le nom de la fonction et ses paramètres
  • return la valeur renvoyée. Marque la fin de la fonction
Exemple : fonction sans paramètre ni valeur renvoyée
// déclaration de la fonction
function coucou() {
  console.log("Votre ordinateur vous fait coucou")
}

// appel de la fonction
coucou()

Attention : fonction en français, function en anglais

Exemple : fonction avec 1 paramètre, pas de valeur renvoyée
// déclaration de la fonction
// nom est un paramètre (variable externe)
function coucou(nom) {
  console.log(`${nom}, votre ordinateur vous fait coucou`)
}

// appel de la fonction avec 1 paramètre
coucou("Thomas")
let nom = "Élodie"
coucou(nom)
Exemple : fonction avec 2 paramètres, pas de valeur renvoyée
// déclaration de la fonction
// nom et dispositif sont deux paramètres
function coucou(nom, dispositif) {
  console.log(`${nom}, votre ${dispositif} vous fait coucou`)
}

// appel de la fonction avec deux paramètres
coucou("Thomas", "ordinateur")
let nom = "Élodie"
coucou(nom, "ordiphone")

Les paramètres permettent de faire varier les données de la fonction (mais pas son code)

Exemple : fonction avec une valeur renvoyée
// déclaration de la fonction
// elle renvoie une chaîne de caractères
function coucou(nom, dispositif) {
  // les variables déclarées dans une fonction
  // n'existent qu'à son intérieur
  let message
  if (dispositif === "fax") {
    message = "blip blip tchiiiip"
  } else {
    message = `${nom}, votre ${dispositif} vous fait coucou`
  }
  return message
}

// l'appel de la fonction donne une valeur
alert(coucou("Thomas", "ordinateur"))

Une fonction avec return marche comme une variable. On peut :

  • affecter sa valeur à une variable
  • utiliser sa valeur dans une opération
  • utiliser la fonction comme paramètre dans une autre fonction

Une fonction sans return sert à modifier les données d'un programme

Fonctions ≠ méthodes

Certains types de variables ont leur propres fonctions : elles s'appellent méthodes 

let saisons = ["hiver", "printemps", "été"]
// méthode push() : ajouter une valeur au tableau
saisons.push("automne")

let ville = "Carry-le-Rouet"
// méthode toLowerCase() : renvoie la même chaîne de caractères 
// mais toute en minuscules
console.log(ville.toLowerCase())

On écrit :

  • Le nom de la variable
  • Un point (pour appeler une méthode)
  • Le nom de la méthode, avec ses parenthèses
variable.methode(param1, param2)

Méthodes ≠ attributs

Certains types de variables ont leur propres variables : elles s'appellent attributs 

let saisons = ["hiver", "printemps", "été", "automne"]
// attribut length : taille du tableau
console.log(`Il y a ${saisons.length} saisons`)

let commune = "Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson"
// attribut length : longueur de la chaîne de caractères
console.log(`Nombre maximum de caractères : ${commune.length}`)

On écrit :

  • Le nom de la variable
  • Un point (on va appeler un attribut)
  • Le nom de l'attribut (sans parenthèses)
variable.attribut

Un attribut est lui-même une variable : on peut le lire et parfois le modifier

Deux méthodes et attributs à connaître :

  • document.querySelector() renvoie un élément HTML
  • document.querySelectorAll() renvoie un tableau avec des éléments HTML
  • textContent texte à l'intérieur d'un élément HTML
  • innerHTML code HTML à l'intérieur d'un élément HTML
Exemple : modifier une page web

See the Pen Untitled by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

querySelector() et querySelectorAll() prennent en paramètre une chaîne de caractères avec un sélecteur CSS 

document.querySelector("h1") // le premier élément <h1>
document.querySelectorAll(".info") // tous les éléments avec la classe « info »
document.querySelector("#output") // l'élément avec l'id « output »

En bref

  • Fonction : partie d'un programme réutilisable
  • Peut dépendre de quelques variables (paramètres)
  • Méthodes et attributs : modifier une page

Nous allons faire des fonctions pour réagir aux événements

Événements

Événement action d'un utilisateur sur un élément HTML (ou le navigateur web)

  • Clic, survol, modification d'un texte
  • Changer la taille de la fenêtre, défiler la page
  • Taper sur une touche
Exemple : réagir à un clic

See the Pen Evenements by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Dans une page web, on veut faire X quand l'utilisateur fait Y sur Z

  • X : du code à l'intérieur d'une fonction
  • Y : un événement
  • Z : un élément HTML de la page 
btn.addEventListener('click', montrerClics)

Trois étapes :

  1. Choisir un élément HTML de la page avec document.querySelector()
  2. Associer l'événement à une fonction avec la méthode addEventListener()
  3. Déclarer la fonction

Quelques événements :

  • click clic de la souris
  • focus sélectionner un champs dans un formulaire
  • blur désélectionner un champs dans un formulaire
  • submit soumettre un formulaire
Exemple : click

See the Pen clic by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Exemple : focus/blur

See the Pen focus/blur by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Pour retrouver directement l'élément qui déclenche l'événement :

  • Ajouter un paramètre event dans la fonction
  • L'élément est event.target

Indispensable quand on définit un événement pour plusieurs éléments

Exemple : submit

See the Pen submit by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Utile pour valider un formulaire

Exercice

Quelle option est la correcte ? 

let btn = document.querySelector("button")

// btn.addEventListener("click", coucou())     (1)
// btn.addEventListener("click", coucou)       (2)
// btn.addEventListener("click", "coucou")     (3)

function coucou() {
  let el = document.querySelector("p")
  el.textContent = "Coucou" 
}
 

En bref

  • Événements : réagir aux interactions
  • Couplage élément HTML + événement + fonction

Mais comment modifier une page suite à un événement ?

DOM

DOM = représentation du code HTML sous forme d'arbre.

Les éléments du DOM sont les nœuds, qui ont deux types : élément HTML ou texte.

Relations : enfant, descendant, parent, ancêtre, frères et sœurs (siblings).

Exercice : construire le DOM
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Exemple de DOM</title>
</head>
<body>
  <section>
    <img src="arbre.png" alt="Un arbre dans une forêt">
    <p>
      Voici un lien vers <a href="https://developer.mozilla.org/fr/">MDN</a>
    </p>
  </section>
</body>
</html>

Chaque élément HTML est une variable avec des méthodes (fonctions) et attributs (variables).

Elles permettent de modifier le DOM ⇒ la structure et le contenu de la page

Navigation dans le DOM

On peut

  • Chercher un élément dans le DOM
  • Chercher un élément à l'intérieur d'un autre
  • Chercher un élément qui contient un autre
Exemple

See the Pen Navigation DOM by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Ajouter un élément

See the Pen Ajouter élément by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Créer un élément avec la méthode document.createElement()
  • Définir son texte avec l'attribut textContent
  • L'ajouter à l'intérieur d'un élément avec la méthode appendChild()

Cas particulier : l'élément HTML contient un autre élément HTML

See the Pen Texte et éléments by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

On peut écrire directement le code HTML à l'intérieur d'un élément avec l'attribut innerHTML

Il marche comme textContent, mais il permet d'ajouter du code HTML

Modifier un élément

See the Pen Modifier élément by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Modifier le texte avec l'attribut textContent
  • Définir un attribut avec la méthode setAttribute(nom, valeur)
  • Supprimer un attribut avec la méthode removeAttribute(nom)

Cas particulier : modifier les classes

See the Pen Modifier classes by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

  • Ajouter une classe avec la méthode classList.add()
  • Retirer une classe avec la méthode classList.remove()

Cas particulier : modifier le style

See the Pen setProperty by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Ajouter une propriété CSS avec la méthode style.setProperty(propriété, valeur), où

  • propriété : propriété CSS
  • valeur : valeur de la propriété

Si beaucoup de propriétés à modifier, il vaut mieux utiliser une classe

Supprimer un élément

See the Pen Supprimer élément by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

Exemple : remplir une page

See the Pen Remplir page by Aldo Gonzalez-Lorenzo (@aldogl) on CodePen.

En bref

  • On modifie une page web à travers son DOM
  • Chaque élément a des méthodes et des attributs
  • Certains attributs ont eux-mêmes des méthodes (classList, style)