En bref
Les bases du JavaScript tiennent en huit briques. Les variables se déclarent avec let (modifiable) ou const (constante) et stockent des nombres, des chaînes de caractères ou des booléens. Les opérateurs calculent et comparent (attention au triple égal === pour l’égalité stricte). Les conditions if/else if/else orientent le programme, les boucles for et while répètent, les fonctions regroupent du code réutilisable. Les tableaux rangent des valeurs ordonnées, les objets associent des propriétés — les deux structures reines du langage. Enfin, le DOM est la passerelle qui permet à ton code de modifier la page web en réaction aux événements (clics, saisies). Ton laboratoire est déjà installé : la console du navigateur (touche F12) exécute chaque essai instantanément.
Tout le web interactif — menus, formulaires, applications — repose sur les mêmes fondations. Ce guide des bases du JavaScript te les explique une par une, dans l’ordre où les apprendre, avec la console du navigateur comme terrain d’essai. C’est le compagnon de l’étape « bases du langage » de notre guide complet pour apprendre le JavaScript.
Variables, types et opérateurs : démarrer dans la console
Ouvre n’importe quelle page web, appuie sur F12, onglet « Console » : te voilà dans un interpréteur JavaScript. Une variable s’y déclare avec let quand sa valeur changera (let score = 0) ou const quand elle est définitive (const ville = « Lyon ») — le principe général est dans comprendre une variable. Les types de base : nombres, chaînes de caractères entre guillemets pour le texte, booléens true/false pour le vrai-faux.
Les opérateurs font le travail : + – * / pour calculer (le + colle aussi les chaînes bout à bout : « Bonjour » + prenom), et les comparateurs pour tester. Particularité à retenir dès le premier jour : utilise le triple égal === pour comparer — il vérifie la valeur ET le type, là où le double égal fait des conversions surprenantes. Les opérateurs logiques && (et), || (ou), ! (non) combinent les tests. Avec console.log() pour afficher, tu peux déjà expérimenter chaque notion en direct — prends l’habitude : une ligne tapée vaut dix lignes lues.
Conditions, boucles, fonctions : la logique du langage
Les conditions donnent au programme ses embranchements : if (age >= 18) { … } else { … }, avec else if pour les cas intermédiaires — la mécanique complète est dans comprendre if/else. Contrairement à Python, JavaScript délimite ses blocs par des accolades { } — l’indentation reste une politesse pour les humains, pas une obligation pour la machine.
Les boucles répètent : for (let i = 0; i < 10; i++) pour un nombre de tours connu, while pour « tant que la condition tient », et for…of pour parcourir directement une collection — approfondis avec comprendre une boucle. Les fonctions emballent la logique réutilisable : function calculeTTC(prix) { return prix * 1.2; } se définit une fois et s’appelle partout. JavaScript adore les fonctions — tu les passeras même en argument à d’autres fonctions, un réflexe central du langage. Le concept dans comprendre une fonction, la pratique complète (fonctions fléchées comprises) dans les fonctions en JavaScript : guide pratique.
Tableaux, objets et DOM : rendre une page vivante
Les données groupées vivent dans deux structures. Le tableau range des valeurs ordonnées — const courses = [« pain », « lait »] — accessibles par position (courses[0]) et manipulables avec push, pop et consorts : voir comprendre un tableau (array). L’objet associe des propriétés nommées — const contact = { nom: « Sami », ville: « Lyon » } — et se lit avec contact.ville. Tableaux d’objets : la structure de 90 % des données du web.
Reste la magie propre à JavaScript : le DOM (Document Object Model), la représentation vivante de la page HTML que ton code peut modifier. document.querySelector() attrape un élément, .textContent change son texte, .classList bascule ses styles CSS, et addEventListener() écoute les événements — clics, saisies, survols — pour déclencher tes fonctions. C’est exactement le pont entre « je connais la syntaxe » et « ma page réagit ». Teste-le sur ton premier site, puis enchaîne les 10 exercices de JavaScript et les 5 projets d’un week-end — la to-do list en tête, le rite de passage de tout développeur web.
Pour sceller ces bases, réalise ce premier exercice DOM complet — une dizaine de lignes qui mobilisent tout ce que tu viens d’apprendre. Crée une page HTML avec un titre affichant zéro et deux boutons « + » et « − ». Côté JavaScript : une variable let compteur = 0, une fonction qui met à jour le texte du titre, et deux écouteurs d’événements qui incrémentent ou décrémentent avant d’appeler la mise à jour. Variables, fonctions, événements, DOM : la boucle complète du front-end tient dans ce petit compteur, et le réaliser sans tutoriel est le meilleur test de tes acquis. Bloqué ? Trois habitudes de débogage à installer dès maintenant : console.log tes variables à chaque étape pour voir ce qui se passe vraiment, lis les erreurs de la console (elles donnent la ligne exacte du problème), et vérifie que ton script se charge après le HTML qu’il manipule — le bug numéro un du premier jour, quand le code cherche un bouton qui n’existe pas encore au moment où il s’exécute. Prends aussi le réflexe des petits pas testés : une ligne, un essai dans la console, une ligne de plus — jamais vingt lignes d’un coup suivies d’une prière. Ce rythme d’artisan, ligne après ligne, vérification après vérification, est exactement celui des développeurs professionnels ; l’adopter dès les bases te distingue déjà de la majorité des débutants, et il rendra chaque projet à venir plus serein.
Questions fréquentes
Quelles sont les notions de base à apprendre en JavaScript ?
Dans l’ordre : variables (let/const) et types, opérateurs (avec l’égalité stricte ===), conditions if/else, boucles for et while, fonctions, tableaux et objets, puis le DOM et les événements pour interagir avec la page. Ce socle couvre l’essentiel du JavaScript front-end de débutant.
Quelle différence entre let et const ?
let déclare une variable dont la valeur pourra changer (un score, un compteur) ; const déclare une constante qui ne sera pas réassignée (un nom, une configuration). Le réflexe moderne : const par défaut, let seulement quand la réassignation est nécessaire.
Pourquoi utiliser === plutôt que == en JavaScript ?
Le triple égal compare la valeur ET le type, sans conversion cachée : c’est prévisible. Le double égal convertit les types avant de comparer, ce qui produit des résultats surprenants. Adopter === dès le début évite toute une famille de bugs classiques.
C’est quoi le DOM, en une phrase simple ?
Le DOM est la représentation vivante de la page HTML que JavaScript peut lire et modifier : sélectionner un bouton, changer un texte, réagir à un clic. C’est la passerelle qui transforme une page statique en application interactive.
Sources
- MDN Web Docs — la référence JavaScript en français
- freeCodeCamp — cours et exercices JavaScript gratuits
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.