Vous êtes sur la page 1sur 66

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
Adobe
Adobe
...
... application
application
NoSQL
NoSQL
(JSON
(JSONquery,
query, Flash
Map-Reduce)
Map-Reduce) Noyau (ActionScript) Photoshop,
JS Reader...
(scripting)

Web
Web
application
application
Google
Google
Application
Application
Server-side
(Node.js)
Client-side
(BOM/DOM) Chrome
Spreadsheets (plugin)
OpenOffice
OpenOffice (macros)
application
application
(macros)
(macros)
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

Client Web : Chrome


1 Requête http

Serveur
ServeurWeb
Web
www.twitter.com
www.twitter.com

3 Réponse http

Execution sur le client Execution sur le serveur


(HTML, CSS, JavaScript, ...) (ASP, PHP, JSP, ...)
4 2
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)
● Permetun 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

UI
UI

DOM
DOM jQuery
jQueryMobile
Mobile
bootstrap
bootstrap
jQuery
jQuery Ext
ExtJS
JS
Dojo
Dojo Script.aculo.us
Script.aculo.us
MooTools
MooTools Ember.js
Ember.js
AngularJS
AngularJS Backbone.js
Backbone.js
Prototype
Prototype
Zepto.js
Zepto.js
2D/3D
2D/3D
three.js
three.js
Matters.js
Matters.js
Pixi.js
Pixi.js
Babylon.js
Babylon.js
Voxel.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)
var aire; const PI = 3.14;
rayon = 45.761;
aire = PI * rayon^2;
var rayon; //hoisting

● Typage dynamique
Ο Implicite et peut changer en cours d'exécution...
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 ● Itération
Ο if (expr) { ... } else { ... } Ο for (expr1; expr2; expr3) { ... }
● Boucle Ο for (value in object) { ... }
Ο while (expr) { ... } Ο for each (key in object) { ... }
Ο do { ... } while (expr); ● Enchaînement

● Sélection Ο with(object) { key1...}


Ο switch(expr) { case n:...}
Opérateurs arithmétiques

● Opérateurs binaires
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

● Opérateurs unaires
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


Symbole Fonction relationnels
&& ET logique
|| OU logique Symbole Fonction
> supérieur
>= Supérieur ou égal

< inférieur
● Opérateurs unaires <= Inférieur ou égal

== égal

Symbole Fonction === identique


! NON logique != 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.
● Lenoyau 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 ?
Traitements des erreurs

● 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
}
Programmation Objet ?

● 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
Objets primitifs
typeof(nom_variable)
● Boolean permet de connaître
le type de la variable

Ο 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");
2 façons de créer ses objets

● Création directe d'objet


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'

● 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'
De la classe au prototype

● 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
Prototype : exemple

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
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.*
● Lafonction 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
{ var courses = {
"fruits": [ "fruits": [
{ "kiwis": 3, { "kiwis": 3,
"mangues": 4, "mangues": 4,
"pommes": null "pommes": null
}, },
{ "panier": true }, { "panier": true },
], ],
"legumes": "legumes":
{ "patates": "amandine", { "patates": "amandine",
"figues": "de barbarie", "figues": "de barbarie",
"poireaux": false "poireaux": false
} }
} };

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

processCourses.js
JavaScript coté
Client Web
Sous-programmes JS

● Lecode des sous-programmes se situe au


niveau de l'entête d'un document Html
● Soit directement
<head>
<script type="text/javascript">
//ici vos définitions de fonctions/procédures JS
//...
</script>
</head>

● Soit par inclusion d'un fichier externe


<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>
<body>
<script type="text/javascript">
var price = 6.78;
doSomething(price); //Appel d'un sous-programme
</script>
</body>

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


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


Deux stratégies possibles

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



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

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


<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>
... Non intrusif :
<input type=''text'' id=''userName''/> ne touche
… pas au corps
du document
</body>
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

● 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
Window
Window
(fenêtre/onglet
(fenêtre/ongletcourant)
courant)

Chaque objet
possède ses
propriétés et
méthodes
location
location document
document history
history navigator
navigator screen
screen
DOM
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

Exercice :
//affiche dans la console le nom de code du navigateur utilisé ● Quels sont
console.log(window.navigator.appCodeName); les objets ?
● Quelles sont

