Cours JavaScript - [Download PDF]

Programmation Web avec JavaScript

Olivier Le [email protected]

Plan du module

● Avant-propos

● Le noyau JavaScript

● JavaScript coté Client WebΟ Le BOM

Ο Le DOM

Ο Ajax

● JavaScript coté Serveur WebΟ Node.js (en cours de rédaction)

Avant-propos

La galaxie JavaScript

Noyau JS

Webapplication

Server-side(Node.js)

Adobe application

OpenOffice application

(macros)

OpenOffice application

(macros)

Client-side(BOM/DOM)

Flash(ActionScript) Photoshop,

Reader...(scripting)

NoSQL(JSON query,Map-Reduce)

Google Application

Spreadsheets(macros)

Chrome(plugin)

......

Quelques généralités sur JS

● Langage interprété (i.e. script)Ο Nécessite un interpréteur (versus. un compilateur)

● Langage orienté objetΟ Langage à "prototype"

● Confusion fréquente avec JavaΟ Aucun lien entre ces 2 langages !

● Anciennement appelé ECMAScriptΟ Standardisé par ECMA (European Computer

Manufacturers Association)

JS, une technologie client

Serveur Webwww.twitter.comServeur Web

www.twitter.com

Client Web : Chrome

Requête http

Réponse http

Execution sur le serveur(ASP, PHP, JSP, ...)

Execution sur le client(HTML, CSS, JavaScript, ...)

1

3

24

http://www.twitter.com/

Navigateurs et JavaScript

● Chaque navigateur intègre un interpréteur de JS, plus ou moins performantΟ SpiderMonkey (Firefox), V8 (Google Chrome), Chakra

(Internet Explorer), SquirrelFish (Safari)

● Permet un niveau d'interactivité plus riche qu'avec de l'HTML simpleΟ Certains traitements simples (ex: contrôle des saisies

utilisateur) peuvent être réalisés par le navigateur plutôt que par le serveur

Ο Un document HTML/CSS chargé dans le navigateur peut être "remanié" dynamiquement !

Débugger en JavaScript

● Directement dans un navigateurΟ Firebug (plugin pour Firefox et Safari)

Ο Console Développeur (Chrome, IE, Safari)

● Dans un environnement de développementΟ Javascript Debug Toolkit : plugin pour Eclipse

● Pour débugger sur Internet Explorer, Firefox, Safari, Chrome et Opera

● Activer le mode strict (c-a-d sécurisé)Ο Directive "use strict" en préambule (JS 1.8.5 et +)

Ο Vous oblige à déclarer vos variables, entre autres...

Console développeur

Frameworks JavaScript

DOMDOM

jQueryDojo

MooToolsAngularJSPrototypeZepto.js

DOMDOM

jQueryDojo

MooToolsAngularJSPrototypeZepto.js

UIUI

jQuery Mobilebootstrap

Ext JSScript.aculo.us

Ember.jsBackbone.js

UIUI

jQuery Mobilebootstrap

Ext JSScript.aculo.us

Ember.jsBackbone.js

2D/3D2D/3D

three.jsMatters.js

Pixi.jsBabylon.js

Voxel.js

2D/3D2D/3D

three.jsMatters.js

Pixi.jsBabylon.js

Voxel.js

Les alternatives à JavaScript

● Le concurrent déchu : VB Script (Microsoft)Ο Utilisé à l'époque de l'hégémonie d'Internet Explorer.

N'est interprété que par ce dernier.

● Les ersatz compilés en JavaScriptΟ DART(Google), Script#, CoffeeScript, JSX, JavaScript

Harmony, TypeScript (Microsoft), ...

● Le prétendant sérieux : DART (Google)Ο Actuellement compilé en JavaScript mais vise à terme à

supplanter JavaScript

Ο Chrome sera logiquement le 1er navigateur à supporter nativement des scripts DART

Les alternatives à JavaScript

● Le concurrent déchu : VB Script (Microsoft)Ο Utilisé à l'époque de l'hégémonie d'Internet Explorer.

