Cours

JavaScript Leçon 1

Variables et console

Où s'exécute JavaScript, comment l'ajouter à une page, et les variables avec let et const.

15 min

À la fin de cette leçon, tu sauras

  • Ajouter un script à une page HTML
  • Afficher des valeurs dans la console
  • Choisir entre let et const

JavaScript, dans le navigateur

PHP s'exécute sur le serveur, avant l'envoi de la page. JavaScript, lui, s'exécute dans le navigateur, une fois la page affichée. Il sert à la rendre interactive : réagir à un clic, afficher ou cacher un élément, vérifier un formulaire avant l'envoi… C'est le seul langage que tous les navigateurs comprennent.

Ajouter un script

<!-- à la fin du <head> -->
<script src="script.js" defer></script>

defer attend que la page soit entièrement chargée avant d'exécuter le script, sinon il risque de chercher des éléments qui n'existent pas encore.

La console

console.log("Bonjour !");
console.log(2 + 3);

console.log affiche dans la console du navigateur : ouvre-la avec F12, onglet « Console ». C'est l'outil n°1 pour comprendre ce que fait ton code et trouver les erreurs, qui s'y affichent en rouge.

let et const

const prenom = "Léa";
let score = 0;

score = score + 10;
score += 5;          // raccourci : score vaut 15

console.log(`${prenom} a ${score} points`);
  • const crée une variable qu'on ne réaffectera pas : c'est le choix par défaut ;
  • let crée une variable qui va changer ;
  • les textes entre accents graves `…` acceptent des variables avec ${…}, comme l'interpolation en PHP ou en C#.

Attention : dans de vieux tutoriels, tu verras var. Il a des comportements surprenants : utilise toujours let ou const.

À toi de jouer

  • crée une constante pseudo qui contient un texte ;
  • crée une variable vies avec let, qui vaut 3 ;
  • enlève une vie à vies ;
  • affiche dans la console une phrase avec les deux, entre accents graves.
script.js
  • pseudo est une constante qui contient un texte
  • vies est créée avec let et vaut 3
  • On enlève une vie
  • console.log affiche un texte entre accents graves avec ${…}
  • Pas de var
Bloqué ? Voir une solution 
const pseudo = "Skap";
let vies = 3;

vies -= 1;
console.log(`${pseudo} a encore ${vies} vies`);

Quiz

1Où s'exécute JavaScript dans une page web ?
2Quand utiliser const ?
3Comment ouvrir la console du navigateur ?