LE LANGAGE

JAVASCRIPT
Plan
• Partie 1 • Partie 2
▪ JavaScript? ▪ Déclaration des fonctions
▪ HTML et JavaScript ▪ Méthodes utilisées
▪ Les Variables ▪ L’ Accès aux éléments
▪ Les Types
▪ Les Boites de dialogue
▪ Les Opérateurs Javascript
▪ Les Structures conditionnelle
▪ Les Itérations
▪ Hiérarchie d’objets en
JavaScript
▪ Fonctions Prédéfinis
2
 Partie 1
JavaScript?

✓ Javascript permet de rendre intéracatif un site internet

développé en HTML.
✓ Javascript permet de développer de véritables
applications fonctionnant exclusivement dans le cadre
d'Internet.
✓ Javascript a été initialement élaboré par Netscape en
association avec Sun Microsystem.
✓ Javascript est standardisé par un comité spécialisé,
l'ECMA (European Computer Manufactures Association).
✓ Langage interprété au chargement de la page par le
navigateur client

3
 Partie 1
HTML et JavaScript
Interne
2 possibilités
Externe
Interne: le code de JavaScript sera placé dans l’entête
du document HTML

4
 Partie 1
HTML et JavaScript

Externe: Regrouper les instructions de JavaScript dans un

fichier (.js) externe au fichier HTML

5
 Partie 1
Les Variables

JavaScript est un langage pauvrement typé, il n’est

pas indispensable de déclarer préalablement le type
de variable.

➔ Utiliser var pour déclarer les variables

➔ Utiliser « ; » en fin d’instruction

Exemple:
var saluer=“Bonjour”;
var nom =“Ali”; 6
 Partie 1
Les Types prédéfinis

✓ String, Number, Boolean, NaN, Null, etc.

➔NaN est le sigle de "Not a Number", c’est à dire

"Ce n'est pas un nombre !" C'est en fait le résultat
d'une opération mathématique sans sens (la
division de 0 par 0, la racine carrée d'un nombre
négatif, etc.)

➔NULL sert à spécifier une variable sans valeur

7
 Partie 1
Les Boites de dialogue
PROMPT : prompt(‘MSG’,’Valeur ’);

Ex: var x = prompt(‘ veuillez mettre un message‘,’valeur’)

➔ X prend la valeur entrée ou Null si aucune

valeur n’est entrée

8
 Partie 1
Les Boites de dialogue

Alert (retourne la valeur UNDEFINED)

Ex: alert(‘Bienvenue à ESPRIT’);

Confirm (retourne la valeur true ou false)

Ex: confirm(‘Bienvenue à ESPRIT’);
9
 Partie 1
Les Commentaires

Commentaires en JavaScript :

• Utiliser // pour les commentaires sur une ligne.

• Utiliser au début /* et à la fin */ pour les

commentaires sur plusieurs lignes.

10
 Partie 1
Les Opérateurs JavaScript
• Arithmétiques : + - / * ++ --

• Comparaison: < <= == != >= >

• Concaténation des chaînes : +

• Assignation : =

•Spéciales: == et != convertissent les opérandes

de même type avant la comparaison 11

 Partie 1
La Structure Conditionnelle
✓ If (condition) instruction;

✓ If (condition) instruction else instruction;

Exemple:

➔REMARQUE: Mettre des { …} pour plusieurs instructions dans un block conditionnel

12
 Partie 1
Les Itérations
✓ While (condition) instruction;
✓ Do instruction While (condition);
✓ For (initialisation; condition; incrémentation) instructions;

Exemple:

➔ REMARQUE: Mettre des { …} pour plusieurs instructions dans un block itératif.

13
 Partie 1
Notion d’hiérarchie d’objets

✓ JavaScript n’est pas un langage orienté objet mais

un langage basé sur les objets.
✓Un objet est une entité prédéfinie propre à
Javascript.

La page Web est considérée comme un

ENSEMBLE D’OBJETS
14
 Partie 1
Notion d’hiérarchie d’objets

➢ Ces objets sont crées par javascript automatiquement si les éléments correspondants
existent dans la page
➢ Certains existent toujours
• navigator
• window
• document
• location 15
• history
 Partie 1
