Chapitre4 CoursProgrammationWeb MalekBenSalem

02/11/2021
Introduction
• Le HTML présente les limites suivantes :
Chapitre 4
 Absence de structures de contrôle de flux (structures
algorithmiques).
 Aucune connectivité avec les serveurs de base de données.

Le langage Javascript  Pas d'interactions avec l'utilisateur.
• Pour étendre les capacités du langage HTML deux solutions ont

été mises en œuvre :
 Utilisation d'un langage coté client
126
 Utilisation d'un langage coté serveur 127
Développement Web - L3 – TIC & SE - BEN SALEM M. Développement Web - L3 – TIC & SE - BEN SALEM M.
1
02/11/2021
Langages coté client Langages coté serveur

• Les langages coté client permettent quand à eux d'utiliser les
ressources du navigateur pour : • Les langages coté serveur possèdent l'avantage de :
contrôler la validité du contenu saisit par • connectivité aux bases de données,
l'utilisateur avant la soumission du formulaire, • transparence du code source,
enrichir le contenu des pages Web avec un contenu • et d'autres fonctionnalités liées principalement
interactif et/ou animé. à la sécurité de données.
• Ces langages possèdent l'avantage de ne pas nécessiter • Le test de ces Scripts avant de leur publication nécessite
d'installations supplémentaires. l'installation d'un serveur Web.
128 129
2
02/11/2021
Javascript Intégration du code Javascript

• Javascript est un langage de scripts qui incorporé aux balises • Il existe 4 manières d’insérer le code Javascript dans une
Html. page HTML :
• Pour écrire et tester des codes Javascript il vaut faut un
navigateur Web qui reconnaît Javascript (IE, Netscape,
Mozilla Firefox,…), un éditeur de traitement de texte 1. Insertion pour exécution directe
(Notepad++, bloc note,Word pad…) et une solide reconnaissance 2. Exécution en fonction d’un événement
du langage HTML.
• Le code du Javascript a la forme suivante : 3. Insertion du code JS à l’intérieur d’une balise html
• <script language=’’javascript’’> Instruction 1 ; Instruction 2 ; 4. Appel du code JS à partir d’un fichier d’extension « .js »
. Instruction 3 ; .. Instruction n ;
</script>
130 131
3
02/11/2021
Intégration : Insertion pour exécution Intégration : Insertion pour exécution

directe directe (Exemple)
• Le code s’exécute automatiquement lors de chargement de la
page HTML au niveau du navigateur.
• Le code javascript est placé dans le corps de la page html c'est-à-
dire entre <body>…</body>
Exemple1 : le code JS suivant:
<html> <head><title>Exemple 1</title></head>
<body> <b>Exemple d’exécution directe du javascript</b> <br>
<script language=’’javascript’’>
alert(“Ce message est affiché automatiquement”);
</script>
</body></html>
132 133
4
02/11/2021
Intégration : Exécution en fonction Intégration : Insertion du code JS à

d’un événement : l’intérieur d’une balise html
• le code s’exécute seulement lors d’un événement généré par • Dans ce cas le code Javascript peut être inséré directement au
intervention de l’utilisateur. niveau de la balise comme suit :
• Exemple 2 : • Exemple3 :
134 135
5
02/11/2021
Intégration : Appel du code JS à partir

d’un fichier d’extension « .js » Syntaxe générale : Caractéristiques
• On peut faire appel aux codes JS écrits dans des fichiers qui
portent l’extension « .js » dans la page HTML. • Description de la syntaxe
• Intérêt de cette procédure est de réutiliser ces codes dans d’autres • Variables faiblement typées
pages HTML autant de fois désirées. • Opérateurs et instructions identiques au C/C++/Java
• Pour intégrer un même script dans plusieurs pages Web. • Des fonctions/procédures globales (méthodes associées à
• Il faudra : tous les objets)
Ecrire le script dans un fichier indépendant. • fonctions/procédures/méthodes déﬁnies par l’utilisateur
Enregistrer ce fichier avec une extension ".js". • Des « objets » (des prototypes) prédéﬁnis (String, Date,
Math, etc.)
Ajouter le code HTML suivant dans toutes les pages qui
devront inclure ce script : • Commentaires : // ou /*...*/
<script language="JavaScript" src="fichier.js"></script> • Séparateur d’instruction : ‘;’
136 137
6
02/11/2021
Catégories des Objets JavaScript Les objets de l’interface

• Les objets JavaScript sont classés en deux catégories : Pour fixer un objet, préciser son « chemin d’accès » dans l’arborescence.
 Objets d'interface
 Objets Prédéfinis
