CentraleSupélec — Département informatique
Gâteau du Glouton
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
Javascript

Introduction

Pas de panique ! Javascript est assez simple. Vous aurez uniquement besoin de choses que vous avez déjà rencontré dans votre cursus:

  • Pratique d'un langage de programmation (ex. Java ou C++)
  • Compréhension de la notion de type (ex. int, String)
  • Compréhension de la notion de fonction
  • Pratique basique de l'approche objet (ce qui fait le nerf de la guerre en Java, donc que vous avez vu, et donc vous rend compétent)

La principale chose à assimiler que vous n'avez (peut-être) pas vu est le fait que les fonctions sont des données comme les autres (et qu'on peut donc les manipuler librement).

Fin de quelques idées reçues

  • Javascript n'est pas du Java
  • Javascript est un langage conçu pour écrire des scripts interprétés par un navigateur, mais pas que ! C'est aussi un langage en soit. Par exemple, on peut faire...
  • Pricipales caractéristiques:
    • Impératif
    • Typage dynamique (comme python par exemple)
    • Orienté objet
    • Fonctionnel

Historique

  • 1995 :
    • création de LiveScript par Brendan Eich pour Netscape Communication Corporation
    • Création d'une version côté client de LiveScript, baptisée JavaScript
  • 1996 : interpréteur JavaScript pour Netscape Navigator 2.0
  • 1997 : standardisation par l'ECMA sous le nom d'ECMAScript
    • Spécification : ECMA-262 (ES1)
    • Implémentations : JavaScript, ActionScript, JScript…
  • 2005 : révolution AJAX !
  • 2009 : ES5, "use strict", JSON…
  • 2015 : ES6: classes, modules, ...

Quelques références

Pour tester du JavaScript

  • En local sur votre machine avec Firefox: L'ardoise de Firefox, accessible avec Shift+F4, ou à travers le menu Tool -> Web Developper. Vous pouvez aller voir la doc sur le site de Mozilla.
  • en WISIWIG sur internet, avec un éditeur HTML: JS Bin.

Documentation de qualité sur JavaScript et DOM (regarder la version anglaise de préférence) :

Gestion des événements en JavaScript :

Compatibilité des navigateurs

Javascript, un langage de programmation

Avant toute chose, pour pour un code de meilleure qualité, pensez à utiliser au début de vos programmes l'incantation 

"use strict";

Cela générera des erreurs dans le cas de l'utilisation de mauvais patterns (voir par exemple http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)

Commentaires

Les commentaires sont comme pour Java: 

// Commentaire sur une seule ligne

/* Commentaire
multi
ligne
*/

Expressions

Une instruction finit par un point-virgule: 

var i;
i = 2 ;

Comme en Java ou en C, plusieurs instructions peuvent être combinées avec des accolades, et les espaces ne sont pas considéré par l'interpréteur: 

{ instr1 ; instr2;
  instr3;
}

Allocation de variables

Avec l'incantation "use strict";, toute variable doit être instantiée avec le mot-clé var. On peut lui donner une valeur sur la même ligne, ou pas. Dans ce dernier cas, sa valeur (de même que son type) est undefined: 

var i;      // i vaut undefined
var j = 2;  // j vaut 2

Attention, une variable est attachée à une page web: une fois allouée, sa valeur reste la même tant que la page n'est pas fermée ou rechargée.

Typage

Le typage est faible, ou encore implicite, ou dit encore autrement: dynamique. C'est à dire qu'il n'y a pas d'indication de type lors de la déclaration d'une variable type déterminé dynamiquement en fonction de la valeur.

Le type d'une expression peut être obtenu avec typeof.

  • Les types de base sont : number, boolean, string 
typeof 1;    // number
typeof (1 == 2); // boolean
  • On a aussi : function, object, undefined 
var myVar;
typeof myVar;  // undefined

Opérations sur les types de bases

Pour les nombres, on a les opérations usuelles +, -, /, *, %, mod... Comme en Java et en C, le code 

i = i + 1;

peut s'ecrire 

i += 1;

ou comme 

++i;

Et similairement pour les autres opérateurs.

On peut combiner des booléens avec && (conjonction) , || (disjonction), ~ (négation).

Les opérateurs de comparaisons sont

  • == égalité pour la valeur, et === égalité pour la valeur et le type
  • != inégalité pour la valeur, et !== inégalité pour la valeur et le type
  • Et >, <, >=, <= pour plus/moins grand, strict/non-strict. Pour les string: l'ordre est lexicographique.

