Scribd
Importer
0 vues119 pages

JavaScript

Ce document est un plan de cours pour un module de JavaScript destiné aux étudiants en informatique et électronique. Il couvre les concepts fondamentaux de JavaScript, y compris son intégration dans HTML, les bases du langage, les structures de contrôle, et les fonctions. Le document présente également les avantages et inconvénients de JavaScript, ainsi que des exemples pratiques et des bonnes pratiques de programmation.

Transféré par

THE GAMEUR PRO
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0 vues119 pages

JavaScript

Ce document est un plan de cours pour un module de JavaScript destiné aux étudiants en informatique et électronique. Il couvre les concepts fondamentaux de JavaScript, y compris son intégration dans HTML, les bases du langage, les structures de contrôle, et les fonctions. Le document présente également les avantages et inconvénients de JavaScript, ainsi que des exemples pratiques et des bonnes pratiques de programmation.

Transféré par

THE GAMEUR PRO
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

JavaScript

Technicien Supérieur en Sciences et Technologies de l’Information et de la


Télécommunication (TS STIC)
OPTION : INFORMATIQUE / ELECTRONIQUE
NIVEAU : 2 IEME ANNEE

M. KPO LOUAGBEU LOUA


Enseignant-Chercheur ESI/INP-HB
2022-2023
[Link]@[Link] / +225 07 07 7743 84
Plan de cours
1. Javascript C'est quoi?
2. Comment intégrer du code Javascript?
3. Les bases du Javascript
4. Structures de contrôle
5. Les fonctions
6. Les évènements
7. Objets, méthodes et attributs
8. Objet Array: Les tableaux
9. Objet String: Chaines de caractères
10. Objet Math
11. Objet Date
12. Objet RegExp: les expressions régulières
13. Objet Window
14. Objet Document
15. Objet Event
16. Gestion des exceptions

002
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
1. JavaScript : Présentation
Javascript est un langage de script côté client, c'est à dire qu'il est exécuté sur le navigateur.
Il a été créé en 1995 par Netscape Communication Corporation. A l'époque il s'appelait
LiveScript. Fin 1995, et suite à une association entre Netscape et SUN (créateur du fameux
langage Java), LiveScript s'est fait rebaptiser Javascript.

❑ Avantage: Le code source Javascript est chargé avec la page (en même temps que
HTLM et CSS). A la fin du chargement, tous les codes sont présents chez le client. Par
conséquent, l’exécution de Javascript est extrêmement rapide puisque tout est
disponible sur place. Inversement aux langages côté serveur comme PHP, qui
nécessitent à chaque fois l'interrogation du serveur, ce qui rend l’exécution plus lente.

❑ Inconvénient : La même raison qui a procuré à Javascript son principal avantage,


cause cette fois-ci son ultime inconvénient. En effet, le fait que les codes soient
disponibles sur le navigateur rend ceux ci visibles par tous. Le code Javascript est par
conséquent non confidentiel.

002
003
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
2. Intégration de JS au code HTML
Pour écrire du code Javascript il faut le séparer des codes HTML et CSS en le
plaçant entre les balises <script> et </script>. Pour faire simple, imaginons que
je veux afficher le message "Bonjour " dans une boite de dialogue à l'aide de
Javascript. Le code de notre page ressemblerait à ceci:

002
004
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
2. Intégration de JS au code HTML
Les deux déclarations sont explicites:
▪ "Le langage utilisé dans les délimiteurs est Javascript".
▪ La deuxième déclaration est par contre plus appréciée vu qu'elle fournie
deux informations, à savoir le type et le MIME. Le type est text car Javascript
c’est du texte, et le MIME précise qu'il ne s'agit pas de n'importe quel texte
mais du Javascript

• Cependant, comme vous allez le découvrir dans ce cours, les codes Javascript ont
tendance à être plus ou moins longs (en fonction du traitement souhaité). Notre
document HTML sera donc plus ou moins volumineux si on y met directement nos
scripts. La solution consiste alors à déclarer le Javascript dans un fichier à part
(comme vous l’avez fait pour le CSS)

002
005
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
2. Intégration de JS au code HTML
Positionnement dans le code HTML
Il n'y a pas de restriction sur l'endroit où on peut placer nos scripts.
Nous pouvons les placer n’importe où :
✓ avant <html>,
✓ dans <head>,
✓ dans <body> ou
✓ après </html>).
Cependant, les développeurs ont pour coutume de placer les scripts Javascript dans la
balise <head> (Nous parlerons de la raison de ce choix quand ça sera temps).

002
006
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
3. Les bases du Javascript
❑ L’alphabet du langage
Constitué des caractères nécessaire pour écrire un programme
o les lettre de l’alphabet minuscule ou majuscule a-z ou A-Z
o Les chiffres de 0 à 9
o Les caractères spéciaux ]~#{[|`\^@]}$^….
o Les caractères de contrôle

Caractère Explication
\a caractère d’alerte
\b retour arrière
\f saut de page
\n nouvelle ligne
\r retour chariot
\t tabulation

002
007
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
3. Les bases du Javascript
❑ Les opérateurs Opérateur Explication
+ Addition
Opérateur Explication - Soustraction
== égalité * Multiplication
!= différence / Division réelle
< infériorité stricte % (modulo) reste d’une division
<= infériorité large entière
> supériorité op = avec op  [+, -, *, /, %]
>= supériorité large ++ opérateur d’incrémentation
• Les opérateurs relationnels -- opérateur de décrémentation
• Les opérateurs arithmétiques
Opérateur Explication
&& Et logique
|| Ou logique
! Non logique
• Les opérateurs logiques
002
008
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
3. Les bases du Javascript
❑ Les opérateurs
Opérateur Explication
& Et logique
| Ou logique
! Non logique
^ Ou exclusil
<< Déplace les bits de gauche du nombre de bits indiqué par l’opérande
droit.
>> Déplace les bits vers la droite, y compris ceux qui servent à
représenter le signe.
>>> • Les
Déplace les bits vers la droite et comble opérateurs
par des zéros arithmétiques
pris à gauche.
• Les opérateurs binaires

Opérateur Explication
+ Concaténation
• L’opérateur concatenation
002
009
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
3. Les bases du Javascript
❑Les identificateurs
• Mots choisis par le concepteur du programme pour représenter les objets
du script.
• Exemples : nom de fonction, nom de variable, ….
• Constitué d’une suite de caractères alphanumériques dont le premier
est obligatoirement une lettre de l’alphabet ou le caractère de
soulignement.
• Il doit être expressif c’est-à-dire, choisi de telle sorte qu’il désigne bien
l’objet qu’il représente.
• Exemples :
• prix_TTC, valeur_max, deuxPI
• Contre exemple : 2PI
Remarque 1 : JavaScript est sensible à la casse
• prix_TTC, PRIX_TTC, prix_ttc désignent des objets distincts.
Remarque 2 : limitation de la longueur d’un identificateur
• C’est celle de la ligne ;
• Il doit tenir sur une seule ligne.
002
010
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
3. Les bases du Javascript
❑Les mots réservés
• Identificateurs prédéfinis du langage;
• Ne doivent pas être utilisés comme identificateur dans un script.
• Exemple :
• function, return, while, for…
❑Les commentaires
• Facilite la sa lecture d’un programme et sa maintenance.
• Ignorés par l’interpréteur JS.
• Permettent de clarifier le code pour soi-même ou pour autrui.
• Syntaxes :
• // commentaire
• un commentaire sur une seule ligne.
• /* commentaire */
• un commentaire sur plusieurs lignes.

002
011
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
3. Les bases du Javascript
❑ Les variables Portée des variables
- On appelle portée d'une variable, l'étendu de celle ci, c'est à dire jusqu'à quel
niveau elle sera reconnue dans un programme. Selon la portée, il existe deux
types de variables:
• Variable globale: Cette variable est accessible de partout dans le
programme, à l'intérieur des fonctions comme à l'extérieur.
• Variable locale: On parle plus précisément d'une variable locale à une
fonction. C'est une variable qui est accessible de l'intérieur de la fonction
dans laquelle elle est déclarée, mais pas de l'extérieur.
- si la variable est déclarée sans le mot clé var, alors elle est automatiquement
globale qu'elle soit déclarée à l'intérieur d'une fonction ou à l’extérieur.
- Par contre si elle est déclarée avec le mot clé var alors deux cas sont
envisageables:
- Si la variable est déclarée dans une fonction, alors elle est locale à cette
fonction.
- Si la variable est déclarée en dehors de toute fonction, alors elle est globale à
tout le programme.
002
012
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
3. Les bases du Javascript
❑ Exemple

