SlideShare une entreprise Scribd logo
Programmation Web
avec JavaScript
Olivier Le Goaer
olivier.legoaer@univ-pau.fr
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
Web
application
Web
application
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
Application
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 Web
www.twitter.com
Serveur 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
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
jQuery
Dojo
MooTools
AngularJS
Prototype
Zepto.js
DOMDOM
jQuery
Dojo
MooTools
AngularJS
Prototype
Zepto.js
UIUI
jQuery Mobile
bootstrap
Ext JS
Script.aculo.us
Ember.js
Backbone.js
UIUI
jQuery Mobile
bootstrap
Ext JS
Script.aculo.us
Ember.js
Backbone.js
2D/3D2D/3D
three.js
Matters.js
Pixi.js
Babylon.js
Voxel.js
2D/3D2D/3D
three.js
Matters.js
Pixi.js
Babylon.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
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-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'objet
function 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 Child
delete 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 consommation
var 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>
<script type="text/javascript" src="./essai.js"></script>
</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 corps
du 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)
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 quelconque
window.location = "http://www.univ-pau.fr";
//ouvre un nouvel onglet dans le navigateur
var 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:olivier.legoaer@univ-pau.fr">cliquez ici</a>
<ul>
<li>Uniquement en semaine</li>
</ul>
</p>
<h1 class="joli1">S'inscrire à la Newsletter</h1>
<form>
<input type="text" name="news_email"/>
</form>
</body>
</html>
Arbre du document XHTML
<html> </html><html> </html>
<head> </head><head> </head> <body> </body><body> </body>
<p> </p><p> </p> <h1> </h1><h1> </h1> <form> </form><form> </form>
<a></a><a></a> <ul> </ul><ul> </ul>
<li></li><li></li>
<input/><input/>
<title> </title><title> </title> <script> </script><script> </script>
#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
<html> </html><html> </html>
<body> </body><body> </body>
<p> </p><p> </p> <h1> </h1><h1> </h1> <form> </form><form> </form>
<head> </head><head> </head>
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 type="text/javascript">
function changeColor() {
var htmlTag = document.childNodes[0];
var bodyTag = htmlTag.lastChild;
var pTag = bodyTag.firstChild;
pTag.style.color="#0000FF";
}
</script>
</head>
<body onload=''changeColor();''>
<p>Lorem Ipsum</p>
</body>
</html>
<html>
<head>
<title>Bienvenue</title>
<script type="text/javascript">
function changeColor() {
var pTag = document.getElementById('foo');
pTag.style.color="#0000FF";
}
</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)
<img src=''tux.gif'' alt=''Linux'' id=''foo''/>
<input type='''text'' value='''' size=''5'' id=''bar''/>
var imgTag = document.getElementById('foo'); //navigation
imgTag.src = ''tux2.gif''; //action !
var inputTag = document.getElementById('bar'); //navigation
inputTag.value = ''coucou''; //action !
inputTag.size = inputTag.size * 2; //action !
Exemple de code #1.1
<html>
<head>
<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:olivier.legoaer@univ-pau.fr">cliquez ici</a>
<ul id="list" onmouseover="addItem()">
<li>Uniquement en semaine</li>
</ul>
</p>
</body>
</html>
Exemple de code #1.2
<html>
<head>
<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:olivier.legoaer@univ-pau.fr">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)
Exemple de code #2
<html>
<head>
<title>Bienvenue</title>
<script type="text/javascript">
function changeContact() {
var pTag = document.getElementById("dial");
pTag.href="skype:olegoaer?call"; // changement mail → Skype
window.alert('changement du lien de contact effectué');
}
</script>
</head>
<body>
<p oncontextmenu="changeContact(); return false">
Pour me contacter : <a id="dial" href="mailto:olivier.legoaer@univ-pau.fr">
cliquez ici</a><ul>
<li>Uniquement en semaine</li>
</ul>
</p>
</body>
</html>
● 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 Web
www.twitter.com
Serveur 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
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
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 world
var 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 Web
127.0.0.1
Serveur Web
127.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

Contenu connexe

