JavaScript ES6

• LE langage du web.

• Niveau professionnel.

• Conseils pour tirer le maximum de ce cours.

• Historique rapide.

• Langage de script, interprété.

• Documentation Mozilla.

• Installer Microsoft VS Code :

  • Multi-plateformes.

  • Open-source.

  • Léger.

  • Des milliers d'extensions...

• Installer les extensions VS Code :

  • French Language Pack for Visual Studio Code

• Installer les extensions VS Code :

  • HTMLHint

• Installer les extensions VS Code :

  • Debugger for Chrome

• Travailler avec index.html et main.js tout au long de ce cours.

• Présentation de la section.

• Identifiants (case sensitive)

• Déclarer systématiquement avec let.

• Déclarations multiples avec l'opérateur , (virgule).

• camelCase pour les variables.

• Littéraux numériques

• Littéraux chaînes de caractères

• Template literals

• Constantes

• Opérateur typeof

• Quelques types primitifs :

  • number

  • string

  • boolean

  • undefined

• Opérateur d'affectation

• Opérateurs arithmétiques

• Opérateur de concaténation

• Opérateurs combinés

• Pré et post incrémentation / décrémentation

• Opérateurs de comparaison

• Egalité simple et stricte

• Opérateurs logiques

• Conversions implicites

• Conversions explicites

3 questions

• Structure if/else

• Structure switch/case

• Opérateur ternaire

• Évaluation booléenne

• Short-circuit operators

3 questions

• Structure while

• Structure do/while

• Structure for

• Ruptures break et continue

3 questions

• Syntaxe à crochets

• Hétérogénéité

• Parcours avec for

• Parcours avec for/of

• Multi-dimensions

• Destructuring assignment

3 questions

• Une fonction est un sous-programme.

• Rendre un programme modulaire.

• Eviter les redondances.

• Simplifier la maintenance.

• Améliorer la lisibilité.

• Paramètres

• Retour

• Hoisting, var

• Scope, portée de bloc

• Paramètres par défaut
  Exemple : somme de 2 nombres

• Rest parameter
  Exemple : prénom puis notes pour moyenne

• Fonctions variadiques : arguments
  Exemple : moyenne

• Spread operator
  Exemple : moyenne recevant un tableau

• Exemple de récursivité : la factorielle

• La pile expliquée

• Stack overflow
  Exemple : récursivité sans fin.

• Passage par valeur d'un nombre

• Passage par référence d'un tableau

3 questions

• Principe des exceptions

• Syntaxe try/catch

• Exemple : limite de récursivité du navigateur.

• Passage de la programmation procédurale à la POO.

• Le problème des paramètres en procédurale.

• La solution avec une conception objet.

• Syntaxe

• this

• new

• Le danger de l'ajout dynamique de membres.

• Utilité des membres statiques

• Propriétés statiques

• Méthodes statiques

• Classe 100% statique

• Exemples

• Enveloppe du type primitif string.

• Exemples

• Auto-boxing et unboxing

• La classe des tableaux

• Exemples

A partir de l'analyse d'un programme principal donné et du résultat attendu de son exécution, lister puis coder les classes, propriétés et méthodes nécessaires à son fonctionnement.

Exemple mettant en jeu :

• Les classes

• Les propriétés

• Les méthodes

• Un diagramme de classe

Pause entre analyse et code.

Le code des classes :

• Boulanger

Le code des classes :

• Produit

• Fabrication

• Utilité de l'héritage

• Syntaxe

• super()

• super

• instanceof

• toString()

• Définition du contexte, différence avec scope.

• Exemple avec setTimeout()

  • Transmission avec that

  • Transmission avec bind()

  • Transmission par Arrow function

• Exemple avec filter()

  • Transmission en second paramètre.

  • Transmission par Arrow function

• Définition du DOM

• Définition de l'API du web

• Doc de référence en PJ

• La classe Window

• L'instance automatique window

• Quelques propriétés :

  • document

  • location

  • history

• Quelques méthodes :

  • alert()

  • prompt()

  • confirm()

  • setTimeout()

  • setInterval()

  • print()

• Arborescence HTMLElement -> Element -> Node
  Schéma dans la doc de référence anglaise de HTMLElement.

• Méthodes :

  • Document.querySelector()

  • Document.querySelectorAll()

  • Element.querySelector()

  • Element.querySelectorAll()

• Propriétés :

  • Node.textContent

  • HTMLElement.innerHTML

• Méthodes :

  • Document.createElement()

  • Node.appendChild()

  • Node.insertBefore()

  • ChildNode.remove()

• Propriétés :

  • HTMLElement.style

  • HTMLElement.style.cssText (CSSRule.cssText)

  • Element.classList

    • add(...)

    • remove(...)

3 questions

• Les 3 phases de propagation à travers le DOM.

• Écouter des événements et réagir à leur survenue.

• Supprimer le comportement par défaut.

• Doc de référence en PJ

• Les 3 phases de propagation

  • Schema du W3C

  • Démonstration

Écouter via un attribut HTML

• Ajouter un écouteur lambda.

• Ajouter un écouteur indépendant suppressible.

• Supprimer un écouteur indépendant.

• Présentation et démonstration.

• Indications pour la première partie.

• Création du pion.

• Création de la cage, paramétrage de son style.

• Boucles imbriquées de création des rangées et cellules.
  Méthodes :

  • HTMLTableElement.insertRow()

  • HTMLRowElement.insertCell()

• Positionnement initial du pion dans la cage.

• Affichage de la cage.

Indications pour la seconde partie.

• Ajout de l'écouteur.

• Filtrage de la touche pressée :

  • Événement keydown

  • Propriété key

  • Gestion des butées.

• Déplacement du pion.

• Méthode Event.preventdefault()

• Exemple du champ de saisie d'un nombre en base 2.

• Principe des requêtes asynchrones.

• AJAX à l'origine.

• API Fetch aujourd'hui.

• Exemple de création d'une promesse avec tirage aléatoire d'un succès ou d'un échec.

• Mise en place d'un timeout.

• Exemple d'utilisation simple :

  • Aucune donnée envoyée.

  • Pas d'exploitation de la réponse.

  • Gestion des erreurs.

• Exemple d'utilisation avancée :

  • Envoi de données POST en JSON.

  • Exploitation de la réponse JSON.