Introduction au JavaScript : les bases (module 1) Introduction au JavaScript : les bases (module 1)

Introduction au JavaScript : les bases (module 1)

par , Responsable pôle technologies front
le 19 novembre 2013

0
0

Le développement Front-End (ou intégration HTML/CSS) est à l’intersection entre le Web Design et le développement Back-End. Le développeur Front-End, aussi appelé intégrateur, utilise trois langages principaux : le HTML, la CSS et le JavaScript.

A partir d’une maquette, le développeur Front-End réalise l’interface en 3 étapes. On peut comparer ce procédé à la construction d’une maison:

  • Tout d’abord les fondations, les murs, le toit avec le HTML, qui grâce à l’utilisation de balises, détermine où se trouvent les titres, la navigation, les images, les liens, etc… Il faut une base solide et sémantique pour préparer les étapes suivantes, mais aussi pour aider les moteurs de recherche à trouver le contenu pertinent à indexer et améliorer l’ergonomie de la page.
  • Ensuite, l’étape de décoration est réalisée avec les feuilles de style CSS: hauteur et largeur des éléments, couleurs, marges, polices… Elle doit s’adapter aux différents types de navigateurs, aux résolutions des écrans…
  • Enfin vient le JavaScript qui va permettre à l’utilisateur d’interagir avec la page, comme il le ferait avec des interrupteurs par exemple. Il sera utile pour écouter ce qu’il se passe sur la page (click, focus sur un champ, scroll…) et déclencher les actions adaptées.

C’est bien entendu le JavaScript qui va nous intéresser dans cet article, où nous allons en découvrir les bases. Attention, le Javascript permet beaucoup de manipulations intéressantes et souvent obligatoires, mais c’est aussi le plus compliqué, alors accrochez-vous ! (Vous trouverez également ce contenu sur mon Github)

 

Les variables


1. 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";


2. 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 la « 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


3. 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’entiers (int), de nombres à virgule flottante (float) ou de caractères (char).

En fait, le JavaScript autorise la manipulation de seulement 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 » si le résultat est faux
  • des variables de type null: un mot caractéristique pour indiquer que la variable ne contient aucune donnée.


4. 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ètres :

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

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 variables 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 qu’on lui affecte des valeurs.

    var MonTableau = new Array();

Il est possible d’utiliser des indices personnalisées 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ée 16 22 12 25

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éments 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.


Les boucles


1. WHILE

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

    
while(condition){
instructions
}


2. 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.


3. 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);


4. 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.


5. 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.

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, …


1. Les opérateurs de calcul

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

Opérateur Dénomination Effet Exemple (X = 8)
+ opérateur d’addition Ajoute deux valeurs X + 2 = 10
opérateur de soustraction Soustrait deux valeurs X – 3 = 5
* opérateur de multiplication Multiplie deux valeurs X * 2 = 16
/ opérateur de division Divise deux valeurs X / 2 = 4
= opérateur d’affectation Affecte une valeur à une variable X = 3 ré-affecte la valeur de X à 3
% opérateur modulo Retourne le reste de la division entière de l’opérande de gauche par celle de droite X % 3 = 2


2. Les opérateurs « d’affectation »

Ces opérateurs permettent de simplifier des opérations telles qu’ajouter une valeur dans une variable et stocker le résultat dans la variable.
Une telle opération 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 l’opération, elle sera de 10 après…

Opérateur Effet
+= 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


3. 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érateur Dénomination Effet Exemple (X = 8)
++ Incrémentation Augmente d’une unité la variable X++ X = 9
Décrémentation Diminue d’une unité la variable X– X = 7


4. Les opérateurs « de comparaison »

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

Opérateur Dénomination Effet Exemple (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 valeurs X === Y (Y = « 8 ») retourne false
X === Y (Y = 8) retourne true
!= opérateur de différence Vérifie qu’une variable est différente d’une valeur X != 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é stricte Vérifie qu’une variable est strictement inférieure à une valeur X < 9 true
X < 7 false
> opérateur de supériorité stricte Vérifie qu’une variable est strictement supérieure à une valeur X > 9 false
X < 7 true
= opérateur d’infériorité ou de supériorité Vérifie qu’une variable est inférieur/supérieure ou égale à une valeur X <= 9 true
X <= 7 false
X <= 8 true


5. Les opérateurs « logiques » (booléens)

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

Opérateur Dénomination Effet Exemple
|| OU logique Vérifie qu’une des conditions est réalisée ((expression1) || (expression2))
&& ET logique Vérifie que toutes les conditions sont réalisées ((expression1) && (expression2))
! NON logique Inverse l’état d’une variable booléenne (retourne la valeur 1 si la variable vaut 0, 0 si elle vaut 1) (!condition)

Les conditions


1. 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 ||).


2. 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’instructions 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
}


3. 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érateur 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.


4. 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;
}

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 fois 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 classes en JavaScript, il propose en fait un système d’héritage par prototypage, on parle d’objets héritant 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écédant, 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. »

Ce premier module comme vous pouvez le voir a couvert les bases du JavaScript. Dans le module 2, nous évoquerons la programmation JS orientée objet. A suivre…

mots-clés :

, ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vos commentaires (0)

Merci pour cette introduction très claire, ça fait plaisir de voir qu’il y a des gens qui savent qu’on n’est pas obligé de charger JQuery pour faire un alert. Par contre, là où ça devient un peu confus c’est avec le mot-clé this et sens différentes valeurs. On attend la suite!

0
0

Introduction au JavaScript : les bases (module 1)