N'est interprété que par ce dernier.

● Les ersatz compilés en JavaScriptΟ DART(Google), Script#, CoffeeScript, JSX, JavaScript

Harmony, TypeScript (Microsoft), ...

● Le prétendant sérieux : DART (Google)Ο Actuellement compilé en JavaScript mais vise à terme à

supplanter JavaScript

Ο Chrome sera logiquement le 1er navigateur à supporter nativement des scripts DART

Le noyau JavaScript

Aspects lexicaux

● Chaque instruction est séparée par un ;Ο Mais pas obligatoire. Le retour à la ligne suffit.

● CommentairesΟ Par ligne : // Ceci est un commentaire

Ο Par bloc : /* Ceci est un

commentaire */

● ConventionsΟ Noms de variables et fonctions écrits en CamelCase

Ο Noms de constantes écrits en majuscule

Déclaration et typage

● Déclaration (optionnelle)Ο Variables avec le mot clé var

Ο Constantes avec le mot clé constΟ Une variable peut être déclarée après avoir été utilisée

(hoisting)

● Typage dynamiqueΟ Implicite et peut changer en cours d'exécution...

var aire; const PI = 3.14;rayon = 45.761;aire = PI * rayon^2;var rayon; //hoisting

Types primitifs

● EntierΟ var annee = 2014;

● RéelΟ var prix_ttc = 45.789; //il s'agit d'un point, pas d'une virgule

● Chaîne de caractèreΟ var message="Gangnam style";

Ο var message='Gangnam style';

● BooléenΟ var estSympa=true;

Structures de contrôles

● ConditionΟ if (expr) { ... } else { ... }

● BoucleΟ while (expr) { ... }

Ο do { ... } while (expr);

● SélectionΟ switch(expr) { case n:...}

● ItérationΟ for (expr1; expr2; expr3) { ... }

Ο for (value in object) { ... }

Ο for each (key in object) { ... }

● EnchaînementΟ with(object) { key1...}

Opérateurs arithmétiques

● Opérateurs binaires

● Opérateurs unaires

Symbole Fonction Champs d'application

+ addition entiers ou réels

+ concaténation chaînes de caractères

- soustraction entiers ou réels

* multiplication entiers ou réels

/ division réelle (jamais entière) entiers ou réels

% reste de la division entière entiers

Symbole Fonction Champs d'application

+ plus entiers ou réels

- moins entiers ou réels

++ pré- ou post-incrémentation entiers ou réels

-- pré- ou post-décrémentation entiers ou réels

Opérateurs logiques

● Opérateurs binaires

● Opérateurs unaires

● Opérateurs relationnelsSymbole Fonction

&& ET logique

|| OU logique

Symbole Fonction

! NON logique

Symbole Fonction

> supérieur

>= Supérieur ou égal

< inférieur

<= Inférieur ou égal

== égal

=== identique

!= différent

!== non identique

Fonction par déclaration

● La déclaration se fait à l'aide du mot clé functionΟ function name(param1, param2) { ...; return value; }

Ο Peut retourner une valeur (return) ou non

● Différencie les procédures des "vraies" fonctions

● L'appel se fait de manière classiqueΟ Liaison des arguments avec les paramètres, si il y en a.

● Le noyau JavaScript possède déjà une bibliothèque de fonctions prédéfiniesΟ eval(), isNaN(), parseInt(), encodeURI(), ...

Portée et vie des variables

● Variable localeΟ Une variable déclarée à l'interieur d'une fonction est

seulement accessible dans cette fonction

● Variable globaleΟ Une variable déclarée en dehors de toute fonction est

accessible en tout point du script et de la page

● Cycle de vie d'une variableΟ Une variable locale est supprimée lorsque la fonction

se termine

Ο Une variale globale est supprimée à la fermeture de la page

Exemple illustratif

var price = 12.56; //variable globale, avec une valeur initiale

