COURS SUR JAVASCRIPT
Classe Première Ti
UE : GENERALITES SUR LE JAVASCRIPT
CV: A la fin de cette leçon, l’élève doit être capable de :
- Connaitre le principe de fonctionnement du JavaScript
- Connaitre la structure générale d’un programme JavaScript
Introduction
JavaScript est un langage de programmation de scripts. C’est un langage interprété qui est décodé
par le navigateur du client : c’est pour cela que l’on dit que c’est un langage qui s’exécute coté client.
Un Script est une suite d’instructions simples, écrites dans un langage interprété, permettant
d’automatiser certaines tâches.
I.- Importance du JavaScript
Le JavaScript est l’un des langages les plus populaires et les plus utilisés sur Internet, surtout qu'il
fonctionne sur bon nombre de navigateurs différents. Il s'inclut directement dans la page Web (ou
dans un fichier externe) et 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 et des images ;
✓ Créer un diaporama avec un aperçu « en grand » des images ;
✓ Créer des info-bulles ;
✓ Réagir aux événements de la souris ;
✓ Gérer des menus ;
✓ Détecter le navigateur du visiteur ;
✓ Réaliser des calculs ;…
II.- Limites du JavaScript
✓ Le code source n’est pas protégé ;
✓ Il n’est pas autonome car ne peut fonctionner sans le HTML ;
✓ Les erreurs sont difficiles à détecter (absence de débogueur) ;
✓ Il ne permet pas d’accéder à une base de données ;
✓ Certains navigateurs supportent mal ce langage ; …
III.- Structure d’un programme JavaScript
Pour écrire un code JavaScript, on procède de la manière suivante :
<script type="text/JavaScript"> Code JavaScript </script> ou bien
<script language="JavaScript"> Code JavaScript </script>
Le script ainsi rédigé peut être inséré dans un document HTML de trois (03) façons :
1
1) Insertion dans l’entête du document
<html>
<html>
<head>
<head>
<script language=”javascript” >alert(”Bonjour”); </script>
</head>
</head>
<body>
<body> ---
<script language=”javascript” >alert(”Bonjour”); </script>
</body>
</body>
</html>
</html>
2) Insertion dans le corps du document
3) Insertion à partir d’un fichier externe
<html>
<head>
<script language=”javascript” src=”mon_fichier_externe.js”> </script>
</head>
<body>
</body>
</html>
NB : Après avoir inséré un script dans un code HTML à l’aide d’un éditeur, il faut enregistrer le fichier
avec l’extension .html ( ex : [Link]), puis double-cliquer sur le fichier ainsi créé pour que le
contenu soit exécuté pour votre navigateur.
2
UE: OBJETS ET INSTRUCTIONS DE BASE EN JS
CV : A la fin de cette leçon, l’élève doit être capable de :
- Définir objet, variable et constante ;
- Manipuler les objets en JS (déclaration des variables et des constantes)
- Utiliser les instructions de base
Introduction
Les objets ainsi que les instructions de base sont des notions que doit maitriser un programmeur,
pour être capable d’écrire correctement un programme qui résout un problème donné.
I.- Notion d’objet de base
Un objet est un espace mémoire pouvant contenir une ou successivement plusieurs valeurs au cours
de l’exécution d’un programme.
I.1- Caractéristiques d’un objet
En général un objet es caractérisé par :
a) Son nom
En Javascript, les noms d’objet peuvent être aussi longs que l'on désire, mais doivent répondre à
certains critères :
✓ un nom d’objet doit commencer par une lettre (majuscule ou minuscule) ou un "_"
✓ un nom d’objet peut comporter des lettres, des chiffres et les caractères _ et & (les espaces
et les tirets ne sont pas autorisés!)
✓ les noms d’objet ne peuvent pas être des mots réservés du langage.
Exemples correct: surface, stylo_rouge ; Exemple incorrecte : peri-metre, demi périmètre
b) Son type
C’est l’ensemble dans lequel un objet prend ses valeurs.
Il existe trois (03) types de base manipulés par le JavaScript :
Les types numériques
Il n’y a pas de distinction explicite entre entier, réels, décimaux ou hexadécimaux. C’est la valeur
assignée à l’objet qui définit la catégorie du nombre.
Exemples : Var a = 2 ; // exple de définition d’une variable entière
Var moyenne = 11.87 ; // exple de définition d’une variable réelle
Le type chaine de caractères
Une chaîne est une suite de caractères contenus entre simples cotes ou entre guillemets.
Exemples : nom = “atpensc” ; ou bien nom = ‘atpensc’ ;
var message = ‘ Bonjour tout le monde !’ ;
Le type booléen
Un booléen est une variable spéciale servant à évaluer une condition. Une variable booléenne peut
donc posséder deux valeurs : vraie (true) ou fausse (false).
Exemple :Var positif = True ;
Remarque très importante : lorsqu’une variable est déclarée de façon explicite sans affectation, elle
est de type chaîne de caractères par défaut. Cependant, le JS utilise régulièrement deux fonctions
pour effectuer la conversion des types :
✓ La fonction parseInt( ) : elle permet de convertir une variable en nombre entier.
Syntaxe : parseInt(chaine)
3
✓ La fonction parseFloat ( ) : elle permet de convertir une variable en nombre
Syntaxe : parseFloat(chaine)
c) Sa valeur
C’est un symbole ou une suite de symboles renvoyant à un type d’objet bien précis.
I.2- Déclaration des objets
Déclaration des constantes
Elle se fait à l’aide du mot clé Const.
Syntaxe : Const <nom objet> = <valeur>
Exemples : Const taux_TVA = 0.1925 ; Const PI = 3.14 ;
Déclaration des variables
La déclaration de variable n’est pas obligatoire en JavaScript. Qu’on la déclare ou pas son type est
implicite, et sera connu dès qu’on initialise (affecte une première valeur à) la variable. On peut donc
créer des variables et/ou les initialiser de la façon suivante :
Exemple1 : déclaration explicite (se fait à l’aide du mot clé VAR)
Var note ;
Exemple2 : déclaration explicite et affectation d’une valeur numérique
Var note = 12.5 ;
Exemple3 : déclaration implicite et affectation d’une valeur à une variable numérique (sans le mot
clé VAR)
annee = 2012 ;
Exemple4 : déclaration implicite et affectation d’une valeur à une variable chaîne
Jour = “ lundi ” ou bien Jour = ‘ lundi’
II.- Les opérateurs usuels
Ils servent principalement à faire des calculs, à donner une valeur ou à construire des expressions
logiques (vraies ou fausses) dont l’on pourra se servir pour écrire des conditions. Les principaux
opérateurs utilisés sont :
II.1.- Les opérateurs arithmétiques
Pour a= 2, considérons le tableau suivant :
Opérateur Description Exemple Résultat de b
+ Addition b=a+5 7
- Soustraction b=4-a 2
* Multiplication b = a*3 6
/ Division b = 7/a 3.5
^ Puissance b = a^3 8
Modulo (a%b renvoie le reste de la b = 5%a 1
%
division entière de a par b)
++ Incrément b = a++ 3
-- Décrément b = a-- 1
4
II.2.- Les opérateurs de comparaison
Ils renvoient la valeur de vérité vrai(True) ou bien faux (False)
Opérateur Description Exemple (pour A = 5) Résultat retourné
== Est égal à A==4 False
!= Différent de A != 2 True
> Strictement supérieur à A>3 False
< Strictement inférieur à A<5 False
>= Supérieur ou égal A>=1 True
<= Inférieur ou égal A<=5 True
II.3.- Les opérateurs logiques
Opérateur Description Exemple
Soit a=3 ; b=6 ;
&& ET logique
la proposition (a< 10 && b>2) est vraie
Soit x=6 ; y=3 ;
|| OU logique
La proposition (x==5 || y==5) est fausse
Soit x=6 ; y=3 ;
! Négation logique
La proposition !(x==y) est vraie
II.4.- L’opérateur de chaine
L’opération entre les chaines de caractère s’appelle la concaténation, c'est-à-dire la
juxtaposition des objets de type chaine. L’opérateur de concaténation est ‘+’.
Exemple : c1 = “Bon”; c2 =”Jour”; c3 = c1+c2; c4=c2+c1
Dans cet exemple, l’objet c3 contient la chaine “BonJour” tandis que c4 contient la chaine “JourBon”
III.- Instruction de base en JS
Une instruction est une opération élémentaire, interprétée et exécutée par un processeur. (Notons
que le processeur peut être un humain, un automate ou un ordinateur).
Le JavaScript distingue trois (03) types d’instructions de base :
III.1.- Instruction d’affectation
Matérialisée par = (le symbole d’égalité), cette instruction permet d’attribuer une valeur ou le
résultat d’une expression à une variable.
Exemple : x = 3 ; y = 2*x + 1 ; t = x + 4*y ;
x vaut 3, y vaut 7, t vaut 31 après exécution des trois instructions dans l’ordre donné.
III.2.- Instruction de lecture (ou d’entrée)
Cette instruction permet de récupérer les informations saisies par l’utilisateur et de les stocker dans
les variables. Pour cela on utilisera la méthode prompt.
Syntaxe : nom_variable = prompt(“texte à afficher ici”)
Exemple : ageEleve = prompt(“tapez votre age”) ;
/* dans cet exemple, la valeur saisie au clavier par l’utilisateur est stockée dans la variable ageEleve
*/
III.3.- Instruction d’affichage (de sortie ou d’écriture)
Pour afficher du texte en JavaScript on peut utiliser la méthode write ou la méthode alert
Syntaxe :
5
[Link](”mon texte”) ou alert(”mon texte”)
[Link](ma_variable) ou alert(ma_variable)
Exemple : alert(” c’est facile la Terminale ! ”) ;
Exemples récapitulatifs
Exemple 1 : affichage d’un message à Exemple 2 : lecture, affectation et
l’écran affichage
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>mon code </TITLE>
<TITLE>mon script</TITLE>
</HEAD>
<BODY> </HEAD>
<BODY>
<SCRIPT language="Javascript">
alert("Bonjour tout le monde !"); <SCRIPT language="Javascript">
</SCRIPT> alert("CALCUL DU PRODUIT DE
DEUX NOMBRES!");
</BODY>
var a;
</HTML>
var b;
var p ;
a=prompt("entrer la valeur de a");
b=prompt("entrer la valeur de b");
Instructions En algorithme En JavaScript p=a*b;
alert("le produit vaut: "+p);
i) Affectation = </SCRIPT>
ii) Lecture Lire( ) prompt( )
</BODY>
iii) Affichage Ecrire( ) alert( ) </HTML>
Règles générales :
R1 : le langage JavaScript est sensible à la casse, cela signifie qu’il fait la différence entre un nom de
variable écrit en minuscule et le même nom écrit en majuscule ou contenant des majuscules.
(Exemple : ageEleve ≠ ageeleve ; prix ≠ Prix ; note ≠ NOTE)
R2 : Par convention, chaque instruction s’achève par un point-virgule (noté ; ). Il est par ailleurs
possible d’écrire plusieurs instructions séparées par des points-virgules sur une même ligne, bien que
cette pratique ne facilite pas la lecture du code (Voir Exemples récapitulatifs).
R3 : Les commentaires qui tiennent sur une ligne commencent par "//" et ceux sur plusieurs lignes
par "/*" et finissent par "*/".
Exemple :
// Voici un commentaire sur une ligne
/* voici un exemple
un exemple de commentaires
sur trois lignes */
6
UE: LES STRUCTURES FONDAMENTALES
CV : A la fin de cette leçon, l’élève doit être capable de :
- Etant donné un problème, écrire correctement un programme qui le résout à l’aide des structures
fondamentales.
Introduction
Dans la réalité, l’exécution d’une instruction par un processeur n’est pas toujours automatique. Dans
certains cas, il faut au préalable vérifier qu’une ou plusieurs conditions soient réunies à cet effet.
I.- Les structures conditionnelles (ou de contrôle)
Ce type d’instruction permet d’effectuer certaines actions ou traitements, suivant qu’une condition
est réalisée ou non. L’expression d’une condition nécessite l’utilisation des opérateurs de condition.
Les principaux opérateurs sont :
Opérateur Description
== Est égal à
!= Différent de
> Strictement supérieur à
< Strictement inférieur à
>= Supérieur ou égal
<= Inférieur ou égal
I.1.- L’instruction « if… »
L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une
syntaxe parfois différente d'un langage à l'autre...). Elle permet d'exécuter une série d'instructions
(un bloc d'instructions) si jamais une condition est réalisée.
La syntaxe de cette expression est la suivante :
if (condition réalisée) {
liste d'instructions ;
}
Remarques:
R1 : La condition doit être entre des parenthèses ;
R2 : Il est possible de définir plusieurs conditions à remplir à l’aide des opérateurs logiques ET, OU et
NON (respectivement && , || et NOT)
➢ L'instruction suivante par exemple teste si les deux conditions sont réalisées:
if ((condition1) && (condition2))
➢ L'instruction suivante par contre exécutera les instructions si l'une ou l'autre des deux
conditions est réalisée : if ((condition1) || (condition2))
R3 : S'il n'y a qu'une instruction dans le bloc d'instruction, les accolades ne sont pas nécessaires.
Exemple1 :
if (Moyenne >= 10)
alert(“Bravo! Vous avez réussi”);
Exemple2 :
if (nbre > 0) {
7
doubleNb = 2*nbre;
alert(“le double de ce nombre vaut ”+boubleNb);
}
I.2.- L’instruction « if… else… »
L'expression if ... else permet d'exécuter une autre série d'instruction en cas de non-réalisation de la
condition.
La syntaxe de cette expression est la suivante :
if (condition réalisée) {
//liste d'instructions
}
else {
//autre série d'instructions
}
Exemple1 :
if ( nb < 0){
alert(“Ce nombre est strictement négatif ”);
}
else{
alert(“Ce nombre est positif”);
}
II.- Les structures itératives (ou boucles)
Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série d'instructions
jusqu'à ce qu'une condition ne soit plus réalisée. La façon la plus commune de faire une boucle, est
de créer un compteur (une variable qui s'incrémente) et de faire arrêter la boucle lorsque le
compteur dépasse une certaine valeur.
[NB : Pour chacune des boucles, la somme des nombres de 1 à 5 sera calculée.]
II.1.- La boucle while
Syntaxe :
while (<condition>) {
<action>;
...
}
Signification:
Cette boucle exécute les <actions> aussi longtemps que la <condition> est vraie. Si la condition est
fausse au début, aucune instruction n’est exécutée.
Exemple :
chiffre = 0 ;
somme = 0 ;
while (chiffre < 5 ) {
chiffre = chiffre + 1;
somme = somme + chiffre;
}
II.2. - La boucle do ... while
Syntaxe :
8
do {
<action>
...
} while (<condition> )
Signification :
Cette boucle exécute les <actions> aussi longtemps que la <condition> est vraie. Si la condition
est fausse au début, les instructions seront quand même exécutées une seule fois.
Exemple :
chiffre = 0 ;
somme = 0 ;
do {
chiffre = chiffre + 1 ;
somme = somme + chiffre;
} while ( chiffre < 5 )
I.3.- La boucle for
Syntaxe :
for ( <expression de depart> ; <condition de continuation> ; <incrementation> ) {
<action>
...
}
Exemple:
somme = 0 ;
for (chiffre = 1 ; chiffre <= 5 ; chiffre = chiffre + 1 )
{
somme = somme + chiffre ;
}
Signification : La boucle for se déroule de la manière suivante :
Tant que la condition de continuation est vraie :
➢ en partant de l’expression de départ (chiffre = 1) on exécute les actions contenues dans les
accolades;
➢ la variable (chiffre) est incrémentée (chiffre = chiffre + 1) et on exécute les actions contenues
dans les accolades autant de fois que nécessaire;
➢ la boucle ne prend fin que lorsque la condition de continuation devient fausse.
Exercices de consolidations
9
UE: Les tableaux et les fonctions
CV : A la fin de cette leçon, l’élève doit être capable de :
- Manipuler les tableaux
Introduction
Les types de base abordés dans les chapitres précédents sont essentiels pour permettre au
programmeur de résoudre la plupart des problèmes. Il existe cependant d’autres types plus
structurés, à l’instar des tableaux, qui facilitent la manipulation d’objets pouvant contenir plusieurs
valeurs à la fois. Par ailleurs lorsque le code à rédiger contient plusieurs lignes il convient de le
factoriser afin de faciliter la lisibilité et surtout la réutilisation d’un même segment de code.
I.- Les tableaux
En JavaScript, un tableau est donc une variable pouvant contenir plusieurs données
indépendantes, indexées par un numéro, appelé indice.
L'indice d'un tableau est ainsi l'élément permettant d'accéder aux données qui y sont stockées.
I.1.- Caractéristiques d’un tableau
Un tableau est caractérisé par un indice numérique. Le premier élément d’un tableau a
l’indice 0. Pour accéder à un élément particulier on utilise l’opérateur ‘[ ]’ et le numéro d’indice visés.
Voici un schéma représentant un tableau, qui stocke 4 éléments :
Indice 0 1 2 3
éléments Valeur 1 Valeur 2 Valeur 3 Valeur 4
I.2. - Déclaration d’un tableau
Pour déclarer un tableau, on utilise le mot clé var. Cette déclaration peut se faire de deux
manières :
➔ Première méthode : avec les crochets
Le contenu du tableau se définit entre crochets, et chaque valeur est séparée par une virgule.
Lorsque les valeurs du tableau sont des chaînes de caractères, ces dernières sont contenues entre
guillemets ou entre apostrophes.
Cette manière de déclarer un tableau est la plus utilisée en JavaScript.
Exemple1 : création d’un tableau de 5 notes
var Note = [12.5, 11, 13, 8, 10];
Exemple2 : création d’un tableau contenant 4 noms
var NomEleve = [“Sami”, “Tamba”, “Moussa”, “Bisso”];
➔ Deuxième méthode : avec les parenthèses
Elle se fait à l’aide de l’objet « new » et du mot clé array (tableau) de la manière suivante :
var <nom_var> = new array (valeur1, valeur2, valeur3,…);
Exemple1: var Note = new array (12.5, 11, 13, 8, 10);
Exemple2: var NomEleve=new array(“Sami”,“Tamba”,“Moussa”,“Bisso”);
Remarque :
10
a) Les différents exemples abordés montrent comment initialiser un tableau à sa création,
c'est-à-dire attribuer des valeurs à chaque case du tableau au moment de sa création.
b) « Parcourir un tableau » signifie passer en revue chaque valeur du tableau pour, par
exemple, afficher les valeurs un à un, leur faire subir des modifications ou exécuter des
actions en fonction de leur contenu. Le parcours se fait à l’aide d’une boucle répétitive
(généralement la boucle for)
Exemple de parcours de tableau :
<script language=“JavaScript”>
var NomEleve = [‘Sami’, ‘Tamba’, ‘Moussa’, ‘Bisso’];
var i;
for (i=0;i< [Link]; i=i+1){
alert(NomEleve[i]);
}
//[Link] retourne le nombre d’éléments du tableau
II.- Les fonctions
Une fonction est un bloc de code autonome qui accomplit une certaine tâche et qui retourne
éventuellement un résultat.
JavaScript possède des fonctions natives ; c'est-à-dire des fonctions intégrées dans le langage
à l’instar des fonctions alert(), prompt(), etc.. Cependant, le programmeur peut être appelé
à créer ses propres fonctions face à un problème spécifique.
II.1.- Caractéristiques d’une fonction
Une fonction s’utilise à quelques différences prêt comme une variable et de fait possède certaines
caractéristiques des variables :
✓ Les noms des fonctions doivent obligatoirement avoir un nom unique, respecter la casse,
contenir seulement les caractères autorisés et surtout, ne pas débuter par un chiffre car
sinon la fonction ne s'exécuterait pas ;
✓ Les fonctions sont généralement placées dans l'entête de la page HTML, plus précisément
entre les balises <HEAD> et </HEAD> ;
✓ Une fonction ne s’exécute que lorsqu’elle est « appelée », c'est-à-dire exécutée ;
✓ Pour appeler une fonction, il suffit tout simplement de marquer le nom de la fonction, suivi
des parenthèses, même dans le cas où la fonction n'a aucun paramètre, et un point-virgule.
II.2.- Déclaration d’une fonction
La déclaration d’une fonction se fait à l’aide du mot clé function. La syntaxe de déclaration avec
ou sans paramètres est la suivante :
Syntaxe1 :
Function NomDeLaFonction(parametres)
{
//instructions que la fonction devra exécuter au moment de son appel ;
}
Syntaxe2 :
Function NomDeLaFonction()
{
11
//instructions que la fonction devra exécuter au moment de son appel ;
}
Remarque : lorsqu’une fonction doit retourner une valeur, on utilise le mot clé return NomVariable
où NomVariable est le nom de la variable contenant la valeur à retourner.
Exemple 1 : fonction qui affiche un message à l’écran
<html>
<head>
<script type=”text/javascript”>
function Salutation(){
alert (”Bonjour les amis de la Terminale!!!”)
}
</script>
</head>
<body>
Salutation() // appel de fonction
</body>
</html>
Exemple2 : calcul du prix Montant à partir du prix unitaire et de la quantité
<html>
<head>
<script language=”javascript”>
function MontantProduit(q,pu){
var prod ;
prod=pu*q ;
return prod ;
}
</script>
</head>
<body>
<script language=”javascript”>
Var Mt;
Var qte;
Var prixUnit;
qte=prompt(”Entrer la quantité vendue ”);
prixUnit=prompt(”Entrer le prix unitaire ”);
Mt= MontantProduit(qte,prixUnit);
alert(”Le montant à payer vaut ”+ Mt);
</body>
</html>
III.- Les évènements
Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité.
L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au
Javascript il est possible d'associer des fonctions, des méthodes à des événements tels que le
passage de la souris au-dessus d'une zone, le changement d'une valeur, ...
Ce sont les gestionnaires d'événements qui permettent d'associer une action à un événement. La
syntaxe d'un gestionnaire d'événement est la suivante :
onEvenement="Action_Javascript_ou_Fonction();"
12
Lorsqu'il est utilisé dans un lien hypertexte, par exemple, la syntaxe sera la suivante :
<A href="URL" "onEvenement='Action_Javascript_ou_Fonction();'">Lien</a>
Liste de quelques gestionnaires d’événements et les objets associés
Gestionnaire de
Evénement Description Objets associés
l’événement
Se produit lorsque l'utilisateur interrompt le Image
Abort onAbort
chargement de l'image
Se produit lorsque l'utilisateur modifie le contenu Text, TextArea
Change onChange
d'un champ de données.
Se produit lorsque l'utilisateur clique sur Button, CheckBox, Reset, Radio,
Click onClick
l'élément associé à l'événement. Submit, link, …
Se produit lorsque l'utilisateur donne le focus à Button, CheckBox, Reset, Radio,
Focus onFocus un élément, c'est-à-dire que cet élément est Submit, Layer, password, …
sélectionné comme étant l'élément actif
Se produit lorsque l'utilisateur appuie sur une document, Image, Link,
keydown onKeydown
touche de son clavier. TextArea
Se produit lorsque le navigateur de l'utilisateur
Load onLoad Image, Layer, window
charge la page en cours
Se produit lorsque l'utilisateur positionne le
MouseOver onMouseOver Area, Layer, Link
curseur de la souris au-dessus d'un élément
Se produit lorsque l'utilisateur efface les données Form
Reset onReset
d'un formulaire à l'aide du bouton Reset.
Se produit lorsque l'utilisateur sélectionne un
Select onSelect
texte.
Text, Textarea
Se produit lorsque l'utilisateur clique sur le Form
Submit onSubmit
bouton de soumission d'un formulaire.
Se produit lorsque le navigateur de l'utilisateur Window
Unload onUnload0
quitte la page en cours
13