[PDF] Langage JavaScript cours et travaux pratique | Cours javascript

Programmation client web

Programmation client web

cours 8 : javascript et applet

Plan

✦ HTML

● BALISES

✦ Cascading Style Sheet ✦ Javascript

Charger un ficher de code JavaScript

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.

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

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]

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

DHTML

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 ;

Menu

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

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.

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

Cookie

✦ cookie.html

● <body onload="initPage();" onunload="savePage();">

✦ cookie.js ● document.cookie ● setCookie ● getCookie ● deleteCookie ✦ loadandsave.js

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

Plan

✦ HTML

● BALISES

✦ Cascading Style Sheet ✦ Javascript

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

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

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>