JavaScript

2022 - 2023

| | JavaScript . 2023
 ORGANISATION

 20 heures
 Support électronique
Exercice de synthèse par
chapitre
Projet de fin de formation
…| | JavaScript . 2023
 PRE-REQUIS

 Connaissances de base en
HTML/CSS
 Connaissances de base en
programmation
Un éditeur de texte
| | JavaScript . 2023
 PUBLIC CIBLE

 Etudiants, professionnel
…

| | JavaScript . 2023
 OBJECTIF
 Apprendre à programme avec
JavaScript
 Développer des pages web
interactives et réactives
Et d’être enfin de compte un
développeur Fullstack JS
…
| | JavaScript . 2023
 MODE D’EVALUATION
Contrôle continu
 Examen final
…

| | JavaScript . 2023
 INTRODUCTION

HISTORIQUE

1 | JavaScript . 2023
 INTRODUCTION
 Historique
JavaScript est un langage de script :
– un langage dynamique
– un langage exécuté coté client
– un langage interprété
– un langage orienté objet
2 | JavaScript . 2023
 INTRODUCTION
 Historique
JavaScript a été développé
initialement par Netscape et portait
le nom LiveScript.
En 1995 il est adopté par la firme
sun (développé par java) et a changé
son nom en JavaScript
3 | JavaScript . 2023
 INTRODUCTION
 Historique
Et c’est après en 1996 que
Microsoft l’a adopté en sa version
3 de son navigateur Internet.
En 1997 la première version
normalisée(ES1) est approuvée.
4 | JavaScript . 2023
 INTRODUCTION
 Historique
Depuis lors différente version se son
succéder d’année en année avec
évidemment de nouvelles
fonctionnalités.
JavaScript est intégré dans la
plupart des navigateurs.
5 | JavaScript . 2023
 INTRODUCTION
 Historique
En 2010 de nouveaux frameworks et
bibliothèques JavaScript se sont
multipliés. Depuis lors différente version
se son succéder d’année en année avec
évidemment de nouvelles fonctionnalités.
JavaScript est intégré dans la plupart des
navigateurs.
6 | JavaScript . 2023
 INTRODUCTION
 Historique
Et depuis lors de nouveaux
frameworks se sont multipliés
dont on peut noter : Angular Js,
Node Js, React Js…

7 | JavaScript . 2023
 INTRODUCTION
 JavaScript pour quoi faire… ?
 Contrôler le contenu et l’apparence de la
page web
 Contrôler les fonctionnalités du navigateur
 Gérer le contenu d’une page web
 Gérer les interactions avec l’utilisateur
 Manipuler et gérer les images
 Lecture et écriture des cookises
 …
8 | JavaScript . 2023
 INTRODUCTION
 JavaScript pour quoi faire… ?
 Contrôler le contenu et l’apparence
de la page web
1. faire apparaitre un texte dynamique
2. Créer une page à partir d’un lien

9 |
JavaScript . 2023
 INTRODUCTION
 JavaScript pour quoi faire… ?
 Contrôler les fonctionnalités du
navigateur
1. Affichage de boite de dialogue
2. Saisie de données
3. Ouvrir d’Url dans la fenêtre du navigateur

10 |
JavaScript . 2023
 INTRODUCTION
 JavaScript pour quoi faire… ?
 Gérer le contenu d’une page web
Accès au contenu de la page
web :
 Au DOM : lien hypertexte,
bouton, images,…

11 |
JavaScript . 2023
 INTRODUCTION
 JavaScript pour quoi faire… ?
 Gérer les interactions avec
l’utilisateur
Gérer les actions et les évènements
Exemple: évènements de la souris,
clavier, validation des données d’un
formulaire etc.
12 |
JavaScript . 2023
 INTRODUCTION
 JavaScript pour quoi faire… ?
 Manipuler et gérer les images
Créer des effets sur les images :
onclick(),
dblclick(),
onmouseup(),onmousedown(),onmousem
ove(),
onkeypress(),onkeyup(),onfocus(),…
13 |
JavaScript . 2023
 INTRODUCTION
 JavaScript pour quoi faire… ?
 Lecture et écriture des cookies
…

14 |
JavaScript . 2023
 INTRODUCTION

En résumé
JavaScript pour quoi faire… ?
• Déplacer, faire apparaître ou disparaître des éléments.
• Affichage sans rechargement complète de la page.
• Attendre que l’utilisateur face quelque chose (cliquer,
taper au clavier, bouger la souris…) et réagir (faire une
des opérations ci-dessus suite à cette action).

