0% ont trouvé ce document utile (0 vote)
3 vues22 pages

Cours Javascript Nodejs

Ce document présente un cours complet sur JavaScript et Node.js, couvrant des sujets allant des fondamentaux aux bonnes pratiques. Il inclut des sections sur les fonctions, la programmation asynchrone, la manipulation du DOM, ainsi que la création d'API REST et l'utilisation de bases de données. Le contenu est structuré pour guider les développeurs, qu'ils soient débutants ou confirmés, dans leur apprentissage de ces technologies.

Transféré par

hqsm5gynzc
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
3 vues22 pages

Cours Javascript Nodejs

Ce document présente un cours complet sur JavaScript et Node.js, couvrant des sujets allant des fondamentaux aux bonnes pratiques. Il inclut des sections sur les fonctions, la programmation asynchrone, la manipulation du DOM, ainsi que la création d'API REST et l'utilisation de bases de données. Le contenu est structuré pour guider les développeurs, qu'ils soient débutants ou confirmés, dans leur apprentissage de ces technologies.

Transféré par

hqsm5gynzc
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

JS

JavaScript
01 - Les fondamentaux JavaScript

02 - Fonctions, portee & closures

& [Link]
03 - Objets, tableaux & destructuration

04 - Programmation asynchrone

Cours
05 - Le DOM & les Complet
evenements — Du débutant à confirmé

06 - Introduction a [Link]

07 -Pour
Modules
les &developpeurs
npm qui connaissent deja HTML, CSS & C++

08 - Creer une API REST avec Express

09 - Base de donnees avec [Link]

10 - Bonnes pratiques & projets

2026 - Formation JavaScript Progressive


JavaScript & [Link] — Cours Complet Formation Progressive

Table des matières

01 Les fondamentaux JavaScript


Variables & types · Opérateurs · Conditions & boucles · Comparaison avec C++

02 Fonctions, portée & closures


Déclaration de fonctions · Arrow functions · Portée et var/let/const · Closures

03 Objets, tableaux & déstructuration


Objets littéraux · Méthodes de tableau · Déstructuration · Spread & rest

04 Programmation asynchrone
Callbacks · Promises · Async / Await · Gestion des erreurs

05 Le DOM & les événements


Sélectionner des éléments · Modifier le DOM · Événements · Fetch API

06 Introduction à [Link]
Qu'est-ce que [Link] ? · Installation · Premier programme · Modules intégrés

07 Modules & npm


CommonJS vs ESM · npm & [Link] · Packages utiles · Créer un module

08 API REST avec Express


Installation Express · Routes & méthodes HTTP · Middlewares · Réponses JSON

09 Base de données
SQLite avec Node · MongoDB & Mongoose · CRUD complet · Exercice pratique

10 Bonnes pratiques & projets


Linting & Prettier · Structure de projet · Projet final guidé · Ressources

JavaScript & [Link] — Du débutant à confirmé Page 2


JavaScript & [Link] — Cours Complet Formation Progressive

01 Les fondamentaux JavaScript


Variables, types, opérateurs, conditions & boucles

Tu connais déjà le C++, donc tu as une bonne base. JavaScript partage beaucoup de concepts (conditions,
boucles, fonctions) mais avec une syntaxe plus souple et un typage dynamique. Contrairement au C++, pas
besoin de compiler : le navigateur ou [Link] exécute directement ton code.

Variables : var, let, const


JavaScript propose trois façons de déclarer une variable. Oublie var (ancien, plein de pièges). Utilise
toujours let ou const.
// const → valeur qui ne change pas (comme const en C++)
const nom = 'Ahmed'; // string
const age = 25; // number
const actif = true; // boolean
const rien = null; // null (vide volontaire)
let score = 0; // let → peut être réassignée
score = 10; // OK
// nom = 'Ali'; // ERREUR : const ne peut pas changer
■ En JS, une variable peut changer de type. score peut valoir 0 puis '10' (string). C'est le typage dynamique.

Les types primitifs