002
013
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
4. Les structures de contrôle
❑ Les structures de contrôle

002
014
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
4. Les structures de contrôle
❑ Les structures de contrôle

002
015
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Les fonctions
Une fonction est un sous-programme qui contient un ensemble d’instructions.
Ces instructions ne seront exécutées suite à l'appel de la fonction.
Les fonctions ont de nombreux avantages qu'on va résumer dans les points
suivants:
✓ Réutilisation du code
✓ Réduction de la taille du code
✓ Organisation du code
✓ Récursivité
Les fonctions constituent un aspect fondamentale quand on programme en
Javascript.
Où placer nos fonctions?
Javascript est un langage interprété. Par conséquent, on ne peut pas appeler une fonction
qu'après l'avoir créée (ou déclarée). Cependant la quasi totalité des appels se font à partir
de la balise <body>, il faut donc monter un peu plus haut dans le code HTML pour
déclarer nos fonctions Javascript. Y'a pas mieux que le <head> !

002
016
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Les fonctions
Déclaration d’une fonction
• Se situe en dehors de toute autre fonction.
• Emplacement
• Dans la partie en-tête du fichier HTML
• Dans un fichier d’extension .js
• Appel d’une fonction
• s’effectue à l’intérieur ou à l'extérieur d’un sous-programme appelant.

002
017
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Les fonctions
Exemple 1 : fonction dans le même fichier ([Link])

002
018
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Les fonctions
Exemple 2 : fonction dans un autre fichier

002
019
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Les fonctions prédéfinies
Fonction Signification
exp(x) Exponentielle de x
sqrt(x) Racine de x
abs(x) Valeur absolue de x
parseInt(x) Recherche un nombre entier au de la chaîne x
parseFloat(x) Recherche un nombre réel au sein de la chaîne x
eval(x) Permet d'évaluer l'expression x
Fonction eval()
Evalue et exécute le code
javascript contenu dans
chaine.
très utile pour générer du
code JS dans une chaîne de
caractères et l'exécuter.
([Link])

002
020
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Conversions de types
JS fournit deux fonctions permettant de convertir le type des variables passées en paramètre :
parseInt() et parseFloat().
• La fonction parseInt()
• permet de convertir une variable passée en paramètre (soit en tant que chaîne de
caractère, soit en tant que nombre dans la base précisée en second paramètre) et le
convertit en nombre entier (en base décimale).
• Syntaxe
• parseInt(chaine[, base]);
Exemples Résultat Exemples Résultat
parseInt("128.34"); 128 parseInt("AF8BEF",16); 11504623
parseInt("12.3E-6"); 12 parseInt("AB882F",16); 11241519
parseInt("12E+6"); 12 parseInt("0xAB882F"); 11241519
parseInt("Bonjour"); NaN parseInt("0xAB882F",16); 11241519
parseInt("24Bonjour38"); 24 parseInt("00100110"); 32840
parseInt("Bonjour3824"); NaN parseInt("00100110",2); 38
parseInt("AF8BEF"); NaN parseInt("00100110",8); 32840
parseInt("0284"); 2 parseInt("00100110",10); 100110
parseInt("0284",8); 2 parseInt("00100110",16); 1048848

002
021
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Les fonctions prédéfinies
La fonction parseFloat()
permet de convertir une variable passée en paramètre en nombre en virgule
flottante (nombre avec une partie décimale).
Syntaxe :
parseFloat(chaine);
Pour que la fonction parseFloat() retourne un flottant, la chaine passée en
paramètre doit commencer par des caractère valides c'est-à-dire les chiffres [0-9]
et/ou les caractères +, -, E et e.
Dans le cas contraire la fonction parseFloat() retournera la valeur NaN (Not a
Number). Exemple Résultat
parseFloat("128.34"); 128.34
parseFloat("128,34"); 128
parseFloat("12.3E-6"); 0.0000123
parseFloat("Bonjour"); NaN
parseFloat("24.568Bonjour38"); 24.568
parseFloat("Bonjour38.24"); NaN
parseFloat("AF8BEF"); NaN
parseFloat("0284"); 284
parseFloat("0xAB882F"); 0
002
022
INP-HB / Ecole
INP-HB Ecole Supérieure
Supérieure d’Industrie
d’Industrie / TS
TS STIC
STIC 2-INFO
2-INFO / Cours
CoursJSJS2022-2023
2022-2023
5. Les fonctions
Les fonctions prédéfinies
Exemple : [Link]

023
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1
Exercice n°1 : Réaliser des scripts simples avec JavaScript.
a) Ecrire une page HTML contenant un script permettant d’afficher « Bonjour tout
le monde »
b) Améliorer le script pour qu’il permette de demander le Prénom de l’utilisateur
(méthode prompt()) et afficher « Bonjour ‘votre prénom’».

Exercice n°2 : Méthodes prompt() et alert()


Utiliser les méthodes JavaScript prompt() et alert() pour demander à l’utilisateur
deux nombres puis afficher leur somme.

Exercice n°3 :
Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS)
puis calcule et affiche la moyenne.

024
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1
Exercice n°4 : Calcul simple
Refaire l'exercice n°1 en utilisant une fonction Moyenne, traiter toute les
possibilités d’emplacement d’une fonction :
- Entre <BODY> et </BODY>
- Entre <HEAD> et </HEAD>

Exercice n°5 : Réaliser des conditions (if/else)


Ecrire un script demandant de l’utilisateur d’entrer son âge et de contrôler la
validité de l’âge entré (si l’âge est erroné afficher un message d’erreur et
redemander de saisir l’âge)

Exercice n°6 :
Ecrire le code d'un fichier HTML qui permet de saisir le numéro du mois et l’année
puis affiche le nombre de jours.

025
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1
Exercice n°7 : Boucle for simple.
Ecrire une page HTML faisant apparaître les nombres premiers compris entre 0 et
100.
Exercice n°8 : Boucle for (insertion des balises HTML dans les scripts).
Ecrire une page HTML faisant apparaitre la table de multiplication pour les entiers
compris entre 0 et 9 et présenter le résultat dans un tableau [11 x 11]

Exercice n°9
1. Créer la fonction somRec(i), en utilisant le principe de récurcivité, qui renvoie
— Somme indéfinie si i n’est pas un nombre entier ou i < 0.
— la valeur de 1 + 2 + · · · + i dans le cas contraire.
2. Créer la fonction somFor(i) qui permet de faire la même chose que somRec(i),
tout en utilisant la boucle for.
3. En utilisant la métode prompt(), faites de sorte qu’une boîte s’ouvre pour
demander au visiteur d’Entrer un entier positif avec la valeur par défaut 0. Cette
valeur est récupérée par la fonction somRec() qu’on utilise pour afficher : la valeur
de somRec(valeur) est : valeur de somRec(valeur).
4. Mettez en commentaire tout ce qu’on a fait dans la question précédente.
026
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

027
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

028
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

029
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

030
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

031
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

032
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

033
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

034
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

035
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratiques 1 / Correction

036
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Javascript: un langage événementiel
Javascript est un langage événementiel. Donc les scripts déclarés dans la page ne
sont pas destinés à s’exécuter séquentiellement, linge après ligne, du début à la fin.
Mais ils attendent jusqu'à ce qu’un événement soit détecté pour qu'une partie du
code s’exécute.
Un événement est une action de l'utilisateur qui peut se produire sur le navigateur.
Le plus célèbre est sans doute le clic qui peut survenir sur un objet quelconque
(hyperlien, image, bouton...). Le navigateur écoute les événements qui se produisent
sur la page Web puis les transmet au script par le biais de ce que l'on appelle le
gestionnaire d’évènements.
Gestionnaire d'événements
Le gestionnaire d'événements permet d'associer un traitement à un événement.
Sa syntaxe respecte la forme suivante:
onEvénement = "code Javascript édité directement ici, ou fonction appelée à cet endroit"

