JavaScript : les bases

Digression CSS3 : vous pouvez remarquer que dans ce tutoriel les titres sont numérotés automatiquement !
Pour davantage d'explications sur la numérotation automatique des titres via le CSS voir le "tutoriel CSS3" dans ce site !

Les différents chapitres

Introduction à JavaScript Premiers pas en JavaScript Les variables JavaScript Les conditions en JavaScript Les boucles en JavaScript Les fonctions en JavaScript Les tableaux à JavaScript

Introduction à JavaScript (JS)

Définition de JS

JS est un langage de programmation de scripts orienté objet.

Un langage de programmation

Comme tout langage de programmation on peut créer et manipuler des variables, définir et appeler des fonctions et on dispose de structures de contrôles (tests logiques, boucles).

Un langage de scripts

Cela signifie qu'il s'agit d'un langage interprété (code source exécuté par le navigateur).

Attention JavaScript peut être désactivé par le navigateur !

Un langage orienté objet

Le langage comprend des objets natifs mais on peut créer d'autres objets. Chaque objet dispose de méthodes et de propriétés.

Rôle de JS

JS c'est le langage de programmation pour HTML. Avec JS on peut animer non seulement des éléments HTML mais aussi des objets SVG (SVG est un langage de dessin qui s'intègre facilement dans une page web). Donc avec JS on peut créer un interaction entre la page web et le visiteur ; votre page devient dynamique ; on parlait avant de DHTML (Dynamic HTML).

Histoire du JS

Il ne faut pas confondre JavaScript avec Java. Brendan Eich s'est inspiré de Java pour créer JavaScript en 1995. Il travaillait alors pour Nestcape et donc Nestcape 2 fut le premier navigateur a disposer d'un interpréteur JS. Le langage fut ensuite standardisé sous le nom d'ECMAScript.

Comparaison JS et PHP

Le langage PHP permet aussi de dynamiser une page mais un navigateur est incapable d'interpréter du code PHP ! Dans le cas d'une page web contenant du PHP l'interprétation est faite par le serveur qui adresse du HTML au navigateur (au client). C'est pour cette raison que l'on parle de programmation côté client pour JS et côté serveur pour PHP.

Premiers pas en JavaScript

Exemple 1

Ci-dessous le code correspondant de la page :

<!doctype html> <html><head><title>nom du fichier : page1.htm</title> <meta charset = 'utf-8'> <style> h1{width : 800px ; margin-left : auto ; margin-right : auto ; } </style> </head> <body> <h1>Première page avec du JS </h1> <script> /* ce script affiche le périmètre et la surface d'un cercle de rayon 4 cm */ var vsurface = 4 * 4 * 3.14; // calcul de la surface dans la variable vsurface var vperimetre = (4 + 4) * 3.14; // calcul de la circonférence dans la variable vperimetre alert('circonférence du cercle : ' + vperimetre + ' cm' ) ; // affichage circonférence alert('surface du cercle : ' + vsurface + ' cm2' ) ; // affichage surface </script> </body></html>
Testez cette page !

Commentaire du code

Le code JS doit être écrit à l'intérieur du conteneur SCRIPT c'est à dire entre la balise <script> et la balise </script>
Le script comprend des instructions et des commentaires.
Une instruction se termine impérativement par un point-virgule.
Un commentaire sur plusieurs lignes commence par /* et se termine par */
Un commentaire de fin de ligne se place après le point-virgule et est précédé de 2 "slashs" (barres obliques).

Le paramètre de la fonction alert est une expression avec emploi de l'opérateur de concaténation (+)
alert('surface du cercle : ' + vsurface + ' cm2' ) veut dire : afficher dans la boîte de dialogue la chaîne 'surface du cercle :' suivie du contenu de la variable vsurface suivie de la chaîne 'cm2'

Les fonctions

Dans le script JS de la page nous avons appelé deux fois la fonction alert. Il s'agit d'une fonction native de JS ! Donc nous n'avons pas besoin de la définir.
Pour appeler une fonction dans une instruction il faut la citer puis indiquer entre parenthèses un ou plusieurs paramètres (on dit aussi arguments).

Le caractère +

Attention en JS le caractère + peut selon le contexte signifier addition ou concaténation ...

Emplacement du code JS

Code JS interne

Dans la page nommée "premiers_pas1.htm" le code JS est dans la page (on parle de code JS interne). Le code JS est placé dans le conteneur SCRIPT c'est à dire entre la balise ouvrante <script> et la balise fermante </script>
Mais où positionner le conteneur SCRIPT ?
Par le passé il était conseillé de positionner le conteneur SCRIPT à l'intérieur du conteneur HEAD. C'était maladroit. En effet le navigateur charge la page séquentiellement le code. Donc dans cette hypothèse il va charger le code JS avant les éléments HTML. Si le code JS est lourd l'affichage des objets HTML de la page va donc être ralenti !

Mais ce n'est pas le plus grave. Imaginez que le code JS manipule des éléments HTML et que de surcroît il s'exécute automatiquement dès son chargement. Vous aurez alors un "plantage" !
En effet les éléments HTML que le script est censé manipuler n'ont pas encore été créés ...