15 |
JavaScript . 2023
 INTRODUCTION

 Les IDE
IDE : Environnement de développement intégré
(Integrated Development Environment).
 Notepad++
 SublimText
 Dreamweaver
 Visual Studio Code
 Bloc note
 ….
16 |
JavaScript . 2023
 INTRODUCTION

 Avant de commencer

En JavaScript il est
important de connaitre la
notion d’objet en JavaScript.
17 |
JavaScript . 2023
 INTRODUCTION
 Les Objets en JavaScript
JavaScript est conçu autour d’un
paradigme basé sur les objets.
Les différentes fonctionnalités
offertes par JavaScript sont
accessible à travers un ensemble
d’objet.
18 |
JavaScript . 2023
 INTRODUCTION

 Les Objets en JavaScript

Les objets JavaScript peuvent
être répartie en deux catégories:
- Les objets d’interfaces
- Les objets des propriétés et des fonctions
prédéfinies

19 |
JavaScript . 2023
 INTRODUCTION

 Les Objets en JavaScript

- Les objets d’interfaces
Gère les aspects visuels des différents
contrôles sur une interface
Par exemple : window, document, button,
radio, checkbox,…

20 |
JavaScript . 2023
 INTRODUCTION

 Les Objets en JavaScript

- Les objets des propriétés et des fonctions
prédéfinies
Fournis les différentes ressources
requises pour la programmation.
Exemple : l’objet : string, math,
date, navigator, array, et object
21 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
- Utiliser d’abords la base <script></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script>
alert("Bonjour à tout le monde !");
</script>
</body>
</html>
22 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
Ecrire du code JavaScript
La balise <script> permet d'insérer du JavaScript au
sein d'un document HTML.
Cependant, il n'y a pas que JavaScript en tant que
langage de script coté client. Cause pour laquelle il
serait donc plus commode de spécifier le type du
langage utilisé.
Voici deux méthodes permettant de préciser qu'il s'agit
bien du JavaScript et non pas d'un autre langage:

23 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
Voici deux méthodes permettant de préciser qu'il
s'agit bien du JavaScript et non pas d'un autre
langage:

<script language="javascript"></script>
<script type="text/javascript"></script>

24 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
Les deux déclarations sont explicites:
Déclaration 1:
Le langage utilisé dans les délimiteurs est Javascript
Déclaration 2:
Cette deuxième est par contre plus appréciée vu qu'elle fournie deux informations, à
savoir le type et le MIME.
MIME : Multi-purpose Internet Mail Extensions ou identificateur de type de données.
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.
Exemple:
HTML : text/html;
Fichier texte text/plain;
Etc…

25 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
Quelques exemples :

25 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
Quelques exemples : images

25 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
Du code js inclus dans du html

<html>
<head>
<title>Ma première page en javascript</title>
<script language="JavaScript">
alert("JavaScript dans mon fichier");
</script>
</head>
<body>
<p>Ma première page avec JavaScript dans du code HTML</p>
</body>
</html>

25 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
un fichier script.js inclus dans du html
<html>
<head>
<title>Ma première page en javascript</title>
<script language="JavaScript" src="script.js" ></script>
</head>
<body>
<p>Ma première page avec JavaScript dans du code HTML</p>
</body>
</html>

alert("JavaScript dans mon fichier"); // fichier script.js

25 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code 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 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.

Imaginons que nous voulons déclarer nos scripts dans un fichier

nommé script.js. Plaçons le fichier script.js dans le même dossier
que notre fichier HTML. Pour appeler les scripts dans notre page
HTML le code ressemblerait à ceci:
<script type="text/javascript" src="script.js"></script>
26 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
Code HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
27 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ecrire du code JavaScript
Code Javascript (contenu du fichier script.js):

alert("Bonjour");

28 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ou placer le code JavaScript
dans une page 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).

29 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Ou placer le code JavaScript dans une
page html ?
Voici à quoi devrait ressembler le code précédent :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>

</body>
</html>
30 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
Ou placer le code JavaScript
dans une page html ?
Si le client désactive ce dernier alors il ne sera pas exécuté. Pire
encore, tout le code Javascript sera affiché sur la page Web comme
étant du texte normale.
Pour l’éviter il suffira donc de le commenter en HTML.
Le code devrait ressembler à ceci:
<script type="text/javascript">
<!--
Code Javascript
// -->
</script>
31 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
La syntaxe de base de JavaScript
La syntaxe javascript est inspiré du langage C, les fonctions, les
boucles et les conditions sont encadré par des accolades { } et
leurs paramètres par des parenthèses ( ) et enfin chaque
instruction se termine par un point-virgule (;) mais il n’est pas
obligatoire.