037
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Javascript: un langage événementiel

Il faut noter que onEvénement est un attribut HTML, et ce qui est entre les
guillemets est sa valeur. Donc la ligne précédente est intégrée directement dans
une balise HTML. Cependant, même si ce qui se trouve entre les guillemets est
purement du code Javascript, nous ne le mettons pas dans les tags de script
(<script> et </script>).

Il est très rare où on déclare directement la suite d'instructions Javascript à


exécuter entre les guillemets. En général, on y appelle une fonction qu'on a déjà
déclaré avant dans la balise<head>. Ainsi nous séparons les code HTML et
Javascript ce qui rend le code plus lisible et plus facile à maintenir.

038
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Javascript: un langage événementiel

039
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Javascript: un langage événementiel
Le fait de cliquer sur le bouton donne naissance à l’événement click qui appellera
(grâce au gestionnaire d'événements) la fonction f() définie dans le <head>. On
aura donc le message "Vous avez bien cliqué sur le bouton!" qui s'affichera dans
une boite de dialogue alert().

040
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Événement Description
onAbort Abandon du chargement d'une image
onBlur Désactivation d'un élément
onChange Modification d'un champ de texte
onClick Clic gauche sur un élément
onDblclick lors d'un double-clic sur le bouton gauche
Liste des événements Javascript

onError Problème de chargement d'une image ou d'un document


onFocus Activation d'un élément
onKeyDown quand on enfonce une touche du clavier
onKeyUp quand on relâche la touche
onLoad Chargement d'une page terminée
onKeyPressed quand on enfonce une touche du clavier, équivalent à onkeydown()
onMouseOver Positionnement du pointeur de souris sur un élément
onMouseOut Déplacement du pointeur de souris hors d'un élément
onMouseDown quand on enfonce le bouton gauche ou droit de la souris
onMouseUp quand on relâche le bouton gauche ou droit de la souris
onMouseMove lorsque la souris se déplace dans un objet du document
OnSelect Sélection de texte dans un champ de texte
OnSubmit Appui sur le bouton Submit
OnUnLoad Sortie de document
onBeforeUnload juste avant la fermeture de la fenêtre
onReset lors de la réinitialisation du formulaire
041
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Javascript: un langage événementiel

Liste des événements Javascript


mouseOut (onMouseOut) Quand on quitte l'objet avec la sourie après l'avoir survolé.
focus (onFocus) Quand on active un élément (quand on place le curseur dans un
champ de formulaire, par click ou par tabulation, pour commencer la saisie par
exemple).
blur (onBlur) Quand un élément perd le focus (quitter un champ de formulaire après
être activé par exemple).
keyDown (onKeyDown) Quand une touche du clavier est enfoncée.
keyUp (onKeyUp) Quand une touche du clavier est relâchée.
mouseDown (onMouseDown) Quand l’internaute appuie sur n'importe quel bouton
de la souris.
mouseUp (onMouseUP) Quand le bouton de la souris et relâché.
mouseMove (onMouseMove) Quand l’internaute fait bouger le curseur de la souris
dans la zone accueillant l'événement.

042
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Javascript: un langage événementiel

Liste des événements Javascript


dragStart (onDragStart) Se produit quand l'internaute commence le déplacement d'un
élément par "glisser-déposer" (Drag & Drop).
dragEnter (onDragEnter) Se produit quand l'internaute entre dans la zone où sera
déposé l'élément glissé.
dragOver (onDragOver) Se produit quand l'internaute survole la zone où sera déposé
l'élément glissé (même si le concept est proche de celui de onDragEnter, ils sont des
événements légèrement différents).
drop (onDrop) Se produit quand l'internaute dépose l'élément glissé dans la zone
prévue à cet effet

043
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
6. Les évènements
Javascript: un langage événementiel

044
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
7. Les objets
Javascript: langage de programmation orienté prototype

Javascript est un langage de programmation orienté prototype. Il renferme une


panoplie d'objets prédéfinies (appelés prototypes) qui peuvent donner naissance à
d'autres objets que l'on souhaite créer.
Puisque Javascript est considéré comme une extension du langage HTML, alors la
plupart de ses objets sont en réalité des objets HTML présents dans le document,
comme les images, les champs de formulaire... Par contre, il existe des objets
propres au Javascript qui permettent d’exécuter des traitement comme le calcul,
la manipulation de la date, le traitement des chaines de caractères...

045
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
7. Les objets
Hiérarchie des objets
Les objets Javascript qui dépendent du contenu d'un document HTML sont
structurés hiérarchiquement. C'est à dire que des objets s’emboîtent dans d'autres
jusqu'à atteindre l'objet le plus élevé à l’échelle de la hiérarchie.

L'objet le plus élevé est la fenêtre du navigateur, il est identifié par le nom window.
Cet objet peut être manipulé directement à travers des fonctions qui lui sont
prédéfinies. On appelle ces fonctions des méthodes. A titre d'exemple alert() qui
affiche les messages des exemples précédents est une méthode de l'objet window,
on aurait pu donc l'écrire comme ceci: [Link]().

Le point (.) permet:


- de passer d'un objet à une de ces méthodes
- d'un objet parent à un autre objet enfant
- d'un objet à une variable qui lui est propre. On appelle cette variable un attribut.

