2021-2022
Une introduction à l’utilisation du langage javascript dans une page HTML.
Une page HTML est statique par défaut. Cela signifie que dès que le navigateur a interprété le code HTML, CSS, l’utilisateur ne peut pas interagir avec le contenu de la page. Pour pouvoir interagir on utilise le langage javascript.
Le langage javascript est interprété et exécuté par le navigateur. Au chargement de la page HTML, s’il y a un lien vers un fichier contenant du javascript. Le contenu du fichier est interprété et exécuté par le navigateur.
Pour pouvoir ajouter du code javascript à la page HTML, on utilise 2 méthodes :
en utilisant la balise <script> avec le code à l’intérieur
<script type="text/javascript">
// Mon code Javascript
...
</script>en utilisant la balise <script> qui contient un lien vers un fichier extérieur (solution à privilégier)
<script type="text/javascript" src="monscript.js"></script>La position de la balise <script> dans le fichier HTML est importante. En effet, sans autre précision, le navigateur va lire le contenu du fichier ou du code javascript dès qu’il le rencontre de façon séquentielle. S’il y a une erreur de syntaxe, le reste du fichier risque de ne pas être chargé. Si le fichier est gros cela risque de retarder le chargement de la page
Pour éviter ces inconvénients on peut ajouter un attribut à la balise <script> :
defer : permet d’indiquer au navigateur que le script doit être exécuté après l’analyse du document et avant l’évènement DOMContentLoaded (qui est déclenché après le chargement complet de la page).
<script type="text/javascript" defer src="monscript.js"></script>async : indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone.
<script type="text/javascript" async src="monscript.js"></script>Comme nous l’avons déjà évoqué, le navigateur stocke en mémoire une représentation de la page HTML en utilisant le DOM (Document Object Model). Le langage javascript va utiliser le DOM pour repérer des éléments dans la page HTML.
Nous allons reprendre l’exemple utilisé dans la documentation MDN qui consiste à faire découvrir un nombre compris en 1 et 100 par l’utilisateur.
Voici le code HTML qui permet à l’utilisateur d’interagir :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le jeu du nombre mystère</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult {
color: white;
padding: 3px;
}
</style>
<script type="text/javascript" async src="js/jeu.js"></script>
</head>
<body>
<h1>Le jeu du nombre mystère</h1>
<p>Nous avons généré un nombre entre 1 et 100. Tentez de le découvrir en moins de 10 coups. Nous indiquerons si votre proposition et trop grande ou trop petite.</p>
<div class="form">
<label for="guessField">Votre proposition: </label>
<input type="text" id="guessField" class="guessField">
<input type="submit" value="Soumettre" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
</body>
</html>Soit le code contenu dans le fichier jeu.js (version finale du jeu) dans le répertoire js :
let randomNumber = Math.floor(Math.random() * 100) + 1;
let guesses = document.querySelector('.guesses');
console.log('Nombre mystère à trouver : ', randomNumber);
let lastResult = document.querySelector('.lastResult');
let lowOrHi = document.querySelector('.lowOrHi');
let guessSubmit = document.querySelector('.guessSubmit');
let guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;
guessSubmit.addEventListener('click', testProposition)
function testProposition() {
console.log("Valeur proposée par l'utilisateur : ", guessField.value)
}Pour retrouver un élément dans le document HTML, le langage javascript dispose de fonctions qui recherche un élément en utilisant la syntaxe des sélecteurs
let randomNumber = Math.floor(Math.random() * 100) + 1;
let guesses = document.querySelector('.guesses');Dans l’instruction qui précède la variable document fait référence au DOM du document HTML (variable de type Document). La fonction querySelector() va rechercher dans le document le premier élément qui contient un attribut class avec la valeur guesses.
Le navigateur dispose d’une console qui va permettre de contrôler, dans la phase de mise au point, le bon fonctionnement du programme.
Ajoutez la ligne suivante au code précédent :
let randomNumber = Math.floor(Math.random() * 100) + 1;
let guesses = document.querySelector('.guesses');
console.log('Nombre mystère à trouver : ', randomNumber);L’instruction console.log() va afficher dans la console le contenu de la variable randomNumber.
Pour ouvrir la console du navigateur faire Inspecter > Console.
Nous souhaitons traiter la proposition de l’utilisateur dès que celui-ci a cliqué sur le bouton Soumettre. Pour cela nous devons gérer les événements du bouton.
Il faut ajouter un écouteur d’événement de type 'clic' sur le bouton et lui associer une fonction qui sera exécutée quand l’événement se produira.
/**
* Ajoute un écouteur d’événement au bouton guessSubmit
* La fonction testProposition sera exécutée quand
* l’événement se produira
*/
guessSubmit.addEventListener('click', testProposition)
function testProposition() {
console.log("Valeur proposée par l’utilisateur : ", guessField.value)
}