Découvrir javascript - Première page et premiers scripts

Introduction - Prérequis

Javascript est un langage de programmation qui permet d'interagir avec une page web.
Avant d'apprendre à interagir avec les éléments d'une page html, il faut connaître au minimum le fonctionnement
  • par balises: <h1>, <h2>, <div>, <span>, …
  • savoir identifier des éléments par identificateur: id
  • savoir appliquer un style css à un élément
  • connaître le principe de fonctionnement et d'utilisation d'une fonction en programmation (par exemple des fonctions en python, ou peu importe le langage, nous les utiliserons bien sûr ici en javascript).
Voir sur cette page par exemple.

Un programme, ou script, javascript s'insère dans une page html simplement entre des balises <script> et </script>.
Le navigateur lit le fichier html qu'il reçoit, ligne après ligne (de haut en bas …), et exécute le code en langage javascript trouvé entre ces balises "<script>" et "</script>".
Créer par exemple un fichier html avec le contenu ci-dessous, puis l'ouvrir avec un navigateur: 
<h1 id="Titre">Une page web...</h1>
<h2>... comme tant d'autres ...</h2>
<h3 id="auteur">Par MOI</h3>
c'est moi ... 

<h3 id="pq">Pourquoi cette page ?<h3>
Juste ue page que l'on va juste utiliser pour manipuler, tester et apprendre un peu de javascript. 

<script>
alert('Il y a un script javascript dans cette page !!');
</script>

<h2>Suite de la page<h2>

parce qu'il peut encore y avoir des choses après 
javascript

Changer le style d'un élément

Pour changer le style du sous-titre, par exemple le grossir, souligner et l'écrire en rouge, on lui applique ce style: 
<style>
#auteur{font-size:30px;color:red;text-decoration:underline;}
<style>

<h1 id="Titre">Une page web...</h1>
<h2>... comme tant d'autres ...</h2>
<h3 id="auteur">Par MOI</h3>
...
...
Javascript permet d'interagir avec les éléments de la page, notamment leur style.
Modifions ce style via javascript, en rajoutant à la fin un script: 
<style>
#auteur{font-size:30px;color:red;text-decoration:underline;}
<style>

<h1 id="Titre">Ma page</h1>
<h2>... comme tant d'autres ...</h2>
<h3 id="auteur">Par MOI</h3>

Page que l'on va juste utiliser pour manipuler, tester et apprendre un peu de javascript. 

<script>
elem=document.getElementById("auteur");
elem.style="color:green;font-size:50px";
</script>
Dans ce bref script, la variable elem contient la référence à l'élément identifié par l'identifiant "auteur" de la page. On modifie ensuite la propriété "style" de cet élément.
Il n'y a là pas d'interaction à proprement parler avec l'utilisateur (le lecteur de la page), le script s'exécute une fois pour toute, change le style visé et c'est tout.

Premier exemple d'interactivité: réponse à un click avec onclick

Javascript est un langage événementiel, par exemple avec la propriété "onclick", on peut repondre à l'événement "click de la souris", sur l'élément de notre choix. Par exemple, 
<style>
#auteur{font-size:30px;color:red;text-decoration:underline;}
<style>

<h1 id="Titre">Ma page</h1>
<h2>... comme tant d'autres ...</h2>
<h3 id="auteur" onclick="change();" >Par MOI</h3>
...
...


<script>
function change() {
 elem=document.getElementById("auteur");
 elem.style="color:green;font-size:50px";
}
</script>
Des instructions javascript peuvent être directement insérées dans la page html. Ici, l'action onclick exécute la fonction change, qui change alors le style comme souhaité. L'utilisateur peut (enfin) interagir avec la page.
Un retour en arrière ? Action après plusieurs clicks ?

La fonction précédente s'exécute à chaque fois que le lecteur click sur l'élément visé, mais comme cette fonction ne fait qu'une seule chose, le résultat d'un tel click est en fait invisible.
Pour s'en rendre compte, on peut au moins afficher un message à chaque click, en modifiant le script précédent par: 
<script>
function change() {
 alert('click détecté !!');
 elem=document.getElementById("auteur");
 elem.style="color:green;font-size:50px";
}
</script>
Maintenant, on voit bien qu'à chaque click, la fonction change est exécutée.
On peut bien sûr maintenant compléter cette fonction par autant d'instructions, commandes, et autres structures de programmation que souhaité.

Programmation en javascript

Javascript est un langage de programmation. On peut donc utiliser des variables, des structures (if, for, while) algorithmiques, tout comme en python.
Par exemple, pour prendre en compte plusieurs clicks successifs, on peut modifier le script précédent par: 
<script>
c=0;
function change() {
elem=document.getElementById("auteur");
if (c==0) {
   elem.style="color:green;font-size:40px";
   c=1;}
else if (c==1) {
   elem.style="color:red;font-size:60px;border:2px solid red;";
   c=2;}
else {
   elem.style="color:blue;font-size:30px";
   c=0;}
}
</script>

Autres événements