046
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
7. Les objets
• Un objet peut représenter un élément HTML (image, texte, formulaire...) ou un
élément propre au Javascript qui sert à exécuter des traitements spéciaux.
• Une méthode est une fonction prédéfinie appartenant à l'objet et qui permet de
faire les traitement sur celui-ci (on peut dire qu'elle décrit le comportement de
l'objet).
• Un attribut est une variable qui appartient à l'objet . il représente une propriétés
ou caractéristique de celui-ci. On peut le manipuler grâce aux méthodes ou
directement.

L'objet window contient un sous-objet (ou un objet subalterne), c'est le document


HTML lui même. Cet objet est identifié par le nom document. Cet objet peut contenir
les éléments HTML conventionnels comme du texte, les images, les formulaires...
Tous ces éléments constituent des sous-objets de l'objet document. Par exemple
l'objet forms désigne les formulaires contenus dans le document, et l'objet images
englobe toutes les images intégrées...

047
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
8. l’objet Array
• Cet objet permet de créer des tableaux.
• Ses méthodes sont :
Méthodes Explication
join() Rassemble tous les éléments en une chaîne, séparée par des virgules
ou par un signe particulier (en argument du join()).
reverse() Inverse l'ordre des éléments d'un tableau.
length() Cet attribut retourne la taille du tableau, c'est à dire le nombre
d'élément que celui-ci contient.
sort() Trie les éléments du tableau par ordre alphabétique.

048
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
8. l’objet Array
• Cet objet permet de créer des tableaux.
• Ses méthodes sont :
Méthodes Explication
join() Rassemble tous les éléments en une chaîne, séparée par des virgules
ou par un signe particulier (en argument du join()).
reverse() Inverse l'ordre des éléments d'un tableau.
sort() Trie les éléments du tableau par ordre alphabétique.

049
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
8. l’objet Array
• Cet objet permet de créer des tableaux.
• Ses méthodes sont :
Méthodes Explication
join() Rassemble tous les éléments en une chaîne, séparée par des virgules
ou par un signe particulier (en argument du join()).
reverse() Inverse l'ordre des éléments d'un tableau.
sort() Trie les éléments du tableau par ordre alphabétique.
Tableau à plusieurs dimensions

050
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
9. l’objet String
Toute variable de type chaîne est un objet String.
Cet objet possède une seule propriété qui est length (longueur de la chaîne.)

Conversion de chaînes
Méthode Explication
toUpperCase() conversion en majuscule.
toLowerCase() conversion en minuscule
toString() conversion d'un nombre en chaîne de caractères

051
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
9. l’objet String
• substring(i, j)
• extraction de la sous-chaîne allant de i à ( j-1)
• i : position de départ (le 1er caractère d'une chaîne a l'indice 0).
• j : position d'arrivée
• Exemple
• texte = « Konan Armand"
• t1 = [Link](1,3) //donne t1=« on"
• t1 = [Link](0,5) //donne t1=« Konan"
• charAt(i)
• permet d'extraire un seul caractère.
• i : le ième caractère (le 1er commençant par 0).
• Exemple
• c1 = [Link](0) //c1 = „K"
• c1 = [Link](3) //c1 = "a"

052
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
9. l’objet String
• split() :
• transforme une chaîne en une matrice de chaînes d'après un signe de
séparation spécifié.
• Recherche de sous-chaînes
• indexOf(mot)
• recherche la sous-chaîne mot dans la chaîne courante.
• indexOf(mot, i)
• recherche la sous-chaîne mot dans la chaîne courante à partir du ieme
caractère.
• lastIndexOf(mot)
• idem indexOf(mot) mais la recherche commence à partir de la fin du
mot courant.
• lastIndexOf(mot, i)
• idem indexOf(mot, i) mais la recherche commence à partir de la fin
du mot courant.
• En cas de succès, ces fonctions retournent l'index de mot.
• En cas d’erreur, ces fonctions retournent –1.
053
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
9. l’objet String
Mise en forme des chaînes
méthodes signification
String big() Retourne la chaîne encadrée par des balises <big></big>
String blink() Retourne la chaîne encadrée par des balises <blink></blink>
String bold() Retourne la chaîne encadrée par des balises <b></b>
String fixed() Retourne la chaîne encadrée par des balises <tt></tt>
String fontcolor(String Retourne la chaîne encadrée par les balises <font
color) color="ma_couleur"></font>
String fontsize(mixed Retourne la chaîne encadrée par les balises <font
size) size="ma_taile"></font>
String italics() Retourne la chaîne encadrée par des balises <i></i>
String small() Retourne la chaîne encadrée par des balises <small></small>
String strike() Retourne la chaîne encadrée par des balises <strike></strike>
String sub() Retourne la chaîne encadrée par des balises <sub></sub>
String sup() Retourne la chaîne encadrée par des balises <sup></sup>

054
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
9. l’objet String
Mise en forme des chaînes

055
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
10. l’objet Math
L'objet Math
• Permet d’accéder, à toutes les fonctions et constantes mathématiques.
• Principales propriétés : Ce sont les valeurs des constantes classiques de
mathématiques.

Propriété Description
E Retourne la valeur d'Euler (logarithme)
LN10 Retourne la valeur du logarithme 10 (soit 2.302)
LN2 Retourne la valeur du logarithme 2 (soit 0.693)
LOG10E Retourne la valeur de la base 10 du logarithme (soit 0.434)
LOG2E Retourne la valeur de la base 2 du logarithme (soit 1.442)
PI Retourne la valeur de pi (soit 3.1415)
SQRT1_2 Retourne la valeur de la racine carrée de 0.5 (soit 0.707)
SQRT2 Retourne la valeur de la racine carrée de 2 (soit 1.414)

056
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
10. l’objet Math
Fonctions mathématiques à usage standard
✓ [Link](x): calcule la valeur absolue de x.
✓ [Link](x): retourne l'arrondi supérieur de x. Il s'agit du nombre entier
immédiatement supérieur ou égal à x.
✓ [Link](x): retourne l'arrondi inférieur de x. Il s'agit du nombre entier
immédiatement inférieur ou égal à x.
✓ [Link](x): retourne l'arrondi le plus proche (supérieur ou inférieur) de x
✓ [Link](x,y): retourne le nombre plus grand parmi x et y.
✓ [Link](x,y): retourne le nombre plus petit parmi x et y.
✓ [Link](x,y): retourne x à la puissance y.
✓ [Link](x): retourne la racine carré de x.

✓ [Link](x): calcule l’exponentiel de x.


✓ [Link](x): calcule le sinus de x.
✓ [Link](x): calcule l'arcsinus de x (x doit être compris entre -1 et 1).
✓ [Link](x): retourne le cosinus de x.
✓ [Link](x): retourne l'arccosius de x (x doit être compris entre -1 et 1).
✓ [Link](x): calcule la tangente de x.
✓ [Link](x): calcule l'arctangente de x.
057
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
10. l’objet Math
Nombres aléatoires
En Javascript (comme en d'autres langages de programmation), il est parfois utile
de générer des nombres aléatoires. La méthode random() (pour [Link]())
permet de retourner un nombre aléatoire compris entre 0 et 1. Ce nombre généré
contient plusieurs chiffres après la virgule. Pour générer un nombre aléatoire
entier une technique très simple est utilisée.

Supposons que nous voulons générer un nombre aléatoire compris entre 0 et 10


que l'on va affecter à la variable nbrAltr. Dans ce cas le code sera:

058
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
11. l’objet Date
L'objet Date
• Permet de travailler avec toutes les variables qui concernent les dates et la
gestion du temps.
• Syntaxes :
• d=new Date() :
• permet de stocker la date et l'heure actuelle
• d=new Date("jour,mois,date,année,heures:minutes:secondes")
• les paramètres sont une chaîne de caractère.
• d=new Date(année, mois, jour) :
• les paramètres sont trois entiers séparés par des virgules.
• Les paramètres omis sont mis à zéro par défaut .
• d=new Date(année,mois,jour,heures,minutes,secondes[,ms]) :
• les paramètres sont six entiers séparés par des virgules. Les
paramètres omis sont mis à zéro par défaut

059
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
11. l’objet Date
L'objet Date
Exemples :
• d = new Date(); //date courante
• d = new Date("30 juin, 2000 08:00:00");
• d = new Date("2009, 06, 30");
• d = new Date("2009, 06, 30, 08, 00, 00);

060
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
11. l’objet Date
Méthode Description Type de valeurs retournée
Récupère la valeur du jour du Retourne un entier (entre 1 et 31) qui correspond au
getDate()
mois jour du mois :
récupère la valeur du jour de la Retourne un entier qui correspond au jour de la
getDay()
semaine pour la date spécifiée semaine : 0: dimanche ; 1: lundi ...
récupère la valeur de l'année sur
getFulllYear() Retourne un entier qui correspond à l'année (XXXX)
4 chiffres pour la date.
Retourne un entier (entre 0 et 23) qui correspond à
getHours() récupère la valeur de l'heure
l'objet Date.
Retourne un entier (entre 0 et 999) qui correspond
getMilliseconds() récupère le nombre de ms
aux millisecondes de l'objet passé en paramètre.
Retourné un entier (entre 0 et 59) qui correspond aux
getMinutes() récupère la valeur des minutes
minutes de l'objet Date.
retourne est un entier (entre 0 et 11) qui correspond
getMonth() récupère le numéro du mois
au mois : 0: janvier ; 1: février ...
Retourné un entier (entre 0 et 59) qui correspond aux
getSeconds() récupère le nombre de secondes
secondes de l'objet passé en paramètre.
récupère le nombre de ms depuis Retourne un entier. Utile pour convertir des dates,
getTime()
le 1er janvier 1970 soustraire ou ajouter deux dates, etc.
Retourne la différence entre
Retourne un entier, il représente le nombre de
getTimezoneOffset() l'heure locale et l'heure GMT
minutes de décalage
(Greenwich Mean Time)
récupère la valeur de l'année sur
getYear() retourne est un entier qui correspond à l'anné (XX) :
2 chiffres pour l'objet Date.
061
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
11. l’objet Date
Méthode Description Type de valeurs retournée
convertit une date en une
Retourne une chaîne de caractère du type :
toGMTString() chaîne de caractères au
Wed, 28 Jul 1999 15:15:20 GMT
format GMT
convertit une date en une Retourne une chaîne de caractère dont la syntaxe
toLocaleString() chaîne de caractères au dépend du système, par exemple : 28/07/99
format local 15:15:20
fixe la valeur du jour du Paramètre entier (entre 1 et 31), correspond au
setDate(X)
mois jour du mois
fixe la valeur du jour de laParamètre entier, correspond au jour de la
setDay(X)
semaine semaine : 0: dimanche ; 1: lundi ...
Paramètre entier (entre 0 et 23), correspond à
setHours(X) fixe la valeur de l'heure
l'heure
Paramètre entier (entre 0 et 59), correspond aux
setMinutes(X) fixe la valeur des minutes
minutes
Paramètre entier (entre 0 et 11), correspond au
setMonth(X) fixe le numéro du mois
mois : 0: janvier ; 1: février ...
Paramètre entier représentant le nombre de
setTime(X) assigne la date
millisecondes depuis le 1er janvier 1970
062
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
12. l’objet RegExp
Expressions régulières

C'est grâce à l'objet RegExp que l'on peut créer un model (ou occurrence). La
syntaxe ressemble à ceci: expression = new RegExp(‘occurrence’)

expression est l'objet qui contient le model qu'on a créé à l'aide de l'objet RegExp.
En paramètres de celui ci, nous déclarons une chaîne de caractères qui
représente l'expression régulière elle même.

063
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
12. l’objet RegExp
Caractère spécial Signification
. Un seul caractère quelconque

+ Le motif précédent doit figurer au moins une fois

* Le motif précédent doit figurer au moins 0 fois

() Pour grouper un ensemble de caractère en tant que motif unique

Pour désigner un ensemble de motif dont, au moins, l’un d’entre


[] eux doit figurer.
Designe un intervalle s’il est déclaré entre les crochets. Exemple
- [a-z] signifie l’aphabet minuscule
? Le motif précédent doit figurer 0 ou une fois
$ Le motif précédent doit figurer à la fin de la chaine
Pour spécifier le minimum et le maximum de fois où l’occurrence
{} doit figurer. Exemple {1,3}désigne que l’occurrence figure entre 1
et 3 fois
^ Le motif suivant doit figurer en début de chaine
064
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
12. l’objet RegExp
Expressions régulières

il faut déspécialiser les caractères spéciaux si on souhaite les chercher en tant que
motif (ou occurrence).
Expression = new RegExp(‘\^’);

Méthodes de l'objet RegExp


La méthode la plus utilisée pour l'objet RegExp s'appelle test(). La méthode test()
permet de tester si la chaîne de caractères passée en paramètre (dans les
parenthèses) correspond à l'expression régulière. Si oui, elle retourne la valeur
booléenne true, sinon elle retourne false. On peut donc la manipuler grâce à la
structure de contrôle if else.

065
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
12. l’objet RegExp
Expressions régulières

L'expression ^\w+ peut être remplacée par ^[a-zA-Z0-9_]+. En effet, il existe des
abréviations qui peuvent remplacer les occurrences fréquemment utilisées
comme \w qui signifie tous les caractères alphanumériques minuscules ou
majuscule e plus du caractère souligné. \t pour tabulation, \n pour saut de
ligne, \d pour les caractères numériques...

expression=new RegExp("^\w+");

066
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
L'objet window : le parent de tous les objets de la page

Redirection: attribut location


Le fait que les liens hypertextes représentent le moyen le plus évident pour
rediriger le navigateur vers une autre page relève de l’unanimité. Or, pour
changer de page, il faut absolument que l'internaute clique sur le lien. Mais
imaginons un instant qu'on veut rediriger le navigateur vers une
nouvelle page sans cliquer sur aucun lien (suite à un événement ou un traitement
spécial par exemple). Il nous faut donc une autre solution.
En Javascript l'attribut location permet de rediriger le navigateur vers la page
dont le nom lui est affecté en tant que chaîne de caractères. Pour faire simple,
imaginons que nous voulons allez vers la page nommée "[Link]" via
Javascript. Le code ressemblera à ceci:

[Link] = "[Link]";

067
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
L'objet window : le parent de tous les objets de la page

Ecrire dans la barre d'état: attribut status

La barre d'état est la petite barre qui se trouve (d'une manière permanente ou
temporaire) en bas du navigateur et qui affiche souvent des informations comme
la cible d'un lien hypertexte survolé ou l'état de chargement des éléments de la
page. Javascript permet de personnaliser le message à afficher sur la barre d'état
grâce à l'attribut status. Le message souhaité lui est affecté en tant que chaîne de
caractères.

[Link] = ‘’Barre d’état dont le message a été personnalisé’’

068
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
L'objet window : le parent de tous les objets de la page

Méthodes de boites de dialogue: alert(), confirm() et prompt()


Les méthodes de boites de dialogue figent le navigateur. En effet, le fait d'afficher
un message dans une boite de dialogue n'est qu'une tâche complémentaire de ces
méthodes. Leur rôle principal c'est de figer le navigateur et l'empêcher de
poursuivre l’exécution du reste du code (que ce soit HTML, CSS ou Javascript lui
même). Cependant, il faut dire à l'internaute pourquoi son navigateur est figé.
C'est à cela que sert le message affiché. Le navigateur sera de nouveau libéré si le
client clique sur le bouton (ou les boutons) qui se présente sur la boite de
dialogue.

❑ alert(): Cette méthode permet d'afficher un message dans une boite de


dialogue en figeant le navigateur. Elle affiche aussi un bouton "OK". En
cliquant dessus, la boite disparaît et le navigateur est libéré

069
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
L'objet window : le parent de tous les objets de la page

Méthodes de boites de dialogue: alert(), confirm() et prompt()

❑ confirm(): Cette méthode permet d'afficher un message dans une boite de


dialogue menue de deux boutons: "OK" et "Annuler". En cliquant sur "OK", la
méthode confirm() retourne la valeur booléenne true. Le bouton "Annuler"
retourne false. Cette méthode sert principalement à faire confirmer une
action par le visiteur.

❑ prompt(): La méthode prompt() permet d'afficher un message dans une boite


de dialogue. Cette boite contient aussi une zone de texte et deux boutons "Ok"
et "Annuler". Si on clique sur "OK" la chaîne de caractères saisie dans la zone
de texte est retournée par la méthode. En cliquant sur "Annuler" la valeur
"null" (qui signifie "variable vide") est retournée. La méthode prompt() peut
accueillir deux paramètres. Le premier est affiché dans la boite de dialogue et
le deuxième constitue le texte par défaut de la zone de texte

070
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window

071
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window

072
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
Pop-Up: méthodes open() et close()

Les pop-up sont des fenêtres qui s'ouvrent indépendamment de la fenêtre


principale. Elle contiennent généralement de la publicité ou des informations
complémentaires à la page principale. De nombreux navigateurs ont tendance à
bloquer l'ouverture par défaut des pop-up car, parfois, leur ouverture intempestive
importune l'internaute.

Pour ouvrir une fenêtre on utilise la méthode open() et pour la fermer, en plus du
bouton de fermeture de la fenêtre par défaut, on peut faire appel à la méthode
close().

073
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
Pop-Up: méthodes open() et close()

La méthode open(URL, Nom de la fenêtre, Options) reçoit trois paramètres:


✓ URL: Il s'agit du chemin de la page à ouvrir dans la fenêtre. Il peut être absolu ou
relatif.
✓ Nom de la fenêtre: Il s'agit d'un nom optionnel que l'on donne à la fenêtre. Il est
utile quand plusieurs fenêtres sont ouvertes. S'ils disposent de noms différents,
alors on se retrouvera avec autant de fenêtre que d'appels. S'ils ont le même nom,
alors un nouvelle fenêtre ouverte écrase l'ancienne.

✓ Options: Les options permettent de personnaliser l’apparence de la fenêtre. Les


options possibles sont:

074
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
▪ width: spécifie la largeur de la fenêtre en pixel (l'unité n'est pas spécifiée).
▪ height: hauteur de la fenêtre.
▪ location: peut avoir yes ou no pour autoriser ou non l’apparition de la barre
d'adresse.
▪ resizable: peut avoir yes ou no pour autoriser ou non le redimensionnement
de la fenêtre.
▪ menubar: peut avoir yes ou no pour autoriser ou non l’apparition du menu
du haut de la fenêtre.
▪ scrollbar: peut avoir yes ou no pour autoriser ou non l’apparition des barres
de défilement
▪ toolbar: peut avoir yes ou no pour autoriser ou non l'affichage de la barre
d'outils.
▪ status: peut avoir yes ou no pour autoriser ou non l’apparition de la barre
d'état.

Les options doivent être séparées d'une virgule (sans espaces). Selon le
navigateur, toute option non déclarée reçoit implicitement la valeur no

075
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window

076
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
13. l’objet window
Temporisateur: méthodes setTimeout() et clearTimeout()
Il faut dire que la méthode setTimeout() est largement utilisée en Javascript.

077
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
14. l’objet event
Une autre manière pour gérer les événements

L'objet event permet de fournir des détails supplémentaires sur l'événement qui
vient de se produire. Par exemple, l’événement keyDown indique que l'utilisateur
vient d'appuyer sur une touche du clavier, mais on ne sait pas quelle touche
exactement. Avec l'objet event il est possible de préciser ce genre de détail et bien
plus encore

L'objet event se propage dans l'arbre du DOM selon le flux d'événement décrit ou
par défaut.

Flux d'événements
Jusqu'ici, on sait que l'événement se produit sur un objet, et on le capture par le
biais du gestionnaire d'événements (statique ou dynamique).

Examinons ce code ci-après de plus près:

078
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
14. l’objet event

Nous avons placé un gestionnaire d'événements sur le lien (balise <a>) en faisant
appel à la fonction f() (que je n'ai pas défini, car ce n'est pas ce qui nous intéresse
ici). Alors, logiquement, c'est le texte "Hyperlien" du lien hypertexte qui est
concerné par l'événement click. Cependant , les choses ne se déroulent pas aussi
simplement.
Regardons un peu comment la hiérarchie est établie dans ce cas:
079
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
14. l’objet event

Chacun des rectangles représente un objet déclaré dans le dernier code (l'objet
document étant le document HTML lui même).

Le fait de cliquer sur l'hyperlien (objet A), revient à cliquer également sur son
conteneur qui est l'objet DIV, ce qui implique qu'on a aussi cliqué sur son parent
qui est l'objet SECTION ce qui signifie aussi qu'on a cliqué sur leur parent à tous,
l'objet DOCUMENT.

080
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
14. l’objet event
Le flux de propagation de l'événement click évolue comme ceci:

1. Le flux de propagation de l'événement click évolue comme ceci: Phase capture:


L'événement se propage du haut en bas, c'est à dire de l'objet du plus haut niveau
(dans la hiérarchie) à l'objet du plus bas niveau sur lequel la souris est placée au
moment du déclenchement de l'événement. Cette phase s'appelle la capture.

[Link] bouillonnement : Une fois l'événement a atteint la cible, il se propage


dans le sens inverse en remontant la hiérarchie jusqu'à atteindre l'objet
document. Cette phase s'appelle bouillonnement (bubbling en anglais).

C'est de cette manière qu'un événement est capturé en Javascript, mais on peut
changer ce comportement par défaut si on souhaite, et on peut même
interrompre le flux de propagation de l'événements (c'est ce qu'on va voir aussi
dans cette partie).

081
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
14. l’objet event
Méthodes, attributs et sous-objets de l'objet event
Méthodes associées à event
Deux méthodes sont les plus connus pour l'objet event:
▪ preventDefault(): Cette méthode empêche le navigateur d'entamer une action
par défaut. Par exemple, le fait de cliquer sur un bouton de
type submit redirige le navigateur vers la page définie dans l'attribut action du
formulaire, ce qui représente le comportement par défaut. Or, si on déclare
convenablement la méthode preventDefault(), le navigateur n'entamera pas la
redirection
On peut remplacer cette méthode par un simple return false.

▪ stopPropagation(): Cette méthode empêche la propagation du flux


d'événement. Si le flux se propage automatiquement sur les deux phases qu'on
a vu dans le paragraphe précédent, la méthode stopPropagation() permet de
rompre ce flux de telle sorte à empêcher la capture répétée de l'événement
par les objets qui s’emboîtent les uns dans les autres et exécuter la même
fonction plusieurs fois.

082
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM

L'objet Document est hiérarchiquement placé sous l'objet window. Il permet de


manipuler tous les objets qui sont inclus dans le documents HTML (images, textes,
formulaires...).

Quand on parle de l'objet document il y a un autre terme qui surgit


automatiquement, c’est le DOM.

Document Object Model: DOM


DOM qui signifie Document objet Model est un outil qui permet d'accéder au
document. Il s'agit plus précisément d'une interface qui standardise la manière
d'accès aux document structurés en balises comme HTML ou XML. D'ailleurs,
chaque élément du document fait partie du model DOM.

083
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM

Arborescence et nœuds
Nous avons déjà parlé de la hiérarchie des objets en Javascript. Il s'agit en fait de la
manière dont sont présentés les différents éléments constituant le contenu (un
objet parent qui contient des objets enfants qui, à leurs tours, contiennent d'autres
objets et ainsi de suite).

L'ensemble des ces objets constitue une arborescence (connue aussi sous le nom
arbre HTML, si le document en question est HTML). Cet arbre est en fait une
structure d'éléments qui représentent des nœuds. Il existe deux types de nœuds,
nœuds éléments et nœuds texte. Les nœuds éléments sont tout simplement les
balises et les nœuds textes sont les textes contenus dans un document HTMBL

