Découvrir JavaScript

Objectifs

Savoir associer un programme JavaScript à une page HTML
Connaître la syntaxe de base de JavaScript
Savoir sélectionner un élément de la page en fonction de ses attributs id ou class et associer un comportement lorsqu'on interagit avec celui-ci (par exemple afficher une fenêtre de dialogue lorsqu'un utilisateur clic sur un élément de la page)
Savoir modifier un élément de la page lorsqu'un événement se produit (par exemple le cacher lorsqu'on clique dessus)

Associer un JS à une page HTML

Définition : JavaScript

JavaScript est un troisième langage qui vient compléter HTML et CSS. Un programme JavaScript (JS) est un fichier qui peut être associé à une page HTML afin de permettre la programmation des interactions avec l'utilisateur.

Il permet notamment de :

réagir à des événements produits par l'utilisateur, par exemple afficher un message lorsqu'il appuie sur une touche du clavier,
modifier la page affichée, par exemple masquer un div HTML lorsque l'utilisateur clique dessus.

Syntaxe :

On peut déclarer dans une page HTML quel fichier JS utiliser en mobilisant l'élément <script src="script.js" defer></script> dans la partie head.

<!DOCTYPE html>
<html lang="fr">
    <head>
      <title>...</title>
      <meta charset="utf-8">
      <script src="script.js" defer></script>
    </head>
    <body>
      ...
    </body>
</html>

Exemple : Fichier script.js

// Select an element in the HTML page
let p = document.querySelector('p.say-hello')
// Link the event "click" to the function "sayHello" on the element "p.say-hello"
p.addEventListener('click', sayHello)
// Code to execute when element "p.say-hello" is clicked
function sayHello() {
  alert('Hello World')
}

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
      <title>Say Hello</title>
      <meta charset="utf-8">
      <script src="script.js" defer></script>
    </head>
    <body>
      <h1>JavaScript</h1>
      <p>JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. </p>
      <p>Le standard pour JavaScript est ECMAScript. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1.</p>
      <p class="say-hello"><b>Cliquez-moi pour dire bonjour</b></p>
      <p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">[source]</a></p>
    </body>
</html>

Complément : Tester le programme

Complément : Découvrir JavaScript sur MDN

https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps

Changeling

Le fichier JavaScript ci-après permet :

d'afficher une bordure autour d'un div doté d'une classe main lorsque la souris passe dessus,
et de la supprimer lorsqu'on retire la souris.

let p = document.querySelector('div.main')
p.addEventListener('mouseover', addBorder)
p.addEventListener('mouseout', removeBorder)
function addBorder() {
  this.style.border = 'solid'
}
function removeBorder() {
  this.style.border = 'none'
}

Réaliser un fichier HTML qui affiche cet extrait de la chanson The Changeling des Doors.

I'm a Changeling
See me change
I'm a Changeling
See me change

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exercice</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="main">
      <p>I'm a Changeling</p>
      <p>See me change</p>
      <p>I'm a Changeling</p>
      <p>See me change</p>
    </div>
  </body>
</html>

Les bases de la syntaxe JS

JavaScript est un langage interprété, c'est à dire un langage qui est exécuté par un autre programme : l'interpréteur.

L'interpréteur fonctionne de la façon suivante :

il lit une ligne de code, l'analyse, l'exécute si elle est correcte et passe à la suivante ;
il répète ce processus pour chaque instruction du programme.

Définition : Instruction

Une instruction est une ligne de code qui effectue une action : un affichage, un calcul, etc.

Les instructions sont exécutées séquentiellement, c'est-à-dire dans l'ordre et une par une.

Définition : Variables

Une instruction peut utiliser des variables, des objets auxquels on peut attribuer une valeur (un nom, une date, un nombre, etc.) et que l'on déclare avec le mot clé let. Sa valeur peut changer au cours du programme.

Syntaxe : Déclaration de variables en JavaScript

let month = 'Avril'
let dat = 12

Définition : Expression

Une expression est un morceau de code qui produit un résultat, par exemple une addition. Le résultat d'une expression peut être stockée dans une variable.

Exemple : Instruction avec expression

let sum = 5 + 6 

Définition : Fonctions

Une fonction est un morceau de code qu'un autre morceau de code peut appeler.

Les fonctions servent notamment à ne pas réécrire le code si on l'utilise plusieurs fois dans le programme..

Exemple : Fonction d'affichage

Pour afficher des choses dans la console, on utilise la fonction prédéfinie console.log().

console.log('Hello World')
console.log(4)

Fondamental : Règles de syntaxe

Le JavaScript impose :