Il est donc préférable (comme nous l'avons fait dans la page "premiers_pas1.htm") de placer le code JavaScript dans le conteneur BODY mais après tous les éléments HTML donc juste avant </body>.

Code JS externe

Imaginons que dans plusieurs pages nous ayons besoin du même code JS. Il serait idiot de dupliquer le script dans chaque page. Comme pour le CSS nous pouvons externaliser le JS ! Nous créons alors un fichier d'extension .js que nous nommons cercle.js et qui ne contient que du code JavaScript !

Le contenu du fichier "cercle.js"

Dans ce fichier les balises <script> et </script> sont alors inutiles puisque ce fichier ne contient que du JS !

		/* ce script affiche le périmètre et 
		la surface d'un cercle de rayon 4 cm */
		var vsurface = 4 * 4 * 3.14; // calcul de la surface dans la variable vsurface
		var vperimetre = (4 + 4) * 3.14; // calcul de la circonférence dans la variable vperimetre
		alert('circonférence du cercle : ' + vperimetre + ' cm' ) ; // affichage circonférence
		alert('surface du cercle : ' + vsurface + ' cm2' ) ; // affichage surface 

Le code de la page web "premiers_pas1.htm" devient alors :

<!doctype html> <html><head><title>nom du fichier : page1.htm</title> <meta charset = 'utf-8'> <style> h1{width : 800px ; margin-left : auto ; margin-right : auto ; } </style> </head> <body> <h1>Première page avec du JS </h1> <script src = "cercle.js" ></script> </body></html>

Remarque : Alors que le lien vers un fichier CSS se fait avec la balise link, le lien vers un fichier JS se fait avec le conteneur SCRIPT et l'attribut src
Ici on suppose que la page et le fichier de script sont dans le même dossier.

Les variables en JavaScript

Dans la page précédente nous avons utilisé deux variables : vsurface et vperimetre.

Déclaration d'une variable

Pour déclarer une variable il faut utiliser dans l'instruction le mot clé var suivi du nom de la variable. Le nom de la variable ne peut comprendre que des lettres, des chiffres, l'underscore (tiret bas) et le symbole $. Les autres caractères sont interdits !
La première lettre ne peut être un chiffre.
Le nom de la variable ne peut être un mot clé (ou mot réservé) du langage JS. Ainsi une variable ne peut être nommée function, var, break, for, try, etc..

J'ai pour habitude de préfixer les variables de la lettre v (v comme variable) et d'utiliser des mots français

Attention JS est sensible à la casse. vsurface et Vsurface sont deux variables différentes !
Si vous devez déclarer plusieurs variables vous pouvez le faire en une seule instruction.
Exemple : var vsurface, vperimetre ;

Les types de données

Dans beaucoup de langage la déclaration d'une variable consiste à donner un nom et un type à la variable.
Dans ce type de langage une variable de type integer, par exemple, ne pourra stocker que des numériques entiers.
JS est beaucoup plus permissif. Une même variable pourra stocker successivement un numérique puis une chaîne et enfin une valeur logique.

Exemple

Le code de la partie BODY de la page ci-dessous :

<body> <h1>Les types de données</h1> <script> var vtest ; // vtest contient successivement une donnée string puis number et enfin boolean vtest = 'bonjour' ; alert(vtest + " est de type " +typeof vtest) vtest = 3.14 ; alert(vtest + " est de type " + typeof vtest) vtest = true ; alert(vtest + "est de type " + typeof vtest) </script> </body>
Testez cette page

Exécution du code

Commentaire

La variable vtest est successivement de type string puis de type number et enfin de type boolean. Donc en JS le type d'une variable est fonction du type de son contenu.
Remarquez que grâce à l'opérateur de concaténation (+) utilisé dans la fonction alert on peut construire de véritables phrases .

Les opérateurs arithmétiques

Les caractères utilisés

On utilise les caractères +, -, *, /, %
% (modulo) : reste de la division entiere
+ : Attention ! + Signifie addition si les termes sont de type number ; concaténation si les termes sont de type string.

Les simplifications syntaxiques

Exemple 1 : vous voulez ajouter 2 à la variable vcompteur:
vcompteur = vcompteur + 2 ; // première solution
ou : vcompteur+=2 ; // deuxième solution

Exemple 2 : vous voulez retirer 2 à la variable vrebours:
vrebours = vrebours -2 ;
ou : vrebours -= 2 ;

Nous avons aussi les opérateurs : /= et *= pour simplifier l'écriture des divisions et multiplications.

La conversion de types

Exemple

		 var vpremier = prompt('tapez un entier') ; // saisie et affectation premier entier 
		 var vdeuxieme = prompt('tapez un entier') ; // saisie et affectation deuxième entier
		 var vsomme = vpremier + vdeuxieme ; // addition des deux termes
		 alert('somme des deux entiers est égale à : ' + vsomme) ; 

Testez ce script !

La fonction prompt permet à l'utilisateur de saisir une donnée qui est ensuite affectée à la variable déclarée dans la même instruction.

Exécution :
Saisissez 12 puis 12 !
Le script affiche 1212 ... et non pas 24 !
Il y a eu concaténation et non pas addition !

En effet toute saisie avec la fonction native prompt est de type string même s'il s'agit d'une suite de chiffres.
Ici nous avons saisi la chaîne "12" puis la chaîne "12" donc le "+" pour deux chaînes provoque une concaténation !

N'en concluez pas qu'il est impossible en JS d'additionner deux données saisies au clavier !
Il suffit de convertir chaque chaîne en un entier (ou réel) puis de procéder à l'addition.

Script corrigé (extrait) :

	...
	var vsomme = parseInt(vpremier) + parseInt(vdeuxieme) ; // addition des deux termes
	...

Testez le script débuggé !

Seule la troisième instruction a été modifiée !
Nous employons la fonction parseInt() pour convertir une chaîne en un numérique entier. Il faut bien sûr que la chaîne soit une suite de chiffres.
Notez que le "i" de parseInt est en majuscule !
parseInt est un mot composé (le mot parse suivi du mot int).

En JS lorsqu'un nom de fonction native est un mot composé la première lettre de chaque mot est en majuscule mais seulement à partir du deuxième mot seulement.

Et si on oublie de mettre en majuscule le i de parseInt ?
Et bien le script "plante" et la console JS du navigateur indique une erreur :
Uncaught ReferenceError: parseint is not defined
Donc faites attention. Le "i" majuscule dans parseInt c'est pas pour faire joli. C'est indispensable !

Les conditions en JavaScript

La condition if

Exemple

Le script (sans le conteneur SCRIPT) :

		var vage = prompt('tapez un votre âge sous forme d\'un entier') ; 
		vage = parseInt(vage) ; // conversion en entier 
		if(vage >= 60) {alert(vage + " ans  donc vous êtes senior") ; }
		if(vage < 60) {alert(vage + " ans donc vous êtes encore jeune"); }

Testez ce script !

Commentaire du code

Il y a deux conditions.
Une condition est entre parenthèse après le mot réservé if.
Une condition est une expression logique qui retourne une valeur logique (un booleen : true ou false).
Si la première condition retourne true alors il y a affichage du message : "vous êtes senior".
Si la deuxième condition retourne true alors il y a affichage du message : "vous êtes encore jeune".
Ici les accolades sont facultatives puisqu'il n'y a qu'une instruction en cas de test vérifié.

Syntaxes :

	if (condition) 
		{ bloc d'instructions 	}
	OU 
		if (condition) instruction unique ; 

Les opérateurs de comparaison

Dans chacune des trois conditions l'expression logique est basée sur un opérateur de comparaison.
Nous avons utilisé : >= (supérieur ou égal) et < (inférieur à ) mais il existe aussi :

Opérateurs logiques

Le script de l'exemple

		var vmoyenne  = prompt('tapez la moyenne à l\'examen') ; 
		vmoyenne = parseInt(vmoyenne) ; // conversion en entier 
		if(vmoyenne >= 12) alert ("Moyenne supérieure ou égale à 12 donc vous êtes admis"); 
		if(vmoyenne >= 10 && vmoyenne < 12) alert("oral de rattrapage !"); 
		if(vmoyenne < 10) alert("refusé !"); 

Testez ce script !

Commentaire du code

Remarquez que la chaîne qui est l'argument de la fonction prompt contient une apostrophe . Donc il faut la délimiter la chaîne soit par des doubles quotes (") soit par des simples quotes (') mais à condition d'échapper alors l'apostrophe (\')

Examinons la deuxième condition. Traduisons l'expression de condition : "si vmoyenne supérieure ou égale à 10 et inférieure à 12" . Nous avons utilisé un opérateur logique dans l'expression.

La condition if ... else (en français :si ... sinon)

Exemple

Reprenons le thème précédent. Nous aurions pu écrire plus simplement :

...
	if (vage >= 60) { alert(vage + ' ans donc vous êtes senior') ; }
	else { alert(vage + ' ans donc vous êtes encore jeune) ; }
...

Que ce soit dans le si ou dans le sinon les accolades sont ici facultatives puisqu'il n'y a à chaque fois qu'une instruction.
Elles deviennent obligatoires en cas de bloc d'instructions.

Les "if... else" imbriqués

Thème : affichage du nom du département à partir de son code minéralogique.
On limite à la nouvelle région "Hauts de France".

Le script :

	var vcodepostal  = prompt('tapez votre code postal :  59 ou 60 ou 62 ou 80 ou 02') ; 
		vcodepostal = parseInt(vcodepostal) ; // conversion en entier 
		if(vcodepostal == 2) alert ("Vous résidez dans l'Aisne"); 
			else if ( vcodepostal == 59) alert("Vous résidez dans le Nord") ;
				else if ( vcodepostal == 60) alert("Vous résidez dans l'Oise") ;
					else if (vcodepostal == 62) alert("Vous résidez dans le Pas de calais") ; 
						else if (vcodepostal == 80) alert("Vous résidez dans la Somme") ;
							else alert("erreur de saisie"); 

Testez ce script !

Commentaire

Mais comment fonctionne cette structure ?
Si la première condition retourne false alors il y a examen du deuxième test. Si le deuxième test retourne false alors examen du troisième test et ainsi de suite ...

La condition switch

Reprenons le thème précédent (affichage du nom du département en fonction du code minéralogique). Il y a une autre solution avec la structure switch (cas de)

Le script :

		var vcodepostal  = prompt('tapez le code du département :  02 ou 59 ou 60 ou 62 ou 80') ; 
		vcodepostal = parseInt(vcodepostal) ; // conversion en entier 
		switch(vcodepostal)
		{
			case 2 : alert('Aisne'); break ; 
			case 59 : alert('Nord'); break ; 
			case 60 : alert('Oise'); break ; 
			case 62 : alert('Pas de calais'); break ; 
			case 80 : alert('Somme'); break ; 
			default : alert('erreur de saisie') ; 
		} // fin switch 

Testez ce script !

Fonctionnement du code

Reconnaissez que c'est beaucoup plus clair ...

Si vcodepostalégal à 2 alors affichage de "Aisne" puis sortie du "switch" (grâce à l'instruction break) sinon examen du case suivant.
L'instruction associée à default est exécutée si aucun des cas n'est vérifié.

Attention la structure switch souffre cependant d'un gros inconvénient ...
L'opérateur de comparaison (implicite d'ailleurs) est forcément égal. Impossible d'écrire, par exemple : case >=60.

Solution plus réaliste

Le risque d'erreur de saisie avec l'instruction prompt est très très élevé.
Il faut mieux utiliser une liste déroulante (donc un contrôle de formulaire) pour la saisie du code minéralogique.

Le code correspondant (extraits) devient alors :

<body> <h1>Les départements de la région Hauts de France</h1> <select id ="liste" onchange ="ftrait()" > <option value ="2">code 02</option> <option value ="59">code 59</option> <option value ="60">code 60</option> <option value ="62">code 62</option> <option value ="80">code 80</option> </select> <script> function ftrait() { var vcodepostal = document.getElementById("liste").value ; vcodepostal = parseInt(vcodepostal) ; // conversion en entier switch(vcodepostal) { case 2 : alert('Aisne'); break ; case 59 : alert('Nord'); break ; case 60 : alert('Oise'); break ; case 62 : alert('Pas de calais'); break ; case 80 : alert('Somme'); break ; } // fin switch } // fin fonction </script> </body>

La saisie du code minéralogique se fait avec une liste déroulante (donc un outil HTML). Aucun risque d'erreur de saisie.
Remarquez que la liste a un identifiant : (id ="liste").
A chaque fois que la valeur de ce contrôle change il y a appel d'une fonction JavaScript ftrait().

Dans la fonction la variable vcodepostal récupère la dernière valeur de la liste grâce à l'instruction : var vcodepostal = document.getElementById("liste").value ;

Peut-être avez vous du mal à bien comprendre toutes les subtilités de ce code. Mais rassurez vous un peu plus loin dans ce chapitre j'aborde la création de fonctions en JavaScript.
Après on retrouve la structure switch.
Testez la version améliorée !

Les boucles en JavaScript

Définition

Une boucle est un bloc d'instructions qui est exécutée N fois. Chaque passage dans la boucle est appelée itération.
Le bloc d'instructions est exécuté tant qu'une condition est vraie. Souvent la condition est basée sur une variable qui fait fonction de compteur ou de compte à rebours. C'est à dire que la variable doit être incrémentée (sa valeur augmente de 1) ou être décrémentée (sa valeur diminue de 1) à chaque itération.

La dernière solution est la plus répandue.

La boucle while

Syntaxe

	while (condition)
	{
		instruction1 ; 	instruction2: ...   	instructionN; 
	}

Fonctionnement

Le bloc d'instructions est exécuté tant que la condition retourne true. Il y a sortie de la boucle dès que la condition retourne false.
Le bloc d'instructions peut très bien ne jamais être exécuté ; il suffit que la condition retourne toujours false !
Si la condition est toujours vraie alors la boucle va se répéter à l'infini ... Ce qui est gênant.

Attention même si le bloc d'instructions ne comprend qu'un instruction la paire d'accolades est obligatoire.

Contrôle de saisie d'un réel

Le script

var vnote ='aaa'; alert('attention le séparateur décimal est le point et non pas la virgule !) ; while (isNaN(vnote)) { vnote = prompt('tapez une note entière ou décimale') ; } alert('saisie correcte');
Testez ce script !

La saisie d'un nombre réel est délicate pour un francophone. Il risque, par exemple, de saisir 10,5 et non pas 10.5 ce qui provoquera une erreur (voir boucle for). Donc tant que le contenu de la variable vnote n'est pas au format numérique (caractères : chiffres et un point) alors il faut recommencer la saisie.
Nous avons utilisé la fonction isNaN argumenté avec la variable vnote. isNaN est fonction JS qui est l'acronyme de "is Not a Numéric". Donc l'expression isNaN(vnote) retourne true si vnote contient, par exemple, 'aaa' (valeur initale) ou 10,5.

Il faut qu'il y ait au moins une itération (pour pouvoir effectuer la saisie). Il faut donc initialiser la variable vnote avec une valeur non numérique afin la condition du while retourne true.

La boucle do ... while

Syntaxe

	do 
		{ 
			instruction1 ; instruction2; ....		; instructionN  ; 
		}
	while (condition) ; 

Il y a forcément au moins une itération puisque le test se fait en fin de boucle !

La boucle "do ... while"

Le script

		var vnote  ; 
		alert('attention le séparateur décimal est le point et non pas la virgule !') ; 
		do  
			{ vnote = prompt('tapez une note entière ou décimale') ; 	}
		while (isNaN(vnote)) ; 
		alert('saisie correcte'); 
Testez ce script !

Ce programme fait exactement la même chose que le précédent : forcer l'utilisateur à répéter la saisie tant que le format n'est pas numérique. Mais la structure do ... while est mieux adaptée puisqu'il y a forcément une itération et c'est bien ce que nous voulons.

La structure for

Syntaxe

	for (initialisation ; condition ; incrémentation )
		{ instruction1 ; instruction2; ....	; instructionN  ; }

Moyenne de trois notes

Le script correspondant

		var note ; vsomme = 0 ; 
		for(var vcompteur = 0; vcompteur < 3 ; vcompteur++)
		{
			vnote= prompt('tapez une note entière ou décimale') ; 
			vsomme += parseFloat(vnote) ; 
		// nouveau cumul de points après conversion de la chaîne en réel
		} // fin for 
		var vmoyenne = vsomme / vcompteur ; 
		alert('points : ' + vsomme); 
		alert('moyenne : ' + vmoyenne) ; 

Testez ce script !

Ce programme permet de calculer la moyenne de trois notes qui peuvent être décimales.

Observons attentivement ce qui se trouve entre parenthèses après le mot réservé for. On gère le compteur de notes (variable vcompteur) et qui permet de contrôler le nombre d'itérations.

Il n'y a pas de quatrième itération puisque vcompteur n'est plus inférieur à 3 mais égal à 3 !
Dans la boucle il faut saisir une note et calculer le nouveau cumul de points. Comme on veut pouvoir saisir un réel, il faut convertir la chaîne au format numérique en un réel avec la fonction parseFloat.

En effet malgré un format numérique incorrect il n'y a pas plantage car la fonction parseFloat convertit la chaîne à l'entier inférieur. Donc dans ce cas le script fait la moyenne de trois entiers 10.

Synthèse

Améliorons le programme précédent en y ajoutant un contrôle de saisie.

Le script amélioré

var vnote ; vsomme = 0 ; alert('attention le séparateur décimal est le point et non pas la virgule') ; for(var vcompteur = 1; vcompteur < 4 ; vcompteur++) { do { vnote= prompt('tapez note de rang ' + vcompteur) ; } while (isNaN(vnote)) ; vsomme += parseFloat(vnote) ; } // fin for var vmoyenne = vsomme / (vcompteur -1); alert('points : ' + vsomme); alert('moyenne : ' + vmoyenne) ;
Testez ce script !

Ce programme est une amélioration du précédent. Il y a calcul de la moyenne de trois notes décimales mais en plus il y a un contrôle de saisie.
On a donc une structure for qui contient une boucle do ... while
Tant que la saisie est incorrecte on reste dans la même itération de la boucle for.

Afin d'aider la personne qui effectue la saisie on lui précise le rang de la note à saisir en intégrant la variable vcompteur dans la légende de l'instruction prompt.
Il faut afficher successivement : "note de rang 1 ... note de rang 3 " donc vcompteur doit être initialisé à 1 (et non pas 0).
Pour que la boucle for s'exécute trois fois il faut boucler tant que vcompteur < à 4.
Et pour calcule la moyenne il faut diviser les points par (vcompteur - 1) !

Les fonctions en JavaScript

Les fonctions natives de JS

Nous avons déjà utilisé dans nos scripts des fonctions JS natives suivantes : alert(), prompt(),isNaN(), parseInt(), parseFloat(), etc.

Ces fonctions sont dites natives car elles sont déjà définies dans le langage.

Vous savez que pour utiliser une fonction (on dit appeler une fonction) il faut lui passer un argument (ou paramètre). Ainsi, par exemple, il faut argumenter isNaN avec une variable. Il faut aussi respecter la casse sinon il y aura "plantage". Ainsi si vous écrivez : isnan(vnote) la console javaScript affichera le message : "isnan is not defined"

Parmi les fonctions natives il existe aussi la fonction confirm Cette fonction permet de saisir une valeur logique c'est à dire true ou false.

Exemple d'utilisation de la fonction native confirm()

var vmajeur = confirm("si vous avez plus de 18 ans cliquez sur OK sinon cliquez sur Annuler ou X ") ; if (vmajeur) alert("vous êtes majeur") ; // si vmajeur contient true if (vmajeur==false) alert("vous êtes mineur"); // si vmajeur contient false
Testez ce script !

Comme avec la fonction prompt une boîte de dialogue s'affiche mais avec deux boutons OK et Annuler et en légende l'argument de la fonction. Donc si vous cliquez sur OK vous saisissez true et si vous cliquez sur le bouton Annuler vous saisissez false.

Créez ses propres fonctions

Le nombre de fonctions natives est limité et ne couvre pas tous les besoins. Donc un script contient souvent une partie dans laquelle on définit ses propres fonctions puis une partie dans laquelle on fait appel à ces fonctions.

Remarque : Si on doit appeler les mêmes fonctions personnelles dans différentes pages il est préférable d'externaliser leurs définitions c'est à dire de les définir dans un fichier de script (extension : .js).

Fonctions personnelles : niveau 1

Le script

function fsurface_cercle() { // fonction qui calcule la surface d'un cercle de rayon 2 cm var vrayon = 2 ; var vsurface = vrayon * vrayon * 3.14 ; alert("surface du cercle : " + vsurface + "cm2") ; } // fin fonction fsurface_cercle() ; //appel fonction fsurface_cercle(); // appel fonction alert(vrayon); // erreur : vrayon is not defined
Testez ce script !

Pour créer une fonction il faut utiliser le mot réservé function suivi du nom que vous donnez à cette fonction.
Ici il s'agit d'une fonction basique qui se nomme fsurface_cercle.
Cette fonction calcule la surface d'un cercle de rayon 2cm. Il n'y a donc pas d'argument à passer.
Dans le programme principal on appelle deux fois la fonction puis on demande l'affichage de vrayon.
Cette instruction ne s'exécute pas. La console javaScript affiche le message : "vrayon is not defined"
En effet vrayon est une variable créée dans le cadre de la fonction fsurface_cercle donc elle est inconnue du programme principal.

Toute variable déclarée dans le cadre d'une fonction n'est utilisable qu'au sein de cette fonction. On dit que la variable est locale.

Donc vrayon est une variable locale et ne peut être manipulée dans le programme principal.

Fonctions personnelles : niveau 2

Fonction avec passage de paramètres !

Le script de la page

function fsurface_cercle(vrayon,vunite) { var vsurface = vrayon * vrayon * 3.14 ; alert("surface du cercle : " + vsurface + vunite + 's carrés') ; } // fin fonction fsurface_cercle(2,"cm") ; //appel fonction avec des constantes comme paramètres var rayon = prompt('rayon du cercle'); var unite = prompt('unite de mesure (cm ou dcm ou mètre') ; fsurface_cercle(rayon, unite); // appel fonction avec des variables comme paramètres alert (vsurface) ; // erreur : vsurface is not defined
Testez ce script !

Cette fonction calcule la surface d'un cercle quelque soit son rayon et l'unité de mesure (cm ou dm ou mètre).
Il s'agit donc d'une fonction avec passage de deux arguments (ou paramètres).
Pour appeler cette fonction il faut donc indiquer en parenthèses les valeurs des deux arguments (constantes ou variables).
Dans le programme principal on appelle deux fois la fonction. Les paramètres dans le premier appel sont des constantes et dans le deuxième appel les paramètres passés sont des variables ; variables renseignées grâce à des instructions de saisie.

Pourquoi la dernière instruction est fausse ???

parce que la variable vsurface est définie au niveau de la fonction. Il s'agit d'une variable locale qui est inconnue du programme principal !

Fonction personnelle retournant une valeur

Les fonctions natives retournent une valeur. Ainsi la fonction ParseInt(chaîne) retourne un entier (ou NaN si la chaîne n'est pas une suite de chiffres).
Il est bien sûr possible de créer des fonctions personnelles retournant une valeur.

Pour qu'une fonction personnelle retourne une valeur vers le programme principal il faut que dans sa définition elle comporte l'instruction return suivie de la valeur à retourner. La fonction ne peut retourner qu'une seule valeur !

Exemple de fonction personnelle retournant une valeur

Le script :

		function fpuissance2(nombre) 
		{
			var puissance2  = nombre * nombre ; 
			return puissance2 ; // valeur retournée vers programme principal
		} // fin fonction
		
		var vnombre = prompt('tapez un nombre entier '); 
		var vresultat = fpuissance2(vnombre); 
		alert(vnombre + ' à la puissance 2 donne : ' + vresultat) ; 
		alert("4 à la puissance 2 donne : " + fpuissance2(4)) ; 

Testez ce script !

La fonction fpuissance2 calcule le carré d'un nombre.
Dans le programme principal on appelle deux fois la fonction fpuissance2. La première fois on passe en paramètres une variable (vnombre) puis pour le deuxième appel on passe en paramètre la constante 4.

Fonction avec en paramètre le mot this

Le paramètre passé lors de l'appel d'une fonction peut être le mot réservé this qui désigne l'objet courant (ou actif).

Exemple avec le mot réservé this

... <body> <h1>fonction avec pour argument "this"</h1> <p class ="remarque">Cliquez une image pour obtenir des infos sur celle-ci ! <img src ="../images/palourde_royale.jpg" height ="200" alt ='Palourde royale' onclick ='fafficher(this)'> <img src ="../images/nautile.jpg" alt ='Nautile' height ="200" onclick ='fafficher(this)'> <script> function fafficher(image) { var chemin = image.getAttribute("src"); ; var texte = image.getAttribute("alt") ; alert("chemin image : " + chemin ); alert ("texte alternatif de l'image :" + texte) ; } // fin fonction </script> ...
Testez cette page !

Si je clique sur la première image j'ai des infos sur celle-ci : valeurs des attributs src et alt. Si je clique sur la deuxième image j'ai les mêmes infos pour la deuxième image.
En effet dans le premier cas la variable image de la fonction fafficher cible la première image et dans le deuxième cas elle référence la deuxième image.

Notez bien la syntaxe : ... onclick ='fafficher(this)' ...

this est un mot réservé de JavaScript très pratique. Il désigne l'élément HTML courant (la cible de la manipulation).

Attention pour qu'une fonction s'applique à l'élément HTML courant il faut employer le mot magique this dans l'appel de fonction mais surtout pas dans le code de la fonction.

La méthode getAttribute permet de récupérer les valeurs des attributs d'un objet HTML. Les attributs d'une image sont src, alt, etc.

Les fonctions anonymes

Désormais avec les fonctions dites anonymes il est possible dans une même instruction d'avoir l'appel et la définition d'une fonction.

Thème : nous voulons que le visiteur puisse modifier la couleur des textes définies par la feuille de style.
Nous allons programmer ce thème "à l'ancienne" puis de façon moderne c'est à dire avec des fonctions anonymes.

Exemple 1

Programmation JavaScript traditionnel !

Le code de la partie BODY

... <h1>Modification d'une propriété CSS pour des éléments de la page</h1> <p>Blabla ... <br>Blabla ... <br>Blabla ... </p> <button onclick = "fcouleur('green')">Couleur de texte : vert </button> <button onclick = "fcouleur('red')">Couleur de texte : rouge </button> <button onclick = "fcouleur('blue')">Couleur de texte : bleu </button> <script> // variables globales var titre = document.querySelector('h1') ; var texte = document.querySelector('p') ; function fcouleur(vcouleur) { titre.style.color = vcouleur; texte.style.color = vcouleur; } </script> ...
Testez !

Commentaire du code

Pour chaque bouton on a intégré un événement. Par exemple : onclick = "fcouleur('green')
Ce qui veut dire que si vous cliquez sur ce bouton vous appelez la fonction fcouleur avec passage d'une valeur : green.
Dans le script on déclare deux variables : titre et texte.
Ces variables sont déclarées en dehors de toute fonction donc elles sont globales. C'est à dire qu'elle peuvent être utilisées partout y compris à l'intérieur d'une fonction.
Ce sont des variables globales mais aussi des variables objets. En effet elles ne contiennent pas une donnée mais sont utilisées pour référencer un élément HTML de la page.
Ainsi titre référence la balise H1 unique et texte référence la balise P unique.

Lors de son appel, la fonction fcouleur récupère donc en argument 'green' ou 'red' ou 'blue' puis modifie la couleur de texte pour les éléments HTML référencés par les variables titre et texte.
titre.style.color = vcouleur veut dire : utiliser la valeur de la variable vcouleur comme couleur de texte pour l'élément "titre".

Inconvénient de ce code:
Notre code est tout à fait correct mais présente un inconvénient majeur : dans la partie HTML on insère du code JS ! En effet dans l'instruction suivante : <button onclick = "fcouleur('red')">Couleur de texte : rouge </button> Nous avons du code JS : onclick = "fcouleur('red')"
Or il faut éviter de mélanger plusieurs langages dans une même instruction car la maintenance du code devient tout de suite plus compliquée. Ainsi il faut que la personne développant le code HTML ait aussi des compétences en JavaScript ...

Nouvelle version

Programmation JavaScript moderne !

Le code la partie BODY

<h1>Modification d'une propriété CSS pour des éléments de la page</h1> <p>Blabla ... <br>Blabla ... <br>Blabla ... </p> <button id = 'vert'>Couleur de texte : vert </button> <button id = 'rouge'>Couleur de texte : rouge </button> <button id = 'bleu'>Couleur de texte : bleu </button> <script> var titre = document.querySelector('h1') ; var texte = document.querySelector('p') ; document.querySelector('#vert').onclick = function() { titre.style.color = 'green'; texte.style.color = 'green'; } document.querySelector('#rouge').onclick = function() { titre.style.color = 'red'; texte.style.color = 'red'; } document.querySelector('#bleu').onclick = function() { titre.style.color = 'blue'; texte.style.color = 'blue'; } </script> Testez ce script !

Commentaire du code

On a d'abord du HTML (et uniquement du HTML) puis du JavaScript (et uniquement du JS).
Notez que dans la partie HTML on a associé à chaque bouton un identifiant unique.
Dans le script on retrouve la déclaration des variables objets comme dans le script de la page précédente puis trois instructions reposant sur la même syntaxe.

Syntaxe : noeud.événement = function {instruction1; instruction2; ... instructionN ; }

Donc dans la même instruction on appelle (événement sur un élément) et on décrit la fonction anonyme !

Etudions plus en détail la première fonction anonyme !

Quand se déclenche cette fonction ?
Sur clic du bouton affecté de l'ID vert !

Remarque : comme nous avons trois fonctions le passage de paramètre est inutile. Dans chaque fonction on utilise une constante (green ou red ou blue).

Les tableaux en JavaScript

Les tableaux indicés

Exemple


Testez ce script !

Analyse du script

Avec la première instruction on crée un tableau nommé vvilles comprenant 4 éléments. Ce tableau se présente comme suit :

indice0123
donnéeBoulogneCalaisDunkerqueSaint Omer

Donc chaque élément du tableau peut être identifié par un numéro (un indice). Mais attention la numérotation commence à 0 (et non pas 1).

alert(vvilles[0]) : affiche le premier élément (indice vaut 0)
alert(vvilles[3]) : affiche l'élément numéroté 3 (le quatrième)
vvilles.push('Montreuil') : ajoute un élément en fin de tableau (donc un cinquième élément). push() est une méthode de l'objet tableau.

Ensuite nous avons une boucle for qui permet de parcourir tout le tableau :
vvilles.length : retourne 5 ; donc on boucle 5 fois ; i prenant successivement les valeurs 0, 1, 2, 3
alert(vvilles.length) : retourne le nombre d'éléments du tableau.
vvilles.pop() : supprime le dernier élément du tableau.

Après il y a de nouveau le parcours du tableau mais cette fois avec la structure for (var variable in tableau)
C'est beaucoup plus simple de parcourir un tableau avec cette structure dédiée à ces objets.

Vocabulaire

Ne confondez pas méthode et propriété d'un objet !
Une méthode est une fonction associée à un objet. Une méthode permet de manipuler un objet. Une méthode est toujours suivie d'une paire de parenthèses. push() et pop() sont des méthodes que l'on peut utiliser dans le cadre avec un objet de type tableau.
Une propriété retourne des informations sur l'objet. Il n'y a pas de parenthèses après le nom de la propriété. La seule propriété d'un tableau est length !

les tableaux avec clés (identifiants textuels)

Dans le tableau vvilles de l'exemple précédent chaque donnée est identifiée par un numéro (ou indice). Mais il peut être plus pratique d'identifier une donnée par un identifiant textuel (on dit aussi une clé). On parle alors de tableaux avec clés ou tableaux associatifs.

Le script de l'exemple


Testez l'exemple !

Analyse du script

On crée deux tableaux associatifs intitulés "jean_auto" et "paul_auto".

Par exemple le contenu du tableau "jean_auto" peut être représenté de la façon suivante :

clémarquemodèleplacesp_fiscalecarburant
valeurrenaultclio5 adultes5 cvgazole

Donc un tableau associatif est une liste de "clé/valeur".

Cette fois-ci pour décrire les deux tableaux associatifs j'ai utilisé la notation JSON(JavaScript Object Notation).
Vous retrouverez cette notation pour définir des objets dans le cadre de la POO (Programmation Oriéntée Objet). En effet un objet en JavaScript c'est un tableau associatif dans lequel on définit des propriétés (clé : valeur) mais aussi des méthodes (clé:function(){...}).
Donc si vous avez compris les tableaux associatifs définis avec la notation JSON vous n'aurez aucune difficulté pour appréhender les objets en JS.

Examinons quelques instructions du script :

alert(jean_auto.modele) : affiche la donnée ayant pour clé modele dans le tableau jean_auto
jean_auto.p_reelle = "100cv" : ajout d'une donnée identifiée par la clé p_reelle dans le tableau jean_auto
for (var cle in jean_auto) : parcours du tableau jean_auto
alert(cle + ": " +jean_auto[cle]) : affichage d'une paire "clé/valeur" dans ce tableau

Pour parcourir un tableau associatif il faut utiliser la structure for ... in . En effet on ne peut pas utiliser la propriété length dans un tableau associatif.

Les tableaux bidimensionnels

L'ULCO est une université multipolaire : quatre sites. Des personnels doivent faire des déplacements entre ces différents pôles. Afin de les indemniser il est important de connaître les distance entre les pôles.

Tableau des distances :

calaisboulognedunkerquesaint omer
calais0344644
boulogne3407654
dunkerque4676047
saint omer4454470

Le script correspondant

		var distances = 
		{
			'calais' : {'calais' : 0,'boulogne' : 34, 'dunkerque' : 46 , 'saintOmer' : 44}, 
			'boulogne' : {'calais' : 34,'boulogne' : 30, 'dunkerque' : 76 , 'saintOmer' : 54}, 		
			'dunkerque' : {'calais' : 46,'boulogne' : 76, 'dunkerque' : 0 , 'saintOmer' : 47}, 
			'saintOmer' : {'calais' : 44,'boulogne' : 54, 'dunkerque' : 47 , 'saintOmer' : 0}, 
		} ;  // fin tableau bidimensionnel 
		
		alert ('calais-boulogne : ' + distances.calais.boulogne) ; // affiche 34
		alert ('dunkerque-calais : ' + distances.dunkerque.calais) ; // affiche 46
		alert ('saintOmer-calais : ' + distances.saintOmer.calais) ; // affiche 44
		alert ('calais-calais : ' + distances.calais.calais) ; // affiche 0
		alert ('boulogne-dunkerque : ' + distances.boulogne.dunkerque) ; //affiche 76
		alert ('boulogne-saintOmer : ' + distances.boulogne.saintOmer) ; // affiche 54
Testez ce script !

Commentaire

Là encore nous avons utilisé la notation JSON (JavaScript Object Notation) pour stocker les données dans le tableau multidimensionnel distances.
Notez cependant qu'il y a deux niveaux :le tableau "distances" comprend les sous-tableaux "calais", "boulogne", "dunkerque", "saintOmer".
Retour menu