Les événements
Mise en place
Nous avons déjà pu nous familiariser avec le couple HTML-CSS, en faite, le couple est plutôt un trio, car aujourd'hui un développeur web ne peut pas faire l'impasse sur le JavaScript . Notre but ici n'est pas d'apprendre un nouveau langage de programmation, mais juste d'étudier quelques exemples d'utilisation du JavaScript, notamment dans le cas des interactions entre un utilisateur et une page web. Avant d'entrer dans le vif du sujet, un petit rappel historique : JavaScript a été créé en dix jours par Brendan Eich en 1995. Malgré son nom, JavaScript n'a rien à voir avec le langage Java, même si Brendan Eich affirme s'être inspiré de nombreux langage, dont Java, pour mettre au point JavaScript. Après des débuts chaotiques, il est, comme déjà dit plus haut, devenu incontournable dans le développement web. Commençons par mettre en place notre environnement de travail :
Dans votre répertoire de travail, créez 3 fichiers : index.html, style.css et script.js
Insérer le code suivant dans votre fichier html:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le trio</title>
<link rel="stylesheet" href="style.css">
<head>
<body>
<h1>Le trio : HTML, CSS et JavaScript</h1>
<p>Voici une page web qui ne fait pas grand-chos</p>
</body>
<script src="script.js"></script> <!--Ah c'est nouveau :-) voici le lien vers votre script -->
</html>
le javascript
Après avoir ouvert le fichier script.js à l'aide d'un éditeur de texte, saisissez le code ci-dessous :
alert("Le JavaScript fonctionne !")
Ouvrez maintenant votre page web avec un navigateur. (Vous pouvez renseigner le CSS)
Le script peut être utilisé dans un fichier séparer ou insérer directement dans le html (pas conseillé)
Comme vous pouvez le constater, la page web s'affiche bien, mais nous avons en plus une fenêtre (souvent qualifiée de surgissante ou pop-up en anglais) qui apparait. L'apparition de cette fenêtre est bien évidemment due à l'instruction "alert" présente dans le JavaScript. Le but ici n'étant pas d'apprendre à programmer en JavaScript, nous nous contenterons pour le moment de cette simple instruction "alert". Evidemment JavaScript permet de faire bien plus de choses. En effet on retrouve en JavaScript les grands classiques des langages de programmation : variable, condition, boucle, fonction,...Si vous voulez en apprendre plus sur la programmation en JavaScript, je vous invite à consulter le site openclassrooms. Dans l'exemple ci-dessus, l'instruction "alert" est exécutée dès l'ouverture de la page web, il est tout à fait possible de lier l'exécution de certaines instructions JavaScript à l'action d'un utilisateur (par exemple un clic sur un bouton).
Ajouter au body: <button onclick="maFonction()">Cliquer ici</button>
Modifiez le code JavaScript comme suit :
function maFonction() {
alert("Le JavaScript fonctionne !")
}
Comme vous pouvez le constater, l'instruction "alert" n'est plus exécutée à l'ouverture de la page web, mais uniquement dans le cas où l'utilisateur clique sur le bouton. On a associé au bouton un événement "onclick", en cas de clic sur la souris, la fonction JavaScript "maFonction()" est exécutée. Si on s'intéresse au code JavaScript, on retrouve bien une fonction "maFonction()" ("function maFonction(){...}" en JavaScript est équivalent à un "def maFonction() :" en Python). Entre l'accolade ouvrante et l'accolade fermante (qui délimite la fonction), on retrouve uniquement notre instruction "alert". À l'ouverture de la page web cette instruction "alert" n'est pas exécutée, car elle se trouve dans une fonction. Le clic sur le bouton entraine l'exécution de la fonction "maFonction()" et donc de l'instruction "alert". Il est évidemment possible de faire des choses bien plus complexes que l'affichage d'un simple pop-up avec JavaScript. Il est possible de modifier le style d'une balise, de modifier la classe (CSS) d'une balise ou encore de modifier le contenu d'une balise, voici quelques exemples :
En utilisant des claases CSS, on peut modifier le style grâce au JS, voici l'exemple:
fichier html à copier coller:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le trio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Le trio : HTML, CSS et JavaScript</h1>
<p id="monPara">Voici une page web qui ne fait pas grand-chose</p>
<button onclick="foncRouge()">Rouge</button>
<button onclick="foncVert()">Vert</button>
</body>
<script src="script.js"></script>
</html>
fichier JS à copier coller:
function foncRouge() {
document.querySelector("#monPara").classList.remove("vert");
document.querySelector("#monPara").classList.add("rouge");
}
function foncVert() {
document.querySelector("#monPara").classList.remove("rouge");
document.querySelector("#monPara").classList.add("vert");
}
fichier CSS à copier coller:
h1{
text-align: center;
}
#monPara{
width : 200px;
height : 100px;
margin : 0 auto;
border : 2px solid black;
}
.rouge {
color:red;
font-size:20px;
}
.vert {
color:green;
font-size:30px;
}
testez puis modifier les scripts en ajoutant des boutons ou fonctions par exemples
Conclusion
Comme vous pouvez l'imaginer, Javascript permet de réaliser beaucoup de choses pour rendre dynamique un site web. Mis à part le click, les plus courants sont : le survol, l'utilisation de la souris et du clavier, changement de class...
Si vous voulez en savoir plus, vous pouvez consulter ce site.
En résumé, le code HTML permet de générer des éléments graphiques qui seront affichés par un navigateur web, mais pas seulement : il est aussi possible de mettre en place dans le code HTML des événements. Un événement donné pourra déclencher l'exécution d'instructions JavaScript.
Un peu de pratique..
Voici un jeu de géographie très basique dans sa programmation. Je vous propose de l'étudier puis de le modifier.
Téléchargez le jeu ici
- Dans un premier temps, testez le jeu ( 0 faute obligatoire 😉 )
- Ensuite, vous devez ouvrir les fichiers HTML, CSS et JS puis les commenter en renseignant au minimum les lignes de commentaire vides
- Enfin, améliorez le jeu. (ajouter des pays, améliorer le graphisme