0% ont trouvé ce document utile (0 vote)
37 vues40 pages

JavaScript - Part 1

Transféré par

Auriol Mbingou
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% ont trouvé ce document utile (0 vote)
37 vues40 pages

JavaScript - Part 1

Transféré par

Auriol Mbingou
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
Vous êtes sur la page 1/ 40

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

Vous aimerez peut-être aussi