Par exemple: 

1 == 1    // true
1 === 1   // true
"1" == 1  // true (chaine castée en un nombre)
"1" === 1 // false (chaine castée en un nombre)
"bb" > "ab" // true
"bb" > "ba" // true
"11" >= 2   // true (chaine castée en un nombre)

La concaténation des chaines se fait avec l'opérateur +: 

"ab" + "cd"  // "abcd"
"ab" + 33    // "ab33" (nombre casté en une chaine)

Le symbole + est en priorité la concaténation: 

11 + 22      // 33
"11" + "22"  // "1122"
"11" + 22    // "1122"
11 + "22"    // "1122"

Mais attention à l'ordre d'évaluation: 

11 + 22 + "44"      // "3344"
11 + (22 + "44")    // "112244"
"11" + 22 + 44      // "112244"

Conversion

Parfois, il est utile de pouvoir convertir une chaine de caractère en entier ou en flottant: 

parseInt("33");      //  33    (integer)
parseFloat("2.33");  //  2.33  (float)

Entrées - Sorties

Interaction avec l'utilisateur

Avec des pop-up: 

alert("Message à l'utilisateur");
var donnee = prompt("Saisir une donnée :");
var bool = confirm("Confirmez ou annulez.");

Attention

La fonction prompt retourne une chaine de caractères ! Utilisez parseInt pour la convertir en entier au besoin.

Sortie sur la console JavaScript

console.log("Ceci est un message de log.");
console.log("La variable x vaut : " + x);

Avec Firefox, la console (appelée "Web Console") est obtenue à travers le menu Tool -> Web Developper, ou avec le raccourci clavier Ctrl-Shift-K.

Interaction avec le contenu d'une page web

Vu un peu plus tard, avec les évenements, ainsi que dans le cours sur DOM.

Structures de contrôle

Conditionnelles simples avec if-else

if(confirm("Etes-vous majeur ?")) {
    alert("Vous pouvez voter.");
} else {
    alert("Vous ne pouvez pas encore voter.");
}

Les if se combinent

if(x < 0) {
    alert("négatif");
} else if (x == 0) {
    alert("nul");
} else {
    alert("positif");
}

Distinction de cas avec switch

switch(prompt("Donnez une couleur")) {
case "bleu":
     alert("J'aime le bleu");
     break;
case "rouge":
     alert("Je n'aime pas le rouge");
     break;
default:
     alert("Je ne connais pas cette couleur");
}

Opérateur conditionnel ternaire

Comme dans d'autre langage, on a le raccourcis 

var res = (expBooleenne) ? expSiVrai : expSiFaux ;

Boucle while 

var i = 10;
while (i > 0) {
   console.log(i);
   --i;
}
// sur la console: en décroissant, les nombres de 10 à 1.

Boucle for

var i;
for(i = 1 ; i < 10 ; ++i) {
    console.log(i);
}
// sur la console: les nombres de 1 à 10.

Tableaux

Un tableau est une structure qui peut contenir des valeurs avec des types quelconques: encore une fois, typage dynamique. 

var tableau = [12, "texte", 3.5, true];
console.log(tableau);
console.log(tableau[0]);
console.log(tableau.length);

Les tableaux sont en fait des objets: 

console.log(typeof tableau); // object

Un tableau est un objet de la classe Array: une autre façon de créer un tableau est 

var tableau = new Array(12, "texte", 3.5, true);

Comme pour les objets en java, les objets en javascript viennent avec des méthodes. Par exemple, pour les tableaux: 

var tab = [1,2,3];
tab.pop();     // [1,2]
tab.push(4);   // [1,2,4]
tab.reverse(); // [4,2,1]

Plus bas, nous verrons les objets plus en détail.

Fonctions

Définition d'une fonction: pas de type (car le typage est dynamique) 

function surfaceRectangle(longueur, largeur) {
    return longueur*largeur;
}

Appel d'une fonction 

surfaceRectangle(2.5, 3); // 7.5

Les fonctions sont identifiées par leur nom. En particulier, on peut sans problème les passer en argument d'une autre fonction: 

function composeDeuxFois(f, x) {
   return f(f(x));
}
function successeur(n) { return (n+1); }

console.log(composeDeuxFois(successeur, 1)); // 3

Le langage est dit fonctionnel: les fonctions sont des données comme les autres.

