Introduction JavaScript

Objectifs
Dans cette leon, vous apprendrez :

NIIT

Identifier les phases de lvolution de JavaScript

Identifier les caractristiques de JavaScript
Comparer les applications ct serveur et ct client
Identifier les mots rservs employs dans JavaScript
Dclarer des variables pour stocker des donnes dans JavaScript
Manipuler des donnes laide dexpressions et doprateurs
Utiliser des structures de prise de dcision et itratives
Optimiser le code programme laide de fonctions
Dfinir le comportement du programme laide dvnements

JavaScript Notions

Leon 1A /

Introduction JavaScript

Aperu de JavaScript

JavaScript est un langage de script polyvalent dutilisation facile dvelopp par

Netscape Communications Corporation.

Un langage de script est un langage de programmation conu pour permettre

aux utilisateurs dcrire facilement des programmes.

JavaScript fonctionne ct client en tant que partie dune page HTML o il est
interprt et excut par un navigateur comme Internet Explorer.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Script avec JavaScript

JavaScript est considrablement utilis dans les documents HTML pour valider
les entres des utilisateurs finaux.

JavaScript est dot des caractristiques suivantes :

JavaScript est bas objets
JavaScript est guid par lvnement
JavaScript est indpendant de la plateforme
JavaScript permet un dveloppement rapide
JavaScript est facile apprendre

Le code JavaScript intgr dans le fichier HTML est interprt et excut par le
navigateur.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Script avec JavaScript (suite)

Les balises <SCRIPT> et </SCRIPT> servent marquer le dbut et la fin du

code JavaScript code.

Les scripts servent souvent effectuer des validations, ils peuvent tre
excuts aussi bien ct client que ct serveur.

Dans le script ct serveur, le script est excut par le navigateur Web. Dans le
script ct client, le script est excut ct client lorsque le navigateur client
charge la page Web.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Concepts communs de programmation

Certaines conventions relatives lutilisation de points-virgules, de

commentaires et de guillemets dans JavaScript diffrent des autres langages de
script. La structure dun programme JavaScript devrait se conformer ces rgles
et ces conventions.

Les blocs fonctionnels (briques) dun programme JavaScript comprennent les

structures suivantes :
Variables
Oprateurs
Expressions
Fonctions

JavaScript ne vous impose pas demployer un point virgule aprs chaque nonc
pour en indiquer la fin. Toutefois, la bonne pratique consiste utiliser le point
virgule aprs les noncs de script comme la dclaration de variables pour
accrotre la lisibilit du code.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Concepts communs de programmation

(suite)

JavaScript se sert dindicateurs de commentaires pour placer des commentaires

dans un fichier HTML. Ces entres de commentaires nauront pas deffet sur
lapparence du document.

Vous pouvez vous servir soit de guillemets (" ") soit dapostrophes (' ') pour
insrer une chane de caractres. JavaScript vous permet dutiliser des guillemets
et des apostrophes lorsque vous utilisez une paire de guillemets lintrieur dune
autre paire de guillemets.

JavaScript
est
un
langage
de
script
dpendant
maj./min.
A titre dexemple, dans JavaScript, la variable a est diffrente de la variable A.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Travail avec des variables et des

donnes

Dans JavaScript, pour stocker les valeurs introduites par lutilisateur sur une
page Web, vous pouvez vous servir de variables.

JavaScript emploie certains mots dots de spcifications spciales. Ils sont

appels mots cls et mots rservs. Les mots cls et les mots rservs ne
peuvent tre utiliss pour des noms de variable ou de fonction.

Les mots cls sont les identificateurs prdfinis constituant le fondement de

JavaScript. Ils effectuent des fonctions uniques prdfinies comme la
dclaration de variables (var) et la dfinition de fonctions (fonction).

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Variables

Dans JavaScript, les variables peuvent stocker diffrents types de donnes. Les
types de donnes peuvent tre classs en trois catgories :
Number (de numrotation)
String (de chane)
Boolean (boolenne)

La variable suit les rgles suivantes daffectation de noms :

Le premier caractre de la variable doit commencer par un caractre
alphabtique ou soulign (_). Les caractres suivants peuvent tre des
lettres, des numros ou le caractre soulign.
La rgle daffectation de noms dans JavaScript est dutiliser deux mots
pour nommer une variable, le second en majuscules mais pas le premier.
JavaScript est sensible la casse.
La dclaration de variable est implicite.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Variables (suite)

Une variable est dclare par le mot cls var.

Les libells sont les valeurs de donnes relles que vous donnez dans
JavaScript. Il sagit de valeurs fixes que vous affectez des variables. Les
trois catgories de libells sont les suivantes :
Libell entier
Libell virgule flottante
Libell de chane

