Xavier Tannier [email protected] JavaScript.

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


JavaScript


3


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


JavaScript


4


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


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


Ce que permet Javascript

• Réagir à des événements

<button type="button" onclick="alert('Bienvenue !')">Cliquez ici

</button>HTML

Programmation Web



• 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



• 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



• 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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


XHTML Document Object Model (DOM)

25

Programmation Web


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


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

http://www.howtocreate.co.uk/tutorials/javascript/domcss

Programmation Web


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


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


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


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


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


L'objet window

• Les pop-ups

34

window.alert("Bonjour");

var r = confirm("Choisissez");if (r == true) { x = "OK !";} else { x = "Annulé !";}

Programmation Web


L'objet window

• Les pop-ups

35

var name = prompt("Quel est votre nom ?","Homer Simpson");

if (name != null && name != ""){ x = "Bonjour" + name + " !";}

Xavier Tannier [email protected] JavaScript.

Documents

Transcript of Xavier Tannier [email protected] JavaScript.