• number — tous les nombres (entiers ET décimaux) : 42, 3.14
• string — texte entre guillemets simples, doubles ou backticks : `Bonjour ${nom}`
• boolean — true / false
• null — absence intentionnelle de valeur
• undefined — variable déclarée mais non initialisée
• object — tout le reste (tableaux, objets, fonctions…)

Les template literals (backticks)


Une grande force de JS : intégrer des variables directement dans une chaîne grâce aux backticks ` et ${}.

const prenom = 'Nysrine';


const msg = `Bonjour ${prenom}, tu as ${age} ans !`;
[Link](msg); // → Bonjour Nysrine, tu as 25 ans !

Opérateurs
Les opérateurs arithmétiques (+, -, *, /, %) fonctionnent comme en C++. La grande différence : == vs ===.

// == compare les VALEURS (avec conversion de type)


[Link](5 == '5'); // true ← dangereux !

// === compare valeur ET type (à utiliser toujours)


[Link](5 === '5'); // false ← correct
[Link](5 === 5); // true
■■ Ne jamais utiliser == en JavaScript. Toujours utiliser === pour éviter les bugs de conversion de type.

JavaScript & [Link] — Du débutant à confirmé Page 3


JavaScript & [Link] — Cours Complet Formation Progressive

Conditions
La syntaxe est quasi-identique au C++.

const note = 15;

if (note >= 16) {


[Link]('Très bien');
} else if (note >= 12) {
[Link]('Bien');
} else {
[Link]('Peut mieux faire');
}

// Ternaire (comme C++)


const mention = note >= 10 ? 'Admis' : 'Refusé';
[Link](mention); // → Bien

Boucles
// Boucle for classique (identique C++)
for (let i = 0; i < 5; i++) {
[Link](i); // 0 1 2 3 4
}

// Boucle while
let compteur = 3;
while (compteur > 0) {
[Link](compteur);
compteur--;
}

// for...of (nouvelle syntaxe JS — parcourt un tableau)


const fruits = ['pomme', 'banane', 'cerise'];
for (const fruit of fruits) {
[Link](fruit);
}

Différences clés vs C++


• Pas de types déclarés (int, float…) — tout est dynamique • Pas de compilation — exécution directe • Les
strings sont des objets avec des méthodes : "hello".toUpperCase() • [Link]() remplace printf/cout

JavaScript & [Link] — Du débutant à confirmé Page 4


JavaScript & [Link] — Cours Complet Formation Progressive

02 Fonctions, portée & closures


Le cœur de JavaScript

3 façons de déclarer une fonction


// 1. Déclaration classique (function declaration)
function additionner(a, b) {
return a + b;
}
[Link](additionner(3, 4)); // 7

// 2. Expression de fonction
const multiplier = function(a, b) {
return a * b;
};

// 3. Arrow function (syntaxe moderne — à privilégier)


const diviser = (a, b) => a / b;
const saluer = nom => `Bonjour ${nom} !`; // un seul param → pas de ()
[Link](saluer('Ahmed')); // Bonjour Ahmed !
■ Les arrow functions sont plus courtes et n'ont pas leur propre 'this'. Tu les verras partout dans le code JS moderne.

Paramètres par défaut


function creerProfil(nom, role = 'utilisateur') {
return { nom, role }; // raccourci ES6 pour { nom: nom, role: role }
}
[Link](creerProfil('Ahmed')); // { nom: 'Ahmed', role: 'utilisateur' }
[Link](creerProfil('Nysrine', 'admin')); // { nom: 'Nysrine', role: 'admin' }

Portée : var, let, const


La portée définit où une variable est accessible. C'est crucial en JS.

// let/const → portée de bloc (comme C++)


{
let x = 10;
const y = 20;
[Link](x, y); // OK
}
// [Link](x); // ERREUR : x n'existe plus

// var → portée de FONCTION (à éviter !)


function test() {
if (true) {
var z = 99; // accessible partout dans test()
}
[Link](z); // 99 ← comportement surprenant !
}

Closures

JavaScript & [Link] — Du débutant à confirmé Page 5


JavaScript & [Link] — Cours Complet Formation Progressive

Une closure, c'est une fonction qui se souvient des variables de son contexte de création, même après que
ce contexte soit terminé. C'est l'une des fonctionnalités les plus puissantes de JS.

function creerCompteur() {
let compte = 0; // variable 'privée'
return function() {
compte++;
[Link](compte);
};
}

const compteur = creerCompteur();


compteur(); // 1
compteur(); // 2
compteur(); // 3
// 'compte' n'est pas accessible de l'extérieur → encapsulation !

Pourquoi les closures sont utiles ?


Elles permettent de créer des variables privées, des fonctions configurables, des modules. Tu les retrouves
partout : React hooks, callbacks, timers…

Fonctions d'ordre supérieur (Higher-Order Functions)


En JS, les fonctions sont des valeurs comme les autres. On peut les passer en paramètre ou les retourner.

// Passer une fonction en paramètre


const nombres = [1, 2, 3, 4, 5];

// map() : transformer chaque élément


const doubles = [Link](n => n * 2);
[Link](doubles); // [2, 4, 6, 8, 10]

// filter() : garder ceux qui passent le test


const pairs = [Link](n => n % 2 === 0);
[Link](pairs); // [2, 4]

// reduce() : combiner tous les éléments


const somme = [Link]((acc, n) => acc + n, 0);
[Link](somme); // 15

JavaScript & [Link] — Du débutant à confirmé Page 6


JavaScript & [Link] — Cours Complet Formation Progressive

03 Objets, tableaux & déstructuration


Structures de données modernes

Les objets littéraux


Un objet JS est une collection de paires clé/valeur. Pense à une struct en C++, mais plus flexible.
const personne = {
nom: 'Ahmed',
age: 28,
ville: 'Paris',
saluer() { // méthode dans l'objet
return `Je suis ${[Link]}`;
}
};

[Link]([Link]); // Ahmed
[Link](personne['age']); // 28 (accès par bracket)
[Link]([Link]()); // Je suis Ahmed

// Ajouter / modifier
[Link] = 'ahmed@[Link]';
[Link] = 29;

Déstructuration
Syntaxe moderne pour extraire des valeurs facilement.

// Déstructuration d'objet
const { nom, age, ville = 'Lyon' } = personne;
[Link](nom, age); // Ahmed 29

// Renommer la variable
const { nom: prenom } = personne;
[Link](prenom); // Ahmed

// Déstructuration de tableau
const couleurs = ['rouge', 'vert', 'bleu'];
const [prem, deux, trois] = couleurs;
[Link](prem); // rouge

// Ignorer un élément
const [, deuxieme] = couleurs;
[Link](deuxieme); // vert

Spread & Rest (...)


// Spread : étaler les éléments
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combine = [...arr1, ...arr2]; // [1,2,3,4,5,6]

// Copier un objet et modifier

JavaScript & [Link] — Du débutant à confirmé Page 7


JavaScript & [Link] — Cours Complet Formation Progressive

const user = { nom: 'Ahmed', role: 'user' };


const admin = { ...user, role: 'admin' }; // { nom:'Ahmed', role:'admin' }

// Rest : regrouper les arguments restants


function somme(...nombres) {
return [Link]((acc, n) => acc + n, 0);
}
[Link](somme(1, 2, 3, 4, 5)); // 15

Méthodes de tableau essentielles


const produits = [
{ nom: 'Stylo', prix: 2 },
{ nom: 'Cahier', prix: 5 },
{ nom: 'Livre', prix: 15 },
];

// find() : trouver le premier qui correspond


const cahier = [Link](p => [Link] === 'Cahier');
[Link](cahier); // { nom: 'Cahier', prix: 5 }

// some() : est-ce qu'au moins un vérifie ?


[Link]([Link](p => [Link] > 10)); // true

// every() : est-ce que tous vérifient ?


[Link]([Link](p => [Link] > 1)); // true

// sort() : trier
const triPrix = [...produits].sort((a,b) => [Link] - [Link]);
// Stylo(2), Cahier(5), Livre(15)

JavaScript & [Link] — Du débutant à confirmé Page 8


JavaScript & [Link] — Cours Complet Formation Progressive

04 Programmation asynchrone
Callbacks · Promises · Async/Await

JavaScript est mono-thread mais gère l'asynchronisme avec une boucle d'événements. C'est là une grande
différence avec le C++. Quand tu fais une requête réseau ou lis un fichier, JS ne bloque pas — il continue et
rappelle ta fonction quand c'est prêt.

1. Callbacks (ancien style)


// Un callback est une fonction passée en argument
// appelée une fois l'opération terminée
setTimeout(function() {
[Link]('3 secondes se sont écoulées');
}, 3000);

[Link]('Ce message s\'affiche AVANT les 3s !'); // s'affiche en premier !


■■ Le 'callback hell' : des callbacks imbriquées rendent le code illisible. Les Promises ont résolu ce problème.

2. Promises
Une Promise représente une valeur qui sera disponible plus tard. Elle a 3 états : pending, fulfilled, rejected.

// Créer une Promise


const chargerDonnees = new Promise((resolve, reject) => {
setTimeout(() => {
const succes = true;
if (succes) resolve({ nom: 'Ahmed', age: 28 });
else reject(new Error('Chargement échoué'));
}, 1000);
});

// Consommer une Promise avec .then() / .catch()


chargerDonnees
.then(data => [Link]('Reçu :', data))
.catch(err => [Link]('Erreur :', [Link]))
.finally(() => [Link]('Terminé dans tous les cas'));

3. Async / Await (à utiliser en priorité)


C'est du sucre syntaxique sur les Promises. Le code ressemble à du synchrone, beaucoup plus lisible.

// async devant une fonction → elle retourne toujours une Promise


async function getUtilisateur(id) {
try {
// await attend la résolution de la Promise
const reponse = await fetch(`[Link]
const data = await [Link]();
[Link](data);
return data;
} catch (erreur) {
[Link]('Impossible de charger :', [Link]);
}

