Le développement d’application web

Le language JavaScript
 Le language JavaScript

➢Créé à l'origine par Netscape,

➢ce langage de programmation est conçu pour
traiter localement des événements provoqués par
l’utilisateur :
• par exemple, lorsque l’utilisateur fait glisser
la souris sur une zone de texte, cette dernière
change de couleur
 Le language JavaScript

➢C'est un langage interprété :

•c'est-à-dire que le texte contenant le programme
est analysé au fur et à mesure par l'interprète,
partie intégrante du browser, qui va exécuter les
instructions.
Comment JavaScript se situe-t-il par rapport à
HTML ?
 Comment JavaScript se situe-t-il par rapport à HTML ?

✓HTML permet de décrire des pages, un peu à la manière d'un

traitement de texte :
« ici un texte gras, aller à la ligne, ici une image… »

✓JavaScript permet de programmer des actions en fonction

d'événements :
 Exemple
Si l'utilisateur remplit une case de saisie alors
tester si les caractères tapés sont numériques
si oui
enregistrer la valeur
si non
envoyer un message d'alerte

ou bien d'effectuer des calculs toujours sans aucun

recours au serveur :
lire la valeur d'une cellule de saisie, multiplier ce
nombre par 2 afficher le résultat
Donc :

On nomme script l'ensemble d'instructions permettant de

réaliser une action.
Les domaines d'applications du langage JavaScript:

peuvent être classés en plusieurs catégories :

➢Aspects graphiques de l'interface

o Ex: modification d'images lors du passage
de la souris,
➢Tests de validité des données sur les éléments de l'interface de
saisie
oEx : pour vérifier qu'une valeur considérée
comme obligatoire a bien été saisie,
comment le code JavaScript est inséré au code HTML?
 Le language JavaScript

➢comment le code JavaScript est inséré au code

HTML?
✓Dans un document HTML
✓Dans un fichier .js (méthode la plus
recommandée) ;
 Le language JavaScript

➢comment le code JavaScript est inséré au code

HTML?
✓Dans un document HTML
✓Dans un fichier .js (méthode la plus
recommandée) ;
comment le code JavaScript est inséré au code HTML?

Dans un document HTML

les trois méthodes possibles pour insérer du code JavaScript dans
un document HTML :
1. la première consiste à utiliser les balises
<SCRIPT>...</SCRIPT> ;
comment le code JavaScript est inséré au code HTML?

Dans un document HTML

les trois méthodes possibles pour insérer du code JavaScript dans
un document HTML :
2. la seconde à utiliser le pseudo-protocole JavaScript:... dans
une URL ;
……
comment le code JavaScript est inséré au code HTML?

Dans un document HTML

les trois méthodes possibles pour insérer du code JavaScript dans
un document HTML :
3. la dernière à utiliser un des nouveaux attributs de balise pour
la gestion d'événements.
 Remarque

Concernant la troisième méthode

✓ utiliser un des nouveaux attributs de balise pour la
gestion d'événements.
 Le language JavaScript

➢comment le code JavaScript est inséré au code

HTML?
✓Dans un document HTML
✓Dans un fichier .js (méthode la plus
recommandée) ;
[Link]
Comment programmer avec JavaScript ?
Affichage ????
 Affichage ????

➢Sur la page web

➢Dans une boite de dialogue

 Affichage ????

➢Sur la page web

[Link] (‘Hello World!‘);

➢Dans une boite de dialogue

 Affichage ????

➢Sur la page web

➢Dans une boite de dialogue

 Affichage ????

➢Sur la page web

➢Dans une boite de dialogue

• alert(message);

•Prompt(message ,valeur)

•Confirm(message)
 Affichage ????

➢Sur la page web

➢Dans une boite de dialogue

• alert(message);

•Prompt(message ,valeur)

•Confirm(message)
 Affichage ????

➢Sur la page web

➢Dans une boite de dialogue

• alert(message);

•Prompt(message ,valeur)

•Confirm(message)
 Affichage ????

➢Sur la page web

➢Dans une boite de dialogue

• alert(message);

•Prompt(message ,valeur)

•Confirm(message)
 La balise <SCRIPT>...</SCRIPT>

La syntaxe générale de la balise <SCRIPT> est la suivante :

<SCRIPT
LANGUAGE="nomlangage" >
………………………
………………………
………………………
</SCRIPT>
Insertion de variables JavaScript
Les types
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples :
❑Un type pour les données structurées : les objets (object).
❑Enfin, il reste un type un peu particulier qui permet
notamment de manipuler les autres types, les fonctions
(function).
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples :
❑Un type pour les données structurées : les objets (object).
❑Enfin, il reste un type un peu particulier qui permet
notamment de manipuler les autres types, les fonctions
(function).
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples :
•les chaînes de caractères (string en anglais),
•les nombres (number) et
•les booléens (boolean).
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples :
•les chaînes de caractères (string en anglais),
•les nombres (number) et
•les booléens (boolean).
 Les chaînes de caractères

Les chaînes de caractères sont définies en JavaScript

comme dans la plupart des langages de la façon suivante :

‘Papa alaa’ ou “ papa alaa “

les apostrophes ' ou les guillemets " pour délimiter

le début et la fin de la chaîne
 Les chaînes de caractères

Comme en C, des caractères spéciaux peuvent être insérés dans

les chaînes de caractères :
• \n permet d'insérer un saut de ligne ;
•…etc
 Les chaînes de caractères

l'opérateur de concaténation des chaînes de

caractères est le caractère +.
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples :
•les chaînes de caractères (string en anglais),
•les nombres (number) et
•les booléens (boolean).
 Les nombres

❑ En JavaScript, le type number ne permet pas de faire la

