Chapitre 2: JavaScript
UP Web
AU: 2022/2023
Plan
Introduction
HTML & JavaScript
Syntaxe
Tableaux
Fonctions
2
Objectifs
• Manipuler le DOM.
• Différencier entre les événements.
• Ecrire un script en utilisant les fonctions prédéfinis,
événement…
Prérequis
• HTML
3
Introduction
• Javascript permet de rendre interactif un site internet développé en
HTML.
• Javascript est standardisé par un comité spécialisé, l'ECMA (European
Computer Manufactures Association).
• JavaScript est un langage de programmation:
– scripté (interprété́) - pas de compilateur à proprement parler.
– côté client - s’exécute dans un navigateur en général (il existe des environnements
côté serveur : NodeJS).
– asynchrone - plusieurs « morceaux » peuvent s’exécuter en parallèle.
4
Introduction
• JavaScript, permet :
– de spécifier des changements sur le document :
• sur le contenu: la structure, le style…
• en interceptant des évènements: souris, clavier, …
– échanger avec un serveur (AJAX)
– dessiner (canvas - bitmap - ou svg - vectoriel)
– se géolocaliser
– enregistrer localement du contenu
– jouer des fichiers audio ou vidéo
5
Introduction
• Utilitaires JavaScript
• On peut créer une base logicielle entièrement codée en JavaScript qui peut tourner sur
MEAN 🡺 MongoDB, Express.js, Angular.js, et Node.js au lieu de LAMP 🡺 Linux,
Apache, MySQL, PHP.
6
Introduction
ES 1 ES 3 ES 5.1 ES 7
1997 1999 2011 2016
1998 2009 2015 …
ES 2 ES 5 ES 6
A partir de 2015, la mise à
jour est annuelle.
✔ ES6 est le standard supporté par la plupart des nouvelles versions de navigateurs.
https://kangax.github.io/compat-table/es6/
7
HTML & JavaScript
Console • Firefox: Ctrl+Shift+K
développeur • Chrome / Edge: Ctrl+Shift+I
• <a href="#" onclick="alert('Vous avez cliqué !'); return
Balise HTML false;">Cliquez-moi !</a>
Code HTML
• <script> … </script>
(interne)
Fichier séparé
• <script src="script.js"></script>
(externe)
8
Exemple
• Tester le code suivant:
9
Exemple
• Résultat:
10
Syntaxe
Les commentaires
• Par ligne:
• Par Bloc:
• Remarque:
11
Syntaxe
Les boîtes de dialogue
Il existe trois types de boîtes de dialogue qui peuvent être affichées en utilisant
Javascript : Alert(), Confirmation () et prompt()
La méthode alert() sert à afficher à l'utilisateur des informations simples de types texte
La méthode confirm() : elle permet à l'utilisateur de choisir entre les boutons Ok et
annuler
La méthode prompt() permet à l’utilisateur de taper son propre message en réponse à la
question posé
12
Syntaxe
Les boîtes de dialogue
13
Syntaxe
Les boîtes de dialogue
confirm: renvoie
true ou false
14
Syntaxe
Les boîtes de dialogue
prompt: renvoie la
valeur saisie ou Null
15
Syntaxe
Variable
• JavaScript est un langage pauvrement typé, il n’est pas indispensable de
déclarer préalablement le type de variable.
• Il existe trois types de déclarations de variable en JavaScript.
– var: déclare une variable, en initialisant sa valeur éventuellement.
– let: déclare une variable dont la portée se limite au bloc courant.
– const: déclare une constante, dont la portée se limite au bloc courant et accessible
en lecture seule.
16
Syntaxe
Variable
• Le nom d’une variable doit commencer par:
– Lettre
– Tiret bas (_)
– Symbole dollar ($)
• Les caractères qui suivent peuvent inclure les lettres minuscules et/ou majuscules et
les chiffres.
• Par convention:
– Noms de variables et fonctions écrits en CamelCase
– Noms de constantes écrits en majuscule
• Remarque:
– JavaScript est sensible à la casse: maVariable est différente de MaVariable.
17
Syntaxe
Variable
• Typage dynamique
• Types de données
– Primitifs: – Objet
• Booléen
• Null
• Undefined
• Nombre
• String
18
Syntaxe
Variable
• Evaluation
19
Syntaxe
Variable
• Portée
20
Syntaxe
Variable
• L’opérateur
typeof renvoie
le type d’une
variable.
21
Syntaxe
Opérateurs
Opérateur Explication Symbole
Addition • Additionner des nombres (1+5;) +
• Concaténer des chaînes (“Hello ” + “World! “;)
Arithmétique • Les opérateurs mathématiques de base: soustraction, division et multiplication -, /, *
• Opérateur de puissance (**)
• Reste de la division (%) **
%
Assignation • Affecte une valeur à une variable =
• Affectation après addition, soustraction, division, multiplication +=, -=, /=, *=
• Affectation du reste (x %= y 🡺 x = x % y)
%=
Négation • Non Logique: Renvoie la valeur opposé (false devient true) !
• Non Unaire: Renvoie l’opposé de l’opérande -
• Non binaire: Inverse les bits de l’opérande (~1 🡺 0) ~
22
Syntaxe
Opérateurs
Opérateur Explication Symbole
Incrémentation Ajoute / soustrait une unité à son opérande
Décrémentation • Suffixe: renvoie la valeur avant l’incrémentation / décrémentation X++, X--
• Préfixe: renvoie la valeur après l’incrémentation / décrémentation
++X, --X
Relationnel • Permet de comparer deux opérandes et de renvoyer une valeur booléenne <, >,
<=, >=
Binaire • ET binaire (AND) &
• OU binaire (OR) |
Logique • ET logique (AND) &&
• OU logique (OR) ||
Egalité • (in)égalité faible !=, ==
• (in)égalité stricte !==, ===
23
Syntaxe
Structure Conditionnelle
• if ( condition) {
// instructions
}
else {
// instructions
}
24
Syntaxe
Structure Itérative
• for ([exp. Initiale]; [Condition]; [incrément]) {
// instructions
}
• do {
// instructions
} while (condition);
• while (condition) {
// instructions
}
25
Tableau
• JavaScript ne possède pas de type particulier pour représenter
un tableau de données.
• Utiliser l'objet natif Array ainsi que ses méthodes pour
manipuler des tableaux.
• Pour créer un tableau:
– var arr = new Array(élément0, élément1, ..., élémentN);
– var arr = Array(élément0, élément1, ..., élémentN);
– var arr = [élément0, élément1, ..., élémentN];
26
Tableau
• Pour créer un tableau sans aucun élément initial et de longueur
non nulle (l):
– var arr = new Array (l);
– var arr = Array (l);
– var arr = [];
arr.length = l;
Rq: l doit être un nombre
27
Tableau
Exercice 1
• Tester les instructions suivantes:
28
Tableau
Exercice 2
• Tester les instructions suivantes:
30
Tableau
Exercice 3
• Tester les instructions suivantes:
32
Fonctions
Une fonction JavaScript correspond à un ensemble
d'instructions nommé et réutilisable afin d’effectuer une tâche
précise.
Il existe deux types de fonction dans JavaScript:
❖ Les fonctions prédéfinies
❖ Les fonctions personnalisées
33
Fonctions prédéfinies
JavaScript possède un ensemble des fonctions prédéfinies
accessibles dans tout script. Ces fonctions exécutent une
certaine action lorsqu'elles sont appelées.
Fonction Explication Exemple
Evaluer / Exécuter le code JavaScript représenté par une chaîne de caractères eval(2*x+2); => 12
eval ()
Encode une chaîne avec des caractères d'échappement hexadécimale escape("abc123") => 'abc123'
escape() escape("é"); => %E9
Convertit une chaîne en nombre entier. parseInt("10.53") => 10
parsInt() parseInt("bn8") => NaN
parseInt("8bn") => 8
Convertit une chaîne contenant une valeur numérique en un nombre à virgule parseFloat("10.53") => 10.53
parseFloat() flottante parseFloat("8bn") => 8
parseFloat("b8n"); => NaN
34
Fonctions prédéfinies
Fonction Explication Exemple // ch=“NAME@mail”
var T1=[1,2,3,4]
var T2=["a","b","c","d"]
Recherche la valeur et renvoie l’indice du premier élément at=ch.indexOf(“@”) => at=4
indexOf()
correspondant
lastindexOf() Recherche la valeur a partir de la fin d’une chaîne ou d’un tableau a=ch.lastindexOf(“m”) => a=5
Retourne une sous-chaîne de la chaîne courante, entre un indice de sch=ch.susbtring(2,7) => sch=‘ME@ma’
substring()
début et un indice de fin
toLowerCase() Convertir tous les caractères en minuscules sch. toLowerCase() =>me@ma
toUpperCase() Convertir tous les caractères en majuscules sch. toUpperCase() =>ME@MA
concat () Fusionner deux ou plusieurs tableaux et renvoie un nouveau tableau T3 = T2.concat(T1);=> ['a', 'b', 'c', 'd', 1, 2, 3, 4]
sort () Trie les éléments du tableau dans le même tableau T3.sort() => [1, 2, 3, 4, 'a', 'b', 'c', 'd']
Retirer le dernier élément du tableau et renvoie cet élément T3.pop(); => 'd'
pop ()
console.log(T3); => [1, 2, 3, 4, 'a', 'b', 'c']
Extraire une partie du tableau et envoie un nouveau tableau avec le console.log(T3.slice(2)); => [3, 4, 'a', 'b', 'c']
slice()
reste console.log(T3.slice(4, 6)); => ['a', 'b']
35
Fonctions personnalisées
JavaScript permet de créer des fonctions personnalisées qui sont
des fonctions que nous allons construire, nommer et définir leurs
paramètres
Syntaxe
function nom_fonction () {
// instructions
}
36
Fonctions personnalisées
Syntaxe
function nom_fonction (arg1, arg2, …) {
// instructions
}
37
Fonctions personnalisées
Syntaxe
function nom_fonction (arg1 = value, arg2, …) {
// instructions
}
38
Fonctions personnalisées
Fonction anonyme : une fonction qui ne possèdent pas de nom
Syntaxe:
var x = function (arg1, arg2, …) {
// instructions
}
Une Très peu utilisée de cette façon , on préfère :
39
Fonctions personnalisées
Fonction anonyme
var x = function (arg1, arg2, …) {
// instructions
}
✔ Une fonction anonyme peut être :
⮚ passée en paramètre
⮚ déclenchée par un évènement
⮚ executée a l’aide d’une variable
40
Fonctions personnalisées
Fonction fléchée (=>): est une fonction qui a une syntaxe très courte et très rapide à écrire
Sans paramètres
Syntaxe: Un seul paramètre
Plusieurs paramètres (arg1)=> { // instructions } ()=> { // instructions }
(arg1, arg2, …) => { arg1 => { // instructions }
// instructions
}
41
Merci de votre attention