JavaScript & [Link] — Du débutant à confirmé Page 9


JavaScript & [Link] — Cours Complet Formation Progressive

getUtilisateur(1);
// Exemple concret : attendre plusieurs Promises en parallèle
async function chargerTout() {
const [users, produits] = await [Link]([
fetch('/api/users').then(r => [Link]()),
fetch('/api/produits').then(r => [Link]()),
]);
[Link](users, produits);
}

Règle d'or
Toujours utiliser async/await avec try/catch. C'est propre, lisible, et facile à déboguer.

JavaScript & [Link] — Du débutant à confirmé Page 10


JavaScript & [Link] — Cours Complet Formation Progressive

05 Le DOM & les événements


Rendre les pages interactives

Le DOM (Document Object Model) est la représentation de ta page HTML sous forme d'arbre d'objets. JS
peut modifier cet arbre en temps réel pour rendre les pages interactives.

Sélectionner des éléments


// querySelector → premier élément trouvé (comme CSS)
const titre = [Link]('h1');
const btn = [Link]('#mon-bouton'); // par ID
const cards = [Link]('.card'); // tous

// querySelectorAll retourne une NodeList, convertis en tableau si besoin


const liste = [Link]([Link]('li'));

Modifier le DOM
// Changer le texte
[Link] = 'Nouveau titre';

