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 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:

Expressions

Une instruction finit par un point-virgule:

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:

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:

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

  • On a aussi : function, object, 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 peut s'ecrire ou comme 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:

La concaténation des chaines se fait avec l'opérateur +: Le symbole + est en priorité la concaténation: Mais attention à l'ordre d'évaluation:

Conversion

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

Entrées - Sorties

Interaction avec l'utilisateur

Avec des pop-up:

Attention

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

Sortie sur la console JavaScript

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

Les if se combinent

Distinction de cas avec switch

Opérateur conditionnel ternaire

Comme dans d'autre langage, on a le raccourcis

Boucle while

Boucle for

Tableaux

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

Les tableaux sont en fait des objets:

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

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

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

Fonctions

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

Appel d'une fonction

Les fonctions sont identifiées par leur nom. En particulier, on peut sans problème les passer en argument d'une autre fonction: Le langage est dit fonctionnel: les fonctions sont des données comme les autres.

Attention

Ne pas confondre une fonction et sa valeur: 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: Ceci est donc simplement une expression qui s'avère retourner une fonction... On peut la ranger dans une variable: 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:

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

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

Objets

Un object en javascript est essentiellement une '''table d'association''' entre des attributs et des valeurs. Par exemple: définit un objet avec deux attributs x et y, auxquels on accède avec un point (comme en Java) 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