Tendances

Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
webreaker
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Jean-Baptiste Vigneron
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Thibault Martinez
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
DART.pptx
DART.pptxDART.pptx
DART.pptx
IdrissaDembl
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
UML Part 4- diagrammres de classes et d'objets mansouri
UML Part 4- diagrammres de classes et d'objets mansouriUML Part 4- diagrammres de classes et d'objets mansouri
UML Part 4- diagrammres de classes et d'objets mansouri
Mansouri Khalifa
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
Jaouad Assabbour
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
ENSET, Université Hassan II Casablanca
 
La gestion des exceptions avec Java
La gestion des exceptions avec JavaLa gestion des exceptions avec Java
La gestion des exceptions avec Java
Papa Cheikh Cisse
 
Chap 6 : classes et interfaces
Chap 6 : classes et interfacesChap 6 : classes et interfaces
Chap 6 : classes et interfaces
Aziz Darouichi
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Exercice 1 java Héritage
Exercice 1 java HéritageExercice 1 java Héritage
Exercice 1 java Héritage
NadaBenLatifa
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1 Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1
ENSET, Université Hassan II Casablanca
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
ENSET, Université Hassan II Casablanca
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
Abbes Rharrab
 

Tendances (20)

Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
DART.pptx
DART.pptxDART.pptx
DART.pptx
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
UML Part 4- diagrammres de classes et d'objets mansouri
UML Part 4- diagrammres de classes et d'objets mansouriUML Part 4- diagrammres de classes et d'objets mansouri
UML Part 4- diagrammres de classes et d'objets mansouri
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
La gestion des exceptions avec Java
La gestion des exceptions avec JavaLa gestion des exceptions avec Java
La gestion des exceptions avec Java
 
Chap 6 : classes et interfaces
Chap 6 : classes et interfacesChap 6 : classes et interfaces
Chap 6 : classes et interfaces
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Exercice 1 java Héritage
Exercice 1 java HéritageExercice 1 java Héritage
Exercice 1 java Héritage
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1 Mise en oeuvre des framework de machines et deep learning v1
Mise en oeuvre des framework de machines et deep learning v1
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
 

En vedette

INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009Nabeledi Ouattara
 
Advanced html5
Advanced html5Advanced html5
Advanced html5
Arrow Group
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
TheBest Icanbe
 
Java script ppt
Java script pptJava script ppt
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
Olivier Le Goaër
 

En vedette (7)

Php
PhpPhp
Php
 
INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009INITIATION_JAVASCRIPT_NAB_2009
INITIATION_JAVASCRIPT_NAB_2009
 
Advanced html5
Advanced html5Advanced html5
Advanced html5
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 

Similaire à Cours JavaScript

Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScript
Microsoft Technet France
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
Dr Samir A. ROUABHI
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovyguest6e3bed
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation GroovyJS Bournival
 
Enib cours c.a.i. web - séance #5 : scala play! framework
Enib   cours c.a.i. web - séance #5 : scala play! frameworkEnib   cours c.a.i. web - séance #5 : scala play! framework
Enib cours c.a.i. web - séance #5 : scala play! frameworkHoracio Gonzalez
 
Android Optimisations Greendroid
Android Optimisations GreendroidAndroid Optimisations Greendroid
Android Optimisations GreendroidGDG Nantes
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech daysJean-Pierre Vincent
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
Jean-Pierre Vincent
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
YounesOuladSayad1
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Microsoft
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieurFredy Fadel
 
Introduction au langage Go
Introduction au langage GoIntroduction au langage Go
Introduction au langage Go
Sylvain Wallez
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
Jean-Pierre Vincent
 
ENIB 2013-2014 - CAI Web #3: Groovy
ENIB 2013-2014 - CAI Web #3: GroovyENIB 2013-2014 - CAI Web #3: Groovy
ENIB 2013-2014 - CAI Web #3: GroovyHoracio Gonzalez
 
Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
Jean-Baptiste Vigneron
 
Nouveautés de java 8
Nouveautés de java 8Nouveautés de java 8
Nouveautés de java 8
Florian Beaufumé
 
C# 7 - Nouveautés
C# 7 - NouveautésC# 7 - Nouveautés
C# 7 - Nouveautés
James RAVAILLE
 
JQuery
JQueryJQuery
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture
zaghir
 
