Programmation client web cours 8 : javascript et applet

Transcription

1 Programmation client web cours 8 : javascript et applet

2 Plan Modèles de programmation via le service Web Protocole HTTP HTML BALISES Cascading Style Sheet Javascript Applet java IPW : programmation côté client 2

3 Charger un ficher de code JavaScript <SCRIPT type= "text/javascript" SRC= "source.js " > </SCRIPT> IPW : programmation côté client 3

4 DOM DOM est un acronyme pour Document Object Model. C'est une API (application programming interface) pour du html et xml valide. En suivant le DOM, les programmeurs peuvent construire des documents, naviguer dedans, ajouter, modifier ou effacer des éléments à ces documents. En tant que recommandation du W3C, l'objectif du DOM est de fournir une interface de programmation standard pour être utilisée par tous (applications, OS). Suivant le DOM, un document a une structure logique d'arbre (ou de forêt). Le nom DOM provient de l'approche retenue par le W3C : une approche proche des modèles objets (propriétés, méthodes, description). Le DOM a pour but d'uniformiser la manipulation des documents "web", notamment par les scripts. c.f. ECMAscript (une sorte de standardisation de javascript). IPW : programmation côté client 4

5 Quelques éléments du DOM document Element createelement(in DOMString tagname) NodeList getelementsbytagname(in DOMString tagname) Element getelementbyid(in DOMString elementid) Document HTML (hérite de document) title : titre de la page referrer, domain, URL body images, applets, links, forms, anchors, cookie [des collections] write(), writeln() NodeList length item(index) IPW : programmation côté client 5

6 Quelques éléments du DOM node nodename, nodevalue, nodetype, parentnode childnodes [une NodeList] insertbefore(newchild, refchild), replacechild(newchild, oldchild), appendchild(newchild), removechild(oldchild) element tagname Element html id title lang dir classname [class CSS] IPW : programmation côté client 6

7 Animation Animation comptes à rebours : settimeout la fonction settimeout prend deux paramètres : en premier des instructions (entre "", séparées par des ';') (qui peuvent être un appel de fonction) et en second un délai en milisecondes. Ce délai est le temps à attendre avant l'exécution des instructions passer en premier paramètre. déclenchement périodique : setinterval setinterval fonctionne comme settimeout, à la différence que les instructions passées en premier paramètre sont exécutées périodiquement (toutes les délai milisecondes). stoper une minuterie : clearinterval la fonction "clearinterval" permet de stopper un déclenchement périodique. Pour ce faire, il faut concerver un pointeur sur le retour de setinterval et de le passer en paramètre de la fonction clearinterval. exemple : var inter = setinterval("alert('p\u00e9riode de 3 secondes');", 3000);... clearinterval(inter); exemple-cours8/anim-navconv.html exemple-cours7/defil.html IPW : programmation côté client 7

8 DHTML Si on en croit la définition sur le site Jargon Français : Dynamic HyperText Markup Language. HTML dynamique, ayant été présenté sous diverses formes au fil du temps : d'abord un simple "Server Side Include" vous qualifiait pour un expert du DHTML, puis ce fut du HTML 4, utilisant les CSS (feuilles de style). Désormais, on ne sait plus trop ce que c'est, mais le principe est qu'un client puisse modifier une page sans faire appel au serveur. Une autre définition, la définition du site comment ça marche : Le DHTML (Dynamic HyperText Markup Language) n'est pas à proprement parler un langage de balises pour Internet, il n'existe d'ailleurs aucune norme DHTML à part entière. En réalité, le DHTML est un ensemble de technologies Internet associées afin de fournir des pages HTML plus interactives, c'est-à-dire dont le contenu peut être modifié grâce à des événements (mouvements de la souris, survol d'un objet par le curseur,...) après le chargement de la page. Les technologies que le DHTML met en oeuvre sont: * Le HTML, nécessaire pour présenter le document ; * Les feuilles de style (CSS), permettant de définir un style pour plusieurs objets et le positionnement de ceux-ci sur la page ; * Le modèle objet de document (DOM), proposant une hiérarchie d'objets, afin de faciliter leur manipulation ; * Le Javascript, un petit langage de script essentiel pour définir des événements utilisateur ; IPW : programmation côté client 8

9 Menu css pur : exemple-cours8/menucss.html exemple-cours8/menudyn.css Différents problèmes Css et javascript exemple-cours8/menu_tab.html À plusieurs niveaux : exemple-cours8/menu_tab_v2.html IPW : programmation côté client 9

10 Animation (2) Plusieurs solutions : Jeux avec style : problème avec ie (setattribute() et propriété style non opérationnelle) exemple-cours8/anim_attrib.html Jeux avec des classes css : il faut générer les css exemple-cours8/anim_classcss.html Jeux sur le texte exemple-cours8/anim_text.html IPW : programmation côté client 10

