On appelle fonction un sous-programme qui permet d'effectuer
un ensemble d'instruction 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
(touefois leur syntaxe est généralement différente...). Les fonctions et les
permettent d'exécuter dans plusieurs parties du programme une série d'instruction,
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 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.
| La déclaration d'une fonction
|
Avant d'être utilisée, une fonction doit être définie car pour l'appeler
dans le corps du programme il faut que le navigateur la connaisse, c'est-à-dire qu'il
connaisse son nom, ses arguments et les instructions qu'elle contient. La définition d'une fonction
s'appelle "déclaration".
La déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe suivante:
function Nom_De_La_Fonction(argument1, argument2, ...) {
liste d'instructions
}
Remarques:
- le mot clé function est suivi du nom que l'on donne à la fonction
- le nom de la fonction suit les mêmes règles que les noms de variables :
- le nom doit commencer par une lettre
- un nom de fonction peut comporter des lettres, des chiffres et les caractères _ et & (les espaces
ne sont pas autorisés!)
- le nom de la fonction, comme celui des variables est sensible à la casse (différenciation entre les minuscules et majuscules)
- Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthèses doivent rester présentes
- Il ne faut pas oublier de refermer les accolades
|
- Le nombre d'accolades ouvertes (fonction, boucles et autres structures) doit être égal au nombre de parenthèses fermées!
- La même chose s'applique pour les parenthèses, les crochets ou les guillemets!
|
Une fois cette étape franchie, votre fonction ne s'exécutera pas tant que l'on ne fait pas appel à elle quelque part dans la page!
Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom
(une fois de plus en respectant la casse) suivie d'une parenthèse ouverte (éventuellement des arguments)
puis d'une parenthèse fermée:
Nom_De_La_Fonction();
Remarques:
- le point virgule signifie la fin d'une instruction et permet au navigateur de distinguer les différents blocs d'instructions
- si jamais vous avez défini des arguments dans la déclaration de la fonction, il faudra veiller à les inclure
lors de l'appel de la fonction (le même nombre d'arguments séparés par des virgules!)
|
|
Veillez toujours à ce qu'une fonction soit déclarée avant d'étre appelée, sachant
que le navigateur traite la page de haut en bas (Pour éviter des erreurs de ce type on déclare généralement
les fonctions dans des balises SCRIPT situées dans l'en-tête de la page, c'est-à-dire entre les balises
<SCRIPT> et </SCRIPT>)
|
Grâce au gestionnaire d'évènement onLoad (à placer dans la balise BODY)
il est possible d'exécuter une fonction au chargement de la page, comme par exemple l'initialisation
des variables pour votre script, et/ou le test du navigateur pour savoir si celui-ci est apte
à faire fonctionner le script.
Il s'utilise de la manière suivante:
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Chargement() {
alert('Bienvenue sur le site');
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Chargement();" >
Javascript qui ne sert absolument à rien si ce n'est déranger vos visiteurs...
</BODY>
</HTML>
| Les paramètres d'une fonction
|
Il est possible de passer des paramètres à une fonction, c'est-à-dire
lui fournir une valeur ou le nom d'une variable afin que la fonction puisse effectuer
des opérations sur ces paramètres ou bien grâce à ces paramètres.
Lorsque vous passez plusieurs paramètres à une fonction il faut les séparer par des virgules,
aussi bien dans la déclaration que dans l'appel et il faudra veiller à bien passer le bon
nombre de paramètres lors de l'appel au risque sinon de créer une erreur dans votre Javascript...
Imaginons que l'on veuille créer une page Web qui affiche une boîte de dialogue
(les boîtes de dialogues sont à éviter dans vos pages car elles sont énervantes,
mais c'est toutefois une manière simple d'apprendre le Javascript) qui affiche un texte différent
selon le lien sur lequel on appuie.
La méthode de base consiste à faire une fonction pour chaque texte à afficher:
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Affiche1() {
alert('Texte 1');
}
function Affiche2() {
alert('Texte2');
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Chargement();" >
<A href="#" onClick="Affiche1();return(false)">Texte1</A>
<A href="#" onClick="Affiche2();return(false)">Texte2</A>
</BODY>
</HTML>
Ce qui donne ceci:
Texte1
Texte2
Il existe toutefois une methode plus "classe" qui consiste à créer
une fonction qui a comme paramètre le texte à afficher:
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Affiche(Texte) {
alert(Texte);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Chargement();" >
<A href="#" onClick="Affiche('Texte1');return(false)">Texte1</A>
<A href="#" onClick="Affiche('Texte2');return(false)">Texte2</A>
</BODY>
</HTML>
Ce qui donne ceci:
Texte1
Texte2
Résultat: Aucune différence visuellement mais vous n'avez plus qu'une seule fonction
qui peut vous afficher n'importe quel texte...
| Travailler sur des variables dans les fonctions
|
Lorsque vous manipulerez des variables dans des fonctions, il vous arrivera de constater que
vous avez beau modifier la variable dans la fonction celle-ci retrouve sa valeur d'origine dès
que l'on sort de la fonction...
Cela est du à la portée des variables, c'est-à-dire si elles ont été
définies comme variables globales ou locales.
- Une variable déclarée implicitement (non préc&eracute;dée du mot var)
sera globale , c'est-à-dire accessible après exécution de la fonction
- Une variable déclarée explicitement (préc&eracute;dée du mot var)
sera locale , c'est-à-dire accessible uniquement dans la fonction, toute référence à
cette variable hors de la fonction provoquera une erreur (variable inconnue)...
Lorsque vous faîtes appel à une fonction à partir d'un objet,
par exemple un formulaire, le mot clé this fait référence à
l'objet en cours et vous évite d'avoir à définir l'objet en tapant
window.objet1.objet2...
ainsi lorsque l'on passe l'objet en cours en paramètre d'une fonction, il
suffit
de taper nom_de_la_fonction(this) pour pouvoir manipuler cet objet à
partir de la fonction.
Pour manipuler les propriétés de l'objet il suffira de taper this.propriete
(où propriete représente bien sûr le nom de la propriété).
| Définir des objets avec les fonctions
|
Les navigateurs ont leurs propres objets avec leur propriétés respectives. Il
est toutefois possible de créer ses propres objets avec les propriétés
qu'on leur définit.
Imaginons que l'on veuille par exemple créer un objet arbre avec ses propriétés:
Il est possible de créer l'objet Arbre en créant une fonction
dont le nom est Arbre et qui définit les propriétés de l'objet
en cours grâce au mot-clé this, en passant
en paramètre chacune des propriétés:
function Arbre(Type, Taille, Age) {
Arbre.Type = Type;
Arbre.Taille = Taille;
Arbre.Age = Age;
}
Grâce au mot-clé new, il va être possible
de créer des instances de l'objet Arbre (c'est-à-dire
des objets possédant les propriétés de l'objet Arbre):
Arbre1 = new Arbre("peuplier", 14, 20)
On peut ainsi créer autant d'instances que l'on désire...
Il est de plus possible d'ajouter un objet existant en tant que propriété d'un autre objet.
Imaginons que vous créiez un objet proprietaire:
function Proprietaire(Nom, Prenom) {
Proprietaire.Nom = Nom;
Proprietaire.Prenom = Prenom;
}
Définissons maintenant l'objet Arbre comme suit:
function Arbre(Type, Taille, Age, Proprietaire) {
Arbre.Type = Type;
Arbre.Taille = Taille;
Arbre.Age = Age;
Arbre.Proprietaire = Proprietaire;
}
Il est alors possible de trouver le nom du propriétaire d'un arbre:
Arbre.Proprietaire.Nom
Ainsi que de le modifier si jamais le propriétaire change:
Arbre1.Proprietaire.Nom = 'Dupont';
Arbre1.Proprietaire.Prenom = 'René';
Cours de JavaScript en partenariat avec CommentCaMarche.net
N'hésitez pas à visiter cet excellent site contenant des cours sur presque tous les langages de programmation !
Annotations des visiteurs :
|
 De grocheteau - le 03-05-2005
Bonjour,
J'essaie depuis 2 jours, le mot clé new, pour créer un nouvel objet, et cela ne fonctionne pas, ni sur mon portable, ni sur le PC du boulot....
Ma fonction est la suivante :
<html>
<head>
<script language="Javascript">
<!--
function Objet(Nom,Taille){
Objet.Nom=Nom;
Objet.Taille=Taille;
}
-->
</script>
</head>
<body>
<script language="javascript">
<!--
Objet1=new Objet("Coucou",3);
document.write("Cet objet est l\'Objet1 et se nomme : "+Objet1.Nom);
// fin du script-->
</script>
</body>
</html>
|
|
J'ai fait plusieurs tests :
- déclarer ma fonction dans l'en-tête,
- ou bien déclarer ma fonction dans le body,
- la déclarer entre les balises <script> et </script> : c'est-à-dire sans language="Javascript".
Ensuite j'appelle ma fonction dans le body et là, rien ne fonctionne....
Faut-il que le navigateur prenne en charge un langage Javascript supérieur ?
Ai-je fait une erreur de synthaxe ?
Merci de votre aide.
Gégé | De grocheteau - le 03-05-2005
Re moi :
J'ai trouvé mon erreur, mais c'est pas vraiment explicite dans le cours :
les propriétés de l'objet dans la fonctione doivent être déclarées avec this :
function Objet(Nom,Taille){
this.Nom=Nom;
this.Taille=Taille;
}
|
|
Et là cela fonctionne parfaitement.
Gégé | De SquallLion - le 23-05-2005
A Gricheteau :
A quoi sert exactement ce script? Il doit écrire le résultat d'un objet mais de quelle manière il va le choisir? | De Pitu - le 28-04-2007
Ce script va écrire "Cet objet est l'Objet1 et se nomme : Coucou" (Pour l'exemple de Grocheteau.)
En effet, le code | document.write("Cet objet est l\'Objet1 et se nomme : "+Objet1.Nom); |
|
concatène la chaîne de caractères "Cet objet est l'Objet1 et se nomme : " avec le résultat de .
| De circular - le 21-06-2007
Pour que la fonction renvoie un résultat, il faut utiliser l'instruction return suivi de la valeur à renvoyer. Exemple :
function carre(x)
{
return x*x;
}
|
|
| De luciolle - le 09-10-2007
j'ai fait le test de grocheteau, et il y a un truc que je ne comprends pas :
à l'appel de la fonction objet 1 :
document.write("Cet objet est l\'Objet1 et se nomme : "+Objet1.Nom);
mais, si j'écris pas "cet objet est l'objet1 et se nomme :"
alors la page web affiche "NaN" au lieu de coucou. Pourquoi??? |
|
>> Poster une annotation sur ce cours
Les autres cours :
Home Page