function getLocalTVA(country) { var tva; //variable locale à la fonction. Vaut undefined à cet instant if (country == 'FR') { tva = 19.6; } else if (country == 'EN') { tva = 20.0; } return tva;}

function applyFrenchTax() { price = price * (1 + getLocalTVA('FR') / 100.0); //appel de la fonction #1} //qui agit sur la variable globale

applyFrenchTax(); //appel de la fonction #2

console.log(price);

Fonction par expression

● JavaScript permet d'assigner des (pointeurs sur) fonctions à des variablesΟ Fonctions anonymes dont l'appel se fait au travers des

variables qui les référencent

(function (n) { console.log(n*-1); })(48); //Fonction anonyme auto-appelée

messageBox2(); //Quel est le résultat de cet appel ?helloWorld("Olivier Le Goaer"); //Quel est le résultat de cet appel ?

● ExceptionsΟ Encadrer les portions de code susceptibles de poser

problème et traiter l'erreur le cas échéant.

● Bloc try/catch

try { //Run some code here }catch(err) { //Handle errors here }

Traitements des erreurs

● Orientation objetΟ Beaucoup de chose dans le langage est considéré

comme objet (dont les fonctions !)

● Paradigme objetΟ Un objet est décrit par ses propriétés et ses méthodes

Ο Accès aux propriétés et méthodes par un point '.'

Ο Auto-référence avec thisΟ Visibilité des propriétés et méthodes : public/privé

● Absence du concept de classeΟ On ne peut pas définir de classes d'objets

Programmation Objet ?

● BooleanΟ var estSympa = new Boolean(true);

● Number (entiers et réels)

Ο var annee = new Number(2014);

● ArrayΟ var saveurs_yop = new Array[2];

Ο saveurs_yop[0] = "banane"; saveurs_yop[1]="kiwi";

● StringΟ var message = new String("Gangnam style");

typeof(nom_variable) permet de connaître le type de la variable

Objets primitifs

var p1=new Object();p1.firstname="John";p1.age=50;p1.toString = function() { return (this.firstname + ' a ' + this.age + ' ans'); }

console.log(p1.toString()); //affichera 'John a 50 ans'

● Création directe d'objet

● Utilisation d'un constructeur d'objetfunction Person(_firstname, _age) { this.firstname = _firstname; //this => public, private sinon this.age = _age; this.toString = function() { return (this.firstname + ' a ' + this.age + ' ans'); }}

var p1 = new Person("John", 50);console.log(p1.toString()); //affichera 'John a 50 ans'

2 façons de créer ses objets

● A défaut de classe...Ο Duplication des méthodes entre objets semblables !

● Peu performant : empreinte mémoire accrue

Ο Il faudrait un mécanisme pour partager les méthodes

● ...on utilise un "prototype"Ο Propriété des objets du type spécial FunctionΟ Le contenu d'un prototype (i.e. d'autres fonctions) peut

être réutilisé par les fonctions entre elles● L'héritage devient possible ● Redéfinition et surcharge de méthode supportées

De la classe au prototype

function Child(_firstname, _age) { this.firstname = _firstname; //this => public, private sinon this.age = _age;

this.pleurer = function() { console.log('Je pleure'); } this.manger = function() { console.log('Je mange'); }}

Child.prototype = new Person(); //ou = Object.create(Person.prototype)

var c1 = new Child("Justin", 3);console.log(c1.toString()); //accède à une méthode du prototype de Person (héritage !)c1.pleurer(); //accède à une méthode du prototype de Childdelete c1; //destruction de l'objet

Prototype : exemple

Fermeture lexicale (closure)

● Fonction définie au sein d'une autre fonctionΟ La fonction interne (inner) à accès au contexte de la

fonction externe (outer)● Brise le principe habituel de portée

Ο Déjà vu avec la fonction constructeur d'un objet

● Les méthodes ont bien accès aux variables this.*

● La fonction externe renvoie une référence sur la fonction interneΟ Autrement dit, la fonction renvoie une autre fonction en

tenant compte d'un contexte préétablit

Closure : exemple de la TVA

function setTVA(_tva) { const _rate = _tva / 100.0; function apply(_price) {

return _price * (1 + _rate); } return apply; // retourne une référence sur l'objet fonction apply()}

var TTCconso = setTVA(19.6); //TVA des produits de consommationvar TTCculture = setTVA(7.7); //TVA des produits culturels

//Me voilà avec 2 fonctions parfaitement intelligibles, // au lieu d'une seule fonction à 2 paramètres (la catégorie, le taux)var totalPanier = TTCconso(109.56) + TTCconso(25.0) + TTCculture(24.3);console.log('Vous devez payer :' + totalPanier + ' €');

JSON

● JavaScript Object Notation (JSON)Ο Format léger et vraiment très simple

● Il n'existe que 2 concepts : objets { } et tableaux [ ]Ο Est manipulable nativement par JavaScript !

● UsagesΟ Sert à stocker des données (ex: fichier de configuration)

Ο Sert à échanger des données à travers le réseau, entre clients et serveurs (ex: sérialisation/désérialisation)

Ο Sert à décrire un objet JS mais sous une forme textuelle dans le code source

JSON : document vs. code

{ "fruits": [ { "kiwis": 3, "mangues": 4, "pommes": null }, { "panier": true }, ], "legumes": { "patates": "amandine", "figues": "de barbarie", "poireaux": false }}

var courses = { "fruits": [ { "kiwis": 3, "mangues": 4, "pommes": null }, { "panier": true }, ], "legumes": { "patates": "amandine", "figues": "de barbarie", "poireaux": false }};

if (courses.legumes.poireaux) {console.log("j'ai des poireaux !");

}courses.json

processCourses.js

JavaScript coté Client Web

Sous-programmes JS

● Le code des sous-programmes se situe au niveau de l'entête d'un document Html

● Soit directement

● Soit par inclusion d'un fichier externe

<head><script type="text/javascript">//ici vos définitions de fonctions/procédures JS//...</script>

</head>

</head>

Programme principal JS

● Le code du programme principal se situe dans le corps d'un document HtmlΟ C-a-d les portions de code qui ont vocation à appeler

les sous-programmes

● Soit dans une balise spéciale <script></script>

● Soit via des évènements (voir diapo suivante)

<body><script type="text/javascript"> var price = 6.78;

doSomething(price); //Appel d'un sous-programme</script>

</body>

Evènements HTMLÉvènement Élément(s) html concerné(s)

onLoad BODY, FRAMESET, OBJECT

onUnload BODY et FRAMESET

onError IMG, OBJECT, BODY et FRAMESET

onAbort BODY et FRAMESET

onSelect INPUT et TEXTAREA

onChange INPUT, SELECT et TEXTAREA

onSubmit FORM

onReset FORM

onFocus LABEL, INPUT, SELECT, TEXTAREA et BUTTON

onBlur LABEL, INPUT, SELECT, TEXTAREA et BUTTON

onResize BODY

onScroll BODY

onClick Quasiment tout

onMouseOver Quasiment tout

onContextMenu Quasiment tout

● Directement à l'aide d'attributs dédiés (inline)

● Ou mise en place d'écouteurs d'évènement

…<input type=''text'' id=''userName'' onBlur=''doSomething();'' onFocus=''doSomethingElse();''/>...

<head><script type="text/javascript"> var inputTag = document.getElementById('userName'); //navigation DOM (voir suite du cours) inputTag.addEventListener('blur', doSomething(), false); inputTag.addEventListener('focus', doSomethingElse(), false);</script></head><body>...<input type=''text'' id=''userName''/>…</body>

Deux stratégies possibles

Non intrusif :ne touche

pas au corpsdu document

Evènements et standards

● Le navigateur implèmente des comportements par défaut pour les évènementsΟ Le clic gauche sur un lien hypertexte charge un

nouveau document,

Ο Un clic gauche sur un bouton soumet le formulaire,

Ο Un clic droit affiche un menu contextuel,

Ο ...

● Il est possible d'inhiber ce comportement par défaut, et le remplacer si besoinΟ <a href="#" onclick="return false">Continuer</a>

Extensions au noyau JS

● Objets de type BOMΟ Window, Navigator, Screen, History, Location

● Objets de type DOMΟ DOM Document, DOM Elements, DOM Attributes, DOM

Events, ...

● Objets de type HTMLΟ <a>, <area>, <canvas>, <button>, <form>, <iframe>,

<image>, <input>, <link>, <meta>, <object>, <option>, <select>, <style>, <table>, <td>, <th>, <tr>, <textarea>, ...

BOM: Browser Object Model

Window(fenêtre/onglet courant)

locationlocation documentdocument historyhistory navigatornavigator screenscreen

● Permet de manipuler le navigateurΟ Tous les navigateurs (IE, Firefox, Chrome, ...) sont des

logiciels qui offrent les mêmes fonctionnalités de base● Ouvrir/fermer des onglets, aller à une URL, mémoriser la

liste des URL précédemment consultées, etc.

● Arborescence d'objets

DOM

Chaque objet possède ses propriétés et méthodes

Entrées/sorties

● Méthodes d'interaction avec l'utilisateur par le biais de la fenêtre du navigateurΟ Utilisation de l'objet window

● 2 méthodes d'entréeΟ var user_age = window.prompt ("Quel est votre age ?");

Ο var user_quit = window.confirm("Voulez vous quitter cette page ?");

● 1 méthode de sortieΟ window.alert("Bienvenue sur ce site !");

Divers exemples BOM

//affiche dans la console le nom de code du navigateur utiliséconsole.log(window.navigator.appCodeName);

//redirige le navigateur vers une adresse quelconquewindow.location = "http://www.univ-pau.fr";

//ouvre un nouvel onglet dans le navigateurvar onglet = window.open('http://www.youtube.com');

//Fais revenir une page en arrière (similaire au boutton 'Back')window.history.back();

//Affiche dans une boite de dialogue la résolution de l'écran utiliséwindow.alert(window.screen.availWidth + "x" + window.screen.availHeight);

//Ecrit de l'html directement dans le document (et supprime l'existant)window.document.write("<b>Bienvenue à l'université de Pau</b>");

Exercice :● Quels sont les objets ?● Quelles sont les propriétés ? ● Quelles sont les méthodes ?

DOM: Document Object Model

● Représentation d'un document x(ht)ml sous sa forme 100% objetΟ Les balises sont des noeuds et leurs imbrications

forment une arborescence

Ο Cette structure d'arbre est ensuite facile à manipuler

● L'arbre DOM est chargé dans le navigateurΟ L'arbre est parcouru par le moteur de rendu du

navigateur afin de produire l'affichage graphique

Ο Chaque modification ultérieure de cet arbre force le rafraîchissement de l'affichage graphique

Document XHTML : exemple

<!DOCTYPE html><html>

<head><title>Bienvenue</title><script type="text/javascript" src="./essai.js"></script>

</head><body>

<p id="intro">Pour me contacter : <a href="mailto:[email protected]">cliquez ici</a><ul>

<li>Uniquement en semaine</li></ul>

</p><h1 class="joli1">S'inscrire à la Newsletter</h1><form>

</body></html>

mailto:[email protected]

Arbre du document XHTML

#text(9)#text(9)

#text(11)#text(11)

#text(21)#text(21)

#text(26)#text(26)#text(20)#text(20)

Propriétés d'un nœud

Popriétés Commentaires

childNodes nœuds enfants (Array)

firstChild premier nœud enfant

lastChild dernier nœud enfant

nextSibling prochain nœud d'un type (nœud de même niveau)

parentNode nœud parent

previousSibling nœud précédent d'un type (nœud de même niveau)

nodeName nom du nœud

nodeValue valeur / contenu du nœud

nodeType type du nœud

innerHTML contenu littéral html du noeud

Navigation dans l'arbre DOM

parentNode

firstChild

childNodes

nextSibling

lastChild

Méthodes d'un nœud

Méthodes Commentaires

createElement() Méthode pour créer un nouvel élément HTML dans le document (div, p, span, a, form, input, etc…).

createTextNode() Méthode pour créer un nœud texte.

appendChild() Pour ajouter l'élément créé dans le document. L'élément sera ajouté comme étant le dernier nœud enfant d'un élément parent.

insertBefore() Pour ajouter l'élément créé avant un autre nœud.

removeChild() Pour supprimer un nœud.

Accès direct aux nœuds

● Par la valeur de l'attribut id (si il existe)Ο var result = document.getElementById("intro") ;Ο Renverra 0 ou 1 résultat

● Par la valeur de l'attribut class (si il existe)Ο var result = document.getElementsByClassName("joli1") ;Ο Renverra 0 ou n résultats

● Par le nom de la balise (Tag en anglais)Ο var result = document.getElementsByTagName("input") ;Ο Renverra 0 ou n résultats

Accès direct aux nœuds

● Par la valeur de l'attribut name (si il existe)Ο var result = document.getElementsByName("news_email") ;Ο Renverra 0 ou n résultats

● Par les sélecteurs CSS (voir cours CSS)Ο var result = document.querySelector("p#intro") ;Ο Renverra 0 ou 1 résultat, le premier trouvé

Ο var result = document.querySelectorAll("ul.joli > li") ;Ο Renverra 0 ou n résultats

Très performant

Mode d'accès : comparaison

<html> <head> <title>Bienvenue</title>

</script> </head> <body onload=''changeColor();''>

<p>Lorem Ipsum</p> </body></html>

<html> <head> <title>Bienvenue</title>

</script> </head> <body onload=''changeColor();''>

<p id="foo">Lorem Ipsum</p> </body></html>

Accès par navigation dans l'arbre Accès direct

Objets HTML

● Après avoir navigué et atteint le nœud de son choix, il faut agir dessusΟ Pour cela, il est nécessaire de connaître sa véritable

nature (son type)● nœud <body> ? nœud <h1> ?, nœud <img> ? Etc.

Ο Principe : les attributs Html correspondent aux propriétés de l'objet (en notation CamelCase)

var imgTag = document.getElementById('foo'); //navigationimgTag.src = ''tux2.gif''; //action !

var inputTag = document.getElementById('bar'); //navigationinputTag.value = ''coucou''; //action !inputTag.size = inputTag.size * 2; //action !

Exemple de code #1.1

<title>Bienvenue</title><script type="text/javascript">

function addItem() {var ulTag = document.getElementById('list'); //navigation vers le parent

var item = document.createElement("li"); //nouveau noeud de type <li>item.innerHTML="Lorem Ipsum";ulTag.appendChild(item); //greffe du nouveau noeud à son parent

}</script>

</head><body>

<p>Pour me contacter : <a href="mailto:[email protected]">cliquez ici</a><ul id="list" onmouseover="addItem()">

<li>Uniquement en semaine</li></ul>

</p></body>

</html>

mailto:[email protected]

Exemple de code #1.2

<title>Bienvenue</title><script type="text/javascript">

function addItem(ulTag) { var item = document.createElement("li"); //nouveau noeud de type <li>

item.innerHTML="Lorem Ipsum";ulTag.appendChild(item); //greffe du nouveau noeud à son parent

}</script>

</head><body>

<p>Pour me contacter : <a href="mailto:[email protected]">cliquez ici</a><ul onmouseover="addItem(this)">

<li>Uniquement en semaine</li></ul>

</p></body>

</html>

Auto-référence avec this(évite la

navigation)

mailto:[email protected]

Exemple de code #2

<title>Bienvenue</title><script type="text/javascript">

function changeContact() { var pTag = document.getElementById("dial");

pTag.href="skype:olegoaer?call"; // changement mail → Skypewindow.alert('changement du lien de contact effectué');

}</script>

</head><body>

<p oncontextmenu="changeContact(); return false">Pour me contacter : <a id="dial" href="mailto:[email protected]">

cliquez ici</a><ul><li>Uniquement en semaine</li>

</ul></p>

</body></html>

mailto:[email protected]

● Asynchronous JavaScript and XML (Ajax)Ο Un objet spécial sert à effectuer des requêtes/réponses

HTTP en arrière plan d'un document déjà chargé

● Bouscule les habitudes de navigation par pageΟ Une seule URL (une seule page) semble désormais

rendre toute les fonctionnalités possibles

Serveur WebServeur Web

Requête HTTP

Réponse HTTP

Requêtes HTTP

Réponses HTTP +intégration au DOM courant

La technologie Ajax

Requête/réponse HTTP

● Fonctionnement asynchrone (ou pas)

● Choix du format de la réponseΟ Textuel (responseText) : chaînes ou alors innerHtml

Ο XML (responseXml) : accès au DOM !

/* VERSION SYNCHRONE */var xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", "http://ailleurs.com", false);xmlhttp.send();//bloqué ici en attente de la réponse...window.alert(xmlhttp.responseText);

/* VERSION ASYNCHRONE */var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { window.alert(xmlhttp.responseText); }};xmlhttp.open("GET", "http://ailleurs.com", true);xmlhttp.send();

JavaScript coté Serveur Web[avec Node.js]

JS, une technologie serveur

Serveur Webwww.twitter.comServeur Web

www.twitter.com

Client Web : Chrome

Requête http

Réponse http

Execution sur le serveur(JavaScript, PHP, JSP, ...)

Execution sur le client(HTML, CSS, JavaScript, ...)

1

3

24

http://www.twitter.com/

Sous le capot de Node.js

● Interpéteur Node.jsΟ Reprend le moteur V8 de Chrome (open source)

● Modèle mono-threadΟ Gestion de la concurrence des clients différente des

serveurs multi-threadés

Ο Oblige à se tourner vers un modèle non-bloquant

● Modèle non-bloquantΟ Le fonctionnement asynchrone devient la règle

● Programmation sur une couche plus basse que d'autres techologies serveur

Points forts

● PerformancesΟ Meilleurs benchmarks que Apache par exemple

● ProgrammationΟ L'asynchrone est tendance ("reactive programming")

Ο Donne un second souffle au JS

● Extensibilité et communautéΟ Il existe de très nombreux paquets (ou modules)

Ο Outillage efficace● Gestionnaire de paquets (npm)● Annuaire officiel de paquets : www.npmjs.com

http://www.npmjs.com/

Asynchrone vs synchrone

1 Begin to brew a pot of coffee.

2 Go to the store while the coffee is brewing.

3 Buy cream and sugar.

4 Return home.

5 Drink coffee immediately.

6 Enjoy life.

1 Go to the store.

2 Buy cream and sugar.

3 Return home.

4 Start brewing a pot of coffee.

5 Impatiently watch the pot of coffee as it brews.

6 Experience caffeine withdrawal.

7 Crash.

Hello worldvar http = require('http'); //module http

var server = http.createServer( function(req, res) { //un callback res.end("Hello World"); });

server.listen(6464);console.log("Serveur web lancé ...");

Serveur Web127.0.0.1

index.js

$>node index.js

Import de modules existants

● Depuis le registreΟ var monModule = require('superModule'); Ο Module natif : rien de spécial à faire

Ο Module communautaire● Récupération via npm superModule● Installé dans ./node_modules/ de votre projet

● CustomΟ var monModule = require('./foo/superModule.js');

Créer son propre module

● ExportsΟ Mécanisme de publication de divers artéfacts

● Manifeste package.jsonΟ Fichier JSON de description du module

● Nom, version, autheurs, licences, ...● Dépendances à d'autres paquets● ...

Ο Est utilisé par npm

Download - Cours JavaScript