View on GitHub

Developpement Web Front-End

Formation JavaScript - Introduction au JS

Download this project as a .zip file Download this project as a tar.gz file

Introduction au JavaScript

1 Les variables

a La déclaration

Le Javascript étant très souple au niveau de l'écriture (à double-tranchant car il laisse passer des erreurs...), la déclaration des variables peut se faire de deux façons :

  • soit de façon explicite, en faisant précéder la variable du mot clé var
    
    var chaine = "bonjour";
    
    
  • soit de façon implicite, en laissant le navigateur déterminer qu'il s'agit d'une déclaration de variable
    
    chaine = "bonjour";
    
    

b Portée (visibilité) des variables

Selon l'endroit où une variable est déclarée, celle-ci pourra être accessible (visible) de partout dans le script ou bien uniquement dans une portion confinée du code, on parle de « portée » d'une variable.

  • Lorsqu'une variable est déclarée sans le mot clé var, c'est-à-dire de façon implicite, elle est accessible de partout dans le script (n'importe quelle fonction du script peut faire appel à cette variable).
    On parle alors de variable globale.
  • La portée d'une variable déclarée de façon explicite (précédée du mot-clé var), dépend de l'endroit où elle est déclarée.
    Une variable déclarée au début du script, avant toute fonction, sera globale. Elle peut être utilisée n'importe où dans le script.
    Une variable déclarée explicitement dans une fonction aura une portée limitée à cette seule fonction, c'est-à-dire qu'elle est inutilisable ailleurs. On parle alors de « variable locale ».

var a = 12;
var b = 4;

function MultipliePar2(b) {
   var a = b * 2;
   return a;
}
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("La valeur de a est ",a);

Le double de 4 est 8
La valeur de a est 12


var a = 12;
var b = 4;

function MultipliePar2(b) {
   a = b * 2;
   return a;
}
document.write("Le double de ",b," est ",MultipliePar2(b));
document.write("La valeur de a est ",a);

Le double de 4 est 8
La valeur de a est 8

c Les types de données dans les variables

En Javascript il n'est pas nécessaire de déclarer le type des variables, contrairement à des langages évolués tels que le langage C ou le Java pour lesquels il faut préciser s'il s'agit d'entier (int), de nombre à virgule flottante (float) ou de caractères (char).

En fait, le Javascript n'autorise la manipulation que de 4 types de données :

  • des nombres : entiers (int) ou à virgules (float)
  • des chaînes de caractères (string) : une suite de caractères
  • des booléens (bool): des variables permettant de vérifier une condition.

    true : si le résultat est vrai
    false : lors d'un résultat faux

  • des variables de type null: un mot caractèristique pour indiquer que la variable ne contient aucune donnée.

d Conversions de types

Même si Javascript gère de façon transparente les changements de type des variables, il est parfois nécessaire de forcer la conversion du type.
Ainsi Javascript fournit deux fonctions natives permettant de convertir le type des variables passées en paramètre :

  • parseInt() permet de convertir une variable en nombre
  • parseFloat() permet de convertir une variable en nombre décimal

2 Les tableaux

Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois.
Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois insuffisant, car il devient difficile de gérer un grand nombre de variable distinctes.

Pour y remédier Javascript propose une structure de données permettant de stocker l'ensemble de ces données dans une "variable commune" : le tableau.

Un tableau, en Javascript, est donc une variable pouvant contenir plusieurs données indépendantes, indexées par un numéro, appelé indice.
L'indice d'un tableau est ainsi l'élément permettant d'accéder aux données qui y sont stockées.

Il existe 2 méthodes pour déclarer un tableau :


var MonTableau = ["donnée 1", "donnée 2", "donnée 3", "donnée 4"];
var MonTableau = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4");

Pour plus de rigueur, un tableau devrait être déclaré avant que l'on lui affecte des valeurs.


var MonTableau = new Array();

Il est possible d'utiliser des indices personnalisés pour indexer les valeurs du tableau, on parle alors de tableau associatif. Javascript autorise en effet l'utilisation d'une chaîne ou d'un nombre spécifique pour indexer les valeurs du tableau.
Voici un exemple de représentation d'un tableau associatif :


MonTableau["Pierre"] = 12;
MonTableau["Jean-François"] = 25;
MonTableau["Paul"] = 16;
MonTableau["André"] = 22;

Indice"Paul""André""Pierre""Jean-François"
Donnée16221225

Le langage Javascript propose l'objet Array, comportant de nombreuses méthodes permettant de manipuler les tableaux, c'est-à-dire d'insérer, supprimer, ou extraire des éléments dans le tableau et également de trier les élément du tableau.



MonTableau.push('donnée'); //Cette méthode ajoute un ou plusieurs éléments au tableau.
MonTableau.splice(); //Cette méthode ajoute/retire des éléments d'un tableau.
MonTableau.sort(); //Cette méthode permet de trier les éléments d'un tableau.
MonTableau.join(); //Cette méthode renvoie une chaîne de caractères contenant tous les éléments du tableau.


3 Les boucles

a WHILE

Tant que la condition est satisfaite, on répète les instructions.



while(condition){
    instructions
}


b FOR



for(initialisation ; condition ; incrementation){
    instructions
}


Évitez de modifier la variable qui sert de compteur à l'extérieur des parenthèses du for, qui sont prévues pour ça.

c DO WHILE

Le test est effectué après les instructions, ce qui veut dire que ces dernières seront exécutées au moins une fois, quelle que soit la condition.



do{
    instructions
} while(condition);


d Le mot clé : "break"

Le mot clé "break" permet de mettre fin immédiatement à une boucle en cours.
Il renvoie directement à la sortie de la boucle sans exécuter le code qui le suit dans la boucle.

e Le mot clé : "continue"

Le mot clé "continue" permet de passer directement à l'itération suivante.
Il renvoie directement à l'itération suivante de la boucle sans exécuter le code qui le suit dans la boucle.

4 Les opérateurs

Les opérateurs sont des symboles mathématiques qui permettent de manipuler des variables, c'est-à-dire effectuer des opérations, les évaluer, ...

a Les opérateurs "de calcul"

Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable.

OpérateurDénominationEffetExemple (X = 8)
+opérateur d'additionAjoute deux valeursX + 2 = 10
-opérateur de soustractionSoustrait deux valeursX - 3 = 5
*opérateur de multiplicationMultiplie deux valeursX * 2 = 16
/opérateur de divisionDivise deux valeursX / 2 = 4
=opérateur d'affectationAffecte une valeur à une variableX = 3 ré-affecte la valeur de X à 3
%opérateur moduloRetourne le reste de la division entière de l'opérande de gauche par celle de droiteX % 3 = 2

b Les opérateurs "d'affectation"

Ces opérateurs permettent de simplifier des opérations telles que ajouter une valeur dans une variable et stocker le résultat dans la variable.
Une telle opérations s'écrirait habituellement de la façon suivante par exemple : X = X + 2
Avec les opérateurs d'assignation il est possible d'écrire cette opération sous la forme suivante : X += 2
Ainsi, si la valeur de X était 8 avant opération, elle sera de 10 après...

OpérateurEffet
+=ajoute l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.
-=soustrait l'opérande de droite à l'opérande de gauche et stocke le résultat dans l'opérande de gauche.
*=multiplie l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.
/=divise l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.
%=calcule le reste de la division entière de l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.

c Les opérateurs "d'incrémentation"

Ce type d'opérateur permet de facilement augmenter ou diminuer d'une unité une variable.
Ces opérateurs sont très utiles pour des structures telles que des boucles, qui ont besoin d'un compteur (variable qui augmente de un en un).
Un opérateur de type X++ permet de remplacer des notations lourdes telles que X = X + 1 ou bien X += 1

OpérateurDénominationEffetExemple (X = 8)
++IncrémentationAugmente d'une unité la variableX++ X = 9
--DécrémentationDiminue d'une unité la variableX-- X = 7

d Les opérateurs "de comparaison"

Ces opérateurs permettent de comparer deux variables, voir une variable avec elle même plus autre chose.

OpérateurDénominationEffetExemple (X = 8)
==opérateur d'égalitéCompare deux valeurs et vérifie leur égalitéX == 3 retourne false
X == 8 retourne true
===opérateur d'identitéVérifie l'identité de valeur et de type de deux valeursX === Y (Y = "8") retourne false
X === Y (Y = 8) retourne true
!=opérateur de différenceVérifie qu'une variable est différente d'une valeurX != 3 retourne true
X != 8 retourne false
!==opérateur de non identitéVérifie la non identité de valeur et de type de deux valeurs, c'est-à-dire si les deux valeurs n'ont pas la même valeur ou bien sont de types différents.X !== Y (Y = "8") retourne true
X !== Y (Y = 8) retourne false
<opérateur d'infériorité stricteVérifie qu'une variable est strictement inférieure à une valeurX < 9 true
X < 7 false
>opérateur de supériorité stricteVérifie qu'une variable est strictement supérieure à une valeurX > 9 false
X < 7 true
<= ou >=opérateur d'infériorité ou de supériorité Vérifie qu'une variable est inférieur/supérieure ou égale à une valeurX <= 9 true
X <= 7 false
X <= 8 true

e Les opérateurs "logiques" (booléens)

Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies

OpérateurDénominationEffetExemple
||OU logiqueVérifie qu'une des conditions est réalisée((expression1) || (expression2))
&&ET logiqueVérifie que toutes les conditions sont réalisées((expression1) && (expression2))
!NON logiqueInverse l'état d'une variable booléenne (retourne la valeur 1 si la variable vaut 0, 0 si elle vaut 1)(!condition)

5 Les conditions

a L'instruction "if"

L'instruction "if" est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe parfois différente d'un langage à l'autre...). Elle permet d'exécuter une série d'instructions (un bloc d'instructions) si jamais une condition est réalisée.
La syntaxe de cette expression est la suivante :