Le script précédent réagit à l'événement "click de la souris".
Plus généralement un événement est "quelque chose" qui arrive à un élément HTML, comme le click de la souris, le double-click, mais aussi le fait de survoler l'élément avec le pointeur de la souris, ou encore l'appui sur une touche du clavier.
Les principaux événements sont:
  • onchange un élément HTML a été changé (comme un champ dans un formulaire)
  • onclick un click a été fait sur l'élément HTML
  • onmouseover le curseur de la souris passe au-dessus de l'élément HTML
  • onmouseout le curseur de la souris a quitté l'élément HTML
  • onkey… l'utilisateur appui sur une touche du clavier. On distingue trois cas
    • onkeydown appui sur une touche
    • onkeyup relâche la touche
    • onkeypress appui et relâche la touche
et il en existe encore d'autres …

Essayer par exemple: 
<h3 id="auteur" onmouseover="change1();" onclick="change2();" onmouseout="change3();">Par MOI</h3>

<script>
function change1() {
  elem=document.getElementById("auteur");
  elem.style="color:red;font-weigth:bold;"
}

function change2() {
  elem=document.getElementById("auteur");
  elem.style="text-decoration:line-through;color:green;"
}

function change3() {
  elem=document.getElementById("auteur");
  elem.style="color:blue;font-size:30px;"
}
</script>

Écoute d'événements et définitions d'actions conséquentes: méthode addEventListener

Un événement est "quelque chose" qui arrive à un élément HTML.
Une méthode plus générale (et un peu plus récente) pour "écouter" les événements qui arrivent à une page html est la méthode addEventListener qui s'utilise de la façon suivante: 
elem.addEventListener(événement,fonction);
Par exemple, 
<style>
 #ElementTest{padding:5px;border:2px solid black}
</style>

<span id="ElementTest">Je suis un élément HTML...</span>


<script>
elem=document.getElementById('ElementTest');
elem.addEventListener("click",fctclick);
elem.addEventListener("dblclick",fctdblclick);
elem.addEventListener("mouseover",fctover);
elem.addEventListener("mouseout",fctout);

function fctclick() {elem.style="background-color:red";}
function fctdblclick() {alert('On se calme avec la souris !');}
function fctover() {elem.style="background-color:green";}
function fctout() {elem.style="background-color:yellow";}
</script>

Exercice: click dans un tableau

Exercice 1
Les lignes suivantes de html/css permettent de créer un tableau de 5 lignes sur 5 colonnes
(la balise "<tr>" pour table row, ou ligne du tableau, et "<td>" pour table data-cell, ou cellule/case, de donnée du tableau). 
<style>#tableau{border:2px solid black}
#tableau td{border:1px solid black;width:2em;height:2em;margin:1px}
</style>

<table id="tableau">
<tr>
  <td id="c11"></td>
  <td id="c12"></td>
  <td id="c13"></td>
  <td id="c14"></td>
  <td id="c15"></td>
</tr>
<tr>
  <td id="c21"></td>
  <td id="c22"></td>
  <td id="c23"></td>
  <td id="c24"></td>
  <td id="c25"></td>
</tr>
<tr>
  <td id="c31"></td>
  <td id="c32"></td>
  <td id="c33"></td>
  <td id="c34"></td>
  <td id="c35"></td>
</tr>
<tr>
  <td id="c41"></td>
  <td id="c42"></td>
  <td id="c43"></td>
  <td id="c44"></td>
  <td id="c45"></td>
</tr>
<tr>
  <td id="c51"></td>
  <td id="c52"></td>
  <td id="c53"></td>
  <td id="c54"></td>
  <td id="c55"></td>
</tr>
</table>
Ce tableau s'affiche alors:
Le tableau "réagit" lorsque le curseur de la souris passe au dessus, sur la cellule centrale plus précisément, et aussi en cliquant sur cette cellule centrale.
Essayer d'imaginer le code en javascript qui permet de faire cela.
Afficher ensuite le code source de la page (crtl+u en général, avec firefox du moins).

Suite possible de l'exercice: créer une page, en s'aidant de ce qui précède, permettant de jouer au morpion.

Exercice 2
Le code HTML suivant affiche un tableau avec trois colonnes: 
<style>
.bt4click{padding:3px;border:1px solid blue}
#drapeau{border:1px solid black}
#drapeau td {border:1px solid black;width:50px;height:150px}
</style>
<br><br>

<span class="bt4click">France</span>
<span class="bt4click">Italie</span>
<span class="bt4click">Allemagne</span>
<table id="drapeau">
  <tr>
    <td id="c1"></td><td id="c2"><td><td id="c3"></td>
  </tr>
</table>
Ajouter un script en javascript de telle façon qu'en clickant sur le mot "France", le drapeau français s'affiche dans le tableau, et bien sûr de même pour "Italie" et "Allemagne" et les drapeaux correspondants.

Exercice 3
Créer une page html/css contenant une image.
Ajouter un script en javascript de telle façon qu'en survolant l'image avec la souris une autre image soit affichée à sa place, et qu'en clickant sur l'image ce soit une troisième image qui soit affichée. Indication: on accède en javascript à la source src=" … " de l'image d'identifiant img1 par document.getElementById('img1').src= …


LongPage: h2: 5 - h3: 2