Xavier Tannier [email protected] JavaScript.
-
Upload
come-dumoulin -
Category
Documents
-
view
106 -
download
1
Transcript of Xavier Tannier [email protected] JavaScript.
![Page 2: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/2.jpg)
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
![Page 3: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/3.jpg)
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
![Page 4: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/4.jpg)
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
![Page 5: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/5.jpg)
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
![Page 6: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/6.jpg)
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
![Page 7: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/7.jpg)
Programmation Web
JavaScriptXavier Tannier
Ce que permet Javascript
• Réagir à des événements
<button type="button" onclick="alert('Bienvenue !')">Cliquez ici
</button>HTML
![Page 8: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/8.jpg)
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
![Page 9: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/9.jpg)
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
![Page 10: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/10.jpg)
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
![Page 11: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/11.jpg)
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
![Page 12: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/12.jpg)
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
![Page 13: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/13.jpg)
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
![Page 14: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/14.jpg)
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
![Page 15: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/15.jpg)
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
![Page 16: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/16.jpg)
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
![Page 17: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/17.jpg)
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
![Page 18: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/18.jpg)
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
![Page 19: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/19.jpg)
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'; }
![Page 20: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/20.jpg)
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
![Page 21: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/21.jpg)
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
![Page 22: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/22.jpg)
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
![Page 23: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/23.jpg)
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
![Page 24: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/24.jpg)
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
![Page 25: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/25.jpg)
Programmation Web
JavaScriptXavier Tannier
XHTML Document Object Model (DOM)
25
![Page 26: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/26.jpg)
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
![Page 27: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/27.jpg)
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
![Page 28: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/28.jpg)
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
![Page 29: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/29.jpg)
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
![Page 30: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/30.jpg)
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;
![Page 31: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/31.jpg)
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
![Page 32: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/32.jpg)
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();
![Page 33: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/33.jpg)
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
![Page 34: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/34.jpg)
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é !";}
![Page 35: Xavier Tannier xavier.tannier@limsi.fr JavaScript.](https://reader035.fdocuments.fr/reader035/viewer/2022062622/551d9db8497959293b8dc0cd/html5/thumbnails/35.jpg)
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 + " !";}