Xavier [email protected]
JavaScript
Programmation WebXavier Tannier
JavaScript2
Qu’est-ce que JavaScript ?
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 WebXavier Tannier
JavaScript
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 WebXavier Tannier
JavaScript
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
JavaScriptXavier Tannier
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
JavaScriptXavier Tannier
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
JavaScriptXavier Tannier
Ce que permet Javascript
• Réagir à des événements
<button type="button" onclick="alert('Bienvenue !')">Cliquez ici
</button>HTML
Programmation Web
JavaScriptXavier Tannier
Ce que permet Javascript
• Changer le contenu HTML
// Trouver l'élément par son identifiantx = document.getElementById("demo") // Modifier le contenux.innerHTML = "Ceci est le nouveau contenu !";
JavaScript
Programmation Web
JavaScriptXavier Tannier
Ce que permet Javascript
• Changer le contenu HTML
<script> function changeImage(){ element=document.getElementById('monimage'); if (element.src.match("allumee")){ element.src="ampoule_allumee.gif"; } else { element.src="ampoule_eteinte.gif"; } }</script>
<img id="monimage" onclick="changeImage()" src="ampoule_eteinte.gif>
HTML
Programmation Web
JavaScriptXavier Tannier
Ce que permet Javascript
• Changer le style HTML
• Valider une entrée
• Écrire dans la sortie
x=document.getElementById("demo") // Trouver l'élémentx.style.color="#ff0000"; // Changer son style
if (isNaN(x)) {alert("Non numérique...")};
if (!verifieEntree(x)) {alert("Entrée non conforme")};
<h1>Ma page Web</h1>
<script>document.write("<p>Mon JavaScript</p>");</script>
(attention, uniquement pendant le chargement de la page...)HTML
JavaScript
JavaScript
Programmation Web
JavaScriptXavier Tannier
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"
11
Programmation Web
JavaScriptXavier Tannier
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));
12
Programmation Web
JavaScriptXavier Tannier
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];
13
Programmation Web
JavaScriptXavier Tannier
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 quel type de variable peut être une exception
– function name(arg1, arg2){ …; return x; }
14
Programmation Web
JavaScriptXavier Tannier
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());
15
Programmation Web
JavaScriptXavier Tannier
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
16
Programmation Web
JavaScriptXavier Tannier
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);
17
Programmation Web
JavaScriptXavier Tannier
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é
18
Programmation Web
JavaScriptXavier Tannier
Interactions avec l’utilisateur
• Événements : propriétés onXXX du DOM– element.onclick = maFonction; // Pas de parenthèses– maFonction a accès à this :
19
element.onclick = maFonction; another_element.onclick = maFonction;function maFonction() { this.style.backgroundColor = '#FF0000'; }
Programmation Web
JavaScriptXavier Tannier
Les événements
onclick Clic sur l’élément
ondblclick Double-clic sur l’élémentonmousedown Appui de la souris sur l’élément
onmousemove Déplacement de la souris au-dessus de l’élémentonmouseover Arrivée de la souris sur l’élémentonmouseout Sortie de la souris de l’élémentonmouseup Relâchement de la souris sur l’élément
• Événements souris
Programmation Web
JavaScriptXavier Tannier
Les événements
onkeydown Appui sur une touche
onkeypressed Appui puis relâchement de la toucheonkeyup Relâchement de la touche
• Événements clavier
• Événements objets / fenêtre
onabort Chargement d’une image interrompuonerror Chargement d’une image qui échoue
onload Chargement d’un élément, du documentonresize Redimensionnement du documentonscroll Scroll sur le documentonunload Fermeture de la page
Programmation Web
JavaScriptXavier Tannier
Les événements
onblur Un élément de formulaire perd le focus
onchange Le contenu d’un élément changeonfocus Un élément de formulaire prend le focus
onreset Le formulaire est réinitialiséonselect Sélection de texte dans un formulaireonsubmit Soumission du formulaire
• Événements formulaires
Programmation Web
JavaScriptXavier Tannier
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 (jQuery par exemple)
23
Programmation Web
JavaScriptXavier Tannier
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
24
Programmation Web
JavaScriptXavier Tannier
XHTML Document Object Model (DOM)
25
Programmation Web
JavaScriptXavier Tannier
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
26
Programmation Web
JavaScriptXavier Tannier
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)
27
Programmation Web
JavaScriptXavier Tannier
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();
28
Programmation Web
JavaScriptXavier Tannier
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);
29
Programmation Web
JavaScriptXavier Tannier
L'objet window
• Représente la fenêtre du navigateur• Taille :
– window.innerHeight, window.innerWidth (IE8+, Chrome, Firefox, Opera, Safari)
– document.body.clientHeight, document.body.clientWidth(IE7-)
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
Programmation Web
JavaScriptXavier Tannier
L'objet window
• Méthodes
• window.screen– Représente l'écran de l'utilisateur– screen.availWidth, screen.availHeight
window.open() Ouvre une nouvelle fenêtre
window.close() Ferme la fenêtrewindow.moveTo() Déplace le fenêtre
window.resizeTo() Redimensionne la fenêtre
Programmation Web
JavaScriptXavier Tannier
L'objet window
• window.location (URL)
• window.history :Pour se déplacer dans l'historique des pages visitées
document.write(location.href);
window.location.assign("http://www.polytech.u-psud.fr");
history.back();
history.forward();
L'objet window
<div id="example"></div><script>txt ="<p>Browser CodeName: " + navigator.appCodeName + "</p>";txt+="<p>Browser Name: " + navigator.appName + "</p>";txt+="<p>Browser Version: " + navigator.appVersion + "</p>";txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";txt+="<p>Platform: " + navigator.platform + "</p>";txt+="<p>User-agent header: " + navigator.userAgent + "</p>";txt+="<p>User-agent language: "+navigator.systemLanguage+"</p>";document.getElementById("example").innerHTML=txt;</script>
• window.navigator :– Informations sur le navigateur
Programmation Web
JavaScriptXavier Tannier
L'objet window
• Les pop-ups
34
window.alert("Bonjour");
var r = confirm("Choisissez");if (r == true) { x = "OK !";} else { x = "Annulé !";}
Programmation Web
JavaScriptXavier Tannier
L'objet window
• Les pop-ups
35
var name = prompt("Quel est votre nom ?","Homer Simpson");
if (name != null && name != ""){ x = "Bonjour" + name + " !";}