PROGRAMMER EN JAVASCRIPT

Plan du cours (cliquer sur un lien pour aller directement sur la partie qui vous intéresse)

I-GENERALITES SUR LE JAVASCRIPT

II-DECLARER DES OBJETS EN JAVASCRIPT

III-CONVERSION DES TYPES

IV-LES OPERATIONS D’ENTREE/SORTIE

V-LES OPERATEURS EN JAVASCRIPT

VI-LES STRUCTURES DE CONTROLE

VII-LES FONCTIONS EN JAVASCRIPT

VIII-LES EVENEMENTS EN JAVASCRIPT

IX-UTILISER LES ZONES DE SAISIE

EXERCICES AVEC SOLUTIONS

I-GENERALITES SUR LE JAVASCRIPT

1-Définitions

Le JavaScript est un langage de programmation de script incorporé dans un document HTML.Un script est une portion de code qui vient s'insérer dans une page HTML. JavaScript permet de dynamiser une page HTML, en ajoutant des interactions avec l'utilisateur, des animations, de l'aide à la navigation, comme par exemple : afficher/masquer du texte faire, défiler des images, créer un diaporama avec un aperçu "en grand" des images, créer des infobulles etc.

JavaScript est un langage dit client-side, c'est-à-dire que les scripts sont exécutés par le navigateur chez l'internaute (le client).Cela diffère des langages de scripts dits server-side qui sont exécutés par le serveur Web. C'est le cas des langages tel que PHP.

JavaScript est un langage interprété.Si on veut exécuter le code source du JavaScript, on doit lui fournir à un interpréteur qui se chargera de le lire et de réaliser les actions demandées. Un interpréteur de JavaScript est inclus dans les navigateurs Web !

2-Historique

JavaScript a été mis au point par la société Netscape en 1995. Brendan Eich développe Live Script, un langage de script qui s'inspire du langage Java, et qui est destiné à être installé sur les serveurs développés par Netscape. Netscape se met à développer une version client de LiveScript, qui sera renommée JavaScript en hommage au langage Java créé par la société Sun Microsystems.

3-Les versions de JavaScript

JavaScript 1.5 est pris en charge par la totalité des navigateurs actuels. Les versions 1.6 et 1.7 existent et apportent de nouvelles fonctionnalités, mais les navigateurs tardent à implémenter ces nouveautés.

4-Avantages et limites de JavaScript

Avantage : JavaScript permet de rendre les pages web dynamiques (interactives) alors que HTML+CSS permettent d’avoir des pages web statiques. Une page web est interactive lorsqu’elle permet le dialogue entre l’utilisateur et le serveur.

Limites : JavaScript ne permet pas la connexion à une base de données, ni de lire ou écrire des fichiers sur un disque dur.

5-La balise <SCRIPT>

Les balises annonçant un code JavaScript sont les suivantes :

· Pour signaler au navigateur que ce qui suit est un script et que c'est du JavaScript. On utilise les balises :

<script type="text/JavaScript"> ou <script language= « javascript »

· De même, il faudra informer le navigateur (browser) de la fin du script. On utilise la balise :

</SCRIPT>.

6-Les instructions

A l’intérieur des balises <SCRIPT> et </SCRIPT>, se trouvent les instructions. Les instructions sont des ordres qu’on donne à l’ordinateur pour faire un travail précis.

Les langages de programmation sont constitués d’une suite d’instructions qui, mises bout à bout, permettent d’obtenir un programme ou un script complet. Comme tout langage de programmation, les instructions de JavaScript doivent en général se terminer par un point-virgule à la fin pour séparer les différentes instructions.

7- Les commentaires

Les commentaires sont des annotations faites par le développeur pour expliquer le fonctionnement d'un script, d'une instruction ou même d'un groupe d'instructions. Les commentaires ne gênent pas l'exécution d'un script. Il existe deux types de commentaires : les commentaires de fin de ligne, et les commentaires multilignes.

· Commentaires de fin de ligne

Ils servent à commenter une instruction. Un tel commentaire commence par deux slashs, suivis du texte du commentaire :

// Texte du commentaire

· Commentaires multilignesDES VA

Ce type de commentaire permet d'écrire beaucoup plus de texte, tout en permettant les retours à la ligne. Un commentaire multiligne commence par /* et se termine par */ :

Il sera aussi possible d'inclure des commentaires sur plusieurs lignes avec le code

/* Ceci est un commentaire sur

plusieurs lignes */

II-DECLARER DES OBJETS EN JAVASCRIPT

1-Constantes

1.1-Définition

Une constante est un objet dont la valeur ne change pas au cours de l’exécution d’un programme.

1.2-Déclaration d’une constante

Pour créer ou déclarer une constante en JavaScript, on utilise le mot-clé const. Mais il faut obligatoirement initialiser cette constante lors de sa déclaration faute de quoi une erreur sera retournée.

Exemple :

const PI=3,14 ;

2- Les variables en JavaScript

Une variable est un espace de stockage permettant d'enregistrer tout type de donnée, que ce soit une chaîne de caractères, une valeur numérique ou bien des structures un peu plus particulières.

Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un programme.

Une variable possède une valeur et un nom.

Un nom de variable doit contenir :

- des lettres majuscules et minuscules : A…Z et a……z

- des chiffres : 0, 1,9

