Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 3: Pour commencer: les bases du Javascript

Toutes les pages

Les commentaires

Un commentaire est un texte qui est ignoré lors de l’exécution du programme. Il est visible dans le code source mais n'est pas pris en compte par l'interpréteur Javascript.

Comme en langage C, il existe deux façons d'insérer un commentaire:
  • Commentaire de fin de ligne: Il est inséré grâce au double slash (//). Tout le texte qui vient après est considéré comme commentaire jusqu'à la fin de la ligne.
  • Commentaire sur plusieurs lignes: Il est inséré grâce à la séquence /* */. Tout le texte entre /* et */ est considéré comme commentaire même s'il est déclaré sur plusieurs lignes.

Exemple:
// Ce commentaire tient jusqu'à la fin de la ligne.
/* Celui là, par contre,
tient jusqu'à
ce symbole: */
Le fait de commenter son code régulièrement est vu comme une bonne pratique, car cela permet de retourner sur ses traces et comprendre (voir modifier) le code facilement après.

Les variables

Dans un langage de programmation, une variable sert à stocker une valeur (ou plusieurs) qui peut changer au cours de l’exécution du programme. En Javascript aussi, la variable sert à la même finalité.

La déclaration des variables en Javascript ne demande pas de préciser le type. En effet, le typage est géré dynamiquement, contrairement à la plupart des langages de programmation qui exigent de préciser le type de données qu'accueillera la variable au cours du programme (comme c'est le cas en langage C par exemple).

Exemple:
a="Bonjour";
var b="Salut";
Dans cet exemple, nous avons déclaré deux variables en leur affectant directement des valeurs initiales. La première variable s'appelle a et reçoit la valeur Bonjour et le deuxième variable s'appelle b et reçoit la valeur Salut.

Les deux valeurs affectées aux variables sont de type chaîne de caractères (ou string).

Nom des variables

Pour identifier une variable on lui donne un nom unique (qui ne doit pas être attribué à une autre variable dans le même programme). Le nom de la variable peut être composé de lettres (minuscules, majuscules ou les deux), de chiffres (de 0 à 9) et les caractères _ et &. En plus, il doit impérativement commencer par une lettre ou le caractère _.

Exemple:
maVariable=10; // Juste
_maVariable=10; // Juste
1maVariable=10; // Faux
ma Variable=10; // Faux
Le premier identifiant (maVariable) et juste. Le deuxième aussi (_maVariable) est juste car il commence par _ qui est autorisé au début. Le troisième (1maVariable) est faux car il commence par un chiffre et le dernier (ma Variable) est également faux car il contient un espace qui n'est pas accepté.

Portée des variables: mots-clés var et let

On appelle portée d'une variable, l'étendu de celle ci, c'est à dire jusqu'à quel niveau elle sera reconnue dans un programme. Selon la portée, il existe trois types de variables:
  • Variable globale: Cette variable est accessible de partout dans le programme, à l'intérieur des fonctions comme à l'extérieur.
  • Variable locale: On parle plus précisément d'une variable locale à une fonction. C'est une variable qui est accessible de l'intérieur de la fonction dans laquelle elle est déclarée, mais pas de l'extérieur.
  • Variable locale à un bloc: Le bloc dans ce cas peut être le corps d'une condition ou d'une boucle. Une variable dont la portée est limitée au bloc est précédée par le mot-clé let lorsqu'elle est initialisée dans le bloc en question.


Comment désigner si la variable doit être locale ou globale?

Vous avez certainement remarqué dans le premier exemple de cette partie que nous avons déclaré deux variables a et b. Or, nous avons placé le mot clé var avant l'identifiant de la variable b.

En règle générale, si la variable est déclarée sans le mot clé var, alors elle est automatiquement globale qu'elle soit déclarée à l'intérieur d'une fonction ou à l’extérieur. Par contre si elle est déclarée avec le mot clé var alors deux cas son envisageables:
  • Si la variable est déclarée dans une fonction, alors elle est locale à cette fonction.
  • Si la variable est déclarée en dehors de toute fonction, alors elle est globale à tout le programme.

Changement de type d'une variable (CAST)

