Premiers pas en JavaScript
Condition et comparaison
cuy copyleft
  See You Why?  

 


IF ELSE vrai faux (15.1) | | IF conditions imbriquées (16.1)

Contenu

 

 

I. Fonction

Avant de voir comment fonctionne une fonction (sans aucun jeu de mots, évidemment), il convient d'en saisir une première approche.

Imaginez-vous devant votre téléviseur allumé, la télécommande à la main : votre télécommande est un outil qui exécutera des tas d'actions selon les appels reçus.
"On|Off" est le bouton qui donne l'ordre d'éteindre votre télé ;
"3" est le bouton qui donne l'ordre de passer sur la 3e chaine sélectionnée ;
jusqu'ici, pas de paramètre qui influencera l'ordre donné.

Mais,
"vol+" est le bouton qui augmentera le volume du son... son résultat dépendra de la précédente valeur mémorisée par le téléviseur...
"P-" diminuera l'ordre de passage des chaines... selon la chaine sur laquelle vous étiez...

En informatique, on dira qu'une fonction est une sorte de sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal.

Belle définition, mais qui n'est pas totalement suivie par JS, puisqu'il existe dans JS des fonctions prédéfinies ou intégrées qui peuvent s'appliquer pour un ou plusieurs types d'objets spécifiques, on appelle ces fonctions des méthodes. Nous avons déjà rencontré alert() et document.write(), voire même pour ceux qui se sont acharnés sur le chapitre précédent big(), strike() ou autres replace(xxx,yyy).

Il y a plusieurs fonctions intégrées permettant de créer de nouveaux scripts ou de modifier des scripts existants. Imaginez les fonctions intégrées comme des blocs de construction de vos scripts et de vos propres fonctions. Chacune exécute une série de chose quand elles sont appelées. Parmi elles, on a déjà cité ou on note : "fontcolor(""#AA3399")", "bold()", "alert()" et "anchor("nom_de_l_ancre")". Les fonctions intégrées s'exécutent lorsqu'elles sont appelées depuis une autre fonction ou un script, vous avez dû le remarquer. Elles sont exécutées lorsque vous placez leur nom dans les lignes de code des scripts et des fonctions. Dès que le script atteint la ligne contenant le nom de la fonction, il l'exécute. Ce procédé est désigné par "appel de fonction".

Le lecteur pourrait s'étonner que selon les cas, soit on ne note rien entre les parenthèses, soit on note un ou plusieurs éléments... qu'on appellera des paramètres. Pour commencer simplement, nous n'aborderons ici que les fonctions sans paramètre, donc avec des parenthèses vides.

Le but de ce chapitre sera de créer ses premières fonctions sans paramètres et de les appeler.

On parlait ci-dessus
d'une part d'un ensemble d'instructions effectuées à créer et
d'autre part d'un appel de la fonction.

Nous développons ces deux notions plus loin dans cette page.

 

A. la définition de la fonction

Avant d'être utilisée, la fonction ou miniprogramme doit être définie, elle doit avoir un nom et elle doit pouvoir exécuter les instructions qu'elle mettra en oeuvre. Ce n'est qu'alors que le programmeur pourra l'appeler par son nom, lui transmettre les informations dont elle aura besoin (les paramètres éventuels) et savoir ce qu'elle fera. C'est cela la définition de la fonction.

