Fiche Javascript : Variables, opérateurs, boucles, fonctions

Objet de la fiche

État de la fiche

Plan de la fiche :

• | Avant propos |
• | Commentaires |
• | Variables et assignement |
• | Chaînes de caractères |
• | Les Opérateurs |
• | Choix conditionnels |
• | Boucles |
• | Fonctions et procédures |
• | Traitement des erreurs |
• | Bonnes habitudes |
• | Application au projet de site Web |

Avant propos

JavaScript est un langage de programmation qui peut être inclus dans des pages HTML. Grâce à ce langage, il est possible d’écrire des pages interactives. Contrairement à l’utilisation du CGI, les réponses aux événements déclenchés par le lecteur de la page se font au niveau du navigateur, sans nécessité d’une transmission vers le serveur d’où provient la page.

JavaScript ne doit pas être confondu avec Java, qui est un langage beaucoup plus complexe permettant de créer des applications autonomes.

Pour séparer les instructions et les exécuter en séquence, il faut faire suivre chaque instruction suivie d’un point-virgule.

Interprétation du code

Un code Javascript interne (délimité par <script> et </script> consiste en un ensemble d'instructions se terminant obligatoirement par un point virgule.
Les espaces, tabulations, retour à la ligne sont permis et même souhaitables pour une meilleure lisibilité mais ils ne sont pas pris en compte par l'exécuteur du code.

Il peut avoir plusieurs inclusions de code Javascript dans une même page HTML.

Commentaires

Afin de rendre le code encore plus compréhensible, il est bon d'ajouter des commentaires qui seront des chaines de caractères non interprétée.

Une autre façon de délimiter un commentaire est de le faire précéder par //. Dans ce cas tout ce qui se trouve à gauche de ce délimiteur, et sur la même ligne sera considéré comme un commentaire.

Ecriture du code

Le code Javascript peut être écrit dans un format libre :

• la présentation du code n'a pas d'importance,
• plusieurs instructions peuvent être écrites sur une même ligne,

Toutefois il est fortement recommandé de privilégier une mise en forme priviligiant la lisibilité.

Variables et assignement

Généralités

Les variables sont les lieux de mémorisation de chiffres, de caractères ou d'expressions. En utilisant l’assignement on attribue une valeur à une variable.

Par exemple : variable a = 10; ou variable b = "coucou";

Types de variables

En Javascript, il n'y a pas besoin de déclarer le type de variables que l'on utilise, contrairement à des langages évolués tels que le langage C ou Java pour lesquels il faut préciser s'il s'agit d'entier (int), de nombre à virgule flottante (float), de caractères (char), etc.

En fait, Javascript n'autorise la manipulation que de 4 types de données :

• des nombres : entiers ou à virgules.
• des chaînes de caractères (string) : une suite de caractères.
• des booléens : des variables à deux états permettant de vérifier une condition :  false: lors d'un résultat faux,  true: si le résultat est vrai.
• des variables de type null : mot clé pour indiquer qu'il n'y a pas de données.

Nom des variables

Les noms de variables peuvent être aussi long que l'on désire, mais doivent répondre à certains critères :

• un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un "_"
• un nom de variables peut comporter des lettres, des chiffres et les caractères _ et & (les espaces ne sont pas autorisés!)
• Les noms de variables ne peuvent pas être les noms suivants (qui sont des noms réservés) :
  abstract, boolean, break, byte, case, catch, char, class, const, continue,debugger, default, delete, do, double, else, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, infinity, instanceof, int, interface, label, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with ainsi que le nom des objets Javascript.

Visibilité des variables

Selon l'endroit où une variable est déclarée, celle-ci pourra être accessible (visible) de partout dans le script ou bien uniquement dans une portion confinée du code, on parle de « portée » d'une variable.

Lorsqu'une variable est déclarée sans le mot clé var, c'est-à-dire de façon implicite, elle est accessible de partout dans le script (n'importe quelle fonction du script peut faire appel à cette variable). On parle alors de variable globale.

La portée d'une variable déclarée de façon explicite (précédée du mot-clé var), dépend de l'endroit où elle est déclarée.

Une variable déclarée au début du script, avant toute fonction, sera globale. Elle peut être utilisée n'importe où dans le script .
Une variable déclarée explicitement dans une fonction aura une portée limitée à cette seule fonction, c'est-à-dire qu'elle est inutilisable ailleurs. On parle alors de « variable locale ».

Toute variable déclarée en dehors d'une fonction est globale, c'est-à-dire accessible et modifiable depuis n'importe quelle partie du script. Si vous n'êtes pas le seul à travailler sur un projet ou que les scripts sont nombreux, le risque de modification accidentelle de ces variables est grand. Par ailleurs, toute variable déclarée au sein d'une fonction sans le mot-clé var est potentiellement accessible par tout ce qui suit l'exécution de cette fonction. Pour limiter la portée des variables aux fonctions qui les contiennent, le mot-clé var est donc essentiel.

Notations abrégées pour certains types d’assignements.

Chaînes de caractères

Généralités

Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. On la représente par la suite de caractères encadrée par des guillemets simples (') ou doubles ("), sachant que les deux types de guillemets ne peuvent pas être mélangés pour une même chaîne, ce qui signifie que les guillemets, dans une chaîne de caractères, existent par paire.

Exemple : var maChaine="Bonjour à tous"; ou var maChaine='Bonjour à tous';

et non :

Caractères spéciaux

Il existe des caractères spéciaux à utiliser dans les chaînes pour simuler d'une part des caractères non visuels ou pour éviter au navigateur de confondre les caractères de la chaîne avec ceux du script, ces caractères sont précédés d'un antislash (\)

• \b : touche de suppression
• \f : formulaire plein
• \n : retour à la ligne
• \r : appui sur la touche ENTREE
• \t : tabulation
• \" : guillemets doubles
• \' : guillemets simples
• \\ : caractère antislash

Exemples d'application des caractères spéciaux :

Supposons que nous voulions déclarer la chaîne de caractères suivante :

Bonne "journée" à vous sur c:\windows

Voyons cette chaîne avec attention :

Architecture d'une chaîne de caractères

Une chaîne de caractère est en fait d'un tableau constitué de n caractères (n est donc le nombre de caractères), on note 0 la position du premier caractère (celui à l'extrême gauche), puis on les compte de gauche à droite en incrémentant ce nombre :

Une chaîne ayant n caractères aura son dernier caractère en position n-1 (ici, pour une chaîne de 18 caractères le dernier élément est à la position 17).

Les Opérateurs

Les opérateurs sont des symboles qui permettent de manipuler des variables, c'est-à-dire effectuer des opérations, les évaluer, ...
On distingue plusieurs types d'opérateurs :

• les opérateurs de calcul
• les opérateurs d'affectation : pratiques mais peu naturels pour un débutant, ces opérateurs ne seront pas décrits dans ce document.
• les opérateurs d'incrémentation
• les opérateurs de comparaison
• les opérateurs logiques
• les opérateurs bit-à-bit : peu utilisés,  ces opérateurs ne seront pas décrits dans ce document.
• les opérateurs de rotation de bit : ces opérateurs ne seront pas décrits dans ce document.
• les opérateurs de manipulation de chaînes de caractères.
• Les opérateurs conditionnels.
• Les opérateurs spéciaux.

Opérateurs de calcul

Opérateurs d'incrémentation

Opérateurs de comparaison

Ces opérateurs sont principalement utilisés dans le cadre de "choix conditionnels ou alternatives"

Opérateurs	Commentaires
>	strictement supérieur à
>=	supérieur ou égal à
<	strictement inférieur
<=	inférieur ou égal à
!=	différent de
==	Égalité de valeur.  Attention à ne pas confondre l'opérateur de comparaison == avec le signe = d'assignation.
!==	Non identité de valeur et de type. Les deux valeurs n'ont pas la même valeur ou bien sont de types différents.
===	Identité de valeur et de type

Opérateurs logiques

Ces opérateurs sont principalement utilisés dans le cadre de "choix conditionnels ou alternatives"

Opérateur de manipulation de chaîne

Opérateur conditionnel

Opérateurs spéciaux

L'opérateur  : +=

Ce n'est pas réellement un opérateur mais plutôt une simplification d'écriture lorsque l'on désire concaténer une valeur à la variable elle même.

L'opérateur : new

L'opérateur new est utilisé pour créer une instance d'un type d'objet défini par l'utilisateur ou de l'un des types d'objet prédéfinis Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp ou String.
On verra cela plus en détails dans les fiches relatives à la manipulation des objets javascript.

L'opérateur : virgule,

Cet opérateur est principalement employé à l'intérieur des boucles for (voir la partie boucles ci dessous), pour pouvoir mettre à jour plusieurs variables à chaque itération de la boucle.
On peut aussi l'utiliser lors de déclaration de variables de la façon suivante :

Déclaration classique
 var Mavariable1;
 var Mavariable2;
Déclaration utilisant l'opérateur virgule :
 var  Mavariable1, Mavariable2;

L'opérateur est aussi utilisé pour séparer les paramètres passés à une fonction.

L'opérateur : typeof()

Cet opérateur (unaire) permet de déterminer le type d'une variable.

Syntaxe : LeResultat = typeof (opérande);

Les parenthèses sont facultatives mais il est préférable de les écrire pour la clarté des scripts. L'opérateur typeof peut s'appliquer en association avec des choix conditionnels ou alternatives tels que définis dans la chapitre suivant.

L'opérateur : instanceof

Les possibilités de l'opérateur typeof sont insuffisantes lorsqu'il s'agit de reconnaître le type d'objet. En effet typeof dans le cas d'un objet renvoie objet mais ne dit pas s'il s'agit d'un objet tableau(Array), d'un objet date (Date) , d'un objet chaîne (String) ou de tout autre objet javascript. En complément à typeof  JavaScript met à notre disposition l'opérateur instanceof qui  permet de tester si une variable  correspond à un type donné.
Cet opérateur  renvoie true (vrai) si l'objet spécifié est du type spécifié ou false (faux) dans le cas contraire.

Syntaxe :

nomObjet instanceof typeObjet

où nomObjet est le nom de l'objet à comparer avec typeObjet et typeObjet un type d'objet, tel que Date ou Array.

Exemple :

L'opérateur : in

Cet opérateur renvoie true si la propriété spécifiée se trouve dans l'objet spécifié.

Syntaxe :

LaPropriete in MonObjet

LaPropriete est une chaîne ou une expression numérique représentant respectivement le nom d'une propriété ou l'indice d'un élément, et où MonObjetle nom de l'objet.
Exemple :
gares = new Array("Paris", "Lyon", "Marseille");
0 in gares renvoie true
6 in gares renvoie false
"Lyon" in gares renvoie false (vous devez spécifier un indice,  pas une valeur)
"length" in gares renvoie true (length est une propriété du type Array)
LesMotos = {marque:"Peugeot", modèle:"307", année:2010}
"marque" in LesMotos  renvoie true car marque est un indice.

L'opérateur : this

Cet opérateur est une facilité et une simplification de l'écriture javascript.

Exemple avec this

L'opérateur : delete

Cet opérateur supprime un objet, une propriété d'un objet ou un élément d'un tableau présent à un indice donné.

• delete monObjet; supprime l'objet référencé monObjet
• delete monObjet.cettePropriete; supprime cettePropriete à monObjet
• delete monObjet[indice]; supprime l'article indicé par [indice] du tableau monObjet. Lorsque vous supprimez un élément d'un tableau, la longueur du tableau n'est pas affectée bienque cet élément ne soit plus dans le tableau.
• delete propriete; uniquement valide à l'intérieur d'une instruction with.

Si la suppression réussit, la propriété ou l'élément se voit affecter la valeur undefined. L'opérateur delete renvoie true si l'opération est possible, et false si l'opération est impossible.
On ne peut supprimer que des variables déclarées implicitement mais pas celles déclarées avec le mot-clé var.

L'opérateur : void()

void () spécifie une expression JavaScript valide à évaluer sans renvoyer de valeur.
Exemple 1 : <a href="javascript:void(alert('coucou'))"> Cliquez ici pour afficher le résultat </a>

Exemple 2 : Création d'un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus.
<a href="javascript:void(0)">Cliquez ici pour ne rien faire</a>

Choix conditionnels ou alternatives

Les instructions conditionnelles s'exécutent ou non selon qu'une condition est vraie ou fausse. Ces instructions contribuent fortement à la dynamique des pages HTML.

Ces instructions utilisent les mots clé if (si), else (si non),case (cas), break (rupture), default (défaut), switch(Commutateur).

Condition à une alternative

Condition à deux alternatives

Condition alternative avec/ou sans autres alternatives

Condition à deux alternatives imbriquées 

Alternatives avec condition booléenne 

Alternatives successives

Syntaxes	Commentaires
switch(variable) { case valeur1: action1; action1; // ...; break; case valeur2: action2; action2; //...; break; case valeur3: action3; action3; //...; break; default : action action break; }	L'instruction switch permet de faire plusieurs tests de valeurs sur le contenu d'une même variable (chaîne de caractères ou variable). Si la variable est égale à valeur1 les instructions entre le case et le break correspondant seront exécutées. De même si la variable est égale à exécutées. Si aucune égalité n'est trouvée, les instructions entre le mot clé default et le break correspondant seront exécutées. attention à ne pas oublier break; en fin des instructions prévues pour chaque case
	Switch(valeur) { case '1' : alert("Valeur =1"); break; case '2': alert("Valeur =2"); break; default : alert(Différent de 1 ou 2); break; Testez valeur : 1 2 3
switch(variable) {  case valeur1:  case valeur2:  case valeur3:    action;    action;    ...;  break;  default :    action    action  break; }	Cette construction permet d'exécuter les mêmes actions pour plusieurs valeurs de la variable.
	Switch(valeur) { case '1' : case '2': case '3': alert (Valeur =1,2 ou 3); break; default : alert(Différent de 1, 2 ou 3); break; } Testez valeur : 1 2 3 4

Deux alternatives dans une seule condition 

A titre d'information, dans le cas ou une seule action conditionnelle est définie les parenthèses peuvent être omises

• if (condition) action;
• else {
•   action;
•   action;
•   …;
• }

Boucles

Les boucles permettent d'effectuer des opérations de manière répétitive.

Ces instructions utilisent les mots clé while (tant que), do (fait), for (pour), break (rupture), continue (continuer).

JavaScript propose plusieurs types de boucles itératives.

La boucle : while (tant que)

La boucle : do ... while

Les boucles

La boucle : for

La boucle : for...in

Les sorties de boucle

Les 2 commandes suivantes permettent de sortir d'une boucle, ou de ne pas exécuter une partie des instructions de la boucle.

La commande break;

La commande continue;

Attention aux pièges

La boucle infinie

Si la condition de boucle reste vraie malgré la modification de la variable on va construire une boucle dont on ne sortira jamais.

for (i=0; i >= 0; i++)

L'incrémentation de i ne changera pas le fait que la variable i restera toujours supérieure ou égale à zéro...

var cpt= 1;
do {
cpt=cpt + 1;
} while (cpt != 0 );

cpt ne sera toujours différent de 0.

Les conséquences de telles erreurs sont le blocage complet du navigateur. L'issue est de tuer la tache du navigateur pour ceux qui connaissent ou alors de couper et redémarrer le PC et surtout de ne pas rappeler la même page Web sinon mêmes conséquences. Si vous êtes le web master du site une correction rapide s'impose!

Fonctions et procédures

Généralités

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. 

L'utilisation des fonctions  permet :

• La simplicité et une meilleure clarté du code,
• Une taille de programme réduite car la même fonction peut être réutilisée  pour des actions identiques.
• Une meilleure maintenance et lisibilité du code.

L'intérêt des fonctions réside dans le fait de ne pas avoir à réécrire plusieurs fois le même code.

En JavaScript, les fonctions sont définies par le mot clé function.

Définition 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" et répond à la syntaxe suivante :

Nota :même si aucun argument n'est passé à la fonction on doit conserver les parenthèses : function plus() {   .....   }

Création d'une fonction

Une fonction est une variable un peu spéciale ; on peut lui réaffecter une valeur, la transmettre à une autre fonction, etc..

Il existe plusieurs façon de créer une fonction. Suivant la manière utlisé cela pourra avoir un impact sur l'utilisation des différentes varables.

La manière classique :

Par affectation d'une fonction anonyme à une variable :

Comme argument d'une autre fonction :

Appel des fonctions

Important : Pour toute la suite du chapitre on emploiera indifféremment les termes de paramètres ou arguments lorsque l'on parlera des informations passées à la fonction par le programme appelant.

Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (en respectant la casse) suivie d'une parenthèse ouverte (éventuellement des paramètres) puis d'une parenthèse fermée.

Nota : Dans cet exemple la valeur renvoyée par la fonction est affectée à la variable Résultat.

Fonctions et variables locales

Les fonctions nécessitent souvent des variables internes. Pour qu'une variable utilisée dans une fonction ne soit vue qu'à l'intérieur de la fonction il faut la déclarer avec le mot-clé var.
Si la valeur d'une variable locale est modifiée dans la fonction, la modification ne sera pas connue à l'extérieur de la fonction, en conséquence cette variable n'est pas visible au niveau du programme général.

Sans le mot-clé var  la variable sera considérée comme globale et sera donc visible à l'extérieur de la fonction.

Si on doit retenir le minimun ce sera que le monde extérieur n’a PAS accès aux variables déclarées dans la fonction (var), par contre la fonction a accès aux variables globales !

Passage des paramètres

Généralités

On peut 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.
Le passage de paramètres à une fonction se fait au moyen d'une liste d'arguments séparés par des virgules et entre parenthèses suivant immédiatement le nom de la fonction.

Le nombre d'arguments définis pour la fonction doit correspondre au nombre et au type de paramètres utilisés lors de l'appel de la fonction au risque de générer une erreur.

Exemples	Commentaires
function square(x) { return x * x; } // Appel fonction a = square (3); // renvoie 9 // Appel fonction a = square ("trois"); // renvoie NaN ( Not a Number)	1 paramètre de type entier attendu par la fonction
	1 seul paramètre lui aussi de type entier envoyé lors de l'appel
	Erreur : le type envoyé ne correspond pas à celui attendu par la fonction.
function aireRectangle(L,l){ return L*l; } // Appel fonction a = aireRectangle (3,4); // renvoie 12	Appel de fonction avec 2 paramètres

Types de paramètres (arguments)

Les variables sont passées par valeur, les objets par référence. Notez que les objets simples comme String, Boolean, Number sont vus comme des variables et à ce titre sont passés par valeur.

Lorsqu'une variable est passée en argument à une fonction, la valeur de la variable est copiée dans l'argument.

Pour les objets et les tableaux les variables qui permettent d'y accéder contiennent la référence vers l'objet. C'est cette la référence qui est copiée dans l'argument et non l'objet, ainsi Javascript fait automatiquement le lien entre la référence et l'objet sur lequel elle pointe..

Aucun argument

Des nombres entiers ou à virgules

Des chaînes de caractères

Des variables ou des constantes

Des expressions 

Des fonctions

Des booléens

Des objets

Des combinaisons

Des tableaux

Tout et n'importe quoi

Puisqu'un paramètre ou argument n'est qu'une simple variable, on peut trés bien passer ce que l'on souhaite, comme par exemple :

Nota : De façon générale, les paramètres formels (x, y, toto dans les exemples précédent) d'une fonction ne sont connus qu'à l'intérieur de la fonction.

Accéder aux paramètres depuis la fonction elle-même.

Javascript n'oblige pas à rédiger des fonctions avec nombre d'arguments préétablis. On peut ainsi définir une fonction sans aucun paramètre mais toutefois lui passer un certain nombre de d'informations. Un mécanisme simple permet à tout moment de compter et d'accéder aux paramètres passés à la fonction depuis celle-ci en utilisant l'objet arguments. Cet objet peut être traité comme un tableau reprenant l'ensemble des arguments (ou paramètres) passés à la fonction.

Connaitre le nombre d'arguments passés à la fonction : arguments.length

Connaitre la valeur de chaque argument : arguments[ x ]

Exemple

Cet exemple illustre l'utilisation du mécanisme permettant d'appeler une fonction en lui passant des arguments alors que cette dernière n'est pas définie avec des paramètres d'entrée. S'il permet de voir clairement comment utiliser les possibilités de l'objet arguments cette technique de construction de fonction (bien que non génératrice d'erreur javascript) est à bannir car génératrice de sources d'erreurs, et d'illisibilité du code.

Placement des fonctions

Les fonctions peuvent être placées :

• Dans la section HTML <head>,
• Dans des fichiers externes,
• Dans le corps de page dans la section <body>.

Important : Dans tous les cas il est impératif  que la fonction soit initialisée avant de faire appel à cette fonction. Toutefois pour ne pas polluer le corps du document il est fortement conseillé de regrouper les fonctions (sous forme de script ou sous forme de fichier externes) au début de la section <head>.

La page suivante ne fonctionne pas
<html> <head> <title>Nouvelle page 1</title> </head> <body> <script  type="text/javascript"> alert(plus(2,4)); </script> //................................................ <script  type="text/javascript"> function plus (x,y){ return x+y; } </script> </body> </html>	Lors du chargement de la page le navigateur tente d'afficher (alert) le résultat  de la fonction plus avec les paramètres 2 et 4 , mais cette fonction n'est pas encore chargée ni initialisée puisque positionnée après l'appel. On obtient une erreur de type ci dessous.
La page suivante  fonctionne correctement
<html> <head> <title>Nouvelle page 1</title> </head> <body> <input type="button" onclick="alert(plus(2,4))" /> <script> function plus (x,y){ return x+y; } </script> </body> </html>	L'appel à la fonction plus(2,4) ne pourra être effectué que lorsque la page sera chargée à l'aide du bouton  <input type="button" onclick="alert(plus(2,4))" />. Peu importe donc ou se trouve la fonction puisque à la fin du chargement de la page, celle ci sera obligatoirement chargée et initialisée.

Sortie de fonctions : return

L'instruction return est utilisée pour sortir d'une fonction, et  transférer le contrôle du programme au code appelant. Si cette instruction n'est pas présente l'accolade fermante en tiendra lieu pour le retour au code appelant, toutefois pour des raisons de clarté des programmes il est fortement conseillé de la conserver.

Sortie de programme sans valeur renvoyée

Le mot clé return sans valeur renvoyée  permet uniquement de "sortir" de la fonction. Plusieurs return peuvent être utilisés  dans une fonction, l'exécution sera interrompue au premier return rencontré.

Sortie de programme avec valeur(s) renvoyée(s)

Fonction anonyme ou sans identificateur

Une fonction anonyme est, comme son nom l'indique, une fonction qui n'est pas identifiée par un nom. Il s'agit en fait d'une syntaxe de programmation. Les fonctions anonymes, sont de courtes fonctions créées quand le besoin s'en fait sentir.

Ce type de fonction peut aussi servir d'argument pour d'autres fonctions ou pour faire des closures.

Cet isolement des variables à l'intérieur de la fonction anonyme n'empêche pas la communication avec le code global. Il suffit de procéder de la même façon qu'avec une fonction classique, c'est-à-dire comme ceci : (function(){return 'coucou';})();

Pour pouvoir l'utiliser plusieurs fois dans le corp d'un programme on peut aussi lui attribuer une variable : var toto = function(){alert('coucou');}, et on appelera la fonction de la manière suivante : toto();

Ce type  de fonction peut être utilisée comme argument d'une autre fonction, ou affectée à une variable. L'invocation d'une telle fonction se fait en utilisant le paramètre ou la variable.

Passage de paramètres

On peut aussi si besoin passer des paramètres comme le précise l'exemple précédent.

x est l'argument, y le paramètre passé à la fonction.

Fonctions imbriquées

On peut imbriquer des fonctions à l'intérieur de fonctions.

Nota : Une fonction imbriquée n'est visible que depuis sa fonction contenant.

Pour une meilleur clarté de votre code, évitez d'utiliser ce type de construction. Préférez plutôt la méthode suivante :

Fonctions récursives

Une fonction récursive est une fonction qui s'appelle elle-même . Il s'agit en quelque sorte d'une boucle. Comme dans le cas d'une boucle une fonction récursive à besoins de conditions de terminaison.

Procédures

Les procédures sont des fonctions qui ne renvoient aucune valeur.

 function hello(prenom) {
    alert("Bonjour, comment vas-tu " + prenom + " ?");
}

Fonctions de retour (callback functions)

Une fonction de retour (callback) est une fonction comme les autres. Sa particularité est qu'elle est appelée par une autre qui l'a reçu en tant que paramètre.

En javascript, il est possible de passer par référence une fonction en argument d'une autre fonction.

Les raisons d'utiliser les callback

• Eviter de dupliquer du code,
• Disposer de plus de fonctions génériques et polyvalentes,
• Facilités de maintenance grâce à un code plus lisible.

Structure d'un callback

Exemple

Les espaces de nom ou domaine ou espace de nomage

Généralités

Lorsque vous allez étoffer vos script vous pourrez être amené à utiliser des bibliothèques ou des des fonctions que vous aurez récupérées à droite ou à gauche. Il se peut que certains de ces éléments mal protégés viennent interférer sur votre code et en particulier écraser certaines variables ou fonctions ayant des noms identiques, ce qui aboutira sans doute à une erreur d'exécution que l'on peut difficilement anticiper et comprendre.

Il peut en être de même pour la gestion des évènements : gestion différente pour un même évènement, et là c'est plus coton à détecter.

La difficulté est que les espaces de nom n'existe pas à proprement parler en javascript

Si vous utilisez peu de JavaScript, et que vous n'avez pas le besoin de faire cohabiter plusieurs bibliothèquesou ou si vous comptez pas redistribuer vos propres bibliothèques, ces surplus de code ne sont pas nécessaires. Dans les autres cas (bibliothèque importante, redistribution ...), le fait de respecter ces règles permet d'en assurer la stabilité et la pérennité vis-à-vis de l'intégration et de l'interaction.

Closure ou Fermetures

Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (closure en anglais).

Exemple 1

L'exemple suivant montre une construction hypothétique qui permet de prendre concience de problèmes pouvant survenir dans les fonctions sans que l'on puisse s'en rendre compte de prime abord.

On va voir comment s'en prémunir grâce aux closures.

Pour cet exemple il s'agit d'une fonction qui déclenche (1s aprés son appel) la mise à jour d'un ensemble d'éléments HTML (div). Dans la vie réelle il aurait était plus simple et plus fiable de lancer le timer en d'hors de la fonction.

Exemple 2

On va voir une autre exemple plus concret mais plus coton à débugger

Traitement des erreurs

Durant le déroulement d'un script plusieurs types d'erreurs peuvent apparaitre.

Ces erreurs peuvent être dues à des défauts de programmation, des entrées utilisateurs mal gérées par le logiciel ou tout simplement inattendues car non prises en compte par le script comme par exemple des dépassement mémoires.

javascript met à disposition try et catch pour détecter et analiser les erreurs.

try catch et finally

• try permet de définir un block de code dont on va tester les erreurs potentielles durant l'exécution du code.
• catch permet de définir un block de code à exécuter, si une erreur se produit dans le déroulement du block de code défini par try.
• finally est du code optionnel que l'on peut dérouler par exemple en lieu et place du code principal qui a généré une erreur.

Syntaxe

Exemple

Gestion de l'erreur

L'objet Error

JavaScript possède un object erreur qui permet de disposer d'informations relatives à l'eereur qui vient de se produire.

2 propriétés sont disponibles pour cet objet.

• name donne le nom de l'erreur qui peut être :
  
  • SyntaxError : il s'agit d'un objet qui représente une erreur qui se produit lors de l'interprétation d'un code dont la syntaxe est invalide.
    Comme il s'agit d'un objet (qui va posséder des propriétés) et non d'une simple information il faut si on veut traiter ces informations , détecter dans catch s'il s'agit oui ou non de l'objet SyntaxError.
    Voici les informations disponibles sur cet objet :
    
    • Message : message d'erreur.
    • name : nom d'erreur.
    • fileName : chemin du fichier qui a causé l'erreur.
    • lineNumber : numéro de la ligne du fichier qui a causé l'erreur.
    • columnNumber : numéro de la colonne dans la ligne qui a causé l'erreur.
    • stack : traces de la pile d'appels.
  • ReferenceError : utilisation d'une variable non déclarée.
  • RangeError : utilisation d'un nombre hors des valeurs légales.
  • TypeError : type non répertorié. Exemple num = 1;num.toUpperCase(); ou on ne peut pas convertir un nombre en majuscule.
  • URIError : caractères non autorisés utilisés da la fonction URI. Exemple decodeURI("%%%").
• message donne le message concernant l'erreur.

Syntaxe générale du traitement des erreurs

• (err) est la référence de l'objet erreur disponible pour l'erreur survenue.
• alert(err.name + " " + err.message) affiche sous forme de chaine de caractères le contenu associé aux propriétés de cette erreur. Dans le test précédent : ReferenceError y is not defined

Exemple complet

Les bonnes habitudes

• Regroupez les fonctions en début de la section <head>
• Dans tous les cas de fonctions sans renvoi de valeurs ou de procédures j'utile systématiquement l'instruction  return pour terminer la fonction ou la procédure.
• Si des variables ne sont utilisées que pour une fonction particulière et pour rien d'autre, il faut les déclarer dans la fonction et non pas globales.
• Evitez le plus possible d'avoir recours aux variables globales.
• Attention : Si deux fonctions portent le même nom, c'est la dernière définie qui est exécutée et ce quelque soit les paramètres qui lui sont passés.

Application au projet de site web

Pas d"application pour le moment