- des caractères _ et $ (à l'exclusion du blanc).

Il ne peut commencer par un chiffre et ne peut pas être constitué uniquement des mots-clés de JavaScript.

NB : JavaScript est sensible à la casse, ceci veut dire qu’il faut respecter les majuscules et les minuscules. Il ne faut pas remplacer une majuscule par une minuscule et vice versa. Ainsi variable, Variable et vaRiable sont trois noms différents.

2.1- La déclaration d’une variable

Déclarer une variable c’est lui réserver un espace dans la mémoire de stockage de l’ordinateur. Il faut toujours commencer par déclarer une variable avant d’y stocker les données.

La commande qui permet de déclarer une variable est le mot-clé var.

Syntaxe :

var nom_variable

Exemple : si Numero est le nom d’une variable, la déclaration est la suivante :

varNumero ;

· On peut ensuite affecter une valeur à cette variable. Par exemple, si on veut affecter la valeur 1 à la variable Numero on écrit :

var Numero = 1 ;

où la valeur « Luc » à la variable Prenom, on écrit :

var Prenom = "Luc" ;

NB : Les suites de caractères sont écrites entre guillemets

· Plusieurs variables peuvent occuper une seule ligne, dans ce cas on les sépare par une virgule.

varNumero=1, Prenom= « Luc » ;

2.3-Types de variables en JavaScript

JavaScript utilise 3 principaux types de variables :

Type	Description
Nombres (number):	Tout nombre entier ou avec virgule tel que 22 ou 3.1416
Chaînes de caractères (string) :	Toute suite de caractères comprise entre guillemets telle que "salut"
Booléens (boolean) :	Admettent juste deux valeurs : true pour vrai et false pour faux

Le mot nullMot spécial ne représente pas de valeur.

2.4-Connaitre le type d’une variable

Pour tester le type d’une variable, on utilise le mot-clé typeof.

Exemple :

vartext=’mon texte’ ;

typeof (text) ; //affiche string

NB : Si l’instruction typeof renvoie undefined, soit que la variable est inexistante, soit elle est déclarée et ne contient rien

III-CONVERSION DES TYPES

1-Convertir une chaine de caractère en un nombre

On utilise la fonction parseInt

Exemple :

parseInt(‘0113’) ; //affiche 113

La fonction isNaN (is not a number) renvoie true quand la variable n’est pas un nombre, et false dans le cas contraire.

2-Convertir un nombre en chaine de caractère

On ajoute une chaine de caractère vide entre deux nombres.

Exemple:

var text, number1=4, number2=2;

text=number1 + ‘ ‘number2;

La variable “text" contient la valeur ‘’ 42 ‘’

3-Convertir une chaine de caractère en un flottant

La fonction parseFloat() permet de transformer une chaine de caractère en un nombre flottant après avoir annalysé celle-ci.

Syntaxe :

parseFloat(string)

Les paramètres sont :

string : une chaine de caractères, la valeur qu’on souhaite analyser et transformer en un nombre flottant.

Valeur retour : Un nombre flottant obtenu à partir de la chaine de caractères.Si le premier caractère ne permet pas d’obtenir ce nombre, ce sera la valeur NaN (Not a Number) qui sera envoyée.

Exemples :

parseFloat(« 100 ») ; //Affiche 100

parseFloat (100@monsite); //Affiche 100

parseFloat (monsit@100); //Affiche NaN

4-La concaténation

Une concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre.

Exemple:

var Jo = 'Bonjour', name = 'Joseph', result;

result = Jo + name;

La variable “result" contient "BonjourJoseph".

IV:LES OPERATIONS D’ENTREE/SORTIE

JavaScript est un langage orienté objet. Un langage de programmation orienté objet est un langage qui contient des éléments, appelés objets, et que ces différents objets possèdent des caractéristiques spécifiques ainsi que des manières différentes de les utiliser. Le langage fournit des objets de base comme les images, les dates, les chaînes de caractères... mais il est également possible de créer soi-même des objets pour obtenir un code source plus clair (facile à lire) et une manière de programmer beaucoup plus intuitive (logique).

Les objets JavaScript contiennent des méthodes et des propriétés :

· Les méthodes sont des fonctions contenues dans l’objet, et qui permettent de réaliser des opérations sur le contenu de cet objet.

· Une propriété est une variable contenue dans l’objet et qui contient des informations nécessaires au fonctionnement de cet objet

Exemple :Soit la variable myString ,de déclaration suivante :

varmyString= « ceci est un chaine de caractères » ;

myString.length donne le nombre de caractères contenus dans la variable myString.

myString.toUpperCase () demande à Javascript de mettre la chaine de caractère contenue dans la variable myString en majuscule.

length est la propriété et toUpperCase est la méthode.

Le point permet d’accéder aux propriétés et aux méthodes de l’objet.

1-Les opérations d’entrée

1.1-La méthode prompt()

La commande prompt renvoie ce que l’utilisateur a écrit dans un champ proposé par cette fonction. Cette entrée peut aussi prendre une valeur par défaut, mais ce n’est pas obligatoire.

Syntaxe :

prompt("texte de la boite d'invite», valeur par défaut");

En cliquant sur OK, la commande renvoie la valeur tapée par l'utilisateur sous forme d’une chaine de caractère ou la réponse proposée par défaut. Pour récupérer le texte, il faut le stocker dans une variable.

Si l'utilisateur clique sur Annuler ou Cancel, la valeur null est alors renvoyée.

prompt() est utilisé pour saisir des données fournies par l'utilisateur.

Exemple :var nombre = prompt (« Entrer un entier positif n », « 35 ») ;

35 est la valeur par défaut

Remarque :Tout ce qui est écrit dans le champ prompt () est récupéré sous forme d’une chaine de caractère, que ce soit un chiffre ou non. Du coup si on utilise l’opérateur +, on ne fait pas l’addition, mais une concaténation, d’où l’intervention de la conversion des types.

varnombre=parseInt (prompt (« Entrer un nombre n : », « 35 »)) ;

Le nombre entré sera un entier positif, on pourra par la suite combiner une opération d’addition.

Var result=nombre + 2 ;

1.2-La méthodeconfirm ()

La commande confirm affiche 2 boutons "OK" et "Annuler". En cliquant sur OK, confirm () renvoie la valeur true et bien entendu false si on a cliqué sur Annuler. Ce qui peut permettre, par exemple, de choisir une option dansun programme.

Exemple :

confirm ("Voulez-vous continuer ?") ;

2-Les opérations de sortie

2.1-La méthode alert ()

La commande alert() affiche une boite de dialogue dans laquelle est reproduite la valeur (variable et/ou chaîne de caractères) de l'argument qui lui a été fourni. Cette boite bloque le programme en cours tant que l'utilisateurn'aura pas cliqué sur "OK".

Syntaxe :

alert(nom_variable);

alert("texte à afficher");

alert(nom_variable + "texte à afficher");

Exemple :

var Numero=10 ;

alert (Numero) ;

alert (« Voulez-vous continuer ? ») ;

2.2-La méthode write ()

A chaque objet JavaScript, le concepteur du langage a prévu un ensemble de méthodes (ou fonctions dédiées à cet objet) qui lui sont propres. A l’objet document, JavaScript a dédié la méthode "écrire dans le document", c'est la méthode write ().

Syntaxe :

write("votre texte");

NB : Les chaines de caractères sont écrites entre les guillemets « ….. » ou ‘……………….’

Exemple : write(« le résultat est bon »)

L’appel de la méthode write() se fait selon la notation nom_de_l’objet.nom_de_la_methode

Pour appeler le méthode write () de l’objet document, on notera :

document.write ()

· Pour afficher du texte :

document.write(« ceci est du JavaScript ») ;

· On peut aussi écrire une variable. Soit la variable résultat,

document.write(résultat);

Exemple:

On définit une variable appelée texte qui contient une chaîne de caractères "Mon chiffre préféré est " et une autre appelée chiffre qui est initialisée à 7.

<SCRIPT type= "text/JavaScript">

vartexte = "Mon chiffre préféré est le " ;

varchiffre = 7 ;

document.write (texte + chiffre);// affiche Mon chiffre préféré est le 7

</SCRIPT>

· Pour associer du texte (chaînes de caractères) et des variables (resultat), on utilise l'instruction

document.write("Le résultat est " + resultat);

· On peut utiliser les balises Html pour agrémenter ce texte

document.write("<B>Le résultat est</B>" + resultat); ou

document.write("<B>" + "Le résultat est " + "</B>" + resultat)

Exemple :

On va écrire du texte en Html et en JavaScript.

<BODY>

<H1>Ceci est du Html</H1>

<SCRIPT type= "text/JavaScript">

document.write ("<B>Et ceci du JavaScript</B>");// affiche Ceci est du Html Et ceci du JavaScript

</SCRIPT>

</BODY>

REMARQUES :

i-Si on souhaite écrire sur plusieurs lignes, il faudra utiliser le symbole \n. Le symbole \n renvoie à la ligne.

ii-Les chaines de caractères sont écrites entre guillemets. Les guillemets peuvent être simples ou doubles, il ne faut surtout pas les mélanger. On peut insérer des guillemets simples à l’intérieur des guillemets doubles et vice versa. Cependant, pour insérer des guillemets simples à l’intérieur d’autres guillemets simples, il faut faire précéder le guillemet simple d’un antislash \ : on dit qu’on l’échappe.

Exemple : ‘ je vais à l\’ école tous les jours’

3-Une première page html avec du javascript

1-Exemple de page HTML avec du JavaScript

Nous allons écrire une page html avec un script JavaScript incorporé.Il faut signaler aussi qu’un script JavaScript peut s’exécuter ailleurs ou seul.Dans un document HTML, il rend la page HTML interactive c.-à-d. qu’elle dialogue avec l’utilisateur.

<HTML>

<HEAD>

<TITLE>Mon premier JavaScript</TITLE>

</HEAD>

<BODY>

<p> Je vous présente ici ma première page HTML avec du JavaScript</p>

<script type="text/JavaScript">//Début du script

alert ("Bienvenue sur ma page"); // ici le contenu du Script

</SCRIPT>// Fin du script

<p> Elle n’est pas formidable, mais elle vaut quand-même la peine d’être lue</p>

</BODY>

</HTML>

2- Où inclure le code en JavaScript ?

On peut inclure le code JavaScript soit dans la page, soit dans un fichier externe.

2.1-Le JavaScript "dans la page"

Pour inclure du code JavaScript directement dans une page Web, on le place tout simplement au sein de l'élément <script> :

Exemple :

<!DOCTYPE html>

<html>

<head>

<title>Welcome</title>

</head>

<body>

<script type="text/JavaScript">

alert('Bienvenue sur le site de Kirikou, réservé aux tous petits');

</script>

</body>

</html>

2.2-Le JavaScript externe

Il est possible, et même conseillé, d'écrire le code JavaScript dans un fichier externe, portant l'extension .js. Ce fichier est ensuite appelé depuis la page Web au moyen de l'élément <script>et de son attribut src qui contient l'url du fichier .js.

· On commence d’abord par créer le fichier externe :

alert(‘bienvenue sur le site de kirikou, réservé aux tous petits’).

· On enregistre ce fichier dans le même répertoire sous le nom accueil.js

· Enfin on le place dans la page web, de préférence juste avant le</body>

Exemple:

<!DOCTYPE html>

<html>

<head>

<title>welcome</title>

</head>

<body>

<script type="text/JavaScript" src="accueil.js"></script>

</body>

</html>

On suppose ici que le fichier accueil.js se trouve dans le même répertoire que la page Web.

C’est un fichier simple qui ne doit se trouver dans aucune balise.

REMARQUE :

Il vaut mieux privilégier un fichier externe plutôt que d'inclure le code JavaScript directement dans la page, pour la simple et bonne raison que le fichier externe est mis en cache par le navigateur, et n'est donc pas rechargé à chaque chargement de page, ce qui accélère l’affichage de la page. On conseille même de placer les éléments <script>liant un fichier .js juste avant la fermeture de l’élément <body>.

V:LES OPERATEURS EN JAVASCRIPT

1- Les opérateurs de calcul

Dans les exemples, la valeur initiale de x sera toujours égale à 11

Signe	Nom	Signification	Exemple	Résultat
+	Plus	Addition	X+3	14
-	Moins	Soustraction	x-3	8
*	Multiplication	multiplié par	x*2	22
/	Division	divisé par	x/2	5.5
%	Modulo	reste de la division par	x%5	1
=	affectation	a la valeur	x=5	5

2- Les opérateurs de comparaison

Signe	Nom	Exemple	résultat
==	Egal	X==11	true
<	Inferieur	X<11	false
<=	inférieur ou égal	x<=11	true
>	Supérieur	x>11	false
>=	supérieur ou égal	x>=11	true
!=	différent	x!=11	False

Important. On confond souvent le = et le == (deux signes =). Le = est un opérateur d'attribution de valeur

Tandis que le == est un opérateur de comparaison. Cette confusion est une source classique d'erreur de programmation.

3- Les opérateurs associatifs

On appelle ainsi les opérateurs qui réalisent un calcul dans lequel une variable intervient des deux côtés du signe = (ce sont donc en quelque sorte également des opérateurs d'attribution).

Dans les exemples suivants x vaut toujours 11 et y aura comme valeur 5.

Signe	Description	Exemple	Signification	Résultat
+=	plus égal	x += y	x = x + y	16
-=	moins égal	x -= y	x = x – y	6
*=	multiplié égal	x *= y	x = x * y	55
/=	divisé égal	x /= y	x = x / y	2.2

4 -Les opérateurs logiques

Aussi appelés opérateurs booléens, ces opérateurs servent à vérifier deux ou plusieurs conditions.

Signe

Nom

Exemple

Signification

(condition1) && (condition2)

condition1 et condition2

Négation

(condition1) || (condition2)

condition1 ou condition2

5- Les opérateurs d'incrémentation

Ces opérateurs vont augmenter ou diminuer la valeur de la variable d'une unité. Ce qui sera fort utile, par exemple, pour mettre en place des boucles.

Dans les exemples x vaut 3.

Signe

Description

Exemple

Signification

Résultat

x++

Incrémentation

y = x++

(x++ est le même que x=x+1)

3 puis plus 1

x - -

Décrémentation

y= x- -

(x- - est le même que x=x-1)

3 puis moins 1

6- La priorité des opérateurs JavaScript

Les opérateurs s'effectuent dans l'ordre suivant de priorité (du degré de priorité le plus faible ou degré de priorité le plus élevé).

Dans le cas d'opérateurs de priorité égale, de gauche à droite.

Opération	Opérateur
,	virgule ou séparateur de liste
= += -= *= /= %=	Affectation
? :	opérateur conditionnel
\|\|	OU logique
&&	ET logique
== !=	Égalité
<<= >= >	Relationnel
+ -	addition soustraction
* /	multiplier diviser
! - ++ --	Unaire (opérateur ayant un seul opérande par opposition aux opérateurs binaires)
( )	Parenthèses

VI-LES STRUCTURES DE CONTROLE

1-Les structures conditionnelles

Une condition permet d'exécuter ou non une série d'instructions. Elle peut être écrite sous différentes formes : on parle de structures conditionnelles.

1.1- La structure alternative simple « if ... »

Dans sa formulation la plus simple, l'expression if se présente comme suit :

Syntaxe :

If (condition vraie) {

//une ou plusieurs instructions à exécuter si la condition est vraie

}

Exemple :

var note=prompt (« Entrer votre note ») ;

if (note>=10) {

alert (« vous êtes promu ») ;

}

1.2-La structure alternative complète (if…else)

Si on souhaite exécuter un code suite à la vérification d’une condition et exécuter un autre code si elle n’est pas vérifiée, il existe la structure if…else.

Syntaxe :

if (condition vraie) {

instructions1;

}

else {

instructions2;

}

Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si elle ne l'est pas (false), le bloc d'instructions 2 s'exécute.

Exemple :

var age=prompt('Entrez votre age') ;

if(age<= 18) {

alert('Vous êtes mineur ') ;

}

else{

alert('Vous êtes senior ') ;

}

1.3-La structure alternative imbriquée (elseif )

Elle teste plusieurs conditions à la fois et exécute leurs codes correspondants. La structure else if peut être utilisée plusieurs fois de suite. Il suffit seulement d’avoir écrit une condition avec la structure if juste avant.

Syntaxe :

if (condition 1) {

// Bloc d’instructions1;

}

else if (condition 2) {

// Bloc d’instructions2;

} else if (condition 3) {

// Bloc d’Instructions3;

}

else {

// Bloc d’instructions4;

}

Exemple :

vartemperature=prompt(« Donner la temperature del’ eau: ») ;

if (temperature <=0){

alert(“l’eau est solide”);

}

else if( 0 <temperature && temperature<= 100){

alert(« l‘eau est liquide »);

}

else if( temperature > 100){

alert(« l‘eau est vapeur »);

}

else {

alert(« Vous n’avez pas entré une température ») ;

2-Les structures itératives (boucles)

2.1-L’incrémentation

Elle permet d’ajouter une unité à un nombre au moyen d’une syntaxe courte. A l’inverse la décrémentation permet de soustraire l’unité.

Exemple :

varnumber=0 ;

number++ ;

alert (number);//affiche 1

number--;

alert (number); //affiche 0

2.2- L'expression for

L'expression for permet d'exécuter un bloc d'instructions un certain nombre de fois en fonction de la réalisation d'un certain critère. Sa syntaxe est :

for (valeur initiale ; condition ; progression) {

// Bloc d’instructions;

}

Exemple:

for(var i=1;i<5; i++) {

document.write(« Ligne : » +i + « <br> »);

}

2.3-While

L'instruction while permet d'exécuter une instruction (ou un groupe d'instructions) un certain nombre de fois.

while (condition vraie) {

//continuer à faire quelque chose

}

Aussi longtemps que la condition est vérifiée, JavaScript continue à exécuter les instructions entre les accolades. Une fois que la condition n'est plus vérifiée, la boucle est interrompue et on continue le script.

Attention ! Avec ce système de boucle, le risque existe (si la condition est toujours vérifiée), de faire boucler indéfiniment l'instruction. Ce qui à la longue fait misérablement planter le browser !

Exemple:

var i=1;

while(i<5){

document.write(« ligne : » + i+ « <br>») ;

i++;

}

document.write(« Fin de la boucle »);

2.4- Break

L'instruction break permet d'interrompre prématurément une boucle for ou while.

Exemple:

var i=1;

while (i<5) {

if(i== 4)

break;

document.write("ligne: " + i + "<BR>");

i++;

}

document.write("fin de la boucle");

Le fonctionnement est semblable à l'exemple précédent sauf lorsque le compteur vaut 4. A ce moment, par le break, on sort de la boucle et "fin de boucle" est affiché.

Ce qui donnerait à l'écran :

ligne : 1

ligne : 2

ligne : 3

fin de la boucle

2.5- Continue

L'instruction continue permet de sauter une instruction dans une boucle for ou while et de continuer ensuite le bouclage (sans sortir de celui-ci comme le fait break).

Exemple;

vari=1;

while (i<5) {

if (i == 3){

i++

continue;

}

Document.write("ligne: " + i + "<BR>");

i++;

}

document.write("fin de la boucle");

Ici, la boucle démarre. Lorsque le compteur vaut 3, par l'instruction continue, on saute l'instruction document.write (ligne : 3 n'est pas affichée) et on continue la boucle. Notons qu'on a dû ajouter i++ avant continue; pour éviter un bouclage infini et un plantage du navigateur (i restant à 3).

Ce qui fait à l'écran :

ligne : 1

ligne : 2

ligne : 4

fin de la boucle

VII-LES FONCTIONS

1- Définition

Une fonction est un bloc de code dont le but est d’effectuer une tâche précise et que l'on pourra, si besoin est, utiliser à plusieurs reprises.

L’avantage majeur des fonctions est qu’elles peuvent être réutilisées plusieurs fois dans un code assez long. Il suffit à chaque fois d’appeler la fonction, une fois créée, tout simplement en mentionnant son nom pour pouvoir l’utiliser autant de fois qu’on le veut.

En JavaScript, il existe deux types de fonctions :

· Les fonctions propres à JavaScript. On les appelle des "méthodes". Ce sont des fonctions natives, prêtes à l’emploi, qui ont été créées par d’autres développeurs et qui ont été intégrées au langage JavaScript lui-même.

Exemple : la fonction alert () qui permet d’afficher les messages dans les boîtes de dialogue. Les fonctions prompt, parseInt et confirm déjà vues sont aussi des fonctions natives de JavaScript

· Les fonctions écrites par l’utilisateur pour les besoins de son script. C'est à celles-là que nous nous intéressons maintenant.

2- Créer d’une fonction JavaScript

Pour créer une fonction, on utilise le mot-clé (réservé) function.

Syntaxe :

functionnom_de_la_fonction(arguments) {

// le code que la fonction va devoir exécuter

}

· nom_de_la_fonction :est un nom qu’on donne à la fonction que l’on veut créer.

Le nom de lafonction suit les mêmes règles que celles qui régissent le nom de variables (nombre de caractères indéfinis,ne contenant pas d’espace ni de caractères spéciaux en dehors de _ et $, commencer par une lettre, peuvent inclure des chiffres...).

Pour rappel, JavaScript est sensible à la casse, f est différent de F. Ainsi function () ne sera pas égal à Function(). En outre, tous les noms des fonctions dans un script doivent être uniques.

· Le couple de parenthèses contient ce qu’on appelle les arguments. Ces arguments servent à fournir des informations à la fonction lors de son exécution.

La mention des arguments est facultative mais dans ce cas les parenthèses doivent rester. C'est d'ailleurs grâce à ces parenthèses que l'interpréteur JavaScript distingue les variables des fonctions.

· Entre accolades, on écrit le code à exécuter. Lorsqu’une accolade est ouverte, elle doit impérativement, sous peine de message d'erreur, être refermée.

Exemple : Soit une fonction multiplication() qui fait le produit de deux réel quelconques x et y.

function multiplication(x, y) { //on crée la fonction

alert(x*y) ; //code qui doit être exécuté lorsqu’on va appeler la fonction

}

multiplication est le nom de la fonction

x et y sont des paramètres

Le fait de définir une fonction n'entraîne pas l'exécution des commandes qui la composent. Ce n'est que lors de l'appel de la fonction que le code de programme est exécuté.

3- L'appel d'une fonction

L'appel d'une fonction se fait par le nom de la fonction (avec les parenthèses).

Soit par exemple, pour appeler la fonction multiplication() ci-dessus, il suffit d’écrire :

multiplication();

Il faudra veiller en toute logique (car l'interpréteur lit le script de haut vers le bas) que la fonction soit bien définie avant d'être appelée.

4-Paramètres ou arguments

Si la fonction utilise des parties variables dans son code (des nombres à calculer, des messages à afficher, etc.), alors cette fonction aura besoin de ces « variables » pour fonctionner et aura donc besoin des paramètres placées à l’intérieur de la paire de parenthèses qui suivent le nom de la fonction.

Lorsqu’ensuite on passe des vraies valeurs aux fonctions, on parle alors d’arguments.

Exemple :

function multiplication(x, y) {//on crée la fonction

alert(x*y) ; //code qui doit être exécuté lorsqu’on va appeler la fonction

}

multiplication(5,10) ; //appel de la fonction

x et y sont les paramètres tandis que les chiffres 5 et 10 sont les arguments qui ont été passées à la fonction.

NB:
Toutes les fonctions n’ont pas besoin de paramètres (en revanche la paire de parenthèses est obligatoire)

5- Passer plusieurs valeurs à une fonction

On peut passer plusieurs paramètres à une fonction. Comme c'est souvent le cas en JavaScript, on sépare les paramètres par des virgules.

Function nom_de_la_fonction (arg1, arg2, arg3) {

... code des instructions ...

}

Exemple :

functiontexte (texte1, texte2) {

allert(texte1+texte2) ;

}

ET pour l'appel de la fonction

texte("Salut à tous", "Signé Luc")

6- Retourner une valeur

La fonction multiplication ci-haut fait deux choses à la fois :elle calcule le produit de deux nombres et renvoie le résultat avec un alert ().

Le plus souvent, on cherche à récupérer le résultat d’une fonction pour pouvoir le réutiliser ou l’afficher plus tard.Pour faire cela, on utilise le mot-clé return suivi de l'expression à renvoyer. Notez qu'il ne faut pas entourer l'expression de parenthèses.

Exemple :

Function multiplication(x, y) {

return x*y ;

}

multiplication(5,10)

;

Le résultat récupéré peut être stocké dans une variable. De cette manière, on peut ensuite effectuer toutes sortes d’opérations sur cette variable ou afficher son contenu.

Exemple :

Function multiplication(x, y) {

return x*y ;

}

multiplication(5,10) ;

varresultat=multiplication(5,10) ;

resultat=resultat +2 ;

alert (resultat) ;

NB : L’instruction return met fin à l’exécution d’une fonction, ce qui signifie que toutes les autres opérations qui suivraient un return dans une fonction seraient ignorées.

7- Variables locales et variables globales

Toutes variables déclarées dans une fonction ne sont utilisables que dans cette fonction. On les appelle variables locales.

Exemple :

Function cube (nombre) {

varcube = nombre*nombre*nombre ;

}

Ainsi la variable cube dans cet exemple est une variable locale. Si vous y faites référence ailleurs dans le script, cette variable sera inconnue pour l'interpréteur JavaScript (message d'erreur).

A l’inverse des variables locales, les variables déclarées en dehors d’une fonction sont nommées variables globales car elles sont accessibles partout dans le code, y compris à l’intérieur des fonctions.

Var cube=1

functioncube (nombre) {

varcube = nombre*nombre*nombre

}

La variable cube sera globale.

VIII-LES EVENEMENTS EN JAVASCRIPT

1-Définition

Les évènements correspondent à des actions effectuées par l’utilisateur ou par le navigateur lui-même.Ils permettent de déclencher une fonction lorsqu’une action s’est produite ou non.

En Html classique, il y a un évènement bien connu : C’est le clic de la souris sur un lien qui vous transporte sur une autre page Web ou un autre site.

Les évènements JavaScript, associés aux fonctions, aux méthodes et aux formulaires, ouvrent grande la porte pour une réelle interactivité des pages web.

2-Les gestionnaires d'évènements

Pour être efficace, il faut qu'à ces évènements soient associées des actions prévues par le programmeur : C'est le rôle des gestionnaires d'évènements.

Syntaxe :

onEvenement="fonction ()"

Exemples : onClick, onLoad et onUnload, onMouseOver et onMouseOut; onFocus; onBlur etc.

3-Assigner un évènement a un élément

Si on souhaite ouvrir une boite de dialogue lorsque l’utilisateur clique sur un texte dans la page web.

<span onClick="alert ('bonjour Monsieur !') ;">cliquez moi</span>;

On peut associer une fonction à l’évènement onclick

<body>

<span onClick="bonjour ()"> Cliquer ici</span>

<script type="text/JavaScript">

functionbonjour () {

alert ("bonjour Monsieur");

}

</script>

</body>

De façon littérale, au clic de l'utilisateur, ouvrir une boite d'alerte avec le message indiqué.

IX-UTILISER LES ZONES DE SAISIE

1- Déclaration d'un formulaire

La déclaration d'un formulaire se fait par les balises <FORM> et </FORM>.Il faut noter qu'en JavaScript, l'attribut NAME="nom_du_formulaire" a toute son importance pour désigner le chemin complet des éléments.

Syntaxe :

<form name= « form1 »>

……………………………….

</form>// form1 est le nom du formulaire

2-L’objet document.forms

En JavaScript l’objet document.forms.NomDuformulaire est la première chose à déterminer. Cette première partie permet de spécifier dans quel formulaire de la page web on va intervenir.

La commande javascript pour atteindre le formulaire sera :

document.forms.NomDuformulaire

Ensuite vient le nom de la balise à atteindre dans ce formulaire :

document.forms.NomDuformulaire.NomBalise

Au final, vient s’ajouter la propriété de la balise

Syntaxe :

document.forms.NomDuformulaire.NomBalise.PropriétéBalise

Exemple : Insérer dans le head de la page html le code suivant :

<form name= « form1 »>

<input type= “text “name= “input” value= “mkl”/>

</form>

//on crée une zone de texte:

mkl est la valeur par défaut.

· Pour accéder à la valeur, on fait:

<script language="JavaScript">

document.forms.form1.input.value ;

</script>

· Si on veut modifier la valeur mkl en dat, insérer dans le body le code suivant :

<script language="JavaScript">

var resultat;

resultat= document.forms.form1.input.value="dat";

alert (resultat);

</script>

3- Contrôler une ligne de texte

La zone de texte est l'élément d'entrée/sortie par excellence de JavaScript. On désire créer une zone de texte qu’on peut contrôler le contenu à l’aide du bouton Afficher :

Afficher

Exemple: Insérer dans le head:

<head>

<form name="form2">

<input type="text" name="input" value="Bonjour"><br/>

<input type="button" name="bouton" value="Afficher" onclick="controle (form2)">

</form>

</head>

Ensuite insérer dans le body

< body>

<script language="JavaScript">

functioncontrole (form2) {

var test = document.forms.form2.input.value;

alert("vous avez tapé : " + test); //Affiche ce qu’on a saisi dans la zone de texte

}

</script>

</body>

4-Programmer un convertisseur

Le convertisseur permet d’adapter une page web en fonction de certaines actions de l’utilisateur. L’élément html input est la base du convertisseur : input type= « number ». On utilise les éléments de formulaire pour créer en quelques lignes de code des convertisseurs de toutes sortes :

-convertisseur de poids (g en kg par exemple)

-convertisseurs de distance (m en km par exemple)

-convertisseurs de vitesse (m/s en km/h par exemple

-convertisseur de température (°celcius en Kelvin par exemple) etc.

Exemple : convertir une température du degré Celsius en degré kelvin

<head>

<form name="form3">

<input type="number" name="input" value="">

<input type="button" name="bouton" value="convertir" onClick="conversion(form3)">

<input type="number" name="output" value="">

</form>

</head>

<body>

<script language="JavaScript">

function conversion (form3) {

var t=document.forms.form3.input.value;

var T;

T= parseInt(t) +273;

document.forms.form3.output.value=T;

}

</script>

</body>

Pour t=30°C,on trouve T=303 K

EXERCICES

CONTROLE DES CONNAISSANCES

1-Définir : script ; JavaScript

2-Pourquoi dit-on que le JavaScript est un langage :

a-interprété

b-client-side

c-orienté objet

3-Le JavaScript vient combler une lacune du HTML+CSS. Laquelle ?

4-Citer 02 balises qui annonce un code JavaScript.

5-Pourquoi faut-il de préférence placer le code JavaScript dans un fichier externe d’extension .js ?

6-Comment déclare-t-on une variable en JavaScript ?

7-Quels sont les types de variables utilisés en JavaScript,

8-Quel est l’évènement JavaScript supporté par le html ?

9-A quoi sert un gestionnaire d’évènement ?

10-Quels sont les balises d’entrée et de fin d’un formulaire en JavaScript ?

11-Donner les limites du langage JavaScript

EXERCICE I :

Madame AMA est gestionnaire d’une épicerie. Passionnée des TIC, elle souhaite disposer d’une application web qui l’aide à saisir les commandes et calculer le montant total à payer par ses clients. Vous lui présenter le code ci-dessous :

1. <html>

2.<head><title>Table</title></head>

3. <body>

4. <script language= » JavaScript »>

5. prix=Number (prompt (« Saisir le prix unitaire ; »)) ;

6. quantité=Number (prompt (« Saisir la quantité »)) ;

7. total=prix*quantité

8. document.write (« le total à payer est= » +total) ;

9. </script>

10</body>

11</html>

En vous servant de vos connaissances en programmation web, répondre aux questions suivantes :

1. Identifier dans ce code

a) Le titre de la page web

b) Une instruction faisant apparaitre une conversion de type

c) une instruction d’écriture

2. Recopier la portion de ce code qui correspond au langage JavaScript

3. Enoncer 02 avantages et 02 inconvénients de JavaScript.

(Probatoire 2020)

EXERCICE II :On donne le code suivant:

1. <html>

2. <HEAD><title>Bacc ESG</title>

3. <script language= « JavaScript »>

4. var note1=12 ;

5. var note2=13 ;

6. var decision : string ;

7. function moyenne (note1, note2) {

8. var moyenne= (note1 + note2)/2 ;

9. return (moyenne) ;}

10. if (moyenne >=10) {

11. decision « vous avez réussi au baccalauréat ESG»

12. document.write (decision) ;}

13. else {

14. decision= « échec »

15. document.write (decision) ;)

16. </script>

17. </HEAD>

18. <BODY>

19. <script language= « JavaScript »>

20. decision (moyenne (note1, note2))

21. </script>

22. </BODY>

23. </html>

Questions :

1-Quels langages a-t-on utilisés pour écrire ce code ?

2-Donner un exemple de logiciel permettant d’éditer ce code.

3-Quel titre aura le document généré par ce code lorsqu’il sera interprété ?

4-Quel sera le contenu de moyenne lorsque ce code sera interprété ? Choisir l’une des propositions suivantes :

a)Vous avez réussi au baccalauréat ESG

b) 12,5

c)Echec

