Oh my code, je parle le JavaScript!

Oh my code, je parle le JavaScript!

Avant-propos

Sommaire

1. Je découvre JavaScript

Démarrer l’aventure JavaScript

Je crée le projet type

Je crée les dossiers

Je crée les fichiers nécessaires au modèle

J’ajoute le HTML

J’ajoute le CSS

J’ajoute le JavaScript

Comment fonctionne JavaScript?

HTML, CSS, JavaScript : les rôles de chacun

Le DOM

JavaScript en action

2. Je m’initie à JavaScript

Premiers pas dans JavaScript

J’écris en JavaScript

Les variables

Je crée un mini-jeu

J’écris le pseudo-code

Je sélectionne et je stocke un seul élément

Je soumets l’élément à une action

J’organise le code avec des fonctions

Je sélectionne et je stocke le cercle bleu

Je soumets le cercle bleu à une action

Je crée une fonction

J’affiche le résultat dans la page

Je mets en place un chronomètre

3. J’alterne les états

Projet 1 – Bannière

Je crée la structure HTML/CSS

Je fais disparaître la bannière au clic

Projet 2 – Le bouton Abonné de YouTube

Je crée la structure HTML/CSS

Je modifie les éléments au clic

Projet 3 – Alterner entre dark mode et light mode

Je crée la structure HTML/CSS

Je déplace les éléments au clic

4. Je fais apparaître et disparaître du contenu

Projet 4 – Le menu burger

Je crée la structure HTML/CSS

Je fais apparaître la fenêtre modale au clic

Projet 5 – Fenêtre modale au défilement

Je crée la structure HTML/CSS

J’affiche la modale au défilement

Projet 6 – Toast notification

Je crée la structure HTML/CSS

J’affiche une notification au clic

5. Je boucle

Projet 7 – Questions fréquentes (accordéon)

Je crée la structure HTML/CSS

Au clic, je fais apparaître la réponse

Projet 8 – Fiche produit

Je crée la structure HTML/CSS

J’ajoute les actions avec JavaScript

Projet 9 – Blog

Je crée la structure HTML/CSS

Je sélectionne et je stocke les éléments

Je crée une liste d’articles avec JavaScript

6. Je récupère les données de l’utilisateur

Projet 10 – Formulaire

Je crée la structure HTML/CSS

Je récupère les informations du visiteur

Projet 11 – ToDoList

Je crée la structure HTML/CSS

Je gère la création de la tâche (create)

Je gère l’affichage de la tâche (read)

Je gère la suppression de la tâche (delete)

Je gère la modification de la tâche

7. Je stocke des données dans le navigateur

J’utilise le stockage local

Le principe

Les bénéfices

Les usages

Les stockages disponibles

Le fonctionnement

Projet 12 – Bannière avec stockage local

Je crée la structure HTML/CSS

J’utilise le stockage local

Projet 13 – Site de voyage

Je crée la structure HTML/CSS

Je récupère et stocke la sélection

J’affiche les résultats correspondants

8. J’utilise les données d’autres sites (API)

Je découvre le concept des API

Le principe

Le fonctionnement

Projet 14 – artistFinder

Je crée la partie HTML/CSS

J’affiche les données d’un artiste

9. Je vais plus loin

Application monopage

Progressive web app

TypeScript

Liens utiles

Index