Code et programmation

Front-end - Rendre le Web vivant (JavaScript)

Master Information-Communication Ecosystèmes médiatiques et transition numérique - ICP 2025

Objectifs

✅ Comprendre le rôle de JavaScript en tant que troisième pilier du développement front-end
 

✅ Découvrir la syntaxe de base de JavaScript : variables, conditions

 

✅ Apprendre à manipuler le DOM : sélectionner des éléments HTML et réagir à des événements (comme le clic)

 

✅ Écrire un premier script simple pour modifier dynamiquement le contenu de la page

JS, pour quoi faire ?

HTML est le squelette (contenu), CSS est l'habillage (style)

JS est le système nerveux : il permet l'action et l'intéraction

 

  • Réagir aux événements : click, saisie clavier, mouvement de souris...
     
  • Modifier dynamiquement le contenu : créer/modifier/supprimer des éléments de la page
     
  • Modifier dynamiquement le style : ajouter/supprimer une classe sur un élément...
     
  • Récupérer des données auprès d'un serveur sans recharger la page
<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Lier un fichier JS à un document HTML

La console du navigateur

Dans votre navigateur, appuyez sur la touche F12. Vous aurez accès aux outils de développement. Parmi ceux-ci, la "console" vous permet de voir les messages d'erreur liés au JS, mais aussi d'exécuter du code pour faire des tests

Firefox

Chrome

Essayez de taper `console.log("Hello world")` dans la console

// Déclaration de la variable
let myVariable

// Affectation d'une valeur
myVariable = "Hello, world !"

// Déclaration et affectation
let myFirstVar = "Hello"

// Réassignation de la valeur d'une variable
let myVariable = "Hello world !"
myVariable = "Vous voulez un whisky ?"

Les variables (1)

// Déclaration et affectation
const myVariable = "Hello, world !"

const hello = "Hello world !"
hello = "Vous voulez un whisky ?"
// => ReferenceError
// Impossible de réaffecter une constante

Les variables (2)

Les types de données

JS est un langage à typage dynamique et faible.

