Dynamiser ses pages Web avec JavaScript
Adresses derrière les liens

Références pour le JavaScript
Écran 2
  1. Eloquent JavaScript: A Modern Introduction to Programming https://www.amazon.com/gp/product/1593275846/
  2. JavaScript: the Definitive Guide http://shop.oreilly.com/product/9780596805531.do
  3. JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do
  4. You Don't Know JS: Scope & Closures http://shop.oreilly.com/product/0636920026327.do
  5. Code Conventions for the JavaScript Programming Language http://crockford.com/javascript/code.html
  6. JavaScript The Right Way http://jstherightway.org/
  7. JavaScript Standard Style https://standardjs.com/
  8. ECMAScript: A general purpose, cross-platform programming language http://www.ecma-international.org/publications/standards/Ecma-262.htm
  9. Guide JavaScript https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide
  10. Référence JavaScript https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference
  11. Référence du DOM https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model
  12. www.espacecourbeformation.com/fr/cours/apprendre-javascript/ http://www.espacecourbeformation.com/fr/cours/apprendre-javascript/
Historique du JavaScript
Écran 3
  1. Babel https://babeljs.io/
  2. JavaScript sur Wikipedia https://en.wikipedia.org/wiki/JavaScript
  3. ECMAScript sur Wikipedia https://en.wikipedia.org/wiki/ECMAScript
  4. liste de moteurs ECMAScript https://en.wikipedia.org/wiki/List_of_ECMAScript_engines
JavaScript comme langage universel
Écran 4
  1. CommonJS http://www.commonjs.org/
  2. node.js http://www.nodejs.org/
  3. langages ou dialectes qui peuvent être compilés en JavaScript https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js
Commentaires
Écran 8
  1. commentaires https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Commentaires
Identifiants, mots clés et détails syntaxiques
Écran 10
  1. mot réservé https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-cl%C3%A9s
  2. Section 7.6 http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
  3. mots résevés https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-cl%C3%A9s
  4. comprendre les enjeux et le moment où ils sont vraiment critiques http://blog.namangoel.com/considering-the-npm-styleguide
  5. règle ASI pour Automatic Semicolon Insertion dans le standard ES5 http://es5.github.io/#x7.9
  6. https://fr.wikipedia.org/wiki/Syntaxe_JavaScript https://fr.wikipedia.org/wiki/Syntaxe_JavaScript
  7. invoquer le mode strict https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode
Types de données et définition de variables
Écran 11
  1. littéraux https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Litt%C3%A9raux
  2. variables https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables
  3. enoncé var https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/var
  4. type de données https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es
Notes sur les types et les variables
Écran 12
  1. var ne permet pas des portées de blocs https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/bloc
  2. let et const depuis ECMAScript 6 le permettent https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let
Types de données : nombres
Écran 14
  1. nouvelles représentations pour l'octal et le binaire http://es6-features.org/#BinaryOctalLiteral
Types de données : chaînes de caractères
Écran 15
  1. chaînes de caractères avec interpolation http://es6-features.org/#StringInterpolation
Opérateurs
Écran 17
  1. opérateurs https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs
Précédence des opérateurs
Écran 18
  1. tableau des précédences https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs
Méthode pour convertir convertir en nombre
Écran 20
  1. parseInt() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/parseInt
  2. parseFloat() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/parseFloat
  3. isNaN() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/isNaN
Contrôle du flot : conditions
Écran 21
  1. if..then..else https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else
Contrôle du flot : switch
Écran 22
  1. switch...case https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch
Contrôle du flot : boucles standard
Écran 23
  1. boucle while https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while
  2. boucle do...while https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/do...while
  3. boucle for https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for
Contrôle du flot : itérer dans un objet
Écran 26
  1. boucle for..in https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...in
  2. boucle for..of https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of
Fonctions (p. 1 / 2)
Écran 27
  1. fonctions https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions
Fonctions (p. 2 / 2)
Écran 28
  1. fonctions imbriquées https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions#Fonctions_imbriqu%C3%A9es_et_fermetures
Fonctions anonymes
Écran 29
  1. créer une fonction avec l'objet Function https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function
Fonctions avec un nombre d'arguments variable
Écran 30
  1. arguments https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/arguments
