L'icône suivant [], qui accompagne le code JavaScript de cette présentation, indique que ce dernier est exécutable depuis votre barre d'adresse (en tapant : "javascript:" + code JavaScript) ou depuis un interpréteur plus évolué comme par exemple Firebug.
Essayez avec cet exemple :
alert("Prêt pour du JavaScript ?");
N'hésitez pas à en abuser !
Sommaire
JavaScript : état des lieux
Versions
Usages
Orienté objet
Typage dynamique
Evaluation à l'éxecution
Les Fonctions (internes, anonymes, closures)
Tableaux
Orienté objet à Prototype
DOM
Evénements
Ajax
JSON
E4X
Librairies
JavaScript dans le navigateur
Meilleures pratiques
Securité
Outils (développement, débogage)
Références
Questions et réponses
ROTI
JavaScript : état des lieux
Language de script, introduit en 95 par Netscape
Standardisé par l'ECMA en 98, sous le nom ECMA-262 ou ECMAScript
JavaScript : ECMAScript + Web
De la même manière : ActionScript : ECMAScript + Flash
Variantes JavaScript : "Netscape/Firefox" vs IE (JScript) notamment quant aux DOM/événements (confère browser wars [EN])
var a = new Array();
a[0] = "dog";
a[a.length] = "cat";
a.push("hen");
alert(a.length);
var a = ["dog", "cat", "hen"];
alert(a.length);
var a = ["dog", "cat", "hen"];
a[100] = "fox";
alert("a.length:" + a.length + " and a[50]:" + a[50]);
var a = ["dog", "cat", "hen"];
for(var index in a)
alert(a[index]);
Orienté objet à Prototype
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ' ' + this.last;
};
}
var peter = new Person("Peter-Paul", "Koch");
alert(peter.fullName());
Nouvelle instance de la fonction fullName pour chaque objet
Orienté objet à Prototype
function personFullName() {
return this.first + ' ' + this.last;
}
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = personFullName;
}
var peter = new Person("Peter-Paul", "Koch");
alert(peter.fullName());
Mieux mais pas encore ça
Orienté objet à Prototype
function Person(first, last) {
this.first = first;
this.last = last;
};
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
};
var peter = new Person("Peter-Paul", "Koch");
alert(peter.fullName());
Et voilà
alert(peter.fullNameReversed());
Error: fullNameReversed is not a function
Person.prototype.fullNameReversed = function() {
return this.last + ', ' + this.first;
};
alert(peter.fullNameReversed());
Orienté objet à Prototype
Surcharge sur un objet :
var peter = new Person("Peter-Paul", "Koch");
var john = new Person("John", "Resig");
peter.writeBook = function() {
return this.first + " wrote a book";
};
alert(peter.writeBook());
alert(john.writeBook());
Error: writeBook is not a function
Orienté objet à Prototype
var name = "Dean Edwards";
alert(name.reverse());
Error: reverse is not a function
String.prototype.reverse = function() {
var r = "";
for (var i = this.length - 1; i >= 0; i--) {
r += this[i];
}
return r;
};
alert(name.reverse());
alert("hello".reverse());
De nombreuses librairies surchargent les types de base de la sorte !
DOM ou Document Object Model
Façon standard d'accéder et de manipuler le HTML
Structure en arbre avec des élements, attributs et textes
DOM ou Document Object Model
Historique
"Legacy DOM" : IE 3, Netscape 2
"DOM intermédiaire" : IE 4, Netscape 4
Standardisation par le W3C :
DOM Level 1 (1998) : en partie dans IE 5, Netscape 6
DOM Level 2 (2000) : getElementById(), espace de nom XML
DOM Level 3 (2004) : XPath, événement, sérialisation XML
Etat des lieux
Depuis 2005, le DOM est assez bien supporté dans les navigateurs : IE 6 et +, Firefox, Safari, Opera, etc
Evénements
4 façons de faire : "inline", traditionnel, W3C et Microsoft
Seulement du "bubbling" Support du "this" limité Un seul événement "global" :
window.event
Pour arrêter l'événement :
window.event.cancelBubble = true;
Evénements
Arrêter l'événement W3C et Microsoft
function doSomething(e) {
if (!e) var e = window.event; // Récupération de l'événement pour IE
e.cancelBubble = true; // Arrêt de l'évement IE
if (e.stopPropagation) e.stopPropagation(); // Arrêt de l'évements W3C
}
function callbackFunction(responseText) { alert(responseText); };
var request = new XMLHttpRequest();
request.open("GET", "http://www.google.com", true);
request.onreadystatechange = function() {
var done = 4, ok = 200;
if (request.readyState == done && request.status == ok) {
if (request.responseText) {
callbackFunction(request.responseText);
}
}
};
request.send(null);
Ici, on peut parler d'Ajah
Ajax ou Asynchronous JS and XML
Pour supprimer temporairement la "Same Origin Policy" et ainsi faire marcher le code précédent :
try {
if (netscape.security.PrivilegeManager.enablePrivilege)
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
} catch (e) {
alert("Sorry, browser security settings won't let this program run.");
}
Tout JavaScript qui touche aux styles CSS, positions, visibilités doit être chargé sur l'événement "onload" !
Une bonne pratique est de câbler toutes les actions JavaScript sur l'onload.
JavaScript dans le navigateur
Les variables, objets, fonctions JavaScript "vivent" tout le temps que la page est affichée.
Lorsqu'on quitte la page, tout le contexte JavaScript est perdu (variables, fonctions, objets) !
C'est pourquoi on charge sur chaque page les mêmes scripts...
Un appel Ajax ne pose aucun problème (car on ne quitte pas la page).
Librairies
Librairies pour masquer les différences entre navigateurs (DOM, événements, Ajax,...) donc pour simplifier le code mais aussi pour animer, pour étendre...
Insère un script malveillant, infectant tous les visiteurs :
Cross-site request forgery ou CSRF
Insère un script malveillant mais destiné uniquement à certains utilisateurs du site (admin) pour effectuer une action à leur insu que eux seuls sont habilités à faire :