Comme je l'ai précisé au début de cette partie, nous ne sommes pas obligés de préciser le type d'une variable. Le fait de lui affecter une valeur renseigne automatiquement au moteur Javascript (l'interpréteur) son type. Mais pour avoir une idée sur les types disponibles en Javascript voilà un résumé:
  • Les nombres: Ce sont les nombres avec ou sans virgule, positifs ou négatifs.
  • Les chaines de caractères: (ou string), ce sont des suites de caractères quelconques.
  • Les booléens: Ce sont les nombres booléens qui peuvent avoir deux valeurs, soit 1 ou 0 exprimés de préférence par vrai (true) ou faux (false).
  • Les variables vides (Null): Ce sont des variables qui ne contiennent aucune valeur, il ont la valeur implicite null.
  • Les variables non définies (undefined): Ce sont des variables invoquées dans un contexte où elle ne sont pas reconnues par le moteur Javascript. Le type undefined leur est attribué dans ce cas.

Donc quelque soit la valeur de notre variable, elle fait forcément partie de l'un des types précédents. Or, sur la plupart des langages de programmation (comme le C), on doit conserver le type de la variable du début à la fin du programme. Par exemple, si nous déclarons une variable de type int, alors toutes les valeurs qu'on doit lui affecter au cours du programme doivent être des nombres entiers. Si, pour une raison quelconque, ont veut lui affecter un nombre booléen par exemple, alors on doit "caster" la variable (le CAST signifie conversion de type).

En revanche, en Javascript, on peut changer le type de la variable à la volée. Donc au cours du même programme, on peut affecter à notre variable n'importe quelle valeur de n'importe quel type. Le CAST est donc fait automatiquement.

Exemple:
a=12; // Nombre
a="Bonjour"; // Chaîne de caractères
a=true; // Booléen
Si on exécute ce bout de code, il n'y aura aucun problème. La variable a a été initialisée en tant que nombre, puis a changé de type deux fois (Chaîne de caractères puis booléen).

Les variables accessibles en lecture seule: mot-clé const

Si on précède une variable du mot-clé const au moment de son initialisation, alors celle ci devient immuable, c'est à dire que sa valeur reste fixe (comme une constante) durant toute la durée de vie du script.

Exemple:
const a=12;
// La variable a ne peut être modifiée
// après son initialisation.
// Sa valeur demeure 12.

Les opérateurs

Les opérateurs sont des symboles qui permettent de faire des opérations (arithmétiques, logiques...) sur les variables. Généralement, on retrouve les même opérateurs dans la plupart des langages de programmation avec des symboles, dans la plupart des cas, similaires.

En Javascript (et en d'autres langages d'ailleurs) on distingue 5 familles d'opérateurs:
  • Opérateurs arithmétiques.
  • Opérateurs d'incrémentation.
  • Opérateurs assignement.
  • Opérateurs de comparaison.
  • Opérateurs logiques.

Opérateurs arithmétiques

Ce sont des opérateurs qui effectuent des calculs mathématiques classiques à savoir: l'addition (+), la soustraction (-), la multiplication (*), la division (/) et le modulo (qui signifie le reste de la division)(%).

Exemple:
a=10;
b=20;
c=a+b; // c vaut 30
d=a-b; // d vaut -10
e=a*b; // e vaut 200
f=a/b; // f vaut 0.5
g=a%b; // g vaut 10

Opérateurs d'incrémentation

Ce sont des opérateurs qui permettent de modifier la valeurs d'une variable en l'augmentant ou la diminuant de 1. Deux opérateurs sont utilisés: incrémentation (++) et décrémentation (--).
Exemple:
a=10;
a++; // a vaut donc 11
a--; // a vaut à nouveau 10
Parfois on préfère regrouper les opérations d'incrémentation dans la troisième famille qui constitue les opérateurs d'assignement.

Opérateurs d'assignement

Ce sont les opérateurs qui permettent d'affecter une valeur à une variable directement ou à travers une opération (comme l'incrémentation ou la décrémentation). Les opérateurs disponibles pour cette famille sont: l'affectation directe (=), l'affectation avec addition (+=), l’affectation avec soustraction (-=), l'affectation avec multiplication (*=), l'affectation avec division (/=) et l'affectation avec modulo (%=).

Exemple:
a=10;
b=a; // b vaut 10
a+=5; // a vaut 15
a-=3; // a devient 12
On peut écrire l'instruction a++ comme ceci: a+=1 ou encore: a=a+1.

Opérateurs de comparaison

Ce sont les opérateurs qui testent une condition si elle est vraie ou fausse. Les opérateurs disponibles sont: égal (==), strictement inférieur (<), inférieur ou égal (<=), strictement supérieur (>), supérieur ou égal (>=), différent (!=), identique (===), non identique (!==).

Exemple:
a=10;
if(a%2==0)
   res="Nombre pair";
La structure de contrôle if sera vue en détail par la suite, mais sachez que pour cet exemple, elle permet de vérifier si le reste de la division de la variable a par 2 est égal à 0, ce qui signifierait que a est pair.
L'opérateur identique (===) vérifie si deux variables sont égales et de même type. Non identique (!==) vérifie si ce n'est pas le cas.

Opérateurs logiques

Ce sont des opérateurs qui regroupent logiquement plusieurs conditions. Les trois opérateurs utilisés sont: ET logique (&&), OU logique (||) et NON logique (!).

Exemple:
a=10;
b=5;
if(a%2==0 || b%2==0)
   res="Le résultat de la multiplication de a et b sera pair";
On vérifie si l'une des conditions a est pair ou b est pair est vraie.

Les bases du Javascript en vidéo