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...
- un simulateur de PC
- un visionneur générique de documents
- un video player
- ... et les myriades de jeux en ligne que vous connaissez probablement déjà
- 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
- Avec ECMAScript : http://kangax.github.com/es5-compat-table/
- Avec DOM (voir le cours DOM):
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 lesstring
: 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" fonctionnomDeLaFonction()
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