JavaSript

Avant de découvrir et d'utiliser les variables en JavaScript, on va devoir analyser le fonctionnement de JavaScript.

JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web.

Pour utiliser JavaScript dans une page web, on va devoir l'appeler avec la balise <script>, on peut écrire du code javaScript directement dans la page html comme ceci :

<script>Votre code</script>

Cependant cette façon de faire n'est pas recommandé, il est préférable d'écrire son code dans un fichier séparé et de faire appel ensuite à ce fichier, c'est un peu le même principe que du code CSS, ce fichier devra porter l'extension ".js"

Il existe deux méthodes pour faire appel au fichier ".js", la première est de mettre la balise <script> à la fin du code HTML entre la balise fermante de </body> et </html> comme ceci :

</body>
<script src="nomDuFichier.js">
</html>

ou mettre la balise <script> dans la balise contenant les métadonnées et d’y ajouter le mot-clé "defer" (reporté, en français) comme ceci :

<head>
<script src="nomDuFichier.js" defer>
</head>

Cela revient à demander au navigateur, "Si tu rencontres la balise <script>, diffère sa prise en compte et attends que la page soit chargée."

Le code JavaScript sert notamment à modifier du code HTML, si on charge le fichier JavaScript avant que la page HTML ne soit chargée entièrement, il va devoir modifier du code qui n'est pas encore chargé, ce qui risque de ralentir le chargement, voire faire planter la page HTML et se retrouver avec une erreur.

Voilà pourquoi il faut mettre la balise <script> à la fin quand toute la page à fini d'être chargée ou d'attendre la que la page soit chargée entièrement en mémoire pour que JavaScript puisse intervenir dans la page HTML.

C’est une précaution, ceci assure que le code JavaScript pourra effectuer les manipulations du code HTML sans problème.

La variable :

Une variable est un conteneur qui stocke une donnée temporairement au sein de notre code, cela nous permet d’enregistrer une donnée.

La variable est composée d'un nom et de sa valeur, la valeur peut être de différents types :
- De type "number" (nombre, en français) et peuvent être des entiers ou décimaux (positif ou négatif).
- De type "string" (chaine de caractères, en français), la chaine s'écrit entre guillemet simple ou double.
- De type de boolean, (booléen, en français) une valeur true (vrai, en français) ou false (fausse, en français).

Pour déclarer une variable, voici la syntaxe qu'il faut utiliser :
On utilisera les instructions "let" ou "const", il y a une petite différence entre les deux instructions.
Ensuite vient le nom de la variable, de préférence en "camelCase", essayez de lui donner un nom en rapport avec son contenu.
Puis on l'assigne avec le signe égal (=) suivi de sa valeur et se termine par un point-virgule (;), même s’il n'est pas obligatoire, il est recommandé de le mettre.

Exemple :

"const" si la valeur de la variable est constante, tout au long de notre vie, on aura toujours le même prénom.

const myName = "Éric";

"let" si la valeur de la variable évolue dans le code, l'age évolue tous les ans.

let myAge = 52;

L’instruction "var" peut également être utilisée pour déclarer une variable, elle est identique à "let", mais elle est considérée comme obsolète.
Pour autant, ne soyez pas surpris d’en trouver parfois dans le code d’autres développeurs, ou dans de vieux projets.

var myWeight = 75; // Elle aussi est une valeur susceptible de changer

Pour vérifier le contenu d’une variable, il est possible d’utiliser la méthode "console.log()", avec entre les parenthèses, le nom de la variable.

let monAge = 42; 
console.log(monAge); // affiche la valeur 42

La console se trouve dans votre navigateur et est accessible via la touche F12, vous pouvez constater par vous même...!

On a vu que la variable "let" peut changer de valeur, pour modifier sa valeur, on va procéder comme suit :

let number = 3; // La valeur contient le nombre 3
number = 4; // On lui assigne la nouvelle valeur juste en lui indiquant le nom de la variable
console.log(number); // affiche la valeur 4

On a vu que pour les chaines de caractères, on doit utiliser des guillemets simples ou doubles, cependant, selon les guillemets utilisés, cela peut poser des conflits dans le code dans certains cas.

Exemple avec les guillemets simples, si on doit écrire un mot avec une apostrophe, il faudra l'échapper en insérant un antislash devant l'apostrophe, sinon il va nous créer une erreur de syntaxe :

let test1 = ('je m\'appelle Éric');
console.log(test1); // affiche je m'appelle Éric

Exemple avec les guillemets doubles, lors d'une insertion d'un mot entre guillemets, il faudra l'échapper en insérant un antislash devant chaque guillemet, sinon il va nous créer une erreur de syntaxe :

let test2 = ("je suis un \"mot\" entre guillemets qu'il faut échapper ");
console.log(test2); // affiche je suis un "mot" entre guillemets qu'il faut échapper

Voici une astuce qui est très utile quand l'on affiche plusieurs résultats avec l'instruction "console.log()", on va lui inclure un petit texte pour se repérer plus facilement dans la console. On procède comme suit, on met le texte entre guillemets (simple ou double) suivi d'une virgule (,).

Voici un exemple :

let test3 = ("je suis une astuce pour me repérer plus facilement dans la console");
console.log('astuce => ', test3); 
// afiche astuce =>  je suis une astuce pour me repérer plus facilement dans la console

Vous pouvez le vérifier dans la console.

La variable :

~~ Fin ~~

Fin