Ceci est une ancienne révision du document !
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Trying to access array offset on value of type null in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Trying to access array offset on value of type null in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Trying to access array offset on value of type null in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Trying to access array offset on value of type null in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Trying to access array offset on value of type null in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Trying to access array offset on value of type null in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 172
Warning: Undefined array key 1 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Trying to access array offset on value of type null in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 149
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Warning: Undefined array key 2 in /home/goupillf/wiki.goupill.fr/lib/plugins/codeprettify/syntax/code.php on line 214
Table des matières
Javascript dans une page web
JS, dans une page web, permet une programmation événementielle.
Cliquer sur un bouton, passer le curseur de la souris au-dessus d'une zone, écrire dans un champ de texte… Ce sont des événements qui nous permettent d’interagir avec une page web.
JS permet de capter ces événements et de déclencher un programme. Un clic de souris capté par JS permettra d'ajouter un élément, dérouler un menu, changer une couleur, valider une saisie, envoyer un message vers le serveur…
Pour l'ensemble de ce cours, vous aurez besoin des fichiers contenus dans fichier zip. Décompressez cette archive dans un dossier local.
Premier événement
À faire : page_1.html est un fichier de l'archive. Ouvrez le dans un navigateur.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page 1</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Ci-dessous, trois blocs <i>div</i> en couleur. Quand on clique sur le carré rouge, un message s'affiche.</p>
<div class="carre rouge" onclick="alert('Interdiction d\'appuyer sur le bouton rouge !');"></div>
<div class="carre vert"></div>
<div class="carre bleu"></div>
</body>
</html>
Notez en ligne 10 l'utilisation de la fonction alert.
À faire : modifiez le code html pour que les autres boutons lancent un message également.
Environnement de travail
Avant d'aller plus loin, vous allez découvrir les outils, disponibles sur Chrome ou Firefox, qui permettent de bien travailler quand on programme dans une page web.
Appuyez CTRL + MAJ + I. Un panneau s'ouvre à droite ou en bas – vous pouvez le déplacer. Il est composé de différents onglets :
- Inspecteur : vous pouvez sélectionner n'importe quel item sur la page et par exemple analyser ses attributs de style.
- Console : messages d'erreurs ou autres.
- Réseau : sera utile quand on voudra échanger des données avec un serveur.
Sur Firefox il y a même un outil permettant de voir comment la page sera sur un écran de téléphone !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page 2</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="carre rouge" onclick="console.log('On vous a déjà prévenu : Interdiction d\'appuyer sur le bouton rouge !');"></div>
<div class="carre vert"></div>
<div class="carre bleu" onclick="x = 2 + y;"></div>
</body>
</html>
À faire : ouvrez page_2.html dans un navigateur. Ouvrez la console. Appuyez sur les boutons. Que constatez-vous ?
Plus gros programme
On rencontre le même problème qu'avec le style : s'il faut écrire le code JS à l'intérieur des balises html, cela va être peu lisible et rapidement impossible à gérer.
Une première étape consiste à placer le code JS dans la zone <head>. On peut définir des fonctions et appeler ces fonctions lors d'un événement.
Modifier la page
Dans l'exemple qui va suivre, on va faire mieux que d'afficher un popup d'alerte ou log en console, nous allons modifier la page.
JS peut accéder à la page à l'aide d'une variable document, et cette variable est dotée de fonctions qui permettent de lire le contenu, en ajouter, modifier les styles…
Quand on accède aux éléments de la page, la page est appelé le DOM pour Document Object Model. Le DOM, c'est la page html avec toutes ses nœuds structurés en arbre : <body> a des enfants, par exemple des <div> qui ont eux-mêmes des enfants, par exemple <p>…
Exemple
- on crée un élément de texte (on parle de nœuds, en anglais node),
- pour contenir ce texte on crée un élément paragraphe (balise de type
<p>, - on récupère le nœud de la zone réservée aux messages qui est identifiée par un attribut
id = “divMessages”, - on ajoute le le nœud de texte dans le noeud paragraphe et le nœud paragraphe dans le nœud
divMessages.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page 3</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script language="javascript">
let nombreClicks = 0;
function addMessage(message){
nombreClicks++;
divMessages = document.getElementById("divMessages");
nouvelleLigne = nombreClicks+" : "+message;
nodeText = document.createTextNode(nouvelleLigne);
nodeParagraph = document.createElement("p");
nodeParagraph.appendChild(nodeText);
divMessages.appendChild(nodeParagraph);
}
</script>
</head>
<body>
<h2>Démonstration</h2>
<p>Cliquez sur les boutons.</p>
<div class="carre rouge" onclick="addMessage('clic sur rouge');"></div>
<div class="carre vert" onclick="addMessage('clic sur vert');"></div>
<div class="carre bleu" onclick="addMessage('clic sur bleu');"></div>
</body>
</html>
À faire : ouvrez page_3.html dans un navigateur. Vérifiez le bon fonctionnement. Modifiez le code pour que les messages s'affichent dans une liste ordonnée type <ol>.
Script à part
Poussons la logique de séparation un pas plus loin : Nous déplaçons le JS dans un fichier à part – dans un site moderne, la taille totale du JS peut être plus grande que celle du html !
Dans le code ci-dessous, le script à été déplacé dans le fichier annexe script_4.js.
Remarquez qu'il reste tout de même du code JS dans la page en lignes 11-13.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page 4</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script_4.js"></script>
</head>
<body>
<p>Cliquez sur les boutons.</p>
<div class="carre rouge" onclick="addMessage('clic sur rouge');"></div>
<div class="carre vert" onclick="addMessage('clic sur vert');"></div>
<div class="carre bleu" onclick="addMessage('clic sur bleu');"></div>
<div class="messages"><b>Zone pour les messages</b>
<ol id="listeMessages"></ol>
</div>
</body>
</html>
// script_4.js
// Fichier script mis à part
function addMessage(message){
nodeMessages = document.getElementById("listeMessages");
nouvelleLigne = message;
nodeText = document.createTextNode(nouvelleLigne);
nodeLi = document.createElement("li");
nodeLi.appendChild(nodeText);
nodeMessages.appendChild(nodeLi);
}
Changer de style
Pour changer l'apparence d'un élément de la page, le plus simple est d'utiliser le style CSS. JS permet d'assigner des styles aux éléments ou d'en enlever.
soit node, un certain nœud du DOM, on peut lui ajouter une classe CSS par la commande :
node.classList.add("nom_de_la_classe");
Le fichier styles.css contient les classes "texte_en_rouge"", "texte_en_bleu"", "texte_en_vert"".
À faire : ouvrez page_4.html dans un navigateur. Testez son bon fonctionnement puis modifiez script_4.js pour que les messages apparaissent une ligne sur deux alternativement en rouge et en bleu.
Script totalement à part
Toujours plus loin dans la séparation, nous essayons d'enlever les dernières traces de JS qui restaient dans le html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page 5</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="script_5.js"></script>
</head>
<body>
<p>Cliquez sur les boutons.</p>
<div class="carre rouge" id="bouton_rouge"></div>
<div class="carre vert" id="bouton_vert"></div>
<div class="carre bleu" id="bouton_bleu"></div>
<div class="messages"><b>Zone pour les messages</b>
<ol id="listeMessages"></ol>
</div>
</body>
</html>
// script_5.js
// Fichier script mis à part
function addMessage(message){
nodeMessages = document.getElementById("listeMessages");
nouvelleLigne = message;
nodeText = document.createTextNode(nouvelleLigne);
nodeLi = document.createElement("li");
nodeLi.appendChild(nodeText);
nodeMessages.appendChild(nodeLi);
}
document.getElementById("bouton_rouge").addEventListener("click", function(){ addMessage("clic sur rouge"); })
document.getElementById("bouton_bleu").addEventListener("click", function(){ addMessage("clic sur bleu"); })
document.getElementById("bouton_vert").addEventListener("click", function(){ addMessage("clic sur vert"); })