06- Les fonctions

A-Module 04 : JAVASCRIPT : 5 points - difficulté : 2

Les fonctions Javascript

Présentation

Définition no 1

Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien spécifique, que l'on pourra, si besoin est, utiliser à plusieurs reprises. De plus, l'usage des fonctions améliorera grandement la lisibilité de votre script.

En Javascript, il existe deux types de fonctions :
1) Les fonctions propres à Javascript
2) Les fonctions écrites par vous-même pour les besoins de votre script.

Les fonctions propres à Javascript s'appellent des "méthodes".

Elles sont associées à un objet bien particulier comme c'est le cas de la méthode alert() de l'objet window ou la méthode round de l'objet Math .

Définition no 2

La notion de fonction

On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal. Cette notion de sous-programme est généralement appelée fonction dans les langages autres que le Javascript (toutefois leur syntaxe est généralement différente...). Les fonctions permettent d'exécuter dans plusieurs parties du programme une série d'instructions, cela permet une simplicité du code et donc une taille de programme minimale. D'autre part, une fonction peut faire appel à elle-même, on parle alors de fonction récursive (il ne faut pas oublier dans ce cas de mettre une condition de sortie au risque sinon de ne pas pouvoir arrêter le programme...).

Javascript contient des fonctions prédéfinies qui peuvent s'appliquer pour un ou plusieurs types d'objets spécifiques, on appelle ces fonctions des méthodes.
Source : http://www.commentcamarche.net/contents/574-javascript-les-fonctions

Consultez les sites internet suivants pour plus d'explications :

Méthodes javascript
http://www.btinternet.com/~st_rise/main/mainfram.htm

http://www.ac-creteil.fr/util/programmation/javascript/Welcome.html

http://perso.wanadoo.fr/chatinais/coursjs/somrjs.htm

http://www.editeurjavascript.com/cours/index.php

La maîtrise des fonctions javascript permet de produire différents effets de texte comme celui-ci.

Description

Un peu de théorie :

Il est préférable de placer toutes les déclarations de fonction dans l'en-tête de votre page(section HEAD ... /HEAD) ou au haut de la page. Vous serez ainsi assuré que vos fonctions seront déjà prises en compte par le navigateur avant qu'elles soient appelées dans la section BODY.

Ajoutez une page à votre portfolio en affichant les assistants HTML, FORMULAIRE et JAVASCRIPT ainsi que la directive 3659
Inscrivez le titre : Les fonctions en Javascript
Sélectionnez la matière : informatique
Inscrivez dans le champ No de la directive : 3659
Inscrivez le code d'une page HTML de base en utilisant le bouton NOUVEAU.
Inscrivez dans votre page (dans la section BODY) le titre de niveau 1 : Les fonctions en javascript.

Les fonctions intégrées (fonctions propres à javascript) ou Méthodes javascript
Insérez (dans la section BODY de votre page) en utilisant le bouton JAVASCRIPT le code qui permet de définir le langage Javascript

Cliquez ici, au besoin, pour afficher une liste des objets javascript.
Cliquez ici, au besoin, pour afficher une liste des objets javascript.
Cliquez ici, au besoin, pour afficher une liste des objets javascript.

Cliquez ici, au besoin, pour afficher une liste des méthodes javascript.
Cliquez ici, au besoin, pour afficher une liste des méthodes javascript.

Utilisez Google et les mots de recherche suivants : MÉTHODES JAVASCRIPT pour en connaître davantage sur les méthodes javascript
Insérez ensuite dans votre code javascript un saut de ligne en utilisant la MÉTHODE write() de l'objet DOCUMENT :
Maintenant, vous allez utiliser une MÉTHODE intégrée au langage Javascript : La MÉTHODE ROUND de l'OBJET MATH afin d'arrondir un nombre.

Vous verrez plus en détails dans ce module l'objet MATH.

Par exemple, pour arrondir le nombre 5.6 et afficher le résultat

a) Utilisez le bouton ÉCRIRE
b) Dans le fenêtre de dialogue qui apparaît, inscrivez :
"Le nombre 5.6 arrondi est : " + Math.round(5.6)
Prévisualisez votre page

