Formation angular - DTC Septembre 2023

J1 - Intro - Base

Obj: se familiariser avec la syntaxe js: déclaration/manipulation des primitifs, les tableaux, les objets

• Logique "informatique"

Recherche à faire

• variables: const/let/var, primitifs, array, object...
• Portée des variables
• condition if - else

Résultat attendu:

• Déclaration, initialisation et protée des variables avec const/let, type undefined
• Déclaraion/comparaison des primitifs
• Limite du type number
• Déclaration des strings avec "", '', ``
• Manipulation des strings comme tableau
• Création de tableaux: [], new Array(n)
• Accès à un élément du tableau, accès à un élément en dehors du tableau
• Parcours d'un tableau
• Création d'objet
• Accès à un élément de l'objet (clé statique ou variable)
• Accès à un élément non existant de l'objet
• Création d'un objet avec une clé dynamique
• Opérateur ===, !==, ! (vs ==, !=)

J2 - Base: fonction, array, object

Obj: se familiariser avec la manipulation des données (tableaux et objets)

• parcours d'un tableau et d'un objet
• Manipuler un tableau: push, sort
• Manipuler un tableau d'objet
• fonction: les différents syntaxes de déclaration d'une fonction,
• les callbacks
• passage par valeur/référence
• Programation évènementiel - asyncrhone avec setTimeout/setInterval

Recherche à faire

• array: .map, .filter, .sort, ...
• aggrégation avec reduce
• programation asynchrone: les promises
• Gestion des erreurs + programmation défensive

J3 - Data

Obj: manipuler les données {} et []

NOTE: image mapmind from https://gogeometry.com/software/javascript/javascript-language-mind-map.jpg

• Reccap asynchrone setTimeout/setInterval
• Promise
• Reccap des méthodes []: map, filter, reduce
• Extraction de quelques données
• Date

Recherche et travail à faire

• Lire le contenu des fichiers data/sales_100.json, titanic.csv, nba.csv avec fetch, fs (node) ou autres méthodes
• extraire des informations, statistiques, kpi... à partir des infos reccupérées Afficher les résultats via console ou html
• Utiliser chart.js pour afficher les données extraites

J4 - Data + Asynchrone

Obj: manipuler les données {} et [] + structure code

• Developper tools
• Suite Promise: tâches parallèles
• async/await: plus tard
• Structuration du code avec les objets et classe
• API http avec fetch, ex https://github.com/public-apis/public-apis
• Si temps: suite extraction de données

TAF

• Suite J3
• Utiliser l'api unsplash pour créer un app d'images

J5 - App/Api + Asyncrhone

Obj: création d'une app + api

• Question data [] et {} + Demo / présentation
• Suite Promise (.all)
• module: import/export + exemple restructuration
• custom elements

TAF

• Suite app/api + module et custom elements

J6 - Module/Custom elements

Obj: module, custom elements + séparation logique

• LC
  • Header + login + profil + deconnexion
  • components, service (fetch data)
  • Interaciton entre composants
    • Attribut, innerHTML, set
    • event output
    • partage de données: cas EventBus, singleton
• Tips sur les class: attribut (!!), # (!!), static, get/set, toString
• Suite front: lib/fw
• Intro backend: ssr, api

TAF

• Suite app front
• Intro backend