Portée des variables
Écran 32
  1. Closures https://developer.mozilla.org/fr/docs/Web/JavaScript/Closures
Méthodes pour créer un objet
Écran 36
  1. Object.create() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
  2. notion de "classe" https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
  3. 3 ways to define a JavaScript object http://www.phpied.com/3-ways-to-define-a-javascript-class/
  4. Initialisateur d'objets https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet
  5. There is no right way! https://youtu.be/GhbhD1HR5vk?list=PL0zVEGEvSaeHBZFy6Q8731rcwk0Gtuxub&t=94
Quelques détails sur les propriétés d'un objet
Écran 41
  1. delete https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_delete
Créer une méthode
Écran 43
  1. Methods Within Constructor vs Prototype in Javascript https://www.thecodeship.com/web-development/methods-within-constructor-vs-prototype-in-javascript/
Un mot sur les prototypes
Écran 47
  1. JavaScript avancé http://www.espacecourbeformation.com/fr/cours/javascript-avance/
Objet Number
Écran 49
  1. Number https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number
  2. Intl.NumberFormat() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat
Afficher les nombres à une précision donnée + traiter erreur
Écran 50
  1. https://bugzilla.mozilla.org/show_bug.cgi?id=557530 https://bugzilla.mozilla.org/show_bug.cgi?id=557530
  2. BigDecimal.js https://github.com/iriscouch/bigdecimal.js
  3. big.js https://github.com/MikeMcl/big.js
Objet Date
Écran 51
  1. Date https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date
  2. Intl.DateTimeFormat() https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat
Objet Array (séquentiel)
Écran 53
  1. Array https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array
Quelques fonctions accesseurs d'un tableau (p. 2/2)
Écran 56
  1. méthodes d'accession https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Les_accesseurs
  2. méthodes d'itération https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Les_m.C3.A9thodes_d%27it.C3.A9ration
Objet String
Écran 60
  1. String https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String
Objet Math
Écran 61
  1. Math https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math
DOM originel : éléments indexés
Écran 62
  1. Level 0 DOM http://www.quirksmode.org/js/dom0.html
Interface pour les formulaires
Écran 67
  1. DOM HTMLFormElement https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement
Interface pour les champs input
Écran 68
  1. DOM HTMLInputElement (en anglais) https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Traitement des erreurs
Écran 70
  1. types d'erreurs reconnus d'emblée https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Error
  2. try...catch https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/try...catch
Lancer une exception
Écran 71
  1. objet Error https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Error
  2. throw https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_throw
Introduction
Écran 73
  1. http://www.w3.org/DOM/ http://www.w3.org/DOM/
Différentes versions du DOM
Écran 74
  1. plusieurs versions officielles du DOM https://www.w3.org/DOM/DOMTR
Types de nœuds
Écran 79
  1. nodeType https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType
  2. documentation en anglais https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
Attention aux espaces de toutes sortes!
Écran 80
  1. gestion des espaces sur MDN https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM
Interfaces du DOM niveau 1
Écran 81
  1. diagramme de classes du DOM niveau 1 http://www.xml.com/pub/1999/07/dom/
  2. IDL DOM niveau 2 au W3C https://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/idl-definitions.html
Interface DOM Document
Écran 82
  1. DOM document https://developer.mozilla.org/fr/docs/Web/API/document
Méthode getElementById
Écran 83
  1. DOM HTML niveau 1 https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/idl-definitions.html
  2. bogue dans IE7 qui peut nous faire perdre du temps http://www.456bereastreet.com/archive/200802/beware_of_id_and_name_attribute_mixups_when_using_getelementbyid_in_internet_explorer/
  3. getElementById https://developer.mozilla.org/fr/docs/Web/API/document.getElementById
Méthodes createElement et createTextNode
Écran 84
  1. createTextNode https://developer.mozilla.org/fr/docs/Web/API/document.createTextNode
  2. createElement https://developer.mozilla.org/fr/docs/Web/API/document.createElement
Méthodes createElement et createTextNode (suite)
Écran 86
  1. DOM HTML http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html
  2. propriété innerHTML https://developer.mozilla.org/fr/docs/Web/API/Element/innertHTML
