- 1 - expert-it - 2000d-html 1. dynamic html de l'html au dynamic html
TRANSCRIPT
![Page 1: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/1.jpg)
Expert-IT - 2000 D-HTML - 1 -
1. Dynamic HTML
De l'HTML au Dynamic HTML
![Page 2: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/2.jpg)
Expert-IT - 2000 D-HTML - 2 -
Table des matières
Introduction au D-HTML HTML 4.0 Introduction au DOM Différences actuelles entre IE et NN Le langage JavaScript Feuille de style en cascade Mise en pratique du D-HTML Bibliographie
![Page 3: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/3.jpg)
Expert-IT - 2000 D-HTML - 3 -
Dynamic HTML
Dynamic HTML est un concept qui regroupent plusieurs technologies permettant de rendre les pages Web plus dynamiques et interactives
Dynamic et HTML : D-HTML n'est pas une nouvelle version du langage HTML intégration de plusieurs technologies :
– HTML (plutôt la version 4.0)– Cascading Style Sheet (Feuille de style en cascade) : CSS (CSS1,
CSS2 et CSS-P)– Document Object Model (Modèle Objet du Document)– Langage script côté client (JavaScript de préférence)
vue de D-HTML différente entre Netscape et Microsoft
![Page 4: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/4.jpg)
Expert-IT - 2000 D-HTML - 4 -
Dynamic HTML
Notions de base: une page Web est composée d'éléments les caractéristiques de ces éléments peuvent être définies dans des
règles de style description d'une hiérarchie d'éléments (objets) qui composent la
page et qui est accessible à un langage script (le DOM) ces objets proposent des attributs et des méthodes permettre de modifier dynamiquement les attributs des éléments permettre d'invoquer dynamiquement les méthodes des éléments permettre d'inter-changer n'importe quel élément avec un autre concentration maximum des activités côté client avec intervention
limitée du serveur
![Page 5: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/5.jpg)
Expert-IT - 2000 D-HTML - 5 -
Dynamic HTML
Fonctionnalités principales offertes par D-HTML: utilisation des feuilles de style accéder directement les éléments d'une page et en modifier les
caractéristiques positionnement exact d'élément avec déplacement possible superposition des éléments d'un document modification dynamique des styles, de la présentation des pages rafraîchissement du contenu d'une page sans interaction avec le
serveur génération dynamique de code HTML gestion des événements et de la propagation des événements utilisation de filtre graphique (IE seulement)
![Page 6: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/6.jpg)
Expert-IT - 2000 D-HTML - 6 -
Exemples d'utilisation de D-HTML
http://localhost/dhtml/ex/ex1/Buttons.htm http://localhost/dhtml/ex/ex1/3dtitles.htm http://localhost/dhtml/ex/ex1/zindex.htm http://localhost/dhtml/ex/ex1/CompatObjects.htm http://localhost/dhtml/ex/ie4/Jigsaw/Jigsaw.htm http://localhost/dhtml/ex/ex1/formControl.htm
![Page 7: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/7.jpg)
Expert-IT - 2000 D-HTML - 7 -
Dynamic HTML
DOM, document object model, modèles des objets qui peuvent composer un document.
Ce DOM est l'interface entre la dynamique de la page et le navigateur.
Composant D-HTML dont la maîtrise est indispensable le W3C a standardisé un DOM qui n'est pas encore
complètement supporté
![Page 8: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/8.jpg)
Expert-IT - 2000 D-HTML - 8 -
Dynamic HTML
Technologie D-HTML pas encore vraiment arrivée à maturité actuellement.
Gros problèmes de compatibilité entre les navigateurs NS et IE surtout en ce qui concerne les DOM
A ce stade des technologies, l'incompatibilité des DOM complexifie la pratique du D-HTML
Navigator 4.0 : limité à la notion de layer et de positionnement CSS (voir projet GECKO, NN 5.0)
IE 4.0 : plus avancé, plus d'objets manipulables avec support du positionnement CSS (encore plus standard avec IE 5.0)
![Page 9: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/9.jpg)
Expert-IT - 2000 D-HTML - 9 -
2. HTML 4.0
La dernière version HTML 4.0
![Page 10: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/10.jpg)
Expert-IT - 2000 D-HTML - 10 -
La dernière version HTML 4.0
nombreuses évolutions par rapport à 3.2 en avance sur les navigateurs évolution fondamentale : le langage HTML apporte des
éléments de structuration du contenu d'un document et se distance des aspects formatage et présentation des éléments qui relèvent de la mécanique des styles
fonctionnalités pour l'internationalisation, acceptation du jeu de caractères Unicode (ISO 10646), sens d'écriture (selon possibilité offerte par la plate-forme)
![Page 11: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/11.jpg)
Expert-IT - 2000 D-HTML - 11 -
La dernière version HTML 4.0
tables : optimisation de l'affichage des tables, utilisation des styles, meilleur support des en-têtes et bas de tableau (TFOOT, THEAD, TBODY)
accessibilité : les styles et d'autres fonctionnalités offrent un meilleur support pour l'accessibilité
formulaire : regroupement de champs en "fieldset", ordre de tabulation, protection de champs, boutons de submit
référence d'objets : le tag "<OBJECT>" doit être privilégié pour l'intégration d'objets dans le document (images, applet, control, …)
![Page 12: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/12.jpg)
Expert-IT - 2000 D-HTML - 12 -
La dernière version HTML 4.0
style : HTML 4.0 favorise l'utilisation de style, sans privilégier un langage de définition de style (CSS ou autres), par ex., le tag "<FONT>" n'est plus recommandé.
scripting : support standardisé des "event handler", spécification du langage script se fait par "<SCRIPT TYPE="text/javascript" …>" (LANGUAGE est toujours supporté)
support officiel des frames avec iframe
![Page 13: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/13.jpg)
Expert-IT - 2000 D-HTML - 13 -
3. Introduction au DOM
![Page 14: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/14.jpg)
Expert-IT - 2000 D-HTML - 14 -
Introduction au DOM
Le Document Object Model est l'ensemble des éléments composant la page
Cet ensemble d'éléments est organisé en une hiérarchie d'objets avec l'objet racine, la fenêtre du navigateur (window) ou la frame, contenant un document qui contient lui-même d'autres objets (les éléments HTML, formulaire ou autres)
Chaque objet dispose de propriétés et de méthode
![Page 15: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/15.jpg)
Expert-IT - 2000 D-HTML - 15 -
Introduction au DOM
Le navigateur expose, par exemple, les objets : window : la fenêtre du navigateur qui est à la racine des autres
éléments contenus dans cette fenêtre document : le document couramment affiché dans la fenêtre et
dont la parent est une window– sa méthode write() permet d'afficher du texte dans le document
courant screen : objet proposant d'accéder au caractéristiques de l'écran
– les propriétés width et height permettent de connaître la dimension en pixel de la fenêtre
![Page 16: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/16.jpg)
Expert-IT - 2000 D-HTML - 16 -
Référencer les objets du DOM (1)
La plupart des objets exposés par le navigateur via le DOM sont accessibles à partir de langages scripts tels que JavaScript ou VBScript.
Un script accède à un objet en spécifiant le chemin d'accès dans la hiérarchie suivi du nom de la propriété ou de la méthode
Exemple:window.document.write("Hello")
// méthode de l'objet document, window est optionnel
screen.width // propriété de l'objet screen
![Page 17: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/17.jpg)
Expert-IT - 2000 D-HTML - 17 -
Référencer les objets du DOM (2)
L'attribut NAME ou ID des balises HTML permettent également d'accéder à un élément : (en général, priviliégiez ID)<DIV ID="madiv" …>
<FORM NAME="maform" …>
<INPUT … NAME="nom" …>
…
document.all.madiv.style.color // IE
document.madiv.color // NN
document.maform.nom.value
// accès à la valeur d'un champ texte d'un formulaire
![Page 18: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/18.jpg)
Expert-IT - 2000 D-HTML - 18 -
Les éléments d'un document
<TABLE> <TR>
<TD>Cellule 1</TD> <TD>Cellule 2</TD> </TR> <TR> <TD>Cellule 3</TD> <TD>Cellule 4</TD> </TR> </TABLE>
![Page 19: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/19.jpg)
Expert-IT - 2000 D-HTML - 19 -
Les éléments d'un document
Tous les balises HTML ouvrantes, fermantes et leur contenu sont considérés comme des éléments ou objets.
Les éléments sont organisés en une structure hiérarchique représentant la relation de contenant / contenu.
![Page 20: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/20.jpg)
Expert-IT - 2000 D-HTML - 20 -
DOM de MicrosoftWindow
HistoryNavigator MimeTypes
PluginsUserProfile
LocationEventScreen
ExternalFrame Document
DocumentDocument Element All
ChildrenFilters
SelectionAllAnchorsAppletsChildrenEmbedsImages Areas
LinksPluginsScriptsStylesheets Imports
Rules
![Page 21: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/21.jpg)
Expert-IT - 2000 D-HTML - 21 -
DOM de MicrosoftWindow
DocumentTable Tbodies
Rows Cells
Forms Elements ButtonRadicCheckboxResetTextSubmitTextareaHiddenPasswordSelectOption
File
![Page 22: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/22.jpg)
Expert-IT - 2000 D-HTML - 22 -
DOM de Microsoft
Tous les éléments d'un document sont indexés: document.all[0].tagName donne "HTML" http://localhost/dhtml/ex/ex1/exdom0.htm
Quatre propriétés pour référencer le contenu d'un élément:
outerHTML : l'élément HTML complet y compris les tags HTML innerHTML : le contenu de l'élément HTML outerText : le contenu texte (diffère pour l'écriture de contenu) innerText : le contenu texte
![Page 23: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/23.jpg)
Expert-IT - 2000 D-HTML - 23 -
Exemples d'accès au DOM IE
<HTML>
<HEAD>
<TITLE>Essai d'accès au DOM IE</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function showEle() {
var tagList, i;
tagList = "";
for (i=0; i < document.all.length; i++) {
tagList += (document.all(i).tagName + " - " + document.all(i).id + "\n");
}
alert(tagList);
}
function changeEle() {
document.all.cell1.innerText = "Cell 1";
}
</SCRIPT>
![Page 24: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/24.jpg)
Expert-IT - 2000 D-HTML - 24 -
Exemples d'accès au DOM IE
<BODY>
<TABLE ID="theTable">
<TR>
<TD ID="cell1">Cellule 1</TD>
<TD>Cellule 2</TD>
</TR>
<TR>
<TD>Cellule 3</TD>
<TD>Cellule 4</TD>
</TR>
</TABLE>
<FORM>
<INPUT TYPE=BUTTON onClick="showEle();" VALUE="Affichage des Elements">
<INPUT TYPE=BUTTON onClick="changeEle();" VALUE="Modifier Element">
</FORM>
</BODY>
</HTML>
![Page 25: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/25.jpg)
Expert-IT - 2000 D-HTML - 25 -
DOM de Netscape
![Page 26: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/26.jpg)
Expert-IT - 2000 D-HTML - 26 -
Les DOM de Netscape et MS
Depuis la version de IE 4.0, le DOM de Microsoft expose tous les éléments et sont accessible dynamiquement via script (IE 5.0 offre encore plus de possibilités)
Netscape 4.0 expose moins d'éléments et supporte moins de fonctionnalités dynamiques. (voir NN 5 et projet GECKO)
![Page 27: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/27.jpg)
Expert-IT - 2000 D-HTML - 27 -
4. Différences actuelles entre NN et IE
Nestcape et Microsoft, dans la version 4.x de leur navigateur ont implémenté leur propre vue des technologies de D-HTML
A la fois pour des raisons de dates de disponibilité et de stratégie
Le futur devrait converger vers les standards avec IE 5 et Gecko/NN 5.0
![Page 28: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/28.jpg)
Expert-IT - 2000 D-HTML - 28 -
D-HTML et NN 4.x
CSS1 en majorité supporté Peu de support réellement dynamique pour le
changement des règles de style, NN ne réaffiche pas dynamiquement un élément dont le style à changer sans rafraichissement complet de la page
Pour dynamique, il faut utiliser la technique de 'hiding' pour masquer des éléments et ensuite les rendre à nouveau visible (par ex. : avec attribut CSS 'display : none') (voir exemples)
![Page 29: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/29.jpg)
Expert-IT - 2000 D-HTML - 29 -
D-HTML et NN 4.x
Possibilité de spécifier les règles de style en JavaScript:<STYLE TYPE="text/javascript">
tags.H1.marginleft = 20
</STYLE>
Support de CSS-P pour les éléments de type "conteneurs":<STYLE TYPE="text/css">
#item1 {position:absolute; top:50px; left:100px; }
</STYLE>
…
<DIV ID="item1><IMG ….></DIV>
![Page 30: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/30.jpg)
Expert-IT - 2000 D-HTML - 30 -
D-HTML et NN 4.x
Technique de layer unique à NN, utilisé pour créer, au sein d'un document, des conteneurs de document
Un layer se superpose au document de base Position, contenu et visibilité de chaque layer
indépendant des autres La fonction JS layer() permet de créer une nouvelle
couche dynamiquement Contenu de layer exprimé en HTML (une page en tant
que tel). Un layer dispose de son objet 'document' propre.
![Page 31: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/31.jpg)
Expert-IT - 2000 D-HTML - 31 -
D-HTML et NN 4.x
Possibilités en NN 4 de changement dynamique du contenu sans rechargement de page:
swap d'image changement du contenu d'un layer changement position d'un élément changement de la visibilité d'un élément
Captures d'événement avec propagation ou non Polices de caractères téléchargeables (bitstream
Truedoc)
![Page 32: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/32.jpg)
Expert-IT - 2000 D-HTML - 32 -
D-HTML et IE 4.x
IE4 offre des fonctionnalités de modification dynamique du contenu et des attributs de style d'éléments avec réaffichage automatique sans rechargement de page
Tous les éléments HTML du document sont accessibles et modifiables via script avec réaffichage
IE4 implémente CSS1 (+- 100%) et quelques aspects de CSS2
Support de CSS-P pour positionnement du contenu ou d'élément
![Page 33: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/33.jpg)
Expert-IT - 2000 D-HTML - 33 -
D-HTML et IE 4.x
Chaque élément dispose de ces 'event handler' (même les éléments sans interactivité directe avec l'utilisateur)
Les événements sont propagés de l'élément vers les éléments contenant avec capture possible et non-propagation
Attribut de style 'FILTER': pour rendu graphique d'élément pour effet de transition lorsqu'un élément devient visible
Polices de caractères téléchargeables (TrueType)
![Page 34: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/34.jpg)
Expert-IT - 2000 D-HTML - 34 -
Stratégie pour portabilité plate-forme
Redirection vers page non-DHTML ou page spécifique à type et version de navigateur
soit à partir de servlet (CGI ou autres) soit à partir de scripplet
Adaptation du code à l'intérieur de la page selon le navigateur Génération du code D-HTML côté serveur selon navigateur Développer des collections de fonctions génériques adaptées aux
versions des navigateurs Utilisation du commun dénominateur voir exemple
![Page 35: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/35.jpg)
Expert-IT - 2000 D-HTML - 35 -
5. Le langage JavaScript
![Page 36: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/36.jpg)
Expert-IT - 2000 D-HTML - 36 -
Javascript
JavaScript est un langage script destiné, au départ, à développer des scripplets s'exécutant dans des pages Web
Offre de nombreuses possibilités d'extensions ainsi que des contrôles sur les formulaires, d'enrichissement de l'interface utilisateur, gestion des événements, par exemple réagir à des événements tels qu'un changement de focalisation ou un clic de souris.
JavaScript permet des traitements qui s'exécutent du côté du client (le navigateur) sans intervention du serveur.
![Page 37: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/37.jpg)
Expert-IT - 2000 D-HTML - 37 -
Javascript
JavaScript n'est pas une variante de Java. JavaScript a été inventé par Netscape. Langage script utile pour écrire des séquences
d'instructions courtes et fonctionnellement limitées. JavaScript nécessite un environnement hôte (le
navigateur par exemple). Le code est embarqué dans la page HTML, est
interprété et exécuté par le navigateur compatible. Les navigateurs offrent une collection d'objets prédéfinis
exposant l'environnement d'exécution.
![Page 38: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/38.jpg)
Expert-IT - 2000 D-HTML - 38 -
Les versions de JavaScript
JavaScript 1.0 supporté par Navigator 2.0 JScript (version MS de JavaScript 1.0) par MS IE 3.0 (partiel et
instable) JavaScript 1.1 supporté par Navigator 3.0 JavaScript 1.1 rendu publique par Netscape et standardisé par
ECMA JScript 3.0 supporté par IE 4.0 annoncé comme respectant le
standard JavaScript 1.2 supporté par Navigator 4 (pas identique à ECMA,
apporte de nombreuses améliorations) Challenge d'écrire du code compatible pour les différents
navigateurs.
![Page 39: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/39.jpg)
Expert-IT - 2000 D-HTML - 39 -
Les outils pour JavaScript
Editeur de texte Outil de composition de pages HTML (Dreamweaver de
Macromédia, FrontPage de MS, autres) ScriptEase de Nombas JavaScript côté serveur avec Enterprise Server de
Netscape, IIS de MS, IntraBuilder de Inprise
![Page 40: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/40.jpg)
Expert-IT - 2000 D-HTML - 40 -
<HTML>
<HEAD><TITLE>Mon premier script en JavaScript!</ TITLE >
</HEAD>
<BODY>
<BR>Ceci est un document HTML classique.<BR>
<SCRIPT LANGUAGE="JavaScript">
document.write("Ceci provient de JavaScript!")
</SCRIPT>
<BR>
</BODY>
</HTML>
Javascript
![Page 41: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/41.jpg)
Expert-IT - 2000 D-HTML - 41 -
Première scripplet
La balise <SCRIPT> permet d'inclure à n'importe quel endroit du code JavaScript
L'attribut LANGUAGE permet de spécifier le language (utiles pour les versions, voir l'attribut TYPE également)
La ligne de code invoque la méthode "write()" de l'objet "document" de la "window" courante.
Ces objets et méthodes font partie du DOM et sont connues de l'environnement hôte qui est le navigateur.
![Page 42: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/42.jpg)
Expert-IT - 2000 D-HTML - 42 -
JavaScript embarqué
Le code JavaScript est généralement embarqué dans une page Possible d'intégrer autant de séquences de code que nécessaires
dans une même page HTML<script language="JavaScript"><!--document.write("Bonjour le monde!");//--></script>
L'attribut "language" est optionnel et défaut est défini par les paramètres du navigateur. Attribut utile pour indiquer la version du langage.
Les commentaires HTML <!-- … //--> évitent que le code s'affiche
dans des navigateurs ne supportant pas le JavaScript. (les commentaires de JS, //, évitent l'interprétation de -->)
![Page 43: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/43.jpg)
Expert-IT - 2000 D-HTML - 43 -
Code JavaScript dans fichier externe
L'attribut "SRC" permet de spécifier un fichier externe contenant le code, qui est une simple fichier texte contenant du code JavaScript :
<script src="fonctutil.js"></script>
L'attribut "LANGUAGE" n'est pas nécessaire.
Attribut supportée par Netscape >= 3 et MS IE >= 3.02
Serveur HTTP doit être configuré avec un type MIME "application/x-javascript" pour les fichiers avec extension
js. voir exemple exjs0a.htm
![Page 44: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/44.jpg)
Expert-IT - 2000 D-HTML - 44 -
Architecture de l'environnement du langage
Définition selon le standard ECMA Le langage et les objets natifs : ce sont les
fonctionnalités propres du langage ECMAScript Spécificités du constructeur : ajoutes et améliorations du
concepteur de l'environnement hôte liées au langage JavaScript mais non standard
Objets hôtes avec méthodes et propriétés : collections des objets permettant d'interagir à partir du langage avec l'environnement hôte (pour entrées-sorties, etc.)
![Page 45: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/45.jpg)
Expert-IT - 2000 D-HTML - 45 -
Grammaire JavaScript
Le grammaire JavaScript comme d'autres langages de programmation est composée des éléments suivants:
variables (var total) opérateurs, expressions (total < 200, stotal = total + 10) instructions (if (total > 200) { … ; }) objets (entités caractérisées par propriétés (attributs) et
comportement) fonctions (ensemble d'instructions regroupées)
![Page 46: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/46.jpg)
Expert-IT - 2000 D-HTML - 46 -
Variable JavaScript (1)
Une variable est caractérisée par un nom, un type et une valeur
Nom : débute par lettre ou _, suivi par lettres et chiffres JavaScript est sensible majuscule, minuscule Variable globale ou locale
![Page 47: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/47.jpg)
Expert-IT - 2000 D-HTML - 47 -
Variable JavaScript (1)
Variable globale définie à la première assignation n'importe où dans le code et accessible partout dans la page : nouvVar = 5; leNom = "Arthur";
Variable locale à une fonction avec le mot "var":function maFonction() {
var locVar = 1;
nouvVar = 10; // modif de la variable globale
}
![Page 48: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/48.jpg)
Expert-IT - 2000 D-HTML - 48 -
Type de données
Types reconnus en JavaScript: number = entier (0 ou 0x) ou réel boolean = True ou False string = chaîne de caractère entre ' ou '' object = objets (monObj = new Object();) null = pas de valeur undefined = créé mais non assigné
![Page 49: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/49.jpg)
Expert-IT - 2000 D-HTML - 49 -
Type de données
JavaScript n'est pas un langage fortement typé, il n'est pas nécessaire de spécifier le type de la variable à la déclaration et le type est converti à l'exécution du script.
Selon le type certaines opérations sont possibles ou non:
"5" + "10" donne "510"
5 + 10 donne 15
5 + "10" donne "510" (conversion de 5 en string)
"ab" * "cd" n'est pas supporté
![Page 50: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/50.jpg)
Expert-IT - 2000 D-HTML - 50 -
Opérateurs JavaScript (1)
Les opérateurs sont: arithmétique
+ - * / % ++ -- - comparaison
== != > >= < <= booléen
&& || ! >= < <= sur chaînes de caractère
"abc" + "def" assignation : = += -= *= /= &= |=
![Page 51: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/51.jpg)
Expert-IT - 2000 D-HTML - 51 -
Opérateurs JavaScript (2)
Opérateur conditionnel(condition) ? valeurVrai : valeurFausse
exemple:
prefer = (choix == 1) ? "rouge" : "vert"
opérateur typeofexemple:
if (typeof total == "number") …
JavaScript 1.2 (NS 4.0 et IE 4.0) supporte les expressions régulières qui permettent d'appliquer des recherches complexes de chaînes de caractères.
![Page 52: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/52.jpg)
Expert-IT - 2000 D-HTML - 52 -
Instructions en JavaScript
Instructions terminées par ; Plusieurs instructions possible sur une ligne Blocs d'instruction entre { et } (fonctions) Différentes structures possibles :
conditionnelles itératives commentaires
![Page 53: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/53.jpg)
Expert-IT - 2000 D-HTML - 53 -
Structures conditionnelles
switch (expression){ case label : instruction; break; case label : instruction; break; ... default : instruction;}
if (condition) { instruction1; }
else {instruction2; }
![Page 54: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/54.jpg)
Expert-IT - 2000 D-HTML - 54 -
Structures itératives
for (i=0; i<10; i++) { instructions; }
while (condition) {instructions; }
do // uniquement NS et MSIE 4.0 {instructions; }while (condition)
![Page 55: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/55.jpg)
Expert-IT - 2000 D-HTML - 55 -
Break et Continue
break : annule l'exécution de l'itération (ou d'un bloc) et sort de la boucle
while (i < 10)
{
if (condition)
break;
}
continue : annule l'exécution de l'itération et passe à l'itération suivante
while (i < 10)
{
if (condition)
continue;
}
![Page 56: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/56.jpg)
Expert-IT - 2000 D-HTML - 56 -
Commentaires
Commentaires sur une seule ligne :
// commentaire sur une seule ligne
…… // Commentaires sur plusieurs lignes :
/* commentaires sur
plusieurs lignes */
![Page 57: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/57.jpg)
Expert-IT - 2000 D-HTML - 57 -
Pseudo-URL "javascript:"
forme de l'URL: javascript:script
utilisation en interactif : spécifier dans le champ adresse du navigateur l'URLjavascript:alert("Hello World !")
comme action liée à un hyperlien ou un formulaire (pour tout attribut dont la valeur est un URL) :<A HREF="javascript:confirm('Voulez-vous
continuer')">Question</A>
![Page 58: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/58.jpg)
Expert-IT - 2000 D-HTML - 58 -
Définition de fonctions (1)
Une fonction regroupe des instructions sous un label. Une fonction peut être appelée à partir d'une autre
instruction à l'aide du nom. Une fonction peut prendre des arguments et retourner
une valeur.
![Page 59: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/59.jpg)
Expert-IT - 2000 D-HTML - 59 -
Définition de fonctions (2)
Syntaxe:function nomFonction (arg1, arg2)
{
…
return valeur;
}
En général, les fonctions sont déclarées entre les tags <HEAD>.
Passage des arguments par valeur
![Page 60: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/60.jpg)
Expert-IT - 2000 D-HTML - 60 -
<HTML>
<HEAD>
<TITLE>Fonctions en JavaScript (exjs2.htm)</TITLE>
<SCRIPT language="javascript">
function affMessage(message)
{
document.write("<B><BLINK>" + message + "<\/BLINK><\/B>")
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript">
affMessage("Bonjour le monde !")
</SCRIPT>
</BODY>
Exemple de fonctions
![Page 61: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/61.jpg)
Expert-IT - 2000 D-HTML - 61 -
<HTML>
<HEAD>
<TITLE>Fonctions en JavaScript (exjs3.htm)</TITLE>
<SCRIPT language="javascript">
function mult(a,b)
{
var prod;
prod = a * b;
return prod;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript">
document.write("Le résultat de 3 * 4 est " + mult(3,4))
</SCRIPT>
</BODY>
Exemple de fonctions
![Page 62: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/62.jpg)
Expert-IT - 2000 D-HTML - 62 -
Dialoguer avec l'utilisateur
JavaScript propose 3 fonctions pré-définies pour dialoguer avec l'utilisateur:
alert() : qui affiche un message avec bouton 'ok' confirm() : qui affiche un message avec bouton 'ok' ou 'cancel' et
retourne True ou False prompt(): qui affiche un message avec une zone de texte et
retourne la valeur introduite
![Page 63: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/63.jpg)
Expert-IT - 2000 D-HTML - 63 -
Exemples de dialogues
<HTML>
<HEAD>
<TITLE>Exemples de dialogue (exjs4.htm)</TITLE>
</HEAD>
<BODY>
<SCRIPT language="javascript">
var fin=false;
var nom;
while (! fin)
{
nom=prompt("Introduisez votre nom :", "");
alert("Votre nom est " + nom);
if (! confirm("Voulez-vous continuer " + nom + " ?"))
fin = true;
}
document.write("Fin du traitement");
</SCRIPT>
</BODY>
![Page 64: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/64.jpg)
Expert-IT - 2000 D-HTML - 64 -
Gestion des événements (1)
Les événements sont des actions qui surviennent dans le contexte du navigateur : clic de bouton, passage du curseur, focus sur un champ d'un formulaire, changement dimension fenêtre…
Il est possible d'associer l'exécution de code JavaScript à l'occurrence de tel ou tel événement par la déclaration d'un gestionnaire d'événement (event handler)
La déclaration du code JavaScript à exécuter se fait par l'intermédiaire d'attribut spécifique de certains tag HTML:
<TAG ATTR=VAL onEventName="code JS ;">
![Page 65: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/65.jpg)
Expert-IT - 2000 D-HTML - 65 -
HTML>
<HEAD>
<TITLE>Gestion d'événement (exjs6.htm)</TITLE>
<SCRIPT language="javascript">
function popupConfirm()
{
confirm("Voulez-vous continuer ?")
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="" onMouseOver="popupConfirm();" STYLE="color:red;text-decoration:none">Voulez-vous continuer</A>
</BODY>
Gestion des événements (2)
![Page 66: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/66.jpg)
Expert-IT - 2000 D-HTML - 66 -
Gestion des événements (3)
L'ensemble des événements supportés et les éléments pour lesquels ils sont supportés ne dépendent pas du langage JavaScript mais de l'environnement hôte (le navigateur).
Concernant les événements, Navigator et IE diffèrent (par ex., IE supporte onMouseOver sur image et pas Navigator 4)
![Page 67: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/67.jpg)
Expert-IT - 2000 D-HTML - 67 -
Evénements les plus utilisés
Evénement Survient quand... Event Handler
abort Arrêt du chargement par l'utilisateur onAbort
click Clic sur élément de formulaire ou lien onClick
change Changement valeur éléments text, textarea, select onChange
focus Focus sur élément formulaire onFocus
blur Perte focus d'élément formulaire onBlur
errorUne erreur survient lors du chargement d'une page ou d'uneimage
onError
mousemove Déplacement pointeur souris onMouseMove
mouseover Déplacement pointeur souris sur un élément onMouseOver
mouseout Déplacement pointeur souris hors d'un élément onMouseOut
![Page 68: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/68.jpg)
Expert-IT - 2000 D-HTML - 68 -
Evénements les plus utilisés
Evénement Survient quand... Event Handler
move Déplacement de la fenêtre du navigateur onMove
select Sélection d'élément formulaire onSelect
submit Soumission d'un formulaire onSubmit
resize Changement dimension fenêtre onResize
reset Reset d'un formulaire onReset
load Chargement de la page dans le navigateur onLoad
unload Page quittée onUnload
![Page 69: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/69.jpg)
Expert-IT - 2000 D-HTML - 69 -
Méthodes d'enregistrement des event handler
Méthodes d'enregistrement d'un event handler : via les balises HTML, dans ce cas on peut associer une séquence
d'instructions JavaScript via les objets du modèle objets du document, en utilisant le nom de
l'événement comme propriété à laquelle on associe le nom d'une fonction (attention, ne marche pas avec onsubmit, l'action associée au formulaire est générée même si false)
Lorsqu'un event handler retourne une valeur booléenne 'false', l'action liée à certains éléments HTML n'est pas effectuée:
lien avec autre page soumission d'un formulaire changement d'un champ
![Page 70: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/70.jpg)
Expert-IT - 2000 D-HTML - 70 -
Exemple gestion d'événement
<HTML>
<HEAD>
<SCRIPT>
function verifNum(obj) {
if (isNaN(obj.value)) {
alert("Une valeur numérique, svp !");
return false;
}
else {
return true;
}
}
function verif()
{
alert('Valeur du champ: "' + this.value + '"\n!');
}
</SCRIPT>
</HEAD
![Page 71: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/71.jpg)
Expert-IT - 2000 D-HTML - 71 -
Exemple gestion d'événement
<BODY>
Page de contrôle des champs.
Remplissez un champ, puis appuyez sur la touche TABULATION.<BR>
<FORM NAME="maform"> Introduisez une valeur numérique:
<INPUT TYPE="text" NAME="un" onChange="return(verifNum(this));">
<BR> Champ 2:<INPUT TYPE="text">
<BR> Champ 3:<INPUT TYPE="text" NAME="trois">
</FORM>
<SCRIPT>
document.maform[1].onchange=verif;
document.maform.trois.onchange=verif;
</SCRIPT></BODY></HTML>
![Page 72: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/72.jpg)
Expert-IT - 2000 D-HTML - 72 -
L'utilisation de Timer
La fonction JavaScript setTimeout() permet d'enregistrer une fonction
Cette fonction est invoquée suite à un intervalle de temps exprimé en millisecondes
Syntaxe:setTimeout('fct()', 10000);
![Page 73: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/73.jpg)
Expert-IT - 2000 D-HTML - 73 -
Gestion d'erreur
Avec Netscape Navigator, le gestionnaire onError peut être défini
Associé avec la balise IMG Utilisé avec le mot réservé onError :
onerror = null; onerror = trtErreur;
http://localhost/dhtml/ex/js/exevt2.htm
![Page 74: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/74.jpg)
Expert-IT - 2000 D-HTML - 74 -
Les événements supportés par les navigateurs NS et IE
URL des documents présentant les événements supportés par chaque navigateur:
http://msdn.microsoft.com/workshop/author/dhtml/reference/events.asp#om40_event
http://developer.netscape.com/docs/manuals/communicator/jsguide4/evnt.htm#1010636
![Page 75: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/75.jpg)
Expert-IT - 2000 D-HTML - 75 -
Les tableaux en JavaScript
Un tableau peut être vu comme une liste de variables numérotées accessible avec le même nom et le numéro.
JavaScript supporte des structures de tableau :couleurs = new Array(10);
// définition d'un tableau de 10 éléments
couleurs[0] = "jaune";
couleurs[1] = 2;
couleurs[10] = "vert"; lgTabl = couleurs.length;
// tableau débute à 0 et mixte de type possible, extension automatique, propriété length = nombre éléments
![Page 76: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/76.jpg)
Expert-IT - 2000 D-HTML - 76 -
JavaScript et l'objet (1)
Un objet peut être vu comme la représentation informatique d'une entité caractérisée par des propriétés (attributsà et un comportement (les méthodes):fenetre = new Object(); // définition de l'objet
fenetre.couleur = "rouge"; // propriété de l'objet
fenetre.ouvrir(); // méthode de l'objet
JavaScript supporte la création et l'utilisation d'objet. Un ensemble d'objets pré-définis existent, repris par
le DOM du navigateur.
![Page 77: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/77.jpg)
Expert-IT - 2000 D-HTML - 77 -
JavaScript et l'objet (2)
<HTML>
<HEAD>
<TITLE>Exemple d'objet (exjs7.htm)</TITLE>
</HEAD>
<BODY>
<SCRIPT language="javascript">
function calculerAire()
{
return this.largeur * this.hauteur;
}
monRect = new Object();
monRect.largeur = 8.5; monRect.hauteur = 11;
monRect.calculerAire= calculerAire;
document.write("L'aire du rectangle = " + monRect.calculerAire())
</SCRIPT>
</BODY>
![Page 78: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/78.jpg)
Expert-IT - 2000 D-HTML - 78 -
Création d'objet avec constructeur
Un constructeur est une fonction qui 'construit' un objet, c'est à dire principalement initialise les propriétés et effectuent tous les traitements préalables à l'utilisation d'un objet :
<SCRIPT>
function Rectangle(l, h)
{
this.largeur = l; // this est un mot réservé référençant
this.hauteur = h; // l'objet courant
}
rect1 = new Rectangle(10, 20)
</SCRIPT>
![Page 79: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/79.jpg)
Expert-IT - 2000 D-HTML - 79 -
La propriété "prototype"
La propriété "prototype" permet de définir des attributs pour chaque objet
Cette définition se passe en dehors du constructeur et permet d'initialiser par défaut certains attributs
<SCRIPT>
function Rectangle(l, h)
{
this.largeur = l; // this est un mot réservé référençant
this.hauteur = h; // l'objet courant
}
Rectangle.prototype.nom = "Rectangle";
rect1 = new Rectangle(10, 20);
document.write(rect1.nom);
</SCRIPT>
![Page 80: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/80.jpg)
Expert-IT - 2000 D-HTML - 80 -
Manipulation d'objet
Structure permettant de consulter toutes les propriétés (ou attributs) d'un objet
http://localhost/dhtml/ex/js/exobj1.htm<HTML>
<HEAD>
<TITLE>Affiche des propriétés de document (exjs1.htm)</TITLE>
</HEAD>
<BODY>
<SCRIPT language="javascript">
<!--
for (var prop in document)
{
document.write(prop + "<BR>")
}
//-->
</SCRIPT>
![Page 81: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/81.jpg)
Expert-IT - 2000 D-HTML - 81 -
with
'with' est un raccourci pour nommer les objetswith (objet)
{ instructions; }
// le nom de l'objet est ajouté à toutes propriétés
![Page 82: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/82.jpg)
Expert-IT - 2000 D-HTML - 82 -
Objets pré-définis (1)
Objet Date:var maDate = new Date()
document.write("Date et heure " + maDate + "<BR>")
document.write("Date et heure GMT " + maDate + "<BR>") Objet String:
var str = "Dans quel état j'erre ?"
document.write(str.charAt(0) + "<BR>")
document.write(str.big() + "<BR>")
document.write(str.indexOf("état", 0) + "<BR>")
document.write(str.substring(5,9) + "<BR>")
document.write(str.toUpperCase() + "<BR>")
![Page 83: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/83.jpg)
Expert-IT - 2000 D-HTML - 83 -
Objets pré-définis (2)
![Page 84: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/84.jpg)
Expert-IT - 2000 D-HTML - 84 -
Objets pré-définis (3)
Objet navigator qui retourne des informations sur le navigateur:
document.write(navigator.appCodeName + "<BR>")
document.write(navigator.appName + "<BR>")
document.write(navigator.appVersion + "<BR>")
document.write(navigator.language + "<BR>")
![Page 85: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/85.jpg)
Expert-IT - 2000 D-HTML - 85 -
Objets pré-définis (4)
Objet screen qui renseigne sur les capacités écran:document.write(screen.colorDepth + "<BR>")
document.write(screen.height + " en pixels <BR>")
document.write(screen.width + "en pixels <BR>")
![Page 86: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/86.jpg)
Expert-IT - 2000 D-HTML - 86 -
Objets pré-définis (5)
Objet window représente l'actuelle fenêtre du navigateur, il est possible de créer de nouvelles fenêtresvar maFen = window.open();
maFen.document.open();
maFen.document.bgColor="#FFFFFF";
window.document.write("Fenêtre originale !");
maFen.document.write("Nouvelle fenêtre !");
![Page 87: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/87.jpg)
Expert-IT - 2000 D-HTML - 87 -
Objets pré-définis (6)
![Page 88: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/88.jpg)
Expert-IT - 2000 D-HTML - 88 -
6. CSS - Cascading Style Sheets
Introduction au CSS, langage de définition de feuilles de style traitées en cascade
![Page 89: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/89.jpg)
Expert-IT - 2000 D-HTML - 89 -
Feuilles de style
Cascading style sheets (CSS), feuilles de style en cascade
CSS est un langage de définition de style Une feuille de style est une collection de règles de style
s'appliquant sue les éléments d'un document. utilisation d'une ou plusieurs feuilles de style pour
spécifier les caractéristiques de mise en page d'un document HTML
lorsque plusieurs feuilles de style sont spécifiées, le traitement se fait en cascade.
![Page 90: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/90.jpg)
Expert-IT - 2000 D-HTML - 90 -
Feuilles de style
Problèmes de mise en page en HTML: utilisation de techniques complexe, lourdes qui relèvent plus du
bricolage (tableau, image transparente, graphiques, Javascript, applet Java,.)
Résultats :– tous les éléments extra doublent la taille des pages– usage intensif de graphiques pour garantir la qualité des résultats– problème de maintenance par manque de lisibilité du code HTML– utilisation intensive de code (Javascript, VBScript) pour donner des
effets ce qui augmente la complexité et rend plus difficile la maintenance
– maintenance très complexe pour des sites de moyen ou gros volumes avec des structures complexes et de nombreuses pages
![Page 91: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/91.jpg)
Expert-IT - 2000 D-HTML - 91 -
Feuilles de style - Intro
La technique de feuille de style offre des fonctionnalités puissantes de mise en page mieux adaptées aux besoins des sites Web actuels.
Toutes les informations sur les styles sont stockées dans un fichier à part du ou des documents sur lesquels ils s'appliquent.
![Page 92: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/92.jpg)
Expert-IT - 2000 D-HTML - 92 -
Feuilles de style - Intro
Avantages des feuilles de style : réduction de la taille des pages diminution des besoins de graphiques facilite la maintenance
Attention : uniquement compatible avec navigateurs Netscape Communicator >= 4.0 et Internet Explorer >= 4.0.
![Page 93: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/93.jpg)
Expert-IT - 2000 D-HTML - 93 -
Feuilles de style - Intro
Origine: instruction manuelle de l'éditeur à l'imprimeur pour la fabrication
d'un manuscrit
Dans un contexte Web, technique de feuille de style consiste à regrouper les instructions de mise en page soit dans le document HTML, soit dans un document à part référencé dans un ou plusieurs autres documents HTML.
Le fichier "feuille de style" référencé est obtenu par le navigateur auprès du serveur Web.
Le navigateur interprète les spécifications de mise en page et les appliquent aux différentes parties du texte.
![Page 94: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/94.jpg)
Expert-IT - 2000 D-HTML - 94 -
Feuilles de style - Standard
Le consortium World Wide Web (W3C), organisme quasiment officiel sponsorisé par les acteurs les plus importants du marché (Microsoft, Sun, Oracle, SAP, ...) assure le contrôle et la standardisation des normes et technologies utilisées dans le contexte Web en Internet.
Les navigateurs les plus populaires (IE et NC) supportent plus ou moins les normes CSS1 promulguées par le W3C.
La norme CSS2 date de mai 1998 et n'est pas encore supportée par les versions actuelles des navigateurs :
IE4 supporte quelques unes des nouvelles propriétés mais pas 100%
![Page 95: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/95.jpg)
Expert-IT - 2000 D-HTML - 95 -
Feuille de style - Exemple (1)<HTML><HEAD><TITLE> Exemple de page HTML avec style </TITLE><STYLE>H1,H2{font-size:32pt;color:#FF0000;text-align:center;}P{font: 16pt Arial;color:blue;}DIV{font: 12pt Sans-serif;color:yellow;}</STYLE></HEAD>
![Page 96: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/96.jpg)
Expert-IT - 2000 D-HTML - 96 -
Feuille de style - Exemple (2)<BODY>Texte normal<H1>En-tête de niveau 1</H1>En rouge, 32 point et centré<H2>En-tête de niveau 2</H2>En rouge, 32 point et centré<H3>En-tête de niveau 2</H3>Avec valeurs par défaut, certainement noir, 12 point et aligné gauche.<P>Texte entre paragrapheEn bleu, 16 point et Arial</P><DIV>Division de texte permettant de structurer le document en division.En jaune, 12 point et sans-serif</DIV></BODY></HTML>
![Page 97: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/97.jpg)
Expert-IT - 2000 D-HTML - 97 -
Feuille de style - Exemple (3)
![Page 98: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/98.jpg)
Expert-IT - 2000 D-HTML - 98 -
HTML et style
HTML est un mélange de marquage (tag, balise) de style, de sémantique, et de structuration:
le style règle la mise en page la structuration définit les différents composants du texte (en-
tête, paragraphe,…) la sémantique renseigne sur le contenu de telle ou telle partie du
texte
Evolution d'HTML tente de limiter le langage à une structuration du contenu sans spécification de style.
CSS concerne principalement le marquage de style.
![Page 99: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/99.jpg)
Expert-IT - 2000 D-HTML - 99 -
Balises de style en HTML
Principalement 2 catégories et les attributs : structuration en éléments avec formatage du document et des
éléments: <P>, <BR>, <CENTER>, <H1>,… formatage de texte et sélection de police: <B>, <I>, <PRE>,
<FONT …>, … attributs de style avec balises: BGCOLOR, BACKGROUND,
TEXT, ALIGN, BORDER, SPACING, HEIGHT, WIDTH
![Page 100: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/100.jpg)
Expert-IT - 2000 D-HTML - 100 -
Positionnement de texte en HTML
En HTML, le positionnement de texte a toujours été complexe et nécessite des techniques détournées
<TABLE> avec cellule vide dimensionnée une image d'un seul pixel utilisée avec attribut WIDTH,
HSPACE ou VSPACE pour créer les bords de dimensions nécessaires
utilisation de graphique qui rend le chargement des pages lourd.
![Page 101: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/101.jpg)
Expert-IT - 2000 D-HTML - 101 -
Style en HTML et feuille de style
Les balises HTML sont reconnues comme des indicateurs d'activation ou de désactivation de formatage
Il existe une différence importante entre HTML et le langage CSS qui utilise la notion de bloc. Un texte est toujours composé de blocs de contenu. Les règles de style s'applique en fonction des blocs référencés.
![Page 102: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/102.jpg)
Expert-IT - 2000 D-HTML - 102 -
Avantages CSS vs HTML
Gain de productivité, code HTML plus simple à écrire Réduction du temps de chargement des pages Plusieurs pages peuvent partager la même feuille de
style Maintenance et adaptation facilitée Séparation du travail de rédaction et de mise en page
![Page 103: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/103.jpg)
Expert-IT - 2000 D-HTML - 103 -
CSS en pratique (1)
Style sheet dans un contexte Web : ensemble de règles prises en compte par l'agent de l'utilisateur, habituellement un navigateur, pour la mise en page d'un document HTML.
Cascading : plus d'une feuille de style et/ou ensemble de règles peuvent s'appliquer à un même document et aux éléments du document. Le traitement se fait en cascade.
![Page 104: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/104.jpg)
Expert-IT - 2000 D-HTML - 104 -
CSS en pratique (2)
CSS1, première version du langage de définition des règles de style
langage disponible à partir de décembre 1996 langage principalement destiné aux règles de mise en
page supporté en partie par Netscape Communicator 4 et plus
complèetement par Internet Explorer 4 (en raison des dates de développement des navigateurs et à l'exception de rares propriétés non implémentées et de bugs)
CSS-P, langage concernant le positionnement d'élément
![Page 105: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/105.jpg)
Expert-IT - 2000 D-HTML - 105 -
CSS en pratique (3)
CSS2, deuxième version langage disponible à partir de mai 1998 ajouts :
règles de style spécifique à certains média (imprimante, périphérique braille, …)
polices téléchargeables layout des tables, internationalisation, compteur et numérotation
non encore supporté par les navigateurs les plus populaires
![Page 106: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/106.jpg)
Expert-IT - 2000 D-HTML - 106 -
Définition des règles (1)
<HTML><HEAD><STYLE TYPE="text/css">BODY{color:red;}</STYLE></HEAD><BODY>Bonjour le monde (en rouge) !</BODY></HTML>
![Page 107: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/107.jpg)
Expert-IT - 2000 D-HTML - 107 -
Balises pour spécification règles de style internes au document:<STYLE>….</STYLE>
Entre ces balises, définition des règles de style:
BODY { color : red ; }
Définition des règles (2)
sélecteur
déclaration
propriété valeur
![Page 108: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/108.jpg)
Expert-IT - 2000 D-HTML - 108 -
Définition des règles (3)
Une règle est composée en 2 parties: un ou plusieurs éléments du document, déclarés à l'aide de
sélecteur, sur lesquels s'appliquent les règles de style une ou plusieurs déclarations de style, comprenant un attribut
assigné à une valeur
Un attribut est une propriété, en général visible d'un élément du document (margin-left, font-family, text-transform, …)
':' est l'opérateur d'assignation et ';' sépare les déclarations les valeurs sont des litéraux exprimés dans certains cas
avec une référence d'unité (pt, px)
![Page 109: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/109.jpg)
Expert-IT - 2000 D-HTML - 109 -
Définition des règles suivant la syntaxe JavaScript
La définition des règles de style en langage JavaScript est supporté uniquement par Netscape Navigator Exemple :<STYLE TYPE="text/javascript">
tags.H1.color = "red"
tags.H1.textTransform = "capitalize"
tags.P.color = "blue"
</STYLE>
L'avantage est l'utilisation du langage JavaScript à l'intérieur de balise <STYLE> (utilisation de 'with', structure itérative et alternative, etc…)
![Page 110: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/110.jpg)
Expert-IT - 2000 D-HTML - 110 -
Comportement du navigateur
Le navigateur dispose d'un ensemble de valeurs par défaut pour la mise en page des documents HTML (paramétrables par l'utilisateur)
Le navigateur interprète les règles spécifiées en CSS et ces règles viennent modifier les valeurs par défaut pour le document auquel elles s'appliquent. D'autres règles en cascade, peuvent par la suite encore modifier le comportement du navigateur.
![Page 111: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/111.jpg)
Expert-IT - 2000 D-HTML - 111 -
Outils pour les CSS
La plupart des navigateurs supportent les tags <STYLE> et les CSS
HotMetal Pro Softquad FrontPage 98 BeyondPress de Astrobytes DreamWeaver de Macromédia ...
![Page 112: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/112.jpg)
Expert-IT - 2000 D-HTML - 112 -
Localisation des règles de formatage (1)
Les règles de formatage peuvent : être spécifiées à l'intérieur du document HTML (in-
document) être reprises dans un fichier externe ".css" référencé être spécifiées à l'aide de l'attribut "STYLE" supporté
par la plupart des balises HTML (in-line) La technique à utiliser dépend des besoins de séparer le
contenu du style de présentation.
![Page 113: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/113.jpg)
Expert-IT - 2000 D-HTML - 113 -
Localisation des règles de formatage (2)
Règles de formatage interne au document
<HTML><HEAD><STYLE TYPE="text/css">BODY{color:red;}</STYLE></HEAD><BODY>Bonjour le monde (en rouge) !</BODY></HTML>
![Page 114: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/114.jpg)
Expert-IT - 2000 D-HTML - 114 -
Localisation des règles de formatage (3)
Règles de formatage dans un fichier externe avec LINK <HTML>
<HEAD></HEAD><LINK REL="stylesheet" TYPE="text/css" HREF="lestyle.css"><BODY>Bonjour le monde (en rouge) !</BODY></HTML>
fichier lestyle.css (qui ne reprend pas de balises <STYLE>):BODY {color:red;}
![Page 115: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/115.jpg)
Expert-IT - 2000 D-HTML - 115 -
Localisation des règles de formatage (4)
Règles de formatage dans un fichier externe avec @import (at-rules reprises dans CSS2 et supporté uniquement par IE4):
…<STYLE TYPE="text/css">
@import url(styles/lestyle.css)</STYLE>...
![Page 116: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/116.jpg)
Expert-IT - 2000 D-HTML - 116 -
Localisation des règles de formatage (5)
Règles de formatage 'inline'
<HTML><HEAD></HEAD><BODY STYLE="color:red;">Bonjour le monde (en rouge) !</BODY></HTML>
![Page 117: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/117.jpg)
Expert-IT - 2000 D-HTML - 117 -
CSS et navigateurs non compatible
Les navigateurs ne supportant pas les CSS affichent tel quel les règles de style.
Il est conseiller de mettre les règles dans la section <HEAD> entre balise style pour ne pas qu'elles soient affichées ou en commentaire.
![Page 118: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/118.jpg)
Expert-IT - 2000 D-HTML - 118 -
CSS et navigateurs non compatible
<HTML><HEAD></HEAD><BODY><STYLE TYPE="text/css"><!-DIV{color:red;}-></STYLE> Bonjour le monde (en rouge) !</BODY></HTML>
![Page 119: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/119.jpg)
Expert-IT - 2000 D-HTML - 119 -
Tags <DIV> et <SPAN>
Le tag <DIV> en 3.2 était destiné à faciliter l'alignement:<DIV align="right">…</DIV>
En HTML 4.0, avec CSS, l'utilité du tag <DIV> s'est diversifiée.
Un nouveau tag, <SPAN> permet de définir un élément au sein d'une ligne
<DIV> et <SPAN> permettent de structurer les différents éléments d'un document sans effets sur la mise en page (au contraire de <P>).
![Page 120: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/120.jpg)
Expert-IT - 2000 D-HTML - 120 -
Tags <DIV> et <SPAN>
<DIV> permet de structurer des blocs de texte tandis que <SPAN> se rapporte plutôt à des partie de ligne de texte. <SPAN> ne peut pas s'appliquer à un groupe d'éléments.
Par le mécanisme des CSS, on applique sur les éléments structurés des styles pré-définis.
![Page 121: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/121.jpg)
Expert-IT - 2000 D-HTML - 121 -
Formes de règles de style (1)
1 sélecteur et 1 déclaration Select { prop : valeur; }
+ sélecteurs et +déclarations
Sel1, sel2 {Prop1 : valeur;Prop2 : valeur;}
Sélecteur et déclarationavec + valeurs
Sel { prop : val1 val2; }
Sélecteur contextuel etdéclaration
Sel1 Sel2 { prop : valeur; }
![Page 122: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/122.jpg)
Expert-IT - 2000 D-HTML - 122 -
Formes de règles de style (2)
Body { color : red;}
H1,H2 {font-size:32pt;text-align:center;}P{ font : italic bold 12pt Arial, sans-serif; }
DIV EM { font_style : italic; }
![Page 123: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/123.jpg)
Expert-IT - 2000 D-HTML - 123 -
Blocs de texte ou élément (1)
un bloc ou un élément est une balise ouvrante, une balise fermante et tout ce qui se trouve entre ces balises. Les éléments peuvent être imbiqués....
<I> .....</I>
<DIV> <P> .... <I> ....</I> </P> </DIV>
<P> <I> .... </I> </P>
...
![Page 124: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/124.jpg)
Expert-IT - 2000 D-HTML - 124 -
Les éléments imbriqués sont dits "enfant" des éléments imbriquant.
La hiérarchie de l'exemple précédent:BODY
I
DIV
P
I
P
I
Blocs de texte ou élément (2)
![Page 125: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/125.jpg)
Expert-IT - 2000 D-HTML - 125 -
Pour distinguer les différents niveaux pour la spécification des règles de style.I { ... }
DIV P { ... }
DIV P I { ... }
P {...}
P I { ... }
Blocs de texte ou élément (2)
![Page 126: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/126.jpg)
Expert-IT - 2000 D-HTML - 126 -
Exemple de blocs imbriqués (1)
<HTML><HEAD><TITLE> Exemple d'éléments imbriqués (ex5inttech) </TITLE><STYLE>P{font:14pt 'Times New Roman',serif;color:black;}DIV{color:red;font:italic bold 12pt Arial,sans-serif;}EM{color:red;}/*l'espace joue la rôle de séparateur (ascii32)*/DIV EM{font-style:normal;color:green;}</STYLE></HEAD>
![Page 127: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/127.jpg)
Expert-IT - 2000 D-HTML - 127 -
Exemple de blocs imbriqués (2)
<BODY>Ce texte <EM>emphasé</EM> est dans le body.<P>Ce texte <EM>emphasé</EM> est dans un bloc <P>.</P><DIV>Ce texte <EM>emphasé</EM> est dans un bloc <DIV>.</DIV></BODY></HTML>
![Page 128: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/128.jpg)
Expert-IT - 2000 D-HTML - 128 -
Exemple de blocs imbriqués (3)
![Page 129: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/129.jpg)
Expert-IT - 2000 D-HTML - 129 -
Héritage des propriétés
Les éléments dits "enfants" héritent des propriétés de leurs parents. http://localhost/dhtml/ss/ex6inttech.htm et différence entre <P> et <DIV>)
<BODY><DIV>
<P></P>
</DIV><P>
<DIV><P></P>
</DIV></P>
</BODY>
BODYDIV
PP
DIVP
Hiérarchie d'héritage
![Page 130: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/130.jpg)
Expert-IT - 2000 D-HTML - 130 -
Traitement en cascade (1)
Les règles de style provenant du serveur (référencées par le concepteur de la page) sont prioritaires par rapport aux règles de style du client (sauf si les préferences du navigateur spécifie un comportement différent).
Les dernières règles de style rencontrées sont prioritaires par rapport aux précedentes
Possibilité de détourner les priorités avec le paramètre !importantP{font-weigth:bold !important;}
![Page 131: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/131.jpg)
Expert-IT - 2000 D-HTML - 131 -
Traitement en cascade (2)
<HTML><HEAD><TITLE>Exemple de traitement en cascade (ex7inttech)</TITLE><STYLE TYPE="text/css">DIV{color:yellow !important;font-size:44pt;}</STYLE><LINK REL="stylesheet" TYPE="text/css" HREF="ex7inttech.css"></HEAD><BODY><DIV>Un premier traitement!</DIV><DIV STYLE="color:blue; font-size:32pt;"> Un second traitement!!</DIV> </BODY></HTML>
/* fichier ex7inttech.css */DIV{font-size:24pt;color: red;}
![Page 132: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/132.jpg)
Expert-IT - 2000 D-HTML - 132 -
Traitement en cascade (3)
![Page 133: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/133.jpg)
Expert-IT - 2000 D-HTML - 133 -
Classe de sélecteur (1)
CSS prévoit la déclaration de classes de sélecteur avec réutilisation de cette classe en attribut de styleDIV.maclasse {
…
}
.autreclasse {
…
}
…
<DIV CLASS="maclasse"> … </DIV>
<P CLASS="autreclasse">…</P>
![Page 134: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/134.jpg)
Expert-IT - 2000 D-HTML - 134 -
Classe de sélecteur (2)
<HTML><HEAD><TITLE> Exemple de classe de sélecteur (ex8inttech) </TITLE><STYLE>DIV.professeur{font-style:normal; font-weight:bold; color:blue;}DIV.élève{font-style:italic; font-weight:bold; color:green}</STYLE></HEAD><BODY><H1>Extrait de "La leçon" de Ionesco</H1><DIV CLASS="professeur">Le Professeur. Prenons des exemples plus simples. Si vous aviez eu deux nez, et je vous en aurais arraché un... combien vous en resterait-il maintenant</DIV><BR><DIV CLASS="élève">L'élève.Aucun</DIV></BODY></HTML>
![Page 135: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/135.jpg)
Expert-IT - 2000 D-HTML - 135 -
Classe de sélecteur (3)
![Page 136: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/136.jpg)
Expert-IT - 2000 D-HTML - 136 -
Sélecteur ID
CSS permet de définir de manière unique un sélecteur via un attribut ID.
La définition : #abc123 { règles...; } L'utilisation : <SPAN id="abc123" ...> Usage : avec CLASS permet de structurer les éléments
en classe et en entité.
![Page 137: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/137.jpg)
Expert-IT - 2000 D-HTML - 137 -
Pseudo-Elément (1)
CSS permet également de définir des règles de style pour des parties d'éléments par la technique des pseudo-éléments.
Syntaxe et types de pseudo-éléments:Sel:first-line{règles...;}
Sel:first-letter{règles...;}
![Page 138: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/138.jpg)
Expert-IT - 2000 D-HTML - 138 -
Pseudo-Elément (2)
Les pseudo-éléments sont actuellement non-supportés par les navigateurs les plus populaires
![Page 139: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/139.jpg)
Expert-IT - 2000 D-HTML - 139 -
Boxes ou boîte de texte (1)
CSS permet de spécifier des règles de style pour des éléments contenant du texte, de manière à gérer ces éléments comme des boîtes de texte.
Les propriétés de base sont:
Textepadding
border
margin
![Page 140: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/140.jpg)
Expert-IT - 2000 D-HTML - 140 -
Exemple de boîtes (2)
<HTML><HEAD><TITLE> Exemple de boîte de texte (ex9inttech) </TITLE><STYLE>DIV{font: italic bold 12pt Arial;color:blue;margin:20px;padding:10px;border:solid red;}DIV P{font: normal bold 12pt Arial;color:black;border:solid yellow;}</STYLE></HEAD>
![Page 141: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/141.jpg)
Expert-IT - 2000 D-HTML - 141 -
Exemple de boîtes (3)
<BODY>Texte sans style<DIV>Texte entre <DIV></DIV><P>Texte entre <P> sans règle de style</P><DIV>Texte entre <DIV><P>Texte entre <P> héritant de <DIV> avec règle de style</P></DIV></BODY></HTML>
![Page 142: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/142.jpg)
Expert-IT - 2000 D-HTML - 142 -
Exemple de boîtes (3)
![Page 143: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/143.jpg)
Expert-IT - 2000 D-HTML - 143 -
Exemples d'utilisation de CSS
![Page 144: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/144.jpg)
Expert-IT - 2000 D-HTML - 144 -
Exemples d'utilisation de CSS
![Page 145: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/145.jpg)
Expert-IT - 2000 D-HTML - 145 -
Exemples d'utilisation de CSS
![Page 146: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/146.jpg)
Expert-IT - 2000 D-HTML - 146 -
7. Mise en pratique du D-HTML
Positionnement d'élément Référencement des attributs positionnables La fonction eval() et l'attribut 'float' La génération dynamique de contenu
![Page 147: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/147.jpg)
Expert-IT - 2000 D-HTML - 147 -
Positionnement d'éléments
CSS-P faisant partie de CSS1 et 2, concerne le positionnement d'élément
Les attributs CSS sont : position, left, top, …
L'attribut 'position' : absolute : élément devient un élément positionnable relative : élément peut garder ou changer de position, il crée un
contexte de positionnement pour des éléments imbriqués static élément non-positionnable un élément est toujours positionné par rapport à un contexte de
positionnement (par défaut le document courant, le coin gauche supérieure représente les coordonnées 0,0)
![Page 148: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/148.jpg)
Expert-IT - 2000 D-HTML - 148 -
Positionnement d'éléments
Chaque élément avec style 'position' devient un élément positionnable
L'attribut 'left' permet de définir le déplacement par rapport à l'extrémité gauche (x), l'attribut 'top' permet de définir le déplacement par rapport à l'extrémité du haut (y)
Par exemple :<DIV ID="theDIV" STYLE="position:absolute; left:50; top:100">
Ceci est du texte avec une marge de gauche de 50 et de haut de 100.
</DIV>
Chaque élément contenant crée un contexte de position pour les éléments contenus
![Page 149: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/149.jpg)
Expert-IT - 2000 D-HTML - 149 -
Positionnement d'éléments
Exemple:
<html><head>
<title>Test 1 Elements positionnables</title>
<style type="text/css">
#theSpan {position:absolute; left:10; top:30; }
</style></head>
<body>
<div id="theDiv" style="position:absolute; left:100; top:50; ">
Bonjour, <span id="theSpan">Suite de mon texte. </span>
</div>
<div id="anotherDiv" style="position:absolute; left:110; top:60; ">
Une autre phrase
</div></body></html>
![Page 150: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/150.jpg)
Expert-IT - 2000 D-HTML - 150 -
Positionnement d'éléments
<html><head>
<title>Test 2 Elements positionnables</title>
<body>
<div id="theDiv" style="position:absolute; left:100; top:20; ">
Début de ma phrase 1
<span id="theSpan" style="position:relative; left:10; top:20; ">Suite en relative</span>
Fin de ma phrase 1
</div>
<div id="theDiv" style="position:absolute; left:100; top:60; ">
Début de ma phrase 2
<span id="theSpan" style="position:absolute; left:10; top:20; ">Suite en absolute</span>
Fin de ma phrase 2
</div></body></html>
![Page 151: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/151.jpg)
Expert-IT - 2000 D-HTML - 151 -
Positionnement d'éléments
Le positionnement relatif est surtout utile pour créer un contexte de positionnement pour des éléments non-imbriqués
![Page 152: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/152.jpg)
Expert-IT - 2000 D-HTML - 152 -
Positionnement d'éléments
Autres attributs pour les éléments positionnables : width, height : dimension de l'élément clip : pour faire une découpe dans l'image
clip:rect(top left bottom right) overflow : pour gérer le dépassement des dimensions (hidden, scroll) visibility : pour la visibilité de l'élément (visible, hidden) (hidden,
l'espace reste occupé)
visibility ne doit pas être confondu avec un autre attribut CSS non-lié au élément positionnable qui est "DISPLAY" (display:none)
unités : em, ex, px, in, cm, mm, pt, pc
![Page 153: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/153.jpg)
Expert-IT - 2000 D-HTML - 153 -
Positionnement d'éléments
Attribut z-index permet de gérer l'ordre dans la pile d'affichage entre éléments contenus dans le même conteneur :
<STYLE>
#sp12 {position:absolute; z-index:-1}
</STYLE>
<DIV ID="div1">
<SPAN ID="sp11"></SPAN>
<SPAN ID="sp12"></SPAN></DIV>
<DIV ID="div2">
<SPAN ID="sp21"></SPAN>
<SPAN ID="sp22></SPAN></DIV>
![Page 154: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/154.jpg)
Expert-IT - 2000 D-HTML - 154 -
Référencer les éléments positionnables
Différence entre IE et NN pour référencer des éléments positionnables dans une scripplet :<DIV ID="div1" STYLE="position:absolute; left:20;"><IMG …></DIV> en NN :
– document.layers[0].left– document.div1.left– document.div1.document.images[0].src– noms des propriétés : left, top, zIndex, visibility, background, bgcolor
en IE :– document.all.div1.style.pixelLeft– document.images[0].src– noms des propriétés : pixelLeft, pixelTop, zIndex, visibility, background,
backgroundcolor
![Page 155: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/155.jpg)
Expert-IT - 2000 D-HTML - 155 -
La fonction eval
Dans le référencement d'élément-objet dans une scripplet, il est parfois utile d'utiliser la fonction eval()
La fonction eval() retourne un identificateur d'objet à partir d'une chaîne de caractères représentant le chemin d'accès de l'objetfor (var i = 1; i<=5; i++) {
unChamp = eval("document.forms[0].entree" + i);
uneVal = unChamp.value
}
![Page 156: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/156.jpg)
Expert-IT - 2000 D-HTML - 156 -
L'attribut float
L'attribut 'float' permet de positionner des éléments côte à côte (left, right, none)
<html><head><title>Test Float</title></head>
<body>
<div style="float:left;width=115">
<img src="../images/AG00059_.gif" alt="AG00059_.gif (12001 bytes)" WIDTH="115" HEIGHT="113"></div>
<div>Du texte du texte du texte du texte du texte du texte du texte du texte du texte du
texte du texte du texte du texte Du texte du texte du texte du texte du texte du texte du
texte du texte du texte du texte du texte du texte du texte Du texte du texte du texte du
texte du texte du texte du texte du texte du texte du texte du texte du texte du texte
</div></body></html>
http://localhost/dhtml/posit/exfloat.htm
![Page 157: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/157.jpg)
Expert-IT - 2000 D-HTML - 157 -
La génération dynamique de contenu
Les méthodes write() et writeln() de l'objet document permettent d'afficher du texte dans l'objet courant
L'appel de cette fonction s'insère dans le flux de traitement de la page par le navigateur
Chaque appel de cette fonction après traitement complet d'une page remplace le contenu de cette page par le texte à afficher
Utiliser la méthode close() pour terminer le flux de traitement de la page
![Page 158: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/158.jpg)
Expert-IT - 2000 D-HTML - 158 -
Accès à des frames multiples
Lorsqu'une page est composée de frames, une scripplet peut écrire dans un frame ou l'autre en utilisant la référence :parent.nomDuFrame.document.write()
De même, il est possible de fraire référence à des éléments se trouvant dans d'autres framesparent.nomDuFrame.document.forms[0].nom.value
![Page 159: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/159.jpg)
Expert-IT - 2000 D-HTML - 159 -
Création et gestion de fenêtres multiples
Une scripplet peut créer une nouvelle fenêtre du navigateur en spécifiant le document à afficher dans ce navigateur et le décor à prévoir pour ce navigateur:var newWindow;
newWindow = window.open(URL, nom, formats);
newWindow.document.write("kdfkkdjkdjjfjd");
newWindow.focus();
La propriété 'opener' de l'objet window contient la référence de la fenêtre à partir de laquelle la fenêtre courante a été ouverte.
![Page 160: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/160.jpg)
Expert-IT - 2000 D-HTML - 160 -
Conseils de design Web (1)
Utilisation des standards Tests sur plusieurs versions de navigateurs Lourdeur des pages (max 30k) Ecrire pour l'on-line Mettre les titres en évidence Regrouper les informations en entité logique Utilisation d'un layout consistent et cohérent
![Page 161: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/161.jpg)
Expert-IT - 2000 D-HTML - 161 -
Conseils de design Web (2)
Créer des liens utiles (éviter le syndrome "here") Utilisation d'image (difficile équilibre entre esthétique et
efficace) jpg ou gif petite et répétée avertissement de l'utilisateur si image lourde (utilisation de
thumbnail)
![Page 162: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/162.jpg)
Expert-IT - 2000 D-HTML - 162 -
Conseils de design Web (3)
Signature des pages Lien vers Home page Front page et Home page Nombre équilibré de pages Maintenance du site Référencement du site
![Page 163: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/163.jpg)
Expert-IT - 2000 D-HTML - 163 -
Exercices DHTML (1)
1.1 Créer une page affichant un titre en HTML et avec une scripplet affichant un texte de bienvenue et votre nom
créer une version en intégrant la scripplet dans le flux de traitement de la page créer une version avec une fonction associée à l'événement "onLoad" du BODY créer une version qui, à partir de la précédente, inclut un fichier externe
contenant le code JavaScript de la fonction 1.2 Créer une page HTML avec un texte de bienvenue en HTML et une
scripplet qui affiche la date du jour et l'heure utiliser une fonction d'affichage que vous placer dans un fichier externe. utiliser : l'objet Date ('var laDate = new Date();') et les méthodes getDate(),
getMonth(), getYear() et getHours() et getMinutes() de cet objet ('laDate.getdate()').
1.3 Créer une scripplet qui permet de déterminer la version du langage JavaScript supportée.
![Page 164: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/164.jpg)
Expert-IT - 2000 D-HTML - 164 -
Exercices DHTML (2)
1.4 Créer une page HTML avec une scripplet qui affiche les caractéristiques du navigateur, de l'écran et les propriétés de l'objet document
utiliser une fonction d'affichage que vous placer dans un fichier externe. utiliser l'objet navigator et screen
1.5 Créer une page HTML avec une scripplet demandant via une fonction de dialogue, le nom de l'utilisateur et affiche ce nom dans un champ texte d'un formulaire. Le formulaire doit également proposer un champ texte pour un âge. Lorsque l'utilisateur soumet son formulaire, affichez son nom et son âge (avec vérification de l'âge) et fermer la fenêtre.
invoquer la scripplet à l'événement 'onLoad' du BODY utiliser le pseudo-URL javascript, utiliser la fonction isNaN() pour tester le
numérique utiliser la méthode close() de l'objet window.
http://localhost/dhtml/exesol/ex15.htm
![Page 165: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/165.jpg)
Expert-IT - 2000 D-HTML - 165 -
Exercices DHTML (3)
1.6 Créer une page HTML affichant une image. Lorsque l'on clique sur cette image, le contenu de la page doit être remplacé par une page affichant les caractéristiques de l'image. Ce remplacement se fait à l'aide d'une scripplet générant du code HTML dynamiquement.
utiliser les pseudo-URL JavaScript et une fonction utiliser la méthode write et close de l'objet document
1.7 Créer une page HTML avec un formulaire contenant un champ numéro avec un valeur initiale et non-modifiable, un champ nom et un champ date de naissance. Lorsque l'utilisateur soumet le formulaire, il faut effectuer les vérifications suivantes : le champ nom doit contenir une valeur et la date doit être valide. Si ce n'est pas le cas, le formulaire ne peut pas être envoyé et on donne le focus au champ en erreur.
![Page 166: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/166.jpg)
Expert-IT - 2000 D-HTML - 166 -
Exercices DHTML (4)
1.8 Développer une page qui propose un formulaire avec deux champ et un bouton intitulé '+'. Lorsque l'utilisateur clique sur ce bouton, vous affichez la somme des deux valeurs contenues dans les champs.
1.9 Développer une page HTML présentant un menu composée d'image. Lorsque le curseur de la souris passe sur une des images, celle-ci est changée par une autre image (pour IE et NN).
1.10 Développer une jeu de cadres, avec un cadre de droite et un de gauche. Dans le cadre de gauche est contenue une page Menu avec un formulaire contenant un champ liste contenant des options. Ces options sont des noms de pages. Lorsqu'une option est choisie, la page correspondante est affichée dans le frame de droite.
![Page 167: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/167.jpg)
Expert-IT - 2000 D-HTML - 167 -
Exercices DHTML (4)
1.11 Développer un jeu de question à choix multiples. La page se décompose en deux frames. Le frame du haut est utilisé pour afficher les questions. Le frame du bas est utilisé pour afficher les résultats. Les questions se composent d'un texte de question et de 2 ou + choix multiples représentés par des boutons radios. Lors d'une sélection d'un des boutons radios, on vérifie la validité de la réponse et on affiche le résultat dans le frame du bas. L'utilisateur peut passer à la question suivante à l'aide d'un bouton. (pour IE et NN)
![Page 168: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/168.jpg)
Expert-IT - 2000 D-HTML - 168 -
Exercices Règles de style
ex 21. Créer deux documents composés de :
Titresous-titre
texte Les règles de style sont:
– titre : marge gauche 10pixel, Arial 18pt
– sous-titre : marge gauche 15pixel, Times 14pt
– texte : marge gauche 25pixel, Arial 10pt, entouré d'un cadre avec espacement de 5pixels par rapport aux bords et un fond de couleur blanc
– page : fond de couleur gris
![Page 169: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/169.jpg)
Expert-IT - 2000 D-HTML - 169 -
Exercices Règles de style
ex 22. Créer un document avec la mise en page telle que décrite avec une feuille de style externe
une boîte avec des images alignées verticalement
une boîte avec du texte, police et couleur
de fond
une boîte avec du texte, police et couleur
de fond
![Page 170: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/170.jpg)
Expert-IT - 2000 D-HTML - 170 -
Exercices Règles de style
ex 23. A partir de l'exercice suivant, modifiez la mise en page uniquement en modifiant les règles de style.
une boîte avec des images alignées
verticalement
une boîte avec du texte, police et couleur
de fond
une boîte avec du texte, police et couleur
de fond
![Page 171: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/171.jpg)
Expert-IT - 2000 D-HTML - 171 -
Exercices Synthèse DHTML (1)
3.1 Développer une page qui propose un formulaire avec deux champs et un champ liste. Cette liste propose deux choix. Lorsque le deuxième choix est sélectionné, le formulaire est complété visuellement de deux champs supplémentaires, un champ texte et deux boutons radios s'affichant en dessous de la liste. Si l'utilisateur resélectionne la première option de la liste, les champs supplémentaires disparaissent.
3.2 Développer une jeu de cadres, avec un cadre de droite et un de gauche. Dans le cadre de gauche est contenue une page Menu avec une liste de lien. Modifiez les caractéristiques d'affichage des liens de manière à ce que les liens soient de couleur rouge, jaune lorsque le curseur passe au-dessus du lien et bleu quand il est activé. Les liens ne doivent pas être souligné. Lorsqu'un lien est cliqué, le texte de ce lien doit être affiché dans un champ texte d'un formulaire se trouvant dans le cadre de droite.
![Page 172: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/172.jpg)
Expert-IT - 2000 D-HTML - 172 -
Exercices Synthèse DHTML (2)
Développez une page contenant au centre un tableau de texte (avec marge de gauche et droite de 100 pixels) et au milieu de la page à gauche, une boîte de texte de couleur avec le mot "Hello". Avec un Timer, toutes les 30 secondes, vous déplacez automatiquement cette boîte de texte de la gauche vers la droite de la page, la boîte doit passer en-dessous du tableau. Lorsque , la boîte de texte atteint le bord droit de la page, elle revient d'elle-même vers le bord gauche où elle s'arrête et attend le prochain Timer pour être à nouveau déplacée.
![Page 173: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/173.jpg)
Expert-IT - 2000 D-HTML - 173 -
Bibliographie (1)
Intranet Business StrategiesMellanie HillsWiley ISBN 0-471-16374-0
Intranets, What's the Bottom LineRandy J.HinrichsPrentice Hall ISBN0-13-841198-0
TCP/IP Network AdministrationCraig HuntO'Reilly & Associates 0-937175-82-X
Internet La Doc de ProsUnderdahl et WillettFirst Interactive 2-84427-013-1
Le projet IntranetAlin, Lafont, MacaryEyrolles 2-212-08941-4
TCP/IP : Architecture, protocoles, applicationsDouglas ComerInterEditions ISBN 2 7296 0423 5
Interconnexions - Ponts et routeursRadia PerlmanAddison-Wesley ISBN 2 87908 080 0
TCP/IP règles et protocolesW. R. StevensAddison Wesley ISBN 2 87908 82 7
L'Internet professionnelAlain SimerayCNRS Editions ISBN 2 271 05256
Firewalls et sécurité InternetM Bellovin W.R. CheswickAddison Wesley ISBN 2 87908 99 1
![Page 174: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/174.jpg)
Expert-IT - 2000 D-HTML - 174 -
Bibliographie (2)
Unix sous tous les anglesAlbert JanssensEyrolles 2-212-08853-1
Web Security & CommerceGarfinkel & SpaffordO'Reilly 1-56592-269-7
IPV6 Théorie et PratiqueGisèle GizaultO'Reilly 2-84177-052-4
Active Server Pages 2.0Francis, Fedorov, …WROX 1-861001-26-6
Using ISAPIStephen GenusaQUE 0-7897-0913-9
Internet et l'entrepriseO Andrieur D LafontEyrolles ISBN 2 212 08906 6
The Simple Book: An introduction to Internet Management, Second EditionM.T RosePrentice Hall
Computer Networks, second editionA.S. TanenbaumPrentice Hall
Le routage dans l'InternetC. Huitéma
Eyrolles ISBN 2 212 08902 3
![Page 175: - 1 - Expert-IT - 2000D-HTML 1. Dynamic HTML De l'HTML au Dynamic HTML](https://reader035.vdocuments.site/reader035/viewer/2022081505/551d9d95497959293b8cc7a1/html5/thumbnails/175.jpg)
Expert-IT - 2000 D-HTML - 175 -
Bibliographie (3)
Java in a nutshellDavid FlanaganO'Reilly 1-56592-183-6
The XML HandbookGoldfarb & PrescodPrentice Hall 0-13-081152-1
HTML The definitive guideMusciano & KennedyO'Reilly 1-56592-235-2
Javascript The definitive guideDavid FlanaganO'Reilly 1-56592-234-4
Style Sheets for HTML and XMLFrank BoumphreyWROX 1-861001-65-7
Visual J++ P.Winters, D Olhaso et al.Simon & Schuster MacMillan (France) ISBN 2-7440-0229-1
Moteur d’indexation et de RechercheC. LeloupEyrolles ISBN 2-212-08976-7
Dynamic HTMLB Campbell, R. DarnellSimon & Schuster MacMillan (France) ISBN 2-7440-0370-0
Teach yourself JavaScript in a weekA. Daneshsams.net ISBN 1-57521-073-8