TECHNOLOGIES WEB
CHAPITRE III : LE LANGAGE
JAVASCRIPT
1
PLAN
Partie I : Partie II:
Pourquoi JavaScript? Déclarations des fonctions
Ecriture du JavaScript Méthodes Utilisé
Variables L’ Accès aux éléments
Types
Boites de dialogue
Opérateurs Javascript
Structures conditionnelle
Itérations
Notion d’objet en JavaScript
Fonctions Prédéfinis
2
UP WEUP WEB ESPRIT
B ESPRIT
Partie I
3
POURQUOI JAVASCRIPT?
interprétable par le navigateur du côté Client
Permet une interactivité au Web
* Contrôle des valeurs saisies dans un formulaire
Les scripts populaires sont: JavaScript, VBScript, JScript, etc.
4
ECRITURE DU JAVASCRIPT (1/2)
Deux possibilité :
Interne : le code de Java Script sera placé dans l’entête du document
XHTML
5
ECRITURE DU JAVASCRIPT(2/2)
Deux possibilité :
Externe: Regrouper les instructions de JavaScript dans un fichier (.js)
externe au fichier HTML .
6
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”;
7
TYPES
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
8
BOITES DE DIALOGUE (1/2)
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
9
BOITES DE DIALOGUE (2/2)
Alert (retourne la valeur UNDEFINED)
Ex: alert(‘Bienvenue à ESPRIT’);
Confirm (retourne la valeur true ou false)
Ex: confirm(‘Bienvenue à ESPRIT’);
10
EXERCICE 1
Ecrire un script qui vous permet de réaliser les boites de dialogue suivantes:
11
COMMENTAIRES
• Commentaires en JavaScript
Utiliser // pour les commentaires sur une ligne.
Utiliser au début /* et à la fin */ pour les commentaires sur
plusieurs lignes.
12
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
13
STRUCTURE CONDITIONNELLE
If (condition) instruction;
If (condition) instruction else instruction;
Exemple:
REMARQUE: Mettre des { …} pour plusieurs instructions dans un block 14
conditionnel
ITÉRATIONS
While (condition) instruction;
Do instruction While (condition);
For (initialisation; condition; incrémentation) instructions;
Exemple:
15
REMARQUE: Mettre des { …} pour plusieurs instructions dans un block itératif.
NOTION D’OBJET EN JAVASCRIPT
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
16
EXEMPLE D’OBJET
Objet Fenêtre
Objet document
Objet Formulaire
Objet Texte
Objet Radio
Objet Bouton
17
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) ; 18
FONCTIONS PRÉDÉFINIES
• Parsefloat ()
• Parseint ()
• String ()
• Number ()
• Length()
19
FONCTION 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
FONCTION PARSEINT
parseInt(chaine_de_caractère);
Convertit l'argument en un nombre entier
Renvoie NaN si la conversion est impossible
Exemple:
21
FONCTION STRING
String (une_chose);
Convertit l'argument en une chaîne
Exemple:
Resultat :
22
FONCTION NUMBER
Number(une_valeur);
Convertit l'argument en un nombre
Renvoie NaN si la convertion est impossible
Exemple:
23
EXERCICE 2
24
EXERCICE 3
Développer en JavaScript un script qui permet de :
1/ Collecter auprès des utilisateurs les valeurs de x et y.
Considérer les règles suivantes:
Si x>5 alors déduire 5 de x sinon ajouter 5 à x.
Si y>10 alors déduire 10 de y sinon ajouter 10 à y.
2/ Afficher le résultat x+y
25
EXERCICE 4
Développer en JavaScript un script qui permet d’afficher
tous les entiers compris entre 1 et 1000 qui sont divisibles
par 23.
26
Partie II
27
FONCTIONS
Définies dans la parte <head> et appelé dans la partie
<body>.
28
MÉTHODES UTILISÉ
Instruction Description
length C'est un entier qui indique la longueur de la
chaîne de caractères.
charAt() Méthode qui permet d'accéder à un caractère
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).
substring(x,y) Méthode qui renvoie un string partiel situé
entre l position x et la position y-1.
toLowerCase() Transforme toutes les lettres en minuscules.
toUpperCase() Transforme toutes les lettres en Majuscules.
29
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;
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 ?
30
Options: Combien a-t-il d'options dans un Select ?
LA MÉTHODE CHARAT() (1/2)
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.
31
LA MÉTHODE CHARAT() (2/2)
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
Notez l’exemple suivant :
var str="Javascript";
var chr=str.charAt(0);
var chr="Javascript".charAt(0);
ou var chr=charAt(str,0);
ou var chr=charAt("Javascript",0);
32
La réponse est "J".
LA MÉTHODE INDEXOF (1/3)
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);
33
LA MÉTHODE INDEXOF (2/3)
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.
34
LA MÉTHODE INDEXOF (3/3)
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
35
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.
36
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
37
ACCÈS AUX OBJETS DU FORMULAIRE
1
Window.document.forms[n].name_d’objet 2
3
1 2 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.
L’ACCÈS AUX ÉLÉMENTS DE TYPE INPUT
(1/3)
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.
39
EXERCICE 5
1.Ecrire une fonction qui permet de vérifier les champs
nom et CIN ne sont pas vide.
2. Ecrire une fonction qui permet de vérifier que le
champs CIN est numérique et possède une longueur égale
à 8 caractères.
40
L’ACCÈS AUX ÉLÉMENTS DE TYPE INPUT
(2/3)
Les cases à cocher:
Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked
41
EXERCICE 6
Développer en JavaScript un script qui permet d’afficher le choix sélectionner.
1/ Si CSS sélectionner :
2/ Si JavaScript Sélectionner :
3/ Si Les Deux :
42
EXERCICE 7 (1/3)
Il vous a été demandé de compléter le script du jeu en développant la
fonction JavaScript CalculScore() qui permet de :
Afficher une alerte si le joueur coche moins ou plus de trois cases.
Calculer le score du jeu et afficher une alerte , « Vous êtes déjà un joueur
expert » si le score est plus grand que 15, sinon afficher une alerte « Vous êtes
encore un joueur débutant ».
43
EXERCICE 7 (2/3)
44
EXERCICE 7 (3/3)
45
L’ACCÈS AUX ÉLÉMENTS DE TYPE INPUT
(3/3)
Les radio boutons:
Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked
46
EXERCICE 8
Développer en JavaScript un script qui permet
d’afficher le choix de la case radio choisie.
47
L’ACCÈS AUX ÉLÉMENTS DE TYPE SELECT
Résultat
48
EXERCICE 9
Développer en JavaScript un script qui permet
d’accepter une adresse email respectant les règles
suivantes:
– Exactement 1 seul caractère @
– Min 1 point celui-ci ne doit pas se situer tout juste avant
ou après @
– Min 2 caractères après le dernier point
– L’adresse email ne commence et ne finit ni par @ ni par
un point
49
Des questions ?
50