11 Cookie Un nom et une valeur (nom=valeur) Le nom permet d'identifier le cookie. Sa valeur est un texte qui constitue le contenu du cookie. Une date d'expiration (expires=date-au-format-gmt) Au format GMT (ex: Tue, 31-Dec :00:00 GMT), elle est facultative. Si elle est omise, le cookie "meurt" à la fin de la session en cours du navigateur. Si elle est spécifiée on parle d'un "cookie persistant". Un chemin d'accès (path=chemin-d-accès) Il indique la partie de l'url pour laquelle le cookie est valable. Une page HTML pourra lire les cookies de ses sur-répertoires jusqu'à la racine du site: ex: lira les cookies des répertoires et En revanche, elle ne pourra pas lire les cookies de ses sous-répertoires: ex: ne pourra pas lire les cookies du répertoire Pour qu'un cookie soit accessible depuis tous les répertoires d'un site, il faudra donc spécifier path="/". Enfin, si le chemin d'accès est omis, il prendra la valeur par défaut du chemin de la page HTML qui écrit le cookie, ce qui est dans bien des cas suffisant. IPW : programmation côté client 11

12 Cookie Un domaine de validité (domain=domaine-de-validité) Il indique le serveur pour lequel le cookie est valable (ex: S'il n'est pas spécifié il prend la valeur par défaut du domaine de la page HTML qui écrit le cookie, ce qui est, dans la grande majorité des cas, l'effet recherché. Pour des raisons de sécurité, il ne semble cependant pas possible qu'un site web place des cookies qui seront relus par un autre site. Un attribut de sécurité (secure): S'il existe, le cookie ne sera transmis que si la connexion vers le serveur est sécurisée (protocole HTTPS et non HTTP). IPW : programmation côté client 12

13 Cookie cookie.html <body onload="initpage();" onunload="savepage();"> cookie.js document.cookie setcookie getcookie deletecookie loadandsave.js IPW : programmation côté client 13

14 Changement de feuille de style Sur une page exemple-cours8/changement.html Comment je sais qu il faut utiliser disabled? Que ce passe-t-il si je recharge? Plus de dynamique avec setattribute mais ne fonctionne pas avec ie Utilisation des cookies exemple-cours8/change_cookie.html Et si je ne suis pas attentif Partage d un cookie exemple-cours8/change_cookie_v2.html et autre_page.html Utilisation d un formulaire (méthode get) exemple-cours8/change_cookie_v3.html et form.html Notons la difficulté de la barre de navigation IPW : programmation côté client 14

15 Plan Modèles de programmation via le service Web Protocole HTTP HTML BALISES Cascading Style Sheet Javascript Applet java IPW : programmation côté client 15

16 Applet Balise object ou applet exemple-cours4/applet exemple-cours8/applet Question de sécurité Pas d écriture ou lecture sur le disque du client Seule connexion possible : le serveur d origine Ne peut pas exécuter de programme chez le client Ne peut pas lire certaines propriétés système (ex : "java.class.path", "java.home", "user.dir", etc.) Les fenêtres créées peuvent avoir un message d avertissement Interface Java standard Component / Container / JComponent Événements IPW : programmation côté client 16

17 Applet Utilisation de l API d applet Tutorial java : java.sun.com Méthodes init() : appeler automatiquement lors de l initialisation destroy() : appeler lors de la destruction de l applet (libération de ressource) start() : appeler juste après init et lors de chaque retour sur la page stop() : appeler juste avant destroy et lors de changement de page web Retrouver un fichier (sur le serveur) Limiter à l url de l applet Image image = getimage(getcodebase(), "imgdir/a.gif"); Afficher un message dans la barre de status showstatus("myapplet: Loading image file " + file); Changer de page web public void showdocument(java.net.url url) public void showdocument(java.net.url url, String targetwindow) "_blank" (nouvelle fenêtre),"windowname" (dans une fenêtre du même nom, créée au besoin), "self" (dans la même fenêtre ou frame), "_parent", "_top" deployment/applet/browser.html IPW : programmation côté client 17

18 Applet Communication possible entre applets de la même page Jouer des sons onceclip = applet.getaudioclip(getcodebase(), "bark.au"); onceclip.play(); //Play it once. onceclip.loop(); //Start the sound loop. onceclip.stop(); //Stop the sound loop. Récupérer des paramètres public String getparameter(string name) Non sensible à la casse Retourne la valeur contenue dans la balise HTML tag. <applet code="clock" width=50 height=50> <param name=color value="blue"> </applet> getparameter("color") retourne la valeur "blue". IPW : programmation côté client 18