Il est possible daccder une variable soit dans la fonction dans laquelle
elle est dclare, soit dans toute autre fonction. Cela spcifie la porte de la
variable. En fonction de son accessibilit, une variable peut tre catgorise
en variable locale ou en variable globale.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Calcul avec des oprateurs et des

expressions

Les oprateurs servent effectuer des calculs comme laddition, la soustraction,

la comparaison et la concatnation sur des oprandes.

JavaScript propose les types suivants doprateurs :

Arithmtiques (de calcul)
Logiques
De comparaison
De chane
De modification de configuration binaire
Daffectation
Conditionnels

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Calcul avec des oprateurs et des

expressions (suite)

Les oprateurs de chaque catgories peuvent en outre tre classs en :

NIIT

Oprateurs unaires : les oprateurs unaires oprent sur un seul

oprande.
Oprateurs binaires : les oprateurs binaires oprent sur deux
oprandes.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Oprateurs arithmtiques

Les oprateurs arithmtiques servent effectuer des calculs mathmatiques.

Les oprateurs arithmtiques utiliss dans JavaScript sont les suivants :

Addition (+)
Soustraction (-)
Multiplication (*)
Division (/)
Modulo (%)

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Oprateurs logiques

Les oprateurs logiques servent effectuer les oprations boolennes.

Les oprateurs logiques supports par JavaScript sont les suivants :

NIIT

Logical And (&&) (logique ET)

Logical Or (||) (logique OU)
Logical Not (!) (logique NON)

JavaScript Notions

Leon 1A /

Introduction JavaScript

Oprateurs de comparaison

Les oprateurs de comparaison servent comparer deux valeurs numriques.

Les oprateurs de comparaison supports par JavaScript sont les suivants :

NIIT

gal (==)
Non gal (!=)
Suprieur (>)
Infrieur (<)
Suprieur ou gal (>=)
Infrieur ou gal (<=)

JavaScript Notions

Leon 1A /

Introduction JavaScript

Oprateurs de modification de
configuration binaire

Les oprateurs de modification de configuration binaire effectuent des

oprations sur la reprsentation binaire dune valeur.

Les oprateurs de modification de configuration binaire supports dans

JavaScript sont les suivants :
& (Bitwise AND) (au niveau du bit, ET)
| (Bitwise OR) (au niveau du bit, OU)
^ (Bitwise XOR) (au niveau du bit, OU exclusif)
<< (Bitwise left shift) (au niveau du bit, dplacement gauche)
>> (Bitwise signed right shift) (au niveau du bit, dplacement sign
droite)

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Oprateurs daffectation

Les oprateurs daffectation servent affecter des valeurs aux variables.

Les oprateurs daffectation supports par JavaScript sont les suivants :

=(Affecte la valeur de loprande droit loprande gauche.)
+=(Ajoute les oprandes et affecte le rsultat loprande gauche.)
-=(Soustrait loprande droit de loprande gauche et affecte le rsultat
loprande gauche.)
*=(Multiplie les oprandes et affecte le rsultat loprande gauche.)
/=(Divise loprande gauche par loprande droit et affecte le rsultat
loprande gauche.)
%=(Divise loprande gauche par loprande droit et affecte le rsultat
loprande gauche.)

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Oprateurs conditionnels

JavaScript supporte loprateur dexpression conditionnelle ? :.

Cet oprateur prend trois oprandes : la condition devant tre value et

deux valeurs alternatives devant tre retournes en fonction de la condition.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Prsance des oprateurs

La prsance des oprateurs dtermine les expressions devant tre values

avant dautres. A titre dexemple, dans lexpression 4+6*2, la multiplication a
prsance sur laddition et lexpression est value 16.

Lorsque plus dun oprateur est list un niveau donn, les oprateurs ont
une priorit gale et seront valu en fonction de lordre dans lequel ils sont
placs, en commenant partir de la gauche.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Expressions

Une expression fait partie dun nonc valu comme une valeur. Une
expression peut utiliser nimporte quelle combinaison de variables, de libells
et doprateurs. Loprateur daffectation (=) sert affecter une valeur une
variable.

Dans JavaScript, il existe quatre types dexpressions :

Expression daffectation
Expression arithmtique
Expression de chane
Expression logique

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Contrle de droulement de
programme

NIIT

Tous les langages de programmation proposent des structures de

programmation servant construire un programme. Les structures de
programmation sont de deux types :

Structures de prise de dcision ou conditionnelles.

Les structures itratives ou structures en boucle.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Utilisation de structures de prise de

dcision

Les structures de prise de dcision offrent la possibilit dexcuter une partie

dun programme une seule fois en fonction dune condition.

Il existe deux types de structures de prise de dcision dans JavaScript :

NIIT

Structure If... else

