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

JavaScript Part 1

Transféré par

Fatma Abid
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)
88 vues40 pages

JavaScript Part 1

Transféré par

Fatma Abid
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: 2021/2022
Plan
Introduction

HTML & JavaScript

Syntaxe

Objets

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

12
Syntaxe
Les boîtes de dialogue

confirm: renvoie
true ou false

13
Syntaxe
Les boîtes de dialogue

prompt: renvoie la
valeur saisie ou Null

14
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.

15
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.

16
Syntaxe
Variable
• Typage dynamique

• Types de données
– Primitifs: – Objet
• Booléen

• Null

• Undefined

• Nombre

• String
17
Syntaxe
Variable
• Evaluation

18
Syntaxe
Variable
• Portée

19
Syntaxe
Variable
• L’opérateur
typeof renvoie
le type d’une
variable.

20
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) ~

21
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 !=, ==

22
Syntaxe
Structure Conditionnelle
• if ( condition) {
// instructions
}
else {
// instructions
}

23
Syntaxe
Structure Itérative
• for ([exp. Initiale]; [Condition]; [incrément]) {
// instructions
}

• do {
// instructions
} while (condition);

• while (condition) {
// instructions
}

24
Objets
Définition

• Un objet est une entité à part entière qui possède des


propriétés.
• Une propriété est une association entre un nom (clé) et une
valeur.
• On accède à une propriété en utilisant les notations suivantes:
nom_Objet.nom_Propriété
nom_Objet[nom_Propriété]

25
Objets
Définition

• La création d’un objet peut se faire :


var nom_Objet = new Object();
var nom_Objet = { prop_1: valeur_1,
‘prop_2’: valeur_2,
prop_3: function() { …},
…,
10: valeur_10
};
Object.create(nom_Objet);
26
Objets
Exemple 1

27
Objets
Exemple 2

28
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];

29
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

30
Tableau
Exercice 1
• Tester les instructions suivantes:

31
Tableau
Exercice 2
• Tester les instructions suivantes:

33
Tableau
Exercice 3
• Tester les instructions suivantes:

35
Fonctions
Syntaxe
function nom_fonction () {
// instructions
}

36
Fonctions
Syntaxe
function nom_fonction (arg1, arg2, …) {
// instructions
}

37
Fonctions
Syntaxe
function nom_fonction (arg1 = value, arg2, …) {
// instructions
}

38
Fonctions
Syntaxe: Fonction anonyme
var x = function (arg1, arg2, …) {
// instructions
}

39
Fonctions
Syntaxe: Fonction anonyme
var x = function (arg1, arg2, …) {
// instructions
}

Une fonction anonyme peut être passée en paramètre.

40
Fonctions
Syntaxe: Arrow function
Plusieurs paramètres Un seul paramètre Sans paramètres

(arg1, arg2, …) => { (arg1)=> { // instructions } ()=> { // instructions }


// instructions arg1 => { // instructions }
}

41
Merci de votre attention

Vous aimerez peut-être aussi