les propriétés ?
//redirige le navigateur vers une adresse quelconque ● Quelles sont

window.location = "http://www.univ-pau.fr"; les méthodes ?

//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>");
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>

<title>
<title></title>
</title> <script>
<script> </script>
</script> <p>
<p> </p>
</p> <h1>
<h1> </h1>
</h1> <form>
<form> </form>
</form>

#text(9)
#text(9) #text(20)
#text(20) <a></a>
<a></a> <ul>
<ul> </ul>
</ul> #text(26)
#text(26) <input/>
<input/>

#text(11)
#text(11) <li></li>
<li></li>

#text(21)
#text(21)
Propriétés d'un nœud

Popriétés Commentaires
childNodes nœuds enfants (Array)
firstChild premier nœud enfant
lastChild dernier nœud enfant
nextSibling prochain nœud d'un type (nœud de
même niveau)
parentNode nœud parent
previousSibling nœud précédent d'un type (nœud
de même niveau)
nodeName nom du nœud
nodeValue valeur / contenu du nœud
nodeType type du nœud
innerHTML contenu littéral html du noeud
Navigation dans l'arbre DOM

parentNode

<html>
<html></html>
</html>
firstChild lastChild

<head>
<head> </head>
</head> <body>
<body></body>
</body>
nextSibling

childNodes

<p>
<p> </p>
</p> <h1>
<h1></h1>
</h1> <form>
<form> </form>
</form>
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é Très
performant

Ο var result = document.querySelectorAll("ul.joli > li") ;


Ο Renverra 0 ou n résultats
Mode d'accès : comparaison

<html> <html>
<head> <head>
<title>Bienvenue</title> <title>Bienvenue</title>
<script type="text/javascript"> <script type="text/javascript">
function changeColor() { function changeColor() {
var htmlTag = document.childNodes[0]; var pTag = document.getElementById('foo');
var bodyTag = htmlTag.lastChild; pTag.style.color="#0000FF";
var pTag = bodyTag.firstChild; }
pTag.style.color="#0000FF"; </script>
} </head>
</script> <body onload=''changeColor();''>
</head> <p id="foo">Lorem Ipsum</p>
<body onload=''changeColor();''> </body>
<p>Lorem Ipsum</p> </html>
</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''/> var imgTag = document.getElementById('foo'); //navigation


imgTag.src = ''tux2.gif''; //action !
<input type='''text'' value='''' size=''5'' id=''bar''/>
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> Auto-référence
</p> avec this
</body> (évite la
navigation)
</html>
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>
La technologie Ajax

● 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
Requête HTTP

Réponse HTTP

Requêtes HTTP
Serveur
ServeurWeb
Web

Réponses HTTP +
intégration au DOM courant
Requête/réponse HTTP

● Fonctionnement asynchrone (ou pas)


/* VERSION SYNCHRONE */ /* VERSION ASYNCHRONE */
var xmlhttp = new XMLHttpRequest(); var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://ailleurs.com", false); xmlhttp.onreadystatechange = function() {
xmlhttp.send(); if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//bloqué ici en attente de la réponse... window.alert(xmlhttp.responseText);
window.alert(xmlhttp.responseText); }
};
xmlhttp.open("GET", "http://ailleurs.com", true);
xmlhttp.send();

● Choix du format de la réponse


Ο Textuel (responseText) : chaînes ou alors innerHtml
Ο XML (responseXml) : accès au DOM !
JavaScript coté
Serveur Web
[avec Node.js]
JS, une technologie serveur

Client Web : Chrome


1 Requête http

Serveur
ServeurWeb
Web
www.twitter.com
www.twitter.com

3 Réponse http

Execution sur le client Execution sur le serveur


(HTML, CSS, JavaScript, ...) (JavaScript, PHP, JSP, ...)
4 2
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. 1 Go to the store.


2 Go to the store while the 2 Buy cream and sugar.
coffee is brewing.
3 Return home.
3 Buy cream and sugar.
4 Start brewing a pot of coffee.
4 Return home.
5 Impatiently watch the pot of
5 Drink coffee immediately. coffee as it brews.
6 Enjoy life. 6 Experience caffeine
withdrawal.
7 Crash.
Hello world index.js

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
ServeurWeb
Web
127.0.0.1
127.0.0.1

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