d) moyenne (12,5)

e)décision

f) décision (moyenne (note1, note2))

g) document. Rite (« Vous avez réussi au Baccalauréat ESG »)

h) document.write (« Echec »)

i) decision (moyenne (12,5)

On voudrait fournir un commentaire sur une tranche d’âges différents qui sont les suivantes :

· 1 à 17 ans ‘’vous êtes encore majeur »

· 18 à 49 ans « vous êtes majeur mais pas encore senior «

· 50 à 69 ans « vous êtes senior mais pas retraité «

· 60 à. 120 « vous êtes retraité, profitez de votre temps libre ! ».

Le déroulement du code sera le suivant :

L’utilisateur charge la page web.il est ensuite invité à taper son âge dans une fenêtre d’interaction. Une fois l’âge fourni l’utilisateur obtient un petit commentaire.

TAF : Ecrire ce code en JavaScript.
EXERCICE IV :

Ecrire un code qui demande à l’ internaute son prénom ,ainsi que les prénoms de ses frères et ses sœurs .On suppose qu’on ne connaît pas à l’avance le nombre de frères et sœurs .

CORRIGES

CONTROLE DE CONNAISSANCES

1-Script : C’est une portion de code incorporé dans une page html.

JavaScript : C’est un langage de script.

2- a) JavaScript a besoin d’un interpréteur pour fonctionner. Les navigateurs contiennent un interprétateur JavaScript.

