JavaScript Moderne
Fatou NGOM
Technologies Web: Front
• HTML (contenu)
• CSS (design)
• JAVASCRIPT (interaction)
Technologies Web: Front
HTML
• Fichier texte contenant des informations de structuration.
• La structure est indiquée a l'aide de balises :
• Le nom de la balise indique le type de mise en forme a appliquer.
• Syntaxe
• <nomBalise> contenu </nomBalise>
• Une balise ouvrante peut contenir des attributs de la forme nom="valeur"
• <nomBalise nom1="val1" nom2="val2" ...>
• Les attributs permettent de préciser des informations concernant la mise
en forme.
C'est le navigateur qui interprète et affiche le résultat.
Technologies Web: Front
CSS
• Fichier texte contenant des informations de mise en forme
• C'est navigateur qui interprète le code CSS.
Technologies Web: Front
CSS
• Fichier texte contenant des informations de structuration.
• La structure est indiquée a l'aide de balises :
• Le nom de la balise indique le type de mise en forme a appliquer.
• Syntaxe
• <nomBalise> contenu </nomBalise>
• Une balise ouvrante peut contenir des attributs de la forme nom="valeur"
• <nomBalise nom1="val1" nom2="val2" ...>
• Les attributs permettent de préciser des informations concernant la mise
en forme.
C'est navigateur qui interprète le code CSS.
Technologies Web: Front
JavaScript ou JS
• Un langage de script incorporé dans le HTML
• Historiquement, le premier langage de script pour le Web
• Un langage de script client interactive pour le Web
• Gratuit et disponible sur tous les navigateurs actuels
• JavaScript permet de rendre le contenu interactif
• Il permet de valider
• Validation de formulaires
• Animations
• Affichage de popup ou de boite de dialogue
• Etc.
C'est navigateur qui interprète le code JavaScript.
Technologies Web: Front
JavaScript ECMAScript (Version)
ES1 (1997) ES2 (1998) ES3 (1999)
Mocha--Live---JavaScript 10 ans sans évolution
ES5 (2009)
JavaScript moderne ES6 (2015)
JavaScript moderne
Déclaration et utilisation des variables
Les mots clé var:
• Historiquement, en JavaScript on utilisait le mot-clé var pour déclarer une variable :
• Le problème de ces variables est leur portée : elles sont valides pour l’ensemble de la
fonction qui les contient. Il devient donc difficile de les déclarer dans un bloc qui n’est
pas une fonction, comme un if :
JavaScript moderne
Déclaration et utilisation des variables
Les mots clé let:
• Tout comme var, le mot-clé let permet de déclarer une variable. La différence est sa portée, qui
est limitée au bloc qui la contient.
• Les variables ne sont ainsi accessibles que dans le bloc (ici délimité par des accolades) qui les
contient (ainsi que leurs enfants), sans écraser des variables d’un bloc supérieur.
JavaScript moderne
Déclaration et utilisation des constantes
Les mots clé const pour les valeurs fixes:
const NOM = ‘NDIAYE’
const AGE = 77
Impossible de faire
NOM = ‘DIOP’
AGE = 100
JavaScript moderne
Déclaration et utilisation des constantes
const ANIMAUX = ['lion', 'ours', 'girafe’] // 3 animaux
[Link]('tigre', 'singe') // 5 animaux
• Impossible de faire
ANIMAUX = ['lion', 'ours', 'girafe', 'tigre', 'singe' ]
JavaScript moderne
Déclaration et utilisation des constantes
Les mots clé const pour les valeurs fixes:
const note = [10,11,19,7]
[Link](13)
[Link](5)
[Link](15)
Impossible de faire
note = [10,11,19,7, 13, 5, !15]
JavaScript moderne
Les Template Strings
Double quotes
let ma_chaine1 = "" //
Simple quotes
let ma_chaine2 = ' ' //
Back Stick
let ma_chaine3= ` ` //
JavaScript moderne
Les Template Strings: Saut de ligne
Double quotes
let ma_chaine1 = "
" // impossible
Simple quotes
let ma_chaine2 = '
' // impossible
Back Stick
let ma_chaine3= `
` // ok
JavaScript moderne
Les Template Strings: Injection de variable
Pour injecter une variable (ou une constante) dans un littéral de gabarit
(ou chaine de caractères), il existe deux syntaxes spécifique
• concaténation,
const NUMERO = '007‘
let message = "Bonjour, Agent ".NUMERO // "Bonjour, Agent
007"
• en utilisant le marqueur ${} autour de la valeur
const NUMERO = '007‘
let message = `Bonjour, Agent ${NUMERO}` // "Bonjour, Agent 007"
let langage = 'JavaScript'
let message = `Le meilleur langage pour le Web est ${langage}`
langage = 'Python'
message // "Le meilleur langage pour le Web est le JavaScript"
JavaScript moderne
Les fonctions fléchés
• Les fonctions fléchées ou arrow functions sont des fonctions comme
les autres, à un détail près : elles n’ont pas de this spécifique. Elles
permettent également une syntaxe plus courte, pratique pour
déclarer des fonctions anonymes.
JavaScript moderne
Les fonctions fléchés
JavaScript moderne
Les fonctions fléchés
JavaScript moderne
Les fonctions fléchés
JavaScript moderne
La Déstructuration d’objets et de tableaux
• La déstructuration est une expression JavaScript qui permet d'extraire des
données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble
à la structure du tableau ou de l'objet.
JavaScript moderne
Export et Import de modules
Une des nouveautés du JavaScript moderne est l’apparition des modules. Il permettent:
• De structurer son code en séparant chaque fonctionnalité ou composant indépendamment du
reste : chaque module gère son aspect métier sans se soucier des autres.
• Chaque module est exécuté dans un contexte différent: vous ne risquez donc pas d’avoir des
conflits de variables entre deux fichiers.
Pour charger un module, il faut d’abord
1. L’exporter un pour le rendre accessible aux autres:
2. Puis l’importer dans la page ou l’on souhaite l’utiliser
L’export permet de rendre disponible une valeur afin que les autres modules puissent y accéder.
Sans export la valeur reste interne au module, les autres ne peuvent donc pas y accéder
directement.
Il est possibles également d’exporter un ensemble de variables et fonctions
JavaScript moderne
Export et Import de modules ([Link])
JavaScript moderne
Export et Import de modules ([Link])
JavaScript moderne
Export et Import de modules (exemple_modules.js)
JavaScript moderne
La notion de classes
JS moderne a introduit les class pour définir des objets, avec des propriétés et des méthodes
selon une syntaxe classique :
JavaScript moderne
La notion de classes
Instanciation de la classe : création d’un objet de type Personne
etudiant est un objet de type Personne
JavaScript moderne
Les Web Components
Il est possible maintenant de créer nos propres balises HTML avec les
composants.
Pas limités à celles disponibles dans la norme HTML5,
vous pouvez créer vos propres composants avec un peu de JavaScript !
Pour créer un composant il faut indiquer au navigateur son nom (qui sera utilisé
par exemple dans notre HTML), mais aussi la class JavaScript hériter de
HTMLElement à initialiser pour chaque instance de notre composant :