Méthodes et sous-objets
Méthodes de base de l'objet document
Il existe de nombreux méthodes (et attributs) qui s'appliquent sur l'objet
document. La méthode write() permet d'écrire la chaîne de caractères passée en
paramètre directement dans le document.
084
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM

Sous objets de document


Trois sous-objets sont fréquemment utilisés:
▪ images: Cet objet retourne un tableau qui contient tous les objets de type image (c’est-
à-dire les balises <img>). La première image du document est indexée par 0, la
deuxième par 1 et ainsi de suite. L'attribut le plus utilisé de cet objet est src qui permet
de changer la source de l'image dynamiquement.
▪ forms: Cet objet retourne un tableau qui contient tous les formulaires du document
(les balises <form>).
▪ body: Cet objet fait référence à la balise <body>.

<img src="[Link]" />


<img src="[Link]" />
<img src="[Link]" />
<script language="javascript">
for(i=0;i<[Link];i++)
[Link][i].src="[Link]";
</script>
085
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Dans cet exemple, on change dynamiquement la source des 3 balises <img> par
"[Link]". Nous avons appliqué l'attribut length à l'objet images pour connaitre
le nombre d'images dans le document.

Exemple 2
<form>
<input type="text" name="login" />
</form>
<script language="javascript">
[Link][0].[Link]="ABC";
</script>
Dans cet exemple, on accède à la zone de texte nommée "login" hiérarchiquement.
Nous avons appelé le formulaire qui la contient par l'objet forms qui fait référence
à tous les formulaires du document. L'index 0 désigne le premier formulaire
déclaré.

