JavaScript
Le mémo de JavaScript : variables, types, conditions, boucles, fonctions, tableaux, objets, DOM, asynchrone et modules.
Ce mémo résume les bases de JavaScript. Chaque section renvoie au cours qui l'explique en détail.
Variables et types
const titre = 'Crêpes' // ne sera pas réaffectée
let portions = 4 // pourra changer
console.log(`${titre} pour ${portions}`)
| Type | Exemple |
|---|---|
string | 'sel' |
number | 250, 3.5 |
boolean | true, false |
undefined | variable sans valeur |
null | absence voulue |
Détails : Premiers pas en JavaScript.
Conditions et boucles
| Besoin | Syntaxe |
|---|---|
| Comparer | ===, !==, <, >= |
| Combiner | && (et), || (ou), ! (non) |
| Choisir | if (...) {} else if (...) {} else {} |
| Deux valeurs | condition ? a : b |
| Nombre de tours connu | for (let i = 0; i < n; i++) {} |
| Tant que | while (condition) {} |
| Parcourir une liste | for (const x of liste) {} |
Détails : Conditions et boucles.
Fonctions
function doubler(x) { return x * 2 }
const tripler = (x) => x * 3
const saluer = (nom = 'cuisinier') => `Bonjour ${nom}`
Détails : Les fonctions.
Tableaux et objets
const recettes = [{ id: 1, titre: 'Crêpes', minutes: 20 }]
recettes.map((r) => r.titre) // transformer
recettes.filter((r) => r.minutes < 30) // sélectionner
recettes.find((r) => r.id === 1) // trouver le premier
const { titre } = recettes[0] // déstructuration
const copie = { ...recettes[0], minutes: 25 } // spread
Détails : Tableaux et objets.
DOM et événements
| Action | Code |
|---|---|
| Sélectionner un élément | document.querySelector('#id') |
| Sélectionner plusieurs éléments | document.querySelectorAll('.classe') |
| Changer le texte | el.textContent = '...' |
| Gérer une classe | el.classList.add('x'), remove, toggle |
| Créer et ajouter | document.createElement('li'), liste.append(li) |
| Écouter un événement | el.addEventListener('click', (event) => {}) |
| Bloquer l'envoi d'un formulaire | event.preventDefault() |
Détails : Le DOM et les événements.
Asynchrone et modules
script.js
import { prixTTC } from './prix.js'
async function charger() {
try {
const reponse = await fetch('/api/recettes')
if (!reponse.ok) throw new Error(`Erreur ${reponse.status}`)
return await reponse.json()
} catch (erreur) {
console.error(erreur)
}
}
Dans la page : <script type="module" src="script.js"></script>. Dans le fichier prix.js, export expose ce que les autres fichiers peuvent importer.
Détails : Asynchrone et modules.
Sources officielles
Ensuite
- Projet
- Lignes de code
- Niveau
- 3e étage
- Appartement
- JavaScript
- Pièce
- 7/7
- Plan n°
- js/index