Cours 2 : Javascript

Applications web et mobile

Christophe Gonzales
 HTML et javascript

Cours 2 : Javascript 2/46

 Inclusion d’un fichier javascript (1/2)

Cours 2 : Javascript 3/46

 Inclusion d’un fichier javascript (2/2)

Cours 2 : Javascript 4/46

 Exécution de javascript
I Browsers contiennent un moteur Javascript :

Chakra Nitro SpiderMonkey V8

I Vérifient les normes ECMAScript (ES6 = ES2015)

I Principe de fonctionnement :

code moteur code

Javascript Javascript machine

I Browser exécute ce code machine

I Depuis 2009 : compil/exec hors browser :

Cours 2 : Javascript 5/46
 Comment et où inclure du Javascript dans du HTML ?

I Préferer l’inclusion par fichier :

=⇒ Séparer le code HTML (affichage) du
Javascript (interactions)

I Plutôt insérer le code juste avant </body> :

1 Inclusion =⇒ compilation + exécution

=⇒ cela prend du temps

=⇒ Inclusion dans le header =⇒ délai d’affichage
2 Scripts accèdent souvent aux éléments de la page

Cours 2 : Javascript 6/46

 Introduction au langage Javascript

Cours 2 : Javascript 7/46

 Création de variables : 4 manières

4 let nom_variable = valeur;

portée de bloc si déclaration dans un bloc
portée de fichier/module sinon
∼ global.nom_variable = valeur;
∼ window.nom_variable = valeur;
création/modification d’une variable globale
6 nom_variable = valeur;
modification de la valeur d’une variable si elle existe déjà
création d’une variable globale sinon
6 var nom_variable = valeur;
portée de fonction si déclaration dans une fonction
variable globale si déclaration hors fonction

Cours 2 : Javascript 8/46

 Le var en dehors d’une fonction

I var dans un browser =⇒ modifie l’objet window :

=⇒ Éviter var, déclarer les variables avec let !

Cours 2 : Javascript 9/46

 Le var dans une fonction

Cours 2 : Javascript 10/46

 La bonne manière de créer des variables

Cours 2 : Javascript 11/46

 Différence entre var et let

Cours 2 : Javascript 12/46

 Noms des variables

I Noms autorisés : mêmes règles qu’en Java ou C

I Convention : notation Camel

Exemple : firstName

I Attention : Javascript sensible à la casse :

Exemple : firstName 6= FirstName

Cours 2 : Javascript 13/46

 Types des variables (1/2)

Types primitifs :

I String : let x = 'toto', y = 'to' + 'to';

I Number : let x = 30, y = 4.5;
I Boolean : let x = true;
I Undefined : let x, y = undefined;
I Null : let x = null;

Types primitifs =⇒ copie par valeur :

x 3
let x = 3;
let y = x; y 3

Cours 2 : Javascript 14/46

 Types des variables (2/2)

Types référence :

I Object
I Array
I Function

Types référence =⇒ copie par référence :

x ···
let x = ...;
let y = x; y

Cours 2 : Javascript 15/46

 Les objets

Cours 2 : Javascript 16/46

 Comparaison types primitifs / référence

Cours 2 : Javascript 17/46

 Les tableaux (1/2)

Cours 2 : Javascript 18/46

 Les tableaux (2/2)
Les tableaux sont des objets :

=⇒ contiennent des méthodes (length, filter, forEach, etc.)

Cours 2 : Javascript 19/46
 Les fonctions

Cours 2 : Javascript 20/46

 globalement, les fonctions

I Fonctions = propriétés de l’objet global :

Cours 2 : Javascript 21/46

 Les fonctions : paramètres par défaut

Cours 2 : Javascript 22/46

 Typage dynamique

Cours 2 : Javascript 23/46

 Les constantes

Cours 2 : Javascript 24/46

 Retour sur les string et les objets

Cours 2 : Javascript 25/46

 Template literals

Cours 2 : Javascript 26/46

 L’objet de ce slide

I 4 manières de créer des objets :

I Par assignation

I Par  factory 

I Par  constructeur 

I Par  classe 

Cours 2 : Javascript 27/46

 Construction d’un objet par assignation

Cours 2 : Javascript 28/46

 Construction d’un objet par factory

Cours 2 : Javascript 29/46

 Construction d’un objet par constructeur

Cours 2 : Javascript 30/46

 Principe de construction par constructeur

1 function MonObjet () {
2 this.champ1 = 3;
3 }
4

5 let obj = new MonObjet ();

1 new =⇒ crée objet vide {}

2 Fonction MonObjet appelée dans cet objet
=⇒ this = objet que l’on construit

Cours 2 : Javascript 31/46

 Construction d’un objet par classe

Cours 2 : Javascript 32/46

 This is easy !

Règle : This fait toujours référence à l’objet qui exécute la

fonction courante

I Implications :

I dans une méthode : this = l’objet courant

I dans une fonction : this = l’objet global :

dans un browser : this = window
dans node : this = global

Cours 2 : Javascript 33/46

 This is object

Cours 2 : Javascript 34/46

 This is global

Cours 2 : Javascript 35/46

 La classe, ce this

Cours 2 : Javascript 36/46

 Explication du slide précédent

I Utilisation du mot clef class

ES6 =⇒ Javascript en mode strict
=⇒ ne pas associer la fonction anonyme à l’objet global
(raisons de sécurité)
=⇒ associé à undefined

Cours 2 : Javascript 37/46

 Passer correctement this à forEach

Cours 2 : Javascript 38/46

 Itérer les champs d’un objet (1/2)

Cours 2 : Javascript 39/46

 Itérer les champs d’un objet (2/2)

Cours 2 : Javascript 40/46

 Copier (cloner) un objet

Cours 2 : Javascript 41/46

 Javascript et le DOM

Cours 2 : Javascript 42/46

 Le DOM

DOM : Document Object Model

[image wikipedia]

I Représente la page web affichée

I Structure d’arbre — racine : document

Cours 2 : Javascript 43/46

 Javascript : window vs document

Pour Javascript :

I Dans un browser, window = objet global

I document = window.document
=⇒ document est une propriété de window

I document = l’objet  visible  du browser

Cours 2 : Javascript 44/46

 Manipuler le DOM

Cours 2 : Javascript 45/46

 Rajouter des éléments au DOM

Cours 2 : Javascript 46/46