Structure Switchcase

Pour essayer plusieurs conditions, les structures If imbriques sont utilises.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Utilisation de structures itratives

Les diffrents types de structures itratives sont les suivants :

NIIT

Structure while
Structure do-while
Structure for

JavaScript Notions

Leon 1A /

Introduction JavaScript

Introduction aux fonctions et aux

vnements

Lors de la cration de programmes complexes, vous pouvez souvent avoir

effectuer certaines tches et actions plus dune fois durant le cours du
programme. Pour cela, vous pouvez crer des fonctions effectuant des tches
spcifiques et pouvant tre rptes tout au long du programme.

Les vnements servent ajouter du dynamisme aux pages Web en les

faisant rpondre linteraction de lutilisateur.

Les vnements sont dclenchs par les actions dutilisateurs comme les
cliquages de souris.

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Optimisation du code de programme

Comme bonne pratique de programmation, vous pouvez utiliser les fonctions

pour regrouper les noncs frquemment utiliss dans le code de
programme. Une fonction est un bloc de code organis. Une bonne pratique
de programmation veut que vous utilisiez le fonctions pour regrouper les
noncs frquemment utiliss dans le code de programme. Une fonction est
un bloc de code organis destin effectuer une seule action y associe.

Ci-dessous, quelques caractristiques des fonctions :

Rutilisabilit
Modularit
Simplicit de programmation globale

Les fonctions sont de deux types :

Fonctions intgres
Fonctions dfinies par lutilisateur

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Optimisation du code de programme

(suite)

Les fonctions intgres sont dj codes pour faciliter la tche du

programmeur. Ci-dessous, quelques fonctions intgres supportes par
JavaScript :

NIIT

isNaN() : aide dterminer si un argument est "NaN" (not a number)

(pas un nombre).
parseInt() : analyse largument de chane et retourne un entier.
parseFloat() : accepte un argument de chane et retourne un
numro virgule flottante.
eval() : value un nonc ou une expression JavaScript stocks
comme chane incluant galement des quivalents de chane ou des
expression arithmtiques.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Optimisation du code de programme

(suite)

Vous pouvez galement crer vos propres fonctions dans JavaScript pour accrotre
la lisibilit et lefficacit. Ces fonctions sont appeles fonctions dfinies par
lutilisateur.
Pour vous servir efficacement des fonctions, vous devez savoir:
Comment dclarer une fonction dfinie par lutilisateur
Comment passer des arguments
Comment retourner une valeur
Comment appeler une fonction dfinie par lutilisateur partir du programme
principal
JavaScript sur le modle objet dans lequel chaque objet a ses mthodes. Les
mthodes sont les actions quun objet peut tre appel effectuer.
Les deux mthodes suivantes sont couramment utilises dans JavaScript :
Mthode alert()
Mthode prompt()

NIIT

JavaScript Notions

Leon 1A /

Introduction JavaScript

Optimisation du code de programme

(suite)

La mthode alert()est une

communiquer avec lutilisateur.

La syntaxe de la mthode alert()est la suivante :

alert("Message to the user");

Vous pouvez employer la mthode prompt()pour crer une bote de dialogue

et un message appropri.

La syntaxe de la mthode prompt()est la suivante :

prompt("Message to the user");

NIIT

mthode

JavaScript Notions

offerte

par

JavaScript

Leon 1A /

pour

Introduction JavaScript

Dfinition du comportement de
programme

Le comportement de programme fait rfrence au rsultat dun programme

lorsque lutilisateur interagit avec ce programme.

La fonction, excute en rponse un vnement, est appele gestionnaire

dvnement. Cette fonction de gestionnaire dvnement rside dans linterprte
JavaScript du navigateur Web.

La figure suivante
affiche
ledeprocessus
gestion
dvnement :
Traitede
l'vnement
et envoie
Rendement
d'affichages
le rendement

navigateur
UTILISATEUR

Effectue une action

NIIT

TRAITEUR d'VNEMENT
incorpor dans le navigateur de
Web

NAVIGATEUR

Produit d'un vnement

JavaScript Notions

Leon 1A /

Introduction JavaScript

Dmonstration-mise en uvre de
fonctions et dvnements

nonc de problme

NIIT

Creative Books Corporation est un libraire rput dans le New

Jersey, aux Etats-Unis. Le site Web actuel de la socit
propose aux clients, un service dachat en ligne de livres,
magazines, journaux et CD. Rcemment, Bruce, le PDG de la
socit, a ressenti le besoin dinclure une section de calcul sur
lune des pages Web du site Web. Cela permettrait aux clients
de calculer le montant total de leurs achats avant de passer
une commande.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Dmonstration-dveloppement de
formulaires interactifs(suite)

