La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Xavier Tannier JavaScript.

Présentations similaires


Présentation au sujet: "Xavier Tannier JavaScript."— Transcription de la présentation:

1 Xavier Tannier JavaScript

2 Programmation Web Xavier Tannier JavaScript 2 Quest-ce que JavaScript ? Le clientLe serveur (navigateur)(HTTP) URL Pages HTML statiques La page courante est détruite quand lutilisateur navigue vers une nouvelle page Translation URL => fichier statique URL

3 Programmation Web Xavier Tannier JavaScript Quest-ce que JavaScript ? 3 Le clientLe serveur (navigateur)(HTTP) URL + paramètres Pages HTML dynamiques (PHP, CGI,…) La page courante est détruite quand lutilisateur navigue vers une nouvelle page Translation URL => Programme => Envoi du résultat du programme URL + paramètres

4 Programmation Web Xavier Tannier JavaScript Quest-ce que JavaScript ? 4 Le clientLe serveur (navigateur)(HTTP) URL + paramètres Pages HTML contenant du JavaScript La page est modifiée sans rechargement ni nouvelles requêtes au serveur

5 Programmation Web JavaScript Xavier Tannier JavaScript Permet de modifier dynamiquement la page web. Créé par Netscape en PHP, ASP, CGI, etc. : scripts coté serveur. Nécessite un rechargement de la page. – Envoie dun formulaire, clic sur un lien – 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

6 Programmation Web JavaScript Xavier Tannier Ajouter du JavaScript à une page Dans le fichier XHTML – document.write(" Hello World! "); A lextérieur – – Note : ceci ne fonctionne pas avec IE : 6

7 Programmation Web JavaScript Xavier Tannier Ce que permet Javascript Réagir à des événements Cliquez ici HTML

8 Programmation Web JavaScript Xavier Tannier Ce que permet Javascript Changer le contenu HTML // Trouver l'élément par son identifiant x = document.getElementById("demo") // Modifier le contenu x.innerHTML = "Ceci est le nouveau contenu !"; JavaScript

9 Programmation Web JavaScript Xavier Tannier Ce que permet Javascript Changer le contenu HTML function changeImage(){ element=document.getElementById('monimage'); if (element.src.match("allumee")){ element.src="ampoule_allumee.gif"; } else { element.src="ampoule_eteinte.gif"; } HTML

10 Programmation Web JavaScript Xavier Tannier Ce que permet Javascript Changer le style HTML Valider une entrée Écrire dans la sortie x=document.getElementById("demo") // Trouver l'élément x.style.color="#ff0000"; // Changer son style if (isNaN(x)) {alert("Non numérique...")}; if (!verifieEntree(x)) {alert("Entrée non conforme")}; Ma page Web document.write(" Mon JavaScript "); (attention, uniquement pendant le chargement de la page...) HTML JavaScript

11 Programmation Web JavaScript Xavier 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ères x = 5 + 5; // 10 x = "5" + "5"; // "55" x = 5 + "5"; // "55" x = "5" + 5; // "55" 11

12 Programmation Web JavaScript Xavier 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

13 Programmation Web JavaScript Xavier 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

14 Programmation Web JavaScript Xavier 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; Nimporte quel type de variable peut être une exception – function name(arg1, arg2){ …; return x; } 14

15 Programmation Web JavaScript Xavier 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

16 Programmation Web JavaScript Xavier Tannier Objets prédéfinis (2/2) Types standard – var date = new Date(2010, 2, 14); var today = new Date(); // Par défaut aujourdhui – 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 dopérateurs (uniquement pour les types standard) – if (today > date) { alert("En retard pour la St Valentin"); } – date.setDate(date.getDate() + 45); // 28/04/

17 Programmation Web JavaScript Xavier Tannier Objets Définir vos propres objets : objets anonymes 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); 17

18 Programmation Web JavaScript Xavier Tannier Interactions avec lutilisateur Événements : attributs onXXX en HTML4 – – LIMSI – Si checkForm() retourne false, script.php nest pas appellé 18

19 Programmation Web JavaScript Xavier Tannier Interactions avec lutilisateur É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'; }

20 Programmation Web JavaScript Xavier Tannier Les événements onclickClic sur lélément ondblclickDouble-clic sur lélément onmousedownAppui de la souris sur lélément onmousemoveDéplacement de la souris au-dessus de lélément onmouseoverArrivée de la souris sur lélément onmouseoutSortie de la souris de lélément onmouseupRelâchement de la souris sur lélément Événements souris

21 Programmation Web JavaScript Xavier Tannier Les événements onkeydownAppui sur une touche onkeypressedAppui puis relâchement de la touche onkeyupRelâchement de la touche Événements clavier Événements objets / fenêtre onabortChargement dune image interrompu onerrorChargement dune image qui échoue onloadChargement dun élément, du document onresizeRedimensionnement du document onscrollScroll sur le document onunloadFermeture de la page

22 Programmation Web JavaScript Xavier Tannier Les événements onblurUn élément de formulaire perd le focus onchangeLe contenu dun élément change onfocusUn élément de formulaire prend le focus onresetLe formulaire est réinitialisé onselectSélection de texte dans un formulaire onsubmitSoumission du formulaire Événements formulaires

23 Programmation Web JavaScript Xavier Tannier Cookies Les cookies sont aussi disponibles en JavaScript – document.cookie : tous les cookies dun 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

24 Programmation Web JavaScript Xavier 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

25 Programmation Web JavaScript Xavier Tannier XHTML Document Object Model (DOM) 25

26 Programmation Web JavaScript Xavier 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 ) – 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 26

27 Programmation Web JavaScript Xavier 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 quen CSS – On enlève les "-" et on met une majuscule sur le mot suivant – background-color style.backgroundColor – font-family style.fontFamily – (Plus dinfo 27

28 Programmation Web JavaScript Xavier 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

29 Programmation Web JavaScript Xavier 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

30 Programmation Web JavaScript Xavier 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;

31 Programmation Web JavaScript Xavier 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être window.moveTo()Déplace le fenêtre window.resizeTo()Redimensionne la fenêtre

32 Programmation Web JavaScript Xavier 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();

33 L'objet window txt =" Browser CodeName: " + navigator.appCodeName + " "; txt+=" Browser Name: " + navigator.appName + " "; txt+=" Browser Version: " + navigator.appVersion + " "; txt+= " Cookies Enabled: " + navigator.cookieEnabled + " "; txt+=" Platform: " + navigator.platform + " "; txt+=" User-agent header: " + navigator.userAgent + " "; txt+=" User-agent language: "+navigator.systemLanguage+" "; document.getElementById("example").innerHTML=txt; window.navigator : – Informations sur le navigateur

34 Programmation Web JavaScript Xavier Tannier L'objet window Les pop-ups 34 window.alert("Bonjour"); var r = confirm("Choisissez"); if (r == true) { x = "OK !"; } else { x = "Annulé !"; }


Télécharger ppt "Xavier Tannier JavaScript."

Présentations similaires


Annonces Google