Dynamic Languages
Dynamic LanguagesDynamic Languages
Dynamic Languages
Tugdual Grall
 

Similaire à Cours JavaScript (20)

Patterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScriptPatterns et bonnes pratiques autour de JavaScript
Patterns et bonnes pratiques autour de JavaScript
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Présentation Groovy
Présentation GroovyPrésentation Groovy
Présentation Groovy
 
Enib cours c.a.i. web - séance #5 : scala play! framework
Enib   cours c.a.i. web - séance #5 : scala play! frameworkEnib   cours c.a.i. web - séance #5 : scala play! framework
Enib cours c.a.i. web - séance #5 : scala play! framework
 
Android Optimisations Greendroid
Android Optimisations GreendroidAndroid Optimisations Greendroid
Android Optimisations Greendroid
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieur
 
Introduction au langage Go
Introduction au langage GoIntroduction au langage Go
Introduction au langage Go
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
ENIB 2013-2014 - CAI Web #3: Groovy
ENIB 2013-2014 - CAI Web #3: GroovyENIB 2013-2014 - CAI Web #3: Groovy
ENIB 2013-2014 - CAI Web #3: Groovy
 
Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
 
Nouveautés de java 8
Nouveautés de java 8Nouveautés de java 8
Nouveautés de java 8
 
C# 7 - Nouveautés
C# 7 - NouveautésC# 7 - Nouveautés
C# 7 - Nouveautés
 
JQuery
JQueryJQuery
JQuery
 
Javascript Json artchitecture
Javascript  Json artchitecture Javascript  Json artchitecture
Javascript Json artchitecture
 
Dynamic Languages
Dynamic LanguagesDynamic Languages
Dynamic Languages
 

Plus de Olivier Le Goaër

The road to green code
The road to green codeThe road to green code
The road to green code
Olivier Le Goaër
 
Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study
 Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study
Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study
Olivier Le Goaër
 
PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...
PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...
PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...
Olivier Le Goaër
 
Enforcing Green Code With Android Lint
Enforcing Green Code With Android LintEnforcing Green Code With Android Lint
Enforcing Green Code With Android Lint
Olivier Le Goaër
 
GREEN PAUWARE - For a power-thrifty mobile app marketplace
GREEN PAUWARE - For a power-thrifty mobile app marketplaceGREEN PAUWARE - For a power-thrifty mobile app marketplace
GREEN PAUWARE - For a power-thrifty mobile app marketplace
Olivier Le Goaër
 
Introduction au langage SQL
Introduction au langage SQLIntroduction au langage SQL
Introduction au langage SQL
Olivier Le Goaër
 
Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !
Olivier Le Goaër
 
Executable modeling & dynamic adaptation
Executable modeling & dynamic adaptationExecutable modeling & dynamic adaptation
Executable modeling & dynamic adaptation
Olivier Le Goaër
 
Adaptation d'exécution de modèles : vers des iDSML adaptables
Adaptation d'exécution de modèles : vers des iDSML adaptablesAdaptation d'exécution de modèles : vers des iDSML adaptables
Adaptation d'exécution de modèles : vers des iDSML adaptables
Olivier Le Goaër
 
Formation VBA Excel
Formation VBA ExcelFormation VBA Excel
Formation VBA Excel
Olivier Le Goaër
 
Android executable modeling: beyond android programming
Android executable modeling: beyond android programmingAndroid executable modeling: beyond android programming
Android executable modeling: beyond android programming
Olivier Le Goaër
 
Yet another DSL for cross platforms mobile development
Yet another DSL for cross platforms mobile developmentYet another DSL for cross platforms mobile development
Yet another DSL for cross platforms mobile development
Olivier Le Goaër
 
Introduction à l'approche ADM de l'OMG
Introduction à l'approche ADM de l'OMGIntroduction à l'approche ADM de l'OMG
Introduction à l'approche ADM de l'OMG
Olivier Le Goaër
 
Syntaxe concrète des DSL en IDM [avec Xtext]
Syntaxe concrète des DSL en IDM [avec Xtext]Syntaxe concrète des DSL en IDM [avec Xtext]
Syntaxe concrète des DSL en IDM [avec Xtext]
Olivier Le Goaër
 