En JS, la syntaxe de création d'une fonction est simple :

      1. on écrit le mot réservé function ;
      2. on insère une espace ;
      3. on écrit le nom de la fonction (par exemple "faire")
        (à vous de faire preuve d'imagination, mêmes critères que pour les noms de variables :
        1. nom doit commencer par une lettre,
        2. les caractères suivants sont des chiffres, des lettres, des underscores [pas d'espaces]
        3. le nom des fonctions est 'case sensitive', ou sensible à la casse
          attention : lettres non accentuées)
      4. on ouvre et on ferme les parenthèses () sans espaces ni avant, ni entre,
        et oui, ce sera pour y mettre des paramètres, mais on a dit qu'on commençait sans paramètre ;
      5. on place une espace puis l'accolade ouvrante { ;
      6. on incorpore une ligne vierge
        (pour y noter en retrait, les instructions, chacune terminée par un point-virgule) ;
      7. on place, sur une nouvelle ligne, l'accolade fermante }

Notre étape 5 est restée incomplète... il fallait y indiquer une ou plusieurs instructions que JS puisse exécuter...
par exemple, envoyer un message de bienvenue dans une fenêtre popup...
on écrira alors :
alert("Un bonjour de la part de CUY");

On n'oubliera pas que toute programmation en JS doit se trouver entre des balises <script>. Ainsi, la définition de notre première fonction se présentera ainsi :

<script type="text/javascript">

function faire() {
     alert("Un bonjour de la part de CUY");
     // d'autres instructions pourraient être notées ici
}

</script>

Votre première fonction est définie... mais elle ne sera jamais exécutée si on ne l'appelle pas... reste donc à savoir comment appeler une fonction en JS.

 

B. l'appel de la fonction

Il existe plusieurs façons d'appeler une fonction en JS, mais dans tous les cas, la définition (ou la déclaration) de la fonction doit avoir été faite avant que la fonction ne soit appelée. Il ne faut pas oublier que JS est interprété dans l'ordre de lecture du programme... qui peut difficilement exécuter un ordre dont il ne comprend pas le sens.

Voici donc quelques méthodes d'appel d'une fonction :

 

dans le code principal

La méthode la plus simple d'appeler une fonction est, dans le corps principal de la page, comme on note d'autres instructions, d'appeler la fonction par son nom, sans oublier les parenthèses ouvrante et fermante, mais restant vides puisqu'il n'y a pas de paramètres à transmettre pour l'instant.

Ne pas oublier de terminer l'instruction par un point-virgule, puisqu'appeler votre fonction est un ordre, une instruction que vous venez de définir.

Votre code pourrait ressembler à ceci :

function faire() {
alert("Un bonjour de la part de CUY");
// d'autres instructions pourraient être notées ici
}
var message2; 
message2="<center><div style='background:#E6E6FA; width:80%; border:1px solid blue; margin-top:50px; font-family: arial'>";
message2+="<p align='center' style='color:#191970; margin-top: 10px; margin-bottom: 10px; font-size: 120%'><br>";
message2+="<br>Ce calcul se fera dans les limites des donn&eacute;es que vous introduirez et n\'est valable qu\'&agrave; partir du 1er janvier 2011, <br>pour les salaires soumis au pr&eacute;compte belge <br>et inférieurs à un imposable de 5&nbsp;610,00&nbsp;&euro;. ";
message2+="<br>Notre intention est de vous donner une id&eacute;e de votre salaire net MENSUEL. ";
message2+="<br>CUY ne pourra en aucun cas être tenue pour responsable des &eacute;ventuelles diff&eacute;rences par rapport au calcul fourni par votre employeur.";
message2+="<br>© CUY-05/2011</p></div></center>";
faire();
document.write(message2);

... et sans oublier que ce code doit toujours se trouver entre des balises <script>.

L'indentation de la source n'est pas obligatoire, mais plus que fortement conseillée : nous essayons toujours de fermer une accolade au niveau de la ligne qui a ouvert cette accolade. L'avenir va vous démontrer que ce conseil n'est pas un luxe.
Tout lecteur verra que l'accolade fermante termine la fonction 'faire' qui a exigé l'accolade ouvrante.

« Jamais de courant d'air en Javascript », il faut fermer toutes les portes que l'on ouvre.

 

Exemple

<html>
<head><title>produit de 2 nombres</title></head>
<body>
<script type="text/javascript">

function faire() {
       alert("Un bonjour de la part de CUY");
       // d'autres instructions pourraient être notées ici
}


message2="<center><div style='background:#E6E6FA; width:80%; border:1px solid blue; margin-top:50px; font-family: arial'>";
message2+="<p align='center' style='color:#191970; margin-top: 10px; margin-bottom: 10px; font-size: 120%'><br>";
message2+="<br>Ce calcul se fera dans les limites des donn&eacute;es que vous introduirez et n\'est valable qu\'&agrave; partir du 1er janvier 2011, <br>pour les salaires soumis au pr&eacute;compte belge <br>et inférieurs à un imposable de 5&nbsp;610,00&nbsp;&euro;. ";
message2+="<br>Notre intention est de vous donner une id&eacute;e de votre salaire net MENSUEL. ";
message2+="<br>CUY ne pourra en aucun cas être tenue pour responsable des &eacute;ventuelles diff&eacute;rences par rapport au calcul fourni par votre employeur.";
message2+="<br>© CUY-05/2011</p></div></center>";
faire();
document.write(message2);
 
</script>
</body>
</html>


   

dans une autre fonction

Un autre usage courant d'une fonction est de l'appeler dans une autre fonction, de la même façon que si on l'appelait du corps principal du programme.

 

 

 

dans la fonction elle-même

Il est aussi fréquent qu'une fonction soit récursive... c'est-à-dire qu'elle s'appelle elle-même. On retrouve alors l'appel de la fonction dans les instructions de définition de la fonction.

Prudence cependant car c'est l'histoire du serpent qui se mange par la queue ; c'est comme si dans un dictionnaire vous cherchiez la définition du mot "chat" et que le dictionnaire vous indique "jeune de chat qui est devenu grand" (à réfléchir pour de nombreux enseignants) ; c'est le cas de celui à qui on promet de réaliser deux voeux... et qui choisit comme deuxième voeu "je souhaite qu'on réalise mes deux voeux suivants"...

Le lecteur aura compris que le risque est de rentrer dans une boucle sans fin... sauf si on y place une condition de sortie. Mais pour l'instant, ces solutions sont inconnues ; on abordera plus tard les conditions à partir du chapitre 14 (voir ici) et différentes boucles seront étudiées à partir du chapitre 19 (voir ici).

 

Le cas de récursivité pourrait aussi se présenter avec plusieurs fonctions. Par exemple lorsqu'une fonction1() appelle une fonction2() et que cette dernière rappelle la fonction1()...

 

 

dans un href

Les tutoriels existants montrent parfois cette possibilité d'appeler une fonction dans une page HTML, sans ouvrir de balises <script> pour l'appel de la fonction. Il reste cependant évident que la définition de la fonction doit avoir été faite entre les balises <script>.

Les deux propositions rencontrées pour appeler une fonction faire() sont :

<a href="javascript:faire()"> lien déclencheur </a>
ou
<a href="#" onclick="javascript:faire()"> lien déclencheur </a>.

Nous en proposons ici une troisième que nous avons testé et qui supprime un rappel de la page courante ou des erreurs souvent engendrées par l'une des possibilités ci-dessus :

<a href="#" onclick="javascript:faire()"; return false;> lien déclencheur </a>

 

 

 

au chargement de la page

Une méthode particulière d'appeler une fonction est, dans la balise <body> de la page, de faire appel, non pas comme première instruction, mais comme opération à faire dès l'ouverture de la page. Ce peut être utile si on veut demander une information qui sera utilisée dans la suite du programme, si on doit charger une série de fonctions qui riquent d'être utilisées dans la page en cours, etc.

Pour ce faire, il faut :

        1. placer dans la balise <BODY>, un paramètre gestionnaire de l'évènement onload, suivi d'un signe =, suivi de guillemets qui contiendront les fonctions à exécuter des l'ouverture de la page courante (sans oublier les points-virgules à la fin de chaque fonction);
        2. dans ce cas particulier, on aura veillé à définir les fonctions appelées avant l'ouverture de la balise <BODY>, donc entre les balises <HEAD et </HEAD> de la page.

Notre code devrait alors ressembler à ceci :

 

 

 

par hyperlien

Cette méthode a été abordée dans la partie intitulée "dans un href" ci dessus. Cependant, $$$

 

 

 

suite à un évènement

Le JS est un langage événementiel. Nous avons abordé un événement qui consiste en un chargement de la page... et nous savons que cet évènement est géré dans la balise <BODY onload="faire()">. JS peut gérer de nombreux événements tels que : onClick, onLoad, onUnload, onMouseOver, onMouseOut, onFocus, onBlur, onChange, onSelect, onSubmit, etc.

Ces événement seront étudiés plus en détail dans nos chapitres 21 ("Les événements dans la programmation", voir ici) et 22 ("Quelques événements : onMouseOver onLoad etc.", voir ici). Nous y renvoyons le lecteur.

 

 

C. une illustration de fonction

Votre enseignant (prof de JavaScript, évidemment) entre pour son cours et vous dit : "Aujourd'hui, nous verrons les outils de manipulation d'objet 'string'." Comme un seul homme vous vous exécutez car vous savez qu'il faut :

      1. appuyer sur le bouton "On" de son ordinateur
        pour allumer son ordinateur ;
      2. attendre que l'installation se termine ;
      3. appuyer la touche "Windows"
        pour voir les choix de "démarrer" ;
      4. cliquer sur "programmes"
        pour voir la liste des programmes installés sur votre ordi ;
      5. choisir "notepad++"
        pour pouvoir éditer ce que votre prof vous dira ;
      6. ré-appuyer la touche "Windows"
        pour voir les choix de "démarrer" ;
      7. cliquer sur "programmes"
        pour voir la liste des programmes installés sur votre ordi ;
      8. choisir votre navigateur (IE ou Google Chrome ou Mozila Firefox) ;
      9. écrire l'URL : "cuy.be/cours/jvs/" ;
      10. appuyer sur la touche "Enter"
        pour valider votre URL notée ;
      11. cliquer sur l'étape 5
        pour choisir : "JavaScript : Variables et chaines" et voir les sous-sections du chapitre ;
      12. cliquer la section : "outils de manipulation d'objet 'string' "
        pour voir s'afficher le cours ;
      13. appuyer sur ???,
        pour ouvrir un nouvel onglet dans votre navigateur ;
      14. appuyer sur "Alt" et sur "Tab" (double flèche)
        pour basculer sur l'application "Notepad++" ;

Vous voilà prêt pour la suite du cours... patience, bientôt un nouvel ordre qui engendrera une nouvelle série d'actions plus élémentaires.

 

 

II. Conditions, comparaisons

Outre la condition d'égalité entre deux valeurs, les conditions les plus fréquentes sont des conditions d'inégalités. On songera à :

 

n'est pas égal à

Toujours dans les conditions uniques à vérifier, il existe la négation de la comparaison vue précédemment, à savoir "est différent de..." ou "n'est pas égal à..." qui en JS se notera " !=", soit un point d'exclamation immédiatement suivi d'un simple signe = et qui exprime la négation de la condition vue dans la section précédente "est égal à...". Cette condition sera vraie si les éléments comparés ne sont pas égaux.

 

est (strictement) plus petit que

Il existe aussi au niveau des comparaisons une autre comparaison qui marque une non égalité entre deux éléments, à savoir "est strictement plus petit que..." ou "est strictement inférieur à..." qui en JS se notera " <", placé à gauche du 'w' sur un clavier belge. Cette condition sera vraie si le premier élément est plus petit que le second de la comparaison, sans lui être égal.
C'est le sens du 'strictement'.

 

est (strictement) plus grand que

Il existe encore au niveau des comparaisons une autre comparaison qui marque une non égalité entre deux éléments, à savoir "est strictement plus grand que..." ou "est strictement supérieur à..." qui en JS se notera " >", placé à gauche du 'w' sur un clavier belge. Cette condition sera vraie si le premier élément est plus grand que le second de la comparaison, sans lui être égal. Ce n'est donc pas la négation de la précédente, puisque dans aucun des deux cas, on n'accepte qu'il y ait égalité entre les 2 éléments comparés.
C'est le sens du 'strictement'.

 

est plus petit ou égal à

Il existe aussi au niveau des comparaisons une autre comparaison qui marque une différence entre deux éléments, à savoir "est plus petit ou égal à..." ou "est inférieur à..." qui en JS se notera " <=". Cette condition sera vraie si le premier élément est plus petit ou égal au second de la comparaison, mais ici en pouvant lui être égal.
C'est donc ici la négation de la condition ">".

 

est plus grand ou égal à

Il existe encore et enfin au niveau des comparaisons une autre comparaison qui marque une différence entre deux éléments, à savoir "est plus grand ou égal à..." ou "est supérieur à..." qui en JS se notera " >=". Cette condition sera vraie si le premier élément est plus grand ou égal au second de la comparaison, mais ici en pouvant lui être égal.
C'est donc ici la négation de la condition "<".

 

 

 

VIII. Exercices relatifs aux conditions et comparaisons

voir suite > > >

 

IX. Test relatif aux conditions et comparaisons

voir suite > > >

 

 


IF ELSE vrai faux (15.1) | | IF conditions imbriquées (16.1)