HYPERTEXTE, HTML & Javascript
1ère Partie :
Introduction à l'Hypertexte
2ème Partie :
Présentation de HTML & XHTML
3ème Partie :
Présentation de Javascript
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 1 / 37 Jean-Marc PUJOS
3ème Partie : Présentation de JAVASCRIPT
Ø Le mécanisme de communication
Ø L’encodage des données
Ø Un exemple
Ø La description des variables
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 2 / 37 Jean-Marc PUJOS
JAVACRIPT - Interactivité
Interpreteur SERVEUR
javascript
Traitement interne
I
Get ou post
n
browser t
DEMON dynamique
e Script cgi
httpd Pages
r
html +
n statique JAVA
CLIENT e SCRIPT
t
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 3 / 37 Jean-Marc PUJOS
JAVACRIPT - Un client actif
Client démon cgi script
get [Link]
1
Envoi du formulaire
2 et du Javascript
Saisie par utilisateur et submit
3 Validation des saisies par le browser avec les fonctions Javascript
Envoi des champs validés Passage par
4 get ou post
5 Traitement par le
programme CGI
6 Html généré qui génére du html
Envoi des résultats
7
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 4 / 37 Jean-Marc PUJOS
JAVACRIPT - Introduction
• Javascript : développé par Netscape (à partir de Netscape 2.0)
• langage de scripts ( programmes interprétés) contenus dans le
document html, exécutés sur la machine du client (extension de html)
• javascript ≠ Java
• java: véritable langage de programmation, compilé, code protégé,typage
fort, objet (classes, instances, héritage)
• javascript: facile à utiliser, typage faible, intégré dans html,interprété basé
sur les objets html
• Implémenté par le tag SCRIPT et attribut LANGUAGE
exemple:
<SCRIPT LANGUAGE=“JavaScript1.1”>
code javascript (version 1.1)
</SCRIPT>
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 5 / 37 Jean-Marc PUJOS
JAVACRIPT - Implémentation du code (1)
Exemples d’insertion de Javascript
• un document devient réactif à un événement
<SCRIPT LANGUAGE="JavaScript"> si à cet événement est associée une fonction
// Définit une fonction clickmulot() javascript
</SCRIPT> • un événement est déclaré dans un
…… formulaire ou sur un lien hypertexte.
……
• Exemple :
……
<FORM>
……
<input type=“button” value =“exemple test”
…… onClick=“alert(‘ouah!’)”>
........ </FORM>
<FORM ...> <INPUT
TYPE="button"
un click souris sur le bouton provoque l'exécution du
onClick="clickmulot(this)" ...>
handler onClick , ici l’affichage d’une fenêtre pop-up
... alert de contenu ouah!
</FORM> (alert : fonction existant dans javascript)
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 6 / 37 Jean-Marc PUJOS
JAVACRIPT - Implémentation du code (2)
• On peut aussi placer le source javascript dans un fichier externe par :
<SCRIPT LANGUAGE=“Javascript” SRC=[Link]></SCRIPT>
(le serveur devant être configuré pour servir un type MIME “application/x-
javascript”)
• on peut définir des variables ou expressions javascript pour définir des
attributs HTML :
exemple: <HR width=“&(nomvar);” ALIGN=“LEFT”>
définit une barre horizontale cadrée à gauche de 50% si nomvar:variable Javascript
vaut 50
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 7 / 37 Jean-Marc PUJOS
JAVACRIPT - Les événements (1)
• Souris
• Click (handler: onClick)
• sur un bouton de form (radio, checkbox, button, submit, reset)
• un lien
• MouseOver (onMouseOver) sur un lien
• MouseOut (onMouseOut) sur un lien ou area d’image cliquable
• MouseDown (onMouseDown) et MouseUp (onMouseUp) bouton appuyé
(relaché) sur un document bouton ou lien
• MouseMove (on MouseMove) : mouvement de souris
• DblClick (onDblClick)
• Clavier
• KeyPress (onKeyPress) l’utilisateur a appuyé sur une touche
• KeyDown (onKeyDown) l’utilisateur enfonce une touche
• KeyUp (onKeyUp ) relâchement sur une touche dans un document, image, liens
ou textarea
• Change (onChange) changement de la valeur d’un élément type text, textarea et
select list de form
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 8 / 37 Jean-Marc PUJOS
JAVACRIPT - Les événements (2)
• Focus
• Focus (onFocus) l’utilisateur donne le focus input dans une fenêtre ou un
élément de formulaire
• Blur (onBlur) l’utilisateur enlève le focus input dans une fenêtre ou un élément
de formulaire
• Formulaires
• Select (onSelect) sélection d’un élément de formulaire (type text et textarea)
• Submit (onSubmit) et Reset (onReset) soumission (ou annulation) des données
d’un formulaire
• Document
• Load (onLoad) et Unload (onUnload) : chargement et sortie de page
• Resize (onResize) et Move (onMove) d’une fenêtre
• Abort (onAbort) arrêt du chargement d’une image
• Error (onError) de chargement d’image ou document
• DragDrop (onDragDrop) l’utilisateur fait glisser un objet (ex:fichier) dans la
fenêtre du browser
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 9 / 37 Jean-Marc PUJOS
Les objets et les handlers <input type=Text ou =Password>
onBlur onFocus
<FORM>
onChange onSelect
onSubmit
onKeyDown onKeyPress
onReset
onKeyUp
<frame> ou
<input type=checkbox,radio,
window <IMG> button,submit,select >
onerror onAbort
onClick onDblClick
onError
<BODY> onMouseDown onMouseUp
onLoad
< textarea >
document
onBlur onFocus
onBlur <A> <AREA>
onChange onSelect
onDragDrop onClick onKeyDown onKeyPress
onFocus onDblClick onKeyUp
onLoad onMouseUp
onMove onMouseDown < select>
onResize onMouseOver onBlur onFocus
onUnload onMouseOut onChange
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 10 / 37 Jean-Marc PUJOS
JAVACRIPT - Exemples (1)
le code :
<A HREF="#fin" onClick="alert('onClick sur le lien')">onClick
</A>l'utilisateur clique sur une zone hypertexte.<BR>
[<I>cliquez sur onClick</I>]
donne:
onClick l'utilisateur clique sur une zone hypertexte.
[cliquez sur onClick]
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 11 / 37 Jean-Marc PUJOS
JAVACRIPT - Exemples (2)
le code:
<FORM><INPUT VALUE=onFocus onFocus="alert('onFocus
sur la zone')">l'utilisateur clique sur une zone.<BR>
[<I>cliquez sur onFocus</I>] </FORM>
donne:
on focus l'utilisateur clique sur une zone.
[cliquez sur onFocus]
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 12 / 37 Jean-Marc PUJOS
JAVACRIPT - Basé sur des objets
• Javascript est basé sur des objets, entités informatiques de base,
avec des propriétés et un comportement défini par des méthodes
(fonctions associées à des objets).
• les objets de Javascript :
• les objets issus du document html : ou objets du navigateur
• les objets prédéfinis dans Javascript
• les objets créés par l’utilisateur
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 13 / 37 Jean-Marc PUJOS
JAVACRIPT - Les objets du navigateur (1)
• Javascript permet de travailler sur des objets :
• issus du document html (les objets du navigateur)
• organisés en une hiérarchie
• avec en général
• un nom (attribut NAME)
• des propriétés
• qui ont une valeur (VALUE)
• accessibles par des tableaux (array)
• des méthodes
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 14 / 37 Jean-Marc PUJOS
Textarea JAVACRIPT
Layer Text
La hiérarchie des
objets du navigateur
FileUpLoad
Link
Window
Password
Image
Hidden
Frame
Area Submit
Navigator
Document
Anchor Reset
Applet Radio Plugin
Location
Checkbox
Plugin MimeType
History Button
Form Select Option
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 15 / 37 Jean-Marc PUJOS
JAVACRIPT - Les objets du navigateur (2)
• navigator: name, version, MIMEtype supportés et plugins
• window : propriétés s'appliquant sur la fenêtre entière
• il y a des objets window pour chaque fenêtre window fille dans un document
à frames
• document : propriétés basées sur le contenu du document (title,
background,color,link,forms)
• location : propriétés basées sur l'URL courante
• history :propriétés représentant la navigation (URL) du client
on se réfère à une propriété par le nom de l'objet et des ancêtres :
[Link] : valeur du texte (input de NAME=texte1)
de la form (de NAME=myform) du document
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 16 / 37 Jean-Marc PUJOS
JAVACRIPT - Exemples d’objets
Soit le code : <HTML> <HEAD> <TITLE>exemple d’objets</TITLE>
<SCRIPT>.......</SCRIPT> </HEAD>
<BODY>
<FORM NAME="maforme "ACTION=[Link]" METHOD="get">
<INPUT TYPE="text" NAME="texte1" VALUE="blablabla" SIZE=20>
<INPUT TYPE="text" NAME="texte2" VALUE="machina" SIZE=20>
......
</FORM> </BODY></HTML>
D'où les propriétés et leur valeur :
[Link] "exemple d’objets"
[Link] #ffffff si fond blanc défini
par le browser
[Link] "get"
[Link] "blablabla"
[Link] "texte1"
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 17 / 37 Jean-Marc PUJOS
JAVACRIPT - L’objet de base WINDOW (1)
Les méthodes de l'objet window (frame idem)
• open et close : ouverture et fermeture d'une fenêtre dans le browser
• alert : boîte de dialogue avec message d'alerte
• confirm : boîte avec bouton OK et Cancel
• prompt : boîte avec champ texte pour entrer une valeur
• blur et focus : enlève ou donne le focus à une fenêtre
• scrollTo : scrolling jusqu'à une valeur spécifiée de coordonnée
• setInterval : appel de fonction ou évaluation d'expression
périodiquement
• setTimeout : appel de fonction ou évaluation d'expression après un
temps donné
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 18 / 37 Jean-Marc PUJOS
JAVACRIPT - L’objet de base WINDOW (2)
Javascript permet enfin de manipuler les fenêtres
• ouverture de fenêtre : méthode open
[Link](“[Link]”) ou
[Link](“[Link]
« fenaffiche » sera le nom de TARGET utilisable par une autre fenêtre
• on peut aussi fermer une fenêtre par close
[Link](), [Link]() ou [Link]()
• un FRAMESET est composé d’un ensemble de FRAMES
<FRAMESET ROWS="60%,40%">
<FRAMESET COLS="30%,70%">
<FRAME SRC="[Link]"NAME=“fenetre1”>
<FRAME SRC="[Link]" NAME=“fenetre2”>
</FRAMESET>
<FRAME SRC="[Link]" NAME=“fenetre3”> </FRAMESET>
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 19 / 37 Jean-Marc PUJOS
JAVACRIPT - L’objet de base WINDOW (3)
top ou parent:fenetre mère du navigateur
fenetre1=[Link][0]
Ceci correspond à:
fenetre2=[Link][1]
fenetre3=[Link][2]
On pourra ainsi d’une fenêtre accéder à d’autres, par exemple :
<A HREF=“URL” TARGET=“nomde frame”> ancre </A>
pour charger un nouveau document URL dans une frame
<FORM Action=“URL-CGI” TARGET=“nomde frame”>..</FORM>
pour afficher les résultats dans une frame particulière
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 20 / 37 Jean-Marc PUJOS
JAVACRIPT - L’objet de base WINDOW (4)
on peut ( à la création ou en modification par Javascript) agir sur le look :
fen1= [Link] (“[Link]“, ”fenimage”, ”scrollbars=yes,
toolbar=no, menubar=yes, location=no, directories=no, status=no”)
crée une nouvelle fenêtre du browser de nom fen1, contenu [Link] accessible
en TARGET:fenimage, avec des ascenseurs, barre de menus, sans barre
d’outils ni status, ni zône location
[Link] = visible permettra de rajouter la barre d’outils.
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 21 / 37 Jean-Marc PUJOS
JAVACRIPT - L’objet de base DOCUMENT
write et writeln : méthodes générant du HTML
• propriétés:
• bgColor, fgColor, linkColor, alinkColor, vlinkColor
• LastModified (cf http)
• referrer: URL précédemment visitée par le client
• Cookie permettra de positionner des valeurs ou de les récupérer.
cookie : mécanisme pour stocker des données persistantes sur le client (fichier
[Link])
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 22 / 37 Jean-Marc PUJOS
JAVACRIPT - L’objet de base FORM
• chaque form d’un document créé un objet form.
• Les objets form d’un document sont stockés dans un tableau forms (à
partir de forms[0])
• les éléments du formulaire sont eux-même dans un tableau elements (à
partir de de elements[0])
méthodes des objets form : submit() et reset()
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 23 / 37 Jean-Marc PUJOS
JAVACRIPT - Objets de base
• Objet de base LOCATION :
propriétés basées sur l'URL courante:
par exemple : hostname
• méthodes :
– replace() : pour charger une URL
– reload() : force le rechargement du document
• Objet de base HISTORY :
• contient la liste des URL visitées. (tableau history)
• propriétés: current , next , previous
• méthode: go ex : [Link](-2)
• Objet de base NAVIGATOR :
• informations sur le navigateur :appName
appVersion
• propriétés: javaEnabled
• mimeType et plugin (dans tableau plugins et mimeTypes)
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 24 / 37 Jean-Marc PUJOS
Window ou frame .document .forms[i] ou nomforme
alert (chaine)
blur() Clear()
focus() close()
close() open(typemime)
open (url, nomfen,caracteristiques) write(chaine)
prompt(chaine, defaut) writeln(chaine)
setTimeout(exp, ms) captureEvent(evt1|…|evtn)
ClearTimeout(id) releaseEvent(evt1|…|evtn)
.layers[i] ou nomcouche
setInterval(exp,ms)
clearInterval(id) .history moveBy(x,y)
moveTo(x,y)
moveBy(x,y) Back() moveToAbsolute
moveTo(x,y) forward() resizeBy(l,h)
resizeBy(larg,haut) go(entier) resizeTo(l,h)
resizeTo(larg,haut) moveAbove(layer)
resizeBy(x,y) .location moveBelow(layer)
scrollBy(x,y) et scrollTo(x,y) Reload() load(URL,l)
captureEvent(evt1|…|evtn) replace(URL) captureEvent(evt1|…|evtn)
releaseEvent(evt1|…|evtn) releaseEvent(evt1|…|evtn)
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 25 / 37 Jean-Marc PUJOS
Forms[i] ou nomforme Elements[i] ou nomelement
Submit()
reset() INPUT type text et password
blur()
focus()
select()
input de type button, checkbox,
radio submit et reset:
click()
textarea
blur()
focus()
select()
[Link][1].elements[1].focus() met le focus sur le 2eme
élément du deuxième formulaire de la page
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 26 / 37 Jean-Marc PUJOS
JAVACRIPT - Les tableaux d'objets du navigateur
anchors les tags <A> du document ayant un NAME, dans l' ordre
applets les tags <APPLET> dans l'ordre (du source)
embeds les tags <EMBED> dans l'ordre (du source)
forms les tags <FORM> dans l'ordre (du source)
document images les tags <IMG> dans l'ordre (du source)
(pas celles créées par image)
links les tags <AERA HREF=....>,<A HREF=....> et
les objets créés par link , dans l'ordre (du source)
Function arguments les arguments d'une fonction
Form elements les éléments (objets checkbox,radio et text dans l'ordre (du source)
select options les tags <OPTIONS> dans l'objet Select dans l'ordre
window frames les tags <FRAME> d'une fenêtre contenant un
FRAMESET dans l'ordre du source
navigator mimeTypes tous les MIME types supportés par le browser
de façon interne, via helpers ou par plugins
plugins les plugins installés sur le browser client, dans leur ordre
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 27 / 37 Jean-Marc PUJOS
JAVACRIPT - Fonctions et objets prédéfinis
Il existe des méthodes prédéfinies sur des objets prédéfinis dans
Javascript.
– objets prédéfinis avec méthodes associées :
• Array
• Boolean
• Date
• Function
• Math
• Number
• RegExp
• String
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 28 / 37 Jean-Marc PUJOS
JAVACRIPT - Les fonctions (1)
• Ensemble d’instructions correspondant à une tâche spécifique,
appelable par leur nom.
• Définition:
function nomdefonction(paramètres,arguments) {
bloc d’instructions
}
• Passage de paramètres:
function ecrirenom(name) {
[Link](“<HR votre nom est<B>“);
[Link](name);
[Link](“</B></HR>“);
}
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 29 / 37 Jean-Marc PUJOS
JAVACRIPT - Les fonctions (2)
• Une fonction peut retourner un résultat par return
• NB:
• on déclarera les fonctions dans la partie HEAD pour être sur que le
navigateur les connaissent.
• name est une variable locale à la fonction et n’existe que lors de
l’appel par opposition aux variables déclarées à l’extérieur qui sont
globales et accessibles partout.
• possibilités de fonctions récursives
• on pourra ainsi définir un handler d'événement
• Javascript fournit aussi un jeu de base de fonctions prédéfinies
(comme un ensemble de méthodes de base (méthode = fonction
associée à un objet) )
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 30 / 37 Jean-Marc PUJOS
JAVACRIPT - Les fonctions (3)
Les fonctions prédéfinies:
• eval(expression): eval permet l’évaluation de la chaine expression
par exemple si expression:instructions Javascript, eval les exécute.
==> inutile pour les expressions arithmétiques
• isNaN(valeurtest) : NaN:not a number donne true (si NaN) ou false (si
Number)
• parseFloat(string) et parseInt(string[,base]) transforme une chaine en valeur
numérique (flottant ou entier selon la base demandée)
• escape(string) : encodage de chaine d’ ISOlatin character set en hexadécimal
et unescape(string) retourne l’ASCII
• taint et untaint: marquage pour sécurisation
• number(objet) et string(objet) : convertissent un objet en nombre ou en chaine
lisible : <SCRIPT> D= new Date(430054663215);
[Link](string(D)+”<BR>“);
</SCRIPT> donne THU Aug 18 [Link] Pacific Dayligt Time 1983
• enfin,....il existe aussi des objets Function créés par new...(compilés) à
partir de javascript 1.1
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 31 / 37 Jean-Marc PUJOS
JAVACRIPT - Les objets de l’utilisateur (1)
• Outre les objets prédéfinis de javascript, les objets du
navigateur, on peut créer de nouveaux objets manipulables
par javascript
• Il importe de définir l’objet, ses propriétés et les méthodes
(fonctions associées) portant sur cet objet
• les méthodes et propriétés sont accessibles par :
[Link] et [Link]
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 32 / 37 Jean-Marc PUJOS
JAVACRIPT - Les objets de l’utilisateur (2)
Création d’un objet par une fonction constructor function qui définit les noms et
propriétés:
exemple: function constructor:
fonction stagiaire (nom,prenom,age) {
[Link]=nom;
[Link]=prenom;
[Link]=age; this:objet courant
}
on créera une instance de l’objet par :
stagiaire1=new stagiaire (“dupond”,”charles”,24) où l’objet stagiaire1 a les
propriétés: [Link],[Link] et [Link].
On peut créer d’autres instances par un autre new qui crééra un autre objet:
stagiaire2=new stagiaire (“martin”,”louis”,19)
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 33 / 37 Jean-Marc PUJOS
JAVACRIPT - Les objets de l’utilisateur (3)
Pour définir une méthode pour les objets, on va créer une
fonction que l’on insérera dans le constructor:
function total(){
total=eval([Link]+[Link]);
[Link](“<HR><P>total”+total); }
• et on définira la function constructor
function stagiaire (nom,prenom,notes) {
[Link]=nom; [Link]=prenom; [Link]=notes;
[Link]=total; }
• et on pourra appeler la méthode :
[Link]
NB: on peut définir dynamiquement les méthodes sur un objet créé
par [Link]=nomfonction
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 34 / 37 Jean-Marc PUJOS
JAVACRIPT – Compléments (1)
JAVASCRIPT permet de modifier les propriétés des objets d’un
document :
[Link]=“red” met la propriété color de l’objet de
propriété H1 de l’objet de propriété tags du document à red (document
peut être omis)
ou
<STYLE TYPE=“text/javascript”> [Link]=“18pt”;
[Link]=“20pt”;
<STYLE>
définit un style pour les paragraphes P
les noms de propriétés:margin-right (css)devient marginRight(javascript)
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 35 / 37 Jean-Marc PUJOS
JAVACRIPT - Compléments (2)
Pour positionner les couches de manière Axe Z
dynamique :
L’affichage devient un empilage de couches dont on
peut spécifier la position dans la fenêtre du browser
et l’ordre d’empilement.
On pourra ensuite réaliser par la
• modification des propriétés (visibility,
bgcolor,src,zindex…)
• l’appel aux méthodes des couches (move,resise,
moveAbove et moveBelow, load)
• aux événements (focus, blur, load, mouseout et
mouseover)
de véritables animations s’exécutant sur le poste
browser
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 36 / 37 Jean-Marc PUJOS
JAVACRIPT - Compléments (3)
Les fontes téléchargeables
Javascript permet d’incorporer des fontes dans un
document :
• grâce à un fichier de fontes (comme une image gif ou jpeg)
par LINK avec REL=FONTREF et SRC : accès au fichier
• un fichier de fonte : type MIME (paramétrage httpd
nécessaire)
© CNAM - Interaction Homme-Machine B2 Hypertexte, HTML & Javascript Diapositive 37 / 37 Jean-Marc PUJOS