d'aller à la ligne entre deux instructions ;
de respecter la casse, c'est à dire les majuscules et minuscules (console.Log() n'équivaut pas à console.log()) ;
de respecter les espaces (le nom d'une variable ne peut pas en contenir, en revanche elles sont nécessaires après des mots clés comme let).

Exemple :

const hello = 'Hello'
const world = 'World'
console.log(hello, world)

Complément : camelCase

La convention de casse utilisée en JavaScript est le camelCase.

Complément : Exécuter du JavaScript dans un navigateur

On peut exécuter du JavaScript dans la console web du navigateur :

sur Chrome : Clic droit > Inspecter ou Ctrl+Shift+i, puis onglet Console,
sur Firefox : Clic droit > Examiner l'élément ou Ctlr+Shift+k, puis onglet Console.

On peut alors exécuter du code dans le champ de la console.

Complément : Repl.it

Il existe des interpréteur JavaScript en ligne, comme Repl.it.

Calculate

Soit les fichiers HTML et JS suivants permettant d'effectuer des additions.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exercice</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <div><label>x : </label><input id="x"/></div>
    <div><label>y : </label><input id="y"/></div>
    <div>x + y = <span id="xy"/>?<span></div>
  </body>
</html>

let inputX = document.querySelector('#x')
let inputY = document.querySelector('#y')
let spanXY = document.querySelector('#xy')
inputX.addEventListener('change', calculate)
inputY.addEventListener('change', calculate)
function calculate() {
  let x = parseInt(inputX.value)
  let y = parseInt(inputY.value)
  spanXY.textContent = x + y
}

Faites fonctionner le programme.

Écrivez une page web et un programme JS qui permettent de calculer, à partir d'un rayon : le diamètre, le périmètre et la surface du cercle, ainsi que le volume de la sphère.

Interagir avec les événements

JavaScript permet de capter les événements qui se produisent en interaction à la page HTML et d'exécuter des fonctions lorsqu'ils se déclenchent.

Rappel :

Il est possible d'associer un attribut class et/ou id aux éléments HTML, afin de les identifier :

Attribut class
Attribut id

Méthode : Identifier un élément avec document.querySelector

On peut stocker dans une variable l'adresse d'un élément HTML que l'on aura trouvé avec la fonction querySelector.

// Identify an element with a class
let element1 = document.querySelector('element1.class1')
// Identify an element with an id
let element2 = document.querySelector('element1#id1')

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
      <title>Say Hello</title>
      <meta charset="utf-8">
      <script src="script.js" defer></script>
    </head>
    <body>
      <h1>JavaScript</h1>
      <p id="first-p">JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. </p>
      <p>Le standard pour JavaScript est ECMAScript. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1.</p>
      <p class="say-hello"><b>Cliquez-moi pour dire bonjour</b></p>
      <p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">[source]</a></p>
    </body>
</html>

let p1 = document.querySelector('#first-p')
let p2 = document.querySelector('p.say-hello')
alert(p1.textContent)
alert(p2.textContent)

Méthode : Associer un événement avec addEventListener.

On peut associer des événements à des éléments HTML avec la fonction addEventListener.

// Call function1 when element1 receive event1
element1.addEventListener('event1', function1)

Exemple :

let p1 = document.querySelector('#first-p')
let p2 = document.querySelector('p.say-hello')
let body = document.querySelector('body')
p1.addEventListener('dblclick', printP1)
p2.addEventListener('click', sayHello)
body.addEventListener('keypress', printBody)
function sayHello() {
  alert('Tu as cliqué sur moi.')
}
function printP1() {
  alert('Merci de ne pas trop cliquer sur moi...')
}
function printBody() {
  alert('Hey, pas avec le clavier !')
}

<!DOCTYPE html>
<html lang="fr">
    <head>
      <title>Say Hello</title>
      <meta charset="utf-8">
      <script src="script.js" defer></script>
    </head>
    <body>
      <h1>JavaScript</h1>
      <p id="first-p">JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. </p>
      <p>Le standard pour JavaScript est ECMAScript. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1.</p>
      <p class="say-hello"><b>Cliquez-moi pour dire bonjour</b></p>
      <p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">[source]</a></p>
    </body>
</html>

Complément : Quelques événements classiques

click, dblclick : quand l'utilisateur clique sur la souris
mouseover, mouseout : quand l'utilisateur passe au entre et sort d'un élément avec sa souris
keypress : quand l'utilisateur appuie sur une touche du clavier
change : quand un élément HTML change de valeur (par exemple un élément d'un formulaire)
load : quand la page HTML est totalement chargée

Complément : Tous les événements JavaScript

https://developer.mozilla.org/fr/docs/Web/API/event

Complément : Pour récupérer l'événement dans la fonction

element1.addEventListener('event1', (e) => function1(e))

Complément : Pour passer d'autres paramètres à la fonction

element1.addEventListener('event1', (e) => function1(e, x))

Ping pong

Compléter le programme JS ci-après afin qu'il ait comme comportement :

lorsque l'on clique sur Ping alors le cadre Ping s'allume en rouge et le cadre Pong d'éteint en noir
lorsque l'on clique sur Pong alors le cadre Pong s'allume en rouge et le cadre Ping d'éteint en noir

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exercice</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="ping">Ping</div>
    <div></div>
    <div class="pong">Pong</div>
  </body>
</html>

body {
  display: flex;
}
div {
  flex: 1;
}
.ping, .pong {
  flex: 1;
  font: 300% sans-serif;
  text-align: center;
  background-color: #d1d1d1;
  border-style: dotted;
}

// something missing here...
ping.addEventListener('click', playPing)
pong.addEventListener('click', playPong)
function playPing() {
  ping.style.color = 'red'
  pong.style.color = 'black'
}
function playPong() {
  //TODO
}

let ping = document.querySelector('.ping')
let pong = document.querySelector('.pong')
ping.addEventListener('click', playPing)
pong.addEventListener('click', playPong)
function playPing() {
  ping.style.color = 'red'
  pong.style.color = 'black'
}
function playPong() {
  ping.style.color = 'black'
  pong.style.color = 'red'
}

Modifier dynamiquement la page

Manipuler la page HTML avec le DOM

Avec JavaScript, la structure de la page est représentée par un arbre appelé DOM (pour Document Object Model), qui décrit la hiérarchie des balises au sein du document.

JavaScript fournit des fonctions pour manipuler les éléments du DOM. Par exemple, la méthode document.querySelector('h1') renvoie le premier élément h1 de la page, que l'on pourra lire ou modifier.

Exemple :

let element1 = document.querySelector('#first-p')
element1.textContent = 'Here I am'
element1.style.color = 'green'

Méthode :

Il est possible de combiner les actions sur le DOM avec les événements afin de créer une page interactive.

Exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
      <title>Say Hello</title>
      <meta charset="utf-8">
      <script src="script.js" defer></script>
    </head>
    <body>
      <h1>JavaScript</h1>
      <p id="first-p">JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. </p>
      <p>Le standard pour JavaScript est ECMAScript. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1.</p>
      <p class="say-hello"><b>Cliquez-moi pour dire bonjour</b></p>
      <p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">[source]</a></p>
    </body>
</html>

let p1 = document.querySelector('#first-p')
let p2 = document.querySelector('p.say-hello')
p1.addEventListener('click', hideMe)
p2.addEventListener('click', displayHello)
function hideMe() {
  this.hidden = true
}
function displayHello() {
  this.textContent = 'Salut Monde'
}

Cards

Soit les trois fichiers HTML, CSS et JS suivants.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exercice</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <section class="cards"></section>
    <button id="add">Ajouter</button>
  </body>
</html>

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 20px;
}
div {
  padding: 70px 50px;
  margin: 20px;
  border-radius: 5%;
  color: white;
  font-weight: bold;
}
.green {
  background: green;
}
.blue {
  background: blue;
}
.red {
  background: red;
}
.yellow {
  background: yellow;
}
button {
  background: white;
  border: solid 1px black;
  padding: 10px;
  border-radius: 10px;
}

// Add a card to the section
function add() {
  const colors = ["green", "red", "yellow", "blue"]
  const cards = document.querySelector(".cards");
  const num = Math.trunc(Math.random() * 9);
  const randomColor = Math.trunc(Math.random() * 4);
  const newCard = document.createElement("div");
  newCard.classList = colors[randomColor];
  newCard.innerText = num;
  newCard.addEventListener('click', hide)
  cards.appendChild(newCard);
}
// This lazy function does nothing
function hide() {
  // Empty function
}
// Call function add once to display first card
add()
// When button is clicked, function add is called
button = document.querySelector('#add')
button.addEventListener('click', add)

Enregistrez et faites fonctionner ces fichiers.

Modifier le code JavaScript afin de permettre d'effacer une carte lorsque l'on clique dessus.

Il suffit de modifier la fonction hide() qui est appelée lorsqu'on clique sur une carte.

function hide() {
  this.hidden = true
}

Découvrir JavaScript

Objectifs

Associer un JS à une page HTML

Définition : JavaScript

Syntaxe :

Exemple : Fichier script.js

Exemple :

Complément : Tester le programme

Complément : Découvrir JavaScript sur MDN

Changeling

Les bases de la syntaxe JS

Définition : Instruction

Définition : Variables

Syntaxe : Déclaration de variables en JavaScript

Définition : Expression

Exemple : Instruction avec expression

Définition : Fonctions

Exemple : Fonction d'affichage

Fondamental : Règles de syntaxe

Exemple :

Complément : camelCase

Complément : Exécuter du JavaScript dans un navigateur

Complément : Repl.it

Calculate

Interagir avec les événements

Rappel :

Méthode : Identifier un élément avec document.querySelector

Exemple :

Méthode : Associer un événement avec addEventListener.

Exemple :

Complément : Quelques événements classiques

Complément : Tous les événements JavaScript

Complément : Pour récupérer l'événement dans la fonction

Complément : Pour passer d'autres paramètres à la fonction

Ping pong

Modifier dynamiquement la page

Manipuler la page HTML avec le DOM

Exemple :

Méthode :

Exemple :

Cards

L'attribut Class

Rappel :

Syntaxe :

Exemple :

Définition :

Syntaxe :

Exemple :

Remarque :

Complément : Kebab Case

Compléments

Syntaxe : Associer un style à un élément unique (attribut id)

Complément : Aller plus loin avec les sélecteurs

Syntaxe : Gérer les unités de longueur

Complément : Comprendre la gestion des unités

Complément : Aller plus loin avec les polices

Attention : Il est déconseillé d'utiliser des tableaux pour gérer la mise en page

Méthode : Disposition spatiale

Complément : Zen Garden (des exemples avancés)