Programmation client web cours 8 : javascript et applet

Programmation client web
cours 8 : javascript et applet
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
Charger un ficher de code JavaScript
✦
<SCRIPT type= "text/javascript" SRC= "source.js " > </SCRIPT>
IPW : programmation côté client
3
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
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
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
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
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
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
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
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-2002 08: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: http://www.domaine.com/repertoire/index.htm lira les cookies des répertoires
http://www.domaine.com/ et http://www.domaine.com/repertoire/
◆ En revanche, elle ne pourra pas lire les cookies de ses sous-répertoires:
ex: http://www.domaine.com/index.php ne pourra pas lire les cookies du répertoire
http://www.domaine.com/repertoire/
● 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
Cookie
✦
✦
Un domaine de validité (domain=domaine-de-validité)
● Il indique le serveur pour lequel le cookie est valable (ex: www.domaine.com).
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
Cookie
✦
✦
✦
cookie.html
● <body onload="initPage();" onunload="savePage();">
cookie.js
● document.cookie
● setCookie
● getCookie
● deleteCookie
loadandsave.js
IPW : programmation côté client
13
Changement de feuille de style
✦
✦
✦
✦
✦
Sur une page… exemple-cours8/changement.html
● Comment je sais qu’il faut utiliser disabled ?
◆ www.w3.org/TR/DOM2-HTML/ecma-script-binding.html
● 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
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
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
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
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