différence entre les entiers et les réels.
❑du point de vue de JavaScript, les données obtenues sont des
nombres, sans distinction entre réels et entiers.
 Les nombres

Pour les entiers, certaines règles doivent être respectées.

❖Un nombre, dont le premier chiffre est 0, est considéré
comme étant exprimé en base 8 (octale).
❖Un nombre dont les deux premiers caractères sont 0x est
considéré comme étant exprimé en base 16 (hexadécimale).
❖Tout autre nombre est considéré comme étant exprimé en
base 10 (décimale).
Exemple
 Les nombres

•Les réels : un point (et non une virgule)

•Par exemple :
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples :
•les chaînes de caractères (string en anglais),
•les nombres (number) et
•les booléens (boolean).
 Les booléens

Les booléens sont des entités qui ne peuvent avoir

que deux valeurs, true (vrai) ou false (faux).
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples
❑Un type pour les données structurées : les objets (object).
❑Enfin, il reste un type un peu particulier qui permet
notamment de manipuler les autres types, les fonctions
(function).
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples
❑un type un peu particulier qui permet notamment de
manipuler les autres types, les fonctions (function).
❑Un type pour les données structurées : les objets (object).
 Une fonction

est un ensemble d'instructions réunies pour effectuer une

action bien définie.
Une fonction
Exemple
 Remarque

❑ Il faut noter que les arguments des fonctions ne sont

pas typés lors de la définition de la fonction.

❑le nombre d'arguments d'une fonction n'est pas fixé

lors de sa déclaration.
 remarque?

➢ Creer une fonction dans une variable

 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples
❑un type un peu particulier qui permet notamment de
manipuler les autres types, les fonctions (function).
❑Un type pour les données structurées : les objets (object).
 Les types

En JavaScript, on manipule cinq types d'entités.

❑ Trois types de données simples
❑un type un peu particulier qui permet notamment de
manipuler les autres types, les fonctions (function).
❑Un type pour les données structurées : les objets (object).
les objets
 les objets

❑Considérons un exemple très simple.

❑Nous souhaitons représenter des individus.
❑Nous allons pour cela créer une classe Individu
définissant les propriétés qui caractérisent un individu.
➢le nom, le prénom et la date de naissance.
donc la classe Individu qui aura trois propriétés que nous
appellerons nom, prenom, et date_naissance.

Le mot-clé this : on peut dire qu'au moment où l'on

créera une nouvelle instance,
this deviendra cette nouvelle instance, si bien que ce qui
sera affecté à this le sera en fait à la nouvelle instance
 les objets

•Une fois qu'on a défini une classe,

•il faut aussi définir la façon dont on va pouvoir créer un
élément appartenant à cette classe (en terminologie objet, on
dira "créer une instance de la classe").

Par exemple, comment créer l'objet de la classe Individu qui

représente

On appelle constructeur l'outil qui permet de créer un élément

particulier d'une classe.
les objets
les objets
 les objets

❑ D'autre part, nous souhaitons également disposer d'un

outil qui fournisse l'âge d'un individu.
❑un outil s'appliquant aux objets d'une classe est
appelé une méthode.

Il nous faut définir la méthode age comme la différence

entre la date actuelle et la propriété date_naissance de
la classe Individu.
?????????????????????????
 les objets

▪L’objet math

▪L’objet image

▪……
 les objets

▪L’objet math

▪L’objet image
L’objet « math »
L’objet « math »
 les objets

▪L’objet math

▪L’objet image
L'objet "Image"
L'objet "Image"
L'objet "Image"
Example
 L'objet "Image"

Si vous voulez charger une image, puis l’afficher sur la page ( a la place
d’une autre image) une fois le chargement terminé
L'objet "Image"
 L'objet "Image"

Pour déterminer le width et le height les dimensions de

l'image chargée.
Les opérations de bases
Les opérations de bases
Les opérations supplémentaires
Comparer les nombres
Comparer les nombres
Opération sur les booléens
 Structure de contrôle

✓Si…Alors…Sinon…
✓Switch
Les boucles
Exemple
Les boucles
Les boucles
Les boucles
Les tableau associatif
 Parcourir un tableau

………………………..
Le CSS via JS
Le css et js
Le css et js
Example
Example
Example
Example
Les formulaire et js
La gestion des événements ????
 La gestion des événements

En voici une description en fonction des éléments concernés:

✓Élément « form » et transmission des données

•onsubmit

•...............
 La gestion des événements

En voici une description en fonction des éléments concernés:

✓Élément « form » et transmission des données

•onsubmit

•....
 La gestion des événements

onsubmit

Cet attribut indique un script à exécuter localement avant l'envoi

des données (par exemple, un certain nombre de vérifications). Ce
script doit renvoyer une valeur booléenne qui détermine l'envoi ou
non des données. Il est déclenché lorsque l'utilisateur clique sur le
bouton d'envoi .
Remarque : Le script doit figurer dans le document,
La gestion des événements
La gestion des événements
 La gestion des événements

✓Élément « textarea » :Voici quelques-uns des événements

(ou attributs de script) de l’élément textarea .

1. onfocus :Le script associé sera exécuté lorsque la zone de

texte recevra le focus
2. onblur :Il s’agit ici de la perte du focus par l’élément (hors
du champ).
3. onselect : Cet événement se produit si tout ou partie du
texte de la zone a été sélectionné.
4. Onchange : Celui-ci se produit en cas de perte de focus et
pour autant que la valeur de la zone de texte ait été
modifiée.
.
 La gestion des événements

✓Élément « select » Parmi les événements associables à l’élément

select on trouve onfocus, onblur et onchange.
La gestion des événements
Exemple
Exemple
Exemple
Exemple
Exemple
Exemple
Exemple
La suite dans « Javascript -
Les formulaires »