JavaScript Cours

Chapitre 3
Javascript
Réalisé par:
Mme Amira SOLTANI
1
INTRODUCTION
▪ JavaScript est le langage de script le plus utilisé. Il possède le plus
grand écosystème de bibliothèques de tous les langages de
programmation.
▪ JavaScript est le langage de base du Web et le seul langage de
programmation qui peut fonctionner dans tous les principaux
navigateurs Web.
▪ Les programmes dans JS sont appelés scripts. Ils peuvent être
écrits directement dans le code HTML d’une page Web et
s’exécuter automatiquement lors du chargement de la page.
▪ NB: JavaScript n'a rien à voir avec Java.
2
INTRODUCTION
▪ JavaScript peut faire tout: la manipulation de la page Web,
l'interaction avec l'utilisateur et le serveur Web.
▪ Par exemple, JavaScript est capable de:
✓ Ajouter du nouveau HTML à la page, changer le contenu existant,
modifier les styles.
✓ Réagir aux actions de l'utilisateur, exécuter des actions lors des
clics de souris, les mouvements du pointeur, les pressions sur les
touches.
✓ Envoyer des requêtes sur le réseau à des serveurs distants,
télécharger des fichiers.
✓ Obtenir et définir des cookies, afficher des messages à l’utilisateur.
3
INTÉGRATION DE JAVASCRIPT DANS UNE PAGE HTML
▪ En HTML, le code JavaScript doit être inséré entre les balises
<script> de début et de fin.
▪ Les scripts (comme celui-ci) peuvent être placés dans le <head>,
ou juste avant la balise de fermeture de la section <body> d'une
page HTML.
▪ NB: Il est cependant recommandé de les insérer juste avant la
balise </body>, afin que la page puisse charger tous les autres
éléments HTML avant le JS.
4
▪ On peut également placer des scripts dans des fichiers externes,
cela est pratique lorsque le même code est destiné à être utilisé
par différentes pages web, et surtout pour respecter le principe de
conception «Separation of Concern».
▪ Ainsi, en conservant nos fichiers HTML pour les structures, Les
scripts seront conservés dans des fichiers qui leur sont propres. Ce
sont des fichiers JavaScript qui auront l'extension « .js ».
<script src="myScriptFile.js"></script>
5
ALERT, PROMPT & CONFIRM
▪ Il existe plusieurs méthodes pour créer une sortie JavaScript et / ou
récupérer des données (auprès de l'utilisateur). Ils modifient ou
remplacent le HTML existant, aident au débogage ou récupèrent le
contenu HTML:
▪ Alert() est une fonction simple pour afficher un message dans une
boîte de dialogue (également appelée boîte d'alerte).
▪ Prompt() La méthode alert() ne peut pas interagir avec le visiteur.
Pour l’interaction avec l'utilisateur, nous utilisons prompt(), qui
demande au visiteur de saisir certaines informations et les stocke
dans une variable.
▪ confirm() affiche une boîte de dialogue avec deux boutons, OK et
Annuler et un texte comme paramètre. Si l'utilisateur clique sur le
bouton OK, confirm() renvoie true et en cliquant sur le bouton
Cancel, confirm() renvoie false.
6
CONSOLE.LOG()
▪ La fonction console.log() de JavaScript est principalement utilisée
pour le débogage de code car elle permet au JavaScript
d'imprimer la sortie sur la console.
7
LES COMMENTAIRES
▪ Les commentaires nous permettent d'écrire des éléments qui
seront ignorés par l'interpréteur et qui ne seront pas exécutés en
tant que code.
▪ Pour y parvenir, nous utilisons:
✓ «//» pour commenter quoi que ce soit sur la même ligne après la
double barre oblique.
✓ «/ *» & «* /» Pour commenter plusieurs lignes.
8
TYPES DE DONNÉES
▪ La plupart des langages de programmation vous aident à créer des
valeurs qui symbolisent un nombre, un caractère dans un texte ou
un texte plus long. Vous pouvez également symboliser le concept
de valeurs vraies et fausses à l'aide de booléens.
▪ En JavaScript, il existe six types primitifs:
✓ booléen (vrai ou faux)
✓ nombre (y compris les nombres entiers comme 1, -2 et les nombres
à virgule flottante comme 3.14, 2e-3)
✓ string (Les chaînes sont utilisées pour stocker du texte. Les chaînes
doivent être entre guillemets doubles ou simples.)
✓ null (null a une valeur: null)
✓ undefined (une variable sans valeur n'est pas définie)
✓ Symbole
9
TYPES DE DONNÉES
▪ Remarquez comment typeof(null) imprime incorrectement
"object", eh bien c'est un bogue dans JS. Ce qui nous amène
au deuxième type de types de données en JavaScript:
▪ Type composite ou non primitif, comme l'objet que nous
venons de voir.
▪ Les objets peuvent être: «Object literals», «Arrays»,
«Function», «RegEx», «Dates» ...
console.log(typeof(true)) // prints boolean
console.log(typeof(9000)) // prints number
console.log(typeof(‘Hello’)) // prints string
console.log(typeof(anUndefinedVar)) // prints undefined
console.log(typeof(null)) // prints object
10
TYPES DE DONNÉES
▪ Un objet littéral en JavaScript est une liste séparée par des virgules de
paires clé-valeur entourées d'accolades. Ces valeurs peuvent référencer
tout type de données, y compris les objets et/ou des valeurs primitives.
▪ Nous couvrirons les objets (& tableaux) plus en détail dans ce cours, pour
l'instant gardez simplement à l'esprit que les objets littéraux peuvent
encapsuler une multitude de données, les enfermer dans un package
ordonné et avoir la structure indiquée ci-dessous.
var person1 = {
name: “foulan”,
age: 9000,
isStudent: true }
11
LES OPÉRATEURS ARITHMÉTIQUES
▪ La gestion des entiers est simple. Vous avez les quatre opérations
arithmétiques (+, -, *, /) disponibles pour l'addition, la soustraction, la
multiplication et la division respectivement.
▪ L'opérateur% est appelé modulo. a% b renvoie le reste de la division a / b.
Dans notre exemple, 7/5 vaut 1 et le reste vaut 2. La valeur 2 est renvoyée.
▪ L'opérateur ** est appelé l'opérateur exponentiel. 5 ** 2 est cinq élevé à la
deuxième puissance (c'est 25 au fait).
12
LES OPÉRATEURS ARITHMÉTIQUES
▪ La gestion des entiers est simple. Vous avez les quatre opérations arithmétiques (+, -, *, /)
disponibles pour l'addition, la soustraction, la multiplication et la division
respectivement.
▪ L'opérateur% est appelé modulo. a% b renvoie le reste de la division a / b. Dans notre
exemple, 7/5 vaut 1 et le reste vaut 2. La valeur 2 est renvoyée.
▪ L'opérateur ** est appelé l'opérateur exponentiel. 5 ** 2 est cinq élevé à la deuxième
puissance (c'est 25 au fait).
▪ NaN: La division 0/0 ou l'utilisation de types incompatibles crée un numéro spécial
appelé « Not A Number » ou NaN.
▪ Infinity: JavaScript enregistre de très grands nombres comme infini. Par exemple, dix à
la puissance 309 est représenté par l'infini. La division par zéro donne également l'infini.
//Nan
console.log(0 / 0);
console.log('Some random string' * 2);
// Infinity
console.log(1 / 0); console.log(Infinity * Infinity);
console.log(1e+309);
13
OPÉRATEUR D’AFFECTATION:
▪ Un opérateur d'affectation affecte une valeur à son opérande gauche en

fonction de la valeur de son opérande droit.
▪ Le premier opérande doit être une variable et l'opérateur d'affectation de
base est égal (=), qui affecte la valeur de son opérande droit à son
opérande gauche. Autrement dit, a = b attribue la valeur de b à a.
var a = 5 // assigned a value of 5 to a

var b = a // assigned a (value of 5) to b, now b has a value of 5
var c = b // assigned b (value of 5) to c, now c has a value of 5
console.log(c) // prints 5
14
OPÉRATEUR D’AFFECTATION:
▪ Nous pouvons combiner des opérateurs arithmétiques avec l'opérateur

d'affectation standard "=" et créer des annotations abrégées pour les
opérations standard:
Sténographie Expression
a +=b a=a+b
a -= b a=a-b
a *= b a=a*b
a/=b a=a/b
a %= b a=a%b
15
TRUTHY & FALSY
▪ Un objet de tout type (y compris les fonctions, les tableaux, les objets
RegExp, etc.) est toujours vrai. Le moyen le plus simple de déterminer si
quelque chose est vrai est de déterminer qu’il n’est pas faux.
▪ Il n'y a que six valeurs fausses en JavaScript: undefined, null, NaN, 0, ""
(chaîne vide) et false.
16
OPÉRATEUR LOGIQUES ET BOOLÉENS
▪ En JavaScript les opérateurs logiques AND et OR ne renvoient ni vrai ni
faux! Plus précisément:
Opérateur Expression Description
AND (&&) a&&b Renvoie la première valeur si elle est fausse,

sinon renvoie la deuxième valeur.
OR(||) a||b Renvoie la première valeur si vraie, sinon
renvoie la seconde valeur.
17
OPÉRATEURS SUR LES CHAINES DE CARACTÈRES
▪ Lorsque vous travaillez sur des chaînes en JavaScript, vous devez parfois
joindre deux chaînes ou plus en une seule chaîne. La jonction de plusieurs
chaînes ensemble est appelée concaténation.
▪ L'opérateur de concaténation (+) concatène deux ou plusieurs valeurs de
chaîne ensemble et renvoie une autre chaîne qui est l'union des deux
chaînes d'opérande.
▪ L'opérateur d'affectation abrégée (+ =) peut également être utilisé pour
concaténer des chaînes.
var x = "google";
x += "." + "com"
console.log(x) // prints “google.com”
18
OPÉRATEURS SUR LES CHAINES DE CARACTÈRES
▪ En ES6, il existe une nouvelle façon de concaténer des chaînes.
▪ Les chaînes de modèle utilisent des accents inversés (``) plutôt que les
guillemets simples ou doubles auxquels nous sommes habitués avec des
chaînes régulières.
▪ L'un de leurs premiers avantages réels est la substitution de chaînes. La
substitution nous permet de prendre n'importe quelle expression JavaScript
valide (y compris, par exemple, l'ajout de variables) et de l'insérer dans un
littéral de modèle en utilisant la syntaxe $ {}, le résultat sera affiché dans le
cadre de la même chaîne.
var name = "Lucy";

console.log(`Yo, ${name}!`) // prints “Yo, Lucy!”
19
LA MÉTHODE SPLIT
▪ La méthode split() divise une chaîne de caractères en une liste ordonnée de sous-
chaînes, place ces sous-chaînes dans un tableau et retourne le tableau.
▪ La division est effectuée en recherchant un motif ; où le motif est fourni comme
premier paramètre dans l'appel de la méthode.
20
LA MÉTHODE JOIN
▪ La méthode join() crée et renvoie une nouvelle chaîne de caractères en

concaténant tous les éléments d'un tableau.
▪ La concaténation utilise la virgule ou une autre chaîne, fournie en argument,
comme séparateur.
21
LES FONCTIONS
▪ Une fonction est essentiellement un morceau de code qui peut être réutilisé
sans avoir à l'écrire encore et encore.
▪ Pensez à une fonction comme une fonction mathématique qui vous donne
une relation entre les variables d'entrée et de sortie.
▪ L'instruction return renvoie la valeur de la fonction. Lors de l'appel de la
fonction « add » avec les arguments a et b, elle calcule la valeur a + b et la
renvoie.
Exemple
function add(a, b) {
return a + b;
}
console.log(add( 5,2));
22
LES PARAMÈTRES DES FONCTIONS
▪ Les paramètres sont des variables répertoriées dans le cadre de la
définition de fonction.
▪ Les arguments sont des valeurs transmises à la fonction lorsqu'elle est
appelée.
Function add( a, b ) {
return a + b;
}
console.log(add(0,1)) // prints 1
console.log(add()) // prints NaN
Function add( a = 0, b = 1 ) {
return a + b;
}
console.log(add()) /* prints 1 even though no arguments were given to this function call
*/
23
FONCTIONS D'APPEL ET DÉCLARATION DE RETOUR
▪ «Appel » ou «Exécution» sont des termes utilisés de manière
interchangeable lors de l'exécution d'une fonction prédéfinie. Les fonctions
peuvent être appelées en utilisant leurs références (≃ leurs noms). Et les
arguments nécessaires sont passés à la fonction pendant cette phase (voir
l’exemple ci-dessous).
▪ Remarque: lorsqu'une fonction ne renvoie rien, sa valeur de retour devient
indéfinie.
// 1_Defining some functions
function add( a, b ){
return a+b;
}
Function subtract ( a, b ) {
return a-b;
}
function multiply( a, b ) {
a*b;
}// notice the absence of “return” here }
// 2_Calling the predefined functions
add(2, 3) // returns 5
subtract(2, 3) // returns -1
multiply(2, 3) // returns undefined
24
FLUX DE PROGRAMME
▪ Dans le développement de logiciels, il existe trois types de structures de
contrôle:
1. Séquence: rédiger les instructions les unes après les autres.
2. Sélection: exécuter un ensemble d'instructions ou un autre.
3. Itération: exécuter un ensemble d'instructions un nombre fini ou infini de
fois.
25
STRUCTURE CONDITIONNELLE IF:
▪ La structure la plus basique d'une exécution conditionnelle est:
if (condition) {
Instruction 1;
Instruction 2;
Etc..;
}
▪ Les instructions à l'intérieur de la structure if ne sont exécutées que si la
condition est vrai. // 1_Defining the function
function checkIfNumber( x ){
if ( typeof x === 'number’ ){
console.log( x + ' is a number.’ );
}
}
// 2_Calling the function
checkIfNumber(5) // prints “5 is a number.”
checkIfNumber(“5”) // doesn't do anything, “5” was passed here as a string (non-
numeric value).
checkIfNumber() // doesn’t do anything, no argument was passed to the function
26
STRUCTURE « ELSE »:
▪ L’instruction dans la structure « else » n'est exécutée que si la condition n'est
pas vraie.
// 1_Defining the function

function checkIfNumber( x ){
if ( typeof x === 'number' ){
console.log( x + ' is a number.' );
}
else {
console.log("Oops that's not a number.");
}
}
checkIfNumber(5) // prints “5 is a number.”
checkIfNumber(“5”) // prints “Oops that's not a number”
checkIfNumber() // prints “Oops that's not a number
27
STRUCTURE « ELSE IF»:
▪ Si la première condition échoue, il testera la condition suivante else if, si
cela échoue aussi, puis la suivante et ainsi de suite jusqu'à ce que tout le
reste échoue et il exécutera finalement l'instruction else.
function decodeColor( code ) {
if ( code === 1 ) {
console.log( 'Red’ );
}
else if ( code === 2 ) {
console.log( 'Yellow' );
}
console.log( 'Green' );
}
else {
console.log( 'Unknown code' ); }
}
decodeColor(1) // prints Red
decodeColor (2) // prints Yellow
decodeColor(3) // prints Green
decodeColor('blah') // prints Unknown code
28
STRUCTURE « ELSE IF»:
▪ Si la première condition échoue, il testera la condition suivante else if, si
cela échoue aussi, puis la suivante et ainsi de suite jusqu'à ce que tout le
reste échoue et il exécutera finalement l'instruction else.
if ( code === 1 ) {
console.log( 'Red’ );
}
console.log( 'Yellow' );
}
console.log( 'Green' );
}
else {
console.log( 'Unknown code' ); }
}
decodeColor (2) // prints Yellow
decodeColor(3) // prints Green
decodeColor('blah') // prints Unknown code
29
STRUCTURE « SWITCH»:
▪ Les longues chaînes d'instructions if-else peuvent devenir fastidieuses très
rapidement lors de la gestion de plusieurs scénarios.

switch( code) {
case 1: console.log( 'Red' );
break;
case 2: console.log( 'Yellow' );
break;
case "x": console.log( 'Green' );
break;
default: console.log( 'Unknown code' ); }
}
decodeColor(2) // prints Yellow
decodeColor("x") // prints Green
decodeColor(3) // prints Unknown code
30
LE BOUCLE « WHILE »
▪ Une boucle while vérifiera d'abord sa condition, si elle est évaluée à true,
elle exécutera l'instruction dans son corps. Ensuite, revérifie la condition et
continue à réexécuter la ou les instructions tant que la condition est évaluée
à vrai.
▪ Lorsque ou si la condition est évaluée à false, l'instruction while n'exécutera
aucun code à l'intérieur de son corps et le flux continuera simplement à
exécuter le reste de notre code.
// Let’s sum the values of a small array
var numbers = [19, 65, 1, 2, 6, 1, 9, 9, 2, 1];
var sum = 0;
var i = 0;
while ( i < numbers.length ) {
sum += numbers[i]; i += 1;
}
console.log( 'The loop was executed ' + i + ' times' ); // prints The loop was
executed 10 times
console.log(sum); // prints 115
31
LA BOUCLE « DO…WHILE »
▪ La boucle do-while exécute le corps de la boucle au moins une fois et

vérifie la condition après l'exécution et avant la fin.
var numbers = [19, 65, 1, 2, 6, 1, 9, 9, 2, 1];
var sum = 0;
var i = 0;
do {
sum += numbers[i]; i += 1;
}
while ( i < numbers.length )
console.log( 'The loop was executed ' + i + ' times' ); // prints The loop was
executed 10 times
console.log(sum); // prints 115
32
LES BOUCLE « FOR…IN» ET « FOR…OF»
▪ For…in: énumère tous les indices disponibles des valeurs présentes dans
le tableau par ordre croissant.
▪ For…of: énumère les valeurs.

var numbers = [19, 65, 1, 2, 6, 1, 9, 9, 2, 1];
var sum = 0; // Using the for… in loop
for (var i in numbers) {
sum += numbers[i];
}
console.log(sum) // prints 115 // Let’s sum the values of a small
array
var numbers = [19, 65, 1, 2, 6, 1, 9, 9, 2, 1];
var sum = 0; // Using the for… of loop
for ( var value of numbers) {
sum += value;
}
console.log(sum) // prints 115
33
LES TABLEAUX
▪ Un tableau est une liste ordonnée d'éléments. Mieux encore, en JavaScript ces
éléments ne doivent pas nécessairement être du même type
// Declaring an array called storage containing 3 items of different types:
var storage = [ 1, 'Monday', null ];
// Accessing elements
console.log(storage[0]); // prints 1
console.log(storage[6]); // prints undefined
// Array length
console.log(storage.length) // prints 3
▪ Accès aux éléments: Chaque élément du tableau est accessible à l'aide d'un
index partant de zéro.
▪ Les tableaux ont des longueurs reflétant le nombre d'éléments qu'ils
contiennent. Gardez simplement à l'esprit que pour accéder au dernier élément
d'un tableau, nous devrons utiliser arrayName.length-1 comme index.
34
AJOUT ET SUPPRESSION D’ÉLÉMENTS DANS UN TABLEAU
▪ .push ajoute des éléments à la fin du tableau.
▪ .unshift ajoute des éléments au début du tableau.
▪ .pop supprime le dernier élément du tableau et le renvoie.
▪ .shift supprime le premier élément du tableau et le renvoie.
var days=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday’];
console.log(days); // prints ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday’]
days.push( 'Saturday' );
console.log(days); // prints ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
'Saturday’ ]
days.unshift( 'Sunday’ );
console.log(days); // prints ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday’ ]
days.pop();
console.log(days); // prints ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday’ ]
days.shift();
console.log(days); // prints ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]
35
INTRODUCTION AUX OBJETS
▪ Les objets représentent une partie fondamentale de la plupart des programmes
JavaScript.
▪ Par exemple, un objet de compte utilisateur peut contenir des données telles
que des noms d'utilisateur, des mots de passe et des adresses e-mail.
36
ACCÈS AUX PROPRIÉTÉS D’UN OBJET:
▪ Il existe deux façons d’accéder aux propriétés d’un objet:
▪ Notation par points. : Dans notre exemple, si nous voulons récupérer la valeur
de la propriété de « weapon », nous pouvons le faire en tapant le nom de
variable de l’objet, suivi d’un point (.) et du nom de la propriété.
▪ Notation entre parenthèses[] : Nous pouvons récupérer les mêmes données
avec la notation entre crochets d'objet. La syntaxe de la notation entre crochets
est constituée de deux crochets ([]) encapsulant le nom de la propriété.
// Initializing a gimli object
var gimli = {
name: "Gimli",
race: "dwarf",
weapon: "axe",
};
// Retrieving the value of the weapon property using the dot notation
console.log(gimli.weapon); // prints “axe”
// Retrieving the value of the weapon property using the bracket notation
console.log(gimli["weapon"]); // prints “axe”
37
AJOUT ET MODIFICATION DES PROPRIÉTÉS DES OBJETS
▪ Afin d'ajouter une nouvelle propriété à un objet, vous affecteriez une nouvelle
valeur à une propriété avec l'opérateur d'affectation (=).
▪ Par exemple, nous pouvons ajouter un type de données numérique à l'objet
« gimli » en tant que propriété « age ». La notation par points et crochets peut
être utilisée pour ajouter une nouvelle propriété d'objet.

var gimli = {
name: "Gimli",
race: "dwarf",
: "axe",
};
// Adding a new age property to gimli using the dot notation
gimli.age = 139;
// Adding new age property to gimli using the dot notation
gimli["age"] = 139;
38
AJOUT ET MODIFICATION DES PROPRIÉTÉS DES OBJETS
▪ En utilisant les mêmes méthodes que celles mentionnées précédemment, la

propriété d’un objet peut être modifiée en attribuant une nouvelle valeur à une
propriété existante.
// Updating weapon from axe to battle axe
gimli.weapon = "epic battle axe";
39
SUPPRESSION DES PROPRIÉTÉS D'OBJET
▪ Afin de supprimer une propriété d'un objet, vous utiliserez le mot-clé « delete ».
C’est l’opérateur qui supprime une propriété d'un objet.

var gimli = {
name: "Gimli",
race: "dwarf",
weapon: "axe",
};
// Removing weapon from gimli
delete gimli.weapon; // Output: true
// We can test the output of gimli to see if it succeeded.
console.log(gimli); // prints {name: "Gimli", race: "dwarf", greet: ƒ }
40

JavaScript Cours

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript Cours

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JavaScript Cours

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 3

▪ Un opérateur d'affectation affecte une valeur à son opérande gauche en

var a = 5 // assigned a value of 5 to a

▪ Nous pouvons combiner des opérateurs arithmétiques avec l'opérateur

Opérateur Expression Description

AND (&&) a&&b Renvoie la première valeur si elle est fausse,

var name = "Lucy";

▪ La méthode join() crée et renvoie une nouvelle chaîne de caractères en

// 1_Defining the function

// 1_Defining the function

▪ La boucle do-while exécute le corps de la boucle au moins une fois et

// Let’s sum the values of a small array

// Initializing a gimli object

▪ En utilisant les mêmes méthodes que celles mentionnées précédemment, la

// Initializing a gimli object

Vous aimerez peut-être aussi