for(){}☘
Syntaxe☘
Vous trouverez le détail de la syntaxe de la boucle for en javascript sur cette page.
Exercice☘
On donne ci-dessous un code de page html. Le script javascript donné permet de compter le nombre de lettres e dans le mot entré par l'utilisateur.
Note
Le "ou" (or en langage python) est || en javascript (la barre verticale se situe sur la touche du 6).
Le "et" (and en langage python) est && en javascript.
Note
L'instruction i = i + 1 peut aussi s'écrire i += 1 en javascript,
mais peut aussi s'écrire i++.
le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> si alors sinon </title>
<style>
html{
font-size: 20px;
}
body{
width: 80%;
margin: 2rem auto;
}
form{
margin: 1rem;
padding: 1rem;
border: 5px ridge purple;
text-align: center;
}
div{
margin: 1rem;
}
</style>
</head>
<body>
<form>
<label for="mot">Entrez un mot:</label>
<input type="text" id="mot" minlength="1" value="a"/>
</form>
<div id="reponse">
Ici la réponse javascript lors d'une modification
de la valeur dans le champ input.
</div>
<script>
// une variable liée à l'élément html input
// le mot clef let sert à déclarer une variable:
let entree = document.querySelector("#mot");
// une variable liée à l'élément html div
// on donne à la variable js le même nom que l'id de l'élément html
// ce n'est pas obligatoire mais cela facilite la lecture du code:
let reponse = document.querySelector("#reponse");
// on définit un écouteur sur l'élément input,
//cet écouteur déclenchera une action lors d'une modification de la valeur dans le champ input:
entree.addEventListener( "change",
() => {
// on récupère le mot entré par l'utilisateur:
let mot = entree.value;
// on compte le nombre de lettres e du mot:
let compteur = 0;
for(let lettre of mot){
if(lettre == 'e' || lettre == 'é' || lettre == 'è' || lettre == 'ê'){
compteur += 1;
}
}
reponse.innerHTML = `Le nombre de lettres e est égal ${compteur}.`;
}
,false);
</script>
</body>
</html>
Testez ce code puis apportez des modifications qui permettront d'afficher le nombre de voyelles (on omettra le cas des lettres accentuées pour simplifier) en dessous de l'affichage du nombre de lettres 'e'.
Un code possible
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title> si alors sinon </title>
<style>
html{
font-size: 20px;
}
body{
width: 80%;
margin: 2rem auto;
}
form{
margin: 1rem;
padding: 1rem;
border: 5px ridge purple;
text-align: center;
}
div{
margin: 1rem;
}
</style>
</head>
<body>
<form>
<label for="mot">Entrez un mot:</label>
<input type="text" id="mot" minlength="1" value="a"/>
</form>
<div id="reponse">
Ici la réponse javascript lors d'une modification
de la valeur dans le champ input.
</div>
<script>
// une variable liée à l'élément html input
// le mot clef let sert à déclarer une variable:
let entree = document.querySelector("#mot");
// une variable liée à l'élément html div
// on donne à la variable js le même nom que l'id de l'élément html
// ce n'est pas obligatoire mais cela facilite la lecture du code:
let reponse = document.querySelector("#reponse");
// on définit un écouteur sur l'élément input,
//cet écouteur déclenchera une action lors d'une modification de la valeur dans le champ input:
entree.addEventListener( "change",
() => {
// on récupère le mot entré par l'utilisateur:
let mot = entree.value;
// on compte le nombre de lettres e du mot:
let compteur = 0;
let compteVoyelle = 0;
for(let lettre of mot){
if(lettre == 'e' || lettre == 'é' || lettre == 'è' || lettre == 'ê'){
compteur += 1;
}
if(lettre == 'e' || lettre == 'a' || lettre == 'o' || lettre == 'i' || lettre == 'u' || lettre == 'y'){
compteVoyelle += 1;
}
}
reponse.innerHTML = `Le nombre de lettres e (avec ou sans accent) est égal ${compteur}.<br>
Et le nombre de voyelles (non accentuées) est égal à ${compteVoyelle}.`;
}
,false);
</script>
</body>
</html>