Bases du Javascript
Comprendre javascript
Qu’est ce que le javascript ?
Le JavaScript est un langage de programmation principalement utilisé pour rendre les pages web interactives et dynamiques.
- Fonctionnement : Il s’exécute directement dans le navigateur web (Chrome, Firefox, Safari…), sans besoin d’installation particulière.
- Rôle principal :
- Modifier du contenu d’une page sans la recharger (par ex. afficher un message d’erreur en direct dans un formulaire).
- Réagir aux actions de l’utilisateur (clics, frappes au clavier, défilement…).
- Animer des éléments (menus, images, transitions).
- Communiquer avec des serveurs pour récupérer ou envoyer des données (ex : chat en ligne, réseaux sociaux).
En résumé :
Le JavaScript est le langage qui donne vie aux pages web. HTML construit la structure, CSS habille visuellement, et JavaScript apporte l’interactivité.
Comment agit le javascript sur les balises html et le css ?
1. HTML = la structure
HTML définit les balises (titres, paragraphes, images, boutons…).
Ici, on a un paragraphe avec l’identifiant texte
2. CSS = l’apparence
CSS s’occupe du style (couleurs, tailles, polices, marges…).
Cet exemple rend le texte en bleu et en taille 20px.
3. JavaScript = l’action
JavaScript permet de modifier dynamiquement à la fois le contenu HTML et le style CSS.
Il utilise le DOM (Document Object Model), une sorte de représentation de la page entière, que javascript peut manipuler.
En résumé :
- HTML construit les éléments (les briques).
- CSS définit leur apparence (la peinture).
- JavaScript agit comme le cerveau : il peut changer la structure HTML (ajouter, supprimer, modifier des balises) et modifier le CSS (changer les styles en direct).
Lier un fichier JavaScript à sa page HTML
Pour qu’un code JavaScript fonctionne avec ton site web, il faut d’abord le lier à ta page HTML. Cela se fait avec la balise <script> :
→ script.js est à remplacer par le vrai nom de ton fichier.
Placement du <script> dans ta page HTML
Un script js bloque le navigateur tant qu’il est en cours de lecture. Il faut donc s’assurer que tout le contenu HTML est déjà chargé avant que le JavaScript ne s’exécute.
En bas du <body> :
Historiquement, on plaçait la balise <script> juste avant la fermeture du </body>.
Si on ne l’utilise plus aujourd’hui, il fonctionne toujours ! Il est juste moins optimisé.
Dans le <head> avec defer :
Aujourd’hui, la méthode recommandée est de placer les scripts dans le <head> avec l’attribut defer.
Comment ça marche ?
- Le fichier `script.js` est téléchargé en parallèle du HTML (donc plus rapide).
- Mais son exécution est différée : il attend que le HTML soit complètement chargé avant de s’exécuter.
- Résultat : pas de blocage du rendu, et le JavaScript a accès à tous les éléments de la page.
Bases de la syntaxe javascript
L’indentation en JavaScript
L’indentation consiste à décaler certaines lignes de code pour rendre ton programme plus lisible et plus simple à comprendre. Comme en HTML, pense la comme une hiérarchie visuelle : le code imbriqué doit apparaître plus à droite que le code de niveau supérieur.
Bonne pratique :
Ajoute un retrait (souvent une tabulation ou quelques espaces) chaque fois que tu écris une nouvelle ligne à l’intérieur d’une instruction JavaScript. On verra des exemples concrets un peu plus loin.
Les commentaires en JavaScript
Un commentaire est une note intégrée dans ton code pour l’expliquer, sans être exécutée par le navigateur. C’est uniquement pour toi (ou d’autres développeurs) afin de mieux comprendre et maintenir le script.
En JavaScript, il existe 2 types de commentaires :
Monoligne : commence par //
Multiligne : entouré de /* … */
Note : Tu peux aussi utiliser /* … */ pour un commentaire sur une seule ligne, mais la convention est plutôt d’utiliser // dans ce cas.
Comprendre les points-virgules en JavaScript
Avant d’apprendre à coder, arrêtons-nous sur une question qui divise les développeurs : faut-il mettre un point-virgule après chaque instruction en JavaScript ?
Certains affirment qu’il est obligatoire, d’autres qu’il est souvent inutile. En réalité, JavaScript repose sur des instructions (déclarations, conditions, boucles, etc.) et le point-virgule sert normalement à marquer leur fin. Cependant, le langage intègre un mécanisme d’insertion automatique de points-virgules : il « devine » la fin d’une instruction et complète le code si nécessaire. C’est pourquoi certains s’en passent. Mais cette insertion obéit à des règles précises. Sans bien les connaître, on s’expose à des erreurs ou à un code non fonctionnel.
En résumé :
- Si tu débutes ou si tu codes en équipe → mets un point-virgule partout (plus sûr, plus clair)
- Si tu maîtrises parfaitement JavaScript et que tu bosses sur un projet perso → tu peux t’en passer, mais il faut connaître les pièges
console.log() : l’outil essentiel pour tester et débuguer son code JavaScript
console.log() est une fonction intégrée en JavaScript qui sert à afficher des informations dans la console du navigateur.
Qu’est-ce que la console ?
La console est un outil pour les développeurs, intégré dans les navigateurs (Chrome, Firefox, Edge…).
On y accède généralement avec F12 ou Ctrl + Shift + I (ou Cmd + Option + I sur Mac), onglet Console.
C’est là que JavaScript peut afficher des messages, des variables, des erreurs, etc.
Tu peux y accéder directement depuis ton navigateur également.
- Avec google chrome par exemple :
- Clic droit -> inspecter (comme pour l’html/css)
- Et choisis l’onglet « Console »
Affichage en console
Afficher une string en console
Tu peux utiliser console.log() pour voir ce que contient une variable :
C’est très utile pour déboguer (comprendre pourquoi un code ne fonctionne pas).
Afficher plusieurs valeurs en même temps :
Tu peux combiner texte + variable :
console.log() sait aussi afficher des structures plus complexes :
En résumé :
console.log()sert à écrire dans la console- C’est l’outil principal des développeurs pour tester et débuguer leur code
- On peut y afficher du texte, des nombres, des variables, des tableaux, des objets…
En pratique : dès que tu veux savoir “qu’est-ce que contient ma variable à ce moment-là ?”, tu mets un console.log().
Notions Courantes
Les variables
En JavaScript, pour déclarer une variable, on utilise un mot-clé réservé (reserved keyword).
Les trois possibles sont : var, let et const.
Mot-clé let
let a été introduit en 2015
- Sa portée est limitée au bloc dans lequel elle est déclarée ({ … }).
- Tu peux réassigner une nouvelle valeur à une variable let.
- Contrairement à var, let est plus prévisible et évite les erreurs liées au hoisting.
Bonne pratique :
- On utilise let quand la valeur de la variable doit changer au cours du programme.
Mot-clé const
const ressemble à let, avec une différence majeure : tu ne peux pas réassigner une nouvelle valeur à la variable.
- La portée est aussi limitée au bloc.
- Attention : si la variable contient un objet ou un tableau, tu ne peux pas changer la variable elle-même, mais tu peux modifier le contenu de l’objet/tableau.
Bonne pratique
On utilise const par défaut, et let seulement si on sait que la valeur doit changer (variable de score, chrono etc…). Cela rend le code plus clair et plus sûr.
Mot-clé var
var est le mot-clé historique de javascript (avant 2015).
- Sa portée (scope) est particulière : une variable déclarée avec var existe dans toute la fonction où elle est déclarée, même si elle est définie dans un bloc (if, { … }).
- Les variables var sont aussi “hissées” (hoisting) : JavaScript les place en haut du code avant l’exécution, mais leur valeur est initialisée à undefined.
Cela peut provoquer des comportements surprenants et des bugs.
Bonne pratique :
- Aujourd’hui, on n’utilise plus var dans le code moderne car il rend la logique difficile à suivre.
- Mais comme tu peux encore en croiser dans des anciens scripts ou sur internet, il est important de savoir ce que c’est.
En résumé :
console.log()sert à écrire dans la console- C’est l’outil principal des développeurs pour tester et débuguer leur code
- On peut y afficher du texte, des nombres, des variables, des tableaux, des objets…
En pratique : dès que tu veux savoir “qu’est-ce que contient ma variable à ce moment-là ?”, tu mets un console.log().
Les types de données en JavaScript
En JavaScript, chaque valeur a un type. Connaître les types courants permet de mieux comprendre ce qu’on manipule dans son code.
Voici les principaux types à connaître :
String (chaîne de caractères)
Un texte, entouré de guillemets simples ‘…’, doubles « … », ou backticks `…`.
Number (nombre)
Il n’existe qu’un seul type numérique en JS : pas de différence entre entier et décimal.
Boolean (vrai ou faux)
Très utile pour les conditions.
Undefined
Valeur par défaut d’une variable déclarée mais pas encore initialisée.
Null
Valeur vide volontaire, utilisée pour dire “aucune valeur”.
Object
Structure qui permet de stocker des données sous forme de paires clé/valeur.
Array (tableau)
Liste ordonnée de valeurs, notée entre crochets […].
Les opérateurs courants
Pour manipuler ces types, voici les opérateurs les plus utilisés :
Arithmétiques
Ils servent à effectuer des calculs sur des nombres.
Concaténation (chaînes)
On peut utiliser + pour coller plusieurs chaînes de caractères entre elles.
Comparaison
Ces opérateurs comparent deux valeurs et renvoient true ou false.
Logiques
Ils permettent de combiner ou d’inverser des conditions.