if (condition) {
    série d'instructions
}


il est possible de définir plusieurs conditions à remplir avec les opérateurs ET et OU (&& et ||)

b L'instruction "if ... else"

L'instruction "if" dans sa forme basique ne permet de tester qu'une condition, or la plupart du temps on aimerait pouvoir choisir les instructions à exécuter en cas de non réalisation de la condition...
L'expression "if ... else" permet d'exécuter une autre série d'instruction en cas de non-réalisation de la condition.
La syntaxe de cette expression est la suivante :



if (condition) {
    //série d'instructions
}
else {
    //autre série d'instructions
}


c Les opérateurs "ternaires"

Il est possible de faire un test avec une structure beaucoup moins lourde grâce à la structure suivante :



(condition) ? série d'instruction si vrai : serie d'instruction si faux;


Cet opérateurs est souvent utilisé dans l'affection de valeur à une variable

var prenom = "Alexis";
var nom = (prenom == "Alexis") ? "Branlant" : null ;
Dans ce cas, la variable nom prendra la valeur "Branlant"
var prenom = "Thomas";
var nom = (prenom == "Alexis") ? "Branlant" : null ;
Dans ce cas, la variable nom prendra la valeur null

d L'instruction "switch...case"

L'instruction "switch" permet de faire plusieurs tests de valeurs sur le contenu d'une même variable.
Ce branchement conditionnel simplifie beaucoup le test de plusieurs valeurs d'une variable, car cette opération aurait été compliquée (mais possible) avec des "if" imbriqués.
Sa syntaxe est la suivante :



