Xavier Tannier [email protected] Yann Jacob [email protected] JavaScript

Xavier Tannier

[email protected]

Yann Jacob

[email protected]

JavaScript

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



3


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



4


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


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


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


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


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


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


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


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


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


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


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


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


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


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


XHTML Document Object Model (DOM)

19


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


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


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


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


AJAX

24


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


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


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


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


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


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


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


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

}

});


Prototype : encore plus court

32

new Ajax.Updater('suggest',

'suggest.php', {

method: 'get',

parameters: {

txt: $F('txt1')

}

}

);


Mettre à jour une liste

33

new Ajax.Updater('suggest',

'suggest.php', {

method: 'get',

insertion: Insertion.Top,

parameters: {

txt: $F('txt1')

}

}

);


Mettre à jour régulièrement

34

new Ajax.PeriodicalUpdater('chat',

'getchatmessages.php', {

method: 'get',

frequency: 1,

decay: 2

}

);


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


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


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


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


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

Documents

Xavier Tannier [email protected] Yann Jacob [email protected] JavaScript