Interface DOM Node
Écran 87
  1. DOM Node https://developer.mozilla.org/fr/docs/Web/API/Node
Attributs nodeType, nodeValue et nodeName
Écran 89
  1. ajouter ces constantes manuellement http://stackoverflow.com/questions/1444650/how-does-one-access-the-node-type-constants-in-ie
Méthodes appendChild et insertBefore
Écran 91
  1. appendChild https://developer.mozilla.org/fr/docs/Web/API/Element.appendChild
  2. insertBefore https://developer.mozilla.org/fr/docs/Web/API/Element.insertBefore
Méthodes hasChildNodes, removeChild et replaceChild
Écran 92
  1. hasChildNodes https://developer.mozilla.org/fr/docs/Web/API/Element.hasChildNodes
  2. removeChild https://developer.mozilla.org/fr/docs/Web/API/Element.removeChild
Interface DOM Element
Écran 93
  1. DOM element https://developer.mozilla.org/fr/docs/Web/API/element
Méthode getElementsByTagName
Écran 94
  1. getElementsByTagName https://developer.mozilla.org/fr/docs/Web/API/Element.getElementsByTagName
Organisation partielle de DOM HTML
Écran 96
  1. HTMLInputElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Propriétés de l'interface HTMLElement
Écran 98
  1. liste complète des interfaces DOM HTML https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model#Interfaces_des_%C3%A9l%C3%A9ments_HTML
Quelques commentaires sur d'autres interfaces
Écran 99
  1. HTMLAnchorElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
  2. HTMLImageElement https://developer.mozilla.org/fr/docs/Web/API/HTMLImageElement
  3. HTMLSelectElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement
DOM HTML5
Écran 100
  1. DOM Niveau 4 https://www.w3.org/TR/domcore/
Modifier le style d'un élément
Écran 102
  1. http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties
  2. style https://developer.mozilla.org/fr/docs/Web/API/Element.style
Événement, plusieurs fonctions avec le DOM
Écran 104
  1. http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/ http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/
  2. tutoriel pour comprendre les phases de capture (capturing) et de bouillonnement (bubbling) http://javascript.info/tutorial/bubbling-and-capturing
Objet Event
Écran 105
  1. ordre de traitement des événements lors de collision de gestionnaires http://www.quirksmode.org/js/events_order.html
Exercice des taxes : empêcher que la touche 'Entrée' soumette le formulaire
Écran 108
  1. http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form
Librairies pour aider...
Écran 113
  1. jQuery http://jquery.com/
  2. Prototype http://www.prototypejs.org/
  3. Script.aculo.us http://script.aculo.us/
  4. Yahoo! UI Library http://developer.yahoo.com/yui/
  5. Dojo Toolkit http://dojotoolkit.org/
  6. MooTools http://mootools.net/
Chronomètre...
Écran 115
  1. documentation setTimeout https://developer.mozilla.org/fr/docs/Web/API/WindowTimers/setTimeout
Gestionnaires d'événements (p. 4/4)
Écran 120
  1. liste complète des gestionnaires d'événements possibles https://developer.mozilla.org/en-US/docs/Web/Events
Introduction à JSON
Écran 123
  1. IETF RFC 8259 https://tools.ietf.org/html/rfc8259
  2. JSON sur Wikipedia https://en.wikipedia.org/wiki/JSON
  3. JSON.org http://www.json.org/
Usages de JSON
Écran 124
  1. générateur de JSON-LD https://webcode.tools/json-ld-generator
Syntaxe de JSON
Écran 126
  1. JSON sur MDN https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON
Différences entre JavaScript et JSON
Écran 128
  1. JSON Lint http://jsonlint.com/
Exemple JSON plus complexe
Écran 129
  1. consulter une requête publique Flickr https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=stadeolympique&nojsoncallback=1
  2. réponse JSON pour API Flickr https://www.flickr.com/services/api/response.json.html
Objet global JSON
Écran 130
  1. objet JSON sur MDN https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON
Exercice : faire une visionneuse Flickr
Écran 131
  1. JSON lint http://jsonlint.com/
Pour les curieux : schémas JSON
Écran 132
  1. json-schema.org http://json-schema.org/

Tous droits réservés 2019, Espace Courbe Formation inc. —19 août 2019 — 18:00:00