Les fonctions non-intégrées du langage javascript
Afin d'utiliser vos propres fonctions en Javascript, il faut procéder en deux temps :
1- Définir votre fonction en en-tête de document
2- Écrire le code qui lancera cette fonction

Dans cette partie de l'exercice, vous écrirez une fonction qui modifiera la couleur d'arrière-plan de votre page.
Placez le curseur en en-tête de votre page (entre HEAD et /HEAD)
Utilisez le bouton JAVASCRIPT afin d'inscrire le code qui identifie le langage Javscript
Placez le curseur à l'intérieur de ce code.
Utilisez le bouton FONCTION et inscrivez dans le fenêtre de dialogue qui apparaît le nom de votre fonction en y ajoutant le paramètre lacouleur:

couleurdelapage(lacouleur)
Vous obtiendrez le code suivant :
function couleurdelapage(lacouleur)
{

}
Notez que le mot "function" est utilisé afin de définir une fonction.
Notez également que les accolades { et } sont utilisées afin de délimiter le code de la fonction.

Le texte "lacouleur" entre les parenthèses identifie la variable qui servira à définir la couleur de la page.
Écrivez entre les accolades, le code de votre fonction : Voici le code à utiliser :
document.bgColor=lacouleur;
Votre fonction est maintenant définie.
Il reste donc à écrire le code qui lancera cette fonction.
Il existe différentes façons de lancer une fonction.
Nous en utiliserons pour l'instant 3.
LANCER LA FONCTION : FAÇON 1 : en utilisant un lien.

Dans la section BODY de votre document, à l'extérieur de votre code Javascript, inscrivez le code HTML suivant en identifiant une couleur de votre choix :
Explications :
- La balise de lien A est utilisée
- Le paramètre HREF est utilisé en ayant comme valeur "javascript:void(0)", ce qui signifie de rendre inactif ce lien
- Le paramètre ONCLICK est utilisé. Ce paramètre est un ÉVÈNEMENT javascript qui signifie "Lorsque ce lien est activé ..."
Nous verrons plus loin dans ce module les différents évènements javascript.
-le code suivante est utilisé : "javascript:couleurdelapage('couleur de votre choix')"
ce qui signifie : lancer la fonction couleurdelapage avec la valeur de votre choix.
Prévisualisez votre page
LANCER LA FONCTION : FAÇON 2 : en utilisant un bouton.
a) Placez deux sauts de ligne à la suite de votre lien
b) Insérez le code HTML afin d'insérer un bouton de formulaire :
Le code est le suivant : c) Ajoutez à ce code l'évènement ONCLICK ayant comme valeur le lancement de votre fonction couleurdelapage afin de définir la couleur de votre choix en fond de page.

Voici ce code :
ou
Prévisualisez votre page
LANCER LA FONCTION : FAÇON 3 : en utilisant le code javascript.
a) Placez votre curseur sous le code de votre bouton de formulaire
b) Utilisez le bouton JAVASCRIPT afin d'insérer le code qui identifie le langage Javascript
c) Dans ce code écrivez simplement : couleurdelapage('yellow')
Visualisez votre page et apportez des modifications au besoin.
OUF! Vous avez maintenant appris à :
1- utiliser une fonctions intégrées du langage javascript (Méthode)
2- Écrire le code d'une fonction Javascript utilisant un paramètre
3- 3 façons de lancer une fonction
Place ensuite une ligne horizontale dans ta page.
Utilise les connaissances acquises lors de cette activité afin créer une fonction (non intégré) de ton choix (autre qu'une fonction qui modifie la couleur d'arrière-plan de ta page et autre que la fonction alert()).

EXEMPLE : Une fonction qui modifie la taille du texte dans la page.

Consulte ce site http://javascript.developpez.com/faq/

ou

CONSULTE UN DES SITES RÉFÉRENCÉS AU HAUT DE CETTE PAGE AFIN DE TROUVER UNE IDÉE POUR LA FONCTION QUE TU DEVRAS CRÉER OU UTILISE LE SITE GOOGLE AVEC LES MOTS DE RECHERCHE "JAVASCRIPT FONCTION EXEMPLES" ou "javascript banque code" ou "javascript code bank". Dans le code trouvé, utilise un code qui emploie une fonction.