Formation Javascript

Public concerné

Graphiste, ou toute personne désirant connaître les bases nécessaires à la réalisation de sites web en HTML5 et CSS3.

Niveau requis

Être familier avec HTML et CSS. Des notions minimales dans un langage de programmation (idéalement JavaScript) sont un plus.

Programme

• PARTIE 1 La langage javascript : introduction
• Les technologies et le marché du développeur front-end
• Javascript, environnements techniques et usage
• Histoire
• PARTIE 2 Les variables
• Les variables, définition et usage
• Les mots-clé let, var et const
• Assigner une valeur à une variable
• Les types primitifs (string, number, boolean)
• Les fonctions de conversion de type
• Exercice : calculatrice du commerçant
• Pourquoi dit-on que javascript est un langage objet
• Les arrays (tableaux)
• Les objets
• L'objet Date
• Exercice : afficher la date et l'heure
• PARTIE 3 Les conditions : exécuter du code ou non
• Les conditions : définition et cas d'usage
• Les opérateurs de comparaison
• Les 3 structures conditionnelles
• Exercice : calculatrice numérique
• La syntaxe Switch Case
• Exercice : Calculatrice numérique avec plusieurs choix
• TP Final : Création d'un jeu web utilisant les variables et les conditions
• PARTIE 4 Les boucles : répéter du code
• Les boucles : définition et cas d'usage
• La boucle for : répéter du code un nombre de fois connu
• Exercice : afficher une liste de followers twitter
• La boucle while : répéter du code tant qu'une valeur vaut true
• La boucle do while
• Exercice : demander à l'utilisateur de saisir un nombre obligatoirement
• La boucle for of (JS ES6/7)
• Algorithmie : notions et application
• TP Final : Créer un algorithme de recherche dans un texte
• PARTIE 5 Les fonctions : organiser mieux votre code
• Les fonction natives JS et la documentation
• Les fonctions utilisateur, utilité
• Créer une fonction et l'exécuter
• Les paramètres
• Exercice : créer une fonction simple sans paramètre
• Exercice: créer une fonction qui accepte des paramètres
• Le mot-clé return
• Exercice : créer une fonction qui calcule la distance entre 2 points et retourne un résultat
• PARTIE 6 Travaux pratiques programmation : Créer le système d'un panier e-commerce
• Créer une donnée de type Array qui contient des noms de produits
• Créer une function qui ajoute un produit au panier
• Créer une function qui vide le panier
• Créer une function qui retire un produit du panier
• Créer une fonction qui retourne le nombre de produit
• Rappels et QCM sur la programmation avec Javascript
• PARTIE 7 Javscript et les pages web : créer de l'interaction
• Le Document Object Model (DOM)
• Savoir sélectionner des éléments HTML
• Savoir modifier la page web
• Savoir gérer les évènements utilisateur (souris, clavier)
• L'objet event
• La variable this
• Mettre en place des animations
• Exercice : mettre en place des interactions définies sur une page web
• TP : ajouter de l'interaction sur un système de panier E-commerce
• Rappels et QCM sur l'interaction
• PARTIE 8 Requêter une API
• introduction : le monde des APIs
• Asynchrone : principe et usage d'AJAX
• Les formats de données et les fonctions de conversion en objet Javascript exploitable
• Requêter un serveur avec l'objet XMLHttpRequest
• Les promesses et async await
• Utiliser l'interface fetch pour réaliser des requêtes AJAX
• exercice : réaliser des requêtes AJAX simples / parralèles / ou en cascade
• PARTIE 9 Aller plus loin
• Gérer les dépendances avec NPM
• Coder en ES6/7 : mettre en place un transpileur

Modalités pratiques

Travaux pratiques
Création d'une application fil rouge avec les derniers standards : standalone components, l'API Signal pour gérer la réactivité, la syntaxe de control flow.

Méthodes pédagogiques
Chaque nouveau concept théorique sera appliqué immédiatement de façon pratique.

Modalités d'évalutation

null