Notion d’hiérarchie d’objets
• navigator
– Contient le nom et la version du navigateur, les plugins installés…

• window
– Propriétés qui s’appliquent à la fenêtre tout entière

• document
– Propriétés sur le contenu du document (titre, couleur…)

• location
– URL actuelle

• history
– URLs visitées

16
 Partie 1
Objet Array
Création de l’objet :
var mycars=new Array() ;
mycars[0]="Saab" ;
mycars[1]="Volvo" ;
mycars[2]="BMW" ;

Ou bien :
var mycars=new Array("Saab“ ,"Volvo“ ,"BMW") ;

➔Pour contrôler la grandeur du tableau :

var myArray=new Array(3) ;

17
Exercice: Affichage de Partie 1

la date du jour
<HTML>
<HEAD> <TITLE> Exemple Date </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var dt=new Date;
var jour=dt.getDay( ); // renvoi un jour [0..6]
var numero=dt.getDate( ); // renvoi le numéro dans le
mois
var mois=dt.getMonth( ); // renvoi le mois [0..11]

var tab_jour=new Array("Dimanche","Lundi","Mardi",

"Mercredi","Jeudi","Vendredi","Samedi");
var tab_mois=new Array("Janvier","Février","Mars","Avril","Mai",
"Juin","Juillet","Août","Septembre",
"Octobre","Novembre","Décembre");

document.write("Nous sommes le "+tab_jour[jour]+" "

+numero+" "+tab_mois[mois]);

</SCRIPT> 18
</BODY>
 Partie 1
Fonctions Prédéfinies

• Parsefloat ()

• Parseint ()

• String ()

• Number ()

• Length()

19
 Partie 1
Fonctions Parsefloat
✓ parsefloat(une_chaine);
➔ Convertit une chaîne en nombre à
virgule flottante si la chaîne commence par un
caractère numérique.
Exemple:

20
 Partie 1
Fonctions Parseint
✓ parseInt(chaine_de_caractère);
➔ Convertit l'argument en un nombre entier
➔ Renvoie NaN si la conversion est impossible
Exemple:
 Partie 1
Fonctions String
✓ String (une_chose);
➔Convertit l'argument en une chaîne
Exemple:

Resultat :

22
 Partie 1
Fonctions Number
✓ Number(une_valeur);
➔Convertit l'argument en un nombre
➔Renvoie NaN si la convertion est impossible

Exemple:

23
 Partie 2
Les Fonctions
Définies dans la partie <head> et appelé dans la
partie <body>

24
 Partie 2
Les Méthodes Utilisées

Instruction Description
C'est un entier qui indique la longueur de la
length
chaîne de caractères.
Méthode qui permet d'accéder à un caractère
charAt()
isolé d'une chaîne.
Méthode qui renvoie la position d'une chaîne
partielle à partir d'une position déterminée.
indexOf()
(en commençant au début de la chaîne
pricipale soit en position 0).
Méthode qui renvoie la position d'une chaîne
partielle à partir d'une position déterminée.
lastIndexOf()
(en commençant à la fin soit en position length
moins 1).
Méthode qui renvoie un string partiel situé
substring(x,y)
entre l position x et la position y-1.
toLowerCase() Transforme toutes les lettres en minuscules.
toUpperCase() Transforme toutes les lettres en Majuscules. 25
 Partie 2
La Propriété Length

• La propriété length retourne un entier qui indique le nombre

d'éléments dans une chaîne de caractères. Si la chaîne est vide ("
"), le nombre est zéro.

La syntaxe est simple :

x=variable.length;
x=("chaîne de caractères").length;

26
 Partie 2
La Propriété Length

• La propriété length ne sert pas que pour les Strings, mais aussi
pour connaître la longueur ou le nombre d'éléments :
✓ Formulaires: Combien a-t-il de formulaires différents ?
✓ Boutons radio: Combien a-t-il de boutons radio dans un groupe ?
✓ Cases à cocher: Combien a-t-il de cases à cocher dans un groupe ?
✓ Options: Combien a-t-il d'options dans un Select ?

27
 Partie 2
La Méthode CharAt()

