Rendre dynamiques vos pages statiques

ENCORE ?

Oui !

Mais cette fois-ci directement dans le navigateur

Le JavaScript vous connaissez ?

Mais je n’aime pas le web moi

Désolé, mais le JavaScript est partout

Bonne nouvelle ! Ce n'est pas que pour le web.

Plusieurs types de JavaScript

• Navigateur (Chrome, Firefox, Safari …)
• Serveur (NodeJS)
• Application (Électron, Cordova …)

Toujours le même langage

Nous allons nous concentrer sur le Web…

Mais ce que vous apprendrez ici est également valide sur les autres plateformes.

Nous avons plusieurs types de JavaScript

Vous en connaissez ?

JavaScript -> EcmaScript…

• ES4
• ES6
• ES2020
• …

Mais encore…

• Chrome
• NodeJS
• Firefox
• IE6 (LOL)

Votre navigateur bouge, évolue

Beaucoup de différences… Donc attention au support !

caniuse.com

Comment coder alors ?

Trois écoles :

• VanillaJS (c'est-à-dire sans aucune librairie)
• Avec jQuery
• Avec un framework (VueJS, React, Svelte)

Comment choisir ?

Et si on souhaite utiliser des librairies ?

C'est simple !

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Pourquoi JavaScript

• Validation de saisie
• Interactivité
• Librairies ou non ? (état des lieux)
• Le cas des animations…

D'ailleurs… Vous le rangez où le JavaScript ?

• Dans le HTML
• Dans des fichiers « externes »

Un conseil de vieux… Créer des librairies / externaliser vos JS.

Des plateformes, des langages…

• CoffeeScript, syntaxe plus concise très utilisée par les utilisateurs de Ruby.
• TypeScript, très populaire, il permet principalement de typer « fortement les données. Il permet de créer du code propre même dans le cas de gros projets complexes. Il est développé par Microsoft. (Très intéressant).
• Kotlin, Kotlin le langage utilisé par la plateforme Android de Google. Le compilateur permet de créer également du code JS à partir de fichier .kt.

Les indispensables pour coder

• Les outils
• La console
• L'IDE

Mettre en pratique

Hello World TP1

Le JavaScript est donc…

Un langage de programmation…

Un langage oui…

Mais faiblement typé !

(voir pas du tout… Enfin, si, mais non)

Ça va bien se passer !

Ne vous inquiétez pas

C'est « un langage » donc…

Quelques rappels

Chaque ligne se termine par un ;

Les commentaires

/**
 * Commentaire multignes
 * Par exemple en début de fichier pour détailler le contenu
 */

// Commenter une ligne.
console.log("Ceci est un exemple");

console.log("Ceci est un exemple 2"); // Peux également être placé en fin de ligne.

Déclarer des variables

var maVariable;
let maVariable;
const maVariable;

• let est similaire à var, c'est la façon moderne de déclarer une variable.
• const est une variable « constante » (impossible donc d'écraser la valeur après déclaration)

<script>
  let entier = 42; //nombre entier
  let reel = 0.42; // nombre réel
  let texte = "texte"; // chaîne de caractères
  let booleen = true; // Un booléen
  let tab = [1, "deux", "trois"]; // tableau
  let obj = { clef1: "valeur", clef2: "Valentin" }; // Tableau associatif (clef => valeur, également appelé objet en JavaScript)
</script>

Attention danger

let entier = 42; //nombre entier
entier = "test";

En JavaScript c'est possible

Attention danger 2

let nom = "Valentin";
nom = "Thomas"; // Pas de problème

let nom = "Romain"; // Erreur.
// VM1498:4 Uncaught SyntaxError: Identifier 'nom' has already been declared

Les constantes

const age_du_capitaine = 84;
age_du_capitaine = 33;

// !! ERREUR !!
// VM1583:2 Uncaught TypeError: Assignment to constant variable.

Cas concret

const IN_PROGRESS = "200";
const DONE = "400";
const FAILED = "1000";

if (order.status == DONE) {
  alert("Commande finalisée");
}

if (order.status == 400) {
  alert("Commande finalisée");
}

Un instant

L'inspecteur d'éléments

Testons « des bidouilleries » en JavaScript

Directement dans la console

• console.log();
• console.table();
• alert();
• Les points d'arrêts
• …

Les fonctions

<script>
  // Déclarer / créer une fonction
  function maFonction() {
    alert("test");
  }

  // Déclarer / créer une fonction
  function maFonctionQuiRetourne42() {
    return 42;
  }
</script>

<script>
  function addition(a, b) {
    return a + b;
  }

  // L'appeler
  maFonction();
  console.log(maFonctionQuiRetourne42()); // Affiche dans la console 42
  alert(addition(40, 2)); // Affiche une alert avec le résultat de l'addition 40 + 2 => 42
</script>

Testons dans la console

Les conditions

<script>
  // Exemple 1
  let age = 18;
  if (age > 18) {
    alert("Je suis majeur");
  } else {
    alert("Je suis mineur");
  }

  // Exemple 2
  let estMajeur = true;
  if (estMajeur) {
    // Est équivalent à estMajeur == true
    alert("La personne est majeur");
  }

  // Exemple 3
  if (maFonctionDeTest() == true) {
    alert(
      "la fonction est appelée, et si celle-ci « return » true l'alert est affiché"
    );
  }
</script>

Testons dans la console

Les boucles

À l'ancienne

<script>
  while (true) {
    console.log("Votre première boucle infinie");
  }

  for (let i = 0; i < 3; i++) {
    alert(i);
  }
<script>

Moderne

<script>
  const arr = [1, 2, 3, 4];

  // Parcours l'ensemble du tableau
  arr.forEach((i) => {
    alert(i);
  });

  // Transforme le tableau
  arrModif = arr.map((i) => {
    return i * 2;
  }); // arrModif contiendra => [2, 4, 6, 8];
</script>

J'attire votre attention sur le côté « Moderne »

• Présent également dans d'autres langages.
• Préférable
• Même si sur Internet vous trouverez « des anciennes versions »

En parlant de moderne…

Filtrer rapidement un tableau

const arr = [1, 2, 3, 4];

arr.filter((curr) => curr > 2); // --> Retourne un tableau avec seulement les valeurs supérieures à 2

Testons dans la console

• Les boucles (ancienne et nouvelles)
• Le filtrage
• …

Le DOM

Vous connaissez ?

Repose sur un arbre appelé

DOM (Document Object Model).

Nous parlerons donc d'un Arbre HTML.

Le DOM

Regardons les devs tools à nouveau

(Vous avez compris que c'était important ?)

Et le JS dans tout ça ?

Manipulation via des sélecteurs (comme en CSS)

• class="rouge" => .rouge
• id="monId" => #monId

Deux façons de faire…

• VanillaJS
• jQuery

VanillaJS « À l'ancienne »

document.getElementById("elementId");
document.getElementsByClassName("maClass");

document.getElementsByTagName("div");

document.body;

VanillaJS « Moderne »

// Retourne la liste (array) des éléments
document.querySelectorAll("#elementId");
document.querySelectorAll(".maClass");
document.querySelectorAll("div");

// Retourn le premier élément trouvé
document.querySelector("#elementId");
document.querySelector(".maClass");
document.querySelector("div");

// Exemples d'utilisations
document.querySelector("#elementId").innerHTML = "Voilà valeur";

document.querySelectorAll("div").forEach((it) => {
  it.innerHTML = "Parcours chaque div et remplace le contenu par <=";
});

jQuery

$("#elementId");
$(".maClass");
$("div");

Créer des éléments dans la page

Créer des éléments

Créer des éléments dans la page (bis)

Encore plus simple

⚠️ Cette solution peut sembler tentante… ⚠️

Mais attention, si la valeur ajoutée contient une saisie utilisateur, vous risquez une XSS sur votre site Internet.

Donc méfiance.

Manipuler les apparences

Ici aussi plusieurs façons :

• le style.
• les class.

// Le style
let element = document.getElementById("monId");
element.style.display = "none";

// La class
let element = document.getElementById("monId");
element.classList.add("maClass");

// Avec jQuery
$("div").hide();
$("div").css("background-color", "yellow");
$("div").addClass("maClass");

Assez parlé… Mise en pratique 🚀

Manipulation du DOM

Obtenir les valeurs saisie dans la page

<input type="text" id="monInput" />

// VanillaJS
document.getElementById("monInput").value;

// En jQuery
$("#monInput").val();

Un peu de CSS, de HTML… Et de JavaScript

TP − Le Générateur de punition

Les évènements

Réagir aux interactions de l'utilisateur… Mais pas que !

• Au click.
• Au submit (form).
• Au resize (du navigateur)
• Au NFC
• Au GPS

Deux façons d'attacher les events:

• Dans le dom
• En JavaScript

Dans le DOM

En JavaScript

<input type="button" id="btn" value="Click ! " />

<script>
  // Pure JS
  document.getElementById("btn").addEventListener("click", maFonction, true);

  // jQuery
  $("#btn").click(maFonction);
</script>

<input type="button" onclick="maFonction(this)" value="Click ! " />

<script>
  function maFonction(elem) {
    // elem => est le bouton sur lequel vous avez cliqué
  }
</script>

Le this corresponds à l'élément sur lequel vous avez cliqué.

(Appelé au moment du clique par l'utilisateur utilisateur)

Simple ? Compliqué ?

En réalité, comme beaucoup de choses du WEB la pratique vous donnera l'habitude de manipuler le JS. Il deviendra pour vous une véritable seconde nature.

C'était un simple exemple… La liste des évènements possibles bien plus longue !

Mise en pratique

Mettre en pratique la gestion d'évènements

Mise en pratique 2

Mettre en pratique la gestion d'évènements

L'Ajax

Incontournable

Incontournable

Repose sur du code asynchrone

Pouvez-vous me dire à quoi ça correspond ?

var resultat = "";

ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});

console.log(resultat);

• Pouvez-vous me dire ce que va afficher le console.log() ?

Deux façons de faire :

• VanillaJS (fetch, Promise)
• jQuery ($.get, $.post)

Les promises

L'Ajax c'est un gros morceau, tellement gros, qui serait possible d'y passer des heures et des heures tellement le sujet est vaste.

Nous allons donc réaliser une première expérimentation

Allons plus loin

• VueJS
• ReactJS
• Svelte

Allons plus loin