switch (Variable) {
    case Valeur1:
        série d'instructions;
        break;
    case Valeur2:
        série d'instructions;
        break;
    default:
        série d'instructions;
        break;
}


6 Les fonctions

Les fonctions permettent de regrouper une série d'instructions, permettant de simplifier et de clarifier le code. D'autre part, une fonction peut faire appel à elle-même, on parle alors de fonction récursive.

La définition d'une fonction s'appelle "déclaration". La déclaration d'une fonction se fait grâce au mot clé function selon la syntaxe suivante :



function nom_de_ma_fonction(argument1, argument2, ...){
    série d'instructions
}


Une la fonction déclarée, il reste à l'appeler, on appel cette étape l'exécution.



nom_de_ma_fonction();


Il n'existe pas de classe en javascript, il propose en fait un système d'héritage par prototypage, on parle d'objets héritants d'autres d'objets.
Un prototype est un objet à partir duquel on crée de nouveaux objets.



function auteur(nom, prenom){
    this.nom = nom;
    this.prenom = prenom;
};
function livre(titre,collection,edition,auteur){
    this.titre = titre;
    this.collection  = collection;
    this.edition = edition;
    this.auteur = auteur;
}


Si on prend l'exemple précedant, en créant un objet auteur, on peut simplement rattacher cet auteur à un ou plusieurs livres :



var auteur1 = new auteur("Branlant","Alexis");
var livre1 = new livre("Javascript les bases","Hachette","Premium",auteur1);


On accèdera donc au nom de l'auteur du livre1 comme ceci :

alert(livre1.auteur.nom); affichera une boite de dialogue contenant : Branlant

livre1.auteur.nom = "B."; modifiera "Branlant" par "B."