Partie 02
Les bases de JavaScript
18
Dans cette partie vous allez apprendre
• JavaScript sensible à la casse
• Les commentaires en JavaScript
• Afficher les données en JavaScript
• Les types de données
• Les chaînes de caractères en JavaScript
• Les méthodes de manipulation des nombres
• Les instructions conditionnelles dans JavaScript
• Les boucles en JavaScript
19
JavaScript sensible à la casse
JavaScript est un langage sensible à la casse
• Dans JavaScript, les noms de variable, mots-clés, méthodes,
propriétés d'objet et gestionnaires d'événements sont tous sensibles
à la casse.
• Pa exemple la fonction alert() qui permet d’afficher une boite de
dialogue, son nom doit être composé de lettres minuscules :
• La fonction Alert() est différente de alert(), il n’affiche rien, aussi
la variable str est différente de Str.
Tapez F12 pour afficher l’erreur
20
Les commentaires en JavaScript
Les commentaires
• Il existe deux types de commentaires en JavaScript :
1. Commentaire sur une ligne :
2. Commentaire sur plusieurs lignes :
21
Afficher les données en JavaScript
Les objets d’une page
• JavaScript est un langage orienté objet. Il va ainsi diviser la page
affichée à l’écran en objets mais surtout, va vous permettre
d’accéder à ces objets et de les manipuler :
window
document
form
button
22
Afficher les données en JavaScript
Les objets d’une page (suite)
• Donc la hiérarchie des objets est :
fenêtre>document>formulaire>texte, option, bouton,…
• Par exemple pour accéder à l’objet bouton option (name="radio")
"Masculin" qui se trouve dans un formulaire (name="fomr1"), on
écrit : (window).[Link][0].
• Nous avons mis l’objet window entre parenthèses car window
occupe toujours la première place dans la hiérarchie des objets. Il
est repris par défaut en JavaScript et devient donc facultatif. Cela
veut dire qu’on peut écrire directement : [Link][0]
23
Afficher les données en JavaScript
Affichage de données
• JavaScript peut afficher des données de différentes manières :
▪ Écrire dans un élément HTML à l'aide de innerHTML.
▪ Écrire dans la sortie du document HTML en utilisant [Link]().
▪ Écrire dans un message d’alerte en utilisant [Link]().
• JavaScript dispose aussi de d'autres méthodes pour saisir des
données ou afficher une boite de confirmation :
▪ La méthode [Link]() affiche une boîte de dialogue qui invite
l'utilisateur à saisir des données.
▪ La méthode [Link]() affiche une boîte de dialogue de
confirmation.
24
Afficher les données en JavaScript
Utilisation de innerHTML
• Pour accéder à un élément HTML, JavaScript peut utiliser la
méthode [Link]("id"):
▪ L'attribut id définit l'élément HTML.
▪ La propriété innerHTML définit le contenu HTML
• Exemple :
25
Afficher les données en JavaScript
Utilisation de [Link]()
• Pour les tests, il est pratique d’utiliser [Link]() qui
permet d’afficher des données directement dans le document HTML.
• Exemple :
26
Afficher les données en JavaScript
Utilisation de [Link]() (Suite)
• L'utilisation de [Link]() après le chargement du
document HTML supprimera tout son contenu existant.
• Exemple :
27
Afficher les données en JavaScript
Utilisation de [Link]()
• Utiliser [Link]() pour afficher des données sous forme de
boîte d’alerte.
• Exemple :
28
Afficher les données en JavaScript
Utilisation de [Link]()
• utiliser la méthode [Link]() pour inviter l'utilisateur à
saisir des données. Sa syntaxe est : prompt(text, defaultText),
avec :
▪ Le paramètre text est obligatoire, c'est le texte à afficher dans la boîte
de dialogue.
▪ Le paramètre defaultText est optionnel, c'est texte par défaut si
l'utilisateur ne saisit acune données
29
Afficher les données en JavaScript
Utilisation de [Link]()
• utiliser la méthode [Link]() affiche une boite de
confirmation avec deux boutons OK et Annuler. Sa syntaxe est :
confirm(message), avec message est paramètre optionnel, il
spécifie le texte à afficher dans la zone de confirmation.
• Cette méthode retourne à true si l'utilisateur clique sur "OK", elle
retourne à false si l'utilisateur clique sur "Annuler" ou s'il ferme la
boite de confirmation.
30
Les types de données
Les types de données en JavaScript
• Les différents types de données en JavaScript :
▪ Nombres : -5, 12 , 5.234.
▪ Booléen : true, false.
▪ Chaîne : "MyString", 'MyString‘.
• Utiliser le mot-clé var pour déclarer n’importe quel type de
données. En fonction de la valeur attribuée, le type de la variable
est déduit : JavaScript est typé dynamiquement.
• En C #, vous ne pouvez pas affecter une valeur de chaîne à une
variable entière :
31
Les types de données
Les types de données en JavaScript (Suite 1)
• Quand un opérateur + est utilisé avec 2 nombres, JavaScripts
effectue l’addition de ces nombres :
Output
30
• Quand un opérateur + est utilisé avec 2 chaînes, JavaScripts
effectue la concaténation de ces deux chaînes :
Output
Hello JavaScript
32
Les types de données
Les types de données en JavaScript (Suite 2)
• Quand un opérateur + est utilisé entre une chaîne et un nombre,
JavaScripts effectue la concaténation :
Output
Number is 10
Output
5010
Output
x1=523 x2=55
33
Les types de données
Les types de données en JavaScript (Suite 3)
• Quand un opérateur - est utilisé entre une chaîne et un nombre, la
valeur numérique n'est pas convertie en chaîne :
Output
40
Output
10
Output
NaN : Not a Number
34
Les types de données
Les types de données en JavaScript (Suite 4)
• La méthode typeof(myVariable) retourne le type de la variable :
35
Les chaînes de caractères en JavaScript
Conversion de chaînes en nombres
• Dans cet exemple, on va voir comment convertir en JavaScript une
chaîne de caractère en nombre :
36
Les chaînes de caractères en JavaScript
Conversion de chaînes en nombres (Suite 1)
• Utiliser la fonction parseInt() pour convertir une chaîne en entier :
La partie décimale
est perdue
• Utiliser la fonction parseFloat() pour convertir une chaîne en
nombre réel.
37
Les chaînes de caractères en JavaScript
Conversion de chaînes en nombres (Suite 2)
• Si l’une des zones de texte est vide ou contient du texte et vous
cliquez sur le bouton Add, la valeur NaN s'affiche dans la zone de
texte du résultat :
• NaN en JavaScript signifie Not-a-Number. Pour cela on va utiliser la
fonction isNaN() qui renvoie true si la valeur n'est pas un nombre
et false s’il s’agit d’un nombre :
38
Les chaînes de caractères en JavaScript
Conversion de chaînes en nombres (Suite 3)
• On peut aussi ajouter un message indiquant que les deux champs
sont obligatoires :
39
Les chaînes de caractères en JavaScript
La concaténation des chaînes de caractère
• Une chaîne est un texte est représenté en JavaScript entre simple
ou double guillemets :
• Pour concaténer des chaînes en JavaScript on utilise l’opérateur + :
Output
Hello JavaScript
• Remarque la propriété length retourne la longueur d'une chaîne
Output
Hello JavaScript
40
Les chaînes de caractères en JavaScript
Affichage du caractère simple ou double guillemets
• Si vous voulez afficher des guillemets simples dans une chaîne,
placer votre chaîne entière entre doubles guillemets et utiliser des
simples guillemets à l'intérieur de la chaîne :
Output
Welcome to 'JavaScript' Training
• Si vous voulez afficher des guillemets doubles dans une chaîne,
placer votre chaîne entière entre simples guillemets et utiliser des
doubles guillemets à l'intérieur de la chaîne :
Output
Welcome to "JavaScript" Training
• Remarque : vous pouvez aussi utiliser le caractère séquence
d'échappement "\" :
Output
Welcome to "JavaScript" Training
41
Les chaînes de caractères en JavaScript
Les méthode de manipulation des chaînes de caractère
• Voici quelques méthode de manipulation de chaînes de caractère :
• Exemples : [Link]
42
Les chaînes de caractères en JavaScript
Exemples
• Exemple 1 : extraire, la partie adresse email et la partie domaine :
43
Les chaînes de caractères en JavaScript
Exemples (Suite 1)
• Le code JavaScript de l'exemple 1 est :
44
Les chaînes de caractères en JavaScript
Exemples (Suite 2)
• Exemple 2 : récupérer le nom du domaine d'une adresse URL :
45
Les méthodes de manipulation des nombres
Conversion d'un nombre en chaîne
• La méthode [Link]() renvoie un nombre sous forme de
chaîne :
Output 123 number
123 string
123
• La méthode [Link](x) renvoie un nombre arrondi
avec la notation exponentielle sous forme d'une chaîne. Avec x est
un champ optionnel, c'est un entier entre qui indique le nombre de
chiffres après la virgule.
Output 9.123456789123457e+9
9.12e+9
9.1235e+9
46
Les méthodes de manipulation des nombres
Conversion d'un nombre en chaîne (Suite)
• La méthode [Link](x) renvoie un nombre arrondi avec
une spécification décimale sous forme d'une chaîne. Le paramètre x
est un entier optionnel qui indique le nombre de chiffres après la
virgule.
Output 10
9.66
9.656000
• La méthode [Link](x) renvoi un nombre arrondi
avec une longueur spécifiée sous forme d'une chaîne. Le paramètre
x est un entier optionnel qui représente cette longueur.
9.656
Output 9.7
9.65600
47
Les méthodes de manipulation des nombres
Conversion en nombre
• La méthode Number(object) permet de convertir le paramètre
object en nombre qui représente la valeur de l'objet.
• Le paramètre object est un objet JavaScript, il est optionnel, si
aucun argument n'est fourni, il retourne 0.
• Si la valeur ne peut pas être convertie en un nombre elle retourne à
NaN.
1
123 number
Output 0
10
10.33
NaN
NaN
48
Les méthodes de manipulation des nombres
Conversion en nombre (Suite 1)
• La méthode parseInt(string,radix) convertit une chaîne en
nombre entier, avec :
▪ L'argument string est obligatoire, il représente la chaîne à convertir.
▪ L'argument radix est optionnel, c'est un nombre (de 2 à 36) qui
représente le base de numérotation à utiliser. (2:binaire, 8:octale,
10:décimale, 16: hexadécimale).
▪ Si le paramètre radix n'est pas présent , JavaScript suppose que : si la
chaîne commence par "0x", la base est 16, si la chaîne commence par
"0", la base est 8 (octal) ,cette fonctionnalité est obsolète, si la chaîne
commence par une autre valeur, la base est 10
• Voici quelques remarques :
▪ Si la chaîne commence par un nombre suivi de caractères ou des
espaces, seul le premier numéro est renvoyé.
▪ Les espaces de début et de fin sont autorisés.
▪ Si le premier caractère ne peut pas être converti en nombre, parseInt()
renvoie NaN.
49
Les méthodes de manipulation des nombres
Conversion en nombre (Suite 2)
• Voici un exemple d'utilisation de parseInt() :
10
10
10
10
60
Output 10
NaN
NaN
10
10
8
NaN
15
15
50
Les méthodes de manipulation des nombres
Conversion en nombre (Suite 3)
• La méthode parseFloat(string) convertit la chaîne string en
nombre réel. Le paramètre string est obligatoire.
• Voici quelques remarques :
▪ Si la chaîne commence par un nombre suivi de caractères ou des
espaces, seul le premier numéro est renvoyé.
▪ Les espaces de début et de fin sont autorisés.
▪ Si le premier caractère ne peut pas être converti en nombre,
parseFloat() renvoie NaN.
10
10.33
10
10
Output 10
10.33
60.33
10.33
NaN
51
Les méthodes de manipulation des nombres
Les fonctions [Link]() et [Link]()
• La fonction [Link]() retourne un nombre aléatoire compris
entre 0 (inclus) et 1 (non inclus) :
Output
0.8174771524893147
• La fonction [Link](x) renvoie le plus grand entier qui est
inférieur ou égal au nombre x passé en paramètre. Le paramètre x
est obligatoire.
Output 5
5
-6
52
Les méthodes de manipulation des nombres
Les fonctions [Link]() et [Link]() (Suite)
• La fonction [Link]() peut être utilisé avec [Link]()
pour renvoyer des entiers aléatoires :
Output random integer from 0 to 9
random integer from 0 to 10
53
Les méthodes de manipulation des nombres
Les fonctions [Link]() et [Link]()
• La fonction [Link](x) : arrondit le nombre x à l'entier le plus
proche. Le paramètre x est obligatoire.
2
3
Output 3
-2
-2
-3
• La fonction [Link](x) renvoie le plus petit entier qui est
supérieur ou égal au nombre x passé en paramètre. Le paramètre x
est obligatoire.
1
Output 5
7
-5
54
Les méthodes de manipulation des nombres
Les fonctions [Link]() et [Link]()
• La fonction [Link](x) retourne la valeur absolue d'un nombre x,
le paramètre x est obligatoire, si x n'est pas un nombre cette
fonction retourne à NaN, ou elle retourne à 0 si x égal à null.
7.25
7.25
Output
0
0
NaN
• La fonction [Link](x) retourne la racine carrée d'un nombre x,
le paramètre x est obligatoire. Cette fonction retourne à NaN si le x
n'est pas un nombre ou si x est négatif.
Output 3
0
NaN
NaN
55
Les instructions conditionnelles dans JavaScript
L'instruction if
• Utilisez l'instruction if pour spécifier un bloc de code JavaScript à
exécuter si une condition est vraie :
56
Les instructions conditionnelles dans JavaScript
L'instruction if-else if
• Utilisez l'instruction else if pour spécifier une nouvelle condition si
la première condition est fausse:
57
Les instructions conditionnelles dans JavaScript
L'instruction switch
• Utilisez l'instruction switch pour sélectionner l'un des blocs de code
à exécuter.
• Pour améliorer la lisibilité d'un programme avec multiples, if-else if,
instructions peuvent être remplacées par une instruction switch :
58
Les instructions conditionnelles dans JavaScript
L'instruction switch (Suite)
• Si le même bloc de code est exécuté pour plusieurs cas, on peut les
combiner comme indiqué ci-dessous :
59
Les instructions conditionnelles dans JavaScript
L'Opérateur ternaire
• L'opérateur ternaire peut être utilisé comme raccourci pour
l'instruction if else :
60
Les boucles en JavaScript
Introduction
• Les boucles permettent de répéter un bloc d'instruction plusieurs
fois.
• Il existe en JavaScript 3 types de boucles :
▪ La boucle while
▪ La boucle do… while
▪ La boucle for
61
Les boucles en JavaScript
La boucle while
• La boucle while répète un bloc de code tant qu'une condition
spécifiée est vraie.
• Sa syntaxe est :
while (condition) {
code block to be executed
}
• L'exemple suivant affiche : 0,2,4, …
62
Les boucles en JavaScript
La boucle while (Suite)
• L'instruction break permet de sortir d'une instruction switch(), on
peut aussi utiliser cette instruction pour sortir d'une boucle.
• L'instruction break termine la boucle et continue à exécuter le code
après la boucle :
• L'exemple suivant affiche : 0 ,2 ,4, … 100 (Max)
63
Les boucles en JavaScript
La boucle while (Suite 1)
• L'instruction continue permet de sortir d'une itération de la boucle,
et de poursuivre vers l'itération suivante si une condition spécifiée
est remplie.
• L'exemple suivant affiche les nombres impaires entre 1 et 10 :
64
Les boucles en JavaScript
La boucle do… while
• La boucle do… while est une variante de la boucle while, elle
commence par exécuter le bloc de code une fois, avant de vérifier
condition , et elle répète l'exécution du bloc tant que la condition est
vraie.
• Sa syntaxe est :
do {
code block to be executed
} while (condition) ;
• L'exemple suivant affiche : 0,2,4, …
65
Les boucles en JavaScript
La boucle for
• La boucle for permet de parcourir un bloc de code plusieurs fois.
• Sa syntaxe est :
for (statement 1; statement 2; statement 3) {
code block to be executed
}
▪ Avec statement1 est exécuté (une fois) avant l'exécution du bloc de
code.
▪ Avec statement2 définit la condition d'exécution du bloc de code.
▪ Avec statement3 est exécuté (à chaque fois) après l'exécution du bloc
de code.
66
Les boucles en JavaScript
La boucle for (Suite)
• L'exemple suivant affiche :0,2,4 …
• On peut aussi écrire :
67