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 de code qui suit (rappelons que l'on vous demandera d'être capable de lire un tel code et de lui apporter quelques modifications mineures mais pas de l'écrire ex nihilo).
Déclarer une variable
En python, on ne déclare pas les variables. Dès que l'on a besoin d'une variable, on lui affecte
une valeur, cela a pour effet de la "déclarer"
(c'est à dire de signaler à l'interpréteur python que l'on utlise une variable, par exemple nommée v, et
quelle valeur lui est asociée).
Dans d'autres langages, toute variable doit être au préalable "déclarée" avec une syntaxe particulière au langage. C'est un peu comme pour une voiture: avant d'avoir le droit de l'utiliser, vous devez la déclarer auprès d'un assureur et auprès des services de préfecture (immatriculation...).
Dans beaucoup de ces langages, le type des valeurs qui seront attribuées à cette variable est défini explicitement dans la déclaration.
En javascript, on se trouve dans une position intermédiaire. On déclare les variables (avec le mot let par exemple)
mais pas leur type. Voir le code ci-dessous.
Attention, on ne déclare qu'une seule fois une variable: lors de la première affectation. Il ne faut surtout pas
la redéclarer lors des affectations suivantes (de même qu'il ne faut pas déclarer à son assureur
que l'on se sert de la voiture
à chaque fois que l'on prend le volant).
formulaire
Nous utilisons dans cet exemple et les suivants la balise <form></form>. Il s'agit
de la balise permettant de déclarer ce que l'on appelle un formulaire.
Les éléments d'un formulaire permettent de demander à l'utilisateur d'entrer des données.
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>
Ecouteur d'événement
Lorsque vous cliquez sur un bouton dans une page html par exemple (ou lorsque vous entrez une valeur dans un champ comme dans l'exemple ci-dessus), le navigateur réagit à cet "événement".
Vous pouvez considérer que lorsque vous ouvrez une page html avec un navigateur, le navigateur déclenche une boucle perpétuelle (qui tourne tant que la page est ouverte) ayant pour travail de surveiller en permanence si un événement (comme un clic de souris) a lieu. Et si l'auteur de la page html a placé un script javascript qui ordonne une certaine action lors de tel ou tel événement dans la page, alors cette action sera déclenchée lorsque le navigateur détecte que l'événement a lieu.
La fonction addEventListener que nous avons utilisée sert à déclarer quelle action déclencher sur un événement
spécifique.