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.