086
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Autres façons pour accéder aux sous objets de document

Jusqu'ici nous avons vu comment écrire directement dans le document et comment


accéder aux images et formulaires déclarés. Cependant, il existe d'autres méthodes
qui permettent d'accéder plus facilement aux différents objets de tout type d'un
document. Il s'agit d'ailleurs des méthodes les plus utilisés par les développeurs:
▪ getElementById(): Cette méthode permet d'accéder à un objet quelconque en
l'identifiant par la valeur de son attribut id. Vous avez déjà eu l'occasion de voir
cet attribut en CSS. Sa valeur est unique dans tout le document. C'est cette valeur
qui sera déclarée dans les parenthèses de la méthode en tant que chaîne de
caractères.
▪ getElementsByTagName(): Cette méthode permet d'accéder tous les objets
correspondant à la balise (tag) déclarée entre les parenthèses en tant que chaîne
de caractères. Elle retourne un tableau qui renferme tous les nœuds du type
désigné.

087
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Autres façons pour accéder aux sous objets de document
<img src="[Link]" id="im1" />
<img src="[Link]" />
<img src="[Link]" />
<script language="javascript">
[Link]("im1").src="[Link]";
for(i=1;i<[Link]("img").length;i++)
[Link]("img")[i].src="[Link]";
</script>

Le premier objet image a été désigné par son identifiant "im1". Les deux derniers
ont été désignés par leur nom de balise (TagName) qui correspond évidemment à
"img". Puisqu'il s'agit d'un tableau, alors on a précisé les indexes des objets à cibler
entre les crochets.

L'oubli de s de getElementsByTagName() est une erreur très courante. Faites y


attention! Il faut aussi s'assurer de la casse (majuscules et minuscules) lors de
l'appel des objets.