Plus de Olivier Le Goaër (14)

The road to green code
The road to green codeThe road to green code
The road to green code
 
Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study
 Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study
Ecological Impact of Native vs. Cross-Platform Mobile Apps: a Preliminary Study
 
PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...
PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...
PowDroid: Energy Profiling of Android Applications (ASE 2021 [Workshop] SUSTA...
 
Enforcing Green Code With Android Lint
Enforcing Green Code With Android LintEnforcing Green Code With Android Lint
Enforcing Green Code With Android Lint
 
GREEN PAUWARE - For a power-thrifty mobile app marketplace
GREEN PAUWARE - For a power-thrifty mobile app marketplaceGREEN PAUWARE - For a power-thrifty mobile app marketplace
GREEN PAUWARE - For a power-thrifty mobile app marketplace
 
Introduction au langage SQL
Introduction au langage SQLIntroduction au langage SQL
Introduction au langage SQL
 
Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !Les Web Services en 60 diapos chrono !
Les Web Services en 60 diapos chrono !
 
Executable modeling & dynamic adaptation
Executable modeling & dynamic adaptationExecutable modeling & dynamic adaptation
Executable modeling & dynamic adaptation
 
Adaptation d'exécution de modèles : vers des iDSML adaptables
Adaptation d'exécution de modèles : vers des iDSML adaptablesAdaptation d'exécution de modèles : vers des iDSML adaptables
Adaptation d'exécution de modèles : vers des iDSML adaptables
 
Formation VBA Excel
Formation VBA ExcelFormation VBA Excel
Formation VBA Excel
 
Android executable modeling: beyond android programming
Android executable modeling: beyond android programmingAndroid executable modeling: beyond android programming
Android executable modeling: beyond android programming
 
Yet another DSL for cross platforms mobile development
Yet another DSL for cross platforms mobile developmentYet another DSL for cross platforms mobile development
Yet another DSL for cross platforms mobile development
 
Introduction à l'approche ADM de l'OMG
Introduction à l'approche ADM de l'OMGIntroduction à l'approche ADM de l'OMG
Introduction à l'approche ADM de l'OMG
 
Syntaxe concrète des DSL en IDM [avec Xtext]
Syntaxe concrète des DSL en IDM [avec Xtext]Syntaxe concrète des DSL en IDM [avec Xtext]
Syntaxe concrète des DSL en IDM [avec Xtext]
 

Cours JavaScript

  • 1. Programmation Web avec JavaScript Olivier Le Goaer olivier.legoaer@univ-pau.fr
  • 2. 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)
  • 4. La galaxie JavaScript Noyau JS Web application Web application 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 Application Google Application Spreadsheets (macros) Chrome (plugin) ......
  • 5. 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)
  • 6. JS, une technologie client Serveur Web www.twitter.com Serveur 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
  • 7. 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 !
  • 8. 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...
  • 10. Frameworks JavaScript DOMDOM jQuery Dojo MooTools AngularJS Prototype Zepto.js DOMDOM jQuery Dojo MooTools AngularJS Prototype Zepto.js UIUI jQuery Mobile bootstrap Ext JS Script.aculo.us Ember.js Backbone.js UIUI jQuery Mobile bootstrap Ext JS Script.aculo.us Ember.js Backbone.js 2D/3D2D/3D three.js Matters.js Pixi.js Babylon.js Voxel.js 2D/3D2D/3D three.js Matters.js Pixi.js Babylon.js Voxel.js
  • 11. 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
  • 12. 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
  • 14. 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
  • 15. 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
  • 16. 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;
  • 17. 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...}
  • 18. 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
  • 19. 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
  • 20. 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(), ...
  • 21. 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
  • 22. 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);
  • 23. 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 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-appelée messageBox2(); //Quel est le résultat de cet appel ? helloWorld("Olivier Le Goaer"); //Quel est le résultat de cet appel ?
  • 24. ● 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
  • 25. ● 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 ?
  • 26. ● 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
  • 27. 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'objet function 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
  • 28. ● 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
  • 29. 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 Child delete c1; //destruction de l'objet Prototype : exemple
  • 30. 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
  • 31. 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 consommation var 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 + ' €');
  • 32. 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
  • 33. 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
  • 35. 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> <script type="text/javascript" src="./essai.js"></script> </head>
  • 36. 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>
  • 37. 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
  • 38. ● 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 corps du document
  • 39. 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>
  • 40. 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>, ...
  • 41. BOM: Browser Object Model Window (fenêtre/onglet courant) 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
  • 42. 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 !");
  • 43. 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 quelconque window.location = "http://www.univ-pau.fr"; //ouvre un nouvel onglet dans le navigateur var 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 ?
  • 44. 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
  • 45. 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:olivier.legoaer@univ-pau.fr">cliquez ici</a> <ul> <li>Uniquement en semaine</li> </ul> </p> <h1 class="joli1">S'inscrire à la Newsletter</h1> <form> <input type="text" name="news_email"/> </form> </body> </html>
  • 46. Arbre du document XHTML <html> </html><html> </html> <head> </head><head> </head> <body> </body><body> </body> <p> </p><p> </p> <h1> </h1><h1> </h1> <form> </form><form> </form> <a></a><a></a> <ul> </ul><ul> </ul> <li></li><li></li> <input/><input/> <title> </title><title> </title> <script> </script><script> </script> #text(9)#text(9) #text(11)#text(11) #text(21)#text(21) #text(26)#text(26)#text(20)#text(20)
  • 47. 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
  • 48. Navigation dans l'arbre DOM <html> </html><html> </html> <body> </body><body> </body> <p> </p><p> </p> <h1> </h1><h1> </h1> <form> </form><form> </form> <head> </head><head> </head> parentNode firstChild childNodes nextSibling lastChild
  • 49. 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.
  • 50. 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
  • 51. 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
  • 52. Mode d'accès : comparaison <html> <head> <title>Bienvenue</title> <script type="text/javascript"> function changeColor() { var htmlTag = document.childNodes[0]; var bodyTag = htmlTag.lastChild; var pTag = bodyTag.firstChild; pTag.style.color="#0000FF"; } </script> </head> <body onload=''changeColor();''> <p>Lorem Ipsum</p> </body> </html> <html> <head> <title>Bienvenue</title> <script type="text/javascript"> function changeColor() { var pTag = document.getElementById('foo'); pTag.style.color="#0000FF"; } </script> </head> <body onload=''changeColor();''> <p id="foo">Lorem Ipsum</p> </body> </html> Accès par navigation dans l'arbre Accès direct
  • 53. 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) <img src=''tux.gif'' alt=''Linux'' id=''foo''/> <input type='''text'' value='''' size=''5'' id=''bar''/> var imgTag = document.getElementById('foo'); //navigation imgTag.src = ''tux2.gif''; //action ! var inputTag = document.getElementById('bar'); //navigation inputTag.value = ''coucou''; //action ! inputTag.size = inputTag.size * 2; //action !
  • 54. Exemple de code #1.1 <html> <head> <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:olivier.legoaer@univ-pau.fr">cliquez ici</a> <ul id="list" onmouseover="addItem()"> <li>Uniquement en semaine</li> </ul> </p> </body> </html>
  • 55. Exemple de code #1.2 <html> <head> <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:olivier.legoaer@univ-pau.fr">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)
  • 56. Exemple de code #2 <html> <head> <title>Bienvenue</title> <script type="text/javascript"> function changeContact() { var pTag = document.getElementById("dial"); pTag.href="skype:olegoaer?call"; // changement mail → Skype window.alert('changement du lien de contact effectué'); } </script> </head> <body> <p oncontextmenu="changeContact(); return false"> Pour me contacter : <a id="dial" href="mailto:olivier.legoaer@univ-pau.fr"> cliquez ici</a><ul> <li>Uniquement en semaine</li> </ul> </p> </body> </html>
  • 57. ● 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
  • 58. 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();
  • 60. JS, une technologie serveur Serveur Web www.twitter.com Serveur 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
  • 61. 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
  • 62. 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
  • 63. 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.
  • 64. Hello world var 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 Web 127.0.0.1 Serveur Web 127.0.0.1 index.js $>node index.js
  • 65. 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');
  • 66. 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