Traduction
Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js
Tutoriel JavaScript - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Il existe bien sûr le "if", le "if ... else" , le "if ... else if ...".
Mais aussi l'opérateur ternaire et la structure switch.
Afficher "sénior" ou "encore jeune" en fonction de l'âge.
var vage = prompt('tapez un votre âge sous forme d\'un entier') ;
vage = parseInt(vage) ; // conversion en entier
if(vage >= 60) {alert(vage + " ans donc vous êtes senior") ; }
if(vage < 60) alert(vage + " ans donc vous êtes encore jeune");
Je rappelle que toute saisie avec la fonction native prompt() est de type string. Il faut donc ensuite convertir la chaine au format numérique en un entier.
Le script comporte deux conditions.
Une condition est entre parenthèse après le mot réservé if.
Une condition est une expression logique qui retourne une valeur logique (un booleen : true ou false).
Si la première condition retourne true alors il y a affichage du message : "vous êtes sénior".
Si la deuxième condition retourne true alors il y a affichage du message : "vous êtes encore jeune".
Dans la dernière instruction il n'y a pas d'accolades après le test. En effet il n'y a qu'une instruction
donc les accolades sont facultives.
Syntaxe:
if (condition)
{ bloc d'instructions }
OU
if (condition) instruction unique ;
Dans chacune des trois conditions l'expression logique est basée sur un opérateur de comparaison.
Nous avons utilisé : >= (supérieur ou égal ?) et < (inférieur à ? ) mais il existe aussi :
== : est égal ?
!= : est différent ?
>= : est supérieur ou égal ?
<= : est inférieur ou égal ?
Ne confondez pas l'opérateur d'égalité (==) avec l'opérateur d'affectation (=).
Afficher la sanction en fonction de la moyenne obtenue à l'examen : admis, oral de rattrapage, refusé, erreur.
La moyenne est comprise entre 1 et 19.
var vmoyenne = prompt('tapez la moyenne à l\'examen') ;
vmoyenne = parseInt(vmoyenne) ; // conversion en entier
if (vmoyenne >19 || vmoyenne <1 ) alert("Erreur de saisie !");
if(vmoyenne >= 12) alert ("Admis !");
if(vmoyenne >= 10 && vmoyenne < 12) alert("Oral de rattrapage !");
if(vmoyenne < 10) alert("Refusé !");
Remarquez que la chaine qui est l'argument de la fonction prompt contient une apostrophe . Donc il faut la délimiter cette chaîne soit par des doubles quotes (") soit par des simples quotes (') mais à condition d'échapper alors l'apostrophe (\').
Attention ce script est correct sur le plan syntaxique mais nul sur le plan algorithmique.
En effet il peut arriver que deux conditions soient vérifiées ce qui n'est pas normal.
Ainsi si vous saisissez 20 : le premier et le deuxième tests sont VRAI donc affichage de "Erreur de saisie" puis "Admis" ...
Il aurait fallu utliser des tests imbriques plutôt que des conditions basés sur des opérateurs logiques. Voir plus loin.
Dans l'exemple ci-dessus nous avons utilisé les opérateurs logiques && (AND), || (OR) mais il existe aussi ! (NOT). L'opérateur logique NOT est très utilisé avec des booléens.
Reprenons le thème de l'âge. Nous aurions pu écrire plus simplement :
...
if (vage >= 60) {alert(vage + ' ans donc vous êtes senior') ; }
else alert(vage + ' ans donc vous êtes encore jeune) ;
...
L'instruction après le else est exécutée si la condition retourne FALSE.
Que ce soit dans le si ou dans le sinon les accolades sont ici facultatives puisqu'il n'y a qu'une instruction. Elles deviennent obligatoires en cas de bloc d'instructions.
Reprenons le thème de l'âge. Le script peut s'écrire de la façon suivante :
var vage = prompt('tapez un votre âge sous forme d\'un entier') ;
vage = parseInt(vage) ; // conversion en entier
var vstatut = vage >=60 ? " senior !" : " encore jeune !" ;
document.write ("votre âge :" + vage + " ans : " + vstatut);
Observons la troisième instruction ; elle est basée sur l'opérateur ternaire.
Si le test est VRAI la variable vstatut reçoit "senior !" sinon elle récupère "encore jeune !".
Syntaxe : test ? valeur si test retourne vrai : valeur si test retourne faux
La fonction parseInt(chaine) est très efficace.
Tapez "40 ans" ; vage récupère après conversion l'entier 40
Tapez "70 printemps" ; vage récupère après conversion l'entier 70.
Donc il n'est pas nécessaire que la chaine saisie soit au format numérique du moment qu'elle commence par au
moins un chiffre, la conversion en entier s'effectue.
Le test ternaire peut être imbriqué dans une autre instruction.
Ainsi si je reprends le thème précédent, je peux remplacer les deux dernières instructions par une seule.
Le script devient alors :
var vage = prompt('tapez un votre âge sous forme d\'un entier') ;
vage = parseInt(vage) ; // conversion en entier
document.write("votre âge est : " + vage + " ans " + (vage > 60 ? "sénior ! " : "encore jeune !") );
Attention le test ternaire doit alors être encadré par des parenthèses.
Le script :
var vcodepostal = prompt('tapez votre code postal : 59 ou 60 ou 62 ou 80 ou 02') ;
vcodepostal = parseInt(vcodepostal) ; // conversion en entier
if(vcodepostal == 2) alert ("Vous résidez dans l'Aisne");
else if ( vcodepostal == 59) alert("Vous résidez dans le Nord") ;
else if ( vcodepostal == 60) alert("Vous résidez dans l'Oise") ;
else if (vcodepostal == 62) alert("Vous résidez dans le Pas de calais") ;
else if (vcodepostal == 80) alert("Vous résidez dans la Somme") ;
else alert("erreur de saisie");
Mais comment fonctionne cette structure ?
Si la première condition retourne false alors il y a examen du deuxième test. Si le deuxième test retourne false
alors examen du troisième test et ainsi de suite ...
La note saisie doit être comprise entre 1 et 19 ; note >=12 : admis ; note comprise entre 10 et 12 : oral ; note inférieure à 10 : refusé.
Nous avons vu que la première solution n'était pas satisfaisante.
Le script corrigé (extrait) :
...
if (vmoyenne >19) alert('Erreur de saisie');
else if (vmoyenne >=12 ) alert('Admis');
else if (vmoyenne >=10) alert('Oral de rattrapge');
else if (vmoyenne >=1) alert('Refusé');
else alert('erreur de saisie');
Reprenons le thème précédent (affichage du nom du département en fonction du code minéralogique).
Il y a une autre solution avec la structure switch (cas de)
var vcodepostal = prompt('tapez le code du département : 02 ou 59 ou 60 ou 62 ou 80') ;
vcodepostal = parseInt(vcodepostal) ;
// conversion en entier
switch(vcodepostal)
{
case 2 : alert('Aisne'); break ;
case 59 : alert('Nord'); break ;
case 60 : alert('Oise'); break ;
case 62 : alert('Pas de calais'); break ;
case 80 : alert('Somme'); break ;
default : alert('erreur de saisie') ;
} // fin switch
Reconnaissez que c'est beaucoup plus clair ...
Si vcodepostal est égal à 2 alors affichage de "Aisne" puis sortie du "switch" (grâce à l'instruction break)
sinon examen du case suivant.
L'instruction associée à default est exécutée si aucun des cas n'est vérifié.
Attention la structure switch souffre cependant d'un gros inconvénient ; l'opérateur de comparaison (implicite d'ailleurs) est forcément égal. Impossible d'écrire, par exemple : case >=60.
Les résultats peuvent être affichées dans la console du navigateur.
Il suffit de remplacer "alert()" par "console.log()".
Donc le script devient :
var vcodepostal = prompt('tapez le code du département : 02 ou 59 ou 60 ou 62 ou 80') ;
vcodepostal = parseInt(vcodepostal) ; // conversion en entier
switch(vcodepostal)
{
case 2 : console.log('Aisne'); break ;
case 59 : console.log('Nord'); break ;
case 60 : console.log('Oise'); break ;
case 62 : console.log('Pas de calais'); break ;
case 80 : console.log('Somme'); break ;
default : console.log('erreur de saisie') ;
} // fin switch
Pour ouvrir la console sur Chrome, utilisez le raccourci clavier suivant :Ctrl + Maj + J (sous Windows).
Vous pouvez également ouvrir la console en cliquant avec le bouton droit de la souris sur la page, puis en
sélectionnant "Inspecter" puis l'onglet "console"
puis cliquez sur l'onglet "console".
Dans le cadre d'un programme JS définitif, les boites de dialogue prompt(), alert(), console.log(), confirm() doivent être bannies.
Les entrées-sorties doivent se faire dans le cadre d'un formulaire HTML.
Reprenons la thématique "affichage du nom d'un département en fonction de son code".
Les entrées/sorties se font désormais dans le cadre d'un formulaire HTML.
La saisie du code minéralogique se fait dans une liste déroulante. Donc aucun risque d'erreur de saisie.
Le nom du département correspondant s'affiche dans une zone de texte en lecture seule.
Notez que chaque élément du formulaire est affecté d'un ID. C'est indispensable dans le cadre du traitement des données par le script !
A chaque changement de valeur dans la liste déroulante il y a appel d'un fonction JS : ftrait().
function ftrait()
{
var vdpt =""; // déclaration d'une variable
var vcodepostal = document.getElementById("liste").value ;
// lire dans la liste la valeur retenue
vcodepostal = parseInt(vcodepostal) ;
// conversion en entier de la chaine numérique
switch(vcodepostal)
{
case 2 : vdpt ="Aisne"; break ;
case 59 : vdpt ="Nord"; break ;
case 60 : vdpt ="Oise"; break ;
case 62 : vdpt ='Pas de calais'; break ;
case 80 : vdpt ='Somme'; break ;
} // fin switch
document.getElementById("dpt").value =vdpt;
// écrire dans le champ du formulaire
} // fin fonction
On manipule dans le script un élément du formulaire via son ID avec la méthode document.getElementById(nomId) Comme on manipule plus précisément le contenu d'un élément (en lecture ou écriture) il faut rajouter ".value" !
Le rendu dans un iframe :