Le type d'une variable est donc :

  • définit à l'exécution, en fonction de la donnée qui est stockée dedans
  • potentiellement variable au cours du temps (réassignation d'une variable avec une donnée dont le type est différent de la précédente)

🔗 Type (informatique)

const integer = 8000
const decimal = 123.456

// addition
8000 + 42 // => 8042
// soustraction
8000 - 42 // => 7958
// multiplication
13 * 37 // => 481
// division
8000 / 42 // => 190.476190476
// exponentiation
2 ** 3 // => 8 (2 puissance 3, quoi)

8000 / 0 // => Infinity
-8000 / 0 // => -Infinity
"Everything but a number" / 8000 // => NaN
"Everything but a number" / 8000 + 42 // => NaN

Number

"Hello, world !"
'Hello, world !'
`Hello, world !`

const who = "world";
"Hello, " + who + " !"
`Hello ${who} !`
// => "Hello, world !"

`The result of 1 + 1 is ${1 + 1}`
// => "The result of 1 + 1 is 2"

String

const ok = true
const notOk = false

Boolean

null / undefined

const nullValue = null

let undefinedValue
console.log(undefinedValue) // => undefined

const explicitUndefined = undefined

🔗 undefined vs null revisited

const me = {
  firstname: "Cyrille",
  age: 28
}

me.firstname // => "Cyrile"
me.age // => 28

me.firstname = "George"
me.firstname // => "George"

me.job = "developer and teacher"
me.job // "developer and teacher"

Object

Structures conditionnelles

const name = prompt("What's your name ?")

if (name === "Cyrille") {
  alert("Me too !")
} else if (name === "Toto") {
  alert("Srsly?")
} else {
  alert(`Hello ${name} !`)
}
10 < 20 // => true
10 <= 20 // => true
20 > 10 // => true
20 >= 10 // => true
20 == 20 // => true
10 != 20 // => true

"hello" == "hello" // => true
"hello" != "world" // => true

Comparaison (1)

10 == "10" // => true
20 != "20" // => false

Comparaison (2)

😱

10 === "10" // => false
20 !== "20" // => true

🤗

Privilégier les opérateurs stricts (=== et !==) pour éviter la conversion implicite de type

🔗 Type coercion

🔗 JS Comparison Table

true && true // => true
true && false // => false

true || true // => true
true || false // => true
false || false // => false

!true // => false
!false // => true

Opérateurs logiques

let i = 0
while (i < 10) {
  console.log(i)
  ++i
}

let j = 0
do {
  console.log(j)
  ++j
} while (j < 10)

for (let k = 0; k < 10; ++k) {
  console.log(k)
}

// => 0 1 2 3 4 5 6 7 8 9

Boucles

Fonctions

const addTwoNumbers = (number1, number2) => {
  return number1 + number2
}

addTwoNumbers(8000, 42) // => 8042

Fonctions (1)

const sayHello = (who = "World") => {
  return `Hello ${who}`
}

sayHello("Tom") // => Hello Tom
sayHello() // => Hello World

Fonctions (2)

La valeur par défaut d'un paramètre est utilisée si ce paramètre reçoit la valeur undefined (explicitement ou implicitement)

🔗 ES6, ES2015 : les valeurs par défaut des arguments

Tableaux

const emptyArray = []

const animals = ["cat", "dog", "mouse"]
animals[0] // => "cat"
animals[1] // => "dog"
animals[2] // => "mouse"
animals.length // => 3

animals[1] = "parrot"

animals.push("rat")
// => ["cat", "parrot", "mouse", "rat"] (modifie le tableau)

[...animals, "rat"]
// => ["cat", "parrot", "mouse", "rat"] (crée un nouveau tableau)

["rat", ...animals]
// => ["rat", "cat", "parrot", "mouse"] (crée un nouveau tableau)

animals.slice(0, 2)
// => ["cat", "parrot"] (nouveau tableau)
const fruits = ["Apple", "Banana", "Strawberry"]

for (let i = 0, length = fruits.length; i < length; ++i) {
  console.log(fruits[i])
}

for (let fruit of fruits) {
  console.log(fruit)
}

fruits.forEach((fruit) => console.log(fruit))
// => "Apple" "Banana" "Strawberry"

fruits.map((fruit) => fruit.toUpperCase())
// => ["APPLE", "BANANA", "STRAWBERRY"] (nouveau tableau)

🔗 Array methods

Manipuler le contenu de la page avec le DOM

Le DOM : définition

Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation.

🔗 Référence du DOM

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon super site</title>
  </head>
  <body>
    <h1>Bienvenue sur mon super site</h1>
    <p>Ceci est un paragraphe</p>
    <div>Et ceci est une div</div>
  </body>
</html>

html
head
meta
body
title
text
h1
p
text
text
div
text

Réprésentation sous forme d'abre

Il y a un inspecteur de DOM dans les outils de développement de votre navigateur (F12 ou CTRL+SHIFT+I)

🔗 Firefox Devtools - Page Inspector

🔗 Chrome Devtools - DOM

  • Modifier des éléments présents sur la page
    • Contenu, style, attributs...
  • Supprimer des éléments présents sur la page
  • Ajouter des éléments à la page

A quoi sert le DOM ?

Rechercher des éléments dans le DOM

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon super site</title>
  </head>
  <body>
    <h1>Hello world</h1>
    <p>
      Ceci est un paragraphe
    </p>
    <div>Ceci est une div</div>
  </body>
</html>

Rechercher des élément dans le DOM (1)

Rechercher des élément dans le DOM (2)

html
head
meta
body
title
text
h1
p
text
text
div
text

L'objet `document` nous donne des références directes vers certains éléments clef du DOM

document.documentElement
document.body
document.head

🔗 Document - MDN

<body>
<html>
<head>
<h1>
<p>
<div>

parentNode

parentNode

firstChild

parentNode

firstChild

parentNode

lastChild

parentNode

lastChild

nextSibling

previousSibling

nextSibling

previousSibling

Rechercher des élément dans le DOM (3)

Les éléments ont des liens les uns avec les autres

Rechercher des élément dans le DOM (5)

On connait déjà un mécanisme de "ciblage" des éléments HTML : les sélecteurs CSS. Et si on pouvait réutiliser cette syntaxe pour cibler des éléments en JS ?

document.querySelector(sélecteur CSS)

Permet de récupérer le premier élément correspondant au sélecteur CSS passé en paramètre (ou null si aucun ne correspond)

document.querySelectorAll(sélecteur CSS)

Permet de récupérer une liste contenant tous les éléments correspondants au sélecteur CSS passé en paramètre

Rechercher des élément dans le DOM (6)

<body>
<div>
<div>
const div = document.querySelector("div:nth-child(2)")

// => <div></div>
<body>
<div>
const divs = document.querySelectorAll("div")

// => NodeList [2 items]
<div>

🔗 document.querySelector

🔗 document.querySelectorAll

querySelector et querySelectorAll peuvent être appliqués au document ou sur un élément :

const element = document.querySelector(".js-element")
const subelement = element.querySelector(".js-subelement")

Modifier un élément du DOM

Récupérer / modifier le contenu d'un élément

<p>
  Lorem <strong>ipsum</strong> dolor
  sit amet consectetur adipiscing
</p>
const p = document.querySelector("p")

p.innerHTML
// => "Lorem <strong>ipsum</strong> dolor sit amet consectetur adipiscing"

p.innerHTML = "Lorem <em>ipsum</em> dolor"

Récupérer/modifier le contenu d'un élément (1)

🔗 Element.innerHTML

<p>
  Lorem <strong>ipsum</strong>
  <span style="display: none;">hidden text</span>
  dolor sit amet consectetur adipiscing
</p>
const p = document.querySelector("p")

p.innerText
/*
 Lorem ipsum dolor sit amet consectetur adipiscing
*/

p.innerText = "Lorem <em>ipsum</em> dolor"

Récupérer/modifier le contenu d'un élément (3)

🔗 Node.innerText

<p>
  Lorem <strong>ipsum</strong> <span style="display: none;">hidden text</span>
  dolor sit amet consectetur adipiscing
</p>
const p = document.querySelector("p")

p.textContent
/*
Lorem ipsum hidden text dolor sit amet consectetur adipiscing     
*/

p.textContent = "Lorem <em>ipsum</em> dolor"

Récupérer/modifier le contenu d'un élément (4)

🔗 Node.textContent

Récupérer / modifier des attributs d'un élément

<input
  id="login"
  name="login"
  placeholder="Enter your login"
/>
const input = document.querySelector("#login")

input.id // => "login"
input.name // => "login"
input.placeholder // => "Enter your login"

input.id = "login-field"
// <input id="login-field" ... />

Récupérer / modifier des attributs d'un élément (1)

Modifier le style d'un élément

<p class="alert alert-error">
  Une erreur est survenue
</p>
const alert = document.querySelector(".alert")

for(const className of alert.classList) {
  console.log(className)
}
// => "alert" "alert-error"

alert.classList.contains("alert-error")
// => true

alert.classList.remove("alert-error")
// => class="alert"

alert.classList.add("alert-warning")
// => class="alert alert-warning"

alert.classList.toggle("alert-warning")
// => class="alert"

alert.classList.toggle("alert-warning")
// => class="alert alert-warning"

alert.classList.toggle("alert-warning", someBoolean)

Manipuler les classes d'un élément

🔗 Element.classList

<p style="font-size: 3rem; color: red;">
  Une erreur est survenue
</p>
const alert = document.querySelector("p")

alert.style.fontSize // => "3rem"

alert.style.color // => "red"

alert.style.fontSize = "2rem"
// => style="font-size: 2rem; color: red"

alert.style.backgroundColor = "white"
// => style="font-size: 3rem; color: red; background-color: white;"

Manipuler le style inline d'un élément

🔗 HTMLElement.style

Ajouter un nouvel élément dans le DOM

const item = document.createElement("li")
item.textContent = "Lorem ipsum"

Créer un nouvel élément

Une fois l'élément créé, on a l'objet en mémoire, mais il n'est pas automatiquement inséré dans le DOM : le navigateur ne peut pas savoir où on souhaite qu'il apparaisse

🔗 Document.createElement()

Insérer un nouvel élément (1)

<ul class="js-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>ITem 3</li>
</ul>
const list = document.querySelector(".js-list")

const newItem = document.createElement("li")
newItem.textContent = "Item 0"
newItem.style.color = "red"

list.prepend(newItem)

🔗 ParentNode.prepend()

Insérer un nouvel élément (2)

<ul class="js-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>ITem 3</li>
</ul>
const list = document.querySelector(".js-list")

const newItem = document.createElement("li")
newItem.textContent = "Item 4"
newItem.style.color = "red"

list.append(newItem)

🔗 ParentNode.append()

Insérer un nouvel élément (3)

<ul class="js-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>ITem 3</li>
</ul>
const list = document.querySelector(".js-list")

const secondItem = list.querySelector(":nth-child(2)")

const newItem = document.createElement("li")
newItem.textContent = "Item 2bis"
newItem.style.color = "red"

secondItem.after(newItem)

🔗 ChildNode.after()

Insérer un nouvel élément (4)

<ul class="js-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>ITem 3</li>
</ul>
const list = document.querySelector(".js-list")

const thirdItem = list.querySelector(":nth-child(3)")

const newItem = document.createElement("li")
newItem.textContent = "Item 2bis"
newItem.style.color = "red"

thirdItem.before(newItem)

🔗 ChildNode.before()

Remplacer un élément

<ul class="js-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>ITem 3</li>
</ul>
const list = document.querySelector(".js-list")

const thirdItem = list.querySelector(":nth-child(3)")

const newItem = document.createElement("li")
newItem.textContent = "Item 3 replaced"
newItem.style.color = "red"

thirdItem.replaceWith(newItem)

🔗 ChildNode.replaceWith()

Supprimer un élément

Supprimer un élément

<ul class="js-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>ITem 3</li>
</ul>
const list = document.querySelector(".js-list")

const thirdItem = list.querySelector(":nth-child(3)")

thirdItem.remove()

🔗 ChildNode.remove()

Un événement : qu'est-ce que c'est ?

Un événement, c'est quand il se passe quelque chose...

... sur un élément

  • click/ mouseover / mouseout /mousemove
  • focus / blur
  • submit
  • keydown / keyup

... sur le document

  • DOMContentLoaded         

... sur le style d'un élément

  • transitionend                     

... sur des requêtes réseau

  • onload, onerror...

🔗 Référence des événements

Comment réagir à un événement ?

const onClick = () => console.log("You clicked!")

element.addEventListener(
  "click", // Type de l'événement
  onClick // Fonction à exécuter
)

Ajouter un gestionnaire d'événements à un élément du DOM

Pour pouvoir réagir à un événement, il nous faut :

  • un élément sur lequel écouter les événements
  • un type d'événement auquel on veut réagir
  • une fonction qui décrit ce qu'on veut faire lorsque l'événement est déclenché

🔗 EventTarget.addEventListener

Exemple : event click

Exemple : plusieurs gestionnaires d'événement sur un élément

Arrêter un gestionnaire d'événements

Arrêter un gestionnaire d'événements (1)

Pour arrêter un gestionnaire d'événements sur un élément, on a besoin de :

  • l'élément sur lequel le gestionnaire est actif
  • le type d'événement pour lequel on veut supprimer un gestionnaire
  • la fonction associée au gestionnaire
const onClick = () => console.log("You clicked!")

element.addEventListener("click", onClick)

element.removeEventListener("click", onClick)

🔗 EventTarget.removeEventListener

Arrêter un gestionnaire d'événements (2)

Accéder aux propriétés d'un événement avec l'objet Event

L'objet Event

Lorsqu'une fonction associée à un gestionnaire d'événement est exécutée, elle reçoit automatiquement en premier paramètre un objet représentant l'événement déclenché

const element = document.querySelector(".js-element")

const onClick = (event) => {
  console.log(event.type)
  console.log(event.target)
  console.log(event.currentTarget)
  console.log(event.clientX)
  console.log(event.clientY)
}

element.addEventListener("click", onClick)

🔗 Event

Exemple : les propriétés de l'objet Event

03 - Front-end - JS

By Cyrille Perois

Made with Slides.com

03 - Front-end - JS

  • 55

More from Cyrille Perois