088
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Autres façons pour accéder aux sous objets de document
Après avoir ciblé nos objets, que pouvons nous faire à part changer la source des images et
désigner une zone de texte?
Attribut innerHTML
Jusqu'ici, nous avons pu écrire des textes dans des champs de formulaire et des boites de
dialogue. Mais si on veut écrire n'importe où dans la balise <body> alors on peut le faire
grâce à l'attribut innerHTML.

Au chargement de la page, la balise <div> identifiée par contenu contient le texte


"Bonjour". Une fois le script Javascript exécuté, le nœud texte "Bonjour" est
remplacé par "Bonsoir" grâce à l'attribut innerHTML.

Attribut className
L'attribut className renomme l'attribut class d'un élément. C'est pratique pour
appliquer des styles CSS dynamiquement à l'objet en question.
089
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.nouvelleClasse{
color:#FFFFFF;
font-size:18pt;
background-color:#000000;
padding:10px;
}
</style>
<script language="javascript">
function changer(){
[Link]("h1").item(0).className="nouvelle
Classe";
}
</script>
</head>
<body>
<h1>Titre d'order 1</h1>
<input type="button" value="Changer l'apparence" onclick="changer()"
/>
</body>
</html>
090
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Autres façons pour accéder aux sous objets de document
Sous-objet style
Le sous-objet style permet de définir dynamiquement un attribut de style
local style sur la balise concernée..
<span id="citation">
Mieux vaut dormir tard tôt que de dormir tard tard !
</span>
<script language="javascript">
[Link]("citation").[Link]="#888888";
[Link]("citation").[Link]="italic";
</script>
Je crois que vous avez compris l'astuce. Les attributs du sous-objets style sont les propriétés que
nous avons déjà vu en CSS. Si la propriété est composée, alors le tiret et enlevé et le caractère
immédiatement suivant est capitalisé. Par exemple font-style devient fontStyle et text-
decoration devient textDecoration...

La valeur à appliquer à l'attribut est la même que celle que vous auriez déclarée en CSS, juste
que cette fois, il faut la placer entre des guillemets, car elle est vue en Javascript en tant que
chaîne de caractères
091
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Autres façons pour accéder aux sous objets de document