Solution
1.
2.
3.
4.

NIIT

Crez linterface utilisateur.

crivez le code JavaScript.
Sauvegardez le document.
Vrifiez la solution.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Rcapitulation
Dans cette leon, vous avez appris que :

NIIT

Un script est un programme ou une squence dinstructions interprts

ou mis en uvre par un autre programme au lieu du processeur dun
ordinateur linverse dun programme compil.
Il existe un certain nombre de langages de script parmi lesquels Perl,
REXX (sur ordinateurs centraux IBM), JavaScript, VBScript et Tcl/Tk.
JavaScript est un langage de script utilis par les auteurs de pages Web
pour scripter dynamiquement le comportement dobjets comme un
formulaire ou un bouton fonctionnant ct client et ct serveur.
Java Script a t dvelopp par Netscape Communications Corporation.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Rcapitulation (suite)

NIIT

JavaScript est dot des caractristiques suivantes :

JavaScript est bas objets et non orient objets
JavaScript est guid par lvnement
JavaScript est indpendant de la plateforme
JavaScript permet de rapides dveloppements
JavaScript est facile apprendre
Les blocs fonctionnels dun programme JavaScript sont les noncs, les
fonctions, les oprateurs et les expressions.
JavaScript autorise lutilisation du point virgule pour dparer les noncs
les uns des autres.
JavaScript
utilise
deux
types
dindicateurs
de
commentaires.
Lindicateur // dlimite un commentaire sur une seule ligne de script.
Lindicateur de commentaire /**/ sert dans les commentaires plusieurs
lignes.
Dans JavaScript, vous pouvez utiliser soit des guillemets ("") soit des
apostrophes ('') pour contenir une chane de caractres.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Rcapitulation (suite)

NIIT

JavaScript est un langage de script dpendant Maj/min.

Le code JavaScript intgr dans le fichier HTML file est interprt et excut
par le navigateur. La balise <SCRIPT> sert informer le navigateur des
sections spcifiques du code HTML dans lesquelles existe JavaScript.
Les mots cls sont les identificateurs prdfinis formant le fondement de
JavaScript. Vous devez utiliser la syntaxe correcte de ces mots, y compris un
orthographe et une casse appropris.
Les mots rservs de JavaScript ne peuvent servir pour des noms de
variables ou de fonctions.
Les variables stockent des donnes de diffrents types comme "xyz", 15 et
10.65. JavaScript supporte les types de donnes de chane, de nombre et
boolennes.
Les libells sont les valeurs de donnes relles que vous donnez dans
JavaScript.
En fonction de son accessibilit, la variable peut tre catgorise en variable
locale ou en variable globale.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Rcapitulation (suite)

NIIT

Les oprateurs servent effectuer des calculs sur des variables et des
constantes. Les oprateurs peuvent tre arithmtiques, de chane, bit-bit, daffectation ou relationnels.
Les oprateurs JavaScript sont en outre classs en :
Oprateurs unaires
Oprateurs binaires
Une expression est une combinaison de donnes et doprateurs.
Les structures de programmation sont de deux types :
Structures de prise de dcision ou conditionnelles
Structures itratives ou structures en boucle
Les structures de prise de dcision ou conditionnelles sont les suivantes :
Structure If...else
Structure switch...case

JavaScript Notions

Leon 1A /

Introduction JavaScript

Rcapitulation (suite)

NIIT

Les structures itratives sont les suivantes :

Structure while
Structure do...while
Structure for
Lnonc dinterruption sert sortir dune boucle qui autrement continuerait
dtre excute.
Lnonc de continuit sert forcer le flux de contrle au haut de la boucle.
Une fonction est un bloc de code organis effectuant une seule action y
associe. JavaScript supporte deux types de fonctions : intgres et dfinies
par lutilisateur.
Les fonctions intgres peuvent tre utilises partout dans le langage de
script. Il nest pas ncessaire dcrire de code pour utiliser ces fonctions.
Les fonctions dfinies par lutilisateur sont cres par lutilisateur pour
accrotre la lisibilit et lefficacit. Lutilisation de fonctions rend le
programme flexible.

JavaScript Notions

Leon 1A /

Introduction JavaScript

Rcapitulation (suite)

NIIT

Les fonctions associes des objets sont appeles comportements ou

mthodes dobjets.
Le comportement du programme fait rfrence au rsultat dun
programme lors de linteraction de lutilisateur avec ce programme. Dans
JavaScript, les vnements sont des actions intervenant la suite de
linteraction de lutilisateur avec les pages Web ou dautres activits lies
au navigateur.
Ci-dessous, quelques types dvnements :
cliquer
changer
centrer
charger
Souris sur
Souris hors
Slectionner
Flouter

JavaScript Notions

Leon 1A /