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.