1. La casse
Le javascript est sensible à la casse (Case Sensitive).il fait donc la différence
entre las majuscules et les minuscules
Par exemple : let ou var =string ≠ let ou var = String ou
STRING
32 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
La syntaxe de base de JavaScript
2. Les espaces et les retours à la ligne en
JavaScript
Un code Javascript n’est pas sensible aux espaces, aux tabulations et aux
retours à la ligne.
Toutefois, il est vivement conseillé de les utiliser pour indenter le code, afin
de le rendre le plus lisible possible
L’indentation correspond au fait de décaler certaines lignes de code par
rapport à d’autres. Cela est généralement utilisé pour rendre son code plus
lisible et donc plus simple à comprendre.

33 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
La syntaxe de base de JavaScript
3. L’affichage en JavaScript
console.log()
L’instruction «console.log()» permet d’afficher des variables, du texte
dans la console.
alert() «alert» permet d’ouvrir une fenêtre avec un message.
document.write(« …»)
«document.write» permet d’afficher d’ajouter du code HTML dans la
page.
document.querySelector(« … »)
Cette instruction permet de récupérer une balise et modifier son style.
33 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT

Les variables en JavaScript

4. Les commentaires
En JavaScript, ces commentaires peuvent se présenter
sous deux formes différentes:
 (//) commentaire de ligne
 /*…*/ commentaire sur plusieurs lignes
NB: les instructions sont toujours écrites en minuscules

34 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT

Les variables en JavaScript

4. Les variables
Une sert à stocker une ou plusieurs valeurs qui peut(ou
peuvent changer au cours de l’exécution du
programme. Les variables se déclarent de deux
façons :
 Var = a explicitement par le mot clé var
 a=10 implicitement
35 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT

Les variables en JavaScript

4.1. Les variables
Le nom de la variable peut être composé de(minuscules,
majuscules), de chiffres et les caractères _ et &. En plus, il doit
impérativement commencer par une lettre ou le caractère _.
Exemple :
maVar = "Fallou"; //Juste _maVar = "Diouf"; //Juste
1maVar = "Fallou"; //Faux ma Var = "Diouf"; //Faux

36 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les variables en JavaScript
let v1 = 5;
4.1. Les variables
let v2 = 10;
let result = v1+v2;
let msg = '‘;
alert('v1+v2: '+v1 + ' + ' + v2 + ' = ' + result);
msg = '1 : Le double du résultat est : ' + result*2;
alert(msg);
console.log(msg);
v1 = prompt('Entrez un premier chiffre :');
v2 = prompt('Entrez un second chiffre :');
result = parseInt(v1) + parseInt(v2);
alert(v1 + ' + ' + v2 + ' = ' + result);
console.log(v1 + ' + ' + v2 + ' = ' + result);
msg = '2 : Le double du résultat est : ' + result*2;
alert(msg);
console.log(msg);
37 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les variables en JavaScript
4.1. Tester l’existence de variable avec
l’instruction typeof
Si l'instruction typeof renvoie undefined, c'est soit que votre variable est
inexistante, soit qu'elle est déclarée mais ne contient rien.

38 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT

Les variables en JavaScript

5.2. La portées d’une variable
La portée d’une variable (ou scope) est le contexte dans
lequel cette variable pourra être utilisée.
Variable globale
Si la variable est créé en dehors d’une fonction, ou si on
lui assigne une valeur sans l’avoir définie au préalable
au sein d’une fonction, la portée sera globale.
39 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
Les variables en JavaScript
5.2. La portées d’une variable
Variable globale
<script>
function prenom()
{
prenom = "Laye";
}
function afficherMessage()
{
alert("Bonjour "+prenom+" "+nom+" !");
}
var nom="DIOUF";
prenom();
afficherMessage();
</script>
40 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT

Les variables en JavaScript

5.2. La portées d’une variable
La portée d’une variable (ou scope) est le contexte
dans lequel cette variable pourra être utilisée.
Variable locale
Si la variable est définie au sein d’une fonction, la portée sera locale:
la variable ne sera disponible qu’au sein de la fonction.

41 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
Les variables en JavaScript
5.2. La portées d’une variable
Variable locale
<script>
function prenom(){
prenom = "Laye";
var nom="Riadh";
alert("Bonjour "+prenom+" "+nom+" !");
}
prenom();
if (typeof nom==='undefined') alert("La variable nom n'existe pas");
if (typeof prenom==='undefined') alert("La variable prenom n'existe pas");
</script>
42 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les variables en JavaScript
5.2. La portées d’une variable
Exemple n°1

43 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les variables en JavaScript
5.2. La portées d’une variable
Exemple n°2

44 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les variables en JavaScript
5.3. En complément
Deux façons de déclarer une variable

45 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.1. Les opérateurs arithmétiques
Les opérateurs arithmétiques utilisent des valeurs numériques
comme opérandes et renvoient une valeur numérique.

46 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.2. Les opérateurs de comparaison

47 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.3. Les opérateurs booléens
Le type booléen ne peut prendre que les valeurs true ou false.

48 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.4. Les opérateurs associatifs
Ce sont les opérateurs qui réalisent un calcul dans lequel une
variable intervient des deux côtés du signe =.

49 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.5. Les opérateurs d’incrémentation
Cet opérateur d’incrémentation est très utilisé pour faire varier
d’une unité les compteurs implémentés dans le code.
Par exemple pour une valeur de départ x = 0,
Au premier passage x++ vaut 1 (x=x + 1 ou 1=0 + 1).
Au second passage, x++ vaut 2 (x=x +1 ou 2=1 + 1).
Au troisième passage, x++ vaut 3 (x=x +1 ou 3=2 + 1).
Et ainsi de suite.

50 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.5. Les opérateurs d’incrémentation
Cet opérateur d’incrémentation est très utilisé pour faire varier
d’une unité les compteurs implémentés dans le code.

51 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.6. Les opérateurs de concaténation
Généralement utilisé avec des chaînes de caractères, cet
opérateur ajoute une chaîne de caractères à la suite d’une autre
chaîne de caractères.
Si vous concaténez des chaînes de caractères il ne faut pas
oublier les espaces au début ou à la fin de chacune d’elles sous
peine de coller les chaînes.

52 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.7. Exercice 01:
Énoncé :
Créer une page HTML qui contient un formulaire qui
contient à son tour deux zones de texte et un bouton
de commande.
Créer une première fonction en javascript qui vous permet
de permuter le contenue des deux zones de texte sous
l’événement onclick du bouton.
Le contenu doit être mit dans un fieldset dont la légende
est "Permutation"
Créer une deuxième fonction pour mettre le focus au première
zone de texte lors du chargement de la page
Voici le schémas suivant décrit le résultat attendu
53 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les opérateurs en JavaScript
1.7. Exercice d’application
Énoncé :
Créer une page HTML permettant de créer une
calculatrice avec 4 opérateurs de base et d’afficher
le résultat dans une zone de texte.
Le schémas suivant décrit le résultat qui sera
obtenu

54 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les évènements en JavaScript
1. Les événements
Un des principaux intérêts de JavaScript réside dans la possibilité
de programmer les réactions du navigateur face aux actions de
l’utilisateur.
Les événements sont des actions de l’utilisateur, qui vont pouvoir
donner lieu à une interactivité.
Les événements correspondent à des actions effectuées soit par
un utilisateur, soit par le navigateur lui-même.

55 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les évènements en JavaScript
2. Liste de quelques attributs
Un des principaux intérêts de JavaScript réside dans la possibilité
de programmer les réactions du navigateur face aux actions de
l’utilisateur.
Les événements sont des actions de l’utilisateur, qui vont pouvoir
donner lieu à une interactivité.
Les événements correspondent à des actions effectuées soit par
un utilisateur, soit par le navigateur lui-même.

56 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les évènements en JavaScript
2. Liste de quelques attributs
Evénements Objets concernés
change Select, Submit, Text, TextArea
click Button, document, Checkbox, Link, Radio, Reset, Select, Submit
dblclick document, Link
keydown document, Image, Link, TextArea
keypress document, Image, Link, TextArea
keyup document, Image, Link, TextArea
load Image, window
mousedown Button, document, Link
mouseout Link
mouseover Link
mouseup Button, document, Link
57 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les évènements en JavaScript
3. Exemple

58 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les chaines de caractères en
JavaScript
1. Les chaines de caractères
Tous les langages de programmation prévoient une gestion des
chaînes de caractères. JavaScript est particulièrement adapté
pour le traitement des chaînes.
2. La déclaration
Pour déclarer une chaine de caractère on utilise les séparateurs
guillemets (") ou apostrophe (').

59 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les chaines de caractères en
JavaScript
3. Les opérations sur les chaines de caractères

var str1="Bonjour à tous !";

var str2='Bonjour à tous !';
console.log(str1);
console.log(str2);

60 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les chaines de caractères en
JavaScript
3. Les opérations sur les chaines de caractères
3.1. La concaténation
La concaténation entre chaine se fait par le signe (+) ou str.concat()
var str1="Bonjour";
var str2='à tous !';
var str3=str1 + =" "; str2;
console.log(str3);

61 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les chaines de caractères en
JavaScript
3. Les opérations sur les chaines de caractères
Obtenir la longueur d’une chaine str.length
Rechercher dans une chaine chartAt() : str.chartAt(index)
Extraire une chaine dans une autre str.substring(start,end)
var date = "03/05/2023";
var jour = date.substring(0,2);
var mois = date.substring(3,5);
var annee = date.substring(6,10);
62 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les chaines de caractères en JavaScript
3. Les opérations sur les chaines de caractères
Convertir une chaine en minuscule ou en majuscule str.toLowerCase(), str.toUpperCase()
var str="Bonjour BOUBACAR";
var str2=str.toUpperCase();
var str3=str.toLowerCase();
document.write(str + "<br>");
document.write(str2 + "<br>");
document.write(str3 + "<br>");
Comparer deux chaines
Pour comparer deux chaines utiliser l’opérateur ===. Cette opération renvoie une valeur
booléenne : true si les deux chaînes sont égales, false sinon
Il existe un autre opérateur de comparaison,==, dont l’utilisation en JavaScript est déconseillée.

63 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en JavaScript
1. Les conditions
1.2. La conditions if else
// La condition toujours entre parenthèses
if ( condition ) une_seule_instruction ;

if ( condition ) {
// Un bloc = une ou plusieurs instructions
// entre une paire d'accolades
instruction_1 ;
instruction_2 ;
}

64 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en JavaScript
1. Les conditions
1.1. Les conditions else
if ( condition ) {
instruction_1 ;

}
else if {
instruction_2 ;
}
else {
instruction_3 ;
}

65 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
Exercices 1:
Ecrire un programme en Javascript dans une page html
permettant de saisir trois chiffres et afficher le max de ses trois
chiffres.

66 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
Exercices 2:
Créer une page html avec un programme en javascript permettant
:
Si l’heure est inférieure à 20h00 afficher "Bonjour " sinon
"Bonsoir"

67 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
Exercices 3:
Créer une page HTML5, contenant un formulaire qui demande à
un visiteur d’entrer un nombre compris entre 0 et 99
Un script JavaScript doit annoncer si le nombre saisie est
inférieur, égal ou supérieur 80

68 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en JavaScript
1. Les conditions
1.2. La structure switch
Lorsque l’exécution atteint le mot clé break , il sort du bloc. Ce qui arrêtera l’exécution du code à l’intérieur du bloc.
switch (expression)
{
case valeur1 :
exécution du code block niveau 1
break;
exécution du code block niveau n
case valeur n :
break;
default :
exécution du code block si aucune des conditions n’est pas vérifier
}
69 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en JavaScript
1.2. La structure switch exemple 1:

70 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en JavaScript
1.2. La structure switch exemple 2:

71 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
2. Les boucles
2.1. La boucle for
La boucle permet de répéter un certain nombre de fois un ensemble d’instructions.
La boucle est introduite par le mot-clé for..
for (initialisation;condition;incrementation)
{
instructions
}

72 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
2. Les boucles
2.1. La boucle for

73 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
2. Les boucles
2.2. La boucle while or do while
La boucle permet de répéter un certain nombre de fois un ensemble
d’instructions.
while (var<value) do
La boucle est introduite par le mot-clé while or do while.
{ {
instructions; instructions;
} } while (var<value)

74 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
2. Les boucles
2.2. La boucle while or do while

75 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
2. Les boucles
2.2. La boucle while or do while

76 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 Les conditions et les boucles en
JavaScript
Exercices:

77 |
JavaScript . 2023
EXERCICES
 LES BASES DE JAVASCRIPT
 La conditions en JavaScript : if Exemple
1:
1. Applications : la structure if
Exercices 1:

79 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 La conditions en JavaScript : if Exemple
2:
1. Applications : la structure if
Exercices 1:

80 |
JavaScript . 2023
 LES BASES DE JAVASCRIPT
 La conditions en JavaScript : if Exemple
3:
1. Applications : la structure if
Exercices 1:

81 |
JavaScript . 2023