if(){}else{}☘
Syntaxe☘
Commencez par lire un descriptif de la syntaxe du if sur cette page.
Puis traiter l'exercice ci-dessous.
Exercice☘
Lire l'exemple qui suit.
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="entier">Entrez un entier:</label>
<input type="number" id="entier" step="1"/>
</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("#entier");
// 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 la valeur de l'entier entré par l'utilisateur:
let entier = entree.value;
if(entier%2 == 0) // si l'entier est pair
{
//on modifie le contenu html du div en conséquence:
reponse.innerHTML = `L'entier ${entier} est pair.`
}
else
{
//on modifie le contenu html du div en conséquence:
reponse.innerHTML = `L'entier ${entier} est impair.`
}
}
,false);
</script>
</body>
</html>
Pour le tester, copier coller le code dans une page .html et ouvrir ensuite la page avec un navigateur. Tester, observer...
Modifier maintenant ce code pour qu'il affiche "L'entier est multiple de 3", "L'entier est multiple de 4", "L'entier est multiple de 3 et de 4", "L'entier n'est mutiple ni de 3, ni de 4" suivant les cas.
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="entier">Entrez un entier:</label>
<input type="number" id="entier" step="1"/>
</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("#entier");
// 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 la valeur de l'entier entré par l'utilisateur:
let entier = entree.value;
if(entier%3 == 0) // si l'entier est multiple de 3
{
if(entier%4 == 0) // si l'entier est multiple de 4
{reponse.innerHTML = `L'entier ${entier} est multiple de 3 et de 4.`;}
else
{reponse.innerHTML = `L'entier ${entier} est multiple de 3 (mais pas de 4).`;}
}
else
{
if(entier%4 == 0)
{reponse.innerHTML = `L'entier ${entier} est multiple de 4 (mais pas de 3).`;}
else
{reponse.innerHTML = `L'entier ${entier} n'est multiple ni de 3, ni de 4.`;}
}
}
,false);
</script>
</body>
</html>