Écrire un premier script, l'exécuter et le déboguer avec la console des outils de développement, et découvrir les grandes librairies et frameworks de l'écosystème JavaScript.
Un stagiaire a écrit son premier script pour afficher un message de bienvenue sur le site de sa coopérative, mais rien ne s'affiche et il ne sait pas pourquoi. Le premier réflexe d'un développeur JavaScript : ouvrir la console (F12). C'est là que s'affichent les messages du programme et les erreurs.
La page de la coopérative et son script. On appuie sur F12 : les outils de développement s'ouvrent, onglet Console.
F12) ;console.log('Bonjour'); // un message
console.log(2 + 3); // 5
console.warn('Attention'); // en jaune
console.error('Problème'); // en rouge
console.table([{ ville: 'Agadir' }, { ville: 'Fès' }]); // un tableau
On peut aussi taper du JavaScript directement dans la console pour tester une instruction.
Uncaught ReferenceError: consol is not defined at script.js:9
Le message dit quoi (le type d’erreur), pourquoi et où (le fichier et la ligne). Une erreur arrête le script : les lignes suivantes ne s’exécutent pas.
document.querySelector('#message').textContent = 'Bienvenue !';
On verra en détail à la partie C comment trouver et modifier les éléments de la page.
| Outil | Rôle |
|---|---|
| jQuery | librairie qui simplifie la manipulation de la page et AJAX |
| React | librairie d’interfaces en composants (Meta) |
| Vue.js | framework progressif |
| Angular | framework complet (Google) |
| Node.js | JavaScript côté serveur |
| npm | gestionnaire de paquets |
Tous reposent sur le même langage : bien maîtriser JavaScript « pur » (vanilla JS) est la priorité.
Quand quelque chose ne va pas, la voiture allume un voyant. La console du navigateur est ce tableau de bord : elle affiche vos messages (console.log) et les erreurs en rouge, avec le numéro de la ligne.
console.log('Le script démarre'); console.log(2 + 3); // 5 consol.log('oups'); // ReferenceError : consol is not defined
Un menuisier n'invente pas sa perceuse. Les développeurs utilisent des librairies déjà écrites : jQuery pour manipuler la page plus simplement, React, Vue ou Angular pour construire de grandes applications.
La console affiche : « Uncaught TypeError: Cannot set properties of null (setting 'textContent') at script.js:4 ». Que s'est-il passé ?
null veut dire « rien n'a été trouvé ».
À la ligne 4, document.querySelector(...) n'a trouvé aucun élément : il a renvoyé null. Causes probables : le sélecteur est mal écrit (#mesage au lieu de #message), ou le script s'exécute avant que l'élément existe (script placé dans le <head> sans defer).
Citez trois onglets des outils de développement (F12) et leur usage.
Éléments (Elements) : voir et modifier le HTML et le CSS de la page en direct Console : messages, erreurs, et tester des instructions JavaScript Sources (Sources/Débogueur) : poser des points d'arrêt et exécuter pas à pas Réseau (Network) : voir les requêtes envoyées au serveur et leurs réponses
Classez jQuery, React, Vue.js et Angular, et dites lequel vous étudierez dans ce module.
jQuery : librairie, simplifie la manipulation de la page (étudiée en partie E) React : librairie pour construire des interfaces en composants (2e année) Vue.js : framework progressif, facile à prendre en main Angular : framework complet, très structuré (Google)