👾 Atelier-Web ⑦ : Introduction à Javascript

mai

2021

👾 Atelier-Web ⑦ : Introduction à Javascript

Ce billet fait partie d’une série d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prévu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de manière inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Nous avons presque tous les éléments nécessaires à l’affichage de notre projet, sauf que ce que nous voulons c’est pouvoir modifier notre dessin, il faut donc que l’affichage soit « calculer », pour cela nous allons utiliser le langage : JavaScript.

JavaScript est un langage de programmation de scripts que l’on retrouve fréquemment dans les pages Web.

Nous avons vu comment passer de texte de gauche au rendu de droite. Pour cela nous avons utilisé la notion de réécriture de texte, nous avons ajouté en début de ligne l’élément <div class="ligne"> et en fin </div>.

Ensuite, nous avons remplacé les « lettres » par une séquence <span class="CLASSE_COULEUR"></span> (nous avions garder le texte au milieu, mais il n’est plus indispensable).

...............
.....GGGG......
...GG....GG....
..G........G...
.G..........G..
.G..........G..
G.....RR.....G.
GRRRRR..RRRRRG.
G....R..R....G.
G.....RR.....G.
.G..........G..
.G..........G..
..G........G...
...GG....GG....
.....GGGG......

Nous allons reproduire cette approche naïve en Javascript.

ඏ

Le premier code Javascript

Je vous propose de créer un nouveau fichier HTML avec le contenu suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Mon premier Javascrip</title>
</head>
<body>

<h2>Mon premier Javascript</h2>

<button type="button" onclick="document.getElementById('madateheure').innerHTML = Date()">
Cliquez ici pour afficher la date et l’heure.</button>

<p id="madateheure"></p>

</body>
</html>

Mon premier Javascript

Analysons toutes les nouvelles choses, présentes dans cette petite page.

Les nouveautés HTML

D’abord vous noterez la balise ≺button≻ qui permet d’afficher un bouton sur lequel on peut cliquer. Tout ce qui est à l’intérieur de la balise est considéré comme appartenant au bouton.
L’attribut type sur ≺button≻ est, ici, facultatif, il est présent pour des raisons historiques.
L’attribut onclick sur ≺button≻ est notre lien en HTML et Javascript, il indique que le code Javascript qui sera déclenché lors d’un « clique » de l’utilisateur.
L’attribut id sur ≺p≻ défini un identificateur, il contient une valeur ici « madateheure » qui doit être unique dans le document. Cela permet d’identifier un élément de la page HTML. Notez que cet identificateur peut être sélectionné par le code CSS, comme retrouvé par le code Javascript.

Le code Javascript

document.getElementById('madateheure').innerHTML = Date()

document est l’objet qui représente votre page HTML. Cet objet propose de nombreuses méthodes permettant d’interagir avec lui.
getElementById est le nom d’une de cette méthode. La traduction de « get element by Id » est « donne un élément par son identificateur ». Elle prend donc un paramètre ici la chaîne de caractère « madateheure ».

Cela veut dire que :

document.getElementById('madateheure')

retourne l’objet correspondant au code HTML :

<p id="madateheure"></p>

innerHTML est une propriété, présente sur tous les éléments, permettant d'accéder au code HTML contenu à l'interrieur ("inner" voulant dire interrieur en Anglais).
= indique une affectation, cela veut dire que ce qui est à droite du signe égal, sera mis dans ce qui est à gauche.
Date() est une fonction javascript permettant d'obtenir la date et l'heure.

ඏ

Evitons les mélanges...

Comme pour le code CSS, il est conseiller d'écrire le code Javascript en dehors de code HTML.

Nous allons faire cela en deux étapes. Dans un premier temps, nous allons déclarer une balise ≺script≻ dans l'entête du document HTML. 🔳

Pour cela nous allons créer une fonction "afficheHeure()" à l'aide du mot clé function, et l'utiliser dans le code HTML.

Appel d'une fonction dans le code HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Mon premier Javascript</title>
  <script>

function afficheHeure() {
  document.getElementById('madateheure').innerHTML = Date();
}

</script>
</head>
<body>

  <h2>Mon premier Javascript</h2>

  <button type="button" onclick="afficheHeure()">Cliquez ici pour afficher la date et l’heure.</button>

  <p id="madateheure"></p>

</body>
</html>

Mais nous pouvons faire encore mieux en séparant complètement le code Javascript du code HTML. 🔳

Injection du code Javascript dans le code HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Mon premier Javascript (séparation HTML/Javascript)</title>
</head>
<body>

  <h2>Mon premier Javascript (séparation HTML/Javascript)</h2>

  <button id="monbouton">Cliquez ici pour afficher la date et l’heure.</button>

  <p id="madateheure"></p>

<script>

function afficheHeure() {
  document.getElementById('madateheure').innerHTML = Date();
}

/* Equivalent à onclick="afficheHeure()" */
document.getElementById('monbouton').addEventListener( 'click', afficheHeure );

</script>
</body>
</html>

Notez dans cette version que le bouton est déclaré comme suit :

<button id="monbouton"></button>

Que la balise ≺script≻ a été déplacée à la fin de ≺body≻ (juste avant la fin plus précisément).
Et on a ajouté le code équivalent à onclick="afficheHeure() sous la forme :

document.getElementById('monbouton').addEventListener( 'click', afficheHeure );

document.getElementById('monbouton') retrouve le bouton.
addEventListener est une méthode permettant d’écouter les évènements liés à l’élément depuis lequel la méthode est appelée.
addEventListener( 'click', afficheHeure ) précise que l’on souhaite associer l’évènement click à la fonction nommée « afficheheure ».

On a déplacé le code Javascript à la fin car pour parcourir le document avec getElementById. En effet, ce code est exécuté par le navigateur immédiatement, il faut donc être certain que l’élément recherché ait déjà été créé.

ඏ

Références

La propriété display de CSS:
- W3Schools: CSS display Property,
- Documentation Mozilla: Display,
- Gérer l’affichage avec la propriété CSS display.

L’atelier complet

Liste des billets de l'atelier Web.
Le billet suivant.

ᦿ

Vos commentaires

Pas encore de commentaire - ajouter le votre.
Ajouter votre commentaire