b) JavaScript s’exécute du côté client c.-à-d. dans la machine de l’internaute.

c) JavaScript est un langage orienté objet parce qu’il contient des éléments, appelés objets, et que ces différents objets possèdent des caractéristiques spécifiques ainsi que des manières différentes de les utiliser.

3-Rend la page web dynamique (interactive).

4-<script language= « JavaScript »> ou <script type= « text/JavaScript »>

5-Faciliter les modifications et les mises à jour

6-On utilise le mot clé var suivi du nom de la variable et d’un point-virgule ;

7-Nombres (number) ; Chaines de caractères (string), booléens (boolean).

8-Action de cliquer sur un lien

9-Un gestionnaire d'évènements est associé à une action prévue par le programmeur pour rendre l’événement efficace.

10-<form> et </form>

11-Ne gère pas les bases de données et ne lit, ni n’écrit des données dans un fichier du disque dur ;

EXERCICE I :

1-a)Titre de la page : Table.

b)prix=Number (prompt (« Saisir le prix unitaire ; »)) ;

c)document.write (« le total à payer est= » +total) ;

2- <script language= » JavaScript »>

prix=Number (prompt (« Saisir le prix unitaire ; »)) ;

quantité=Number (prompt (« Saisir la quantité »)) ;

total=prix*quantité

document.write (« le total à payer est= » +total) ;

</script>

3- Avantages :-rend la page web interactive (dynamique)-Facilite les modifications et les mises à jour

Inconvénients :

-Ne gère pas les bases de données

-N’écrit pas des données dans un fichier du disque dur

EXERCICE II :

1-html et JavaScript

2-Editeurs de textes :bloc-notes, Notepad++, Gedit,Visual interface etc.

3-Titre : Bac ESG

4- Vous avez réussi au baccalauréat ESG

EXERCICE III :

EXERCICE IV :

for (var i = 0, nicks = '', nick; true; i++) {
nick = prompt('Entrez un prenom :');
if (nick) {
nicks += nick + ' ';
} else {
break;
}
} a
lert('Il y a ' + i + ' prenom :\n\n' + nicks)