Accueil Casino argent reel Meilleur casino Nouveaux casinos Live casino

Premiers pas en JavaScript Expressions conditionnelles

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 :

• la plus simple et la plus courante est l'appel dans le programme principal ;
• à peine plus difficile, l'appel dans une autre fonction ;
• attention en cas d'appel dans la fonction elle-même ;
• appel dans un href ;
• et puisque JS est un langage événementiel, on notera l'appel au chargement de la page ;
• l'appel par hyperlien ;
• et l'appel suite à un autre événement.

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.

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.

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)

---