• Hiérarchie des objets visuels :
La figure suivante
présente la hiérarchie Exemple ??
des objets de l'interface.
138 139
7
02/11/2021
Les objets de l'interface Les Objets de l'interface : Notion

d'objet, propriété et méthode
• La fenêtre est représentée
par l'objet : window • Il est possible d'accéder aux objets en JavaScript à travers
• Le contenu de la page leurs propriétés et leurs méthodes.
Web est accessible via
l'objet : document • Toute variable membre d'un objet est appelée propriété : état
• Le document peut contenir
plusieurs autres éléments d'un objet.
dont le formulaire nommé • Toute fonction membre d'un objet est appelée méthode : action
ici : formulaire
• Les éléments du relative à un objet.
formulaires sont
accessibles via leurs noms:
nom, prenom, age
140 141
8
02/11/2021
Les Objets de l'interface : Exemple Les Objets prédéfinis : Les boîtes de

dialogue :
• Pour affecter une valeur dans le contrôle nom on pourra écrire :
• window.document.formulaire.nom.value = "cours javascript"; • Une boîte de dialogue est une fenêtre qui s'affiche au
premier plan suite à un événement,
• document.formulaire.nom.value = "cours javascript"; // correcte
sans window • Elle permet soit :
 d'avertir l'utilisateur,
• formulaire.nom.value = "cours javascript"; // correcte sans  le confronter à un choix,
window.document
 lui demander de compléter un champ pour récupérer
une information.
• nom.value = "cours javascript"; // incorrecte
142 143
9
02/11/2021
Les Objets prédéfinis : La méthode

Les Objets prédéfinis : Une méthode
alert()
• Une méthode est une fonction associée à un objet, c'est-à- • Alert() est une méthode de l'objet Window. Pour se conformer
dire une action que l'on peut faire exécuter à un objet. à la notation classique nom_de_l'objet.nom_de_la_propriété,
• Les méthodes des objets du navigateur sont des fonctions on aurait pu noter window.alert().
définies à l'avance par les normes HTML, on ne peut donc • Window venant en tête des objets Javascript, celui-ci est repris
pas les modifier, il est toutefois possible de créer une méthode par défaut par l'interpréteur et devient en quelque sorte
personnelle pour un objet que l'on a créé soi-même. facultatif.
• Prenons par exemple une page HTML, elle est composée d'un • Voici sa syntaxe :
objet appelé document.
 alert(nom_de_la_variable);
