Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
JavaScript
2
Qu’est-ce que JavaScript ?
Le client URL Le serveur (navigateur) (HTTP) URL Translation URL => fichier statique Pages HTML statiques La page courante est détruite quand l’utilisateur navigue vers une nouvelle page
3
Qu’est-ce que JavaScript ?
Le client URL + paramètres Le serveur (navigateur) (HTTP) Translation URL => Programme Envoi du résultat du programme URL + paramètres Pages HTML dynamiques (PHP, CGI,…) La page courante est détruite quand l’utilisateur navigue vers une nouvelle page 3
4
Qu’est-ce que JavaScript ?
Le client URL + paramètres Le serveur (navigateur) (HTTP) Pages HTML contenant du JavaScript La page est modifiée sans rechargement ni nouvelles requêtes au serveur 4
5
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.
6
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" />
7
Ce que permet Javascript
Réagir à des événements <button type="button" onclick="alert('Bienvenue !')"> Cliquez ici </button> HTML
8
Ce que permet Javascript
Changer le contenu HTML JavaScript // Trouver l'élément par son identifiant x = document.getElementById("demo") // Modifier le contenu x.innerHTML = "Ceci est le nouveau contenu !";
9
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
10
Ce que permet Javascript
Changer le style HTML Valider une entrée Écrire dans la sortie JavaScript x=document.getElementById("demo") // Trouver l'élément x.style.color="#ff0000"; // Changer son style if (isNaN(x)) {alert("Non numérique...")}; JavaScript 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
11
Syntaxe Comme en C et en Java : Comme 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ères x = 5 + 5; // x = "5" + "5"; // "55" x = 5 + "5"; // "55" x = "5" + 5; // "55"
12
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"; // false Expressions régulières var str = "Polytech Paris-Sud"; var re = /polytech/i; alert(str.match(re));
13
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];
14
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; }
15
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());
16
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
17
Objets Définir vos propres objets : objets anonymes Définir une classe
var obj = new Object; obj.x = 1; obj.y = 2; Définir une classe function MaClasse(arg){ this.x = 1; this.y = arg; } var obj = new MaClasse(2);
18
Interactions avec l’utilisateur
Événements : attributs onXXX en HTML4 <input type="text" size="30" id=" " onchange="check ()"> <a href=" 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é
19
Interactions avec l’utilisateur
É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'; }
20
Les événements Événements souris onclick Clic sur l’élément ondblclick
Double-clic sur l’élément onmousedown Appui de la souris sur l’élément onmousemove Déplacement de la souris au-dessus de l’élément onmouseover Arrivée de la souris sur l’élément onmouseout Sortie de la souris de l’élément onmouseup Relâchement de la souris sur l’élément
21
Les événements Événements clavier Événements objets / fenêtre
onkeydown Appui sur une touche onkeypressed Appui puis relâchement de la touche onkeyup Relâchement de la touche onabort Chargement d’une image interrompu onerror Chargement d’une image qui échoue onload Chargement d’un élément, du document onresize Redimensionnement du document onscroll Scroll sur le document onunload Fermeture de la page
22
Les événements Événements formulaires onblur
Un élément de formulaire perd le focus onchange Le contenu d’un élément change onfocus Un élément de formulaire prend le focus onreset Le formulaire est réinitialisé onselect Sélection de texte dans un formulaire onsubmit Soumission du formulaire
23
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)
24
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
25
XHTML Document Object Model (DOM)
26
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œud document.getElementById("menu"); Par type de balise : retourne une liste de nœuds document.getElementsByTagName("p"); Pas de getElementsByClass dans le standard
27
XHTML DOM Alternative à innerHTML : x.style.attributCSS
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
28
XHTML DOM x.attributXHTML Fonctions spéciales pour certaines balises
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();
29
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);
30
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;
31
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être window.moveTo() Déplace le fenêtre window.resizeTo() Redimensionne la fenêtre
32
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(" history.back(); history.forward();
33
L'objet window window.navigator : Informations sur le navigateur
<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>
34
L'objet window Les pop-ups window.alert("Bonjour");
var r = confirm("Choisissez"); if (r == true) { x = "OK !"; } else { x = "Annulé !"; }
35
L'objet window Les pop-ups
var name = prompt("Quel est votre nom ?", "Homer Simpson"); if (name != null && name != ""){ x = "Bonjour" + name + " !"; }
Présentations similaires
