1 / 35

JavaScript

JavaScript. Qu’est-ce que JavaScript ?. URL. Le client. 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. Qu’est-ce que JavaScript ?. URL + paramètres.

tab
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript

  2. Qu’est-ce que JavaScript ? URL Le client 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 ? URL + paramètres Le client Le serveur (navigateur) (HTTP) Translation URL => Programme => Envoi durésultat duprogramme 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 ? URL + paramètres Le client 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> functionchangeImage(){ 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 : • 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"

  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èreaffectation • 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));

  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 • functionname(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 var obj = new Object;obj.x = 1;obj.y = 2; • Définir une classe functionMaClasse(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="email"onchange="checkEmail()"> • <a href="http://www.limsi.fr" onmouseover= "window.status='Site du LIMSI';">LIMSI</a> • <formmethod="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;functionmaFonction() { this.style.backgroundColor = '#FF0000'; }

  20. Les événements • Événements souris

  21. Les événements • Événements clavier • Événements objets / fenêtre

  22. Les événements • Événements formulaires

  23. Cookies • Les cookies sont aussi disponibles en JavaScript • document.cookie : tous les cookies d’un coup concaténés en une seule string • functiongetCookie(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œuddocument.getElementById("menu"); • Par type de balise : retourne une liste de nœudsdocument.getElementsByTagName("p"); • Pas de getElementsByClass dans le standard

  27. 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)

  28. 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();

  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

  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("http://www.polytech.u-psud.fr"); 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 + " !"; }

More Related