• L'objet document a par exemple la méthode write() qui lui
 alert('Chaîne de caractères’);
est associée et qui permet de modifier le contenu de la page
HTML en affichant du texte.  alert('Chaîne de caractères’ + nom_de_la_variable);
• Caractère spécial \n : créer une nouvelle ligne dans le texte
144 145
10
02/11/2021
Les Objets prédéfinis : La méthode Les Objets prédéfinis : La méthode

confirm(): prompt()
• La méthode prompt fournit un moyen de récupérer une
• La méthode confirm() est similaire à la méthode alert(), si
information provenant de l'utilisateur, on parle alors de
ce n'est qu'elle permet un choix entre "OK" et "Annuler".
boîte d'invite.
• Elle admet comme alert() un seul paramètre: une chaîne de
• La méthode prompt() requiert deux arguments :
caractères...
• le texte d'invite,
• Sa syntaxe est :
• la chaîne de caractères par défaut dans le champ de
• confirm('Chaîne de caractères');
saisie.
• Sa syntaxe est donc la suivante :
• prompt('Posez ici votre question','chaîne par défaut’);
146 147
11
02/11/2021

prompt() prompt()
148 149
12
02/11/2021

Write Write
• Il est ainsi possible d'utiliser la méthode write() de différentes
• La méthode write() de l'objet document permet de modifier façons :
de façon dynamique le contenu d'une page HTML. 1. Soit en passant directement le texte en paramètres :
document.write("bonjour");
• La syntaxe de la méthode write() : Cette invocation aura pour effet de concaténer la chaîne
window.document.write(expression1, expression2, ...) 'bonjour' à l'endroit où est placé le script; (Exemple 1)
2. Soit en appelant une fonction contenant « document.write() »
• Cette méthode permet d'écrire le résultat des expressions qui est chargée et remplace le document HTML existant;
passées en paramètre dans le document dans lequel elle est (Exemple 2)
utilisée.
150 151
13
02/11/2021

Write (Exemple 1 ) Write (Exemple 2)
152 153
14
02/11/2021
Les variables Types de variables

• Il est possible de déclarer une variable en JavaScript de deux
façons : • JavaScript supporte quatre types de variables prédéfinies :
• Déclaration Explicite en utilisant le mot clé var suivi par le  Les nombres Number (entiers/réels).
nom de la variable.
 Les booléens (true ou false).
var a, b, c = 3;
a = "Bonjour";  Les chaînes de caractères String ("Ahmed" ou 'Ahmed').
b = 15 * c; // b = 45
• Déclaration Implicite en omettant le mot clé var tout en  Les types Object (Objet).
affectant une valeur au nom de la variable.
 Les variables vides contiennent la valeur : null.
c = 3;
a = "Bonjour";
b = 15 * c; // b = 45
154 155
15
02/11/2021
Portée des variables Les opérateurs

• Globale : • Les opérateurs sont des symboles qui permettent de
manipuler des variables, c'est-à-dire effectuer des opérations,
Variable déclarée en début de script
les évaluer, ...
Accessible à n'importe quel endroit du programme
• On distingue plusieurs types d'opérateurs:
 les opérateurs de calcul
• Locale :  les opérateurs d'affectation
 les opérateurs d'incrémentation
Variable déclarée à l'intérieur d'une fonction
 les opérateurs de comparaison
Accessible uniquement dans la fonction  les opérateurs logiques
156 157
16
02/11/2021
Les opérateurs Les opérateurs

• Les opérateurs sont classées dans JavaScript en cinq catégories :  Les opérateurs logiques
 Les opérateurs de calcul
 Les opérateurs de comparaison  Les opérateurs d'incrémentation
 Les opérateurs associatifs
158 159
17
02/11/2021
Les Entrées/Sorties : Les Entrées/Sorties :

Entrée des données Entrée des données(Exemple)
L'utilisateur peut introduire des données dans un script
JavaScript en utilisant une des méthodes suivantes :
160 161
18
02/11/2021
Les Entrées/Sorties :
Les Entrées/Sorties : Boîte Invite
Boîte Invite ( Exemple)
162 163
19
02/11/2021
Les Entrées/Sorties : Boîte confirmation Boîte confirmation (Exemple) (1)
164 165
20
02/11/2021
Affichage des résultats
Boîte confirmation (Exemple) (2)
document.f1.nom.value = "BEN SALEM";

document.f1.prenom.value = "Malek";
Le code source de ce document HTML : Voir Section « Les E/S :

Exemple 1 » (page 161)
166 167
21
02/11/2021
Applications (Activité 1) Applications (Activité 2)

• Soit le fichier Activity2.html, compléter ce fichier par le
script Javascript selon le besoin demandé.
168 169
22
02/11/2021
Applications (Activité 2) Structures Conditionnelles

• Utiliser les fonctions alert(qui affiche une chaîne de caractères)
et prompt (qui invite à la saisie d'une donnée), dont voici les
syntaxes :
• Structure Si … Alors …Sinon
Variable = prompt(Question à afficher à l'écran)
alert(Chaîne à afficher à l'écran)
• Complétez le fichier Activity1.html pour que le click sur le

bouton lance une fonction.
• Cette fonction demande la saisie d'une largeur, d'une longueur
et affiche la surface du rectangle correspondant.
• Note : Il faut ici transformer les chaînes saisies en nombre,
faute de quoi l'opérateur + agit comme une concaténation et
non une somme. Utiliser Number(largeur)
170 171
23
02/11/2021
Structure Selon … Faire Structures Itérative

• switch (variable) {
case v1 :
// traitements si (variable == v1)
break;
case v3 : case v4 :
// traitements si (variable == v3) ou (variable == v4)
break;
default :
// traitements sinon
break; // facultative à la fin
}
172 173
24
02/11/2021
Structure itérative Structures itératives

Structure Répéter … Jusqu'à
• Structure Tant Que … Faire
• Il n'existe pas d'équivalent pour la structure Répéter … Jusqu'à
en JavaScript.
• Il est, cependant, possible de simuler la structure Répéter …
Jusqu'à de la manière suivante :
174 175
25
02/11/2021
Fonctions en javascript Fonctions en javascript : Déclaration

• Une fonction est un groupe de ligne(s) de code de • Pour déclarer ou définir une fonction, on utilise le mot
programmation destiné à exécuter une tâche bien spécifique et (réservé) function.
que l'on pourra, si besoin est, utiliser à plusieurs reprises. • La syntaxe d'une déclaration de fonction est la suivante :
• De plus, l'usage des fonctions améliorera grandement la function nom_de_la_fonction(arguments) {
lisibilité du script.
... code des instructions ...
• En Javascript, il existe deux types de fonctions :
}
 Les fonctions propres à Javascript. On les appelle
• Exemple : function f(x) { return 2*x+8; }
des "méthodes". Elles sont associées à un objet bien
particulier comme c'était le cas de la méthode alert() • Pour JavaScript une procédure est une fonction qui ne
avec l'objet window. retourne aucune valeur ou tout simplement c'est une
fonction où le mot clé return est omis.
 Les fonctions écrites par l’utilisateur pour les
besoins de son script.
176 177
26
02/11/2021
Fonctions en javascript : Exemple Evènements

• Une fonction est ensuite appelée dans le code JavaScript par :
• nomFonction(arguments...).
• Une fonction peut ne pas nécessiter d'arguments (qui en sont les • Les gestionnaires d'événements sont
données d'entrée), et elle peut ne pas retourner de valeur en associés à des objets, et leur code s'insèrent
sortie. dans la balise de ceux-ci...
• Exemple de fonction ne prenant pas d’argument...
Function date_du_jour( )
{
aujourdhui=new Date ;
alert(aujourdhui);
}
178 179
27
02/11/2021
Evènements Evènements
180 181
28
02/11/2021
Evénements : Association aux objets Evénements : Association aux objets

• Chaque événement ne peut pas être associé à n'importe quel objet. Il
est évident par exemple qu'un événement OnChange ne pourra pas
s'appliquer à un lien hypertexte.
• Voici un tableau récapitulant les objets auxquels peuvent être
associés chaque événement :
182 183
29
02/11/2021
Evènements: exemples Evènements: exemples

• onBlur: Se produit lorsque l'élément perd le focus, c'est-à-dire
• Le langage JavaScript offre la possibilité d'utiliser plusieurs
que l'utilisateur clique hors d'un élément d'un formulaire, celui-ci
événements;
n'est alors plus sélectionné comme étant l'élément actif.
• onClick : se produit lorsque l'utilisateur clique sur un élément de
la page Web. • onKeyup: Se produit lorsque l'utilisateur relâche une touche de
son clavier préalablement enfoncée.
• onChange : se produit lorsque l'utilisateur modifie le contenu
d'un élément d'un formulaire. • onLoad /onUnLoad : L'événement onLoad survient lorsque la
• onFocus: Se produit lorsque l'utilisateur donne le focus à un page a fini de se charger. A l'inverse, onUnLoad survient lorsque
élément d'un formulaire, c'est-à-dire que cet élément est l'utilisateur quitte la page. Les deux événements sont utilisés sous
sélectionné comme étant l'élément actif. forme d'attributs de la balise <BODY> ou <FRAMESET>.
184 185
30

Chapitre4 CoursProgrammationWeb MalekBenSalem

Transféré par

Informations du document

Description :

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Formats disponibles

Chapitre4 CoursProgrammationWeb MalekBenSalem

Titre original :

Transféré par

Description :

Droits d'auteur :

Formats disponibles

02/11/2021

 Aucune connectivité avec les serveurs de base de données.

• Pour étendre les capacités du langage HTML deux solutions ont

 Utilisation d'un langage coté client

Langages coté client Langages coté serveur

contrôler la validité du contenu saisit par • connectivité aux bases de données,

l'utilisateur avant la soumission du formulaire, • transparence du code source,

Javascript Intégration du code Javascript

Intégration : Insertion pour exécution Intégration : Insertion pour exécution

Intégration : Exécution en fonction Intégration : Insertion du code JS à

Intégration : Appel du code JS à partir

Catégories des Objets JavaScript Les objets de l’interface

des objets de l'interface.

Les objets de l'interface Les Objets de l'interface : Notion

Les Objets de l'interface : Exemple Les Objets prédéfinis : Les boîtes de

Les Objets prédéfinis : La méthode

Les Objets prédéfinis : La méthode Les Objets prédéfinis : La méthode

Les Objets prédéfinis : La méthode Les Objets prédéfinis : La méthode

Les Objets prédéfinis : La méthode Les Objets prédéfinis : La méthode

Les Objets prédéfinis : La méthode Les Objets prédéfinis : La méthode

Les variables Types de variables

Portée des variables Les opérateurs

Les opérateurs Les opérateurs

 Les opérateurs de comparaison  Les opérateurs d'incrémentation

 Les opérateurs associatifs

Les Entrées/Sorties : Les Entrées/Sorties :

document.f1.nom.value = "BEN SALEM";

Le code source de ce document HTML : Voir Section « Les E/S :

Applications (Activité 1) Applications (Activité 2)

Applications (Activité 2) Structures Conditionnelles

• Complétez le fichier Activity1.html pour que le click sur le

Structure Selon … Faire Structures Itérative

Structure itérative Structures itératives

Fonctions en javascript Fonctions en javascript : Déclaration

Fonctions en javascript : Exemple Evènements

Evénements : Association aux objets Evénements : Association aux objets

Evènements: exemples Evènements: exemples

Centres d'intérêt liés

Vous aimerez peut-être aussi