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 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 suivants :
Premier événement
À faire : Créez un fichier page_1.html, dans le même dossier que celui où vous avez décompressez le zip précédent. Recopiez ce qui suit dans ce fichier, enregistrez et visualisez cette page 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 : placez ce code dans une page page_2.html. Ouvrez-la 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
'' 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>
À faire : placez ce code dans page_3.html. Vérifiez le bon fonctionnement. Modifiez le code pour que les messages s'affichent dans une liste ordonnée type <ol>.