Programmation Web / Bases de Données► Introduction
Qu’est-ce que JavaScript ?
2
Le client Le serveur(navigateur) (HTTP)
URL
Pages HTML statiques
La page courante est détruite quand l’utilisateur navigue vers une nouvelle page
TranslationURL=>
fichierstatique
URL
Programmation Web / Bases de Données► Introduction
Qu’est-ce que JavaScript ?
3
Le client Le serveur(navigateur) (HTTP)
URL + paramètres
Pages HTML dynamiques (PHP, CGI,…)
La page courante est détruite quand l’utilisateur navigue vers une nouvelle page
TranslationURL=>
Programme=>
Envoi durésultat duprogramme
URL + paramètres
Programmation Web / Bases de Données► Introduction
Qu’est-ce que JavaScript ?
4
Le client Le serveur(navigateur) (HTTP)
URL + paramètres
Pages HTML contenant du JavaScript
La page est modifiée sans rechargement ni nouvelles requêtes au serveur
Programmation Web / Bases de Données► Javascript, AJAX
JavaScript
• Permet de modifier dynamiquement la page web.• Créé par Netscape en 1996.
• PHP, ASP, CGI, etc. : scripts coté serveur. Nécessite un rechargement de la page.– Envoie d’un formulaire, clic sur un lien– <meta http-equiv="refresh" content="5" />
• JavaScript : script coté client. Ne recontacte pas le serveur web.– Réagit aux événements souris, clavier, formulaires– Peut modifier une sous partie de la page
• Note : aucun lien avec Java. Nom officiel ECMAScript.
5
Programmation Web / Bases de Données► Javascript, AJAX
Ajouter du JavaScript à une page
• Dans le fichier XHTML– <script type="text/javascript"> document.write("<h1>Hello World!</h1>");</script>
• A l’extérieur– <head> <script src="script.js" type="text/javascript"></script></head>
– Note : ceci ne fonctionne pas avec IE :<script src="script.js" type="text/javascript" />
6
Programmation Web / Bases de Données► Javascript, AJAX
Syntaxe
• Comme en C et en Java :– Des points-virgules– Des accolades– Les opérateurs + - * / % ++ -- = += -= *= /= %= == != < > <= >= && || ! ?:
• Comme en Java :– Les structures de contrôle (voir plus loin)– Opérateur + pour la concaténation des chaînes de caractèresx = 5 + 5; // 10 x = "5" + "5"; // "55"x = 5 + "5"; // "55" x = "5" + 5; // "55"
7
Programmation Web / Bases de Données► Javascript, AJAX
Syntaxe
• Variables : var x = 10;– Pas de type de variable à la déclaration– Variables locales au bloc courant– Les variables non déclarées sont créées à la 1ère affectation– 5 types de variables en interne (booléen, nombre, string, fonction, objet)
x = "string \"xyz\" !\nXYZ";– Opérateur typeof– Opérateur === pour tester la valeur et le type
• 10 == "10"; // true 10 === "10"; // false– Expressions régulières
• var str = "Polytech Paris-Sud";var re = /polytech/i; alert(str.match(re));
8
Programmation Web / Bases de Données► Javascript, AJAX
Syntaxe
• Les tableaux sont des objets :
– var tab = new Array();tab[0] = 123;tab[1] = 456;tab["key"] = "value";
– var tab = new Array(123, 456, 789);
– var tab = [123, 456, 789];
9
Programmation Web / Bases de Données► Javascript, AJAX
Syntaxe
• Structures de contrôle :
– if(x){ … } else if(y){ … } else{ … }– switch(x){ case 1: …; break; default : … }
– for(x = A; x < B; x++){ … } et break; continue;– while(x){ … } et do{ … } while(x);
– for(x in obj){ … } x = les index, clefs, propriétés de obj
– try{ … } catch(err) { alert(err.description); }– throw var; N’importe quelle type de variable peut être une exception
– function name(arg1, arg2){ …; return x; }
10
Programmation Web / Bases de Données► Javascript, AJAX
Objets prédéfinis (1/2)
• Un objet JavaScript est un ensemble de propriétés. Les propriétés de type fonction agissent comme des méthodes.
• Singletons document, window, navigator, Math,…– document.write("Hello World!");– window.status = "Hello World!";– alert(navigator.appName);– alert(Math.sqrt(Math.PI));
• Exceptions (lancées par JavaScript), strings,…– catch(err) { alert(err.description); }– var txt = "Hello World!"; – alert(txt.length); – alert(str.toUpperCase());
11
Programmation Web / Bases de Données► Javascript, AJAX
Objets prédéfinis (2/2)
• Types standard– var date = new Date(2010, 2, 14);var today = new Date(); // Par défaut aujourd’hui
– var tab1 = [1, 2, 3]; var tab2 = [10, 20, 30];tab3 = tab1.concat(tab2); // [1, 2, 3, 10, 20, 30]// Et aussi push, pop, slice, join, sort,…
• Surcharge d’opérateurs (uniquement pour les types standard)– if (today > date) { alert("En retard pour la St Valentin"); }
– date.setDate(date.getDate() + 45); // 28/04/2010
12
Programmation Web / Bases de Données► Javascript, AJAX
Objets
• Définir vos propres objets : objets anonymesVar obj = new Object;obj.x = 1;obj.y = 2;
• Définir une classefunction MaClasse(arg){ this.x = 1; this.y = arg;}var obj = new MaClasse(2);
13
Programmation Web / Bases de Données► Javascript, AJAX
Objets
• Prototype : tous les objets ont un prototype– Quand on accède à obj.x, JavaScript vérifie si obj contient une propriété x,
sinon si obj.prototype contient x, ou obj.prototype.prototype, etc.– A.prototype.MaMethode = function(arg){ this.varA += arg; };A.prototype.defVar = -2; function A() { this.varA = 2; }B.prototype = new A; function B() { this.varB = 4; }x = new B();
alert(x.defVar +','+ x.varA +','+ x.varB); // "-2,2,4" x.MaMethode(5); alert(x.varA); // "7"
14
Programmation Web / Bases de Données► Javascript, AJAX
Objets
• Variables privée : avec des closures http://en.wikipedia.org/wiki/Closure_(computer_science)
function Classe(){ var x = 42; this.GetX = function() { return x; } this.SetX = function(newX) { x = newW; }}
• Plus d’infos (super constructeur, polymorphisme,…) : http://mckoss.com/jscript/object.htm
15
Programmation Web / Bases de Données► Javascript, AJAX
Interactions avec l’utilisateur
• Événements : attributs onXXX en HTML4– <input type="text" size="30" id="email"
onchange="checkEmail()">– <a href="http://www.limsi.fr" onmouseover=
"window.status='Site du LIMSI';">LIMSI</a>
– <form method="post" action="script.php"
onsubmit="return checkForm()"> Si checkForm() retourne false, script.php n’est pas appellé
• Événements : propriétés onXXX du DOM– element.onclick = maFonction; (Pas de parenthèses)– maFonction a accès à this :
• element.onclick = maFonction; another_element.onclick = maFonction;function maFonction() { this.style.backgroundColor = '#FF0000'; }
– On verra comment avoir element plus tard (getElementsByXXX)
• Plus d’info : http://www.quirksmode.org/js/introevents.html16
Programmation Web / Bases de Données► Javascript, AJAX
Cookies
• Les cookies sont aussi disponibles en JavaScript– document.cookie : tous les cookies d’un coup concaténés en une seule string– function getCookie(name){
if(document.cookie.length > 0){ var start = document.cookie.indexOf(name + "="); if (start != -1){ start += name.length + 1; end = document.cookie.indexOf(";", start); if(end==-1) end = document.cookie.length; return unescape(document.cookie. substring(start, end)); } } return "";}
• Utilisez une librairie (on verra plus tard aussi)17
Programmation Web / Bases de Données► Javascript, AJAX
XHTML Document Object Model (DOM)
• Les documents XHTML sont des arbres XML, et DOM un moyen de parcourir et modifier ces arbres
• Des objets JavaScript représentent les nœuds– x.innerHTML le texte contenu dans x – x.nodeName le type de balise de x (p, div,…)– x.parentNode référence au noeud parent de x – x.childNodes liste des nœuds enfants de x – x.attributes liste des attributs (class,…) de x– x.style.attributCSS change le style de l’élément
18
Programmation Web / Bases de Données► Javascript, AJAX
XHTML Document Object Model (DOM)
19
Programmation Web / Bases de Données► Javascript, AJAX
XHTML DOM
• Accès aux nœuds– document.body : le nœud body
+ navigation avec parentNode,childNodes, next/previousSibling, etc.(document.documentElement donne la racine <html>)
– Par id : retourne un objet de type nœuddocument.getElementById("menu");
– Par type de balise : retourne une liste de nœudsdocument.getElementsByTagName("p");
– Pas de getElementsByClass dans le standard
20
Programmation Web / Bases de Données► Javascript, AJAX
XHTML DOM
• Alternative à innerHTML :– x.innerText : Internet Explorer seulement !– x.childNodes[0].nodeValue : le texte contenu dans un nœud est
lui-même un nœud spécial de type nodeType = 3 (Text)
• x.style.attributCSS– attributCSS a presque le même nom qu’en CSS– On enlève les "-" et on met une majuscule sur le mot suivant– background-color → style.backgroundColor– font-family → style.fontFamily– (Plus d’info http://www.howtocreate.co.uk/tutorials/javascript/domcss)
21
Programmation Web / Bases de Données► Javascript, AJAX
XHTML DOM
• x.attributXHTML– document.getElementById("UneForm").action = "script.php";– document.getElementById("UneCheckbox").checked = true;– document.getElementById("UneImg").src = "over.png";
• Fonctions spéciales pour certaines balises– document.getElementById("UneTable").deleteRow(2);– document.getElementById("UneForm").submit();
22
Programmation Web / Bases de Données► Javascript, AJAX
XHTML DOM
• parent.removeChild(node);
• var node = document.createElement("p");node.class = "test";node.innerHTML = "Nœud créé " + "dynamiquement";parent.appendChild(node);
• var newnode = node.clone();parent. appendChild(newnode);
23
Programmation Web / Bases de Données► Introduction
AJAX
24
Le client Le serveur(navigateur) (HTTP)
URL + paramètres
Pages HTML avec AJAXLa page est modifiée sans rechargement. Le Javascript peut contacter
le serveur web (en arrière plan) pour obtenir de nouvelles informationset modifier la page en conséquence.
URL + paramètres
Programmation Web / Bases de Données► Javascript, AJAX
AJAX
• Asynchronous JavaScript and XML• JavaScript peut envoyer des requêtes au serveur web, en arrière
plan, sans recharger la page web principale• AJAX n’est pas un langage de programmation, c’est une technique• Suggestions dans Google, édition inline dans Flicker,
mises à jour automatique dans Twitter…• Nouvel objet : XMLHttpRequest
25
Programmation Web / Bases de Données► Javascript, AJAX
XMLHttpRequest
• if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest();}else{ // IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
• Exemple synchrone (c’est-à-dire bloquant, à éviter)xmlhttp.open("GET", "/citation.php?id=12", false);xmlhttp.send(null);document.getElementById("cit").innerHTML = xmlhttp.responseText;
26
Programmation Web / Bases de Données► Javascript, AJAX
XMLHttpRequest
• Asynchrone : on utilise des callbacksxmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ elem.innerHTML = xmlhttp.responseText; }}xmlhttp.open("GET", url, true);xmlhttp.send(null);
27
Programmation Web / Bases de Données► Javascript, AJAX
<form>
Saisir un mot : <input type="text" id="txt1" />
</form>
<p>Suggestions: <span id="suggest"></span></p>
Exemple : auto-complétion / suggestion
28
function showHint(){ if(this.value.length == 0){ document.getElementById("suggest").innerHTML=""; return; } xmlhttp = new XMLHttpRequest(); var url = "suggest.php?txt=" + this.value; xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4){ document.getElementById("suggest").innerHTML =
xmlhttp.responseText; } }; xmlhttp.open("GET", url, true); xmlhttp.send(null);}document.getElementById("txt1").onkeyup = showHint;
Programmation Web / Bases de Données► Javascript, AJAX
Framework/Library
• Couche supplémentaire par-dessus les API XMLHttpRequest et Document Object Model– Fonctionnalités cross-browser– Fonctions utilitaires– Vérification d’erreur
• Prototype : http://www.prototypejs.org/• jQuery : http://www.jquery.com/
29
Programmation Web / Bases de Données► Javascript, AJAX
Prototype
• <script type="text/javascript" src="/path/to/prototype.js"></script>
• Sélecteur d’éléments DOM par id : $– $("id").scrollTo();– $("sect1", "sect2", "footer).hide();
• Sélection d’éléments universel : $$– $$("expression CSS").remove(); – $$(".classe").removeClassName("class");– $$("ul ol, ul ul").show();
• Plein de nouvelles fonctions à appliquer aux éléments
30
Programmation Web / Bases de Données► Javascript, AJAX
Auto-complétion / suggestion avec prototype
31
new Ajax.Request('suggest.php', {
method: 'get',
parameters: {
txt: $F('txt1'),
param2: 12
},
onSuccess: function(transport){
var r = transport.responseText;
$('suggest').update(r);
},
onFailure: function(){
$('suggest').update("Erreur AJAX");
}
});
Programmation Web / Bases de Données► Javascript, AJAX
Prototype : encore plus court
32
new Ajax.Updater('suggest',
'suggest.php', {
method: 'get',
parameters: {
txt: $F('txt1')
}
}
);
Programmation Web / Bases de Données► Javascript, AJAX
Mettre à jour une liste
33
new Ajax.Updater('suggest',
'suggest.php', {
method: 'get',
insertion: Insertion.Top,
parameters: {
txt: $F('txt1')
}
}
);
Programmation Web / Bases de Données► Javascript, AJAX
Mettre à jour régulièrement
34
new Ajax.PeriodicalUpdater('chat',
'getchatmessages.php', {
method: 'get',
frequency: 1,
decay: 2
}
);
Programmation Web / Bases de Données► Javascript, AJAX
Gestion des événements
• Plusieurs callback pour le même événement$(‘id').observe('click', respondToClick); function respondToClick(event) { var element = event.element(); element.addClassName('active'); event.stop(); // équivalant de return false}
• Quand le navigateur télécharge la page web, le JavaScript est exécuté au fut et à mesure. Le script ne peut donc pas « voir » les éléments DOM qui ne sont pas encore téléchargés.(Plus d’info : http://javascript.about.com/od/hintsandtips/a/exeorder.htm)
document.observe("dom:loaded", function() { ...});
35
Programmation Web / Bases de Données► Javascript, AJAX
jQuery
• jQuery est similaire à Prototype.– Fonction $ équivalente à $$ de Prototype
($("#id") est équivalente à $ de Prototype)– Équivalent de Ajax.Updater :– $("#suggest").load("suggest.php",{ txt: $("txt1").val()});
36
Programmation Web / Bases de Données► Javascript, AJAX
Plus de librairies
• Cookie : http://code.google.com/p/cookies/• Effets visuels : http://script.aculo.us/• Valider des formulaires avant leurs soumissions :
http://livevalidation.com• Modifier des <table> :
http://www.kryogenix.org/code/browser/sorttable/ et http://www.danvk.org/wp/dragtable/
• Programmer du JavaScript en Java : http://code.google.com/intl/fr/webtoolkit/
37
Programmation Web / Bases de Données► Introduction
noscript
<noscript>
<p class="warning">Vous avez besoin de Javascript</p>
</noscript>
Mieux :<noscript>
Pas de Javascript. Aller à la
<a href="noscript.php">Version web 1.0</a>
</noscipt>
Encore mieux : supporter JavaScript et pas de JavaScript dans la même page grâce à une utilisation judicieuse de event.stop()
38
Programmation Web / Bases de Données► Javascript, AJAX
Références
• Spécification de Document Object Modelhttp://www.w3.org/DOM/DOMTR/
• Spécification de JavaScripthttp://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
• Spécification de XMLHttpRequesthttp://www.w3.org/TR/XMLHttpRequest/
39