Il faut d'abord bien noter que les caractères sont comptés de gauche à
droite et que la position du premier caractère est 0. La position du
dernier caractère est donc la longueur (length) de la chaîne de
caractère moins 1.
chaîne : Javascript (longueur = 10)
||||||||||
position : 0123456789 (longueur - 1)
Si la position que vous indiquer est inférieure à zéro ou plus grande
que la longueur moins 1, Javascript retourne une chaîne vide.
28
 Partie 2
La Méthode CharAt()
La syntaxe de charAt() est :
chaîne_réponse = chaîme_départ.charAt(x);
NB : où x est un entier compris entre 0 et la longueur de la chaîne à
analyser moins 1
var str="Javascript";
Notez l’exemple suivant : var chr=str.charAt(0);
var chr="Javascript".charAt(0);
ou var chr=charAt(str,0);
ou var
chr=charAt("Javascript",0);
➔ La réponse est "J".
29
 Partie 2
La Méthode IndexOf()

Cette méthode renvoie la position, soit x, d'un string partiel (lettre

unique, groupe de lettres ou mot) dans une chaîne de caractères en
commençant à la position indiquée par y. Cela vous permet, par
exemple, de voir si une lettre, un groupe de lettres ou un mot existe
dans une phrase.

variable="chaîne_de_caractères";
var="string_partiel";
x=variable.indexOf(var,y);

30
 Partie 2
La Méthode IndexOf()

✓ Où y est la position à partir de laquelle la recherche (de gauche

vers la droite) doit commencer. Cela peut être tout entier compris
entre 0 et la longueur - 1 de la chaîne de caractères à analyser.
Si y n'est pas spécifié, la recherche commencera par défaut à la
position 0.

➔ Si le string partiel n'est pas trouvé dans la chaîne de caractères à

analyser, la valeur retournée sera égale à -1.

31
 Partie 2
La Méthode IndexOf()

Exemple:
variable="Javascript"
var="script"
x=variable.indexOf(var,0);
➔ x vaut 4
variable="VanlanckerLuc&ccim.be"
var="@"
x=variable.indexOf(var);
➔ x vaut -1

32
 Partie 2
La Méthode substring()

La méthode substring() sera particulièrement utile, par exemple, pour

prendre différentes données dans une longue chaîne de caractères.
variable = "chaîne de caractères"
resultat=variable.substring(x,y)
➔ Résultat est un sous ensemble de la chaîne de caractère (ou de la
variable).
Les x et y sont des entiers compris entre 0 et la longueur moins 1 de la chaîne
de caractères.

NB : Si x est égal à y, substring() retourne une chaîne vide.

33
 Partie 2
La Méthode substring()
Javascript
||||||||||
0123456789
Exemple :
str="Javascript";
str1=str.substring(0,4);
str2="Javascript".substring(0,4);
str3=str.substring(6,9);
Les résultats sont :
str1="Java"; soit les positions 0,1,2 et 3.
str2="Java"; soit les positions 0,1,2 et 3.
str3="rip"; soit les positions 6,7 et 8
34
Exercice: calculatrice Partie 2

javascript
Dans cette réalisation, le calcul repose
sur la fonction eval() de javascript.
Attention, comme les fonctions
mathématiques de javascript
appartiennent à la classe Math, il faut,
par exemple, évaluer Math.sin(x) pour
obtenir sin(x).

35
 Partie 2
Accès aux objets du
Formulaire
1

Window.document.forms[n].name_d’obje
2
3
1 2 t 3

• forms[n] (c’est le tableau des formulaires) peut être remplacé par le nom de la
balise form ou par getElementById(id de la balise form).

• Puisque Window occupe la première place dans l’hiérarchie, il devient facultatif.

36
 Partie 2
Accès aux éléments de Type
Input
Les zones de texte:
La principale action en javascript sur une zone de texte est de manipuler son
contenu.
➢Il faut bien penser à ajouter la propriété .value pour accéder au contenu.

37
 Partie 2
Accès aux éléments de Type
Input
Les radio boutons:
Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked

38
 Partie 2
L’accès aux éléments de
types Select

39
MERCI POUR VOTRE ATTENTION

40