// Changer le HTML
const div = [Link]('#contenu');
[Link] = 'Nouveau contenu';

// Modifier les styles


[Link] = '#2563eb';
[Link] = 'white';

// Ajouter / supprimer des classes CSS


[Link]('actif');
[Link]('desactive');
[Link]('visible'); // ajoute si absent, retire si présent

Événements
// Écouter un clic
[Link]('click', function(event) {
[Link]('Cliqué !', [Link]);
});

// Avec arrow function


[Link]('click', (e) => {
[Link](); // empêcher comportement par défaut
alert('Bouton cliqué !');
});

// Événements courants :
// 'click', 'dblclick', 'mouseover', 'keydown', 'submit', 'input', 'change'

Fetch API — requêtes HTTP depuis le navigateur

JavaScript & [Link] — Du débutant à confirmé Page 11


JavaScript & [Link] — Cours Complet Formation Progressive

async function afficherUtilisateur() {


try {
const rep = await fetch('[Link]
const user = await [Link]();

[Link]('#nom').textContent = [Link];
[Link]('#email').textContent = [Link];
} catch (e) {
[Link](e);
}
}

afficherUtilisateur();

JavaScript & [Link] — Du débutant à confirmé Page 12


JavaScript & [Link] — Cours Complet Formation Progressive

06 Introduction à [Link]
JavaScript côté serveur

[Link] est un environnement d'exécution JavaScript basé sur le moteur V8 de Chrome. Il permet d'utiliser
JavaScript en dehors du navigateur : serveurs web, scripts, outils CLI, bases de données…

Installation
# Télécharger depuis [Link] (LTS recommandé)
# Vérifier l'installation :
node --version # ex: v20.11.0
npm --version # ex: 10.2.4

Premier programme [Link]


// fichier : [Link]
const nom = [Link][2] || 'monde';
[Link](`Bonjour ${nom} !`);

// Lancer dans le terminal :


// node [Link]
// node [Link] Ahmed → Bonjour Ahmed !

Modules intégrés (built-in)


[Link] fournit de nombreux modules sans installation :

// Module fs → lecture/écriture de fichiers


const fs = require('fs');

// Lire un fichier (synchrone)


const contenu = [Link]('[Link]', 'utf8');
[Link](contenu);

// Écrire un fichier
[Link]('[Link]', 'Contenu à écrire');

// Version asynchrone avec Promise (Node 12+)


const fsP = require('fs').promises;
async function lireFichier() {
const texte = await [Link]('[Link]', 'utf8');
[Link](texte);
}
// Module path → manipulation de chemins
const path = require('path');
const dir = [Link](__dirname, 'dossier', '[Link]');
[Link](dir); // chemin absolu correct selon l'OS

// Module os → infos système


const os = require('os');
[Link]([Link]()); // 'linux', 'win32', 'darwin'
[Link]([Link]().length); // nombre de cœurs CPU

JavaScript & [Link] — Du débutant à confirmé Page 13


JavaScript & [Link] — Cours Complet Formation Progressive

Créer un serveur HTTP basique


const http = require('http');

const server = [Link]((req, res) => {


[Link](200, { 'Content-Type': 'text/html; charset=utf-8' });
[Link]('Bonjour depuis [Link] !');
});

[Link](3000, () => {
[Link]('Serveur lancé sur [Link]
});

// Ouvrir [Link] dans le navigateur

JavaScript & [Link] — Du débutant à confirmé Page 14


JavaScript & [Link] — Cours Complet Formation Progressive

07 Modules & npm


Organiser son code et utiliser des packages

Créer et importer ses modules


// fichier : [Link]
function additionner(a, b) { return a + b; }
const PI = 3.14159;

[Link] = { additionner, PI }; // CommonJS

// fichier : [Link]
const { additionner, PI } = require('./utils');
[Link](additionner(2, 3)); // 5
[Link](PI); // 3.14159

ESModules (syntaxe moderne)


// [Link] (ou type:module dans [Link])
export function saluer(nom) { return `Salut ${nom}`; }
export const VERSION = '1.0';

// [Link]
import { saluer, VERSION } from './[Link]';
[Link](saluer('Ahmed')); // Salut Ahmed

npm — Node Package Manager


# Initialiser un projet
npm init -y # crée [Link]

# Installer un package
npm install express # dépendance de production
npm install nodemon --save-dev # dépendance de développement

# Lancer un script
npm run start
npm run dev
// [Link] — exemple
{
"name": "mon-projet",
"version": "1.0.0",
"scripts": {
"start": "node [Link]",
"dev": "nodemon [Link]"
},
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"nodemon": "^3.0.2"
}

JavaScript & [Link] — Du débutant à confirmé Page 15


JavaScript & [Link] — Cours Complet Formation Progressive

}
■ nodemon redémarre automatiquement ton serveur dès que tu modifies un fichier. Indispensable en
développement.

Packages utiles à connaître


• express — framework web minimaliste (le plus populaire)
• dotenv — charger les variables d'environnement depuis .env
• axios — requêtes HTTP simplifiées
• bcrypt — hasher les mots de passe
• jsonwebtoken — authentification JWT
• mongoose — ODM pour MongoDB
• cors — gérer les CORS pour les API
• zod / joi — validation des données

JavaScript & [Link] — Du débutant à confirmé Page 16


JavaScript & [Link] — Cours Complet Formation Progressive

08 Créer une API REST avec Express


Le standard pour les serveurs [Link]

Express est le framework web le plus utilisé avec [Link]. Il simplifie la création de serveurs HTTP et d'API.

Installation & premier serveur


npm init -y
npm install express
// [Link]
const express = require('express');
const app = express();

// Middleware pour lire le JSON


[Link]([Link]());

// Route GET simple


[Link]('/', (req, res) => {
[Link]({ message: 'API en ligne !' });
});

[Link](3000, () => {
[Link]('Serveur sur [Link]
});

CRUD complet — exemple avec des utilisateurs


// Base de données simulée (tableau)
let users = [
{ id: 1, nom: 'Ahmed', email: 'ahmed@[Link]' },
{ id: 2, nom: 'Nysrine', email: 'nysrine@[Link]' },
];
let nextId = 3;

// GET /users → lister tous


[Link]('/users', (req, res) => {
[Link](users);
});

// GET /users/:id → un seul


[Link]('/users/:id', (req, res) => {
const id = parseInt([Link]);
const user = [Link](u => [Link] === id);
if (!user) return [Link](404).json({ erreur: 'Non trouvé' });
[Link](user);
});

// POST /users → créer


[Link]('/users', (req, res) => {
const { nom, email } = [Link];
const nouveau = { id: nextId++, nom, email };
[Link](nouveau);

JavaScript & [Link] — Du débutant à confirmé Page 17


JavaScript & [Link] — Cours Complet Formation Progressive

[Link](201).json(nouveau);
});

// PUT /users/:id → modifier


[Link]('/users/:id', (req, res) => {
const id = parseInt([Link]);
const idx = [Link](u => [Link] === id);
if (idx === -1) return [Link](404).json({ erreur: 'Non trouvé' });
users[idx] = { ...users[idx], ...[Link] };
[Link](users[idx]);
});

// DELETE /users/:id → supprimer


[Link]('/users/:id', (req, res) => {
const id = parseInt([Link]);
users = [Link](u => [Link] !== id);
[Link](204).send();
});

Middlewares
Un middleware est une fonction qui s'exécute entre la requête et la réponse. Très puissant pour la
réutilisation.
// Middleware de log
[Link]((req, res, next) => {
[Link](`${[Link]} ${[Link]} — ${new Date().toISOString()}`);
next(); // IMPORTANT : passer au middleware suivant
});

// Middleware d'authentification
function verifierToken(req, res, next) {
const token = [Link];
if (!token) return [Link](401).json({ erreur: 'Non autorisé' });
// vérifier le token...
next();
}

// Appliquer à une route spécifique


[Link]('/admin', verifierToken, (req, res) => {
[Link]({ message: 'Zone admin' });
});

JavaScript & [Link] — Du débutant à confirmé Page 18


JavaScript & [Link] — Cours Complet Formation Progressive

09 Base de données avec [Link]


SQLite & MongoDB

SQLite avec better-sqlite3


npm install better-sqlite3
const Database = require('better-sqlite3');
const db = new Database('ma_base.db');

// Créer une table


[Link](`
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
nom TEXT NOT NULL,
email TEXT UNIQUE NOT NULL
)
`);

// Insérer
const insert = [Link]('INSERT INTO users (nom, email) VALUES (?, ?)');
[Link]('Ahmed', 'ahmed@[Link]');

// Lire
const tous = [Link]('SELECT * FROM users').all();
[Link](tous);

const un = [Link]('SELECT * FROM users WHERE id = ?').get(1);


[Link](un);

MongoDB avec Mongoose


npm install mongoose
const mongoose = require('mongoose');

// Connexion
await [Link]('mongodb://localhost:27017/mabase');

// Schéma & Modèle


const userSchema = new [Link]({
nom: { type: String, required: true },
email: { type: String, required: true, unique: true },
age: { type: Number, min: 0 },
}, { timestamps: true });

const User = [Link]('User', userSchema);

// Créer
const nouveau = await [Link]({ nom: 'Ahmed', email: 'a@[Link]', age: 28 });

// Lire
const tous = await [Link]();

JavaScript & [Link] — Du débutant à confirmé Page 19


JavaScript & [Link] — Cours Complet Formation Progressive

const admin = await [Link](id);

// Modifier
await [Link](id, { age: 29 });

// Supprimer
await [Link](id);

SQLite ou MongoDB ?
SQLite → projets simples, données structurées, pas de serveur à installer. MongoDB → données flexibles
(JSON natif), projets qui évoluent, applications en production. Pour débuter, SQLite est plus facile à mettre
en place.

JavaScript & [Link] — Du débutant à confirmé Page 20


JavaScript & [Link] — Cours Complet Formation Progressive

10 Bonnes pratiques & projet final


Vers le code professionnel

Structure de projet recommandée


mon-projet/
■■■ src/
■ ■■■ routes/
■ ■ ■■■ [Link]
■ ■ ■■■ [Link]
■ ■■■ controllers/
■ ■ ■■■ [Link]
■ ■■■ models/
■ ■ ■■■ [Link]
■ ■■■ middlewares/
■ ■ ■■■ [Link]
■ ■■■ [Link]
■■■ .env ← variables d'environnement (NE PAS committer)
■■■ .gitignore
■■■ [Link]
■■■ [Link]

Variables d'environnement
npm install dotenv

# fichier .env
PORT=3000
DB_URL=mongodb://localhost:27017/mabase
JWT_SECRET=mon_secret_tres_long

# [Link]
require('dotenv').config();
const PORT = [Link] || 3000;

Gestion des erreurs globale


// Middleware d'erreur (4 paramètres → Express détecte auto)
[Link]((err, req, res, next) => {
[Link]([Link]);
[Link]([Link] || 500).json({
erreur: [Link] || 'Erreur serveur'
});
});

// Dans les routes, utiliser next(err) :


[Link]('/users/:id', async (req, res, next) => {
try {
const user = await [Link]([Link]);
[Link](user);
} catch (err) {
next(err); // transmis au middleware d'erreur

JavaScript & [Link] — Du débutant à confirmé Page 21


JavaScript & [Link] — Cours Complet Formation Progressive

}
});

Projet final : Mini API de blog


Construis une API REST avec les fonctionnalités suivantes :

• Authentification : POST /auth/register, POST /auth/login (JWT)


• Articles : CRUD complet (GET, POST, PUT, DELETE)
• Commentaires : ajouter/supprimer des commentaires sur un article
• Middleware : vérifier le token JWT pour les routes protégées
• Validation : vérifier les données entrantes

Ressources pour continuer


• MDN Web Docs — référence JS : [Link] • [Link] docs : [Link]/docs • [Link] :
[Link] • [Link] — cours très complet en français • FreeCodeCamp — exercices pratiques
gratuits • The Odin Project — parcours full-stack complet

Félicitations ! Tu as maintenant une base solide en JavaScript et [Link]. La clé, c'est la pratique
: code chaque jour, construis des projets réels, lis du code open-source. Bonne continuation ! ■

JavaScript & [Link] — Du débutant à confirmé Page 22

Vous aimerez peut-être aussi