Méthode setAttribute()
Si on veut changer dynamiquement la valeur d'un attribut d'une balise alors on fait
appel à l'attribut setAttribute.
<div align="left">
Contenu de la DIV.
</div>
<script language="javascript">
[Link]("div").item(0).setAttribute("
align","center");
</script>

L'attribut align avait comme valeur "left". Une fois le script exécuté, sa nouvelle
valeur devient "center". La méthode setAttribute accepte deux paramètres; le
premier est le nom de l'attribut à modifier, le second est la valeur qu'on souhaite
lui attribuer.

092
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Autres façons pour accéder aux sous objets de document

Méthode getAttribute()
La méthode getAttribute permet de récupérer la valeur de l'attribut passé en
paramètre.
<video src="[Link]" id="publicite"></video>
<script language="javascript">
alert([Link]("publicite").getAttribute("src"));
</script>

093
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Création, intégration et suppression des éléments

Méthode createTextNode()
La méthode createTextNode permet de créer un nœud texte.
message=[Link]("Bonjour à tous.");

Méthode appendChild()
La méthode appendChild ajoute un enfant à l'objet sur lequel elle est appelée.
L'enfant peut être un nœud élément ou un nœud texte.

094
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;
height:60px;
background-color:#EE6600;
margin:10px;
font:14pt verdana;
padding:10px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function ajouter(){
baliseDIV=[Link]("div");
[Link]="maclasse";
message=[Link]("Bonjour à tous.");
[Link](message);
[Link]("madiv").appendChild(baliseDIV);
}
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Ajouter une DIV" onClick="ajouter()" />
<div id="madiv"></div>
</body> 095
15. l’objet DOM
Création, intégration et suppression des éléments
Méthode insertBefore()
La méthode insertBefore() ajoute un nouveau nœud enfant dans l'élément parent sur
lequel elle est appelé. Si appendChild() ajoute le nœud à la fin, insertBefore quant à
elle permet de spécifier avant quel élément on veut insérer le notre.

096
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.maclasse{
width:200px;height:60px;background-color:#EE6600;
margin:10px;font:14pt verdana;padding:10px;color:#FFFFFF;}

</style>
<script language="javascript">
function ajouter(){
baliseDIV=[Link]("div");
[Link]="maclasse";
message=[Link]("Bonjour à tous.");
[Link](message);
[Link]("madiv").insertBefore(baliseDIV,docum
[Link]("monimage")); }
</script>
</head>
<body onLoad="decoup()">
<input type="button" value="Insérer une DIV" onClick="ajouter()" />
<div id="madiv">
<img src="images/[Link]" id="monimage" />
</div>
</body>
</html> 097
15. l’objet DOM
Création, intégration et suppression des éléments
Méthode removeChild()
La méthode removeChild() supprime l'enfant passé en paramètre du parent sur
lequel il est appelée.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
function supprimer(){
[Link]([Link]("monima
ge"));
}
</script>
</head>
<body>
<input type="button" value="Supprimer l'image"
onClick="supprimer()" /><br />
<img src="images/[Link]" id="monimage" />
</body>
</html>
098
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Mot-clé this
Le mot clé this fait référence à l'objet sur lequel il est déclaré. Il permet de
simplifier la désignation des objets à travers le DOM. Au lieux de cibler un
élément à travers son ID ou ton tagName, this raccourcie visiblement la syntaxe.

Supposons que nous disposons d'une image en noir et blanc qui, une fois survolé,
laisse place à une l'image en couleur. On peut écrire le code comme ceci:

<script language="javascript">
tabImages=new
Array("images/[Link]","images/[Link]");
function changerImage(indice,image){
[Link]=tabImages[indice];
}
</script>
<img src="images/[Link]"
onMouseOver="changerImage(1,this)"
onMouseOut="changerImage(0,this)" />

099
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM
Le mot clé this fait référence à l'image, car c'est sur celle-ci qu'il est déclaré et
passé en paramètre de la fonction changerImage(). Une autre astuce consiste à
placer les chemins des images dans un tableau, ce qui rend le code plus lisible et
facilement modifiable.

100
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM /Form
L'objet Forms
• On peut faire référence à chaque formulaire par son nom fourni par l'attribut
NAME de la balise FORM ou par son index dans la matrice forms[].
• document.form1 et [Link][0]
• désignent le premier formulaire d'un document.
• Exemple : [Link]
• Ce document contient deux formulaires :
• <FORM NAME="FormInscription" METHOD="POST"
ACTION="[Link]
• <FORM NAME="FormConnexion METHOD="POST"
ACTION=“[Link]@[Link]">…</FORM>

101
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM /Form
Propriétés Description
bgColor Représente la couleur de fond, spécifiée par l'attribut BGCOLOR
fgColor Représente la couleur du texte, spécifiée par l'attribut TEXT
lastModifie Indique la date de la dernière mise à jour du document (communiquée par le
d serveur)
linkColor Représente la couleur des liens non encore visités, spécifiée par l'attribut LINK
location Egalement notée URL, indique l'URL du document
referrer Représente l'URL précédemment visitée
title Donne le titre du document, définit par la balise <TITLE>
vlinkColor Représente la couleur des liens déjà visités
Méthodes Description
clear() Efface le document qui vient d'être fermé
close() Ferme un canal d'affichage et fait apparaître le qui vient d'être rédigé
open() Ouvre un canal d'affichage et efface le document à l'écran
write() Rédige un nouveau texte
writeln Rédige un nouveau texte avec des signes de retour chariot
Objets fils Description
[Link] Représente une matrice dont les éléments sont les formulaires du
document
[Link] Représente une matrice dont les éléments sont les liens du document
[Link] Représente une matrice dont les éléments sont les ancres du document
[Link] Représente une matrice dont les éléments sont les images du document
[Link] Représente une matrice dont les éléments sont les applets du document 102
15. l’objet DOM /Form
Soit le formulaire suivant :

103
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM /Form
• Récupérer le contenu d’un champ de type TEXT
• [Link]
• Exemple pour le champ nom du formulaire FormInscription
• [Link]
• Modifier le contenu d’un champ de type TEXT
• document. [Link] = valeur
• Exemple pour le champ nom du formulaire FormInscription
• [Link] = "Toto"
• Récupérer la valeur d’une liste déroulante
• Index de l'élément sélectionné (0, 1, 2…)
• i = [Link];
• Valeur de l’index sélectionnée
• valeur = [Link][i].value;
• Exemple pour le champ pays du formulaire FormInscription
• i = [Link];
• valeur = [Link][i].value;

104
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM /Form
• Les propriétés
• Référence à chaque formulaire
• [Link][0] : représente le formulaire FormInscription
• [Link][1] : représente le formulaire FormConnexion
• Référence au premier élément d'un formulaire : le champ texte
Name="nom"
• [Link][0]
• [Link].nom1
• Nombre de formulaire dans un document
• [Link]
• Nombre d'éléments dans un formulaire
• [Link]
• Les méthodes
• submit() : joue le même rôle que le bouton SUBMIT, mais sans
l'intervention de l'utilisateur.
• reset() : joue le même rôle que le bouton RESET, mais sans l'intervention de
l'utilisateur.
105
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM /Form
Champ de text et champ de mot de passe et zone de texte

Description
Propriétés name Nom donné au champ
defaultValue Valeur par défaut
value Valeur en cours du champ
Description
Méthodes focus() Active le champ en y positionnant le curseur
blur() Désactive le champ
select() Sélectionne la totalité du champ
Description
onFocus() Active du champ
Evénements onBlur() Désactive du champ
onChange() Modification du champ ou passage à un champ
onSelect() Sélection d'une partie ou la totalité du texte

106
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM /Form
Description
name Nom donné à la case à cocher et à l'objet
Case à cocher

defaultValue Valeur par défaut


Propriétés value Valeur=true si case cochée, false sinon
defaultChecke Etat par defaut déterminé par l'attribut
d CHECKED
checked Représente la valeur actuelle
Méthodes Description
click() Active le champ en y positionnant le curseur
Evénements Description
onClick() Active du champ

Propriétés Description
name Nom donné au groupe de boutons
length Nombre de boutons dans le groupe
Radio bouton

defaultValue Valeur par défaut


value Valeur=true si case cochée, false sinon
defaultChecked Etat par defaut déterminé par l'attribut CHECKED
checked Représente la valeur actuelle
Méthodes Description
click() Active le champ en y positionnant le curseur
Evénements Description
onClick() Active du champ
107
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
15. l’objet DOM /Form
Propriétés Description
Liste de sélection

name Nom donné à la liste de sélection


length Nombre d'option dans la liste
options# Matrice des options
length Indique le nombre de sélections opérées
selectedIndex Renvoie la valeur de l'index de l'option sélectionnée
index Index dans la matrice
defaultSelected Indique l'état de l'attribut SELECTED
selected Décrit l'état actuel de l'option (true ou false)
name Représente la valeur de l'attribut NAME
text Est le texte de l'option
Méthodes Description
blur() Désactive le champ
focus() Sélectionne la totalité du champ
Evénements Description
Champ masqué

onFocus() Active le champ


onBlur() Désactive du champ

Propriétés Description
name Nom donné au champ
value Valeur du champ

108
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
16. Gestion des exceptions
Bloc try catch
La gestion des exceptions est faite grâce au bloc try catch. Cela signifie qu'on
demande au moteur Javascript (interpréteur) d'essayer d’exécuter un bout de
code. Si tout va bien alors tant mieux, sinon on doit attraper (ou détourner)
l'erreur et faire un traitement alternatif.

Nous allons essayer de survoler rapidement la gestion d'exception en Javascript


sans trop entrer dans les détails.
a=10; Bien que l'exemple n'est pas très méthodique, mais
b=2; l’essentiel est de savoir comment gérer les erreurs
c==a/b; (prévisibles et imprévisibles).
alert(c);
a=10;b=2; Il s'agit là d'une simple division de 10 par 2. Mais
try{ au lieux de mettre c=a/b; on a mis c==a/b. Ce qui
c==a/b; représente une erreur (souvent commises par
alert(c);} inadvertance). Le programme ne s’exécutera donc
catch(e){ pas.
alert("Erreur!");}
109
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Exercice n°1
1. Créer une variable de type tableau dans laquelle on enregistre
les jours de la semaine.

2. A l’aide de la méthode join, affichez :


Les jours de la semaine :Lundi ; Mardi ; Mercredi ; Jeudi ; Vendredi ; Samedi ;
Dimanche.
3. En utilisant la boucle for, afficher :
Jour 0 : Lundi
Jour 1 : Mardi
Jour 2 : Mercredi
Jour 3 : Jeudi
Jour 4 : Vendredi
Jour 5 : Samedi
Jour 6 : Dimanche

110
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Exercice n°2.
1. Insérez trois paragraphes d’identificateurs par1, par2, par3
et de contenu paragraphe numéro 1, de contenu paragraphe numéro 2, de
contenu paragraphe numéro 3 respectivement.

2. Bloquez l’affichage de ces paragraphes :display :non.

3. Insérer un formulaire contenant une balise select dont les options sont :
vide, par1, par2, par3 de valeurs correspondantes 0, 1, 2, 3.

4. Écrivez la fonction afficher qui permet d’afficher le bon paragraphe quand


il est sélectionné.

111
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Exercice n°3
Ecrire un fichier [Link] permettant de calculer la TVA sur un produit : La tva
sur un produit agricole est 0%, et sur un produit non agricole est19%

112
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Exercice n°4
Ecrire un fichier [Link] permettant de réviser quelques multiplications :

113
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Exercice n°5.
1. Écrire une page [Link]. Lorsque cette page se charge, une boite de
dialogue de type prompt s’ouvre pour demander à l’utilisateur de choisir la
couleur de fond. Le texte de la boite de dialogue propose trois choix (gris, bleu,
vert). Voici les codes couleurs associés :
— Gris : #C0C0C0
— Bleu : #669999
— Vert : #99FF66
2. Créez une nouvelle page dans laquelle l’utilisateur choisira la couleur de fond
à partir d’un menu déroulant

114
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Exercice n°6.
1. Ecrire une page [Link] permettant d’afficher la table de
multiplication pour un nombre donné par l’utilisateur.
2. Changez la fonction écrite dans la question 1, pour qu’elle renvoie Entrer
une valeur valable lorsque la valeur entrée n’est pas un entier.

3. Enlevez le bouton et faites de sorte que le textearea affiche la table de


multiplication une fois il a le focus

115
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Exercice n°7.
On souhaite afficher, dans une zone de texte, 4 messages consécutifs: "Bonjour à
tous.", "Cette phrase", "est affichée" et "lettre par lettre." de telle sorte à ce que
chaque message s'affiche lettre par lettre et non pas d'un seul coup.
Exercice n°8. Contrôle de nombre de caractères
Vous avez probablement envoyé un SMS gratuitement depuis le site Web de votre
opérateur mobile, où postulé votre site Web à un annuaire de recherche en vue d'en
acquérir un back-link. Si c'est le cas, alors vous avez certainement compris l'objectif
de l'exercice.

Nous voulons créer un une zone de texte (ou espace de texte) pour que l’internaute
puisse y saisir un texte quelconque. On suppose que celui ci ne doit pas contenir plus
de 60 caractères. Pour que l'internaute ne soit pas surpris par le refus de son post
suite à un excès de caractères, nous allons prévoir une zone de texte en bas du
textarea qui affiche le nombre de caractères restants. Ce nombre sera
automatiquement calculé à chaque modification du texte par le clavier (pour
simplifier l'exercice, nous n'allons pas traiter le cas où l'internaute fait un copier-
coller dans la zone de saisie).
116
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Travaux Pratique 2
Si la taille du texte saisi dépasse la longueur maximale spécifiée, alors un message
alert() s'affiche pour signaler à l'internaute l'excès de caractères, en plus, tout ce qui
dépasse est automatiquement supprimé pour ne conserver que les 60 premiers
caractères autorisés.

117
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
118
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023
Références

[Link]
JavaScript : l'objet event & programmation du clavier - [Link]
Introduction aux évènements - Apprendre le développement web | MDN ([Link])

Cours Javascript – prof Brou Konan Marcellin 2013-2014

119
INP-HB Ecole Supérieure d’Industrie TS STIC 2-INFO Cours JS 2022-2023

Vous aimerez peut-être aussi