Cours JavaScript

of 66 /66
Programmation Web avec JavaScript Olivier Le Goaer [email protected]

Embed Size (px)

Transcript of Cours JavaScript

  • Programmation Web avec JavaScript

    Olivier Le [email protected]

  • Plan du module

    Avant-proposLe noyau JavaScript JavaScript cot Client Web

    Le BOM Le DOM Ajax

    JavaScript cot Serveur Web Node.js (en cours de rdaction)

  • Avant-propos

  • La galaxie JavaScript

    Noyau JS

    Webapplication

    Webapplication

    Server-side(Node.js)

    Adobe application

    Adobe application

    OpenOffice application

    (macros)

    OpenOffice application

    (macros)

    Client-side(BOM/DOM)

    Flash(ActionScript) Photoshop,

    Reader...(scripting)

    NoSQL(JSON query,Map-Reduce)

    NoSQL(JSON query,Map-Reduce)

    Google ApplicationGoogle

    Application

    Spreadsheets(macros)

    Chrome(plugin)

    ......

  • Quelques gnralits sur JS

    Langage interprt (i.e. script) Ncessite un interprteur (versus. un compilateur)

    Langage orient objet Langage "prototype"

    Confusion frquente 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

    Requte http

    Rponse http

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

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

    1

    3

    24

    http://www.twitter.com/http://www.twitter.com/

  • Navigateurs et JavaScript

    Chaque navigateur intgre un interprteur 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: contrle des saisies

    utilisateur) peuvent tre raliss par le navigateur plutt que par le serveur

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

  • Dbugger en JavaScript

    Directement dans un navigateur Firebug (plugin pour Firefox et Safari) Console Dveloppeur (Chrome, IE, Safari)

    Dans un environnement de dveloppement Javascript Debug Toolkit : plugin pour Eclipse

    Pour dbugger sur Internet Explorer, Firefox, Safari, Chrome et Opera

    Activer le mode strict (c-a-d scuris) Directive "use strict" en prambule (JS 1.8.5 et +) Vous oblige dclarer vos variables, entre autres...

  • Console dveloppeur

  • 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 dchu : VB Script (Microsoft) Utilis l'poque de l'hgmonie d'Internet Explorer.

    N'est interprt que par ce dernier.Les ersatz compils en JavaScript

    DART(Google), Script#, CoffeeScript, JSX, JavaScript Harmony, TypeScript (Microsoft), ...

    Le prtendant srieux : 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 dchu : VB Script (Microsoft) Utilis l'poque de l'hgmonie d'Internet Explorer.

    N'est interprt que par ce dernier.Les ersatz compils en JavaScript

    DART(Google), Script#, CoffeeScript, JSX, JavaScript Harmony, TypeScript (Microsoft), ...

    Le prtendant srieux : 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 spare 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

  • Dclaration et typage

    Dclaration (optionnelle) Variables avec le mot cl var Constantes avec le mot cl const Une variable peut tre dclare aprs avoir t utilise

    (hoisting)

    Typage dynamique Implicite et peut changer en cours d'excution...

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

  • Types primitifs

    Entier var annee = 2014;

    Rel var prix_ttc = 45.789; //il s'agit d'un point, pas d'une virgule

    Chane de caractre var message="Gangnam style"; var message='Gangnam style';

    Boolen var estSympa=true;

  • Structures de contrles

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

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

    Slection switch(expr) { case n:...}

    Itration for (expr1; expr2; expr3) { ... } for (value in object) { ... } for each (key in object) { ... }

    Enchanement with(object) { key1...}

  • Oprateurs arithmtiques

    Oprateurs binaires

    Oprateurs unaires

    Symbole Fonction Champs d'application+ addition entiers ou rels

    + concatnation chanes de caractres

    - soustraction entiers ou rels

    * multiplication entiers ou rels

    / division relle (jamais entire) entiers ou rels

    % reste de la division entire entiers

    Symbole Fonction Champs d'application+ plus entiers ou rels

    - moins entiers ou rels

    ++ pr- ou post-incrmentation entiers ou rels

    -- pr- ou post-dcrmentation entiers ou rels

  • Oprateurs logiques

    Oprateurs binaires

    Oprateurs unaires

    Oprateurs relationnelsSymbole Fonction

    && ET logique

    || OU logique

    Symbole Fonction! NON logique

    Symbole Fonction

    > suprieur

    >= Suprieur ou gal

    < infrieur

  • Fonction par dclaration

    La dclaration se fait l'aide du mot cl function function name(param1, param2) { ...; return value; } Peut retourner une valeur (return) ou non

    Diffrencie les procdures des "vraies" fonctionsL'appel se fait de manire classique

    Liaison des arguments avec les paramtres, si il y en a.Le noyau JavaScript possde dj une

    bibliothque de fonctions prdfinies eval(), isNaN(), parseInt(), encodeURI(), ...

  • Porte et vie des variables

    Variable locale Une variable dclare l'interieur d'une fonction est

    seulement accessible dans cette fonctionVariable globale

    Une variable dclare 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 supprime lorsque la fonction

    se termine Une variale globale est supprime 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 rfrencent

    var messageBox = function () { console.log("Justin Bieber"); };var messageBox2 = messageBox;var helloWorld = function (people) { console.log("Hello " + people + "!"); };messageBox = function () { console.log("Selena Gomez"); };

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

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

  • Exceptions Encadrer les portions de code susceptibles de poser

    problme et traiter l'erreur le cas chant.

    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 considr

    comme objet (dont les fonctions !)Paradigme objet

    Un objet est dcrit par ses proprits et ses mthodes Accs aux proprits et mthodes par un point '.' Auto-rfrence avec this Visibilit des proprits et mthodes : public/priv

    Absence du concept de classe On ne peut pas dfinir de classes d'objets

    Programmation Objet ?

  • Boolean var estSympa = new Boolean(true);

    Number (entiers et rels) 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 connatre 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'

    Cration 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 faons de crer ses objets

  • A dfaut de classe... Duplication des mthodes entre objets semblables !

    Peu performant : empreinte mmoire accrue Il faudrait un mcanisme pour partager les mthodes

    ...on utilise un "prototype" Proprit des objets du type spcial Function Le contenu d'un prototype (i.e. d'autres fonctions) peut

    tre rutilis par les fonctions entre elles L'hritage devient possible Redfinition et surcharge de mthode supportes

    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()); //accde une mthode du prototype de Person (hritage !)c1.pleurer(); //accde une mthode du prototype de Childdelete c1; //destruction de l'objet

    Prototype : exemple

  • Fermeture lexicale (closure)

    Fonction dfinie au sein d'une autre fonction La fonction interne (inner) accs au contexte de la

    fonction externe (outer) Brise le principe habituel de porte

    Dj vu avec la fonction constructeur d'un objet Les mthodes ont bien accs aux variables this.*

    La fonction externe renvoie une rfrence sur la fonction interne Autrement dit, la fonction renvoie une autre fonction en

    tenant compte d'un contexte prtablit

  • Closure : exemple de la TVA

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

    return _price * (1 + _rate); } return apply; // retourne une rfrence 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 paramtres (la catgorie, 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 lger et vraiment trs simple

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

    Usages Sert stocker des donnes (ex: fichier de configuration) Sert changer des donnes travers le rseau, entre

    clients et serveurs (ex: srialisation/dsrialisation) Sert dcrire 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'entte d'un document Html

    Soit directement

    Soit par inclusion d'un fichier externe

    //ici vos dfinitions de fonctions/procdures JS//...

  • 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 spciale

    Soit via des vnements (voir diapo suivante)

    var price = 6.78;

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

  • Evnements HTMLvnement lment(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 ddis (inline)

    Ou mise en place d'couteurs d'vnement

    ...

    var inputTag = document.getElementById('userName'); //navigation DOM (voir suite du cours) inputTag.addEventListener('blur', doSomething(), false); inputTag.addEventListener('focus', doSomethingElse(), false);

    ...

    Deux stratgies possibles

    Non intrusif :ne touche

    pas au corpsdu document

  • Evnements et standards

    Le navigateur implmente des comportements par dfaut pour les vnements 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 dfaut, et le remplacer si besoin Continuer

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

    , , , , , , , , , , , , , ...

  • BOM: Browser Object Model

    Window(fentre/onglet courant)

    Window(fentre/onglet courant)

    locationlocation documentdocument historyhistory navigatornavigator screenscreen

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

    logiciels qui offrent les mmes fonctionnalits de base Ouvrir/fermer des onglets, aller une URL, mmoriser la

    liste des URL prcdemment consultes, etc.Arborescence d'objets

    DOM

    Chaque objet possde ses proprits et mthodes

  • Entres/sorties

    Mthodes d'interaction avec l'utilisateur par le biais de la fentre du navigateur Utilisation de l'objet window

    2 mthodes d'entre var user_age = window.prompt ("Quel est votre age ?"); var user_quit = window.confirm("Voulez vous quitter cette

    page ?");

    1 mthode de sortie window.alert("Bienvenue sur ce site !");

  • Divers exemples BOM

    //affiche dans la console le nom de code du navigateur utilisconsole.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 arrire (similaire au boutton 'Back')window.history.back();

    //Affiche dans une boite de dialogue la rsolution de l'cran utiliswindow.alert(window.screen.availWidth + "x" + window.screen.availHeight);

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

    Exercice : Quels sont les objets ? Quelles sont les proprits ? Quelles sont les mthodes ?

  • DOM: Document Object Model

    Reprsentation 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 ultrieure de cet arbre force le

    rafrachissement de l'affichage graphique

  • Document XHTML : exemple

    Bienvenue

    Pour me contacter : cliquez ici

    Uniquement en semaine

    S'inscrire la Newsletter

    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)

  • Proprits d'un nud

    Poprits CommentaireschildNodes nuds enfants (Array)firstChild premier nud enfantlastChild dernier nud enfantnextSibling prochain nud d'un type (nud de

    mme niveau)parentNode nud parentpreviousSibling nud prcdent d'un type (nud

    de mme niveau)nodeName nom du nudnodeValue valeur / contenu du nudnodeType type du nudinnerHTML contenu littral html du noeud

  • Navigation dans l'arbre DOM

    parentNode

    firstChild

    childNodes

    nextSibling

    lastChild

  • Mthodes d'un nud

    Mthodes CommentairescreateElement() Mthode pour crer un nouvel lment

    HTML dans le document (div, p, span, a, form, input, etc).

    createTextNode() Mthode pour crer un nud texte.appendChild() Pour ajouter l'lment cr dans le

    document. L'lment sera ajout comme tant le dernier nud enfant d'un lment parent.

    insertBefore() Pour ajouter l'lment cr avant un autre nud.

    removeChild() Pour supprimer un nud.

  • Accs direct aux nuds

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

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

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

  • Accs direct aux nuds

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

    Par les slecteurs CSS (voir cours CSS) var result = document.querySelector("p#intro") ; Renverra 0 ou 1 rsultat, le premier trouv

    var result = document.querySelectorAll("ul.joli > li") ; Renverra 0 ou n rsultats

    Trs performant

  • Mode d'accs : comparaison

    Bienvenue

    function changeColor() { var htmlTag = document.childNodes[0]; var bodyTag = htmlTag.lastChild; var pTag = bodyTag.firstChild; pTag.style.color="#0000FF";}

    Lorem Ipsum

    Bienvenue

    function changeColor() { var pTag = document.getElementById('foo'); pTag.style.color="#0000FF";}

    Lorem Ipsum

    Accs par navigation dans l'arbre Accs direct

  • Objets HTML

    Aprs avoir navigu et atteint le nud de son choix, il faut agir dessus Pour cela, il est ncessaire de connatre sa vritable

    nature (son type) nud ? nud ?, nud ? Etc.

    Principe : les attributs Html correspondent aux proprits de l'objet (en notation CamelCase)

  • Exemple de code #1.1

    Bienvenue

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

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

    }

    Pour me contacter : cliquez ici

    Uniquement en semaine

    mailto:[email protected]

  • Exemple de code #1.2

    Bienvenue

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

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

    }

    Pour me contacter : cliquez ici

    Uniquement en semaine

    Auto-rfrence avec this(vite la

    navigation)

    mailto:[email protected]

  • Exemple de code #2

    Bienvenue

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

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

    }

    Pour me contacter :

    cliquez iciUniquement en semaine

    mailto:[email protected]

  • Asynchronous JavaScript and XML (Ajax) Un objet spcial sert effectuer des requtes/rponses

    HTTP en arrire plan d'un document dj chargBouscule les habitudes de navigation par page

    Une seule URL (une seule page) semble dsormais rendre toute les fonctionnalits possibles

    Serveur WebServeur Web

    Requte HTTP

    Rponse HTTP

    Requtes HTTP

    Rponses HTTP +intgration au DOM courant

    La technologie Ajax

  • Requte/rponse HTTP

    Fonctionnement asynchrone (ou pas)

    Choix du format de la rponse Textuel (responseText) : chanes ou alors innerHtml XML (responseXml) : accs au DOM !

    /* VERSION SYNCHRONE */var xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", "http://ailleurs.com", false);xmlhttp.send();//bloqu ici en attente de la rponse...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

    Requte http

    Rponse http

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

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

    1

    3

    24

    http://www.twitter.com/http://www.twitter.com/

  • Sous le capot de Node.js

    Interpteur Node.js Reprend le moteur V8 de Chrome (open source)

    Modle mono-thread Gestion de la concurrence des clients diffrente des

    serveurs multi-threads Oblige se tourner vers un modle non-bloquant

    Modle non-bloquant Le fonctionnement asynchrone devient la rgle

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

    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 spcial faire Module communautaire

    Rcupration via npm superModule Install dans ./node_modules/ de votre projet

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

  • Crer son propre module

    Exports Mcanisme de publication de divers artfacts

    Manifeste package.json Fichier JSON de description du module

    Nom, version, autheurs, licences, ... Dpendances d'autres paquets ...

    Est utilis par npm

    Diapo 1Diapo 2Diapo 3Diapo 4Diapo 5Diapo 6Diapo 7Diapo 8Diapo 9Diapo 10Diapo 11Diapo 12Diapo 13Diapo 14Diapo 15Diapo 16Diapo 17Diapo 18Diapo 19Diapo 20Diapo 21Diapo 22Diapo 23Diapo 24Diapo 25Diapo 26Diapo 27Diapo 28Diapo 29Diapo 30Diapo 31Diapo 32Diapo 33Diapo 34Diapo 35Diapo 36Diapo 37Diapo 38Diapo 39Diapo 40Diapo 41Diapo 42Diapo 43Diapo 44Diapo 45Diapo 46Diapo 47Diapo 48Diapo 49Diapo 50Diapo 51Diapo 52Diapo 53Diapo 54Diapo 55Diapo 56Diapo 57Diapo 58Diapo 59Diapo 60Diapo 61Diapo 62Diapo 63Diapo 64Diapo 65Diapo 66