Le titre est ronflant mais nos objectifs sont modestes !
Structure html5
On pourrait penser que ceci a été réalisé avec un logiciel de dessin, mais non, c’est la capture de la page web que nous réalisons en TP.
Le fichier à télécharger pour commencer le TP : cliquer ici et décompressez l’archive.
Un premier script ?
Une des pages contient déjà un script javascript on ne peut plus minimaliste :
alert("Coucou");
Ce n’est pas le premier que nous voyons.
On en a déjà observé un en classe un jour, début février !
On va faire mieux aujourd’hui !
-> Et on a fait mieux, on a testé et commencer à expliquer le premier script (intégré au html) ci-dessous :
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Mon premier test de javascript</title> </head> <body> <p> Ce cours est : <ul> <li> cool <button onclick="val_plus_un('valeur1');"> <span id ="valeur1">0</span> </button> </li> <li> trop cool <button onclick="val_plus_un('valeur2');"> <span id ="valeur2">0</span> </button> </li> </ul> </p> <p> <ol> <li>Le prof a toujours raison</li> <li>Sinon, voir 1.</li> </ol> </p> <script type="text/javascript"> let compt1 = 0; let compt2 = 0; function val_plus_un(val) { let v = document.getElementById(val); if (val == "valeur1") { compt1++; v.innerHTML = compt1; } else if (val == "valeur2") { compt2++; v.innerHTML = compt2; } } </script> </body> </html>
D’autres ici pour les impatients.