Apprendre JS : Introduction
À quoi sert JavaScript ? Où écrire son code JS ? On fait le point ensemble !
Généralités sur le langage
Rôle du JavaScript
Le rôle de JavaScript est simple : apporter une touche interactive et/ou dynamique à une page web, qui sans cela serait figée.
Cela se traduit généralement par :
- La manipulation du DOM (Document Object Model), avec l’ajout, la modification ou encore la suppression d’éléments HTML.
- La manipulation du style, avec l’ajout, la modification ou encore la suppression de propriétés CSS (via des animations ou pas).
- La gestion des événements. Il s’agit du déclenchement d’actions en fonction des interactions de l’utilisateur (clic, survol, saisie clavier…).
- L’écriture d’algorithmes (variables, tableaux, fonctions, raisonnements logiques et conditionnels…).
- La collecte d’informations de navigations (cookies, durée de session…).
- Le stockage de données en local (dans la mémoire du navigateur).
- …
Langage orienté prototype
Le JavaScript est un langage orienté prototype, un sous-type de la Programmation Orientée Objet.
Les prototypes sont une mécanique de JavaScript qui permet aux objets JavaScript d’avoir un prototype objet d’où il hérite des méthodes et des attributs.
Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage.
C’est via cette chaîne de prototypage que JavaScript tire son potentiel.
Plus grossièrement, quand on manipulera du texte par exemple, JavaScript nous offrira tout un tas de fonctionnalités pour faciliter son traitement, comme :
- Connaître le nombre de caractères qu’il contient
- Savoir s’il contient un certain mot
- Le transformer en minuscule
- Remplacer un caractère
- …
Il en sera de même pour tout autre élément que nous manipulerons en JavaScript.
Environnement de développement
Le JavaScript est un langage de développement web côté client, son environnement de développement est donc minimaliste puisqu’il ne se résume qu’à :
- Un éditeur de code
- Un navigateur web (Chrome, Firefox, Safari…)
Où écrire son code JavaScript
Deux types de fichiers sont capables d’interpréter du code JavaScript : les fichiers .html et les fichiers .js.
❌ Dans un fichier .html
Il est possible de placer son code JS dans un fichier HTML avec la balise <script>. Elle se place dans l’en-tête du fichier (entre les balises <head>) ou bien à la fin du <body>.
<!DOCTYPE html>
<html>
<head>
<script>...</script>
</head>
<body>
<script>...</script>
</body>
</html>
✅ Dans un fichier .js
La solution optimale consiste à écrire son code JS dans un fichier distinct, portant l’extension .js, puis, à l’intégrer dans le document .html avec la balise <script>.
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Comme pour la balise HTML <a>, href est ici utilisé pour spécifier le chemin vers le fichier de script en question.
Cette approche permet de mieux structurer et maintenir son code.
<head> VS <body>
Nous avons vu précédemment qu’un script ou un lien vers un fichier .js pouvait être écrit dans le <head>, mais aussi dans le <body>. Mais alors, quelle est la différence ? 🤔
Gardez en tête que les navigateurs exécutent le code JS ligne par ligne. Ainsi, plus une balise <script> est chargée à la fin d’un fichier HTML, plus le navigateur va différer son chargement, ce qui lui permettra donc de charger rapidement le HTML (permettant ainsi d’éviter d’avoir une page blanche trop longtemps sous les yeux).
Cela nous amène donc à quelques règles.
Dans le <head> :
- Si les scripts sont nécessaires au chargement de la page.
Dans le <body> :
- Si les scripts ne sont pas nécessaires au chargement de la page
- Si les scripts manipulent la structure HTML de la page (actions sur le DOM).
Commentaires
Dans un langage de programmation, un commentaire sert à ajouter des notes ou explications pour les développeurs, sans affecter le code exécuté.
En JavaScript, il est possible d’écrire des commentaires dans son code source avec les caractères suivants :
- Un commentaire monoligne commence par les caractères
//. - Un commentaire multiligne est délimité par les caractères
/*(ouverture) et*/(fermeture).
// Je suis un commentaire
/* Je suis un commentaire que l'on peut écrire
sur plusieurs lignes */
Console de développement
Rôle d’une console
Développer un site web statique en HTML-CSS est une chose. Venir le dynamiser avec JavaScript en est une autre, autrement plus complexe. En ce sens, dans le but de proposer aux développeurs web des outils puissants, les navigateurs ont peu à peu intégré dans leur écosystème des consoles de développement, permettant d’y exécuter du code JavaScript de manière « cachée » (ailleurs que sur la page web).
La console est donc un outil indispensable lorsque l’on souhaite écrire du code JavaScript.
Ouvrir la console du navigateur
La console se situe généralement dans un menu orienté pour les développeurs (sur le même panneau d’outils que l’inspecteur d’éléments HTML).
Il est également possible de l’ouvrir avec un raccourci clavier.
| Navigateur | Raccourcis | Via le menu |
|---|---|---|
| Firefox | F12 ou Ctrl+Maj+I | Menu Firefox > Outils supplémentaires > Outils de Développement web |
| Chrome | F12 ou Ctrl+Maj+I | Menu Chrome > Plus d’outils > Outils de développement |
| Safari | Ctrl+Alt+I | Activer dans les Options > Avancées la case à cocher “Afficher le menu Développement dans la barre des menus” |
Raccourcis utiles
Lors de l’écriture de scripts directement dans la console du navigateur, il est utile de connaître quelques raccourcis :
- Flèches
↑↓: naviguer dans l’historique de commandes saisies Maj+Entrée: aller à la ligne (sans exécuter le code)tabou flèche→: auto-complétion- Etc.
Journal
Outre le fait de pouvoir y exécuter manuellement des scripts, la console offre aux développeurs web un journal, permettant d’y écrire tout type d’information lors de l’exécution des scripts.
Cette fonctionnalité est accessible à travers l’utilisation de fonctions JavaScript, dont la plus utile est console.log().
Nous reviendrons plus en détails sur ce point dans le chapitre suivant.