Attention

Ne pas confondre une fonction et sa valeur: 

function f() {
   return 1;
}
console.log(f);   // la fonction comme donnée
console.log(f()); // la valeur rendue par la fonction (ici, la valeur 1)

Donc

  • nomDeLaFonction fait référence à la "donnée" fonction
  • nomDeLaFonction() fait référence à la valeur retournée par la fonction.

Fonctions anonymes

Comme les fonctions sont des "donnée comme les autres", on a en fait pas besoin d'un nom ni d'une syntaxe particulière pour en définir: une fonction dite anonyme (car sans nom) se définit comme ça: 

function(longueur, largeur) {
    return longueur*largeur;
}

Ceci est donc simplement une expression qui s'avère retourner une fonction... On peut la ranger dans une variable: 

var maFonction = function(longueur, largeur) {
    return longueur*largeur;
}

console.log(maFonction(2,2)); // 4

et la variable maFonction se comporte exactement comme la fonction surfaceRectangle définie plus haut. En fait, la première définition est juste du sucre syntaxique pour cette dernière présentation.

On peut aussi appeler une fonction anonyme directement: 

(  function(x,y){return (x+y);}  )(1,2);  // 3

Et si on ne peut pas faire absolument n'importe quoi avec les fonctions, javascript essaie dans la mesure du possible de faire quelque chose de logique. Par exemple, si on additionne une fonction et un nombre... Il caste tout en une chaine puis concatène: 

(  function(x,y){return (x+y);}  ) + 42;  // "function (x,y){return (x+y);}42"

... Mais ne tentez pas trop le diable quand même.

Exemple

On définit une fonction de tri de tableau, avec en paramètre un opérateur de comparaison qui retourne vrai si son premier argument est plus grand que son deuxième. On peut ensuite l'appeler avec (par exemple) une fonction anonyme: 

function triBulle(tab, compare){
    var echange;
    do {
        echange = false;
        for(var i = 0; i < tab.length-1 ; i++) {
            if(compare(tab[i], tab[i+1])) {
                var tmp = tab[i];
                tab[i] = tab[i+1];
                tab[i+1] = tmp;
                echange = true;
            }
        }
    } while (echange);
}

var monTab = [9,6,8,7,10,1,3,4,2,5];
triBulle( monTab,                              // Le tableau
          function(x,y) { return (x < y); }    // L'opérateur de comparaison
        );
console.log(monTab); // [1,2,3,4,5,6,7,8,9,10]

Pouvez-vous dire ce qui se serait passé si on avait plutôt appeler la fonction triBulle avec la fonction anonyme suivante ? 

function(x,y) { return (x > y); }

Objets

Un object en javascript est essentiellement une '''table d'association''' entre des attributs et des valeurs. Par exemple: 

var point = { x : 0 , y : 1 };

définit un objet avec deux attributs x et y, auxquels on accède avec un point (comme en Java) 

console.log(point.x);   // 0
console.log(point.y);   // 1

Notez les virgules dans la définition de l'objet.

La principale chose à se souvenir est que l'on utilise . pour accèder au contenu d'un objet, et que, comme dans tout langage objet (java ou python par exemple) un objet contient des attributs et des méthodes (des fonctions). Ces méthodes peuvent potentiellement modifier les attributs de l'objet, et/ou retourner une valeur.

Notion de classe

Comme en java ou en C++, il y a en javascript une notion de classe, qui permet de caractériser un type particulier d'objet.

Si vous n'aurez en première approche pas à fabriquer de nouvelles classes d'objets en javascript, vous les utiliserez tout le temps: elle est omniprésente en javascript, car c'est la façon de construire et de manipuler des données complexes.

Pour en savoir plus, n'hésitez pas à aller voir le tuto sur les objets.

Quelques modèles d'objets existant

Cette notion d'objet est utilisée de façon extensive en javascript, et virtuellement toutes les librairies l'utilise. Mais on trouve aussi des objets dans la librairie standard: String, Number, Boolean, Date, Error, Array, ...

Tous ces modèles d'objets possèdent de nombreuses méthodes. Vous trouverez une documentation complète des méthodes existantes sur le site de Mozilla Dev.

À partir de là...

Évidemment, Javascript est rarement utilisé tout seul. Dans ce cours, vous trouverez les côtés

  • client: évènements et intégration dans le navigateur
  • DOM: manipulation de la page web de façon dynamique
  • et serveur: avec Node.js