TP : Interactions avec le javascript

Exercice 1

Voici le code de deux pages web (au format .html) contenant du javascript :

<div id="zone"></div>
<script>
z=document.querySelector("#zone");
for(let i=0 ;i<20 ;i++) {
	z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px'>vive les vacances</span><br>";
	} 

</script>

Copiez ce code dans un page exercice1a.html et testez-le.

<div id="zone"></div>
<script>
z=document.querySelector("#zone");
for(let i=0 ;i<20 ;i++) {
	if (i%4==0){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:yellow'>vive les vacances</span><br>";}
	else if (i%4==1){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:orange'>vive les vacances</span><br>";}
	else if (i%4==2){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:green'>vive les vacances</span><br>";}
	else{z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:blue'>vive les vacances</span><br>";}
	} 
</script>

Copiez ce code dans un page exercice1b.html et testez-le.
Y a-t-il une interaction entre l'utilisateur et ces deux pages web ?
Quel est l'intérêt de ce code ?

Exercice 2 : avec un bouton

<div id="zone"></div>
<button onclick="affiche()">Appuyer</button>
<script>
function affiche(){
	z=document.querySelector("#zone");
	for(let i=0 ;i<20 ;i++) {
		if (i%4==0){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:yellow'>vive les vacances</span><br>";}
		else if (i%4==1){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:orange'>vive les vacances</span><br>";}
		else if (i%4==2){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:green'>vive les vacances</span><br>";}
		else{z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:blue'>vive les vacances</span><br>";}
		} 
	}
</script>

Copiez ce code dans un page exercice2a.html et testez-le.

ou encore :

<div id="zone"></div>
<button id="btn">Appuyer</button>
<script>
function affiche(){
	z=document.querySelector("#zone");
	for(let i=0 ;i<20 ;i++) {
		if (i%4==0){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:yellow'>vive les vacances</span><br>";}
		else if (i%4==1){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:orange'>vive les vacances</span><br>";}
		else if (i%4==2){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:green'>vive les vacances</span><br>";}
		else{z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:blue'>vive les vacances</span><br>";}
		} 
	}
document.getElementById("btn").addEventListener("click", affiche);
</script>

Copiez ce code dans un page exercice2b.html et testez-le.
Ecrire le code d'une page web qui traduit du français en anglais d'un texte prédéfini en appuyant sur un bouton.

Exercice 3 : avec 2 boutons

<div id="zone"></div>
<button id="btn1" onclick="affiche()">Appuyer</button>
<button id="btn2" onclick="efface()" style="display:none">Effacer</button>
<script>
var z=document.querySelector("#zone");
var btn=document.querySelectorAll("button");
function affiche(){
	for(let i=0 ;i<20 ;i++) {
		if (i%4==0){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:yellow'>vive les vacances</span><br>";}
		else if (i%4==1){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:orange'>vive les vacances</span><br>";}
		else if (i%4==2){z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:green'>vive les vacances</span><br>";}
		else{z.innerHTML=z.innerHTML +"<span style='font-size:"+(10+i)+"px;color:blue'>vive les vacances</span><br>";}
		} 
	btn[0].style.display="none";//efface le bouton
	btn[1].style.display="inline";//affiche le bouton
	}
function efface(){
	z.innerHTML="";
	btn[0].style.display="inline";
	btn[1].style.display="none";
	}
</script>

Copiez ce code dans un page exercice3.html et testez-le.

Ecrire le code d'un page web avec :

le texte :

JavaScript est un langage de programmation de haut niveau employé dans les pages web interactives.
Il a été créé en 1995 par le brillant informaticien Brendan Eich.
Il a été standardisé sous le nom d'ECMAScript en juin 1997.

un bouton qui affiche les verbes en rouge lorsqu'on appuye dessus ;
un bouton qui affiche les adjectifs qualificatifs en vert lorsqu'on appuye dessus.

Exercice 4 : piloter un curseur

<input id="curseur" type="range" min="5" max="50" value="25" step="1" oninput="change()">
<p id="texte" style="font-size:25px">valeur choisie 25</p>

<script>					
function change() {
  var curseur = document.getElementById("curseur");
  var t = curseur.value;
  var text=document.querySelector("#texte");
  text.style.fontSize=""+t+"px";
  text.innerHTML = "valeur choisie "+t;
}			
</script>

Copiez ce code dans un page exercice4.html et testez-le.
Ecrire une page web où on peut contrôler la taille d'une image avec un curseur.

Voir la solution

le code

<input id="curseur" type="range" min="5" max="500" value="25" step="1" oninput="change()"<>br>
<img src="img/exo_ihm.jpg">

<script>						
function change() {
  var curseur = document.getElementById("curseur");
  var t = curseur.value;
  var image=document.querySelector("img");
  image.style.width=""+t+"px"; 
}			
</script>

Le résultat

Masquer la solution

Exercice 5 : déplacement de la souris

<p>JavaScript est un langage de programmation de haut niveau employé dans les pages web interactives.</p>
<p id="zone" onmouseover="dessus()" onmouseout="dehors()">Il a été créé en 1995 par le brillant informaticien Brendan Eich.</p>
<p>Il a été standardisé sous le nom d'ECMAScript en juin 1997.</p>

<script>
function dessus() {
  document.querySelector("#zone").style.color = "red";
  }

function dehors() {
  document.querySelector("#zone").style.color = "black";
  }
</script>

Copiez ce code dans un page exercice5.html et testez-le.
Ecrire une page web où on peut agrandir la taille d'une image avec le survol de la souris.

Exercice 6 : avec des entrées `input`

<label>Entre ton prénom :</label><input  type="text"  name="prenom"  />
<button onclick="action()">Appuyer</button>
<div id="zone"></div>
<script>
function action(){
	prenom=document.getElementsByName("prenom")[0].value;
	texte=document.querySelector("#zone");
	texte.innerHTML="Bonjour "+prenom+" !"
	}
</script>

Copiez ce code dans un page exercice6.html et testez-le.
Ecrire une page web avec 2 zones de saisie, l'une pour le prénom et l'autre l'âge et un bouton qui lorsqu'il est appuyé affiche : soit "Tu seras dans 3 ans" (si la personne a 15 ans), soit "tu es majeur" si elle a plus de 18 ans.

Exercice 7 : une animation

<div id="zone"></div>

<script>
var nsi=["N","S","I","<span style='font-size:2em'>NSI</span>"];
var i=0;
function affiche(){
	z=document.querySelector("#zone");
	z.innerHTML=nsi[i];
	i=(i+1)%4
	}
var film=setInterval("affiche()",200)
</script>

Copiez ce code dans un page exercice7.html et testez-le.
Modifier ce code en ajoutant un bouton qui arrête l'animation.
Ecrire une page web avec une animation que vous allez imaginer.