Des CSS au DHTML - JavaScript appliqué aux feuilles de style

Avantpropos

À l’heure actuelle, on peut définir le Dhtml comme du JavaScript appliqué aux feuilles de style CSS. Cet ouvrage aborde de façon progressive et structurée ces trois éléments et se divise donc en trois parties.

Les feuilles de style CSS 1 et 2 (chapitres Introduction aux CSS à Tester les CSS)

Les feuilles de style CSS prennent en charge tout l’aspect présentation d’une page Html. Elles constituent un outil puissant et créatif. Conçues en 1998, leur adoption par les concepteurs de sites Web a été retardée jusqu’à ces dernières années pour des raisons de compatibilité avec les anciens navigateurs. Elles sont maintenant largement répandues et incontournables.

Le JavaScript (chapitres Introduction au JavaScript à Débogage du JavaScript)

Le JavaScript est un petit langage de programmation adapté aux besoins et nécessités des pages Web qui augmente l’interactivité de cellesci avec l’utilisateur. La syntaxe et les techniques de la programmation sont introduites très progressivement pour être facilement compréhensibles pour des lecteurs pas forcément familiers de la programmation.

Le Dhtml (chapitres Introduction au Dhtml à Les menus de navigation)

Après l’étude des deux premiers éléments, il est possible d’aborder le Dhtml : du JavaScript (évolué) permettra de rendre les feuilles de style CSS dynamiques pour améliorer l’attrait et la convivialité des sites Web.

- 1 -© ENI Editions - All rigths reserved - Jonifar lina

enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzk0ZJKvuizIgLAA==-enidentnumber

1

Définition

Les feuilles de style sont des ajouts de code au langage Html (ou XHtml) qui vont prendre en charge la présentation du document.

Cette présentation peut varier de la simple présentation visuelle à l’écran (police, taille de caractères, interlignes, etc.) à la présentation en vue de l’impression du document ou encore à la présentation auditive par l’intermédiaire d’une interface vocale, etc.

Le concept de feuille de style repose sur le principe de la séparation du contenu de la présentation, dans l’élaboration de documents basés sur le Html.

Ainsi un même contenu pourrait être utilisé, selon la feuille de style adoptée, pour un affichage sur des médias aussi divers qu’un écran traditionnel, l’écran d’un ordinateur de poche, l’écran d’un mobile, des feuilles de papier, un clavier braille, etc.

C’est ainsi tout le domaine de la présentation qui est pris en charge par les feuilles de style, le rôle du Html se limitant alors à la structure et à l’encodage de l’information brute.

Les feuilles de style venant s’encoder directement dans le code Html des pages, la connaissance et l’expérience

du langage Html est un prérequis absolu pour la bonne compréhension de ce qui suit.

Si une mise à niveau s’avérait nécessaire, l’auteur ne peut que vous recommander <HTML> Maîtriser le code source aux Éditions ENI collection Ressources Informatiques.

Prérequis


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzg3igPvuizIgLAA==-enidentnumber

2

Utilité

Les feuilles de style représentent un outil puissant dont les implications dans le domaine de l’édition des pages Web sont multiples et par certains aspects, révolutionnaires.

Le langage Html, conçu à l’origine pour l’échange de documents entre scientifiques, ne comporte que peu d’éléments de présentation car cette dernière n’était pas sa préoccupation première. En quelque sorte débordé par le succès du Web auprès des internautes et l’inventivité des concepteurs de pages, le Html ne manque pas de révéler des lacunes sur le plan de la présentation et d’entraîner, à la longue, une certaine monotonie. Citons :

une taille de caractères limitée à sept valeurs ;

une image d’arrièreplan obligatoirement répétée en mosaïque ;

un seul modèle de bordures de tableaux ;

une marge unique dans les cellules de tableaux ;

aucun contrôle de l’espace entre les lignes et entre les caractères...

Les feuilles de style vont réveiller votre créativité en apportant de nombreuses possibilités de présentation, absentes dans le code Html. On peut rapporter pour exemple :

une taille de caractère illimitée ;

de nouvelles présentations de bordures ;

le contrôle de l’interlignage et de l’interlettrage ;

l’indentation des paragraphes ;

le positionnement précis des images ;

la modification du curseur...

Sans mettre en doute votre compétence à lire le code source des pages Web, il faut avouer qu’avec les limites du langage et l’obligation de passer pour une présentation agréable par une foule d’astuces comme de multiples tableaux imbriqués, le code source d’une page Html devient rapidement incompréhensible. Ce qui n’est pas sans poser des problèmes, même pour une simple correction ou une mise à jour mineure.

Les feuilles de style vont permettre d’alléger considérablement votre code source en le rendant plus lisible et plus accessible.

De par l’utilisation croissante du Web comme source d’information, la dimension des sites Web a considérablement augmenté en terme de nombre de pages par site. Il n’est plus rare de rencontrer des sites de plusieurs centaines de pages. Une mise à jour graphique peut ainsi constituer un travail gigantesque.

Plutôt que de devoir reprendre et retravailler, une par une, chacune des pages du site, les feuilles de style permettent, par la seule modification d’un unique fichier, de changer la présentation graphique de l’ensemble d’un site tout en lui assurant une cohérence graphique.

Depuis quelques années, l’accent a été mis sur l’accessibilité des sites Web pour les personnes présentant des déficiences visuelles. Beaucoup de concepteurs de sites ont pris conscience de l’importance du Web comme média d’information irremplaçable pour ces personnes ayant un handicap de la vue. Pour rendre un site accessible, soit procurer aux malvoyants un accès immédiat à la même information et au même volume d’information, l’usage des

Les limites du langage Html

Une simplification du code

Une maintenance de site facilitée

Une voie vers l’accessibilité


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz/arbVPuizIgLAA==-enidentnumber

3

feuilles de style s’avère être un outil essentiel.

Sans entrer dans les détails, les feuilles de style offrent la possibilité, d’un simple clic, d’afficher une page de texte avec des caractères plus grands et donc plus lisibles.

Il reste bien d’autres avantages à l’utilisation des feuilles de style. Plutôt que d’alourdir le propos de cette introduction, il reste toute l’étude des feuilles de style pour vous convaincre de la richesse et de la puissance de cellesci.

Autres avantages

- 2 - © ENI Editions - All rigths reserved - Jonifar lina

enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz/arbVPuizIgLAA==-enidentnumber

4

Bref historique

Lorsque début 1991, Tim BerneersLee inventa le Web, le langage Html était principalement conçu pour faciliter l’échange d’informations entre scientifiques. Les premières pages Web étaient pour le moins austères avec leur fond de page gris, un texte de couleur noire, structuré uniquement avec des titres et des listes. Il fallut même attendre quelques années pour voir apparaître les premières images en 256 couleurs. On était loin de nos pages Web actuelles...

Assez rapidement cependant, dès 1994, devant les relatives faiblesses du Html en matière de présentation, l’idée d’adjoindre des styles au Html comme dans les logiciels de traitement de texte fit son apparition.

Lorsque en 1995, le W3C (pour WWWConsortium) commença à fonctionner, une de ses premières réalisations concrètes fut la publication en novembre 1995 d’une première ébauche (draft) sur les feuilles de style. Ce document devint une recommandation officielle le 17 décembre 1996 sous le nom de "Feuilles de style en cascade niveau 1" (Cascading Style Sheets, level 1) ou de manière abrégée, CSS1.

Dans la foulée, un groupe de travail spécifique fut créé avec comme mission d’étendre le concept des feuilles de style. Une nouvelle recommandation fut publiée le 12 mai 1998 sous le vocable CSS2.

Quelques corrections et des extensions mineures sont proposées dès la fin de 1998. Elles feront l’objet d’une officialisation, soit CSS2.1, en août 2002.

Un document de travail CSS3 a bien été diffusé en mai 2001 mais à ce jour (courant 2008), ce document reste au stade de projet et n’est pas encore devenu une spécification du W3C. Ce qui n’empêche pas les concepteurs de navigateurs d’en reprendre déjà quelques spécifications.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzc4DjXvuizIgLAA==-enidentnumber

5

Adoption difficile

Force est de constater que les feuilles de style, au demeurant un outil aux possibilités riches et variées, ont mis de longues années avant de s’imposer comme un standard dans l’écriture et la publication de pages Web.

Bien que publiées pour la première fois en 1996, il a fallu attendre en effet les années 20012002 pour voir les feuilles de style être adoptées de façon systématique par les concepteurs de sites Web.

Il faut admettre que le "dogme" de la séparation du contenu et de la présentation n’est pas facile à respecter avec les éditeurs WYSIWYG (pour What You See Is What You Get) comme FrontPage ou Dreamweaver. Il est même plus que tentant lors de la création de pages, de faire tout le contraire et d’associer directement, lors de la création, la présentation au contenu.

Mais la raison principale réside dans l’inertie des firmes commercialisant les navigateurs Web à adopter cette nouvelle technique et surtout leur funeste habitude (que connaissent bien les concepteurs Web chevronnés) à implémenter de façons différentes les recommandations du W3C. N’oublions pas que l’objectif principal des navigateurs du marché est d’afficher au mieux le plus grand nombre de pages possibles, même celles dont le respect de la syntaxe du langage Html et de ses dérivés est plus qu’approximatif.

Tout commença en août 1996 avec Microsoft Internet Explorer 3.0 qui permettait l’utilisation de quelques rares effets de style pour la présentation du texte (soit avant la recommandation officielle du W3C) alors que son concurrent et leader sur le marché, Netscape 3, les "boudait" complètement.

À la sortie des versions 4 d’Internet Explorer et de Netscape, mi97, soit en pleine guerre de parts de marché entre ces deux firmes, Internet Explorer prenait une longueur d’avance avec l’implémentation (partielle) des feuilles de style, proche des standards du W3C. Netscape, quant à lui, s’obstinait dans l’intégration plus personnelle des feuilles de style. Résultat : une faible compatibilité entre les deux navigateurs et une intégration aléatoire sur le plan de la compatibilité des sites Web. Le concept des feuilles de style restait ainsi au point mort.

Lorsqu’en mars 1999, Microsoft diffusa Internet Explorer 5.0, la situation sur le plan des parts de marché, avait bien changé. En pleine crise, Netscape commençait sa période de déclin. L’avantage était nettement dans le camp de Microsoft qui affichait plus ou moins correctement les feuilles de style de niveau 1. L’intérêt des concepteurs de sites était bien présent mais comme la règle (informelle) de compatibilité des sites Web suggère que les pages puissent être visibles avec, au moins, l’avantdernière version des navigateurs, l’adoption des feuilles de style se limitait à quelques timides effets de présentation. L’apparition d’Internet Explorer 5.5 (juillet 2000) ne modifia pas de façon radicale la situation.

Ce qui nous reporte déjà en 2001 avec une nouvelle version d’Internet Explorer. Explorer 6 intégrait parfaitement les CSS1 et quelques éléments de CSS2. En outre, la gamme des Microsoft Explorer (de la version 4 à 6) occupait désormais près de 95 % des navigateurs utilisés sur le Web. Les feuilles de style pouvaient dès lors être définitivement adoptées sans trop de scrupules sur le plan de la lisibilité des pages Web par le plus grand nombre. Les efforts louables de Netscape 7, Mozilla et d’Opera en matière d’intégration des feuilles de style ne changeront plus rien à la situation.

Avec l’émergence de Firefox qui intégrait les feuilles de style en respectant scrupuleusement les recommandations du W3C, les feuilles de style CSS sont devenues un standard de l’écriture des pages Web en reprenant tout l’aspect de présentation du code Html.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzR1+oc/uizIgLAA==-enidentnumber

6

Contraintes et choix

Le point précédent nous apprend que dans l’absolu, les feuilles de style ne sont théoriquement pas compatibles à 100 % avec tous les navigateurs présents sur le marché.

Les raisons en sont d’abord l’intégration progressive des standards CSS1 et CSS2 par les navigateurs, toutes marques confondues, et ensuite l’interprétation différente et peu scrupuleuse de certaines spécifications du W3C selon les marques.

Cependant, au moment de l’écriture de cet ouvrage (courant 2008), on peut affirmer de façon pragmatique que la plupart des navigateurs utilisés sur le Net reconnaissent quasi intégralement les spécifications CSS1 et de façon partielle les recommandations CSS2.

Au niveau de la conception et de l’écriture de cet ouvrage, il a donc fallu faire des choix.

Dans l’optique d’un ouvrage formatif, il semblait pesant voire inutile de disserter pour chaque propriété étudiée de son intégration totale, partielle ou nulle :

par Internet Explorer dans ses multiples versions.

par Netscape qui n’est plus développé depuis courant 2007.

par Firefox dans ses versions 1 et 2.

par Safari pour Macintosh et maintenant aussi pour Windows.

par Opera et ses nombreuses évolutions.

par Mozilla, Konqueror et j’en passe.

Il est assurément intéressant pour juger du potentiel des feuilles de style, de parcourir l’ensemble des propriétés CSS1 et CSS2. Mais quoi de plus frustrant lors d’une formation qui se veut essentiellement pratique et pédagogique, de ne pouvoir s’exercer sur des propriétés qui n’ont pas encore été implémentées dans les navigateurs et qui restent à ce jour purement théoriques ? Ce qui est encore le cas de nombreuses recommandations des feuilles de style de niveau 2. Cellesci ne seront donc pas étudiées ici mais parfois simplement évoquées.

Au niveau des navigateurs, nous nous limiterons à Internet Explorer 7.0 car, sans tomber dans une quelconque querelle de clochers, il apparaît comme le navigateur incontournable à l’heure actuelle.

Les différences avec Internet Explorer 6 et 5.5 seront cependant abordées si cela s’avère nécessaire. On considèrera les versions 3, 4 et 5 d’Internet Explorer comme obsolètes.

Cependant, le choix d’un seul et unique navigateur fait naître quelques scrupules car il occulte tout le problème de la compatibilité de certaines feuilles de style. Nous avons retenu Firefox, dans sa version 2 et 3, car il occupe maintenant une place non négligeable dans l’éventail des navigateurs utilisés par les internautes.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzSa6ivuizIgLAA==-enidentnumber

7

Outils pour les CSS

Les langages utilisés sur le Web ont cet avantage qu’ils ne réclament pas nécessairement un logiciel dédié.

Bien entendu, des éditeurs Html comme FrontPage, Dreamweaver et autres incorporent dans leurs versions récentes, la possibilité d’utiliser les feuilles de style pour l’élaboration de sites Web. Mais tôt ou tard, il sera toujours utile, voire indispensable, d’appréhender directement le code source.

Et pour écrire en code source, pas besoin de logiciel coûteux ! Un simple éditeur de texte, présent dans tous les systèmes d’exploitation, fait parfaitement l’affaire.

L’important est d’avoir du texte brut sans aucune mise en forme.

Sous Windows, l’auteur (et il n’est pas le seul...) utilise le Blocnotes ou Notepad. Pour rappel, on y accède par Démarrer Programmes Accessoires Blocnotes.

Cet éditeur de texte aux fonctions rudimentaires est cependant "parfait" pour encoder du texte brut (sans aucun formatage). On le retrouvera par ailleurs, plus loin dans cet ouvrage, pour encoder le JavaScript et les scripts Dhtml.

Il est important de respecter une procédure d’enregistrement correcte. Après avoir fait Fichier Enregistrer sous..., veillez à activer dans la zone Type, l’option Tous les fichiers.

Dans le cadre de cet ouvrage, les fichiers auront comme extension *.htm ou *.html (pour le Html), *.css (pour les feuilles de style) ou *.js (pour le JavaScript).

Mais rien ne vous empêche d’utiliser un traitement de texte plus classique comme Wordpad ou Word à condition d’enregistrer votre travail avec comme type de fichier l’option Texte MSDOS ou Texte brut ou Texte Unicode et l’extension de fichier appropriée.

Pour afficher votre fichier, il suffit d’ouvrir votre navigateur et d’indiquer le chemin vers le fichier concerné. Ainsi avec Microsoft Internet Explorer 7, après avoir activé la barre de menus (Outils Barre de menus), utilisez la commande Fichier Ouvrir et cliquez sur Parcourir pour indiquer l’emplacement où a été enregistré le document.

Bien entendu, d’autres façons de procéder sont possibles.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzreOtqPuizIgLAA==-enidentnumber

8

Sélecteur

Dans le chapitre Introduction aux CSS, nous avons défini les feuilles de style comme des ajouts au code Html.

L’effet de style viendra donc "s’accrocher" à un élément ou une balise Html. C’est ce qu’on appelle un sélecteur.

La syntaxe d’un sélecteur est la dénomination de la balise suivie de la déclaration de style comprise entre des accolades ouvrantes et fermantes.

Sélecteur déclaration de style

Soit, par exemple, h1 déclaration de style .

Remarquez que l’on reprend simplement la dénomination de la balise sans ses signes inférieur (<) et supérieur (>). Donc uniquement le texte de la balise.

Ce qui pourrait se lire : "appliquer à la ou aux balise(s) h1, l’effet de style décrit entre les accolades".

Il est aussi possible d’affecter le même effet de style à différents sélecteurs. Dans ce cas, chacune des balises concernées devra être séparée de la précédente par une virgule.

Soit : h1,h2,h3 déclaration de style .

Ce qui signifie que les balises h1, h2 et h3 auront le même effet de style, décrit entre les accolades.

Ceci constitue une première approche de la notion de sélecteur. Celleci est plus étendue. Nous la complèterons en cours d’étude.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzf/RJwPuizIgLAA==-enidentnumber

9

Déclaration

La déclaration d’un style s’effectue par le binôme propriété: valeur;

Soit, par exemple, background-color: red;

Ce qui pourrait se lire : "mettre une couleur d’arrièreplan rouge".

Détaillons cette déclaration :

"propriété" identifie ce qui sera défini dans le style adopté. Ces propriétés sont énumérées dans les spécifications CSS 1 et 2. Il existe de nombreuses propriétés portant, par exemple, sur la police de caractères (font), sur le texte (text), sur l’arrièreplan (background), sur la bordure (border), etc.

La propriété est séparée de sa valeur par un double point.

Les espaces sont permis. Ainsi, certains auteurs ont pris l’habitude de mettre un espace entre le double point et la valeur pour une meilleure lisibilité du code.

"valeur" identifie la nature de l’effet de style souhaité. La valeur s’exprime par un mot clé, un pourcentage ou une grandeur en fonction de la propriété à laquelle elle est assignée.

une déclaration de style se termine toujours par un pointvirgule.

Il est possible de définir plusieurs déclarations de style pour un sélecteur.

Soit :

h1 propriété1:valeur; propriété2:valeur; propriété3:valeur;

Là aussi, pour des raisons de lisibilité du code, on peut trouver la notation :

h1 propriété1:valeur; propriété2:valeur; propriété3:valeur;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz95yX1PuizIgLAA==-enidentnumber

10

Commentaires

Tout langage de description ou de programmation permet l’insertion de commentaires pour la compréhension et la maintenance ultérieure. Dans une feuille de style CSS, un commentaire commence par les caractères barre oblique et étoile (soit /*) et se termine par étoile et barre oblique (soit */). On peut placer des commentaires n’importe où dans la feuille de style, excepté à l’intérieur d’une chaîne de caractères.

Soit : /* Ceci est un commentaire*/.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz7avV3PuizIgLAA==-enidentnumber

11

Unités de mesure

Le Html n’utilise que le pixel et le pourcentage. Les feuilles de style CSS permettent bien d’autres unités de mesure, soit en pouces (inches), en centimètres, en millimètres, en points, en picas, en pixels et en pourcentage.

Pour autant que toutes ces unités soient interprétées exactement par le navigateur, en voici un tableau récapitulatif.

Les unités de mesure sont notées par une abréviation comportant deux lettres. Selon les recommandations CSS, il ne peut y avoir d’espace entre la valeur et l’unité, même si Internet Explorer accepte l’espace. Certaines

propriétés acceptent des valeurs négatives.

Unité Description Valeur Exemple

in Pouce (inch) soit 2,54 cm réel 0.1in

cm Centimètre entier 6cm

mm Millimètre entier 60mm

pt Point, soit 1/72ème de pouce

entier 48pt

pc Pica, soit 12 points réel 4.5pc

px Pixel, soit le plus petit élément de la résolution d’écran entier 800px

% Pourcentage entier 30%

em Par rapport à la taille de la police courante entier 0,8em


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzVVxmEfyizIgLAA==-enidentnumber

12

Notation des couleurs

Si le Html limite l’utilisateur à la valeur hexadécimale, CSS propose quelques alternatives intéressantes pour déclarer une couleur :

La notation hexadécimale classique, soit #ffcc00. Cette manière est déjà bien connue de ceux qui sont habitués aux couleurs en Html. Elle définit la couleur, ou plutôt ses trois composantes, rouge (r), vert (g pour green) et bleu (b), via une notation hexadécimale de type #rrvvbb. Notons qu’en CSS, on n’utilise pas les guillemets du Html.

La notation hexadécimale abrégée, soit #fd3. Cette manière permet de gagner quelques caractères. Chaque chiffre est alors implicitement dupliqué. Par exemple, #fd3 correspond à la notation classique #ffdd33. On comprend donc qu’on ne pourra pas abréger une couleur comme #cfe4f5.

La notation décimale, soit par exemple, color: rgb(0, 0, 255). Le code rvb de la couleur n’est plus encodé en valeur hexadécimale mais par un nombre entier compris entre 0 et 255. C’est donc l’équivalent décimal de la notation hexadécimale.

La notation en pourcentage, soit par exemple, color: rgb(25%, 50%, 0%). La valeur 0% signifie l’absence de la composante, 100% indique que la valeur est à son maximum.

Les mots clefs, soit par exemple, color: red. Ces couleurs au nombre de 17 sont désignées par un nom en anglais et constituent les couleurs basiques. On y retrouve : green (vert), yellow (jaune), blue (bleu moyen), orange (orange), white (blanc), red (rouge), black (noir), maroon (brun marron), lime (vert citron), aqua (turquoise), teal (cyan foncé), silver (gris clair) et gray (gris foncé).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDRKtGvyizIgLAA==-enidentnumber

13

Conventions d’écriture

Comme le Html, les feuilles de style ne sont pas sensibles à la casse (case insensitive). Peu importe donc qu’elles soient écrites en majuscules et minuscules.

Cependant, l’usage veut que l’on encode les feuilles de style en minuscules.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz+yGzSfyizIgLAA==-enidentnumber

14

CSS et le Html

Les feuilles de style venant s’ajouter au code Html, nous parcourons dans ce chapitre les différents points d’implication des CSS dans le code source de la page.

Les feuilles de style viennent s’intégrer au document Html.

Il est cohérent de prévoir une définition de type de document (Document Type Definition (DTD) ou doctype) qui prend en charge la gestion des CSS.

Trois DTDs peuvent être spécifiés :

Strict. Pour celuici, tous les éléments de présentation doivent être pris en charge par des feuilles de style.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional. Il permet d’utiliser un "mélange" de CSS et de balises ou attributs de présentation du Html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset. Lorsque le document Html comporte des cadres (frames).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

En pratique, la norme Strict porte bien son nom et assez difficile à atteindre. On lui préfèrera le mode Transitional pour un certain confort d’écriture.

Pour ceux qui utilisent le XHtml, les déclarations "doctype" correspondantes sont :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

La mention d’un doctype est souvent le meilleur moyen d’éviter certains dysfonctionnements, particulièrement pour Internet Explorer 6 et 7.

Au niveau des balises meta, on peut préciser pour les langages complémentaires au Html comme les feuilles de style, le ou les langage(s) utilisé(s) dans le document.

On ajoutera aux autres balises meta, la balise :

<meta http-equiv="Content-Style-Type" content="text/css">

On retrouvera cette balise plus loin dans cet ouvrage pour déterminer cet autre langage complémentaire qu’est le JavaScript.

Un modèle (minimum) de document Html comportant des feuilles de style pourrait être :


Doctype

Balises meta


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzM47WZ/yizIgLAA==-enidentnumber

15

<html> <head> <title>Exemple</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> ... </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzM47WZ/yizIgLAA==-enidentnumber

16

CSS intégrée à un élément Html

Bien que quelque peu contraire à l’esprit des CSS prévues pour la présentation de tout le document, on peut ajouter un style à une balise Html particulière. On l’appellera aussi style en ligne.

La syntaxe générale se présente ainsi :

<h1 style="color:red;">Votre titre de niveau 1</h1>.

Soit : appliquer à la balise h1 un style qui mettra en rouge le texte compris dans cette balise h1 particulière.

Il faut insister sur le fait que les guillemets d’entrée et surtout les guillemets de fin sont indispensables. La sanction à ce manquement est immédiate. En effet, l’effet de style ne sera, purement et simplement, pas affiché par le navigateur.

Contraire à l’esprit des CSS qui prennent en charge la présentation de l’entièreté d’un document, cette façon de procéder se révèle bien pratique pour l’apprentissage et les premières mises en pratique des feuilles de style.

Le code complet est alors :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Style en ligne</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p style="font-style:italic;">Paragraphe 1</p> <p>Paragraphe 2</p> </body> </html>

Seul le paragraphe 1 auquel on a appliqué un style, sera en italique.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzPwjwm/yizIgLAA==-enidentnumber

17

CSS intégrée à un document Html

L’utilité principale des CSS est de déterminer un style qui s’applique à l’entièreté d’un document Html.

À cet effet, le code de la feuille de style sera placé dans l’entête du document, soit entre les balises <head> et </head>. On parlera alors de style interne.

La syntaxe se présente alors ainsi :

<head> ... <style type="text/css"> h1 color:red; </style> ... </head>

Cette déclaration de style aura comme effet de mettre en rouge le texte de toutes les balises h1 du document Html.

La mention type="text/css"dans la balise style est obligatoire et exigée par le validateurs de code Html.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Style interne</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> h1 font-style:italic; </style> </head> <body> <h1>Titre 1</h1> <h1>Titre 2</h1> </body> </html>

On remarque que tous les titres de niveau 1, seront en italique.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz20CQsfyizIgLAA==-enidentnumber

18

CSS indépendante du document Html

Une des potentialités majeures des CSS est qu’il est possible de créer une feuille de style qui ne s’applique pas qu’à une seule page Html mais à l’ensemble des pages d’un site. Ce qui se réalise par ce que l’on appelle, les feuilles de style externe.

Cette technique met en œuvre deux fichiers :

Un fichier qui contient la déclaration de style. Ce fichier, la feuille de style externe, aura une extension .css.

Un document Html qui contient un lien vers le fichier CSS ainsi créé.

h1 text-decoration: underline;

Il faut noter :

que ce fichier peut se créer par exemple avec le Blocnotes de Windows.

qu’il contient uniquement des déclarations de style.

qu’il ne peut donc pas contenir de balises Html et en particulier les balises <style> ... </style>.

on enregistrera ce fichier sous un nom de fichier quelconque et avec une extension .css, soit ici, exemple.css.

on situera souvent ce fichier dans le même dossier que le document Html (adressage local).

On ajoutera dans l’entête, soit entre les balises <head> et </head>, un lien vers la feuille de style en question.

<link rel="stylesheet" href="exemple.css">

Étudions cette ligne de code :

link indique au navigateur que ce qui suit est un lien.

rel="stylesheet" précise que ce lien est relatif à une feuille de style.

href="exemple.css" est l’écriture classique d’un lien en Html.

le lien peut être global, soit commençant par http://... ou local.

rien n’empêche de mettre plusieurs balises link pointant vers des feuilles de style externes différentes.

rien n’empêche non plus d’utiliser également une feuille de style interne.

Le code du fichier exemple.css est tout simplement :

La feuille de style externe

Le document Html


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmeIU1vyizIgLAA==-enidentnumber

19

h1 text-decoration: underline;

Le code du fichier Html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Style externe</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="exemple.css"> </head> <body> <h1>Titre de niveau 1</h1> </body> </html>

Tous les titres h1 de toutes les pages du site seront soulignés.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmeIU1vyizIgLAA==-enidentnumber

20

CSS importée (@import)

Une autre façon d’utiliser des feuilles de style externes est d’utiliser @import.

<style>  </style>

@import est une propriété CSS2 (alors que la balise link est du Html). L’avantage est qu’on pourra non seulement l’utiliser pour appeler une feuille de style externe dans un document Html mais aussi pour importer une autre feuille de style dans la feuille de style externe.

Notons :

les balises <style> ... </style> sont nécessaires car @import est du CSS2.

il n’y a pas d’espace entre l’arobase et import.

l’adresse de la feuille de style peutêtre globale (http:// ...) ou locale.

n’oubliez surtout pas le pointvirgule final ! @import est une propriété CSS.

Le code complet pourrait être :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Style importé</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <h1>Titre de niveau 1</h1> </body> </html>

Tout comme pour les styles externes, Tous les titres h1 de toutes les pages du site seront soulignés.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzwYtf6PyizIgLAA==-enidentnumber

21

Notion de cascade

À la lecture des points précédents, on constate que l’on peut avoir plusieurs définitions de style soit en ligne, interne(s) ou externe(s). En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" (le cascading de Cascading Style Sheets) ou d’ordre de priorité.

Le navigateur prend d’abord en considération les spécifications des feuilles de style externes (avec l’extension css), ensuite celles de style internes (soit celles à l’intérieur des balises head) et ensuite des feuilles de style en ligne (celles liées à un élément Html).

Ainsi, en cas de conflit entre une spécification de style définie à la fois dans une feuille de style externe et une feuille de style interne, c’est la spécification de la feuille de style interne qui sera retenue par le navigateur. De même, en cas de conflit entre une feuille de style interne et en ligne, c’est cette dernière qui l’emportera.

L’ordre croissant de priorité (de la plus basse à la plus haute) est :

1. Propriétés du navigateur.

2. Les feuilles de style externes.

3. Les feuilles de style internes.

4. Les feuilles de style en ligne.

Les styles déclarés dans la feuille de style en ligne ont donc bien la plus haute priorité.

La règle de priorité, pour l’affichage du document par le navigateur, sera d’utiliser la feuille de style la plus proche de l’élément.

Prenons un exemple. Définissons dans une feuille de style interne que les titres de niveau 1 soient soulignés et dans un style en ligne que ces même titres de niveau 1 soient surlignés.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Cascade</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> h1 text-decoration: underline;

</style> </head> <body>

<h1 style="text-decoration: overline;">Titre de niveau 1</h1>

</body> </html>

Le titre de niveau 1 est bien affiché avec un surlignement (text-decoration: overline), soit avec l’effet du style en ligne le plus proche de l’étape d’affichage.

Il est cependant possible de passer outre ces règles de priorité par défaut par la valeur !important et redonner la préséance à une déclaration, peu importe les déclarations qui peuvent la suivre.

Exemple :


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzF0NS9/yizIgLAA==-enidentnumber

22

On donne la priorité au style interne, soit au soulignement, par la valeur !important.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>!important</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> h1 text-decoration: underline !important;

</style> </head> <body> <h1 style="text-decoration: overline;">Titre de niveau 1</h1> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzF0NS9/yizIgLAA==-enidentnumber

23

Notion d’héritage

Le principe de l’héritage peut être expliqué par un rappel du Html et de ses balises imbriquées. Soit le code :

<b>Les éditions Eni <i>Collection <u>Ressources informatiques</u></i></b>

"Ressources informatiques" sera non seulement souligné (les balises <u> ... </u>) mais aussi en italique (compris dans des balises <i> ... </i>) et également en gras (balises <b> ... </b>). On pourrait dire que "Ressources informatiques" a hérité du formatage italique de la balise <i> et du formatage gras de la balise <b>.

Il en est de même pour les styles.

Le style 2 se caractérise par son propre style et celui du style 1 dont il a hérité.

Le style 3 se caractérise par son propre style et ceux des styles 1 et 2 dont il a hérité.

Dans la même logique, on utilisera le terme de "parent" et "enfant". Le style 1 est bien entendu parent du style 2. De même, le style 2 et le style 1 sont parents du style 3. Ou encore, le style 2 est enfant du style 1 et le style 3 est enfant des styles 2 et 1.

Ces notions de cascade et d’héritage sont assez subtiles et délicates à comprendre. Elles se préciseront en cours d’étude des feuilles de style.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzv2kOA/2izIgLAA==-enidentnumber

24

Type de police

La police de caractères est un élément important de la présentation d’un document, que ce soit à l’écran ou à l’impression. Les feuilles de style CSS permettent ainsi de déterminer éventuellement, une police de caractères en fonction du média de sortie (écran ou papier).

Le véritable problème pour les concepteurs de sites Web est qu’ils sont dépendants des polices de caractères réellement disponibles sur la machine de leurs visiteurs. Les feuilles de style apportent une plus grande diversité dans le choix de la police mais sans contourner le problème des polices installées chez l’utilisateur. Il faudra sembletil attendre les CSS 3 pour solutionner le problème avec un système fiable de polices téléchargeables avec le document Html.

La syntaxe de la déclaration de style pour le type de police du texte est :

Exemple : font-family: Arial;

Si l’on indique plusieurs polices, les noms de cellesci doivent être séparés par une virgule : font-family: Arial, Helvetica, Georgia;

Dans ce cas, le navigateur utilisera la première police nommée si elle est présente sur le système du visiteur, sinon, il passera à la suivante, etc. Si aucune des polices désignées n’existe sur le système, le navigateur revient à la police par défaut.

Si le nom de la police comporte des espaces, le nom complet est à mettre entre guillemets (simples ou doubles) :

font-family:’Courier New’, ’Trebuchet MS’, ’Lucida Console’;

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>font-family</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="font-family: ’Lucida Console’;">CSS + DHTML</h1> </body> </html>

Le résultat peut varier d’un ordinateur à l’autre en fonction des polices installées.

font-family: nom de la police ou famille de la police

Nom de la police

Famille de police


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzS6C3Hv2izIgLAA==-enidentnumber

25

Au lieu de spécifier le nom de la police, on peut utiliser des familles de police ou des noms de polices génériques :

serif : les polices de type serif ont des terminaisons au bout de leurs traits et un espacement des lettres proportionnel (Times New Roman, Bodoni, Georgia, Garamond...).

sansserif : les polices sans serif ont les bouts des traits pleins, sans évasement et un espacement des lettres proportionnel (Arial, Verdana, Helvetica, Trebuchet...).

cursive : famille de polices dont le résultat est proche d’une écriture manuscrite (Script, Adobe Poetica...).

fantasy : les polices fantaisies ou décoratives (Wingdings...).

monospace : toutes les lettres ont les mêmes dimensions. L’aspect est semblable à celui obtenu avec une machine à écrire manuelle et on emploie souvent ce type de police pour écrire du code informatique (Courier, Courier New).

C’est le navigateur qui choisira sur la machine de l’utilisateur la police disponible qui correspond aux critères du nom générique.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>font-family</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p style="font-family:serif;">Texte en serif</p> <p style="font-family:sans-serif;">Texte en sans-serif</p> <p style="font-family:cursive;">Texte en cursive</p> <p style="font-family:fantasy;">Texte en fantasy</p> <<p style="font-family:monospace;">Texte en monospace</p> </body> </html>

Le résultat peut varier d’un ordinateur à l’autre en fonction des polices installées.

Il est recommandé de spécifier un nom de police générique après une énumération de noms de police afin que l’affichage respecte le genre de police retenu plutôt que la police par défaut. Exemple : font-family: Arial,

Verdana, Helvetica, sans-serif;



26

La compatibilité de cette propriété (CSS1) peut être considérée comme parfaite pour tous les navigateurs prenant en charge les feuilles de style.



27

Italique

Cette propriété permet d’écrire un texte de façon normale ou avec une inclinaison des caractères.

La distinction entre italic et oblique est assez subtile et peu visible à l’affichage. La valeur italic reprend la version en italique de la police retenue tandis que la valeur oblique est simplement l’inclinaison vers la droite des caractères de la police, par le navigateur.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>font-style</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="font-style: italic;">Titre en italique</h1> <h1 style="font-style: oblique;">Titre en oblique</h1> </body> </html>


font-style: italic ou oblique ou normal


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz82d7Yv2izIgLAA==-enidentnumber

28

Majuscules

Cette propriété permet d’afficher un texte normal en petites majuscules.

La valeur small-caps va afficher le texte en majuscules mais de façon plus petite (small) que les majuscules normales, ce qui donne un résultat moins "agressif".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>font-variant</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1>MAJUSCULES</h1> <h1 style="font-variant:small-caps;">petites majuscules</h1> </body> </html>


font-variant: small-caps ou normal


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzzWx/c/2izIgLAA==-enidentnumber

29

Graisse

Cette propriété permet de mettre le texte en gras. Notons (même si les différences ne sont pas toujours très perceptibles) que les possibilités sont nettement plus nombreuses qu’en Html.

La valeur bold (gras) met la police de caractères en gras.

La valeur bolder (plus gras) accentue la graisse par rapport à l’élément parent.

La valeur lighter (plus léger) diminue la graisse par rapport à l’élément parent.

Les valeurs numériques disponibles sont : 100, 200, 300, 400, 500, 600, 700, 800, 900. La valeur 500 correspond souvent à la graisse "normal". La valeur 700 correspond à gras. La valeur 900 correspond (théoriquement) à plus gras.

Si la propriété autorise de nombreuses valeurs, la totalité de ces valeurs ne sera cependant pas prise en compte par toutes les polices car elles n’ont pas toutes plusieurs (jusqu’à 9...) versions de caractères en gras.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>font-weight</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p style="font-weight: bold;">Texte en gras</p> <p style="font-weight:900;">Texte en gras</p> </body> </html>

Pour le moins, la différence n’est pas sensible.


font-weight: normal ou bold ou bolder ou lighter ou une valeur entre 100 et 900.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQza0k0kv2izIgLAA==-enidentnumber

30

Taille

Peutêtre l’apport le plus spectaculaire des CSS en matière de caractères ! Alors que le Html vous limite à 7 tailles de caractères, les feuilles de style permettent de définir un nombre illimité de tailles de caractères et ceci avec de multiples notations.

La valeur de la taille peut être indiquée en points (pt) ou en pixels (px). La notation en points est plus utilisée pour les pages destinées à être imprimées et le pixel est plus répandu pour l’affichage à l’écran. On s’accorde à considérer 12px comme plus ou moins équivalent à 12pt.

Il n’y a pas d’espace entre la valeur et l’unité, 12px est correct, 12 px ne l’est pas. Les navigateurs de la famille Internet Explorer vous pardonneront ce petit écart de syntaxe. D’autres navigateurs, comme Firefox, sont plus stricts et ignoreront l’effet de style.

On peut aussi indiquer la valeur par rapport à la hauteur em d’une police. 1 em correspond à 100% de la taille en cours de la police, 1.2 em à 120%, 0.8 em à 80%... Son usage est donc limité aux polices.

Les valeurs xx-small, x-small, small, medium, large, x-large, xx-large sont illustrées ciaprès :

Les valeurs par motclé (xx-small, x-small, etc.), smaller, larger, en pourcentage et en em sont aussi appelées valeurs relatives car elles dépendent d’un autre élément, généralement la taille de caractères de l’élément parent.

La taille peut varier d’un système d’exploitation à l’autre. Ainsi, une taille de caractères de 12 points apparaîtra plus grande sous Windows que sur un Macintosh.

Exemple :


font-size:

valeur en pt ou valeur en px ou valeur en em ou xx-small, x-small, small, medium (défaut), large, x-large, xx-large ou smaller, larger, soit plus petit, plus grand par rapport à l’élément parent ou en pourcentage de la taille de l’élément parent.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZyVsof2izIgLAA==-enidentnumber

31

<html> <head> <title>font-size</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p><font size="7">Le maxi en Html</font></p> <p style="font-size: 96px">En CSS</p> </body> </html>

Limité pour des raisons de mise en page du livre, on aurait pu afficher des tailles de caractères encore plus grandes dans l’exemple.



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZyVsof2izIgLAA==-enidentnumber

32

Raccourci font

Bien que les propriétés de police peuvent être définies de façon indépendante, le raccourci font permet de regrouper, en une seule déclaration, les différentes propriétés font-style, font-variant, font-weight, font-size et font-family, ce qui représente, dans la pratique de l’écriture, un gain de temps appréciable.

Les différents attributs doivent être indiqués à la suite, séparés d’un espace.

L’ordre n’a pas d’importance. Il n’est pas obligatoire de définir chaque propriété de police. Pour les propriétés non définies, les valeurs par défaut seront retenues.

Exemple : font: italic bold small-caps 24pt Arial, sans-serif;

Cette seule déclaration correspond à :

font-style: italic;

font-weight: bold;

font-variant: small-caps;

font-size: 24pt;

font-family: Arial, sans-serif;

Le raccourci font permet également de définir l’interligne (propriété de texte abordée au Chapitre Texte point Espace entre les lignes). La notation est un peu particulière. On indique la valeur de taille de caractère (propriété font-size), suivie d’une barre oblique, suivie de la valeur de l’interligne (propriété line-height). Ainsi, dans notre exemple de la propriété font : font: italic bold small-caps 24pt/1.5 Arial, sans-serif; la taille de la police serait de 24 points et l’interligne de 1,5.

Exemple

<!DOCTYPE HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Raccourci font</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <p>Le raccourci font</p> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4/u7wP2izIgLAA==-enidentnumber

33



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4/u7wP2izIgLAA==-enidentnumber

34

Couleur

Cette propriété permet de définir la couleur du texte.

Les différentes notations des couleurs ont été abordées en détail dans la partie Feuilles de style, chapitre Notions de base Notation des couleurs.

Ainsi, il est équivalent de noter pour désigner la couleur rouge :

color: red;

color: #ff0000;

color: #f00;

color: rgb(100%,0%,0%);

color: rgb(255,0,0);

Notons que la couleur par défaut est le noir.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>color</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="color: #ff0000;">Titre en rouge</h1> </body> </html>

Bien que prévue pour le texte, cette propriété peut s’appliquer à d’autres éléments comme les lignes horizontales (<hr>) et les éléments de formulaires.


color:

nom de couleur ou

notation hexadécimale sous sa forme #xxxxxx ou

notation hexadécimale abrégée sous la forme #xxx ou

notation en mode RVB avec des % de 0 à 100 ou

notation en mode RVB avec des entiers de 0 à 255.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzYzl5Bv6izIgLAA==-enidentnumber

35

Indentation

Cette propriété permet d’indenter la première ligne de texte d’un paragraphe. Ce léger retrait, non prévu dans le Html, était obtenu par la répétition disgracieuse dans le code, de nombreux espaces insécables ( ).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>text-indent</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p>Paragraphe normal</p> <p style="text-indent: 20px;">Paragraphe indenté</p> </body> </html>

La valeur de l’indentation peut être négative. Ceci permet de réaliser certains effets particuliers mais le résultat n’est pas toujours garanti.


text-indent: valeur précise (par exemple 20px) ou valeur relative en pourcentage par rapport à la largeur du paragraphe.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzUUl/Nf6izIgLAA==-enidentnumber

36

Décoration

Cette propriété permet de personnaliser l’apparence du texte, par exemple avec le soulignement.

Rien n’empêche de définir plusieurs valeurs de "décoration". Il suffit de les séparer par un espace. Par exemple, text-decoration: underline overline;

Dans ce cas, votre texte sera en même temps souligné et surligné.

La valeur blink n’est pas implémentée dans Internet Explorer [et c’est tant mieux !].

La valeur line-through est particulièrement utile dans les sites commerciaux pour indiquer une révision de prix. Par exemple, "maintenant à 85€".

Appliquée à la balise de lien (<a>), la déclaration de style text-decoration: none; enlèvera le soulignement par défaut des liens (cf. chapitre Classes et pseudoclasses Pseudoclasses de lien).

N’utilisez que très rarement le soulignement dans la conception de vos pages Html. En effet, le soulignement sur le Web indique par convention un lien. Il n’y a rien de plus agaçant de cliquer sur ce que l’on pense être un

lien et qui ne se révèle qu’un soulignement inapproprié. Il existe en Html, comme en CSS, d’autres façons de mettre des éléments en évidence.

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>text-decoration</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p style="text-decoration: overline;">Texte surligné</p> <p style="text-decoration: underline;">Texte souligné</p> <p style="text-decoration: underline overline;">Texte souligné et surligné</p> <p style="text-decoration: line-through;">Texte barré</p> </body> </html>

text-decoration:

underline. Souligne le texte.

overline. Surligne le texte.

line-through. Barre le texte en son milieu.

blink. Fait clignoter le texte.

none. Enlève toute apparence définie par ailleurs.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz8Q2EWP6izIgLAA==-enidentnumber

37

La compatibilité de cette propriété (CSS1) peut être considérée comme parfaite pour tous les navigateurs prenant en charge les feuilles de style sauf, pour rappel, la valeur blink qui n’est pas reconnue par Internet Explorer.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz8Q2EWP6izIgLAA==-enidentnumber

38

Transformation

Cette propriété affiche du texte en majuscules ou en minuscules, quelle que soit la façon dont figurent les lettres dans le code source.

Si cette propriété ne paraît pas d’une utilité évidente dans le domaine de l’édition, elle sera appréciée pour formater les données destinées à des bases de données ou provenant de cellesci.

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>text-transform</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h2 style="text-transform: capitalize;">texte en minuscules</h2> <h2 style="text-transform: uppercase;">texte en minuscules</h2> <h2 style="text-transform: lowercase;">TEXTE EN MAJUSCULES</h2> </body> </html>


text-transform:

capitalize. Met la première lettre de chaque mot en majuscule.

uppercase. Met toutes les lettres en majuscules.

lowercase. Met toutes les lettres en minuscules.

none. Laisse les lettres inchangées.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzlU+WYf6izIgLAA==-enidentnumber

39

Espace entre les lettres

Cette propriété permettra de faire varier l’espacement entre les caractères, ce qui, utilisé sans exagération, peut favoriser la lisibilité d’un texte.

Les valeurs de longueur doivent être déterminées (valeurs absolues). Les valeurs relatives, en pourcentage par exemple, ne sont pas admises ici.

Les valeurs de longueur peuvent être négatives.

La justification du texte permet au navigateur de modifier l’interlettrage. Une valeur définie à 0 empêchera la justification du texte.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>letter-spacing</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h2 style="letter-spacing: 15px;">Texte étiré</h2> <h2>Texte normal</h2> <h2 style="letter-spacing: -3px;">Texte comprimé</h2> </body> </html>

Pour empêcher que la propriété ne rapproche trop les caractères et donc les mots et rende ainsi le texte illisible, on peut la coupler avec un espacement de mots normal wordspacing: normal; (voir propriété ciaprès).


letter-spacing: valeur de longueur (par exemple 8px) normal


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQznzqlhv6izIgLAA==-enidentnumber

40

Espace entre les mots

Cette propriété, très proche de la précédente concernant l’espace entre les lettres, permet ici de faire varier l’espacement entre les mots. Ce qui, utilisé sans exagération, peut favoriser la lisibilité d’un texte.

Les valeurs de longueur doivent être déterminées (valeurs absolues). Les valeurs relatives, en pourcentage par exemple, ne sont pas admises ici.

Les valeurs de longueur peuvent être négatives.

La justification du texte permet au navigateur de modifier l’espace entre les mots. Une valeur de 0 empêchera la justification du texte.

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>word-spacing</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h3 style="word-spacing: 15px;">Les mots, toujours les mots</h3> <h3>Les mots, toujours les mots</h3> <h3 style="word-spacing: -3px;"> Les mots, toujours les mots</h3> </body> </html>


word-spacing: valeur de longueur (par exemple 8px) ou normal


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzv7s5kf6izIgLAA==-enidentnumber

41

Espaces vides

Cette propriété permet de contrôler les espaces vides.

Depuis ses origines, le langage Html ignore les espaces vides qu’il ramène à un seul espace ainsi que les retours chariot. Les espaces vides multiples et les retours chariot sont pris en charge en Html par la balise <pre> ... </pre>. De même que l’attribut nowrap empêche la rupture de ligne automatique.

Rien de bien révolutionnaire dans cette propriété, qui reprend pre et nowrap du Html.

La valeur pre préserve les espaces multiples et les retours chariot.

La valeur nowrap empêche la rupture de ligne.

La valeur normal laisse le navigateur gérer à son gré les espaces multiples, les retours chariot et les ruptures de ligne.

Exemple d’utilisation de pre

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>white-space</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h2 style=" white-space: pre;">E d i t i o n s E n i Ressources informatiques</h2> </body> </html>

Exemple d’utilisation de nowrap

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>white-space</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <table border="1" width="160" bordercolor="#000000" cellspacing="0"> <tr> <td>Depuis ses origines, le langage Html ignore les espaces vides qu’il ramène à un seul espace. </td>

white-space: pre ou nowrap ou normal


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz39aWdRmjzIgLAA==-enidentnumber

42

</tr> </table> <p> </p> <table border="1" width="160" bordercolor="#000000" cellspacing="0"> <tr> <td style="white-space: nowrap;">Depuis ses origines, le langage Html ignore les espaces vides qu’il ramène à un seul espace. </td> </tr> </table> </body> /html

Cette propriété (CSS2) peut être considérée comme compatible pour tous les navigateurs récents (sauf Internet Explorer 5 cependant).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz39aWdRmjzIgLAA==-enidentnumber

43

Espace entre les lignes

Cette propriété offre la possibilité (qui n’existe pas en Html) de modifier les interlignes.

Un nombre multiplie l’interligne induit par la taille de la police de caractères. Par exemple, 2 pour un double interligne.

Une valeur de longueur détermine l’interlignage sans tenir compte de la police. Par exemple, 18px. La valeur donnée peut être négative, ce qui diminuera l’interligne normal.

Un pourcentage détermine l’interligne en pourcentage de l’interligne induit par la taille de la police. Ainsi, un double interligne peut être déterminé par 200%.

none ne change rien à l’interligne normal.

Les navigateurs peuvent interpréter les tailles de caractères de façons différentes. Il est donc prudent de vérifier le résultat de l’interlignage sous différents navigateurs.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>line-height</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p style="line-height: 200%;">Les mots, toujours les mots<br> Les mots, toujours les mots<br> Les mots, toujours les mots</p> <p>Les mots, toujours les mots<br> Les mots, toujours les mots<br> Les mots, toujours les mots</p> </body> </html>

Il faut rappeler que le raccourci font (chapitre Police de caractères Raccourci font) permet également de déterminer l’interligne. L’interligne est défini avec la taille de caractères. La notation s’indique par la valeur de taille de caractère

line-height: un nombre ou une valeur de longueur ou un pourcentage ou none


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzq+sHhRmjzIgLAA==-enidentnumber

44

(propriété font-size), suivie d’une barre oblique, suivie de la valeur de l’interligne (propriété line-height). Par exemple :

font: italic bold small-caps 24pt/1.5 Arial, sans-serif;



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzq+sHhRmjzIgLAA==-enidentnumber

45

Alignement horizontal

Cette propriété permet de réaliser un alignement comme dans le plus banal traitement de texte.

La justification, qui donne à chaque ligne de texte la même longueur, entraîne parfois à l’écran des résultats inattendus, voire décevants.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>text-align</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <table border="1" width="170" bordercolor="#000000" cellspacing="0"> <tr> <td style="text-align:justify;">Depuis ses origines, le langage Html ignore les espaces vides qu’il ramène à un seul espace. </td> </tr> </table> </body> </html>


text-align:

left. Texte aligné à gauche. (par défaut)

right. Texte aligné à droite.

center. Texte centré.

justify. Texte justifié


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzL1NAjhmjzIgLAA==-enidentnumber

46

Alignement vertical

Cette propriété détermine l’alignement vertical d’un texte par rapport à un autre élément du code.

Les valeurs baseline, sub et super s’utilisent par rapport à une ligne de texte :

La valeur baseline aligne le texte par rapport au bas de la ligne de texte (ligne de base).

La valeur sub met le texte concerné en indice, soit en dessous de la ligne de base.

La valeur super met le texte concerné en exposant, soit audessus de la ligne de base.

Un alignement sans mention de valeur, de longueur ou de pourcentage laisse la main au navigateur pour l’affichage.

Les valeurs top, text-top, middle, bottom, text-bottom alignent de façon relative à l’élément parent, qui peut être du texte ou encore une ou des cellule(s) de tableau :

La valeur top aligne par rapport au haut de l’élément parent.

La valeur middle aligne par rapport au milieu de l’élément parent.

La valeur bottom aligne par rapport au bas de l’élément parent.

Une valeur de longueur positive positionne le texte audessus de la ligne de base, une valeur négative, en dessous. Par exemple, vertical-align: 1.7em mettra le texte en exposant.

Un pourcentage positif positionne le texte audessus de la ligne de base, une valeur négative, en dessous. Par exemple, vertical-align: -20% mettra le texte en indice.

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>vertical-align</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h2>Ressources <i style="vertical-align:super;">Informatiques</i></h2> <h2>Ressources <i style="vertical-align:baseline;">Informatiques</i></h2> <h2>Ressources <i style="vertical-align:sub;">Informatiques</i></h2> </body> </html>

vertical-align:

baseline; (par défaut)

sub;

super;

top;

middle;

bottom;

sans mention

valeur de longueur

pourcentage


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz38vGlRmjzIgLAA==-enidentnumber

47

Exemple 2 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>vertical-align</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <table border="1" width="200" cellspacing="0" bordercolor="#000000"> <tr> <td width="100"><br> </td> <td style="vertical-align:top;">texte</td> </tr> <tr> <td width="100"><br> </td> <td style="vertical-align:middle;">texte</td> </tr> <tr> <td width="100"><br> </td> <td style="vertical-align:bottom;">texte</td> </tr> </table> </body> </html>



48




49

Direction du texte

Cette propriété permet de changer la direction d’écriture du texte. Si le français se lit de gauche à droite, cette propriété de style sera particulièrement utile pour les langues qui se lisent de droite à gauche.

Attention à la compatibilité de la propriété (CSS2) rtl. Elle n’est prise en compte qu’à partir de la version 6 d’Internet Explorer.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>direction</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p style="direction:rtl;">Ressources Informatiques</p> <p style="direction:ltr;">Ressources Informatiques</p> </body> </body> </html>

direction: ltr (left to right). Écriture de gauche à droite.

rtl (right to left). Écriture de droite à gauche.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzEdk/nBmjzIgLAA==-enidentnumber

50

Longueur et hauteur

Les propriétés de style width et height vont permettre d’associer à certaines balises de texte, respectivement la largeur et la hauteur d’une zone entourant le contenu textuel.

Cette propriété est très utile car elle évite de passer par l’astuce de tableaux factices pour afficher du texte dans une zone rectangulaire.

Les valeurs width et height spécifient la largeur et la hauteur du contenu.

Une valeur de longueur spécifie une valeur fixe.

Un pourcentage spécifie une valeur relative.

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>text-align</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h3 style="width: 235px; text-align:justify;"> Depuis ses origines, le langage Html ignore les espaces vides qu’il ramène à un seul espace.</h3> </body> </html>

Les propriétés width et height nécessitent de nombreux commentaires. Nous réservons ceuxci pour leur étude détaillée au chapitre L’élément boîte Longueur et hauteur.


width:

height: valeur de longueur ou pourcentage


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQziauhpBmjzIgLAA==-enidentnumber

51

Sortes de marqueurs

Cette propriété permet de déterminer l’apparence de la puce ou le style de numérotation de la liste.

Les éléments disc, circle, square sont identiques à ceux de la balise <ul> en Html.

Même constatation pour les numérotations de la balise <ol>.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>list-style-type</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <ul> <li style="list-style-type:disc;">Disque plein</li> <li style="list-style-type:circle;">Cercle</li> <li style="list-style-type:square;">Carré</li> </ul> <ol> <li style="list-style-type:decimal;">Décimal</li> <li style="list-style-type:upper-roman;">Romain majuscule</li> <li style="list-style-type:lower-roman;">Romain minuscule</li> <li style="list-style-type:upper-alpha;">Alphabet majuscule</li> <li style="list-style-type:lower-alpha;">Alphabet minuscule</li> </ol> </body> </html>

list-style-type:

disc; Cercle plein.

circle; Cercle.

square; Carré.

decimal; Soit 1, 2, 3, etc.

upper-roman; Soit I, II, III, etc.

lower-roman; Soit i, ii, iii, etc.

upper-alpha; Soit A, B, C, etc.

lower-alpha; Soit a, b, c, etc.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzu+dLrBmjzIgLAA==-enidentnumber

52



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzu+dLrBmjzIgLAA==-enidentnumber

53

Marqueur graphique

Cette propriété de CSS apporte une réelle nouveauté car elle permet de créer ses propres puces à partir d’une image, ce qui apporte un peu de diversité par rapport aux puces du Html.

La valeur url(votre_puce.gif) désigne l’adresse de l’image à utiliser comme puce. On peut employer une adresse relative vers une image comprise dans le même dossier (comme dans notre exemple) ou une adresse absolue (avec http://...).

Les images peuvent être au format gif, jpeg ou png.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>list-style-image</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <ul style="list-style-image: url(fleche.gif);"> <li>Elément 1</li> <li>Elément 2</li> <li>Elément 3</li> <li>Elément 4</li> </ul> </body> </html>


list-style-image: url(votre_puce.gif);

none;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzf6XVshmjzIgLAA==-enidentnumber

54

Retrait

Cette propriété détermine la position de la seconde ligne (et des suivantes) d’un élément de liste par rapport à la puce ou la numérotation.

La valeur outside est la présentation classique des listes avec toutes les lignes de l’élément en retrait par rapport à la puce ou au numéro.

La valeur inside est une présentation un peu particulière avec un retrait uniquement sur la première ligne de l’élément de la liste. Les autres lignes de l’élément viennent s’aligner sur le marqueur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>list-style-position</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <ul> <li style="list-style-position: outside;">Elément 1<br> Suite élément 1<br>Suite élément 1</li> </ul> <ul> <li style="list-style-position: inside;">Elément 2<br> Suite élément 2<br>Suite élément 2</li> </ul> </body> </html>


list-style-position: outside; (par défaut)

inside;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzUwwRvhmjzIgLAA==-enidentnumber

55

Raccourci listestyle

Cette propriété permet de reprendre dans une seule déclaration de style les valeurs précédentes (list-style-type, list-style-image, list-style-position).

Par exemple, list-style: url(fleche.gif) circle inside;

Les valeurs sont regroupées et séparées par des espaces.

Il peut sembler bizarre de déterminer une puce en image et une puce de type cercle. En CSS, cela signifie que si le navigateur ne trouve pas l’image à l’adresse spécifiée, il affichera une puce en forme de cercle.

Aucune de ces valeurs n’est obligatoire.

On peut aussi ne définir qu’une seule valeur.



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzS3YLxxmjzIgLAA==-enidentnumber

56

Couleur

Le Html offre la possibilité d’ajouter une image de fond aux pages Html et éventuellement aux tableaux et aux cellules de tableaux. Les feuilles de style CSS vont décupler les possibilités des arrièreplans et les étendre à tous les éléments qui s’y prêtent. En outre, l’image d’arrièreplan ne sera plus obligatoirement disposée en mosaïque mais pourra être contrôlée au gré de la créativité du concepteur.

Les arrièreplans CSS constituent ainsi un apport important dans la création de pages Web par rapport au Html.

Cette propriété permet de donner une couleur de fond à l’élément.

Les différentes notations des couleurs ont été abordées en détail dans la partie Feuilles de style CSS, chapitre Notions de base Notation des couleurs.

Notons que la valeur transparent, lorsqu’elle est appliquée à l’arrièreplan de la page, ne fait que reprendre la couleur par défaut du navigateur.

Exemple 1 :

Mettre une couleur de fond à la page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-color 1</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-color:#99ccff;"> </body> </html

Exemple 2 :

Mettre une couleur de fond à un élément (ici, à un titre de niveau 2).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-color 2</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head>

background-color:

nom de couleur ou


notation hexadécimale abrégée sous la forme #xxx

ou notation en mode RVB avec des % de 0 à 100 ou

notation en mode RVB avec des entiers de 0 à 255

ou transparent


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzud8hzhmjzIgLAA==-enidentnumber

57

<body> <h2 style="background-color:#99ccff;">Ressources Informatiques</h2> </body> </html>



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzud8hzhmjzIgLAA==-enidentnumber

58

Image

Cette propriété insère une image de fond disposée de façon classique en mosaïque.

On peut utiliser l’adressage relatif ou absolu pour indiquer l’adresse de l’image.

Les images peuvent être au format gif, jpeg ou png.

La valeur none n’affiche aucune image d’arrièreplan (défaut).

Exemple :

Mettre une image de fond à la page (présentation classique).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-image</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(pt_bg.jpg); "> </body> </html>


background-image: url(xxxxx.gif);

none;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZS/D1xmjzIgLAA==-enidentnumber

59

Répétition de l’image

Cette propriété donne le contrôle au concepteur quant à la répétition de l’image qui ne sera ainsi plus nécessairement disposée en mosaïque.

C’est évidemment une des propriétés les plus spectaculaires des CSS car cette possibilité n’est pas présente dans le Html.

Cette déclaration de style n’a d’effet, évidemment, que si une image de fond a été définie par background-image: url(xxx.gif).

La valeur repeat répète l’image horizontalement et verticalement. Le résultat est des plus classiques et en tout point semblable à la déclaration background-image: url(xxxx.gif).

La valeur repeat-x répète l’image seulement horizontalement (selon l’axe des x). L’image forme ainsi une ligne horizontale dans le haut de l’élément.

La valeur repeat-y répète l’image seulement verticalement (selon l’axe des y). L’image forme ainsi une ligne verticale le long du côté gauche de l’élément.

La valeur no-repeat affiche l’élément une seule fois sans le répéter.

Exemple 1 :

Illustrons la valeur repeat-x.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-repeat 1</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(pt_bg.jpg); background-repeat: repeat-x;"> </body> </html>

Exemple 2 :

background-repeat:

repeat;

repeat-x;

repeat-y;

no-repeat;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzteqK3hmjzIgLAA==-enidentnumber

60

Illustrons la valeur repeat-y.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-repeat 2</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(pt_bg.jpg); background-repeat: repeat-y;"> </body> </html>

Exemple 3 :

Illustrons la valeur no-repeat.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-repeat 3</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(bg.jpg); background-repeat: no-repeat;"> </body> </html>

Rien n’empêche de définir (par background-color) une couleur d’arrièreplan en même temps qu’une image d’arrièreplan. Ceci vaut également pour les propriétés d’arrièreplan abordées ciaprès dans ce chapitre.



61

Exemple 4 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-repeat 3</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(bg.jpg); background-color: #9acef6; background-repeat: no-repeat;"> </body> </html>




62

Positionnement de l’image

Cette propriété va permettre de positionner précisément l’image de fond dans un élément, au pixel près.

Soit, par exemple :

background-position: 50px 100px;

background-position: 20% 50%;

background-position: center center;

Cette déclaration de style n’a de sens que si une image de fond a été définie par

background-image: url(xxx.gif).

Cette déclaration ne s’utilise généralement que lorsque l’image n’est pas répétée

(background-repeat: no-repeat).

La première valeur a trait à la position par rapport au bord gauche (axe horizontal) et la seconde valeur à la position par rapport au bord supérieur (axe vertical). Les deux valeurs sont séparées par un espace.

Les pourcentages respectent le même principe mais évidemment en pourcentage de la taille de l’élément.

On peut ne donner qu’une valeur. Dans ce cas, celleci sera interprétée comme étant la valeur horizontale (la première valeur). La valeur verticale ou seconde valeur sera alors automatiquement définie par défaut à la valeur center ou 50%.

Les valeurs en pourcentage et de longueur peuvent être combinées. Ainsi, background-position: 50px 30%; est correct.

Les valeurs left (gauche), center (centre) ou right (droite) déterminent la position horizontale.

Les valeurs top (haut), center (centre), bottom (bas) déterminent la position verticale.

Les valeurs négatives sont acceptées.

Exemple 1 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-position 1</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(bg.jpg); background-repeat: no-repeat; background-position: 20px 20px;"> </body> </html>

background-position:

valeur de longueur valeur de longueur;

pourcentage pourcentage;

left ou center ou right; top ou center ou bottom;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz7wWT5RmjzIgLAA==-enidentnumber

63

Exemple 2 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-position 2</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(bg.jpg); background-repeat: no-repeat; background-position: 95% 95%;"> </body> </html>



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz7wWT5RmjzIgLAA==-enidentnumber

64

Défilement de l’image

Cette propriété permet de fixer une image de fond qui ne défile pas avec le reste de la page.

La valeur scroll fait défiler l’image d’arrièreplan avec le contenu de la page.

La valeur fixed laisse l’image d’arrièreplan fixe alors que le contenu de la page peut défiler.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>background-attachment</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body style="background-image: url(bg.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;"> </body> </html>


background-attachment: scroll;

fixed;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzIUI97RmjzIgLAA==-enidentnumber

65

Raccourci background

La propriété background permet de regrouper les différentes propriétés en une seule ligne en ne reprenant que les valeurs de cellesci.

Comme les différentes propriétés et valeurs d’arrièreplan sont assez longues à encoder manuellement, ce raccourci permet de gagner du temps mais réduit peutêtre la lisibilité du code.

background: url(xxx.gif) white no-repeat right top fixed;

Cette seule déclaration correspond à :

background-image: url(xxx.gif);

background-color: white;

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

Les différents attributs doivent être indiqués à la suite, séparés d’un espace.

L’ordre n’a pas d’importance.

Il n’est pas obligatoire de définir chaque propriété de l’arrièreplan ; pour les propriétés non définies, les valeurs par défaut seront retenues.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Raccourci background</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> </body> </html>



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzV9b98xmjzIgLAA==-enidentnumber

66

Notion de boîte

L’élément boîte est une notion importante en CSS. Cette notion, un peu abstraite, doit être correctement intégrée pour la suite de notre étude et tout particulièrement pour le chapitre concernant le positionnement.

Cet élément boîte est aussi appelé un conteneur ou bloc.

Tout élément du Html peut être considéré comme une boîte. Le rôle du navigateur est alors d’afficher toutes ces boîtes à l’écran selon ses propres spécifications.

La capture d’écran suivante illustre les éléments blocs créés par une page basique en Html.

Le W3C définit un élément boîte comme une zone rectangulaire constituée :

d’un contenu,

d’une marge intérieure (padding),

d’une bordure,

et d’une marge extérieure (margin).

Précisons si vous le voulez bien que :

le contenu peut être, par exemple, le texte d’un paragraphe.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzUT1S+xmjzIgLAA==-enidentnumber

67

celuici est entouré d’un espace allant du texte aux bordures du cadre, que l’on appellera la marge intérieure ou interne.

les bordures du cadre sont facultatives.

l’espace entourant le tout est appelé marge extérieure ou externe.

Les feuilles de style vont reprendre et étendre cette notion de boîte et donneront au concepteur le contrôle total des marges intérieure, extérieure, des bordures et de ces éléments boîte.

Avec les feuilles de style CSS, on pourra régler séparément :

les quatre marges extérieures et ce, dans toutes les directions,

les quatre bordures du cadre (dimension, style, couleur),

les quatre marges intérieures et ce, dans toutes les directions,

les dimensions (largeur et hauteur) du contenu.

La source principale de confusion est que, après avoir précisé la largeur et/ou la hauteur du contenu, on n’a pas explicitement défini la dimension totale de l’élément boîte qui comprend la dimension du contenu, la marge intérieure, la dimension de la bordure et la marge extérieure.

Ainsi, la propriété width appliquée au contenu (le petit rectangle central) n’est qu’un élément de la dimension de l’élément boîte, il faut y ajouter la marge intérieure, la bordure et la marge extérieure pour obtenir l’espace total réel de l’élément boîte. C’est bien entendu la même chose pour l’élément height.

La dimension totale de l’élément boîte se calcule donc ainsi : contenu + marges intérieures + bordures + marges extérieures.

Soit une boîte avec les propriétés suivantes :

largeur de contenu 200 pixels,

marge intérieure 20 pixels,

bordure d’une largeur de 10 pixels,

marge extérieure 20 pixels.

La largeur de l’élément boîte est donc bien, dans notre exemple, de 300 pixels qui se décompose ainsi (de gauche à droite) : 20 pixels de marge extérieure + 10 pixels pour la bordure + 20 pixels de marge intérieure + 200 pixels de contenu + 20 pixels de marge intérieure + 10 pixels de bordure + 20 pixels de marge extérieure. Le total est bien de 300 pixels.

Ce modèle standard de boîte, conforme aux recommandations du W3C, a été repris correctement par la plupart des navigateurs de Netscape, Mozilla, Firefox en passant par Opera sauf... par les navigateurs de la famille Internet Explorer qui suivent l’interprétation de Microsoft de ce concept de boîte.

Le modèle de boîte de Microsoft considère, pour sa part, que la marge intérieure et les bordures prennent place à l’intérieur de la zone de contenu. La largeur apparente d’une boîte sera alors égale à la seule largeur spécifiée pour le contenu à laquelle on ajoutera simplement les marges extérieures.



68

La boîte précédente n’occupera donc à l’écran qu’une largeur de 240 pixels. Sa zone de contenu se trouvera réduite des dimensions de bordure et de remplissage, soit ici 60 pixels par rapport au modèle standard.

Ainsi, notre boîte de 300 pixels selon la norme du W3C ne fera plus que 240 pixels, soit 20 pixels de marge extérieure + 200 pixels de contenu (bordures et marges intérieures comprises) + 20 pixels de marge extérieure.

Illustrons cette différence par un exemple.

<html> <head> <title>Elément boîte</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> p width: 200px; border: 10px solid #99c; padding: 20px; margin: 20px; background-color: #9cf; </style> </head> <body> <p>Notion de boîte en CSS</p> </body> </html>

Internet Explorer 7 (sans le doctype) affiche :

Ajoutons le doctype (comme nous l’avons toujours fait auparavant).


Internet Explorer 7 (avec le doctype) affiche :



69

On peut ainsi remarquer que l’interprétation de l’élément boîte est fort différente. Et ce avec le même navigateur !

Ceci illustre bien l’importance du doctype pour les pages Html comportant des feuilles de style CSS.

Microsoft Internet Explorer dans sa version 7 n’a pas corrigé ce bug déjà présent dans les versions 5.5 et 6. Microsoft promet de le faire disparaître dans la future version 8.

En ce qui concerne Firefox, celuici intègre correctement l’élément boîte, et ce, en toute circonstance.

Ce célèbre bug illustre très bien le genre de problèmes que l’on peut encore rencontrer à l’heure actuelle avec l’utilisation des feuilles de style CSS.



70

Balises div et span

Les balises <div> ... </div> et <span> ... </span> ont été créées spécialement pour un usage avec les feuilles de style (Html 4.0). Leur usage sera donc fréquent dans les CSS et leur utilité appréciable, surtout pour ce qui concerne le positionnement des éléments.

Jusqu’à présent, nous avions considéré que les déclarations de style s’appliquaient à des balises Html. Le W3C a considéré ce principe comme trop limitatif et a inventé ces sélecteurs neutres par rapport au code Html, ce sont ces balises div et span.

La balise <div> ... </div> vient du mot division. Elle introduit donc une division, un bloc structurel à l’intérieur de la page. Autrement dit, elle permet de découper dans la page des éléments boîte auxquels on peut appliquer un style particulier.

Il est possible de mettre tout ce que l’on veut à l’intérieur de cet élément boîte, des images, du texte, des paragraphes, des tableaux...

La balise <div> (puisqu’elle définit une division), entraîne un retour chariot avant et après le bloc qu’elle détermine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>div</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> - DIV -<div style="font-weight: bold;">La balise DIV introduit une division, un bloc structurel à l’intérieur de la page.</div> Elle ajoute un passage à la ligne avant et après. </body> </html>

Les balises <div> sont fréquemment utilisées pour la disposition des éléments dans la page Web. Elles remplacent ainsi avantageusement les tableaux de présentation utilisés auparavant.

La balise span n’introduit pas de division structurelle mais simplement une zone à l’intérieur d’un élément du code. Elle sert à découper, par exemple, une partie d’un paragraphe pour lui appliquer un style particulier. C’est ce qu’on appelle un élément en ligne.

Elle n’induit pas de retour chariot avant et après.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>span</title> <meta http-equiv="Content-Style-Type" content="text/css">

La balise div

La balise span


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzr7l7AhqjzIgLAA==-enidentnumber

71

</head> <body> <p>La balise span n’introduit pas une division structurelle mais simplement une <span style="background-color: #99ccff;"> zone à l’intérieur d’un élément</span> du code. </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzr7l7AhqjzIgLAA==-enidentnumber

72

Longueur et hauteur

Les propriétés de style width et height vont fixer respectivement la largeur et la hauteur de l’élément boîte.

Les valeurs width et height spécifient la largeur et la hauteur du contenu (sans marges intérieures, sans bordures et sans marges extérieures).

La valeur auto ajuste automatiquement la dimension au contenu.

Une valeur de longueur spécifie une valeur fixe.

Un pourcentage spécifie une valeur relative.

Notons qu’il existe en CSS2 les propriétés max-height, max-width, min-height et min-width qui sont reconnues par les versions récentes de Mozilla et Firefox mais qui ne sont pas reconnues par Internet Explorer 6. Elles sont cependant correctement interprétées sous Internet Explorer 7.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>width et height</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p style="width: 180px; height: 100px; overflow:hidden; background-color: #9cf;"> Les valeurs width et height spécifient la largeur et la hauteur du contenu. </p> </body> </html>

La propriété height est parfois quelque peu "capricieuse". En effet, le navigateur prend souvent le parti d’adapter la hauteur au contenu en l’absence de précisions dans le cas de débordement du contenu par rapport à la hauteur. La propriété CSS (voir chapitre Propriétés d’affichage à l’écran Dépassement) overflow règle le problème.

width:

height: auto ou valeur de longueur ou pourcentage


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzd7oRDhqjzIgLAA==-enidentnumber

73

Couleur de bordure

Ces propriétés de style permettent de définir la couleur des quatre bordures de l’élément boîte ou de chaque bordure prise individuellement.

La propriété CSS1 border-color définit la couleur (unique) des quatre côtés du cadre de l’élément boîte. Ainsi, avec la propriété border-color: red, les quatre bordures auront la couleur rouge.

La couleur ne peut être appliquée que si le type de la bordure (border-style) et l’épaisseur de la bordure (border-width) ont été définis, sans quoi la bordure est inexistante. Certains navigateurs n’interprèteront d’ailleurs pas les bordures si ces deux propriétés ne sont pas renseignées.

Les couleurs de chaque côté peuvent également être définies individuellement à l’aide des propriétés border-top-color, border-right-color, border-bottom-color et border-left-color. Les directions top, right, bottom, left désignent respectivement la bordure supérieure, droite, inférieure et gauche.

On peut faire l’impasse sur l’écriture (un peu longue) des propriétés border-top-color, border-right-color, border-bottom-color et border-left-color, en attribuant une, deux, trois ou quatre couleurs à la propriété border-color :

Si une couleur est indiquée, elle sera appliquée aux quatre côtés.

Avec deux couleurs, la première sera appliquée aux côtés supérieur et inférieur, la seconde aux côtés latéraux (droite et gauche).

Avec trois couleurs, la première sera appliquée au côté supérieur, la seconde aux côtés latéraux et la troisième au côté inférieur.

Avec quatre couleurs, cellesci sont attribuées dans le sens des aiguilles d’une montre en partant du côté supérieur, soit côtés supérieur, droit, inférieur et gauche.

Avec la valeur transparent, la couleur des bordures est transparente mais cellesci existent bel et bien.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>border-color</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="border-style: solid; border-width: 5px; border-top-color: aqua; border-bottom-color: aqua; border-left-color: blue; border-right-color: blue; text-align: center;"> Contenu </h1> </body> </html>

border-color:

border-top-color:

border-right-color:

border-bottom-color:

border-left-color:

nom de couleur ou


notation hexadécimale abrégée sous la forme #xxx ou

notation en mode RVB avec des % de 0 à 100 ou

notation en mode RVB avec des entiers de 0 à 255 ou transparent


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzfeVtFxqjzIgLAA==-enidentnumber

74

La compatibilité de cette propriété, mélange de CSS1 et CSS2, ne peut être considérée comme parfaite pour tous les navigateurs. Des essais sous différents navigateurs sont néanmoins recommandés.

Si vous êtes lassé des formes rectangulaires et que vous ne voulez pas faire appel à des astuces graphiques, les navigateurs basés sur le moteur Mozilla (dont Firefox) possèdent une propriété CSS propre qui permet de définir le radius de l’angle du coin du rectangle de l’élément boîte.

Cette propriété ne fait pas encore partie des spécifications officielles des CSS mais devrait être reprise dans les CSS3.

Cette propriété n’est (bien entendu) pas encore reprise dans Internet Explorer 6 et 7. Cet exemple ne vaut donc que pour Firefox. Internet Explorer 6 affichera les bords de façon rectangulaire.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>letter-spacing</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h3 style="width: 220px; border: solid 5px black; text-align: center; padding: 5px; -moz-border-radius: 20%;">

Boîte avec bords arrondis</h3> </body> </html>

Bords arrondis (rounded corners)


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzfeVtFxqjzIgLAA==-enidentnumber

75

Épaisseur de bordure

Cette propriété permet de définir l’épaisseur des quatre bordures simultanément ou de chaque bordure individuellement.

La valeur thin intervient pour une bordure fine, medium pour une bordure moyenne et thick pour une bordure épaisse. L’interprétation de l’épaisseur à partir de ces mots clés varie d’un navigateur à l’autre.

L’épaisseur ne sera affichée que si le type de bordure (border-style) a été défini.

L’épaisseur de chaque côté peut également être définie individuellement à l’aide des propriétés border-top-width, border-right-width, border-bottom-width et border-left-width. Les directions top, right, bottom, left désignent respectivement la bordure supérieure, droite, inférieure et gauche. Ces propriétés sont des spécifications CSS2 et donc non reconnues par les anciens navigateurs.

On peut faire l’impasse sur l’écriture (un peu longue) des propriétés border-top-width, border-right-width, border-bottom-width et border-left-width, en attribuant une, deux, trois ou quatre épaisseurs à la propriété border-width.

Si une épaisseur est indiquée, elle sera appliquée aux quatre côtés.

Avec deux épaisseurs, la première sera appliquée aux côtés supérieur et inférieur, la seconde aux côtés latéraux (droite et gauche).

Avec trois épaisseurs, la première sera appliquée au côté supérieur, la seconde aux côtés latéraux et la troisième au côté inférieur.

Avec quatre épaisseurs, cellesci sont attribuées dans le sens des aiguilles d’une montre en partant du côté supérieur, soit côtés supérieur, droit, inférieur et gauche.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>border-width</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="border-style: solid; border-width: thin thick ; text-align: center;"> Contenu </h1> </body> </html>

border-width:

border-top-width:

border-right-width:

border-bottom-width:

border-left-width:

valeur de longueur;

thin;

medium;

thick;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzMUOeIRqjzIgLAA==-enidentnumber

76

La compatibilité de cette propriété, mélange de CSS1 et CSS2, ne peut être considérée comme parfaite pour tous les navigateurs. Des essais sous différents navigateurs sont recommandés.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzMUOeIRqjzIgLAA==-enidentnumber

77

Style de bordure

Cette propriété CSS apporte une variété de styles de bordures par rapport au seul style de bordures du Html, ce qui ne peut que réjouir les concepteurs.

Il convient d’illustrer ces différentes bordures, qui pour la plupart sont nouvelles dans le domaine de la conception de pages Web. Ainsi, le mot clé affiche :

solid : un trait plein,

dashed : des tirets,

dotted : des pointillés,

double : des doubles traits pleins,

groove : effet 3D gravé dans la page (opposé de ridge),

ridge : effet 3D sortant de la page (opposé de groove),

inset : bordures rentrantes, incrustées dans la page (inverse de outset),

outset : bordures sortantes extrudées de la page (inverse de inset),

hidden : pas de bordure (influe sur la bordure adjacente),

none : équivaut à border-width: 0px, soit pas de bordure.

border-style:

border-top-style:

border-right-style:

border-bottom-style:

border-left-style:

solid ou dashed ou dotted ou double ou goove ou ridge ou inset ou outset ou hidden ou none;

solid

dashed

dotted

double

groove

ridge

inset


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzA/G6KRqjzIgLAA==-enidentnumber

78

Toutes les valeurs ne sont pas prises en compte par tous les navigateurs.

Pour double, la largeur définie par border-width correspondra à la taille des 2 traits et de l’espace entre ceuxci.

Le style ne sera affiché que si l’épaisseur de bordure (border-width) a été définie.

Le style de chaque côté peut également être défini individuellement à l’aide des propriétés border-top-style, border-right-style, border-bottom-style et border-left-style. Les directions top, right, bottom, left désignent respectivement la bordure supérieure, droite, inférieure et gauche.

On peut faire l’impasse sur l’écriture (un peu longue) des propriétés border-top-style, border-right-style, border-bottom-style et border-left-style, en attribuant une, deux, trois ou quatre épaisseurs à la propriété border-style :

Si un style est indiqué, il sera appliqué aux quatre côtés.

Avec deux styles, le premier sera appliqué aux côtés supérieur et inférieur, le second aux côtés latéraux (droite et gauche).

Avec trois styles, le premier sera appliqué au côté supérieur, le second aux côtés latéraux et le troisième au côté inférieur.

Avec quatre styles, ceuxci sont attribués dans le sens des aiguilles d’une montre en partant du côté supérieur, soit côtés supérieur, droit, inférieur et gauche.

Le résultat au niveau des raccords n’est pas garanti.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>border-style</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="border-style: double; border-width: 10px; text-align: center ">Une bordure qui a du style</h1> </body> </html>

outset



79


La ligne oblique n’existe pas en Html. Des esprits particulièrement attentifs ont remarqué que les bordures des éléments boîte en CSS se rejoignent sur une intersection oblique. En jouant sur la taille de l’élément boîte, sur les épaisseurs et les couleurs des différentes bordures, des effets surprenants peuvent être obtenus.

Vous trouverez plus de détails à l’adresse : http://www.ultrafluide.com/ressources/css/cssmondrian.htm.

À titre d’exemple, voici une figure réalisée uniquement avec des feuilles de style. Le rectangle du contenu a été réduit à zéro et tout le reste n’est que bordures.

Le code est :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Diagonale</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="width:0;height:0; border:60px solid; border-color:#99ccff #6699ff;"><div></div></div> </body> </html>

En aparté...



80

Raccourci border

Cette propriété de style permet de noter de façon raccourcie les différentes propriétés définissant les bordures d’un élément, soit border-color, border-style et border-width.

Par exemple : border: red double 5px;

Ceci ne vaut que dans le cas où les quatre bordures sont identiques.

Les valeurs de ces différentes propriétés sont regroupées et peuvent être énoncées à la suite, peu importe l’ordre, mais séparées par des espaces.

Pour une compatibilité optimale des navigateurs, il est recommandé que les trois propriétés soient renseignées.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Raccourci border</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="border: dotted 1px black; text-align: center;"> Raccourci border</h1> </body> </html>

La propriété border étant une propriété CSS1, sa compatibilité peut être considérée comme parfaite pour tous les navigateurs prenant en charge les feuilles de style.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzp9RqMBqjzIgLAA==-enidentnumber

81

Marges externes

Cette propriété permet de définir la marge extérieure de l’élément boîte.

La valeur auto laisse la main au navigateur pour afficher les marges externes.

Une valeur de longueur définit précisément les marges extérieures.

Un pourcentage définit la longueur par rapport à l’élément parent.

La marge extérieure de chaque côté de l’élément boîte peut également être définie individuellement à l’aide des propriétés margin-top, margin-right, margin-bottom et margin-left. Les directions top, right, bottom, left désignent respectivement la bordure supérieure, droite, inférieure et gauche. Ces propriétés sont des spécifications CSS2 et sont donc non reconnues par les anciens navigateurs.

On peut raccourcir l’écriture des propriétés de marge externe, margin-top, margin-right, margin-bottom et margin-left, en attribuant une, deux, trois ou quatre valeurs à la propriété margin :

Si une seule marge externe est indiquée, elle sera appliquée aux quatre côtés.

Avec deux marges, la première sera appliquée aux côtés supérieur et inférieur, la seconde aux côtés latéraux (droite et gauche).

Avec trois marges, la première sera appliquée au côté supérieur, la seconde aux côtés latéraux et la troisième au côté inférieur.

Avec quatre marges, cellesci sont attribuées dans le sens des aiguilles d’une montre en partant du côté supérieur, soit côtés supérieur, droit, inférieur et gauche.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>margin</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="border: 1px solid black; width: 250px;"> <div style="border: 1px solid black; margin: 60px 20px 3px 20px; text-align: center;"> marge extérieure </div> </div> </body> </html>

margin:

margin-top:

margin-right:

margin-bottom:

margin-left:

auto ou valeur de longueur ou pourcentage


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzaWZpNxqjzIgLAA==-enidentnumber

82



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzaWZpNxqjzIgLAA==-enidentnumber

83

Marges internes

Cette propriété permet de définir la marge intérieure de l’élément boîte.

La valeur auto laisse la main au navigateur pour afficher les marges internes.

Une valeur de longueur définit précisément les marges intérieures.

Un pourcentage définit la longueur par rapport à l’élément parent.

La marge intérieure de chaque côté de l’élément boîte peut également être définie individuellement à l’aide des propriétés padding-top, padding-right, padding-bottom et padding-left. Les directions top, right, bottom, left désignent respectivement la bordure supérieure, droite, inférieure et gauche. Ces propriétés sont des spécifications CSS2 et sont donc non reconnues par les anciens navigateurs.

On peut raccourcir l’écriture des propriétés de marge interne padding-top, padding-right, padding-bottom et padding-left, en attribuant une, deux, trois ou quatre valeurs à la propriété padding :

Si une seule marge interne est indiquée, elle sera appliquée aux quatre côtés.

Avec deux marges, la première sera appliquée aux côtés supérieur et inférieur, la seconde aux côtés latéraux (droite et gauche).

Avec trois marges, la première sera appliquée au côté supérieur, la seconde aux côtés latéraux et la troisième au côté inférieur.

Avec quatre marges, cellesci sont attribuées dans le sens des aiguilles d’une montre en partant du côté supérieur, soit côtés supérieur, droit, inférieur et gauche.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>padding</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style=" padding-top: 10px; padding-right: 20px; padding-bottom:30px; padding-left: 15px;" border: solid 1px ;">Les marges intérieures</div> </body> </html>

padding:

padding-top:

padding-right:

padding-bottom:

padding-left:

auto ou valeur de longueur ou pourcentage


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQziRYvQxqjzIgLAA==-enidentnumber

84



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQziRYvQxqjzIgLAA==-enidentnumber

85

Notion de classe (class et id)

Nous avons vu jusqu’à présent que les feuilles de style s’appliquaient à un sélecteur et que ce sélecteur pouvait être une balise Html (voir dans la partie Feuilles de style CSS, chapitre Notions de base).

Ensuite, nous avons vu au chapitre L’élément boîte que le Html 4 avait introduit les balises div et span dans l’optique de pouvoir disposer de sélecteurs neutres sans formatage.

Avec la notion de classe, le concepteur pourra définir luimême ses propres sélecteurs.

Les classes vous offrent deux possibilités, le sélecteur class ou le sélecteur id.

La définition d’une classe est .nom_de_la_classe déclaration(s) de style

Soit un point, suivi du nom que vous voulez attribuer à la classe, suivi de la déclaration de style entre des accolades. On parle alors de classe universelle.

Exemple :

.eni font-family: Verdana;

Cette définition de classe pourra être utilisée dans n’importe quelle balise du document. D’où le terme "universelle".

Il existe également une autre façon de définir une classe mais elle est nettement moins pratique (et donc moins utilisée) que la précédente.

nom_balise.nom_de_la_classe déclaration(s) de style

Soit un nom de balise, suivi d’un point, suivi du nom que vous voulez donner à la classe, suivi de la déclaration de style entre des accolades.

Exemple :

blockquote.eni font-family: Verdana;

Avec cette définition de classe, celleci ne pourra être appliquée qu’à la seule balise désignée, soit ici blockquote.

La définition de classe se place à l’intérieur de balises <style> ... </style> dans l’entête de la page (voir chapitre Application des CSS au Html CSS intégrée à un document Html) ou dans une feuille de style externe (voir chapitre Application des CSS au Html CSS indépendante du document Html).

Cependant, la classe ainsi définie n’a aucune influence aussi longtemps qu’elle n’est pas appelée dans le document.

L’appel de la classe de style se fait par :

<balise class="nom_de_la_classe">

Par exemple : <p class="eni"> ... </p>

Le point du sélecteur de classe n’est pas utilisé pour l’appel de la classe class (erreur fréquente).

Une même classe peut être appelée plusieurs fois dans le document Html.

<p class="eni"> ... </p> ... <p class="eni"> ... </p>

On peut mélanger les déclarations class et id ainsi que les déclarations en ligne.

Un nom de classe peut comporter des lettres et/ou des chiffres. Le nom de classe ne peut toutefois utiliser des noms réservés du JavaScript (voir Annexes Annexe 1 : Mots réservés JavaScript).

Exemple :


Le sélecteur class


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzu1LZShqjzIgLAA==-enidentnumber

86

<html> <head> <title>class</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .p1 font-variant:small-caps; font-weight:bold; </style> </head> <body> <p>Ce paragraphe affiche du texte normal.</p> <p class="p1">Voici un paragraphe avec un style défini par une classe. </p> </body> </html>

Le sélecteur id permet d’appliquer une feuille de style (comme le sélecteur class) mais il ne pourra être appelé qu’une seule fois dans le document Html.

Le sélecteur id permet d’identifier un élément unique dans la page. Cette distinction (assez subtile) prend toute son importance quand, comme dans le sujet de ce livre, on fait appel à du JavaScript ou du Dhtml. En effet, id ne pouvant être appelé qu’une fois dans le document par un élément, cet élément peut être traité comme un objet qui pourra par la suite, être éventuellement manipulé par le JavaScript.

La définition d’un id est :

#nom_de_la_classe déclaration(s) de style

Soit un dièse (#), suivi du nom que vous voulez donner à l’id, suivi de la déclaration de style entre des accolades.

Exemple :

#eni font-family: Verdana;

La définition de classe id se place à l’intérieur de balises <style> ... </style> dans l’entête de la page (voir chapitre Application des CSS au Html CSS intégrée à un document Html) ou dans une feuille de style externe (voir chapitre Application des CSS au Html CSS indépendante du document Html).

La classe ainsi définie n’a aucune influence aussi longtemps qu’elle n’est pas appelée dans le document.

L’appel de la classe de style se fait par :

<balise id="nom_de_la_classe">

Par exemple : <p id="eni"> ... </p>

Le dièse (#) n’est pas utilisé pour l’appel de la classe id (erreur fréquente).

Une même classe id ne peut être appelée qu’une fois dans le document Html. Ainsi, ce qui suit serait incorrect !

Le sélecteur id



87

<p id="eni"> ... </p> ... <p id="eni"> ... </p>

Un document peut comporter plusieurs id de noms différents mais ils ne pourront être appelés chacun qu’une seule fois.

On peut mélanger les déclarations class et id ainsi que les déclarations en ligne.

Un nom de classe peut comporter des lettres et/ou des chiffres. Le nom de classe ne peut utiliser des noms réservés du JavaScript (cf. Annexe 1 : Mots réservés JavaScript).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>id</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #idstyle border: 2px solid black; width: 200px; padding: 10px; text-align: center;"> </style> </head> <body> <div id="idstyle">Boite définie par id</div> </body> </html>



88

Notion de pseudoclasse

Dans un document Html, il existe des éléments non définis par une balise qui pourraient se révéler intéressants pour leur appliquer un effet de style comme, par exemple, le lien visité (attribut de la balise body) ou la première lettre d’un paragraphe.

Le W3C a introduit pour certains de ces éléments non référencés de la page, la notion de pseudoclasse. On parle aussi de pseudostyle ou pseudoélément.

La syntaxe des pseudoclasses est :

sélecteur:pseudo-classe déclaration(s) de style

Soit : le sélecteur, double point, le nom de la pseudoclasse suivi par la déclaration de style entre accolades.

Les pseudoclasses peuvent également être utilisées avec des classes. Elles se noteront alors : sélecteur.classe:pseudo-classe déclaration(s) de style

Soit : le sélecteur, point, le nom de la classe, double point, le nom de la pseudoclasse suivi par la déclaration de style entre accolades.

Tout comme pour les classes, les pseudoclasses sont définies à l’intérieur de balises <style> ... </style> dans l’entête de la page ou dans une feuille de style externe.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzwR/TURqjzIgLAA==-enidentnumber

89

Pseudoclasses de lien

1. a:link

La pseudoclasse a:link permet de définir l’apparence d’un lien qui n’a pas encore été sélectionné.

Exemple :

On ne peut manquer ce grand classique des feuilles de style qui consiste à ne pas souligner les liens par défaut.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>a:link</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> a:link text-decoration: none; </style> </head> <body> <a href="test.htm">Ceci est pourtant un lien !</a> </body> </html>

Notons que la déclaration de style a text-decoration: none; aurait été possible. Elle aurait enlevé le soulignement à tous les états du lien (link, active, hover et visited).

2. a:visited

La pseudoclasse a:visited permet de définir l’apparence d’un lien qui a été visité.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>a:visited</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> a:visited text-decoration: line-through; </style> </head> <body> <a href="test.htm">Ceci est un lien visité.</a> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzk56+WBqjzIgLAA==-enidentnumber

90

3. a:hover

La pseudoclasse a:hover permet de définir l’apparence d’un lien au passage du curseur de la souris.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>a:hover</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> a:hover font-weight: bold; </style> </head> <body> <a href="test.htm">Ceci est un lien.</a> </body> </html>

4. a:active

La pseudoclasse a:active permet de définir l’apparence d’un lien au moment où il est cliqué par le visiteur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>a:active</title> <meta http-equiv="Content-Style-Type" content="text/css">



91

<style type="text/css"> a:active text-decoration: underline overline; </style> </head> <body> <a href="test.htm">Ceci est un lien.</a> </body> </html>

À la pression du bouton de la souris :

Les pseudoclasses de lien sont des CSS1 et sont bien reconnues par les navigateurs récents.

La pseudoclasse :link s’utilise généralement conjointement avec :visited, :hover et :active.

Attention, pour obtenir un résultat correct, il est primordial d’énoncer les apparences de lien dans l’ordre suivant : :link - :visited - :hover - :active.



92

Pseudoclasses de paragraphe

1. :firstletter

Cette pseudoclasse permet de définir l’apparence de la première (et uniquement la première) lettre d’un paragraphe. On crée ainsi un effet de lettrine.

La pseudoclasse :first-letter admet les propriétés suivantes :

les propriétés de police (font),

color, pour la couleur du texte,

les propriétés d’arrièreplan (background),

text-decoration (souligner, surligner, barrer),

vertical-align pour positionner la lettre par rapport au texte (vertical-align ne s’utilise que si float a la valeur none),

text-transform (minuscules ou majuscules),

line-height pour l’interligne,

padding pour la marge interne,

margin pour la marge externe,

les propriétés de bordure (border),

float (voir chapitre Propriétés d’affichage à l’écran),

clear (voir chapitre Propriétés d’affichage à l’écran).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>first-letter</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .lettrine:first-letter float:left; margin-right: 5px; font-size: 3.5em; </style> </head> <body> <div style="border: 1px solid black; margin-left: 30px; width: 200px; padding:10px;"> <p class="lettrine">Voici un texte qui illustre l’effet de lettrine que l’on peut obtenir avec :first-letter.</p> </div> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZ3hmYBqjzIgLAA==-enidentnumber

93

La pseudoclasse first-letter est interprétée seulement à partir d’Internet Explorer 5.5 et plus pour Microsoft, correctement pour les autres navigateurs récents.

2. :firstline

Cette pseudoclasse permet de définir l’apparence de la première (et uniquement la première) ligne d’un paragraphe.

La longueur de la première ligne est variable, elle dépend de la largeur de l’élément boîte, de la taille de police, etc.

La pseudoclasse :first-line admet seulement les propriétés suivantes :

les propriétés de police (font),

color, pour la couleur du texte,

les propriétés d’arrièreplan (background),

word-spacing pour l’espacement entre les mots,

letter-spacing pour l’espacement entre les caractères,

text-decoration (souligner, surligner, barrer),

vertical-align pour la lettre par rapport au texte (vertical-align ne s’utilisera que si float a la valeur none),

text-transform (minuscules ou majuscules),

line-height pour l’interligne,

clear (voir chapitre Propriétés d’affichage à l’écran).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>first-line</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .ligne1:first-line font-variant: small-caps; </style> </head>



94

<body> <div style="border: 1px solid black; margin-left: 30px; width: 200px; padding:10px;"> <p class="ligne1">Voici un texte qui illustre l’effet de style que l’on peut obtenir avec :first-line.</p> </div> </body> </html>

La pseudoclasse first-line est interprétée seulement à partir d’Internet Explorer 5.5 et plus pour Microsoft, correctement pour les autres navigateurs récents.



95

Positionnement

En Html, le positionnement exact d’un élément tourne rapidement au cauchemar et il ne peut généralement se réaliser que grâce à un "puzzle" de tableaux imbriqués.

Les feuilles de style viennent à votre secours pour positionner, au pixel près, un élément dans votre document Html. Éditées à l’origine sous le terme CSSP, ces propriétés de positionnement ont été reprises sous la spécification CSS2.

Ces éléments ainsi positionnés par les feuilles de style CSS pourront éventuellement être rendus dynamiques par l’apport du Dhtml.

Un élément peut se positionner de quatre façons différentes.

1. Positionnement statique

C’est le positionnement normal de l’élément selon la façon habituelle de procéder du navigateur.

Le positionnement statique se détermine par :

Le concepteur n’a donc pas le contrôle et l’élément ne peut être positionné ou repositionné.

2. Positionnement relatif

C’est le positionnement d’un élément par rapport à sa position normale ou statique. Cet élément reste dans le flux des données mais est en quelque sorte "excentré" par rapport à sa position normale.

La position est définie par les coordonnées (x,y) où :

x est le déport sur l’axe horizontal par rapport à la position normale de l’élément. Ainsi, left détermine la distance entre la gauche de l’élément en position relative et la gauche de l’élément en position normale. De même, right, détermine la distance entre la droite de l’élément en position relative et la droite de l’élément en position normale.

y est le déport sur l’axe vertical par rapport à la position normale de l’élément. Ainsi, top détermine la distance entre le bord supérieur de l’élément en position relative et le bord supérieur de l’élément dans sa position normale. De même, bottom détermine la distance entre le bord inférieur de l’élément en position relative et le bord inférieur de l’élément dans sa position normale.

Le positionnement relatif se détermine par :

position: static;

position: relative;

left: valeur ou %;

top: valeur ou %;

right: valeur ou %;

bottom: valeur ou %;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzgejFaBqjzIgLAA==-enidentnumber

96

En pratique, une seule spécification sur l’axe horizontal (left ou right) et une seule spécification sur l’axe vertical (top ou bottom) suffisent.

Les propriétés top, left, right et bottom peuvent également s’exprimer en pourcentage de l’élément parent.

Les valeurs de top, left, right et bottom peuvent être négatives.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>relative</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="width: 180px; border: 2px solid black; text-align: center;"> Position normale statique </div> . . . . . . . . . . . . . . . . . . . . . . . . . . . <div style="position: relative;left: 30px; top: 30px; width: 180px; border: 2px solid black; text-align: center;"> Position relative </div> </body> </html>

Les propriétés de positionnement sont bien acceptées par les navigateurs récents.

3. Positionnement absolu

Le positionnement absolu crée un élément indépendant du reste du document. Les éléments définis en position absolue sont retirés du flux normal et se positionnent à l’emplacement exact défini par le concepteur. D’où l’expression "au pixel près".

La position est définie par les coordonnées (x,y) où :

x est la distance par rapport au bord gauche de l’élément parent ou de la fenêtre du navigateur (axe horizontal). Ainsi, left détermine la distance entre la gauche de l’élément et la gauche de la page et right, la distance entre la droite de l’élément et la droite de la page.

y est la distance par rapport au bord supérieur de l’élément parent ou de la fenêtre du navigateur (axe



97

vertical). Ainsi, top détermine la distance entre le bord supérieur de l’élément et le bord supérieur de la page et bottom, la distance entre le bord inférieur de l’élément et le bord inférieur de la page.

Ainsi pour faire bouger un élément vers la droite par le Dhtml, on augmentera la valeur de la coordonnée x et pour descendre l’élément, on augmentera la valeur de la coordonnée y.

Le positionnement absolu n’est pas sans risque pour l’affichage correct de la page sous d’autres résolutions d’écran que celle utilisée pour la mise au point car l’élément ainsi positionné peut s’afficher en empiétant sur

le flux normal des autres données de la page.

Le positionnement absolu se détermine par :

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>absolute</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="position: absolute; left: 50px; top: 50px; width: 180px; border: 2px solid black; text-align: center;"> Position absolue </div> </body> </html>

Les propriétés de positionnement sont bien acceptées par les navigateurs récents.

4. Positionnement fixe

Le positionnement fixe crée aussi un élément indépendant dont on peut définir la position. Ici, l’élément reste fixe lorsque l’on fait défiler le document.

Exemple :

position: absolute;

left: valeur ou %;

top: valeur ou %;

right: valeur ou %;

bottom: valeur ou %;



98

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>fixed</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="position: fixed; left: 5px; top: 5px; width: 180px; border: 2px solid black; text-align: center;"> Texte fixe </div> <pre> ... </pre> </body> </html>

Le positionnement fixe ne fonctionne que sous Internet Explorer 7 et Firefox.



99

Flottement

La propriété float spécifie de quel côté de l’élément boîte parent doit s’aligner l’élément concerné.

La valeur right aligne l’élément concerné à droite, poussant les autres éléments à s’aligner à gauche.

La valeur left aligne l’élément concerné à gauche, poussant les autres éléments à s’aligner à droite.

La valeur auto ne spécifie rien et rend la main au navigateur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>float</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p>xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx <img src="world.jpg" alt="" style="float:right;"> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx </p> </body> </html>

Cette propriété CSS1 est bien acceptée par les navigateurs récents.

float: right ou left ou none;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz946ccRqjzIgLAA==-enidentnumber

100

Dégagement

La valeur clear permet d’annuler le flottement introduit par la propriété float.

La valeur right annule le flottement à droite.

La valeur left annule le flottement à gauche.

La valeur both annule le flottement des deux côtés.

La valeur none annule toute propriété de flottement.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>clear</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx <img src="world.jpg" alt="" style="float:right;"> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx <span style="clear: right"> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx </span> </p> </body> </html>


clear: right ou left ou both ou none;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzE4npexqjzIgLAA==-enidentnumber

101

Superposition

La propriété z-index ajoute un axe en profondeur permettant de positionner des éléments audessus ou en dessous d’un autre élément.

Ainsi, l’élément avec une propriété z-index: 2; apparaîtra avant ou audessus de l’élément ayant une propriété z-index: 0;

Cette propriété ne fonctionne qu’avec un positionnement absolu des éléments.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>z-index</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="position: absolute; left: 50px; top: 50px; width: 80px; height: 40px; padding: 4px; border: 2px solid black; background-color: #9cf; z-index: 1;"> z-index 1 </div> <div style="position: absolute; left: 75px; top: 80px; width: 80px; height: 40px; padding: 4px; border: 2px solid black; background-color: yellow; z-index: 2;"> z-index 2 </div> <div style="position: absolute; left: 110px; top: 110px; width: 80px; height: 40px; padding: 4px; border: 2px solid black; background-color: white; z-index: 3;"> z-index 3 </div>

z-index: un nombre entier (positif);


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzGbRFhRqjzIgLAA==-enidentnumber

102

</body> </html>



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzGbRFhRqjzIgLAA==-enidentnumber

103

Dépassement

La propriété overflow détermine ce que le navigateur doit faire lorsqu’un élément est plus grand que l’élément parent qui le contient.

Avec la valeur hidden, la partie qui dépasse est cachée sans possibilité de la voir ou d’y accéder.

Avec la valeur scroll, la partie qui dépasse est cachée mais accessible par une barre de défilement.

Avec la valeur visible, la partie qui dépasse est affichée, ignorant les spécifications de l’élément parent qui le contient.

Avec la valeur auto, on rend la main au navigateur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>overflow</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="width: 180px; height: 65px; border: 1px solid black; overflow: auto"> Pour la propriété overflow avec la valeur scroll, la partie qui dépasse est cachée mais accessible par une barre de défilement. </div> </body> </html>


overflow: hidden ou scroll ou visible ou auto;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzH7BwjRqjzIgLAA==-enidentnumber

104

Découpage

La propriété clip détermine la partie visible de l’élément, généralement une image. Ainsi, l’image entière sera bien présente dans le document mais seulement une partie (rectangulaire) de celleci sera visible.

Soit par exemple :

clip: rect(10px 270px 190p 50px);

Les coordonnées du rectangle découpé sont données par la position des sommets supérieurgauche, supérieurdroit, inférieurdroit et inférieurgauche par rapport à l’image initiale.

On recommande d’inclure l’élément qui sera ainsi découpé dans une balise <div> ou <span>.

Cette propriété ne fonctionne qu’avec un positionnement absolu de l’élément.

Pour l’instant, seule la forme rectangulaire est implémentée. On prévoit un plus grand choix de formes à l’avenir (CSS3).

Exemple

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>clip</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="clip: rect(0px 145px 115px 0px); position: absolute;"> <img src="ordi.jpg" alt=""> </div> </body> </html>

clip: rect(point_haut point_droite point_bas point_gauche);


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz1zaGlRqjzIgLAA==-enidentnumber

105



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz1zaGlRqjzIgLAA==-enidentnumber

106

Affichage

La propriété CSS display permet de contrôler l’affichage des éléments dans la page.

La propriété display: block; définit la balise comme un élément boîte. Comme pour la balise <div>, elle ajoute un retour chariot avant et après.

Exemple :

Nous allons faire du contenu de la balise (en ligne) <b> ... </b> un élément boîte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>display:block</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p>Les <b>feuilles de style</b> CSS</p> <p>Les <b style="display:block;">feuilles de style</b> CSS</p> </body> </html>

La propriété display: inline; définit la balise comme un élément en ligne, ce qui supprime la ligne vide avant et après.

Ainsi, une liste constitue un bloc et les éléments de la liste sont affichés, classiquement, de façon verticale. Avec la valeur inline, cette même liste peut être affichée horizontalement.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>display:inline</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head>

display: block ou inline ou none;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzR/tYnRqjzIgLAA==-enidentnumber

107

<body> <ul> <li>Chapitre 1</li> <li>Chapitre 2</li> <li>Chapitre 3</li> </ul> <ul> <li class="ligne">Chapitre 1</li> <li class="ligne">Chapitre 2</li> <li class="ligne">Chapitre 3</li> </ul> </body> </html>

La propriété display: none; définit qu’un élément ne sera pas affiché. Cet élément est alors retiré du document et de la mise en page (cf. dans ce chapitre, section Visibilité, la différence avec la propriété visibility: hidden;).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>display:none</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> xxx xxx xxx xxx xxx xxx <img src="world.jpg" alt="" style="display: none;"> xxx xxx xxx xxx xxx xxx </body> </html>

La capture d’écran suivante montre bien que l’image a été retirée, comme si elle était absente du code source :



108

Pour ces trois valeurs de propriété display étudiées, la compatibilité est bonne mais uniquement pour les navigateurs les plus récents. Le W3C a prévu bien d’autres valeurs pour la propriété display mais cellesci ne sont encore que très partiellement prises en charge par les navigateurs.



109

Visibilité

La propriété CSS visibility détermine si un élément est visible ou est caché.

La valeur visible affiche l’élément.

La valeur hidden cache l’élément. Attention ! Malgré la valeur hidden, l’élément occupe toujours sa place dans le document et un rectangle blanc apparaît là où il pourrait être affiché. De cette manière, la mise en page est conservée malgré l’absence (apparente) de l’image et les autres éléments de la page conservent leur position relative initiale. La valeur hidden diffère de la valeur display en cela qu’elle retire purement et simplement l’élément de la page et ne réserve pas de place pour celuici.

Il est recommandé de définir le style par la pseudoclasse id afin de pouvoir le gérer éventuellement par du JavaScript.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>visibility</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <p>xxx xxx xxx xxx xxx xxx</p> <img src="world.jpg" alt="" style="visibility: hidden;"> <p>xxx xxx xxx xxx xxx xxx</p> </body> </html>

La capture d’écran suivante montre clairement que, même si l’image n’est pas visible, l’espace de celleci a bien été réservé lors de la mise en page :

Cette propriété CSS2 n’est reconnue que par les navigateurs les plus récents.

visibility: visible ou hidden;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz+f3MphqjzIgLAA==-enidentnumber

110

Curseur

La propriété cursor permet de modifier le curseur de la souris.

Les différents mots clés sont :

pointer. Le curseur représente un doigt indiquant un lien.

hand. Identique à pointer mais uniquement sous Internet Explorer 6.

move. Le curseur indique qu’on peut déplacer l’objet pointé.

e-resize. Curseur pointant vers l’est.

ne-resize. Curseur pointant vers le nordest.

nw-resize. Curseur pointant vers le nordouest.

n-resize. Curseur pointant vers le nord.

se-resize. Curseur pointant vers sudest.

sw-resize. Curseur pointant vers le sudouest.

s-resize. Curseur pointant vers le sud.

w-resize. Curseur pointant vers l’ouest.

text. Le curseur indique qu’on peut sélectionner le texte. Souvent un (curseur).

wait. Le curseur indique une progression. Souvent une montre ou un sablier.

help. Le curseur indique une aide. Souvent un point d’interrogation ou une bulle.

crosshair. Le curseur représente une croix.

auto. Le navigateur détermine quel curseur prendre selon le contexte.

url. Spécifie un fichier image spécial pour le curseur. Le fichier image de url peut être au format gif, jpeg ou png. Ce curseur graphique ne fonctionne que sous Internet Explorer 6.

Ou sous forme imagée :

cursor: mot-clé;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzX4iFrhqjzIgLAA==-enidentnumber

111

Attention, l’apparence du curseur varie selon le système d’exploitation.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>cursor</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="cursor: help;"> Les feuilles de style CSS </h1> </body> </html>



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzX4iFrhqjzIgLAA==-enidentnumber

112

Utilité des feuilles de style pour l’impression

Vous avez inévitablement déjà été déçu lors de l’impression d’une page Html. Entres autres désagréments, on peut citer :

la page imprimée a épuisé une bonne partie de vos cartouches d’encre avec des images ou des bannières inutiles.

les menus de navigation, si utiles sur la Toile, encombrent votre feuille imprimée avec des informations inutilisables.

la police utilisée à l’écran se révèle difficilement lisible sur la version papier.

la page Web est mal imprimée car des parties du document sont absentes de votre feuille imprimée.

Les feuilles de style viennent à votre secours pour prévoir une version imprimable sans devoir écrire une page distincte à cet effet.

Exemple de page Web telle qu’elle apparaît à l’écran


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCdvMuRqjzIgLAA==-enidentnumber

113

La même page, avec le même contenu, prévue pour l’impression

Il n’est pas nécessaire d’imprimer la page pour faire des essais ou des mises au point. Un aperçu avant impression (Fichier Aperçu avant impression...) permet de visualiser la page comme si elle était imprimée.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCdvMuRqjzIgLAA==-enidentnumber

114

Feuille de style selon le média de sortie

Comme signalé en introduction dans le chapitre Introduction aux CSS, les feuilles de style permettent des représentations différentes selon le média de sortie.

Si nous sommes des habitués du Web à partir de l’écran, d’autres internautes le sont à partir d’un ordinateur de poche, d’une interface vocale, d’une barrette Braille ou d’un document imprimé.

Avec l’attribut media qui vient s’ajouter à la déclaration de style, on peut envisager différents médias de sortie.

Ces différentes possibilités ne sont pas encore toutes prises en charge par les navigateurs récents. On pense aux propriétés vocales (media="aural") dont les feuilles de style sont éditées depuis longtemps mais qui n’ont pas encore été reprises par les navigateurs grand public. Cependant, le navigateur Opera annonce qu’il les prend en compte depuis sa version 8.

Il existe différents moyens pour incorporer ces styles spécifiques à un média dans un document Html (voir les méthodes définies au chapitre Application des CSS au Html).

Exemples :

<style type="text/css" media="print"> /* Déclarations de style qui s’appliquent au document imprimé */ </style> <style type="text/css" media="screen"> /* Déclarations de style qui s’appliquent lors de l’affichage à l’écran */ </style> <style type="text/css" media="all"> /* Déclarations de style qui s’appliquent en toutes circonstances */ </style>

Notons que la déclaration par la méthode des styles en ligne n’a pas beaucoup de sens car ces propriétés de style sont généralement valables pour l’entièreté du document.

C’est sans aucun doute la méthode la plus utilisée par les concepteurs de site car la plus compatible.

Exemple :

<link rel="stylesheet" type"text/css" href="print.css" media="print">

Déclaration qui appelle la feuille de style externe "print.css", préparée pour l’impression (print).

media="all" Les styles définis s’appliquent à tous les types de médias (valeur par défaut).

media="screen" Les styles s’appliquent à l’affichage sur un écran classique.

media="print" Les styles s’appliquent à l’impression sur papier. Les navigateurs utilisent ces spécifications lorsque l’utilisateur demande d’imprimer la page Web.

media="projection" Les styles s’appliquent à la projection de données avec des rétroprojecteurs.

media="handheld" Les styles s’appliquent à l’affichage sur des ordinateurs de poche ou des agendas électroniques permettant la navigation sur le Web.

media="aural" Les styles s’appliquent à des systèmes de restitution vocale assistée par ordinateur.

media="braille" Les styles s’appliquent à des barrettes Braille conçues pour les nonvoyants.

media="embossed" Les styles s’appliquent à des imprimantes à perforation Braille conçues pour les nonvoyants.

Style interne

Style externe


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6UlLwhqjzIgLAA==-enidentnumber

115

<link rel="stylesheet" href="site.css" media="screen" >

Déclaration qui appelle la feuille de style "site.css", destinée à l’affichage à l’écran (screen).

Exemple :

@import url(print.css) print;

Déclaration qui appelle la feuille de style externe "print.css", préparée pour l’impression (print).

@import url(site.css) screen;

Déclaration qui appelle la feuille de style "site.css", destinée à l’affichage à l’écran (screen).

Outre la possibilité d’incorporer diverses feuilles de style séparées pour différents médias de sortie dans une page Html, il existe également la possibilité de définir différents modes de sortie dans une seule déclaration de style.

<style type="text/css"> @media print /* définition de formats pour l’impression */ @media screen /* définition de formats pour une sortie écran ... */ </style>

Ce mode de notation peu habituel en CSS donnerait en pratique :

<style type="text/css"> @media print body background-color: white; @media screen body background-color: black; </style>

Style importé

@media


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6UlLwhqjzIgLAA==-enidentnumber

116

Optimiser une page Web pour l’impression

Avant d’explorer les propriétés de style propres à l’impression, il convient de passer la page Web en revue afin de l’optimiser pour l’impression. On procèdera en trois temps :

déceler et éliminer tous les éléments qui se révèleront inutiles voire dérangeants lorsque la page sera imprimée.

revoir le formatage du contenu textuel en vue de la lecture sur papier.

ajouter des informations, habituellement réservées à l’affichage à l’écran.

On peut dire qu’une page Web affichée à l’écran doit être plaisante à l’œil et qu’une information papier doit être plaisante à l’esprit. Plus que jamais, c’est la richesse de l’information ou du contenu qui est recherché sur

la page imprimée.

Sans être limitatif, il faudra veiller :

aux arrièreplans de couleur ou avec image ;

à la couleur des caractères ;

au type de police de caractères ;

à la taille des caractères ;

aux liens ;

aux images ;

au menu de navigation ;

aux animations Flash, JavaScript et Dhtml ;

aux formulaires ;

aux marges ;

...

Reprenons ces différents points en détail :

modifier les arrièreplans. Par défaut, la plupart des navigateurs n’impriment pas les couleurs et les images d’arrièreplan. Cependant, si votre visiteur a coché l’option avancée Imprimer les couleurs et les images d’arrièreplan, il risque de ne pas apprécier votre page spécialement conçue pour l’impression et de vous considérer (à tort) comme un piètre concepteur. Ainsi, il est prudent de définir pour cette page d’impression des arrièreplans blancs.

Exemple :

body background: white; background-image: none;

mettre en noir les polices de couleur. Parfois plaisants à l’écran, des caractères de police coloriés risquent de consommer inutilement de l’encre et n’apportent pas d’enri chissement à l’information sur papier.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzG4b1yRqjzIgLAA==-enidentnumber

117

Exemple : body color: black;

changer la police en serif. Bien que ce soit une question d’appréciation personnelle, d’aucuns trouvent les polices sansserif (Arial, Verdana, Helvetica) plus lisibles à l’écran et les polices de type serif (Times New Roman, Garamond) plus adaptées à la lecture sur papier.

Exemple : font-family : "Times New Roman", Times, serif;

veiller à la taille de la police. Si votre page Web est écrite avec une police de petite dimension, il est prudent d’adopter une taille de caractères de 11 points ou 12 points, voire plus grande en fonction de votre audience. Il est conseillé de travailler avec des points (pt), plus spécifiques à l’impression, plutôt que des pixels (px).

Exemple : font-size : 12pt;

identifier les liens. Question délicate que celle des hyperliens. De toute évidence, ils ne sont pas aussi utiles sur papier que sur écran, mais il est souvent important d’indiquer qu’il y avait des liens dans l’original.

Pour ce faire, plusieurs politiques peuvent être adoptées. On peut forcer le soulignement des liens dont le soulignement avait été effacé par la propriété text-decoration: none;.

Exemple : a text-decoration : underline;

Certains préconisent de compléter le lien avec son adresse. Les mentions "cliquez ici", déjà peu plaisantes à l’écran, sont tout à fait inutiles en version papier.

enlever toutes images et bannières inutiles à la compréhension du contenu. Il est cependant conseillé de conserver les logos pour vous identifier auprès de l’utilisateur.

Exemple :

.noprint display: none;

... <div classe="noprint"><img scr="xxx.jpg" alt=""></div>

enlever les outils de navigation. Les menus de navigation, particulièrement s’ils sont latéraux, occupent inutilement de la place sur la feuille d’impression. En les enlevant, vous permettrez au texte de s’imprimer plus efficacement.

Exemple :

#navigation display: none; .... <div id="navigation"> ... </div>

enlever les animations Flash, JavaScript et Dhtml car elles s’impriment très mal, voire pas du tout. Même façon de procéder avec la propriété display: none;.

les formulaires ne sont d’aucune utilité en version papier. Même façon de procéder avec la propriété display: none;.

les marges ont peutêtre été modifiées par rapport aux marges par défaut pour l’affichage. Pour l’impression papier, cellesci devront éventuellement être revues.

les ajouts : certaines informations risquent d’être absentes de la page imprimée. Comme l’indication de l’URL originale du site pour permettre à l’utilisateur de retourner sur votre site Web, votre logo et la mention d’un copyright si nécessaire.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzG4b1yRqjzIgLAA==-enidentnumber

118

Saut de page avant

Cette propriété force ou empêche un saut de page avant un élément de la page.

Le paramètre always force un saut de page avant l’élément où il est défini.

Le paramètre avoid empêche un saut de page avant l’élément où il est défini.

Le paramètre auto laisse la main au navigateur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>page-break-before</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="font-size: 120pt;">Page 1</h1> <h1 style="page-break-before:always; font-size: 120pt;">Page 2</h1> </body> </html>

L’aperçu avant impression révèle le résultat suivant :

page-break-before:

always;

avoid;

auto;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz33Kw0RqjzIgLAA==-enidentnumber

119

Saut de page arrière

Cette propriété force ou empêche un saut de page après un élément de la page.

Le paramètre always force un saut de page après l’élément où il est défini.

Le paramètre avoid empêche un saut de page après l’élément où il est défini.

Le paramètre auto laisse la main au navigateur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>page-break-after</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 style="page-break-after:always; font-size: 120pt;">Page 1</h1> <h1 style="font-size: 120pt;">Page 2</h1> </body> </html>

La capture d’écran est identique à celle du point précédent.

page-break-after:

always;

avoid;

auto;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzTTop2xqjzIgLAA==-enidentnumber

120

Perspectives

Force est de constater que peu de propriétés spécifiques à l’impression sont implémentées dans les navigateurs même récents alors que les spécifications CSS2 du W3C à ce sujet sont nombreuses et a priori fort pratiques.

On pense au sélecteur de page @page qui est implanté dans le navigateur Opéra depuis la version 8 et est totalement ignoré par Internet Explorer 6 et 7 ainsi que par Firefox. Pourtant, ses fonctions sont pour le moins alléchantes.

Citons les possibilités :

d’imprimer en mode portrait ou mode paysage ;

de dimensionner la page imprimée ;

d’ajouter des marques de découpe ;

de prévoir un style pour la première page, les pages de gauche et les pages de droite.

etc.

Profitons de l’occasion pour explorer ces possibilités dans Opera qui, soit dit en passant, est un excellent navigateur (maintenant gratuit) dont la diffusion est encore assez confidentielle mais qui effectue des efforts louables dans le domaine de l’implantation des feuilles de style.

Exemple

Forcer l’impression en mode paysage par @pagesize: landscape; :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>CSS impression</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css" media="print"> .normal font-size: 120pt; .break font-size: 120pt; page-break-after:always; @pagesize: landscape; </style> </head> <body> <h1 class="break">Page 1</h1> <h1 class="break">Page 2</h1> <h1 class="normal">Page 3</h1> </body> </html>

À l’écran :


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzfzKY5xqjzIgLAA==-enidentnumber

121

À l’impression (simulation) :

Exemple

Appliquer un style différent aux pages de gauche et aux pages de droite par respectivement @page:left et @page:right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>CSS impression</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css" media="print"> .normal font-size: 120pt; .break font-size: 120pt; page-break-after:always; @page:leftmargin-right: 220px; @page:rightmargin-left: 220px; </style> </head> <body> <h1 class="break">Page 1</h1>



122

<h1 class="break">Page 2</h1> <h1 class="normal">Page 3</h1> </body> </html>

À l’impression (simulation) :



123

Introduction

Les propriétés décrites dans ce chapitre ne font pas partie des standards CSS et sont propres à Microsoft Internet Explorer. Elles ne seront pas prises en compte par les autres marques de navigateurs.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzadsw8BqjzIgLAA==-enidentnumber

124

La barre de défilement

Cette propriété permet de définir des couleurs personnelles pour les différents éléments de la barre de défilement.

Introduit à partir d’Internet Explorer 5.5, cette propriété est devenue un classique des feuilles de style et a été largement adoptée par les concepteurs de site.

La signification des différents termes est illustrée par la figure suivante :

Les propriétés scrollbar peuvent être utilisées pour la balise body mais aussi pour tout élément comportant une barre de défilement comme les balises <textarea> et <iframe>.

Toutes les propriétés ne doivent pas être définies.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>scrollbar</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> textarea scrollbar-face-color:#808080; scrollbar-arrow-color:red; scrollbar-track-color:#c0c0c0; </style> </head> <body> <textarea cols="32" rows="5"> Introduite à partir d’Internet Explorer 5.5, cette propriété est devenue un classique des feuilles de style. </textarea> </body> </html>

scrollbar-arrow-color:

scrollbar-highlight-color:

scrollbar-3dlight-color:

scrollbar-face-color:

scrollbar-track-color:

scrollbar-darkshadow-color:

scrollbar-shadow-color:,

valeur de couleur;

valeur de couleur;

valeur de couleur;

valeur de couleur;

valeur de couleur;

valeur de couleur;.

valeur de couleur;


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzvarT+hqjzIgLAA==-enidentnumber

125

Pour rappel, ces propriétés ne fonctionnent que pour les versions 5.5 et suivantes d’Internet Explorer.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzvarT+hqjzIgLAA==-enidentnumber

126

Les filtres graphiques

Avec Internet Explorer 4, Microsoft a introduit des propriétés CSS qui permettent des effets optiques intéressants. Ces feuilles de style reprennent des fonctions que l’on retrouve dans des applications graphiques comme Photoshop ou Paint Shop Pro. Elles permettent, en particulier, des mises en forme artistiques sur du texte, sans devoir passer par des images.

Remarque :

Avec la mise à jour SP2, Microsoft semble faire de l’excès de zèle. En local, ces filtres graphiques sont reconnus comme des contrôles ActiveX et ne sont pas affichés directement. Pour visualiser l’effet graphique, il faudra autoriser à chaque fois, le contenu bloqué.

Ce désagrément se produit lorsque l’on travaille en local et se révèle gênant pour la réalisation des exemples ou la mise au point d’une page. Lorsque le fichier est en ligne, cette procédure ne se produit (heureusement) plus.

1. Filter:alpha()

Ce filtre, assez complexe, permet un effet de fusion sur un élément graphique.

Le paramètre opacity détermine le degré de l’effet au point de départ de la fusion. Les valeurs varient de 0 (transparent) à 100 (opaque).

Le paramètre finishopacity détermine le degré de l’effet à la fin de la fusion. Les valeurs varient de 0 (transparent) à 100 (opaque).

Le paramètre style détermine l’effet. Les valeurs permises sont 0, 1, 2 et 3 :

Avec style=0, l’arrièreplan et le premier plan sont additionnés. Il n’y a pas d’effet de fusion avec cette valeur. Les mentions pour les autres paramètres ne sont pas nécessaires.

Avec style=1, on obtient un fondu linéaire à partir d’un point de départ (startx et starty) et d’un point d’arrivée (finishx et finishy).

Le paramètre startx= est le point de départ déterminé à partir du bord gauche de l’élément de premier plan horizontalement et en pixels. N’est nécessaire qu’avec style=1.

Le paramètre starty= est le point de départ déterminé à partir du bord supérieur de l’élément de premier plan verticalement et en pixels. N’est nécessaire qu’avec style=1.

Le paramètre finishx= est le point d’arrivée déterminé à partir du bord gauche de l’élément de premier plan horizontalement et en pixels. N’est nécessaire qu’avec avec style=1.

Le paramètre finishy= est le point d’arrivée déterminé à partir du bord supérieur de l’élément de premier plan verticalement et en pixels. N’est nécessaire qu’avec style=1.

Avec style=2, on obtient un fondu elliptique de l’intérieur vers l’extérieur. Il faut définir le paramètre opacity pour l’intérieur et le paramètre finishopacity pour l’extérieur. Les valeurs de startx, starty, finishx et finishy ne sont pas à mentionner.

Avec style=3, on obtient un fondu rectangulaire de l’intérieur vers l’extérieur. Il faut définir le paramètre opacity pour l’intérieur et le paramètre finishopacity pour l’extérieur. Les valeurs de startx, starty, finishx et finishy ne sont pas à mentionner.

filter:

alpha(opacity= valeur entre 0 et 100,

finishopacity= valeur entre 0 et 100,

style=0 ou 1 ou 2 ou 3);


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzP3MUCBujzIgLAA==-enidentnumber

127

Ce filtre ne s’applique qu’aux balises body, button, div, img, input, marquee, span, table, td, textarea, tfoot, th, thead et tr.

À partir d’Internet Explorer 5.5, la notation préconisée par Microsoft est :filter:progid:DXImageTransform.Microsoft.alpha().

Ce filtre sera probablement repris, sous une forme ou sous une autre, dans les spécifications CSS3.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>alpha</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="filter: alpha(style=1, startx=0, starty=0, finishx=100, finishy=100, finishopacity=0); background-color: #9cf; width:280px; text-align: center; font-size:50pt;"> DHTML </div> <div style="filter: alpha(style=2); background-color: #9cf; width:280px; text-align: center; font-size:50pt;"> DHTML </div> </body> </html>

Pour rappel, ce filtre est propre à Microsoft Internet Explorer et n’a aucun effet sous les autres navigateurs.

2. Filter:blur()

Ce filtre permet d’appliquer un effet d’estompe qui ajoutera une ombre légèrement dégradée aux éléments graphiques.



128

Le paramètre strength détermine la force de l’effet.

Le paramètre direction indique l’angle sous lequel doit s’afficher l’ombre.

direction=0 : la trace de l’ombre se dirige vers le haut (nord).

direction=45 : la trace de l’ombre se dirige vers le haut à droite (nordest).

direction=90 : la trace de l’ombre se dirige vers la droite (est).

direction=135 : la trace de l’ombre se dirige vers le bas à droite (sudest).

direction=180 : la trace de l’ombre se dirige vers le bas (sud).

direction=225 : la trace de l’ombre se dirige vers le bas à gauche (sudouest).

direction=270 : la trace de l’ombre se dirige vers la gauche (ouest).

direction=315 : la trace de l’ombre se dirige vers le haut à gauche (nordouest).


À partir d’Internet Explorer 5.5, la notation préconisée par Microsoft est : :filter:progid:DXImageTransform.Microsoft.blur().

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>blur</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="filter:blur(direction=225, strength=17 add=1); width:280px; text-align: center; font-size:50pt;"> DHTML </div> <div style="filter:blur(direction=225, strength=17 add=0); width:280px; text-align: center; font-size:50pt;"> DHTML </div> </body> </html>

filter: blur(strength=valeur, direction=0, 45, 90, 135, 180, 225, 270, 315, add=0 ou 1);



129


3. Filter:dropshadow()

Ce filtre provoque un effet d’ombre pour tous les contours d’un élément (texte ou image).

La couleur de l’ombre est définie par color.

Le paramètre offx détermine la position de l’ombre de façon horizontale. Une valeur positive décale l’ombre vers la droite et une valeur négative vers la gauche.

Le paramètre offy détermine la position de l’ombre sur l’axe vertical. Une valeur positive décale l’ombre vers le haut et une valeur négative vers le bas.

Le paramètre positive=1 doit être mentionné uniquement dans le cas où l’on veut imposer un effet d’ombrage pour les pixels transparents d’un graphique.


À partir d’Internet Explorer 5.5, la notation préconisée par Microsoft est : :filter:progid:DXImageTransform.Microsoft.dropshadow().

Pour des ombres dégradées, il existe le filtre shadow() étudié dans la section Les filtres graphiques Autres filtres du présent chapitre.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>dropshadow</title>

filter:

dropshadow(color=couleur,

offx=nombre de pixels,

offy=nombre de pixels,

positive=1);



130

<meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="width: 300px; font-size: 30pt; filter: dropshadow(color=#909090, offx=3, offy=3);"> CSS + DHTML </div> </body> </html>


4. Filter:glow()

Ce filtre permet de créer un halo de couleur autour de l’élément.

La couleur (color) est celle de l’auréole qui entoure l’élément.

Le paramètre strength est la force avec laquelle est produit l’effet. La force est déterminée par une valeur de 1 à 255.


À partir d’Internet Explorer 5.5, la notation préconisée par Microsoft est : :filter:progid:DXImageTransform.Microsoft.glow().

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>glow</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="width: 100%; font-size: 48pt; filter: glow(color=#99ccff, strength=10)"> DHTML </div> </body> </html>

filter: glow(color=couleur, strength=1 à 255);



131


5. Filter:shadow()

Ce filtre permet de créer une ombre dégradée autour de l’élément.

La couleur est celle de l’ombre de l’élément.

Le paramètre direction indique l’angle sous lequel doit s’afficher l’ombre.

direction=0 : la trace de l’ombre se dirige vers le haut (nord).

direction=45 : la trace de l’ombre se dirige vers le haut à droite (nordest).

direction=90 : la trace de l’ombre se dirige vers la droite (est).

direction=135 : la trace de l’ombre se dirige vers le bas à droite (sudest).

direction=180 : la trace de l’ombre se dirige vers le bas (sud).

direction=225 : la trace de l’ombre se dirige vers le bas à gauche (sudouest).

direction=270 : la trace de l’ombre se dirige vers la gauche (ouest).

direction=315 : la trace de l’ombre se dirige vers le haut à gauche (nordouest).


À partir d’Internet Explorer 5.5, la notation préconisée par Microsoft est : :filter:progid:DXImageTransform.Microsoft.shadow().

Ce filtre devrait être repris, sous une forme ou une autre, dans la spécification CSS3.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>shadow</title>

filter: shadow(color=couleur, direction=0, 45, 90, 135, 180, 225, 270, 315);



132

<meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="width: 100%; font-size: 32pt; filter: shadow(color=#a0a0a0, direction=135);"> CSS + DHTML </div> </body> </html>


6. Filter:wave()

Ce filtre provoque un effet de vague ou d’ondulation du texte ou du graphique concerné.

Le paramètre freq détermine la fréquence des vagues ou de l’ondulation. Plus la valeur est élevée, plus les vagues sont petites. Plus la valeur est basse, plus les vagues sont grandes. Dans la pratique, on utilise des valeurs comprises entre 5 et 50.

Le paramètre light définit l’intensité de la lumière dans l’ondulation. Valeurs entre 0 et 100.

Le paramètre phase marque le début de l’effet de vague. Valeurs entre 0 et 100. La valeur 0 fait débuter l’effet normalement, avec une valeur de 25, l’effet commence à 90°.

La force de l’effet est donné par le paramètre strength. Dans la pratique, on retient des valeurs entre 1 et 10.

Avec add=1, l’image originale est ajoutée à l’image déformée. Avec add=0, l’image originale n’est pas ajoutée.


À partir d’Internet Explorer 5.5, la notation préconisée par Microsoft est : :filter:progid:DXImageTransform.Microsoft.wave().

Exemple :

filter:

wave(freq= la fréquence des vagues,

light= l’intensité de la lumière,

phase= le début de la phase,

strength= la force de la déformation,

add= 0 ou 1);



133

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>wave</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div style="filter: wave(freq=2, strength=8, phase=10, add=1); width:300px; font-size:30pt;"> CSS + DHTML </div> </body> </html>


7. Autres filtres

Il existe d’autres filtres graphiques moins utilisés par les concepteurs de pages Web.

Citons :

filter:fliph() qui applique une symétrie par rapport à l’axe horizontal.

filter:flipv() qui applique une symétrie par rapport à l’axe vertical.

filter:invert qui inverse les éléments de couleur. Toutes les couleurs sont remplacées à l’affichage par leur couleur complémentaire.

filter:xray() qui convertit toutes les couleurs en nuances de gris, ce qui provoque l’effet d’un négatif photo.

Tous ces filtres sont repris dans la documentation de Microsoft.



134

Validation

Le W3C permet de valider vos feuilles de style. Un analyseur syntaxique est disponible à la page http://jigsaw.w3.org/cssvalidator/. Ce service est gratuit et en français. Que du bonheur !

La validation permet :

de corriger les fautes de frappe ou autres coquilles toujours possibles.

de bénéficier de conseils de compatibilité pour vos feuilles de style.

d’avoir la satisfaction du travail bien fait si le message "Aucune erreur ou avertissement" apparaît.

de pouvoir ajouter à votre page le logo attestant des feuilles de style valides, confor mément à la recommandation CSS.

Il faut faire remarquer que ce service de validation est parfois assez "chatouilleux" et vous signalera des erreurs ou des avertissements pour des déclarations qui, en pratique, ne mettront pourtant pas vos pages en péril.

Le service de validation CSS du W3C propose de multiples possibilités :

valider une page html avec du CSS ou un fichier CSS en ligne. Il faudra alors encoder l’URL de la page ou du fichier.

valider un fichier CSS présent sur votre ordinateur en permettant de le télécharger vers le serveur du W3C.

valider un fichier CSS encodé directement dans une zone de texte.

Nous avons introduit, pour exemple, le code suivant :

a color: "#000000"; font-size: 20 pt bacground-color: yellow;

Le validateur nous a renvoyé :

la propriété color "#000000" n’est pas une valeur de color. En effet, en CSS, les guillemets ne doivent pas entourer la notation hexadécimale.

pour la propriété font-size, impossible de trouver un pointvirgule avant le nom de la propriété. Exact, car il manque le pointvirgule final.

l’avertissement suivant indique qu’il ne peut avoir d’espace entre le chiffre et l’unité utilisée. Ainsi, 20pt serait correct.

la propriété bacground-color n’existe pas. C’est bien background qu’il aurait fallu indiquer.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzM+NaFBujzIgLAA==-enidentnumber

135

Le code correct (validé) est donc :

a color: #000000; font-size: 20pt; background-color: yellow;

Le WDG (World Design Group) propose également un validateur CSS similaire mais uniquement en anglais, à l’adresse http://www.htmlhelp.com/tools/csscheck/.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzM+NaFBujzIgLAA==-enidentnumber

136

Outils Firefox

Firefox permet d’ajouter des extensions qui vont "booster" les fonctions du navigateur. La liste complète des extensions est disponible à l’adresse : http://extensions.geckozone.org/Firefox/

Parmi la foule des extensions possibles, nous en avons retenu quelquesunes qui se révèlent particulièrement utiles pour le travail des développeurs de pages Web.

Cette barre d’outils fabuleuse, bourrée de fonctionnalités, permet de tout faire ou presque sur la page chargée dans le navigateur. Le couteau suisse du créateur de pages Web !

Jugez par vousmême (liste non exhaustive) :

voir les CSS de la page,

afficher les CSS par type de média (handheld, print, screen),

éditer les CSS,

afficher le poids des images,

entourer les images avec un attribut alt vide ou absent,

entourer les éléments de type bloc,

entourer les éléments dépréciés,

afficher en détail les Id et les class,

valider les CSS en ouvrant directement le validateur du W3C, décrit au point Validation,

accéder directement aux documents du W3C (anglais et français).

et bien d’autres fonctions.

La version française de cette extension est téléchargeable à l’adresse : http://joliclic.free.fr/mozilla/webdeveloper/

L’extension permet d’un clic de visualiser la page dans Internet Explorer, idéal pour juger la compatibilité de la page. Téléchargement : http://extensions.geckozone.org/IEView

Un bon moyen de validation. Cette extension lance, en un clic de souris, le validateur de votre choix (Html/Xhtml, CSS, RDF/RSS, WAI). Cette fonction de validation est aussi présente dans l’extension Web Developer. Elle permet également de voir les liens cassés et comment la page est perçue par les moteurs de recherche. http://checky.sourceforge.net/extension.html

Complément indispensable du créateur de site, Tidy est un analyseur de pages Html développé à l’origine par le W3C et est donc parfaitement respectueux de la norme. Il affiche les erreurs rencontrées et permet de corriger directement certaines d’entre elles. Ce logiciel est à présent téléchargeable (TidyGUI). C’est un outil efficace pour déceler, comprendre et corriger un grand nombre d’erreurs.

L’extension de Firefox ajoute directement cette fonction d’analyse de code. Pour voir le rapport généré par Tidy, il suffit de passer par l’affichage de la source de la page. Le résultat s’affiche sur trois zones :

le code source,

Web Developer

IEview

Checky

Html Validator


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZX1nHhujzIgLAA==-enidentnumber

137

la liste des avertissements et erreurs,

les explications et solutions possibles (en anglais) en fonction de l’erreur sélectionnée.

Une icône s’affiche également dans la barre d’état :

un bouton vert si le code est valide,

un bouton jaune si la page comporte des avertissements (warnings), c’estàdire des erreurs que Tidy peut corriger,

un bouton rouge si la page comporte des erreurs (errors) que Tidy ne peut corriger ou qu’il ne comprend pas.

De nombreuses options de configuration sont disponibles.

Téléchargement : http://users.skynet.be/mgueury/mozilla/


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZX1nHhujzIgLAA==-enidentnumber

138

Outils Internet Explorer

Les différences sensibles de compatibilité entre les versions 5, 5.5 et 6 d’Internet Explorer ne sont pas sans causer quelques soucis aux concepteurs.

En effet, jusqu’à récemment, il était problématique sinon impossible, d’avoir plusieurs versions d’Internet Explorer pour Windows sur le même ordinateur, en raison de la forte intégration entre le navigateur et le système d’exploitation. En conséquence, de nombreux concepteurs Web se voyaient contraints d’utiliser plusieurs ordinateurs Windows pour leurs tests, chacun étant équipé d’une version différente d’Internet Explorer. La seule autre solution consistait à créer plusieurs machines virtuelles sur un même ordinateur, en utilisant un logiciel d’émulation comme VMware.

Pour faire cohabiter facilement plusieurs versions d’Internet Explorer, notamment pour essayer l’affichage d’une page HTML dotée d’une feuille de style, Tredosoft propose l’outil Multiple IE (http://tredosoft.com/Multiple_IE), qui permet d’installer, au choix, les versions 3 à 6 d’Internet Explorer, tout en ayant la dernière version du navigateur d’installée. Le principal inconvénient est que cet outil ne fonctionne pas sous Windows Vista.

Pour les utilisateurs de Vista, IETester permet d’utiliser le moteur de rendu et le moteur de JavaScript des versions 5.5 et 6 d’Internet Explorer. Ce navigateur est disponible à l’adresse www.mydebugbar.com/wiki/IETester/HomePage.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzw6BLMBujzIgLAA==-enidentnumber

139

Divers

Voici quelques outils qui sont assurément aussi pertinents qu’utiles lors de la conception des feuilles de style CSS.

Il est parfois nécessaire de retourner aux sources des feuilles de style édictées par le W3C. Une traduction en français est disponible. Document austère mais de référence.

CSS 1 : http://www.yoyodesign.org/doc/w3c/css1/index.html

CSS 2 : http://www.yoyodesign.org/doc/w3c/css2/cover.html

Vous cherchez une version ancienne d’un navigateur ? Le site evolt.org a archivé une petite centaine de navigateurs (en version anglaise) dans toutes les versions et sous tous les systèmes d’exploitation. Séquence nostalgie assurée pour certains...

http://browsers.evolt.org/

Le site français Alsacréations propose une foule d’articles et de tutoriels destinés aux Webmasters pour créer des sites grâce aux feuilles de style CSS et XHTML. Une série d’articles pointus et bien ficelés. http://www.alsacreations.com/articles/

Les spécifications CSS du W3C (en français)

La brocante aux navigateurs

Envie d’aller plus loin ?


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzIdk5PBujzIgLAA==-enidentnumber

140

Définition

JavaScript est un langage de script qui, incorporé aux balises Html, permet d’agrémenter la présentation et d’ajouter de l’interactivité des pages Web.

Détaillons et complétons cette définition.

Le JavaScript est un langage de script, distinct du langage Html. Le JavaScript est en quelque sorte un "petit" langage de programmation dont les lignes de code viennent s’ajouter au langage Html. Ce langage, inspiré plus ou moins directement du langage C, ne pose pas de problèmes de compréhension à ceux qui ont déjà touché à la programmation. Par contre, les utilisateurs issus de la bureautique ou de l’infographie risquent d’être un peu déroutés devant les éléments classiques de la programmation comme les variables, les instructions conditionnelles, les boucles, les fonctions et autres méthodes.

Avec sa philosophie de structuration de contenu, le Html est essentiellement statique. Très rapidement, le besoin s’est fait sentir d’y ajouter un peu de mouvement et surtout d’interactivité avec l’utilisateur. C’est ce que permettra le JavaScript.

Citons par exemple :

animer du texte ou des images,

réagir à l’action de la souris,

détecter le type et la version du navigateur,

vérifier la saisie dans les formulaires,

effectuer des calculs simples à partir de formulaires,

demander une confirmation,

afficher la date et l’heure,

gérer les menus de navigation,

rediriger le visiteur vers une autre page,

etc.

Les lignes de code du JavaScript sont gérées et exécutées directement par le navigateur luimême, sans devoir faire appel aux ressources du serveur qui héberge la page. C’est ce qu’on appelle une application "côté client". Il existe d’autres langages plus évolués comme le PHP ou l’ASP qui eux, traitent les informations sur le serveur avant de les renvoyer sous forme de page Html au navigateur de l’utilisateur. Ce sont les applications "côté serveur". Ces dernières sortent du cadre fixé à notre étude. Signalons simplement qu’il existe bien une version "côté serveur" de JavaScript mais que nous n’aborderons pas. Nous nous limitons donc à la version la plus répandue et la plus abordable, soit le JavaScript "côté client".

La tradition veut que l’on précise dans une introduction au JavaScript que celuici (malgré la confusion qui peut naître à partir du nom), n’a rien de commun avec le langage Java. Ce dernier, est un véritable langage de programmation plus performant et bien plus complexe dont le code est compilé sous forme d’applets Java. Cellesci peuvent s’exécuter à partir d’une page Web pour autant que la Machine Virtuelle Java soit installée sur le poste du visiteur. Le code du JavaScript, inclus dans la page Html, est quant à lui directement "interprété" par le navigateur au moment de son exécution.

Conséquence directe de l’inclusion du JavaScript dans les pages html, le code JavaScript sera visible par une simple consultation du code source de la page. Ceci peut faire le désespoir des créateurs débutants mais ne constitue pas vraiment un handicap étant donné que le JavaScript n’est destiné qu’à de petites applications, finalement bien connues de tous. Pour les applications plus professionnelles, cellesci seront réalisées avec des langages plus évolués côté serveur, ce qui préservera alors la confidentialité du code.

Le JavaScript est un langage orienté objet. Nous y reviendrons plus en détail au chapitre suivant. Notons simplement que JavaScript permet d’accéder directement aux différents éléments du document et de les manipuler. Comme principaux éléments ou objets de la page Html, on peut citer la fenêtre du navigateur, le document Html, les images, les cadres, les formulaires, les éléments de formulaire ou tout autre élément que vous aurez identifié.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzRSpuTxujzIgLAA==-enidentnumber

141

L’objectif de cette partie n’est pas de faire de vous des programmeurs émérites en JavaScript mais de fournir des bases solides répondant aux besoins d’un concepteur de sites Web.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzRSpuTxujzIgLAA==-enidentnumber

142

Bref historique

Le langage JavaScript est apparu en 1995 avec le navigateur Netscape 2. Le JavaScript 1.0 était né. Les possibilités offertes par ce langage ont très vite séduit les utilisateurs et les créateurs du Web, créant à l’époque un vif intérêt, sinon une petite révolution.

Du côté de chez Microsoft, alors un peu à la traîne sur le plan de l’Internet, on a très rapidement (1996) fait en sorte que le JavaScript soit reconnu par Internet Explorer 3. En effet, il ne fallait pas de licence pour utiliser le JavaScript. Par contre, dans le climat de guerre froide entre les deux constructeurs, il n’était pas question d’acheter une licence à Netscape pour en adapter le code. Est né alors JScript, variante du JavaScript selon Microsoft, qui reprend la plupart des fonctions du JavaScript et qui en élargit le champ d’application.

C’était déjà mal parti sur le plan de la compatibilité. Cependant, les deux firmes acceptèrent de participer à une standardisation. L’organisme choisi fut l’ECMA (European Computer Manufactures Association). En 1997, le JavaScript a été standardisé sous le vocable ECMAScript, sous la référence ECMA262. En fait, cette standardisation n’a porté que sur la syntaxe de base, n’apportant qu’une compatibilité minimale et chacun est reparti vaquer à ses occupations.

Avec Netscape 3 (fin 1996), est apparue la version JavaScript 1.1. Avec Netscape 4 (1997), la version 1.2. Ces versions furent également reconnues par les versions suivantes d’Internet Explorer tandis que JScript évoluait lui aussi vers de nouvelles versions.

JavaScript égrène encore des versions (nous en sommes à la 1.9) mais elles ne connaissent pas le retentissement des précédentes.

Parallèlement à l’évolution (sans révolution) du JavaScript, il y a un autre facteur de divergence. Nous avons vu, dans la définition, que le langage JavaScript était un langage orienté objet. La façon de définir et d’accéder à ces objets a également connu une approche différente selon la marque du navigateur. Le W3C a réagi avec le DOM (Document Object Model) mais ces spécifications tardent à être adoptées de façon unanime. Nous reviendrons à ce problème dans la partie consacrée au Dhtml.

Globalement, JavaScript est bien reconnu par tous les navigateurs. Dans la nébuleuse des différentes versions, la plupart des concepteurs se sont arrêtés à la version JavaScript 1.2 vraiment compatible. Pour des

applications assez basiques, on n’aura que peu de problèmes de compatibilité. Dès que l’on passera à des applications plus évoluées, on peut dire que le JavaScript est hautement incompatible. Au point qu’il faut parfois écrire un code adapté à chaque navigateur et éventuellement à chaque version de celuici !


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz1SZ9WRujzIgLAA==-enidentnumber

143

Limites

Presque toutes les pages Web intègrent quelques éléments de JavaScript, ce qui ne semble plus créer de réels problèmes de sécurité. D’où son succès auprès des créateurs de sites Web et des internautes.

Mais cette relative sécurité a un prix qui se traduit par de sévères limites techniques.

La principale limite de JavaScript est qu’il ne permet pas de lire et d’écrire sur le disque dur ou tout autre périphérique du visiteur. La seule exception est celle qui permet à JavaScript de lire et d’écrire sur le disque dur dans la zone réservée aux cookies. C’est la seule interaction que JavaScript peut avoir avec votre disque dur.

En outre, aucune instruction n’est prévue en JavaScript pour générer une connexion vers un autre ordinateur ou un serveur. Ainsi, JavaScript ne peut pas s’interfacer avec une base de données digne de ce nom.

Il ne sera donc pas possible de concevoir en JavaScript des applications telles qu’un forum de discussion, un sondage ou une boutique en ligne. Toutes ces applications nécessitent un langage plus puissant, généralement implanté côté serveur, comme le PHP ou l’ASP.

Même si cela est en partie excessif, il faut être conscient que le JavaScript est un "petit" langage de programmation et qu’il n’a été conçu que pour compléter le HTML normal.

Le JavaScript est éphémère et ne dure que le temps consacré à la visite de la page par l’utilisateur.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz86q3ZRujzIgLAA==-enidentnumber

144

Outils pour le JavaScript

Le code source présente cet avantage qu’il ne nécessite pas de logiciels coûteux. JavaScript ne déroge pas à la règle.

Pour l’apprentissage du JavaScript, il vous faudra :

un simple éditeur de texte,

un navigateur compatible JavaScript,

et des connaissances du langage Html.

Le JavaScript, comme la plupart des langages de programmation s’écrit en texte brut. Ainsi un simple éditeur de texte comme le Blocnotes de Windows (Notepad) fera à nouveau parfaitement l’affaire. L’utilisation de la fenêtre de code d’un éditeur Html est également possible.

Le JavaScript étant interprété par le navigateur, n’importe quel navigateur compatible JavaScript peut être adopté, ce qui est le cas de la plupart des navigateurs du marché. Internet Explorer 6 ou Firefox 1.0, retenus dans le cadre de cet ouvrage, sont bien entendu parfaitement adaptés au JavaScript. Veillez cependant à ce que la fonction JavaScript du navigateur ne soit pas désactivée.

Puisque le code JavaScript vient se greffer dans le code source de la page, une connaissance approfondie des balises Html est recommandée, sinon indispensable.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmaXocRujzIgLAA==-enidentnumber

145

JavaScript et le Html

Le JavaScript est interprété par le navigateur. Il faut donc l’informer que le code qu’il risque de rencontrer est du JavaScript.

Au niveau des balises meta, on peut déterminer le ou les langage(s) complémentaire(s) utilisé(s) dans le document Html. Nous avions déjà rencontré une balise meta de ce type pour les feuilles de style CSS (chapitre Application des CSS au Html CSS et le Html).

On ajoutera aux autres balises meta, la balise :

<meta http-equiv="Content-Script-Type" content="text/javascript">

Cette balise signale que la page comporte (ou peut comporter) un script et que ce script, en mode texte, est du JavaScript.

Le code JavaScript sera signalé au navigateur en entourant celuici des balises <script> ... </script>.

<script type="text/javascript">  </script>

La balise <script type="text/javascript"> détermine qu’il s’agit d’un script JavaScript. En effet, il existe d’autres langages de script qui peuvent s’implémenter dans une page Html. On pense au VBscript de Microsoft qui est un langage issu du Visual Basic mais qui n’a pas connu la même diffusion que le JavaScript.

Dans la pratique, on rencontre fréquemment la déclaration abrégée <script>. Celleci est valable car la plupart des navigateurs ont repris le JavaScript comme langage de script par défaut.

On ajoute parfois à cette balise la version du JavaScript pour forcer le navigateur à respecter les spécifications de la version ainsi mentionnée. Ce qui donne par exemple <script type="text/javascript" language="javascript1.2">. Cette précision n’est plus très utilisée car les navigateurs récents se "débrouillent" pour gérer le JavaScript quelle qu’en soit la version.

Au début du JavaScript, les concepteurs avaient pris l’habitude d’entourer le code (JavaScript) par <! et //> pour cacher le code pour les navigateurs qui ne reconnaissait pas le JavaScript. Cette précaution est à l’heure actuelle inutile car la grande majorité des navigateurs actuellement utilisés interprètent le JavaScript.

Balises meta

Code JavaScript


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDX6WfRujzIgLAA==-enidentnumber

146

Premier script

Encodons le code suivant dans un éditeur de texte :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Premier script</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> document.write("Mon premier JavaScript"); </script> </body> </html>

La déclaration du type document (doctype) n’a aucune influence sur l’exécution du JavaScript. Ce qui n’était pas le cas des feuilles de style.

L’instruction document.write("Mon premier JavaScript"); demande d’écrire (write) dans le document le texte saisi entre les parenthèses. Remarquez que l’instruction se termine par un pointvirgule.

On enregistre ce fichier au format htm et on affiche ensuite la page locale dans le navigateur :

Ces différentes manipulations sont expliquées en détail au chapitre Introduction au CSS Outils pour les CSS.

Remarque :

Windows XP dans sa version SP 2 et Windows Vista risquent de vous apporter parfois quelques désagréments lors de la conception de vos scripts en local. Soucieux (mais à ce stade, un peu trop !) de la sécurité des pages, Internet Explorer affiche le message d’information suivant :

Pour visionner votre page comportant un script, il faudra autoriser le contenu ainsi bloqué.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzI8UQiBujzIgLAA==-enidentnumber

147

Ce message d’information n’apparaîtra plus (sauf exceptions) une fois la page en ligne.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzI8UQiBujzIgLAA==-enidentnumber

148

JavaScript interne

On peut se poser la question suivante : "Où inclure les balises <script> ... </script> dans le document Html ?".

Il n’y a pas de règle précise qui stipule à quel endroit d’un fichier Html, le code JavaScript doit être défini. La seule réponse est "Là où le navigateur en aura besoin" !

Pour rappel, la page Html est chargée par le navigateur de façon séquentielle (de haut en bas). Il lit d’abord l’entête (le contenu des balises <head>) et ensuite le corps (<body>), ligne par ligne. Tous les éléments du "body" sont interprétés dans l’ordre d’écriture des balises Html.

Si on fait appel à du code JavaScript alors que celuici n’a pas encore été défini dans la page et donc interprété par le navigateur, ce dernier ne pourra, en toute logique, pas le prendre en charge (erreur sur la page).

On peut ainsi retrouver le code JavaScript à plusieurs endroits de la page :

Il n’est pas rare que du code JavaScript soit inclus, totalement ou en partie, dans les balises <head>. En effet, ce code sera alors lu en premier par le navigateur et le concepteur pourra en toute sécurité faire appel à ces fragments de code à tout moment de l’écriture du <body> car il sera déjà disponible. C’est souvent le cas des fonctions (voir chapitre Fonctions et méthodes).

On retrouve parfois du code JavaScript immédiatement après la balise <body> lorsque celuici est plus spécifique au corps du document.

Si le JavaScript traite les données d’un formulaire, le code peut apparaître après la balise <form>.

Des instructions comme document.write(" ... "); seront incluses dans le texte de la page à l’endroit souhaité.

et ainsi de suite.

Sur le plan pratique, retenez que le code JavaScript doit être encodé avant ou au plus tard au moment où il doit être exécuté.

Depuis que le JavaScript est reconnu comme le langage de script par défaut de la plupart des navigateurs, du code JavaScript peut être inclus directement dans la balise Html, fonctionnant alors comme un attribut de celle

ci. Cette façon de procéder ne sera pas adoptée pour un code programme compliqué mais seulement pour un appel à des événements, méthodes, fonctions déterminés. Quelques exemples : <a onclick="javascript:history.back();">Retour page précédente</a>. Avec l’objet history de JavaScript, vous avez accès aux pages Web qui ont été visitées par l’utilisateur et qui sont sauvegardées dans l’historique du navigateur. Avec la méthode back(), on demande, au clic sur le lien, de remonter d’une position dans l’historique, revenant ainsi à la page précédente. <h1 onmouseover="history.back()">Retour page précédente</h1> : ici, on demande de revenir à la page précédente par le simple survol de la souris (onmouseover). <form> <input type="button" value="retour" onclick="history.back()" </form> : au clic du bouton de formulaire, on revient à la page précédente.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzTZrmmRujzIgLAA==-enidentnumber

149

JavaScript externe

Il est également possible de noter le code JavaScript dans un ou des fichiers séparés de la page Html, ce qui présente l’avantage de clarifier le code du document Html. Il sera aussi possible d’appeler le même code JavaScript à partir de fichiers Html séparés sans avoir à le réécrire.

Ce fichier externe est un fichier de texte brut encodé, par exemple, avec le Blocnotes de Windows. Ce type de fichier comporte l’extension .js. Il contient uniquement du code JavaScript, donc sans les balises <script>.

Ce fichier sera appelé dans la page Html par :

<script src="fichier_externe.js"></script>

Cette balise d’appel se place généralement entre les balises <head> ... </head>.

Reprenons notre exemple du point Premier Script.

Ce fichier externe, que nous appellerons write.js, comporte la seule ligne de code :

document.write("Mon premier JavaScript externe");

<html> <head> <title>Script externe</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script src="write.js"></script> </head> <body> </body> </html>

Le résultat est identique à la capture d’écran proposée au point Premier Script.

Le fichier externe

La page Html


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzw2/uoxujzIgLAA==-enidentnumber

150

Conseils

Vous serez inévitablement dérouté lors de vos premières applications en JavaScript. En effet, les navigateurs permettent beaucoup de "souplesse" dans le code Html et les feuilles de style CSS. Avec le JavaScript, on passe à la rigueur d’un langage de programmation. La moindre erreur sera sanctionnée ! Et une erreur est si vite arrivée... Un point à la place d’une virgule, une faute de frappe, une majuscule absente ou indue, une parenthèse manquante, un guillemet au lieu d’une apostrophe, une accolade oubliée, voilà un florilège de petites erreurs qui empêcheront l’exécution d’un script.

Pour faciliter l’apprentissage, l’auteur conseille d’activer le débuggeur de script par défaut de votre navigateur. Dans le cadre d’Internet Explorer, utilisez pour cela la commande Outils Options Internet onglet Avancé.

Il sera peutêtre nécessaire d’installer le "Script Debugger" de Microsoft. Ce programme est disponible en téléchargement pour différentes versions du système d’exploitation de Microsoft à l’adresse : http://www.microsoft.com/downloads/results.aspx?productID=&freetext= script+debugger&DisplayLang=en ou plus simplement, par une recherche sur Google avec comme mots clés "Script Debugger download".

Un message d’erreur du type suivant vous fera gagner un temps précieux et vous aidera à corriger votre script.

Plus de détails sont fournis au chapitre Débogage du JavaScript.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzgdgHrRujzIgLAA==-enidentnumber

151

Introduction

Avant de passer à l’étude proprement dite de tout langage de programmation, aussi modeste soitil comme le JavaScript, il importe de parcourir quelques règles d’écriture et de syntaxe.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzKytPuBujzIgLAA==-enidentnumber

152

La casse

Le JavaScript est sensible à la casse (case sensitive). Il fait donc la différence entre les majuscules et les minuscules.

Ainsi, var = numéro ne sera pas égal à var = Numero ni à var = NUMERO.

Pour l’écriture des instructions JavaScript, on utilisera l’alphabet ASCII classique (à 128 caractères) comme en Html.

Les espaces, tabulations, retours chariot, lignes vierges sont (sauf exceptions) ignorés dans le code.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzR/ZqwRujzIgLAA==-enidentnumber

153

Les commentaires

Il est toujours utile d’annoter le code avec des commentaires en vue de faciliter sa lisibilité.

En JavaScript, ces commentaires peuvent être ajoutés de deux façons :

par une double barre oblique (//) devant le commentaire. Cette notation est bien adaptée pour les commentaires qui se notent sur une seule ligne.

// Ceci est un commentaire

par les signes /* ... */. Ce qui permet d’étendre le commentaire sur plusieurs lignes :

/* Pour les bavards, JavaScript a prévu

des commentaires sur plusieurs lignes */


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQ+esyhujzIgLAA==-enidentnumber

154

Le pointvirgule

Chaque commande ou instruction JavaScript se termine par un pointvirgule.

Exemple : document.write ("ligne : " + compt + "<br>");

Bien que cela ne soit plus obligatoire en toutes circonstances, il reste prudent de maintenir cette règle de façon systématique lorsqu’on débute en JavaScript.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzO1Gn0xujzIgLAA==-enidentnumber

155

Les constantes

Les constantes sont fixées par la valeur indiquée dans le code.

Les valeurs reconnues par le JavaScript sont :

les nombres entiers ou à virgule flottante. Notons que pour ces derniers, le point remplace la virgule utilisée habituellement en bureautique.

2005

16.6666

les chaînes de caractères. Elles sont constituées d’une suite de caractères quelconques, encadrée par des guillemets ou des apostrophes. Une chaîne commencée avec des guillemets doit se terminer avec des guillemets. Même chose pour l’apostrophe.

"CSS + DHTML"

"3.1416"

Si la chaîne de caractères contient un guillemet, une apostrophe ou une barre oblique à gauche (backslach), ces derniers risquent d’être interprétés comme du code JavaScript. Les caractères cités s’encoderont ainsi précédés d’une barre oblique à gauche, soit :

\" pour l’apostrophe.

\’ pour le guillemet.

\\ pour la barre oblique à gauche.

Je lui ai dit : \"Va à l\’école \".

Une chaîne de caractères peut être vide. C’est un peu l’équivalent de la valeur zéro pour une constante numérique. Dans ce cas, elle s’écrit au moyen de deux guillemets ou de deux apostrophes rigoureusement consécutifs (sans espace entre eux).

les valeurs logiques ou booléennes, soit "true" pour vrai et "false" pour faux.

null lorsqu’il n’y a pas de donnée valide dans la variable.

undefined. C’est la valeur d’une variable qui n’a pas été initialisée.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzn94F3RujzIgLAA==-enidentnumber

156

Les variables

Contrairement à la plupart des autres langages de programmation, JavaScript n’est que faiblement typé. En effet, il n’est pas nécessaire de déclarer le type des variables (par exemple : int, float, double, char et autres long) et une variable peut à tout moment changer de type.

Les variables se déclarent de deux façons :

explicitement par le mot clé var.

var indice

implicitement par son apparition à gauche du signe égal.

b = 256

Le nom de la variable doit respecter la syntaxe suivante :

La variable doit commencer par une lettre ou un caractère de soulignement "_".

La variable peut comporter un nombre indéterminé de lettres, de chiffres ainsi que des caractères _ et $.

Les espaces ne sont pas autorisés.

Le nom de variable ne peut utiliser des mots dits "réservés". En effet, ces mots sont utilisés dans le code JavaScript même. On ne peut nommer une variable, par exemple, var, true, false, else, etc. La liste complète de ces mots réservés est fournie en annexe.

Pour rappel, le JavaScript est sensible aux majuscules et minuscules.

Exemples de déclaration de variables :

var pi; var code_postal; var formulaire1; var result$;

On peut initialiser une variable en même temps que sa déclaration au moyen du signe égal (=) suivi d’une valeur numérique, d’une chaîne de caractères ou d’une valeur booléenne. Ce qui évite que la valeur undefined soit retournée.

Exemples :

var pi=3.1415926535; var code_postal=59000; var formulaire1="Ville"; var result$=true;

Exemple :

<html> <head> <title>Variable</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var texte = "Mon chiffre préféré est le "; var variable = 7; document.write(texte + variable); </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4fKS6hujzIgLAA==-enidentnumber

157


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4fKS6hujzIgLAA==-enidentnumber

158

Ce livre "Des CSS au DHTML" est destiné à tout concepteur de sites Web utilisant les feuilles de styles et maîtrisant le HTML. Il détaille, en trois grandes parties, les trois éléments essentiels pour dynamiser la présentation de pages web : les feuilles de style CSS 2, JavaScript et enfin, le DHTML. Après quelques notions de base sur les CSS, l’auteur détaille leur application au HTML (textes, listes, arrière-plan...), les propriétés d’affichage à l’écran, d’impression de pages... Ensuite, sont introduites très progressivement la syntaxe et les techniques de la programmation (fonctions, méthodes, conditions et boucles, évènements...) avant de détailler les spécificités du JavaScript (les objets window, String, Array, Date...). Enfin, dans la dernière partie, vous apprendrez à utiliser du code JavaScript pour rendre dynamiques vos feuilles de style CSS et améliorer ainsi l’attrait et la convivialité de vos sites Web (déplacer un objet, faire suivre la souris d’une image, d’un texte, d’une info bulle explicative, faire défiler du texte dans une zone de texte, adapter une nouvelle fenêtre à la résolution d’écran du visiteur, proposer des menus de navigation dynamiques...).

Ce livre numérique a été conçu et est diffusé dans le respect des droits d’auteur. Toutes les marques citées ont été déposées par leur éditeur respectif. La loi du 11 Mars 1957 n’autorisant aux termes des alinéas 2 et 3 de l’article 41, d’une part, que les “copies ou reproductions strictement réservées à l’usage privé du copiste et non destinées à une utilisation collective”, et, d’autre part, que les analyses et les courtes citations dans un but d’exemple et d’illustration, “toute représentation ou reproduction intégrale, ou partielle, faite sans le consentement de l’auteur ou de ses ayants droit ou ayant cause, est illicite” (alinéa 1er de l’article 40). Cette représentation ou reproduction, par quelque procédé que ce soit, constituerait donc une contrefaçon sanctionnée par les articles 425 et suivants du Code Pénal. Copyright Editions ENI

Des CSS au DHTML JavaScript appliqué aux feuilles de style

Luc VAN LANCKER

Résumé

L'auteur

Dès les débuts d’Internet, Luc Van Lancker, enthousiasmé par l’idée de communication universelle que véhiculait ce concept, s’est complètement investi dans ce domaine. C'est un formateur passionné, très au fait des nouvelles technologies liées au web et grand pédagogue. Retrouvez l'interview de Luc VAN LANCKER : "Le mot de l'auteur", à propos de son livre Accessibilité des sites web - Mise en œuvre des directives WCAG 1.0.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzn7e+CfuizIgLAA==-enidentnumber

159

http://www.editions-eni.fr/_Download/343d2a96-8dc5-4add-a63b-9c3ca8949a82/accessibilite-des-si_(Interview--le-mot-de-l-auteur).pdf

Les opérateurs

JavaScript comporte de nombreux opérateurs selon le type de valeurs.

Ce sont les opérateurs classiques de toutes les opérations de calcul.

Lorsque l’opérateur + porte sur deux opérateurs dont l’un au moins est une chaîne de caractères, il joue le rôle d’opérateur de concaténation (voir plus loin).

L’opérateur = affecte simplement une valeur. On le confond souvent avec l’opérateur d’égalité ==.

Ces opérateurs sont souvent utilisés lors de tests conditionnels.

Pour rappel, le = est un opérateur d’attribution de valeur tandis que le == est un opérateur de comparaison. Cette confusion est une source fréquente d’erreur de programmation.

Le résultat renvoyé par une opération de comparaison est une valeur booléenne "true" ou "false".

Ces opérateurs sont également utilisés dans les tests conditionnels mais logiques cette fois. Ils portent sur des opérandes booléens et le résultat renvoyé est également une valeur booléenne (true ou false).

Les opérateurs arithmétiques

Opérateurs Nom Signification Exemple

++ plus addition x + 100

moins soustraction x 1

* multiplié multiplication x * 2

/ divisé division x / 10

% modulo reste de la division par 356 % 5

= égal affectation de valeur i = 4

Les opérateurs de comparaison

Opérateur Nom Exemple

< inférieur x < 10

<= inférieur ou égal x <= 10

== égal x == 10

>= supérieur ou égal x >= 10

> supérieur x > 10

!= différent x != 10

Les opérateurs booléens (ou logiques)

Opérateur Nom Signification Exemple


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzPaGT9BujzIgLAA==-enidentnumber

160

Ces opérateurs associent deux opérateurs d’affectation. C’est une forme abrégée pour noter les opérateurs de calcul, plutôt réservée à des programmeurs plus confirmés.

Un classique des langages de programmation mais souvent déroutant pour les novices. Cet opérateur d’incrémentation est très utilisé pour faire varier d’une unité les compteurs implémentés dans le code.

Ainsi, pour une valeur de départ x = 0, au premier passage x++ vaudra 1 (x=x + 1 ou 1=0 + 1). Au second passage, x++ vaudra 2 (x=x +1 ou 2=1 + 1). Au troisième passage, x++ vaudra 3 (x=x +1 ou 3=2 + 1). Et ainsi de suite.

Utilisé avec des chaînes de caractères, cet opérateur ajoute une chaîne de caractères à la suite d’une autre chaîne de caractères.

Lorsque vous concaténez des chaînes de caractères, il ne faut pas oublier les espaces au début ou à la fin de chacune d’elles, sous peine de souder les chaînes.

Il existe encore d’autres opérateurs mais ils dépassent largement le cadre d’une initiation au JavaScript.

<html> <head> <title>Opérateur</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var variable = (100 - 50) * 2; document.write("(100 - 50) * 2 = " + variable); </script>

&& et les deux conditions sont vérifiées condition1 && condition2

|| ou une des deux conditions est vérifiée condition1 || condition2

! ! la condition n’est pas vérifiée ! condition1

Les opérateurs associatifs

Opérateur Nom Exemple Signification

+= plus égal x += y x = x + y

= moins égal x = y x = x y

*= multiplié égal x *= y x = x * y

/= divisé égal x /= y x = x / y

Les opérateurs d’incrémentation


x++ incrémentation x = x++ x=x+1

x décrémentation x = x x=x1

Les opérateurs de concaténation


++ concaténation "chaîne1" + "chaîne2" "chaîne1 chaîne2"

Autres opérateurs



161

</body> </html>

Comme en algèbre, lorsqu’une expression comporte plusieurs opérateurs, celleci est évaluée selon la priorité respective des opérateurs.

Voici, pour les opérateurs repris dans notre étude, la liste des priorités, de la plus basse à la plus haute.

En cas de priorité égale d’opérateurs consécutifs, l’opération est effectuée de gauche à droite. On peut toujours modifier une priorité d’opérateurs par l’emploi de parenthèses car cellesci ont le plus haut niveau de priorité.

Priorité des opérateurs

Opérateur Symbole

virgule ,

association et affectation = += = *= /= < <= > >=

ou logique ||

et logique &&

comparaison = != < <= >= >

addition/soustraction +

multiplication/division * /

différent et incrémentation ! ++

parenthèses ( )



162

Un peu de théorie objet

JavaScript est un langage orienté objet. Il va ainsi diviser la page affichée à l’écran en objets mais surtout va vous permettre d’accéder à ces objets et de les manipuler.

Illustrons tout d’abord différents objets qui peuvent être contenus dans une page Web. Soit la page suivante :

Cette page s’affiche dans une fenêtre du navigateur. C’est l’objet fenêtre (window) :

Dans cette fenêtre, il y a un document Html. C’est l’objet document (document). Autrement dit (et c’est là que l’on voit apparaître la notion de hiérarchie des objets JavaScript), l’objet fenêtre contient l’objet document.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQznR80BxyjzIgLAA==-enidentnumber

163

Dans ce document, on trouve un formulaire au sens Html. C’est l’objet formulaire (form). Autrement dit, l’objet fenêtre contient un objet document qui lui, contient un objet formulaire :

Dans ce formulaire, on trouve trois éléments : une zone de texte, des boutons d’option et un bouton d’envoi. Ce sont respectivement l’objet texte, l’objet option (radio) et l’objet bouton. L’objet fenêtre contient donc l’objet document qui contient l’objet formulaire qui contient à son tour l’objet texte, l’objet option et l’objet bouton :

La hiérarchie des objets de cet exemple est donc :

Pour accéder à un objet, il faut indiquer le chemin complet de l’objet en allant du contenant le plus extérieur à l’objet référencé. Soit par exemple pour le bouton option "Masculin" : (window).document.form.radio[0].

Nous avons mis l’objet window entre parenthèses car window occupe toujours la première place dans la hiérarchie des objets. Il est repris par défaut par JavaScript et devient donc facultatif.

Nous aurons souvent l’occasion d’appliquer tout ceci dans la suite de cet ouvrage, tout spécialement lors d’emploi de formulaires.

Plus loin dans cet ouvrage (cf. chapitre Le Dhtml et les objets Accéder à un objet), nous aborderons d’autres manières d’accéder aux objets par les méthodes getElementBuId, getElementsByName, getElementsByTagName.

→ texte

fenêtre → document → formulaire → option

→ bouton


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQznR80BxyjzIgLAA==-enidentnumber

164

Déclaration d’une fonction

Une fonction est un groupe de lignes de code de programmation, écrites par le concepteur et destinées à exécuter une tâche bien spécifique. On pourra, si besoin est, l’utiliser à plusieurs reprises dans la page. En outre, l’usage des fonctions améliorera grandement la lisibilité de votre script.

Pour déclarer ou définir une fonction, on utilise le mot (réservé) function. À ne pas confondre avec "fonction" en français !

La syntaxe d’une déclaration de fonction est la suivante :

function nom_de_la_fonction(arguments) ... code des instructions ...

Le nom de la fonction suit les mêmes règles que celles qui régissent le nom des variables (voir chapitre JavaScript Notions fondamentales Les variables). Pour rappel, JavaScript est sensible à la casse. Ainsi, function_a() ne sera pas égal à Function_a().

Tous les noms de fonctions dans un script doivent être uniques.

La mention des arguments est facultative mais dans ce cas, les parenthèses doivent rester. C’est d’ailleurs grâce à ces parenthèses que l’interpréteur JavaScript distingue les variables des fonctions. Nous reviendrons plus en détail sur les arguments et autres paramètres.

Lorsqu’une accolade est ouverte, elle doit impérativement, sous peine de message d’erreur, être refermée. Prenez la bonne habitude de fermer directement vos accolades et d’écrire le code entre elles. De nombreux scripts ne fonctionnent pas pour des erreurs d’accolades fermantes.

Le nombre d’accolades ouvertes (voir fonctions, tests conditionnel, etc) doit être égal au nombre d’accolades fermées.

Le fait de définir une fonction n’entraîne pas l’exécution des commandes qui la composent. Ce n’est que lors de l’appel de la fonction que le code de programme est exécuté (point Appel d’une fonction du présent chapitre).

La déclaration de fonction se place souvent dans l’entête du document Html, soit entre les balises <head> ... </head>. Elle sera ainsi toujours disponible et pourra être appelée à tout moment dans le document.

Exemple :

<head> <script type="text/javascript"> function message() document.write("Bienvenue"); </script> </head>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz6yb6FxyjzIgLAA==-enidentnumber

165

Appel d’une fonction

Le script de la fonction ne s’exécute que lorsque celleci est appelée.

L’appel d’une fonction se fait par le nom de la fonction (avec les parenthèses). On y adjoint les paramètres éventuels, soit par exemple, nom_de_la_fonction();

<script.type="text/javascript"> message(); </script>

Il faut veiller à ce que la fonction soit déjà définie et connue de l’interpréteur avant son exécution.

La page complète serait :

<html> <head> <title>Fonction</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function message() document.write("Bienvenue"); </script> </head> <body> <script.type="text/javascript"> message(); </script> </body> </html>

L’appel de la fonction se réalise souvent au moyen de gestionnaires d’événements comme le chargement de la page, le clic d’un bouton (voir chapitre Gestionnaire d’événement). Nous retenons ici l’événement onload qui appellera la fonction message() au chargement de la page :

<body onload="message();">


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzTXPDJxyjzIgLAA==-enidentnumber

166

Passage de paramètre(s)

Il est possible de passer des paramètres à une fonction, c’estàdire de lui fournir une valeur ou le nom d’une variable afin que la fonction puisse effectuer les opérations programmées à l’aide de ces paramètres.

Lorsqu’on passe plusieurs paramètres à une fonction, il faut les séparer par des virgules, aussi bien dans la déclaration que dans l’appel.

Soit une fonction qui calcule le cube d’un nombre :

function cube(nombre) var cube = nombre*nombre*nombre;

Cette fonction doit avoir une valeur pour effectuer son opération. Cette valeur lui sera fournie en argument de l’appel de la fonction :

lors de l’appel : cube (5);

ou sous forme de variable :

Var nombre = 5 cube (nombre);

Appliqué à notre exemple précédent, le script pourrait devenir :

<html> <head> <title>Fonction avec paramètre</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function message(texte) document.write(texte); </script> </head> <body> <script.type="text/javascript"> message(’Bienvenue’); </script> </body> </html>

La capture d’écran est identique à la précédente.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz53q7MByjzIgLAA==-enidentnumber

167

Variable locale ou globale

Il existe deux types de variables, les variables locales et les variables globales. Une variable globale est accessible partout dans le script. Une variable locale n’est accessible que dans la fonction qui l’a créée.

C’est ce qu’on appelle la portée des variables. Cette distinction est une source fréquente d’erreurs, souvent difficiles à déceler, dans les scripts.

Une variable déclarée dans une fonction (donc à l’intérieur des accolades de la fonction) par le mot clé var aura une portée limitée à cette seule fonction. On ne pourra pas exploiter cette variable ailleurs dans le script. On l’appelle donc variable locale.

function cube(nombre) var cube = nombre*nombre*nombre

Ainsi, la variable cube est dans cet exemple une variable locale. Si vous y faites référence ailleurs dans le script, cette variable sera inconnue pour l’interpréteur JavaScript (message d’erreur).

Si la variable est déclarée contextuellement (sans utiliser le mot var), sa portée sera globale une fois que la fonction aura été exécutée.

function cube(nombre) cube = nombre*nombre*nombre

La variable cube déclarée contextuellement sera ici une variable globale après l’exécution de la fonction cube().

Les variables déclarées tout au début du script, en dehors et avant toutes fonctions, seront toujours globales, qu’elles soient déclarées avec var ou de façon contextuelle.

<script type="text/javascript"> var cube=1 function cube(nombre) var cube = nombre*nombre*nombre </script>

La variable cube sera bien globale.

Pour la facilité de gestion des variables, on ne peut que conseiller de les déclarer en début de script (comme dans la plupart des langages de programmation). Cette habitude vous met à l’abri de complications certaines.

Exemple :

Dans le script suivant, la variable a a été initialisée à 20. Comme elle est déclarée avant la fonction, il s’agit d’une variable globale.

Dans la fonction modif_a(), cette variable a été modifiée pour avoir la valeur 10. Étant déclarée à l’intérieur des accolades d’une fonction, c’est une variable locale.

<html> <head> <title>Globale ou locale</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var a = 10; modif_a(); function modif_a() var a = 20; document.write("<p><b>a dans la fonction (locale) = " + a +"</b></p>"); document.write("<p><b>a hors de la fonction (globale) = " + a +"</b></p>"); </script>

Variable locale

Variable globale


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzqWocOhyjzIgLAA==-enidentnumber

168

</head> <body> </body> </html>

La différence de valeur obtenue illustre bien le genre de difficulté que peut engendrer la portée des variables.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzqWocOhyjzIgLAA==-enidentnumber

169

L’instruction return

Selon l’écriture du code adoptée, le résultat d’une fonction devra être retournée par l’instruction return.

Exemple :

<html> <head> <title>Return</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function ma_fonction() return ("Bienvenue"); </script> </head> <body> <script type="text/javascript"> document.write(ma_fonction()); </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzWz5fQhyjzIgLAA==-enidentnumber

170

Méthodes JavaScript

Les méthodes sont des fonctions déjà implantées dans le langage JavaScript et dédiées à un objet particulier.

Nous avons jusqu’ici utilisé la méthode write(), spécifique à l’objet document.

Passons en revue quelques autres méthodes. Cela permettra de varier nos exemples dans la suite de notre exposé.

1. Alert()

La méthode alert() de l’objet fenêtre affiche une boîte de dialogue d’avertissement. Celleci comporte un message qui reproduit la valeur (variable et/ou chaîne de caractères) de l’argument qui lui a été fourni. Cette boîte de dialogue bloque le programme en cours tant que l’utilisateur n’aura pas cliqué sur OK pour fermer celleci.

Régal des programmeurs débutants en JavaScript, cette méthode est certes spectaculaire mais d’une utilité marginale dans un site Web. Par contre, alert() sera très utile pour vous aider à tester les scripts ou pour y retrouver d’éventuelles erreurs de programmation.

Sa syntaxe est :

alert(variable); alert("chaîne de caractères"); alert(variable + "chaîne de caractères");

Si vous souhaitez afficher un message sur plusieurs lignes, il faut utiliser le signe \n.

Exemple :

Une boîte d’alerte va se déclencher lorsque le bouton est cliqué.

<html> <head> <title>alerte</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function alerte() alert ("Ceci est un message d’alerte !"); </script> </head> <body> <form> <input type=button value="Méthode alert()" onclick="alerte()"> </form> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzsQpcSxyjzIgLAA==-enidentnumber

171

2. confirm()

Cette méthode de l’objet window affiche une boîte de dialogue comportant deux boutons : OK et Annuler. En cliquant sur OK, la méthode renvoie la valeur true et bien entendu false si on a cliqué sur Annuler. Ceci peut permettre, par exemple, de choisir une option dans un programme.

Exemple :

Le script lance une boîte de confirmation. La valeur renvoyée est placée dans la variable a. Si la valeur de a est true(if(a == true)) une boîte d’alerte s’affiche. Sinon, une autre boîte d’alerte est affichée.

<html> <head> <title>confirmation</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var a = confirm("Cliquez OK ou Annuler"); if(a == true) alert ("Vous avez cliqué OK"); else alert ("Vous avez cliqué Annuler"); </script> </body> /html

Remarquez le signe == pour définir l’égalité (voir chapitre Introduction au JavaScript Premier script).

3. prompt()

Dans le même style que les précédentes (méthode de l’objet window), JavaScript vous propose une autre boîte de dialogue, appelée boîte d’invite. Elle est composée d’un champ comportant une entrée à compléter par l’utilisateur. Cette entrée peut aussi posséder une valeur par défaut.

La syntaxe est :

prompt("texte de la boîte d’invite","valeur par défaut");

En cliquant sur OK, la méthode renvoie la valeur encodée par l’utilisateur ou la valeur proposée par défaut. Si l’utilisateur clique sur Annuler, la valeur null est alors renvoyée.

La méthode prompt() est parfois utilisée pour saisir des données fournies par l’utilisateur.



172

Exemple :

On va demander le prénom du visiteur par une boîte d’invite et l’afficher sur la page Web.

<html> <head> <title>invite</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var prenom = prompt("Encodez votre prénom", "Votre prénom ici"); document.write("<h2>Bonjour " + prenom + "</h2>"); </script> </body> </html>

La commande prompt() a été désactivée sous Internet Explorer 7 pour des raisons de sécurité. Elle fonctionne encore sous Internet Explorer 6 ainsi que sous Firefox 2 et 3.

La boîte d’invite sous Firefox :

Le document Html sous Firefox :

4. Une minuterie

JavaScript met à votre disposition une minuterie (ou plus précisément un compteur à rebours) qui permettra de déclencher une fonction après un laps de temps déterminé.

La syntaxe de mise en route du temporisateur est :

nom_du_compteur = setTimeout("fonction_appelée()", temps en millisecondes)

Ainsi, setTimeout("demarrer()",5000) va lancer la fonction demarrer() après 5 secondes.

Exemple :

<html> <head> <title>minuterie</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript">



173

function display() alert("Bonjour !") </script> </head> <body> Cliquez le bouton.<br> Une boite d’alerte apparaîtra après 5 secondes. <form> <input type="button" onclick="setTimeout(’display()’,5000)" value= "Cliquez ici"> </form> </body> </html>

Pour arrêter le temporisateur avant l’expiration du délai fixé, on utilisera la méthodeclear-Timeout(nom_du_compteur).



174

Les conditions if ... else

Les langages de programmation n’échappent pas aux tests conditionnels. C’est ce qui en fait d’ailleurs leur richesse.

L’expression if (si) permet d’exécuter ou non une série d’instructions en fonction du résultat d’un test.

if (condition vraie) une ou plusieurs instruction(s);

Si la condition est vérifiée (true), les instructions s’exécutent. Si elle ne l’est pas (false), les instructions ne s’exécutent pas et le programme passe à la commande suivante.

Remarquons que les instructions sont comprises entre des accolades ouvrante et fermante.

Une forme plus évoluée est :

if (condition vraie) instructions 1; else instructions 2;

Si la condition est vérifiée (true), le bloc d’instructions 1 s’exécute. Sinon (else), soit lorsque la condition renvoie la valeur false, le bloc d’instructions 2 s’exécute.

Exemple :

On demande au visiteur de saisir un nombre compris entre 0 et 99. Le script annonce si le nombre encodé est inférieur ou égal à 50 ou supérieur à 50.

<html> <head> <title>if ... else</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function test() var a = document.formulaire.input.value; if (a <= 50) document.write(a +" inférieur ou égal à 50"); else document.write(a + " est supérieur à 50"); </script> </head> <body> <form name="formulaire"> <input type="text" name="input" size="2" maxlength="2" value=""> <input type="button" value="Tester" onclick="test()"> </form> </body> </html>

Explications :

Le formulaire comporte une ligne de texte limitée à deux positions (maxlength="2") pour encoder un chiffre compris entre 0 et 99.

En cliquant sur le bouton Tester, le visiteur appelle la fonction test() définie entre <head> ... </head>.

Dans la fonction test(), on récupère dans la variable a, le chiffre encodé dans la zone de texte. Pour trouver ce chiffre, on part du document, on y repère le formulaire qui contient la zone de texte nommée input et on en prend la valeur (voir chapitre JavaScript Notions fondamentales Un peu de théorie objet). Ce chemin s’écrit, en JavaScript, document.formulaire.input.value.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzT5mbVByjzIgLAA==-enidentnumber

175

On teste la condition a inférieur ou égal à 50 (a <= 50);

Si cette condition est réalisée, on écrit que le chiffre encodé est inférieur ou égal à 50. Si cette condition n’est pas réalisée (else), on écrit que le chiffre encodé est supérieur à 50.

Remarquez les deux accolades de fin. La première termine le test if ... else. La seconde termine la fonction test().

Il est également possible de concevoir de multiples tests conditionnels.

if (condition 1) instruction(s) à exécuter si la condition 1 est vraie else if (condition 2) code à exécuter si la condition 2 est vraie else code à exécuter si tous les tests sont faux

Pour ceux qui aiment les notations concises, on peut aussi écrire :

(expression) ? instruction a : instruction b

Si l’expression entre parenthèses est vraie, l’instruction a est exécutée. Si l’expression entre parenthèses est fausse, c’est l’instruction b qui est exécutée. Remarquons le double point entre les deux instructions a et b.

Le script précédent deviendrait alors :

<html> <head> <title>if concis</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <form name=formulaire> <input type="text" maxlength=2 size=2 name="input" value=""> <input type="button" value="Tester" onclick="(document.formulaire.input.value <=50) ? document.write(document.formulaire.input.value + ’ est inférieur ou égal à 50’) : document.write(document.formulaire. input.value + ’ est supérieur à 50’)"> </form>



176

</body> /html

Le test conditionnel if ... else est un pilier du JavaScript et de la programmation. Il sera utilisé fréquemment dans les scripts d’une certaine importance.



177

La boucle for

L’expression for permet d’exécuter un bloc d’instructions un certain nombre de fois (boucle) en fonction de la réalisation d’un certain critère. L’instruction for prévoit d’emblée un compteur et une condition pour l’interruption.

La syntaxe générale est :

for (valeur initiale ; condition ; progression) instructions;

Prenons un exemple concret :

for (i=0; i<5; i++) document.write(i + "<br>")

Au premier passage, la variable i, étant initialisée à 0, vaut bien entendu 0. Elle est bien inférieure à 5. Les instructions s’exécutent. La variable est ensuite incrémentée d’une unité par l’opérateur d’incrémentation i++ (i vaut alors 1) et on revient à la boucle for.

La variable i (qui vaut 1) est encore toujours inférieure à 5. L’instruction est à nouveau exécutée. La variable est augmentée de 1 par l’incrémentation.

Ainsi de suite jusqu’à ce que i vaille 5. La variable i ne remplit alors plus la condition i inférieure à 5. La boucle s’interrompt et le programme continue après l’accolade de fermeture.

<html> <head> <title>Boucle for</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> La boucle for :<br> <script type="text/javascript"> for (i=0; i<5; i++) document.write("Passage " + i + "<br>") </script> </body> /html

Le piège des boucles est de concevoir une boucle qui ne s’arrête pas (boucle infinie). Un message d’erreur apparaît alors, pour empêcher de faire "planter" le navigateur. Cette instruction for est très utilisée en

JavaScript.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzwbgqXRyjzIgLAA==-enidentnumber

178


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzwbgqXRyjzIgLAA==-enidentnumber

179

La boucle while

L’instruction while permet d’exécuter une instruction (ou un groupe d’instructions) un certain nombre de fois.

while (condition vraie) instruction(s)

Aussi longtemps que la condition est vérifiée, JavaScript continue à exécuter les instructions placées entre les accolades. Une fois que la condition n’est plus vérifiée, la boucle est interrompue et on continue le script.

Exemple :

<html> <head> <title>Boucle while</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> La boucle while :<br> <script type="text/javascript"> compt = 0; while (compt<5) document.write("Passage " + compt + "<br>"); compt++; </script> </body> /html

Le résultat est identique à l’instruction for. Dans la pratique, l’instruction for est souvent préférée à while car elle comporte d’origine un compteur.

Le risque de boucle infinie est d’autant plus présent avec while que le concepteur doit créer et incrémenter luimême le compteur.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzK/lbZhyjzIgLAA==-enidentnumber

180

Les événements

Les gestionnaires d’événement vont apporter l’élément d’interactivité qui caractérise le JavaScript. Par leur intermédiaire, les actions du visiteur mettront en œuvre les outils de programmation du JavaScript.

La gestion de ces événements, déclenchés généralement par l’internaute, fera le lien entre le Html et le JavaScript.

Passons en revue différents événements implémentés en JavaScript. Cette liste n’est cependant pas limitative.

Ces gestionnaires d’événements sont notés sous forme d’attributs dans les balises Html. Ils ont d’ailleurs été repris par le W3C dans le standard Html 4.0. Ils peuvent donc être notés sans majuscule(s). C’est la

convention que nous adopterons pour la suite.

La syntaxe est :

onAbort À l’arrêt du chargement de la page ou d’une image par le bouton Stop du navigateur.

onBlur À la perte du focus par un élément Html (généralement lorsqu’on quitte un élément de formulaire).

onClick Au clic de la souris sur un élément Html.

onDbClick Au double clic sur un élément Html.

onError À l’apparition d’une erreur dans la page.

onFocus À la prise du focus d’un élément de formulaire.

onKeyDown À la pression d’une touche du clavier.

onKeyUp Au relâchement d’une touche du clavier qui a été enfoncée.

onKeyPress À l’encodage par une touche du clavier (combinaison de onKeyDown et onKeyUp).

onLoad Au chargement de la page par le navigateur.

onMouseDown À la pression du bouton de la souris.

onMouseMove Au déplacement de la souris.

onMouseOut À l’abandon d’un élément Html par la souris.

onMouseOver Au survol d’un élément Html par la souris.

onMouseUp Au relâchement du bouton de la souris (suite de onMouseDown)

onMove Au déplacement de la fenêtre.

onReset Au clic du bouton "reset" (bouton Annuler) d’un formulaire.

onResize Au redimensionnement de la fenêtre du navigateur.

onScroll À l’utilisation de la barre de défilement.

onSelect À la sélection d’un texte dans un élément Html.

onSubmit Au clic du bouton "submit" (bouton Envoyer) d’un formulaire.

onUnLoad Au moment où la page est quittée.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzU1lOcByjzIgLAA==-enidentnumber

181

événement="function()"

Soit un événement (ils commencent tous par on qui signifie "au ..."), le signe égal et la fonction associée par le concepteur, entourée par des apostrophes.

Exemple :

onclick="alert(’Vous avez cliqué sur cet élément’)"

De façon littéraire, au clic de l’utilisateur, une boîte d’alerte s’ouvrira avec le message indiqué dans le script.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzU1lOcByjzIgLAA==-enidentnumber

182

Onclick

Le clic de la souris est un événement fréquemment utilisé. Il survient lorsque le visiteur clique sur un lien ou un élément de formulaire.

Selon le Html 4.0, il serait possible de l’associer à une multitude de balises Html; soit :

<a>, <abbr>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl><F255D>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <menu>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul> et <var>.

Il en est de même pour onmousedown, onmouseout, onmouseover, onmouseup.

Exemple :

Au clic du bouton, une boîte d’alerte surgit.

<html> <head> <title>onclick</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <form> <input type="button" value="Cliquer ici" onclick="alert (’Vous avez cliqué ici’)"> </form> </body> </html>

Le clic de la souris, dans le cas d’un lien par la balise <a> ... </a>, est déjà utilisé par le Html pour atteindre la page spécifiée. Pour associer au clic d’un lien une action JavaScript, il a fallu introduire une notation particulière

du genre : <a href="javascript:alert(’Bonjour !’);">Cliquer ici !</a> . Ainsi dans l’attribut href, on indique au navigateur qu’il ne s’agit pas d’un lien mais du JavaScript. D’où la notation javascript, double point et l’instruction retenue.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzjdfVhhyjzIgLAA==-enidentnumber

183

onerror

Une erreur de script est un autre événement qui peut être décelé par le JavaScript.

Exemple :

Selon le code Html, une image devrait être affichée mais celleci est manquante. Ce qui provoque une erreur.

<html> <head> <title>onerror</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <img src="x.gif" onerror="alert(’Cette image est absente’)"> </body> </html>

Cet événement onerror peut aussi être utilisé, de façon peu académique, pour empêcher la mention par le navigateur d’erreurs de script. Soulignons que les erreurs subsistent et ne sont nullement corrigées.

Soit un script comportant une grossière erreur, document.write(’bienvenue.

<html> <head> <title>onerror 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> </body> <script> document.write(’bienvenue </script> </body> </html>

Ce script affiche bien entendu un message d’erreur.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzdYMUkRyjzIgLAA==-enidentnumber

184

Pour empêcher la mention de l’erreur, on ajoute le script suivant dans le head :

<script type="text/javascript"> function supprim() return true window.onerror=supprim; </script>

Ainsi, lors d’une erreur dans la fenêtre du navigateur, on fait appel à la fonction supprim() qui renvoie true (correct) au lieu de false généré par l’erreur.

Le script complet ne génèrera aucun message d’erreur alors qu’une erreur est bien présente dans le script.

<html> <head> <title>onerror 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function supprim() return true window.onerror=supprim; </script> </head> </body> <script> document.write(’bienvenue </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzdYMUkRyjzIgLAA==-enidentnumber

185

onfocus

Un événement onfocus est généré lorsqu’un élément est activé, par exemple une ligne de texte d’un formulaire.

Exemple :

Lorsque l’utilisateur clique dans une zone de texte, une inscription apparaît dans celleci.

<html> <head> <title>onfocus</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <form name="form"> <input name="t1" onFocus="document.form.t1.value= ’Entrez votre nom ici !’"><br> <input name="t2" onFocus=" document.form.t2.value=’Entrez votre prénom ici !’"> </form> </body> </html>

Après avoir cliqué dans la seconde ligne de texte, on obtient la capture d’écran suivante :


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQdzAmxyjzIgLAA==-enidentnumber

186

onload et onunload

Au chargement (load) de la page ou à la sortie (onunload) de la page, des événements sont générés.

Exemple :

Affichage d’un message d’accueil au chargement de la page et à la sortie de celleci.

<html> <head> <title>onload et onunload</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body onload="alert(’Bienvenue !’)" onunload="alert(’A bientôt...’)"> <a href="onfocus.htm">Page suivante</a> </body> </html>

Ce script associe deux événements dans la même balise. L’écriture en est simple. Il suffit d’encoder les différents événements à la suite, car ils sont, depuis le Html 4.0, considérés comme de simples attributs.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZxAophyjzIgLAA==-enidentnumber

187

onmouseover

Une action est effectuée lors du survol par la souris d’un élément de la page.

Exemple :

Au survol d’une image, une boîte d’alerte s’affiche.

<html> <head> <title>onmouseover</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function afficher() alert("Il y a un copyright sur l’image !"); </script> </head> <body> <img src="world.jpg" width="70" height="70" onmouseover="afficher()"> </body> </html>

Il est fortement recommandé de toujours spécifier les attributs width et height lorsqu’on travaille sur des images en JavaScript.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzC4FrsByjzIgLAA==-enidentnumber

188

onmouseover et onmouseout

L’événement onmouseover se produit lorsque le pointeur de la souris passe au dessus (sans cliquer) d’un lien ou d’une image.

L’événement onmouseout, généralement associé à un onmouseover, se produit lorsque le pointeur quitte la zone sensible (lien ou image).

Exemple :

Ces événements sont souvent utilisés pour réaliser un effet, désormais classique, d’affichage d’une autre image au survol de l’image originale par le pointeur de la souris. Cet effet porte le nom de rollover dans la documentation anglosaxonne.

Il importe que la dimension des images concernées par le script soit rigoureusement identique en hauteur et largeur.

Soit les images :

<html> <head> <title>rollover</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <img name="image" src="world.jpg" onmouseover="document.image.src=’world2.jpg’;" onmouseout="document.image.src=’world.jpg’;"> </body> </html>

La balise image <img> affiche l’image initiale world.jpg (src="world.jpg"). On a pris soin de donner un nom à cette balise image (name="image"). Au survol de la souris (onmouseover), c’est l’image world2.jpg qui apparaîtra. Pour ce faire, on indique à JavaScript qu’il doit chercher dans le document l’objet "image" et l’attribut src qui donne l’adresse de celleci. Soit le chemin complet, document.image.src. Lorsque le pointeur de la souris quitte l’image (onmouseout), on redemande l’affichage de l’image originale.

Il existe plusieurs versions différentes de ce script.

Il est également possible de reproduire l’effet avec uniquement des feuilles de style CSS.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZy9suhyjzIgLAA==-enidentnumber

189

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>rollover CSS</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> a.image display: block; width: 70px; height: 70px; background-image: url(world.jpg); background-repeat: no-repeat; a.image:hover background-image: url(world2.jpg); </style> </head> <body> <a class="image" href="#"></a> </body> </html>

La classe image de la balise de lien <a> ... </a> doit être un bloc. On y spécifie la largeur et la hauteur de l’image. L’adresse de l’image est celle de l’image initiale.

L’adresse de la seconde image est déterminée dans la pseudoclasse a.image:hover.

Le résultat est identique à la capture d’écran précédente.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZy9suhyjzIgLAA==-enidentnumber

190

onsubmit

L’événement créé par le clic sur le bouton d’envoi d’un formulaire pourra judicieusement être mis à profit pour, par exemple, effectuer des vérifications concernant l’encodage des champs de celuici.

Exemple :

Ce script vérifie si les champs du formulaire ont bien été complétés.

<html> <head> <title>onsubmit</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function verif() a = document.formulaire.texte1.value; b = document.formulaire.texte2.value; c = document.formulaire.texte3.value; if (a==""b==""c=="") alert("Au moins un champ est vide !"); </script> </head> <body> <form name="formulaire" onsubmit="verif()"> <input name="texte1"<+>size="26"><br> <input name="texte2" size="26"><br> <input name="texte3" size="26"><br> <input type="submit"> </form> </body> </html>

Au clic du bouton d’envoi du formulaire, la fonction verif() est appelée (onsubmit= "verif()"). Pour la lisibilité du script, la valeur des différentes lignes de texte du formulaire a été mis dans une variable. L’accès à cette valeur s’effectue par l’écriture du chemin désormais habituel document.formulaire.textex.value. Par un test conditionnel if, on vérifie si une des lignes de texte est vide, soit si a ou b ou c est vide ( pour le ou logique). Dans ce cas, une boîte d’alerte est affichée.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz3TOlxRyjzIgLAA==-enidentnumber

191

Introduction

Avec JavaScript, les formulaires Html prennent une toute autre dimension. N’oublions pas qu’en JavaScript, on peut accéder à chaque élément d’un formulaire pour, par exemple, y lire et/ou écrire une valeur. Tous ces éléments renforceront les capacités interactives des pages Web.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzHdhr2ByjzIgLAA==-enidentnumber

192

La ligne de texte

La zone de texte est l’élément d’entrée/sortie par excellence de JavaScript.

L’objet text possède trois propriétés :

Nous allons étudier plusieurs exemples d’utilisation des zones de texte.

1. Lire une valeur

Il s’agit d’encoder une valeur dans la zone de texte et d’appuyer sur un bouton pour contrôler celleci dans une boîte d’alerte.

Le script complet est :

<html> <head> <title>contrôle</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function controle(formulaire) var test = document.formulaire.input.value; alert("Vous avez encodé : " + test); </script> </head> <body> <form name="formulaire"> <input type="text" name="input" value=""><br> <input type="button" name="bouton" value="Contrôler" onclick="controle(formulaire)"> </form> </body> /html

Lorsque l’on clique sur le bouton Contrôler, JavaScript appelle la fonction controle() à laquelle on transmet le formulaire comme argument (onclick="controle(formulaire)").

Cette fonction, définie dans les balises <head>, prend sous la variable test, la valeur de la zone de texte (var test = document.formulaire.input.value). Cette variable est alors fournie comme argument d’une boîte d’alerte.

Propriété Description

name Indique le nom du contrôle par lequel on pourra accéder à la zone de texte.

defaultvalue Indique la valeur par défaut qui sera affichée dans la zone de texte.

value Indique la valeur en cours de la zone de texte. Soit celle tapée par l’utilisateur ou si celuici n’a rien tapé, la valeur par défaut.

focus() Donne le focus, c’estàdire que le curseur est dans le champ de saisie.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzcTSi5hyjzIgLAA==-enidentnumber

193

2. Reproduire une valeur

Après avoir entré une valeur quelconque dans la zone de texte d’entrée, appuyez sur un bouton pour afficher cette même valeur dans la zone de texte de sortie.

Voici le code :

<html> <head> <title>reproduire</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function afficher(formulaire) var testin = document.formulaire.input.value; document.formulaire.output.value=testin; </script> </head> <body> <form name="formulaire"> <input type="text" name="input" value=""> Zone de texte d’entrée <br> <input type="button" name="bouton" value="Afficher" onclick="afficher(formulaire)"><br> <input type="text" name="output" value=""> Zone de texte de sortie </form> </body> </html>

Lorsqu’on clique sur le bouton Afficher, JavaScript appelle la fonction afficher() à laquelle on passe le formulaire comme argument (onclick="afficher(formulaire)").

Cette fonction afficher() définie dans les balises <head> prend sous la variable testin, la valeur de la zone de texte d’entrée (var testin = document.formulaire.input.value). À l’instruction suivante, on indique à JavaScript que la valeur de la zone de texte de sortie comprise dans le formulaire est celle de la variable testin (document.formulaire.output.value = testin).



194

3. Donner le focus

Il est souvent sympathique de placer directement le curseur dans la première zone de texte d’un formulaire.

<html> <head> <title>focus</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body onload="document.form.entree.focus();"> <form name="form" > <input type="text" name="entree" size="25" value=""> </form> </body> </html>

Au chargement de la page (événement onload du body), le focus est donné à la zone de texte dont on a déterminé le chemin par document.form.entree.

Le curseur est bien positionné directement dans la zone de texte.

4. Encodage d’un nombre

Certaines valeurs encodées ne peuvent comporter que des nombres.

Le script suivant permet de le vérifier.

On utilisera la fonction JavaScriptisNaN(argument) pour déterminer s’il ne s’agit pas d’un nombre (NaN pour Not a Number).

<html> <head> <title>nombre</title> <meta http-equiv="Content-Script-Type" content="text/javascript">



195

<script type="text/javascript"> function verif() n=document.form.nombre.value; if (isNaN(n) || n == 0) alert("Entrer un nombre SVP !"); else alert("Entrée valide"); </script> </head> <body> <form name="form"> Code postal : <input type="text" name="nombre" size="3" maxlength="5"> <br> <p><input type="button" name="bouton" value="Tester" onClick="verif()"></p> </form> </body> </html>

On prévoit une zone de texte de cinq positions maximum (maxlength="5") pour l’encodage du code postal. Celuici doit comporter uniquement des chiffres et doit donc pouvoir être interprété comme un nombre. Le clic sur le bouton Tester appelle la fonction verif().

Cette fonction initialise d’abord la variable n avec la valeur de la zone de texte dédiée au code postal (document.form.nombre.value). Un test conditionnel (if) est effectué pour voir si la valeur de n n’est pas un nombre (isNaN(n) ou si n est vide (n == 0). Dans ce cas, l’encodage du code postal est incorrect et une boîte d’alerte invite le visiteur à entrer un nombre. Sinon, on signale que l’entrée est valide.

5. Calcul automatique

Les zones de texte peuvent également être utilisées pour recevoir des données ou contenir le résultat d’opérations de calcul effectuées par le script.

Dans l’exemple suivant, nous allons demander au visiteur les quantités qu’il souhaite commander. Au clic dans la zone de texte du prix total, celuici sera automatiquement affiché.

Il est peutêtre préférable, à ce stade, de jeter auparavant un coup d’œil à la capture d’écran.

<html> <head> <title>calcul</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript">



196

function calcul(form) a = document.form.elem1.value; b= document.form.elem2.value; document.form.elem3.value = a* b; function annul(form) document.form.elem1.value=""; document.form.elem3.value=""; </script> </head> <body> <form name="form"> <table border="1" width="300" cellspacing="0" cellpadding="0"> <tr> <td width="100"> <p align="center">Quantité</p> </td> <td width="100"> <p align="center">Prix unitaire</p> </td> <td width="100"> <p align="center">Prix total</p> </td> </tr> <tr> <td> <p align="center"> <input type="text" name="elem1" size="2" value=""> </p> </td> <td> <p align="center"> <input type="hidden" name="elem2" value="2.56">2,56 € </p> </td> <td> <p align="center"> <input type="text" name="elem3" size="5" value="" onfocus="calcul(form)" onblur="annul(form)"> € </p> </td> </tr> </table> </form> Cliquez n’importe où pour réinitialiser le tableau. </body> </html>

En cliquant dans la zone de texte du prix total, soit en donnant le focus, la fonction calcul() est appelée (onfocus="calcul(form)").

Dans cette fonction calcul(), on met dans la variable a, la valeur encodée par le visiteur dans la zone de texte des quantités (a = document.form.elem1.value) et dans la variable b, la valeur du prix unitaire encodée dans l’élément de formulaire caché (b = document.form.elem2.value). La multiplication de a et de b donne le prix total que l’on entre dans la zone de texte prévue à cet effet (document.form.elem3.value = a * b).

Nous avons profité de ce script pour illustrer l’événement onBlur. À la fin du script, la zone de texte du prix total a le focus. En cliquant n’importe où dans la page, cette zone perd le focus. C’est ce que désigne le terme "bizarroïde" de Blur. À cet événement, est associée la fonction annul (onblur="annul(form)").

Cette fonction replace une chaîne de caractères vides dans les deux zones de texte (document.form.elem1.value="" et document.form.elem3.value=""), ce qui réinitialise le script.



197



198

Les boutons de choix unique

Les boutons de choix unique, appelés aussi boutons radio, sont utilisés pour noter un choix, et seulement un, parmi un ensemble de propositions.

Exemple :

Un formulaire demande le sexe du visiteur.

<html> <head> <title>boutons radio</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function choixsexe(form) if (form.choix[0].checked) alert("Vous avez choisi la proposition " + form.choix[0].value); if (form.choix[1].checked) alert("Vous avez choisi la proposition " + form.choix[1].value); </script> </head> <body> Entrez votre choix : <form name="form"> <input type="radio" name="choix" value="1">Sexe masculin<br> <input type="radio" name="choix" value="2">Sexe féminin<br> <input type="button" name="but" value="Quel est votre choix ?" onclick="choixsexe(form)"> </form> </body> </html>

Dans le formulaire nommé form, on déclare deux boutons radio. Notez que l’on utilise le même nom pour les deux boutons. Vient ensuite un bouton qui déclenche (onclick) la fonction choixsexe().

Cette fonction teste quel bouton radio est coché. On accède aux boutons sous forme d’indice par rapport au nom des boutons radio soit choix[0], choix[1]. On teste la propriété checked du bouton par if (form.choix[x].checked). Dans l’affirmative, une boîte d’alerte s’affiche. Ce message reprend la valeur (value) attachée à chaque bouton par le chemin form.choix[x].value.


name Indique le nom du contrôle. Tous les boutons portent le même nom.

index Indique l’index ou le rang du bouton radio en commençant par 0.

checked Indique l’état en cours de l’élément radio.

defaultchecked Indique l’état du bouton sélectionné par défaut.

value Indique la valeur de l’élément radio.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz+6wP8hyjzIgLAA==-enidentnumber

199


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz+6wP8hyjzIgLAA==-enidentnumber

200

Les boutons de choix multiples

Les boutons de choix multiples (aussi appelés checkbox) sont utilisés pour noter un ou plusieurs choix parmi un ensemble de propositions.

Exemple :

Soit le choix multiple suivant :

La bonne réponse est la première, seconde et quatrième proposition.

<html> <head> <title>boutons checkbox</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function reponse(form) if ( (form.check1.checked) == true && (form.check2.checked) == true && (form.check3.checked) == false && (form.check4.checked) == true) alert("C’est la bonne réponse! "); else alert("Désolé, continuez à chercher."); </script> </head> <body> Sélectionnez les balises Html : <form name="form"> <input type="checkbox" name="check1" value="1"> <h1> ... </h1><br> <input type="checkbox" name="check2" value="2"> <a> ... </a><br> <input type="checkbox" name="check3" value="3"> <op> ... </op><br> <input type="checkbox" name="check4" value="4"> <b> ... </b><br> <input type="button" name="but" value="Corriger" onclick="reponse(form)"> </form> </body> </html>

Dans le formulaire nommé form, on déclare quatre cases à cocher. Notez que l’on utilise un nom différent pour les quatre boutons. Vient ensuite un bouton qui déclenche (onclick) la fonction reponse().


name Indique le nom du contrôle. Toutes les cases à cocher portent un nom différent.

checked Indique l’état en cours de l’élément case à cocher.

defaultchecked Indique l’état du bouton sélectionné par défaut.

value Indique la valeur de l’élément case à cocher.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz5y0LEh2jzIgLAA==-enidentnumber

201

Cette fonction teste quelles cases à cocher sont sélectionnées. Pour avoir la bonne réponse, il faut que les cases 1, 2 et 4 soient cochées. On accède aux cases en utilisant à chaque fois leur nom. On teste la propriété checked du bouton par form.nom_de_la_case.checked. Dans l’affirmative, la valeur renvoyée est true. Dans la négative, la valeur renvoyée est false.

Un test conditionnel vérifie par le "et" logique (&&) si les propositions 1, 2 et 4 sont vraies et la proposition 3 fausse. Dans ce cas, une boîte d’alerte s’affiche pour annoncer la bonne réponse. Dans la négative, une autre boîte d’alerte invite à recommencer.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz5y0LEh2jzIgLAA==-enidentnumber

202

Le menu déroulant

Le menu déroulant, aussi appelé liste de sélection permet de proposer diverses options sous la forme d’une liste déroulante, dans laquelle l’utilisateur peut cliquer pour faire son choix. Ce choix reste alors affiché.

Le menu déroulant est créé par la balise <select> ... </select> et les éléments de la liste par une ou plusieurs balise(s) <option>.

Exemple :

On demande le type de navigateur utilisé au moyen d’une liste déroulante. Les options proposées sont : Internet Explorer, Firefox et Autre.

<html> <head> <title>menu déroulant</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function liste(form) alert("Le navigateur " + (form.list.selectedIndex + 1)); </script> </head> <body> Quel navigateur utilisez-vous ? <form name="form"> <select name ="list"> <option value="1">Internet Explorer <option value="2">Firefox <option value="3">Autre </select> <input type="button" name ="b" value="Réponse" onclick="liste(form)"> </form> </body> </html>

Dans le formulaire nommé form, on déclare une liste de sélection par la balise <select> ... </select>. Entre ces balises, on déclare les différents éléments de la liste par autant de balises <option>. Vient ensuite un bouton qui déclenche la fonction liste().

Cette fonction teste quelle option a été sélectionnée. Le chemin complet de l’élément sélectionné est form.list.selectedIndex. Comme l’index commence à 0, il ne faut pas oublier d’ajouter 1 pour retrouver le juste rang de l’élément.


name Indique le nom de la liste déroulante.

length Indique le nombre d’éléments de la liste.

selectedIndex Indique le rang (à partir de 0) de l’élément de la liste qui a été sélectionné par l’utilisateur.

defaultselected Indique l’élément de la liste sélectionné par défaut. C’est lui qui apparaît alors dans la zone.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmV+wHB2jzIgLAA==-enidentnumber

203


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzmV+wHB2jzIgLAA==-enidentnumber

204

Le bouton d’envoi

Certains utilisateurs (impatients) ont la fâcheuse manie de cliquer plusieurs fois le bouton d’envoi, ce script calmera leur ardeur.

<html> <head> <title>Un seul clic</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var nombreclic=0; function compteclic(form) nombreclic++; if (nombreclic>1) alert("Vous avez déjà cliqué ce bouton.\Le formulaire est en cours de traitement."); else alert("Premier Clic."); </script> </head> <body> <form name="form"> <input type="button" value="Cliquez-moi !" onclick="compteclic(form)"> </form> </body> </html>

Au clic sur le bouton d’envoi, la fonction compteclic() est appelée (onclick="compteclic(form)").

Cette fonction incrémente d’une unité (nombreclic++) la variable nombreclic qui a été préalablement initialisée à 0 (var nombreclic=0). Le script effectue alors un test (if) pour voir si la variable nombreclic est supérieure à 1 (nombreclic>1). Dans ce cas, une boîte d’alerte est affichée (alert("Vous avez déjà cliqué ce bouton...)). Sinon, une autre boîte d’alerte rassure l’utilisateur (alert("Premier Clic.")).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzp8fMJx2jzIgLAA==-enidentnumber

205

La variable this

La variable this est une sorte de raccourci qui permet de référencer l’objet courant. This est souvent utilisée lorsque l’on insère du code JavaScript au sein d’une balise Html. Elle permet alors de faire référence à l’objet défini par cette balise.

Exemple :

<form name="form"> <input type="button" value="Cliquez-moi !" onclick="compteclic (this.form)"> </form>

ou

<form name="form"> <input type="button" value="Cliquez-moi !" onclick="compteclic(this)"> </form>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzicA4Mh2jzIgLAA==-enidentnumber

206

Introduction

Nous avons déjà fait remarquer (chapitre JavaScript Notions fondamentales Un peu de théorie objet) que JavaScript était directement concerné par les objets. Ces différents objets ont une hiérarchie :

Ainsi, l’objetwindow (fenêtre) occupe le sommet de cette hiérarchie.

Les "descendants" de window sont l’objet frame (l’objet "cadres" n’est pas abordé dans cet ouvrage), l’objet document, l’objet location et l’objet history (pour ces trois derniers, reportezvous au chapitre Quelques autres objets).

L’objet document comprend l’objet image (chapitre Quelques autres objets) et l’objet form (chapitre Les formulaires). Les autres objets ne sont pas abordés ici.

L’objet form comprend à son tour les différents objets textarea, text, fileupload, password, hidden, submit, reset, radio, checkbox, button et select (chapitre Les formulaires).

À ceuxlà, s’ajoutent des objets spécifiques au JavaScript comme par exemple, l’objet String (chapitre L’objet String), l’objet Array (chapitre L’objet Array (tableau)) et l’objet Date (chapitre L’objet Date).

Il importe, à ce stade de l’étude, de parcourir plus complètement quelquesuns de ces objets avec leurs nombreuses propriétés et méthodes. Nous commencerons par l’objet fenêtre ou objet window qui a le plus haut niveau dans la hiérarchie des objets. Certaines méthodes ont déjà été abordées précédemment. On peut citer ainsi :

la méthode alert() (chapitre Fonctions et méthodes alert().).

la méthode confirm() (chapitre Fonctions et méthodes confirm().).

la méthode prompt() (chapitre Fonctions et méthodes prompt().).

la méthode setTimeOut() (chapitre Fonctions et méthodes setTimeOut().).

la méthode clearTimeout() (chapitre Fonctions et méthodes clearTimeout().).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzswh7QB2jzIgLAA==-enidentnumber

207

Méthodes open() et close

Ces méthodes permettent d’ouvrir (open) ou de fermer (close) une nouvelle fenêtre du navigateur. Il sera en outre possible de définir de nombreuses caractéristiques de cette nouvelle fenêtre.

L’usage des nouvelles fenêtres, appelées aussi fenêtres popup, est souvent utile pour afficher des informations complémentaires sans surcharger la page (ou la fenêtre) de départ. Elles comportent cependant deux désagréments notoires. En effet, si le concepteur n’a pas prévu un moyen de fermer cellesci, on peut très rapidement se retrouver avec une bonne dizaine de fenêtres popup ouvertes.

En outre, il faut admettre que la toile est "polluée" par ces fenêtres popup, le plus souvent utilisées à des fins publicitaires. Un conseil, veillez à fermer les fenêtres popup et à les utiliser avec modération ou discernement.

La syntaxe de open() est :

window.open("URL","nom_de_la_fenêtre","caractéristiques_de_la_fenêtre")

La mention de window est facultative car window étant l’objet avec la plus haute priorité, celuici est repris par défaut par le JavaScript.

URL est l’adresse de la page que l’on désire afficher dans la nouvelle fenêtre. Si on ne désire pas afficher un fichier htm existant, on indiquera simplement " ".

nom_de_la_fenêtre est le nom auquel on pourra faire référence à la fenêtre dans le code.

caractéristiques_de_la_fenêtre est une liste (voir ciaprès) de certaines ou de toutes les caractéristiques de fenêtre. Ces caractéristiques se notent à la suite, séparées par des virgules, sans passage à la ligne. Elles doivent être impérativement écrites sur une seule et même ligne.

Caractéristiques d’une fenêtre :

Caractéristiques Description

width=x

height=x

Largeur de la nouvelle fenêtre en pixels.

Hauteur de la nouvelle fenêtre en pixels. La valeur minimale est de 100 pixels.

toolbar=yes ou no

Affichage de la barre d’outils. La valeur par défaut est yes.

location=yes ou no Affichage de la barre d’adresse.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzYW+dTx2jzIgLAA==-enidentnumber

208

La notation 1 ou 0 ou lieu de yes et no est également rencontrée.

Les propriétés suivantes ont été introduites plus récemment. Elles sont disponibles sous Firefox, Netscape et Mozilla. Par contre, elles ne sont pas reconnues par Internet Explorer.

La syntaxe de close() est :

window.close("nom_de_la_fenêtre")

où window est facultatif.

directories=yes ou no

Affichage des boutons d’accès rapide (barre de liens).

Cette caractéristique qui existait sous Internet Explorer 5.5 et 6, n’est pas reprise sous Internet Explorer 7.

status=yes ou no Affichage de la barre d’état.

menubar=yes ou no Affichage de la barre de menus.

scrollbars=yes ou no Affichage des barres de défilement.

resizable=yes ou no Redimensionnement de la fenêtre.

fullscreen=yes ou no Affichage de la nouvelle fenêtre en plein écran. Internet Explorer uniquement.

top= x Position en pixels par rapport au bord supérieur de l’écran.

left=x Position en pixels par rapport au bord gauche de l’écran.

innerHeight Hauteur utile de la fenêtre (hors cadre et barres). En pixels.

innerWidth Largeur utile de la fenêtre (hors cadre et barres). En pixels.

outerHeight Hauteur totale de la fenêtre. En pixels.

outerWidth Largeur totale de la fenêtre. En pixels.



209

Dans la pratique, pour éviter toute confusion possible, on utilise plutôt le raccourci self pour indiquer la fenêtre en cours.

window.self.close();

La méthode close() entre dans le cadre du concept de sécurité de JavaScript. Cela signifie qu’une fenêtre, à partir du moment où elle possède un historique (parce que l’utilisateur a déjà appelé plusieurs pages), ne se laisse plus fermer sans demande de confirmation de la part du navigateur. Il n’est pas possible d’empêcher cette demande.

La lecture des forums spécialisés (par exemple Alsacréations) nous apprend qu’Internet Explorer 7 semble avoir un comportement aléatoire avec les fenêtres popup.

En outre, Internet Explorer, dans sa lutte contre l’hameçonnage, fait apparaître dans certaines situations, une barre d’adresse dans la fenêtre popup alors qu’elle n’a pas été déterminée dans le code JavaScript.



210

Exemples

1. Ouvrir une nouvelle fenêtre

En cliquant sur une image réduite, ouvrir une nouvelle fenêtre avec l’image en dimensions réelles.

Le fichier de départ

<html> <head> <title>window 1</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <p> <img src=" world.jpg" width="30" height="30" onclick="open (’popup.htm’, ’’,’width=100, height=100, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no’)"> </p> </body> </html>

Les caractéristiques de la nouvelle fenêtre doivent être impérativement écrites sur une seule et même ligne, ce qui est impossible de réaliser avec l’impression papier.

Le fichier popup.htm de la nouvelle fenêtre

<html> <head> <title>Popup</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <img src=" world.jpg" width="70" height="70"> </body> </html>

Si l’image de départ comportait un lien, le code serait :

<a href="javascript: onclick="open(’popup.htm’, ’’, ’width=100, height=100, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no’)"> <img src=" world.jpg" width="30" height="30" border="0"> </a>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz3VXaWx2jzIgLAA==-enidentnumber

211

2. Écrire en JavaScript dans une nouvelle fenêtre

Plutôt que de charger un fichier htm, il est possible d’écrire en JavaScript dans une nouvelle fenêtre.


<html> <head> <title>window 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function popup() nouvelle=open(’’, ’’ , ’width=200, height=100, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no’); nouvelle.document.write(’<html><head><title>Popup 1</title></head> <body bgcolor=\"#99ccff\"><h1>JavaScript</h1></body></html>’); </script> </head> <body> <p> <form> <input type ="button" value="Ouvrir une nouvelle fenêtre" onclick="popup()"> </form> </p> </body> </html>

Pour rappel, les caractéristiques de la nouvelle fenêtre doivent être impérativement écrites sur une seule et même ligne dans le code.

Il n’y a pas de fichier htm pour la nouvelle fenêtre car on y a écrit directement en JavaScript.

3. Fermer une fenêtre à l’aide d’un bouton

Après avoir ouvert une nouvelle fenêtre, on peut offrir au visiteur la possibilité de fermer celleci grâce à un bouton.

La méthode close() requiert le nom de la fenêtre comme argument. Pour éviter toute confusion possible, on utilise self pour indiquer la fenêtre en cours.

<html> <head>



212

<title>window 3</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function popup() open(’popup2.htm’,’nouvelle’, ’width=200, height=100, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no’); </script> </head> <body> <p> <form> <input type ="button" value="Ouvrir une nouvelle fenêtre" onclick="popup()"> </form> </p> </body> </html>


Le fichier popup2.htm de la nouvelle fenêtre

<html> <head> <title>Popup 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body bgcolor="#99ccff"> Nouvelle fenêtre <p> <form> <input type="button" value= " Fermer " onclick="self.close()"> </form> </p> </body> </html>

4. Fermeture automatique d’une fenêtre après x secondes

Avec ce script, grâce à une minuterie setTimeOut (chapitre Fonctions et méthodes Méthodes JavaScript), la fenêtre se fermera automatiquement sans l’intervention du visiteur.



213


Ce fichier est tout à fait conventionnel puisque la fermeture automatique est implantée dans la nouvelle fenêtre (fichier popup3.htm).

<html> <head> <title>window 4</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function popup() open(’popup3.htm’,’nouvelle’, ’width=200, height=100, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no’); </script> </head> <body> <p> <form> <input type ="button" value="Ouvrir une nouvelle fenêtre" onclick="popup()"> </form> </p> </body> </html>



<html> <head> <title>Popup 3</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body bgcolor="#99ccff" onload="min=setTimeout(’self.close();’,5000)"> Fermeture après 5 secondes. <p> <form> <input type="button" value= "Fermeture d’urgence" onclick="clearTimeout(min); self.close();"> </form> </p> </body> </html>

Au chargement de la page (onload), le script met en route une minuterie qui fermera la fenêtre après 5 secondes ("min=setTimeout(’self.close();’,5000)").

Petite sophistication, un bouton d’arrêt d’urgence est prévu pour fermer la fenêtre avant le délai de 5 secondes. On arrête ainsi prématurément le compteur (clearTimeout(min);) et la fenêtre se ferme (self.close();).



214

5. Fermeture automatique

Ce script simpliste utilise efficacement l’événement onblur (chapitre Gestionnaires d’événement Les événements). Lorsque le visiteur clique ailleurs que dans la nouvelle fenêtre, soit par exemple dans la page de départ pour continuer sa visite, la nouvelle fenêtre perd le focus et se produit alors un "blur". À cet événement, on peut associer la fonction close et la fenêtre popup sera automatiquement fermée.


Ce fichier est tout à fait conventionnel puisque la fermeture automatique est implantée dans la nouvelle fenêtre (fichier popup4.htm).

<html> <head> <title>window 5</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function popup() open(’popup4.htm’,’nouvelle’, ’width=200, height=100, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no’); </script> </head> <body> <p> <form> <input type ="button" value="Ouvrir une nouvelle fenêtre" onclick="popup()"> </form> </p> </body> </html>



<html> <head> <title>Popup 4</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body bgcolor="#99ccff">



215

Je me ferme dès que vous cliquez ailleurs. </body> </html>



216

Méthode print()

Cette fonction permet d’imprimer la page en cours. Elle ne comporte pas de paramètres. Elle correspond à la commande Fichier Imprimer du navigateur.

Exemple :

<html> <head> <title>print</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <h1>JavaScript</h1> <p> <form> <input type ="button" value="Imprimer" onclick="print()"> </form> </p> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzXZQtZx2jzIgLAA==-enidentnumber

217

Propriété status

La barre d’état (status bar) permet au surfeur de visualiser l’adresse du lien que survole le pointeur de sa souris. De ce fait, elle a une valeur de renseignement non négligeable. On peut aussi y afficher un message en utilisant la propriété status de l’objet window.

Exemple :

On affiche le message "Editions Eni" comme texte par défaut de la barre d’état par l’événement onload.

Au survol d’un lien par la souris, le message "Explication du lien" s’affichera dans la barre d’état. Certains s’étonneront de la présence de return true;. Il s’agit d’une astuce pour forcer le navigateur à effectuer l’action onmouseover plutôt que sa façon habituelle de procéder. Ainsi, le script fonctionnera parfaitement.

<html> <head> <title>status</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body onload="window.defaultStatus=’Editions Eni’"> <h1>JavaScript</h1> <a href="age.html" onmouseover="window.status=’Explication du lien’; return true;">Lien</a> </body> </html>

La capture d’écran de la fenêtre par défaut

defaultStatus Valeur par défaut qui s’affiche dans la barre d’état à l’ouverture de la page. window.defaultStatus="Vous êtes sur mon site";

status Valeur du texte affiché dans la barre d’état. window.status="Lien vers JavaScript";


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQQeahh2jzIgLAA==-enidentnumber

218

La capture d’écran au survol du lien


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQQeahh2jzIgLAA==-enidentnumber

219

Formatage de la chaîne de caractères

L’objet String permet de mettre en forme et de manipuler les chaînes de caractères.

Toute une série de méthodes de l’objet String a trait à la mise en forme des caractères.

Exemple :

La variable a contient la chaîne de caractères "JavaScript". On lui applique diverses mises en forme.

<html> <head> <title>string formatage</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var a="JavaScript" document.write(a.big() + "<br>"); document.write(a.bold() + "<br>"); document.write(a.fixed() + "<br>"); document.write(a.fontcolor("#ff0000") + "<br>"); document.write(a.fontsize(6) + "<br>"); document.write(a.italics() + "<br>"); document.write(a.italics().bold() + "<br>"); document.write(a.small() + "<br>"); document.write(a.strike() + "<br>"); document.write(a + a.sub() + a.sup()); </script> </body> </html>

Instruction Description

big() Met le texte à une taille supérieure. Équivalent de la balise <big> ... </big>.

bold() Met le texte en gras. Équivalent de la balise <b> ... </b>.

fixed() Met le texte en police à pas fixe telle que Courier.

fontcolor() Met le texte en couleur.

fontsize Met le texte à la taille spécifiée.

italics() Met le texte en italique. Équivalent de la balise <i> ... </i>.

link() Crée un lien hypertexte. Équivalent de la balise <a> ... </a>.

small() Met le texte à une taille inférieure. Équivalent de <small> ... </small>.

strike() Barre le texte en son milieu. Équivalent de la balise <strike> ... </strike>.

sub() Met le texte en indice. Équivalent de la balise <sub> ... </sub>.

sup() Met le texte en exposant. Équivalent de la balise <sup> ... </sup>.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz16X43R2jzIgLAA==-enidentnumber

220

Dans la pratique, on préfère écrire le code Html directement dans le code comme une chaîne de caractères. Ainsi, au lieu d’écrire : document.write("JavaScript". italics().bold();"), on écrira plutôt : document.write

("<i><b>Java Script</b></i>").


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz16X43R2jzIgLAA==-enidentnumber

221

Manipulation des caractères

JavaScript met à la disposition du programmeur une série d’instructions ou de propriétés qui permettent de manipuler les caractères de la chaîne.

1. Length()

La propriété length() retourne un entier qui indique le nombre d’éléments dans une chaîne de caractères. Si la chaîne est vide (""), le nombre est zéro.

La syntaxe est simple :

x=variable.length; x=("chaîne de caractères").length;

Exemple :

Ce script vérifie que les caractères encodés dans une zone de texte ne dépassent pas la limite fixée à 8 caractères.

<html> <head> <title>length</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function valider() input=document.form.entree.value; if (input.length>8) alert("Maximum 8 caractères !"); </script> </head> <body> <form name="form" > Entrer du texte (maximum 8 caractères) :<br> <input type="text" name="entree" size="25" value=""> <input type="button" value="Tester" onclick="valider()"> </form> </body> </html>

Instruction Description

length Entier qui indique la longueur de la chaîne de caractères.

charAt() Méthode qui permet d’accéder à un caractère isolé d’une chaîne.

indexOf() Méthode qui renvoie la position d’une chaîne partielle à partir d’une position déterminée (en commençant au début de la chaîne principale, soit en position 0).

lastIndexOf() Méthode qui renvoie la position d’une chaîne partielle à partir d’une position déterminée (en commençant à la fin, soit en position length moins 1).

subString(x,y) Méthode qui renvoie une chaîne partielle située entre la position x et la position y1.

replace(x,y) Remplace x par y.

toLowerCase() Transforme toutes les lettres en minuscules.

toUpperCase() Transforme toutes les lettres en majuscules.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzlfkH7R2jzIgLAA==-enidentnumber

222

La fonction valider() reprend d’abord dans la variable input, la valeur de la zone de texte (input = document.form.entree.value). La longueur de la chaîne de caractères est fournie par la propriété length associée à la variable input (input.length). Par un test, si cette longueur dépasse les 8 caractères, une boîte d’alerte est affichée.

La propriété length ne sert pas que pour les chaînes de caractères, elle est aussi utile pour connaître la longueur ou le nombre d’éléments :

de formulaires. Combien y atil de formulaires différents dans le document ?

de boutons d’option. Combien y atil de boutons radio dans l’élément de formulaire ?

de cases à cocher. Combien y atil de cases à cocher dans l’élément de formulaire ?

d’options dans un menu déroulant. Combien y atil d’options dans une balise <select> ?

de cadres, d’ancres, de liens, etc.

2. charAt()

La méthode chartAt() retourne la lettre ou le signe qui occupe une position déterminée dans une chaîne de caractères. Il faut lui fournir en paramètre la position souhaitée.

Il faut d’abord noter que les caractères sont comptés de gauche à droite et que la position du premier caractère est 0. La position du dernier caractère est donc la longueur totale (length) de la chaîne de caractères moins 1.

chaîne : JavaScript (longueur totale = 10)

||||||||||

position : 0123456789 (dernier caractère = 9 soit 10 - 1)

Si la position indiquée est inférieure à zéro ou plus grande que la longueur moins 1, JavaScript retourne une chaîne vide.

La syntaxe de charAt() est :

resultat = chaine_départ.charAt(x);

où x est un entier compris entre 0 et la longueur de la chaîne à analyser moins 1.

Notez les exemples suivants :



223

var chaine="Javascript"; resultat=chaine.charAt(0); resultat="Javascript".charAt(0);

La réponse est "J".

var str="Javascript"; var chr=str.charAt(9); var chr=charAt(str,9);

La réponse est "t".

Exemple :

Ce script retourne la lettre située en cinquième position.

<html> <head> <title>charAt</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function valider() var x=document.form.texte.value; var a=x.charAt(4); alert("La 5ème lettre est " +a); </script> </head> <body> <form name="form" onsubmit="valider()"> Entrez votre texte :<br> <input type="text" name="texte" size="30"> <input type="submit" value="Tester"> </form> </body> </html>

On récupère dans la variable x, le texte encodé dans la zone de texte. La méthode charAt est appliquée à cette dernière (x.charAt(4)). Notez le paramètre 4 qui correspond en JavaScript à la cinquième position.

3. indexOf()

La méthode indexOf() retourne la position d’une chaîne partielle (lettre unique, groupe de lettres ou mot) dans une



224

chaîne de caractères. Cette chaîne partielle est transmise en paramètre.

Il est possible, mais facultatif et peu retenu dans la pratique, de transmettre comme second paramètre la position à partir de laquelle la recherche doit commencer. Si elle n’est pas spécifiée, la recherche commence à la position 0.

Pour chercher l’arobase dans une chaîne de caractères, la syntaxe est :

variable="chaîne_de_caractères"; x=variable.indexOf("@");

La position retournée est celle de la première occurrence de la chaîne partielle dans la chaîne de caractères.

Si la chaîne partielle n’est pas trouvée dans la chaîne de caractères à analyser, la valeur retournée est égale à 1.

Exemple :

Test permettant de vérifier si une adresse email contient le signe @. Il notifiera un message d’alerte si le signe @ n’est pas trouvé (soit valeur 1).

<html> <head> <title>indexOf</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function valider() var a=document.form.email.value.indexOf("@"); if (a == -1) alert("Adresse email invalide"); else alert("OK"); </script> </head> <body> <form name="form" onsubmit="valider()"> Entrez votre adresse e-mail :<br> <input type="text" name="email" size="30"><br> <input type="submit" value="Tester"> </form> </body> </html>

L’adresse email contenue dans la zone de texte est fournie par document.form.email.value. On y applique la méthode indexOf() à laquelle on a transmis en paramètre le signe @ à rechercher. Si l’arobase a été trouvée, la méthode retourne sa position qui ne peut être qu’un chiffre positif. On teste si la position retournée n’est pas égale à 1, ce qui indiquerait que l’arobase n’a pas été trouvée et que l’adresse email n’est donc pas valide.



225

Ce test est, comme signalé, assez sommaire. On pourrait aisément lui apporter une condition supplémentaire. Outre l’arobase, une adresse email contient également un point. Le script suivant va tester la présence du point et ne déclarer l’email valide que si les deux conditions sont remplies.

<html> <head> <title>indexOf</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function valider() var a=document.form.email.value.indexOf("@"); var b=document.form.email.value.indexOf("."); if (a == -1 || b == -1) alert("Adresse email invalide"); else alert("OK"); </script> </head> <body> <form name="form" onsubmit="valider()"> Entrez votre adresse e-mail :<br> <input type="text" name="email" size="30"><br> <input type="submit" value="Tester"> </form> </body> </html>

Dans la variable a, on obtient la position du signe @ ou la valeur 1 indique son absence. Idem pour la variable b qui fournit la position du point ou indique son absence (1). On teste l’absence de l’arobase ou du point pour déclarer l’adresse email comme non valide.

La capture d’écran est identique à la précédente.

4. substring()

La méthode substring() est particulièrement utile pour extraire des données d’une chaîne de caractères.

La syntaxe est substring(x,y) où x est la position du premier des signes à extraire dans la chaîne de caractères et y



226

la position du premier des signes ne devant plus être extrait de la chaîne de caractères. Pour rappel, le comptage commence à 0.

Si x est égal à y, substring() retourne (logiquement) une chaîne vide.

Vous souhaitez sûrement quelques exemples :

Javascript |||||||||| 0123456789

str="Javascript"; str1=str.substring(0,4); str2=str.substring(6,9); str3=str.substring(7,10); str4=str.substring(9,9);

Les résultats sont :

str1="Java"; soit les positions 0,1, 2 et 3.

str2="rip"; soit les positions 6, 7 et 8.

str3="ipt" soit les positions 7, 8 et 9.

str4="".

Exemple :

Script permettant de retrouver les deux premiers chiffres du code postal.

<html> <head> <title>substring</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function extraire() dep = document.form.cp.value; dep = dep.substring(0,2); alert(dep); document.form.cp.value = ""; </script> </head> <body> <form name="form"> Code postal : <input type="text" name="cp" size="3" maxlength="5"><br> <p><input type="button" name="bouton" value="Tester" onClick="extraire()"><p> </form> </body> </html>

La fonction extraire() récupère les cinq chiffres du code postal encodé dans la zone de texte (document.form.cp.value). On en extrait les deux premiers chiffres (dep. substring(0,2)) et on les affiche dans une boîte d’alerte.

La zone de texte est réinitialisée à 0 par document.form.cp.value = "".



227

5. toLowerCase()

Cette méthode affiche toutes les majuscules d’une chaîne de caractères en minuscules.

variable="chaîne de caractères"; x=variable.toLowerCase();

Exemple :

str="JavaScript";. str1=str.toLowerCase();

Le résultat sera :

str1="javascript";

6. toUpperCase()

Cette méthode affiche toutes les minuscules d’une chaîne de caractères en majuscules.

variable="chaîne de caractères"; x=variable.toUpperCase();

Exemple :

str="JavaScript"; str2=str.toUpperCase();

Le résultat sera :

str2="JAVASCRIPT";

Exemple :

<html> <head> <title>min - maj</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript">



228

function minuscules() a = document.formulaire.entree.value.toLowerCase(); document.formulaire.sortie.value = a; function majuscules() a = document.formulaire.entree.value.toUpperCase(); document.formulaire.sortie.value = a; </script> </head> <body> <form name="formulaire"> Encodez des minuscules et des majuscules.<br> <input name="entree" size="30"><br> <input type="button" value="Minuscules" onClick="minuscules()"> <input type="button" value="Majuscules" onClick="majuscules()"><br> <input name="sortie" size="30"> </form> </body> </html>

Pour la fonction minuscules(), la variable a reprend le contenu de la zone de texte d’entrée (document.formulaire.entree.value) auquel on applique la méthode toLowerCase(). Le résultat est renvoyé dans la zone de texte de sortie (document.formulaire.sortie.value).

Pour la fonction majuscules(), la variable a reprend le contenu de la zone de texte d’entrée (document.formulaire.entree.value) auquel on applique la méthode toUpperCase(). Le résultat est renvoyé dans la zone de texte de sortie (document.formulaire.sortie.value).



229

Introduction

L’objet Array permet de lister une série de valeurs dans une seule variable. Les différents éléments sont identifiés par un nombre entier représentant leur position. Ce nombre est appelé un index. L’objet Array permet de créer des variables dites indicées ou indexées.

L’index commence (comme souvent en JavaScript) à la valeur 0.

La variable indexée "semaine" contient comme valeurs, les différents jours de la semaine.

Ces variables indexées sont reprises en JavaScript (comme dans d’autres langages de programmation) sous le vocable de tableau.

Les tableaux en JavaScript n’ont rien de commun avec les tableaux du langage Html. À ne pas confondre !

semaine

0 Lundi

1 Mardi

2 Mercredi

3 Jeudi

4 Vendredi

5 Samedi

6 Dimanche


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz7U/y9x2jzIgLAA==-enidentnumber

230

Définir un tableau

La création d’un objet de type Array (que nous appellerons dorénavant tableau) s’opère à l’aide de l’opérateur new suivi de Array().

var tableau = new Array();

En JavaScript, il faut donc d’abord définir le tableau avant de pouvoir en préciser son contenu.

Il n’est pas obligatoire de définir la taille du tableau dans sa définition (par exemple var tableau = new Array(7);). La taille des tableaux est prise en charge de façon dynamique par JavaScript.

Il sera possible, à tout moment, de connaître la taille d’un tableau, en invoquant la propriété length de l’objet correspondant à ce tableau.

Notre tableau avec les jours de la semaine peut se définir ainsi :

var semaine = new Array();


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQawoBh6jzIgLAA==-enidentnumber

231

Initialiser un tableau

Pour initialiser le tableau, on utilise la syntaxe suivante :

tableau[i] = "élément";

où i est un nombre compris entre 0 et longueur du tableau 1.

Soit, pour le tableau semaine :

var semaine = new Array(); semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche";

La définition et l’initiation peuvent se faire lors de la même instruction sous la forme :

var semaine = new Array("Lundi" , "Mardi" , "Mercredi" , "Jeudi" , "Vendredi" , "Samedi" , "Dimanche");


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzp/KlEh6jzIgLAA==-enidentnumber

232

Accéder à un tableau

On accède à un élément du tableau par le nom du tableau et le numéro de l’indice.

Soit, dans notre exemple, semaine[0] pour le lundi.

Exemple :

Afficher les éléments du tableau semaine.

<html> <head> <title>Array()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var semaine = new Array(); semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; for (i=0; i<7; i++) document.write(semaine[i] + "<br>"); </script> </body> </html>

L’affichage des jours de la semaine est réalisé par une boucle for (chapitre Conditions et boucles La boucle for) avec i initialisé à 0 et aussi longtemps que i est inférieur à 7.

Lorsque la longueur du tableau est inconnue, on peut utiliser la propriété length. Ainsi, l’instruction for de l’exemple deviendrait : for (i=0; i<semaine.length; i++)


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzraqVHx6jzIgLAA==-enidentnumber

233

Tableaux associatifs

Les tableaux associatifs sont des tableaux dont l’indice est une chaîne de caractères (et non plus un nombre). La chaîne est considérée comme la clé pour l’accès aux éléments du tableau.

var moteur = new Array("Google","Yahoo","Voila"); moteur["Google"] = "http://www.google.fr"; moteur["Yahoo"]="http://www.yahoo.fr"; moteur["Voila"]="http://www.voila.fr";

Notez la présence des guillemets entre les crochets, ce qui est de règle pour les chaînes de caractères.

Pour accéder aux données d’un tableau associatif :

moteur["Google"] ou moteur[0].

Exemple complet :

<html> <head> <title>Array()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var moteur = new Array("Google","Yahoo","Voila"); moteur["Google"] = "http://www.google.fr"; moteur["Yahoo"]="http://www.yahoo.fr"; moteur["Voila"]="http://www.voila.fr"; document.write(moteur["Google"] + "<br>"); document.write(moteur[2]); </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzjdXYLB6jzIgLAA==-enidentnumber

234

Méthodes

Array() présente plusieurs méthodes. En voici quelquesunes.

Élément Description

concat() Assemble deux ou plusieurs tableaux pour n’en faire qu’un seul. Cette méthode réclame en argument le tableau (ou plusieurs) qui sera ajouté à la fin du tableau référencé.

join() Regroupe tous les éléments du tableau dans une seule chaîne de caractères. Les différents éléments sont séparés par un caractère séparateur spécifié en argument. Par défaut, ce séparateur est une virgule.

pop() Enlève et retourne le dernier élément d’un tableau. Internet Explorer 5.5 et +

reverse() Inverse l’ordre des éléments (mais ne les trie pas).

shift() Enlève et retourne le premier élément d’un tableau. Internet Explorer 5.5 et +

slice() Crée un nouveau tableau à partir d’une partie d’un tableau existant.S’écrit slice [début,fin].

sort() Trie les éléments par ordre alphabétique (à condition qu’ils soient de même nature).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzA9oROB6jzIgLAA==-enidentnumber

235

Exemples d’utilisation de méthodes

1. Tri d’un tableau

On applique la méthodesort().

<html> <head> <title>sort()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var semaine = new Array(); semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; semaine.sort(); for (i=0; i<7; i++) document.write(semaine[i] + "<br>"); </script> </body> </html>

2. Regroupement des éléments du tableau dans une chaîne

Le regroupement s’effectue avec la méthodejoin() :

<html> <head> <title>join()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var semaine = new Array(); semaine[0] = "Lundi";


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzHdcERB6jzIgLAA==-enidentnumber

236

semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; var join = semaine.join(); document.write(join) </script> </body> </html>

3. Extraction d’une partie d’un tableau

Cet exemple illustre l’utilisation de la méthodeslice().

<html> <head> <title>slice()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var semaine = new Array(); semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; var weekend = new Array(); weekend = semaine.slice(4,7); for (i=0; i<weekend.length; i++) document.write(weekend[i] + ", "); </script> </body> </html>



237



238

Tableau à plusieurs dimensions

Un élément de tableau est une variable à part entière. On peut donc tout y mettre, même des tableaux. Ainsi, on peut créer un tableau dans un tableau. C’est ce que l’on appelle les tableaux multidimensionnels ou multiindex.

On ne verra que les tableaux à deux dimensions, les tableaux à plus de deux dimensions étant exceptionnels, surtout en JavaScript.

Il faut considérer un tableau plat (à une dimension) comme une liste, dont chaque valeur correspond à un élément du tableau. Un tableau à deux dimensions est comparable à un tableau d’un logiciel de traitement de texte, c’estàdire à un tableau à x colonnes et y lignes où chaque ligne correspond au premier indice du tableau, et chaque colonne correspond au deuxième indice.

Soit le tableau :

On commence par déclarer un tableau pour chaque ligne de façon classique :

var nom_du_tableau = new Array ();

soit :

var articles = new Array();

On déclare ensuite chaque ligne du tableau comme un tableau à 1 dimension :

nom_du_tableau[i] = new Array();

soit :

articles[0] = new Array(); articles[1] = new Array(); articles[2] = new Array();

On initialise alors les données :

articles[0][0] = 5; articles[0][1] = 8; articles[0][2] = 6; articles[1][0] = 0; articles[1][1] = 1; articles[1][2] = 2; articles[2][0] = 3; articles[2][1] = 7; articles[2][2] = 5;

L’accès aux données se réalise par un double index, articles[x][y].

Soit, pour les pantalons de taille médium : articles[0][1].

Exemple :

Voici une application exploitant les données du tableau à deux dimensions de l’exemple précédent.

Par deux formulaires de type menu déroulant, on peut choisir l’article et la taille. Un clic sur le bouton Donner le stock active la fonction afficher() qui va rechercher le nombre d’articles en stock et renvoie l’information dans une zone de texte.

<html> <head> <title>2 dimensions</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var articles = new Array(); articles[0] = new Array(); articles[1] = new Array(); articles[2] = new Array(); articles[0][0] = 5; articles[0][1] = 8;

Stocks articles Small Médium Large

Pantalon 5 8 6

Bermuda 0 1 2

Corsaire 3 7 5


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzIzGSTh6jzIgLAA==-enidentnumber

239

articles[0][2] = 6; articles[1][0] = 0; articles[1][1] = 1; articles[1][2] = 2; articles[2][0] = 3; articles[2][1] = 7; articles[2][2] = 5; function afficher() i = document.form.liste.selectedIndex; j= document.form.taille.selectedIndex document.form.stock.value=articles[i][j]; </script> </head> <body> <form name="form" > <select name="liste"> <option>Pantalon</option> <option>Bermuda</option> <option>Corsaire</option> </select> <select name="taille"> <option>Small</option> <option>Médium</option> <option>Large</option> </select> <p> <input type="button" Value="Donner le stock" onclick="afficher()"> </p> <input type="text" name="stock"> </form> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzIzGSTh6jzIgLAA==-enidentnumber

240

Définir un objet Date

L’objet Date permet de gérer le temps, soit toutes les informations relatives à la date et l’heure.

L’objet Date en JavaScript est particulier dans le sens où il faut d’abord le créer avant de pouvoir l’utiliser.

En effet, avant de pouvoir appliquer les multiples fonctions dédiées à la gestion du temps, il faut prendre une instance de la date et l’heure de l’ordinateur de l’utilisateur.

Cette instance est créée par new Date().

variable=new Date();

Ainsi, variable sera une chaîne de caractères au format :

" Mon Aug 11 10:15:03 UTC+0200 2008"

Soit : lundi (Mon pour Monday), août (Aug pour Augustus), 11 pour le 11ème jour du mois, 10:15:03 pour 10 heures 15 minutes et 3 secondes et 2008 pour l’année. Cette heure est notée à l’heure UTC (temps universel coordonné) + deux heures.

La date et l’heure en JavaScript commencent au 1er janvier 1970. Toute référence à une date antérieure donnera un résultat aléatoire.

L’unité pour le calcul interne du temps est le millième de seconde.

Exemple :

<html> <head> <title>new Date()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var objetdate= new Date(); document.write(objetdate); </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz9cmkXB6jzIgLAA==-enidentnumber

241

Méthodes

Les méthodes de l’objet Date les plus utilisées sont les suivantes :

Il existe de nombreuses autres méthodes mais elles dépassent (de loin) les limites de cet ouvrage.

getYear()

Retourne en principe les deux derniers chiffres de l’année dans l’objet date. Microsoft Internet Explorer retourne cependant les quatre chiffres, soit ici 2005. Des problèmes de compatibilité sont donc possibles.

objetdate=new Date(); annee=objetdate.getYear();

getFullYear()

Retourne l’année en quatre chiffres. La compatibilité est totale.

objetdate=new Date(); annee=objetdate.getFullYear();

getMonth()

Retourne le mois sous forme d’un entier compris entre 0 et 11 (0 pour janvier, 1 pour février, 2 pour mars, etc.).

objetdate=new Date(); mois=objetdate.getMonth();

getDate()

Retourne le jour du mois sous forme d’un entier compris entre 1 et 31.

objetdate=new Date(); jour=objetdate.getDate();

getDay()

Retourne le jour de la semaine sous forme d’un entier compris entre 0 et 6 (0 pour dimanche, 1 pour lundi, 2 pour mardi, etc.).

objetdate=new Date(); semaine= objetdate.getDay();

getHours()

Retourne l’heure sous forme d’un entier compris entre 0 et 23.

objetdate=new Date(); heure=objetdate.getHours();

getMinutes()

Retourne les minutes sous forme d’un entier compris entre 0 et 59.

objetdate=new Date(); minute=objetdate.getMinutes();

getSeconds()

Retourne les secondes sous forme d’un entier compris entre 0 et 59.

objetdate=new Date(); seconde=objetdate.getSeconds();


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzwYCzaR6jzIgLAA==-enidentnumber

242

Exemples d’utilisation des méthodes

1. Un script qui donne la date

<html> <head> <title>Date</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var objetdate= new Date(); document.write("Nous sommes le "); document.write(objetdate.getDate()); document.write("."); document.write(objetdate.getMonth() + 1); document.write("."); document.write(objetdate.getFullYear()); </script> </body> </html>

Ce script utilise simplement les méthodes getDate(), getMonth() et getFull-Year(). On a pris soin d’ajouter 1 au chiffre des mois car la numérotation de ceuxci commence à 0.

Remplaçons dans le script précédent, le numéro du mois par son nom (soit 8 par août).

Pour ce faire, nous allons créer un tableau indicé (array) en prenant soin de commencer à l’indice 0 pour le mois de janvier.

Déclaration du tableau des mois

var tableau_mois = Array();

Le tableau

tableau_mois[0] = "janvier"; tableau_mois[1] = "février"; tableau_mois[2] = "mars"; tableau_mois[3] = "avril"; tableau_mois[4] = "mai"; tableau_mois[5] = "juin"; tableau_mois[6] = "juillet"; tableau_mois[7] = "août"; tableau_mois[8] = "septembre"; tableau_mois[9] = "octobre"; tableau_mois[10] = "novembre"; tableau_mois[11] = "décembre";

Variante


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzt+1TdB6jzIgLAA==-enidentnumber

243

Ajoutons également le jour de la semaine.

Pour afficher le jour de la semaine en toutes lettres, nous procèderons de la même façon par un tableau.

Déclaration du tableau des jours

var tableau_jours = Array();

Le tableau

tableau_jours[0] = "dimanche"; tableau_jours[1] = "lundi"; tableau_jours[2] = "mardi"; tableau_jours[3] = "mercredi"; tableau_jours[4] = "jeudi"; tableau_jours[5] = "vendredi"; tableau_jours[6] = "samedi";

Le script devient :

<html> <head> <title>Date 3</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var objetdate= new Date(); var mois=objetdate.getMonth(); var tableau_mois = Array(); tableau_mois[0] = "janvier"; tableau_mois[1] = "février"; tableau_mois[2] = "mars"; tableau_mois[3] = "avril"; tableau_mois[4] = "mai"; tableau_mois[5] = "juin"; tableau_mois[6] = "juillet"; tableau_mois[7] = "août"; tableau_mois[8] = "septembre"; tableau_mois[9] = "octobre"; tableau_mois[10] = "novembre"; tableau_mois[11] = "décembre"; var nom=tableau_mois[mois]; document.write("Nous sommes le "); var jour=objetdate.getDay(); var tableau_jours = Array(); tableau_jours[0] = "dimanche"; tableau_jours[1] = "lundi"; tableau_jours[2] = "mardi"; tableau_jours[3] = "mercredi"; tableau_jours[4] = "jeudi"; tableau_jours[5] = "vendredi"; tableau_jours[6] = "samedi"; var nomjour=tableau_jours[jour]; document.write(nomjour + " "); document.write(objetdate.getDate()); document.write(" "); document.write(nom); document.write(" "); document.write(objetdate.getFullYear()); </script> </body> </html>

Il faut veiller à ce que les données du tableau soient disponibles avant d’y faire appel.



244

2. Un script qui donne l’heure

<html> <head> <title>Horloge</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var objetdate= new Date(); document.write(objetdate.getHours()); document.write("."); document.write(objetdate.getMinutes()); document.write("."); document.write(objetdate.getSeconds()); </script> </body> </html>

Ce script utilise simplement les méthodes getHours(), getMinutes() et getSeconds().

On souhaite harmoniser les heures, minutes et secondes en les affichant avec deux positions. Ainsi au lieu d’avoir 9 pour l’heure, on désire avoir 09.

Cette manipulation peut se réaliser avec un test conditionnel. Si le chiffre est inférieur à 10, on ajoute un 0, sinon, on gardera le chiffre tel qu’il est.

Ce test peut s’écrire :

if (min<10) min="0" + min; else

Variante 1



245

min="" + min;

Ce qui pourrait se noter en abrégé (voir chapitre Conditions et boucles Les conditions if...else) :

min = ((min<10) ? "0" : "") + min;

<html> <head> <title>Horloge2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var objetdate= new Date(); heure= objetdate.getHours(); heure = ((heure<10) ? "0" : "") + heure; min=objetdate.getMinutes(); min = ((min<10) ? "0" : "") + min; sec=objetdate.getSeconds(); sec = ((sec<10) ? "0" : "") + sec; document.write(heure); document.write("."); document.write(min); document.write("."); document.write(sec); </script> </body> /html

Et si on y ajoutait une trotteuse pour les secondes ?

Pour modifier l’affichage de l’heure toutes les secondes, il existe en JavaScript la minuterie setTimeOut (voir chapitre Fonctions et méthodes Méthodes JavaScript) Il suffit d’ajouter au script un setTimeOut qui réactualise l’heure toutes les secondes.

Il faut donc réécrire le script sous forme de fonction et ajouter cette fonction au setTimeOut.

On profitera de la réécriture du script pour afficher l’heure dans une zone de texte.

<html> <head> <title>Horloge3</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript">  </script> </head> <body onload="horloge()"> <form name="cadran"> <input type="text" name="display" size="6" value =""> </form> </body> </html>

La fonction qui affiche l’heure étant horloge(), l’instruction à ajouter est donc setTimeOut (horloge()",1000). Et le tour est joué.



247

Introduction

Le JavaScript comporte de nombreux objets. Notre objectif n’étant pas une étude exhaustive du JavaScript mais d’en dégager des outils pour la compréhension et la mise en œuvre du Dhtml, nous parcourrons plus rapidement dans le présent chapitre, une sélection des autres objets fréquemment utilisés dans les scripts Dhtml.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzJUJggR6jzIgLAA==-enidentnumber

248

L’objet Math

L’objet Math() met à la disposition du programmeur JavaScript une panoplie de méthodes pour effectuer des calculs complexes.

La syntaxe est :

x = Math.méthode(paramètre);

x=Math.abs(y);

La méthode abs(y) renvoie la valeur absolue (valeur positive) de y. Elle supprime, en quelque sorte, le signe négatif d’un nombre.

y = -4; x = math.abs(y);

a comme résultat 4.

x=Math.ceil(y);

La méthode ceil(y) renvoie l’entier supérieur ou égal à y.

Attention ! Cette fonction n’arrondit pas le nombre. Comme montré dans l’exemple suivant, si y = 1.01, la valeur de x sera de 2.

y=1.01; x=Math.ceil(y);


x=Math.floor(y);

La méthode floor(y) renvoie l’entier inférieur ou égal à y.

Attention ! Cette fonction n’arrondit pas le nombre. Si y = 1.99, la valeur de x sera égale à 1.

y=1.99; x=Math.floor(y);


x=Math.round(y);

La méthode round(y) arrondit le nombre y à l’entier le plus proche.

y=20.355; x=Math.round(y);


Attention ! Certains calculs réclament une plus grande précision. Ainsi, pour avoir deux décimales après la virgule, on utilisera la formule :

x=Math.round(y*100))/100;

et dans ce cas, x sera égal à 20.36.

abs()

ceil()

floor()

round()


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzm3XKjR6jzIgLAA==-enidentnumber

249

x=Math.max(y,z);

La méthode max(y,z) renvoie le plus grand des deux nombres y et z.

y=20; z=10; x=Math.max(y,z);


x=Math.min(y,z);

La méthode min(y,z) renvoie le plus petit des deux nombres y et z.

y=20; z=10; x=Math.min(y,z);

a comme résultat x=10.

x=Math.pow(y,z);

La méthode pow(y,z) calcule la valeur d’un nombre y à la puissance z.

y=2; z=8 x=Math.pow(y,z);

a comme résultat 28 soit 256.

x=Math.random();

La méthode random() renvoie la valeur d’un nombre aléatoire choisi entre 0 et 1.

Ce nombre aléatoire pourrait être 0.042105102268759464.

x=Math.sqrt(y);

La méthode sqrt(y) renvoie la racine carrée de y.

y=25; x=Math.sqrt(y);


x=parseFloat("variable");

Cette fonction convertit une chaîne en un nombre à virgule flottante. Particulièrement utile pour transformer le contenu d’une zone de texte (qui est considéré comme une chaîne de caractères) en un nombre en vue d’un traitement de calcul.

str=’-.12345’; x=parseFloat(str);

aura comme résultat le nombre .12345.

Attention ! Le résultat risque d’être surprenant si JavaScript rencontre autre chose dans la chaîne que des chiffres, les signes + et , le point décimal ou un exposant. S’il trouve un caractère "étranger", la fonction ne prendra en compte

max()

min()

pow()

random()

sqrt()

parseFloat()



250

que les caractères avant le caractère "étranger".

Si le premier caractère n’est pas un caractère admis, x sera égal à 0 ou à NaN (Not a Number).

str=’€ 5.50’; x=parseFloat(str);

aura comme résultat NaN.

x=parseInt(variable);

Retourne la partie entière d’un nombre avec une virgule.

str=’1.2345’; x=parseInt(str);

aura comme résultat 1.

x=eval(variable);

Cette fonction évalue une chaîne de caractères sous forme de valeur numérique. On peut stocker dans la chaîne des opérations numériques, des opérations de comparaison, des instructions et même des fonctions.

str=’5 + 10’; x=eval(str);


x=Math.PI; x=Math.sin(y); x=Math.asin(y); x=Math.cos(y); x=Math.acos(y); x=Math.tan(y); x=Math.atan(y);

x=Math.exp(y); x=Math.log(y);

Exemple 1 : Calculatrice

Entrer un calcul dans une zone de texte. Le résultat sera affiché dans une autre zone de texte.

On utilisera la méthode eval().

<html> <head> <title>Calculatrice</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var formule; function calculer() formule=document.form.entree.value; formule=eval(formule); document.form.sortie.value=formule; </script> </head> <body> <form name="form">

parseInt()

eval()

Les fonctions trigonométriques

Les fonctions logarithmiques



251

<input type="text" name="entree"> <p> <input type="button" value="Résultat" onclick="calculer()"> </p> <input type="text" name="sortie"> </form> </body> </html>

La valeur de la zone de texte est récupérée dans la variable formule. Celleci est traitée par la méthode eval() et le résultat est envoyé à la zone de texte de sortie.

Exemple 2 : Convertisseur en Euro

<html> <head> <title>Convertisseur</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var montant_francs; var montant_euro; function convertir() montant_francs = document.form.entree.value; montant_francs=montant_francs.replace(/,/,"."); montant=parseFloat(montant_francs); montant_euro=montant/6.55957; montant_euro=(Math.round(montant_euro*100))/100; document.form.sortie.value=montant_euro; if (isNaN(montant_francs)) alert("Entrez un nombre"); document.form.entree.value = ""; document.form.sortie.value = ""; </script> </head> <body> <form name="form"> <input type="text" name="entree"> <p> <input type="button" value="Convertir en €" onclick="convertir()"> </p> <input type="text" name="sortie"> </form> </body> </html>

On définit pour commencer les variables montant_francs et montant_euro.

On récupère dans montant_francs la valeur de la zone de texte d’entrée, soit la valeur de



252

document.form.entree.value.

Le visiteur risque d’encoder le montant avec une virgule. Pour convertir la virgule en point, on utilise la fonction replace() (voir chapitre L’objet String Manipulation des caractères).

Pour convertir en nombre la chaîne de caractères contenue dans la variable formule, on passe par la méthode parseFloat() du présent chapitre.

On divise ce nombre par 6.55957 que l’on arrondit (Math.round()).

Enfin, si l’utilisateur n’a pas encodé un nombre (NaN = Not a Number), une boîte d’alerte apparaît et les zones de texte sont réinitialisées.



253

L’objet screen

L’objet screen renvoie des informations relatives à l’écran de l’utilisateur. Ce genre d’information ravira les concepteurs de sites graphiques.

Les propriétés sont peu nombreuses mais souvent très utiles.

Exemple :

Script permettant de connaître la résolution d’écran du visiteur.

<html> <head> <title>screen()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> document.write("Votre résolution d’écran est de " + screen.width + "x" + screen.height); </script> </body> </html>


availHeight Spécifie (en pixels) la hauteur de l’écran disponible moins la barre de tâches.

availWidth Spécifie (en pixels) la largeur de l’écran disponible moins la barre de tâches.

colorDepth Donne la profondeur (en bits) de la palette de couleurs du navigateur.

height Indique (en pixels) la hauteur de l’écran définie par la résolution d’écran.

width Indique (en pixels) la largeur de l’écran définie par la résolution d’écran.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzL4a0mx6jzIgLAA==-enidentnumber

254

L’objet location

Avec l’objet location, vous avez accès à l’adresse url de la page affichée par le navigateur.

1. La propriété href

La propriété href sauvegarde l’adresse de la fenêtre actuelle. Si cette adresse est modifiée par le concepteur, le navigateur exécute un saut à la nouvelle adresse comme s’il s’agissait d’un lien.

Soit par exemple : onClick="location.href=’http://www.google.fr’;"

Un nom de fichier suffit si le lien doit simplement mener à un autre fichier situé dans le même répertoire.

Exemple :

Redirection en fonction de la résolution d’écran.

<html> <head> <title>location()</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript">  </script> </body> </html>

La notation window.location="fichier.htm" est aussi rencontrée.

2. La méthode reload()

Cette méthode reload() agit exactement comme si l’utilisateur cliquait sur le bouton Actualiser du navigateur, ce qui sera parfois nécessaire pour certains scripts.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzccO/1x6jzIgLAA==-enidentnumber

255

L’objet history

Par l’objet history, on a accès aux pages Web qui ont été visitées par l’utilisateur.

Exemple :

Avec la méthode back(), on peut encoder facilement un lien vers la page précédente.

<html> <head> <title>history</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <a href="javascript:history.back()">Retour à la page précédente</a> </body> </html>

Méthode Description

back() Charge la page Web visitée précédente. N’attend aucun paramètre.

forward() Charge la page Web suivante dans la mesure où un retour à la page précédente a été effectué. N’attend aucun paramètre.

go()

Avance ou recule du nombre de pages désiré dans l’historique sauvegardé. Attend comme paramètre le nombre de pages à sauter. Un nombre négatif recule (d’autant de pages précédentes que mentionné), un nombre positif avance (d’autant de pages suivantes que mentionné).

<a href="javascript:history.go(-3)"> Retour au sommaire</a>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzpXRN5x6jzIgLAA==-enidentnumber

256

L’objet image(s)

Avec l’objet images, vous avez accès à toutes les images définies dans un fichier Html.

On peut accéder aux images d’un document de deux façons :

par son nom, si elle a été définie dans la balise <img> par l’attribut name.document.portrait pour l’image dont le nom est name="portrait".

par son numéro d’index. Chaque image qui a été notée avec la balise <img> dans le fichier Html est notée dans un tableau. N’oubliez pas que cet index commence à 0. Ainsi pour adresser la première image, on utilisera images[0] et document.images[3]. pour adresser la quatrième image du document.

On pourra alors accéder aux propriétés de l’image comme border, height, hspace, src, vspace ou width.

Exemple :

Modifier les propriétés height et width d’une image.

<html> <head> <title>Images</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function changer() document.images[0].width="250"; document.images[0].height="50"; </script> </head> <body> <img src="world.jpg" width="70" height="70"> <form name="form"> <p> <input type="button" value="Changer" onclick="changer()"> </p> </form> </body> </html>

Pour des images qui ne sont pas définies dans le code Html et que vous voudriez afficher en supplément avec JavaScript, vous devrez créer un nouvel objet Image() distinct en JavaScript. C’est particulièrement important quand on veut remplacer de façon dynamique des images par d’autres images.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzN4jd9h6jzIgLAA==-enidentnumber

257

var graph = new Image(); graph.src = "mon_image.gif";

L’image est maintenant chargée dans le cache du navigateur. Si on souhaite l’utiliser plus tard, il n’y aura pas de délai de téléchargement. On dispose ainsi un système de préchargement (preload) des images pour améliorer la fluidité d’un site.

En JavaScript, il est toujours conseillé de spécifier les dimensions de l’image.

On pourrait ainsi écrire var graph = new Image(width,height);

Exemple :

Script permettant de précharger les images 1.gif (100x100) et 2.gif (50x50).

<html> <head> <title>Prechargement</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> image01= new Image(100,10) image01.src="1.gif" image02= new Image(50,50) image02.src="2.gif" </script> </head> <body> ... </body> </html>

S’il est nécessaire de précharger de multiples images, il est possible de le réaliser rapidement en passant par l’objet Array().

<script type="text/javascript"> function preload() image_obj = new Image(); images = new Array(); images[0] = "image1.jpg"; images[1] = "image2.jpg"; images[2] = "image3.jpg"; images[3] = "image4.jpg"; for (i=0; i<=3; i++) image_obj.src = images[i]: </script>

Ce préchargement d’images peut également être réalisé par les feuilles de style CSS. Soit, <img src="image.jpg" style="display:none" alt="">


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzN4jd9h6jzIgLAA==-enidentnumber

258

L’objet document

Nous avons utilisé au long de cet ouvrage la méthode write() pour écrire du JavaScript dans le document.

Parmi les autres propriétés et méthodes de l’objet document, nous aimerions retenir la propriétélastModified qui sauvegarde la date et l’heure de la dernière modification du fichier dans le format GMT (heure de Greenwich). Pour tout autre affichage, on passera par l’objet Date() (chapitre L’objet Date()).

Exemple :

Indiquer la date de la dernière mise à jour d’une page Web.

<html> <head> <title>Mise à jour</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> document.write("Dernière mise à jour: " + document.lastModified); </script> </body> </html>

Il existe d’autres méthodes importantes comme getElementById() qui permet l’accès à l’élément Html par l’attribut Id et getElementsByName() pour l’accès à l’élément Html par l’attribut name.

Nous en réservons l’étude et surtout l’utilisation dans la partie consacrée au Dhtml.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzcTWWDh+jzIgLAA==-enidentnumber

259

Types d’erreurs

Vous faites des erreurs en écrivant vos programmes JavaScript. Et cela vous désespère... Rassurezvous, cela arrive aux novices comme aux experts. On dit que l’on n’écrit pas un programme JavaScript mais qu’on le réécrit ! Et ceci est valable pour tous les autres langages de programmation.

Passons en revue quelques pistes pour retrouver les inévitables erreurs et pouvoir ainsi les corriger.

Il y a trois grandes catégories d’erreurs dans l’utilisation d’un programme JavaScript :

les erreurs au chargement.

les erreurs à l’exécution.

les erreurs de logique.

Au chargement du script par le navigateur, JavaScript passe en revue les différentes erreurs qui peuvent empêcher le bon déroulement de celuici.

Les erreurs au chargement, nombreuses lors de l’apprentissage de JavaScript, sont souvent dues à des fautes de frappe et/ou des erreurs de syntaxe.

Pour vous aider à déterminer l’erreur, JavaScript (pour autant que le débuggeur soit installé) affiche une boîte de message d’erreur, vous indique le problème et le texte de l’erreur. Des exemples classiques d’erreurs au chargement sont des parenthèses ou des accolades non fermées, des guillemets manquants, etc.

Ici votre script se charge sans problème, mais cette "satanée" boîte de message d’erreur apparaît lorsque l’exécution du script est demandée. Alors que les erreurs au chargement sont surtout dues au mauvais usage de la syntaxe, les erreurs à l’exécution proviennent, quant à elles, d’un mauvais usage des commandes ou des objets JavaScript. Un exemple d’erreur à l’exécution est un appel erroné à une variable ou une fonction inexistante (car il y a, par exemple, une erreur dans le nom de la variable ou de la fonction).

Ces erreurs sont inhérentes à un défaut dans la logique lors de l’écriture du programme. Ce sont les plus difficiles à retrouver car le code est impeccable. Aucune aide logicielle ne signale bien entendu ce genre d’erreur. Votre script se déroule correctement mais, hélas, le résultat ne correspond pas à celui espéré.

Il n’y a alors plus qu’à revoir la construction logique de votre script. Cent fois sur le métier remettez votre ouvrage...

Les erreurs au chargement

Les erreurs à l’exécution

Les erreurs de logique


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzLytDGx+jzIgLAA==-enidentnumber

260

Les débogueurs JavaScript

Microsoft Internet Explorer contient des options permettant d’activer son débuggeur JavaScript. Il faut dans ce cas activer le débogage de script dans les options Internet de votre navigateur (Outils Options Internet onglet Avancé).

On peut aussi installer Script Debugger (scd10en.exe). Ce programme est disponible en téléchargement sur le site de Microsoft ou plus simplement par une recherche sur Google avec comme motsclés "Script Debugger download".

Lors d’une erreur de script, la fenêtre suivante apparaît.

En cliquant sur Oui, le programme de débogage s’ouvre (en lecture seule).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz68UzJx+jzIgLAA==-enidentnumber

261

Certes, cet outil vous fera découvrir de nombreuses fautes d’orthographe et/ou de syntaxe JavaScript mais il ne constitue pas la solution "miracle" attendue par certains.

En effet :

des erreurs ne peuvent être débusquées qu’avec une bonne connaissance des règles du JavaScript. Ce qui n’est généralement pas le cas des novices.

certains rapports d’erreurs sont vagues et doivent être interprétés avec beaucoup de perspicacité.

aucun conseil ou piste de correction n’est fourni.

les erreurs de logique ne sont bien entendu pas décelées.

Pour Firefox, l’extension Pour Firefox, l’extension Firebug apporte une solution assez semblable. Cette extension peut être téléchargée à l’adresse http://extensions.geckozone.org/ FireBug.

Une fois l’extension installée, on y accède par Outils Firebug.

Une erreur de script est signalée dans la barre d’état.

Il suffit de double cliquer sur le message Error et une fenêtre plus détaillée s’ouvre alors.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz68UzJx+jzIgLAA==-enidentnumber

262

Éviter les erreurs

Terrible lapalissade : le meilleur moyen de ne pas avoir d’erreurs est encore de ne pas en faire !

Que l’on soit novice ou expert, voici une liste de quelques erreurs aussi fréquentes que déroutantes :

oubli des apostrophes de début ou de fin pour les chaînes de caractères ;

confusion dans l’utilisation de l’apostrophe double et simple ;

confusion entre le signe égal = opérateur d’affectation et le signe égal == opérateur de comparaison ;

référencement d’objets non définis ;

erreur dans la hiérarchie des objets ;

non respect des majuscules et minuscules ;

nom différent pour déclarer la fonction et pour l’appeler ;

accolades (de fin surtout) manquantes ou mal placées ;

objets, propriétés et méthodes JavaScript mal orthographiés ;

etc.

Rassurezvous, avec une bonne connaissance des règles, une expérience de programmation et une perspicacité digne de Sherlock Holmes, vos scripts seront finalement corrects et fiables.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzVfFaNh+jzIgLAA==-enidentnumber

263

Définition

À son apparition (fin 1997/début 1998), on définissait le Dhtml (Dynamic Html) comme une technique permettant d’apporter de façon dynamique des animations aux pages Html classiques.

En effet, les pages Html sont, par définition, statiques et surtout plus orientées vers la richesse de contenu que vers l’attrait visuel. Le Dhtml permet d’apporter quelques fantaisies graphiques pour en améliorer l’attrait.

Le terme "dynamique" met l’accent sur la capacité du Dhtml à modifier les éléments de la page Web, après que celleci ait été chargée par le navigateur et sans faire appel aux ressources du serveur.

Le Dhtml n’est pas un langage de balises. Ce n’est qu’une forme d’écriture des pages Html.

Le Dhtml n’est pas un langage de balises de plus, ni un langage de script ou de programmation. C’est simplement une forme d’écriture et de conception de pages Web où l’accent à été mis, dans des proportions variables cependant, sur certaines formes d’animation et d’interactivité.

Le Dhtml utilise trois développements de la publication sur la toile : le Html (ou le XHtml), le JavaScript et les feuilles de style CSS.

À ses débuts, le Dhtml était seulement considéré, par les puristes, comme un terme issu du marketing et de la publicité pour soutenir les animations et les effets multimédia des nouveaux navigateurs de l’époque, Internet Explorer 4 et Netscape 4.0.

Cependant, au fil des années, les scripts Dhtml ont trouvé leur place dans l’élaboration des sites Web, justifiant ainsi leur utilité.

Depuis quelques mois (fin 2004/début 2005), le panorama des outils de publication a bien évolué avec l’émergence des feuilles de style CSS. Et le Dhtml a retrouvé une nouvelle jeunesse. Les publications récentes n’hésitent pas à définir le Dhtml comme le moyen de modifier dynamiquement les déclarations de style des éléments du Html au moyen du JavaScript.

Le Dhtml est du JavaScript appliqué aux feuilles de style CSS.

Cette définition, techniquement plus précise, semble rallier l’approbation de tous. Surtout que le Dhtml a délaissé au fil du temps ses animations parfois un peu futiles pour se concentrer sur l’amélioration de la convivialité et de l’ergonomie des sites Web.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzm7tgRR+jzIgLAA==-enidentnumber

264

Compatibilité et contraintes

On n’étonnera personne en apprenant que le Dhtml a été implanté différemment selon Microsoft et Netscape. Il était, et reste, une source supplémentaire d’incompatibilité selon les navigateurs, surtout qu’il n’a jamais été normalisé par une spécification du W3C.

Le Dhtml est souvent hautement incompatible d’un navigateur à l’autre et même entre les différentes versions d’un même navigateur.

Cette incompatibilité est telle, qu’il est dans la plupart des cas nécessaire de prévoir une version de code différente selon toute une série de cas de figures pour assurer une bonne compatibilité, voire une compatibilité minimale. D’où l’importance de connaître le navigateur du visiteur, ce qui sera abordé au chapitre suivant (chapitre Le Dhtml et les objets).

Pour garder l’aspect didactique de cet ouvrage, nous avons fait le choix de laisser à l’écart l’optique et la recherche de compatibilité d’un navigateur à l’autre. Pour ne pas alourdir et surcharger une étude qui est déjà complexe, les scripts se concentreront surtout sur un navigateur, soit Internet Explorer 6. La compatibilité sera simplement rappelée au fil des chapitres mais ne constituera en aucun cas une priorité.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzMcmkUR+jzIgLAA==-enidentnumber

265

Dhtml ou Flash

Quand on évoque les animations, l’interactivité et les effets visuels sur le Web, on pense immanquablement au Flash de Macromedia.

Les animations Flash sont des fichiers réalisés par un programme (Flash de Macromedia) et qui, bien qu’issus d’une technologie totalement différente, s’intègrent aisément aux pages Web.

Il semble utile de comparer les avantages et inconvénients de ces deux technologies.

Le Dhtml est supporté, avec les restrictions abordées au point Compatibilité et contraintes de ce chapitre, par tous les navigateurs depuis Internet Explorer 4.0 et Netscape 4.

Le Dhtml ne réclame donc aucun plugin supplémentaire.

Le Dhtml se fonde sur deux technologies assez répandues que sont les feuilles de style CSS et le JavaScript.

Le Dhtml est ainsi d’un apprentissage aisé [?].

Le Dhtml reste du Html auquel on a ajouté des feuilles de style et du JavaScript. Le Dhtml est ainsi un fichier en mode texte avec pour conséquence un temps de téléchargement réduit, quel que soit le type de connexion du visiteur.

Le Dhtml peut tourner au cauchemar si l’on veut réaliser des scripts compatibles pour tous les navigateurs de la toile.

Le Dhtml est très rigoureux au niveau de la syntaxe du code.

Le plugin nécessaire pour faire tourner les applications Flash est largement adopté par les internautes. On peut estimer qu’il est présent sur 95 % des ordinateurs connectés.

La compatibilité avec les navigateurs du marché est excellente.

Le potentiel du Flash au niveau des animations et des effets graphiques est nettement plus élevé que le Dhtml car il est issu du milieu de l’infographie.

Le Flash permet de réaliser des sites très élaborés au niveau graphique.

Le Flash appartient à la branche Infographique de l’informatique. Son apprentissage pour les noninitiés réclamera des efforts certains.

Son temps de téléchargement est un peu plus lent que le Dhtml.

Pour les puristes de la toile, les applications Flash ne sont que des applications lues par les navigateurs et qui n’ont rien à voir avec le langage Html, par essence le langage originel du Web.

Le reproche formulé par certains internautes au sujet des sites Flash est qu’ils manquent parfois de contenu informatif à force de vouloir mettre l’accent sur l’aspect graphique et visuel. Reproche qui peut tourner à l’allergie avec la recherche empressée du "Skip intro" ou "Passer l’intro" permettant de fermer les applications Flash.

Avantages du Dhtml

Inconvénients du Dhtml

Avantages du Flash

Inconvénients du Flash


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzXWyjYB+jzIgLAA==-enidentnumber

266


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzXWyjYB+jzIgLAA==-enidentnumber

267

Le DOM (Document Object Model)

La capacité de changer de façon dynamique une page Web par le JavaScript, est rendue possible par le Document Object Model, en abrégé le DOM.

Le Modèle Objet de Document (DOM) peut se définir comme une interface de programmation d’applications pour des documents Html. En clair, il définit la structure logique des objets d’un document, la manière d’y accéder et de les manipuler.

Avec le DOM, les programmeurs peuvent construire des documents, naviguer dans leur structure ainsi qu’ajouter, modifier ou effacer des éléments et leur contenu. Tout ce qui se trouve dans un document Html peut être touché, modifié, effacé ou ajouté en utilisant le Modèle Objet du Document.

Le DOM fournit aussi une interface de gestion des événements, pour capturer les actions du navigateur ou de son utilisateur, et y réagir.

Au début du Dhtml, Microsoft et Netscape ont introduit des façons personnelles (et différentes) d’accéder aux objets d’un document. Ainsi, Internet Explorer 4.0 et Netscape 4 étaient totalement incompatibles au niveau du Dhtml. Devant cette nouvelle source d’incompatibilité, le W3C se devait de réagir. Une spécification officielle du W3C, le Document Object Model niveau 1, apparut fin 1998, à la satisfaction générale des concepteurs de navigateurs Web.

Il fallut néanmoins attendre les années 2000 pour voir ces directives concernant ce DOM standardisé reprises par les navigateurs Internet Explorer 5.0 et Netscape 6. Les navigateurs apparus dans les années suivantes ont continué à se conformer au DOM du W3C.

Depuis, le Dhtml a retrouvé une certaine compatibilité (à défaut d’une compatibilité certaine).

Il n’est pas nécessaire, dans le cadre de cet ouvrage, d’aller plus avant dans l’étude du DOM car ces spécifications n’intéressent finalement que les concepteurs de navigateurs et les designers de pages Web de haut vol. À notre niveau, nous ne pouvons que nous conformer à l’implantation du DOM dans le navigateur et respecter les règles de procédure qu’il induit.

Rassurezvous, nous avons déjà appliqué ce Document Object Model dans le cadre de notre étude sur le JavaScript et notre façon de procéder reste valable. En effet, un grand classique des chapitres concernant le JavaScript et de ses exemples, la définition du chemin vers un objet déterminé. Ce chemin prenait une allure du genre "window document form input value". C’était et cela reste du DOM ! C’était et cela reste valable !

Cependant, avec la spécification du DOM par le W3C, de nouveaux objets ont été rendus accessibles et surtout de nouvelles méthodes ont été implantées. On pense à :

document.getElementById(id)

document.getElementsByTagName(name)

document.createElement(name)

element.innerHTML

element.style

...

Ces méthodes, plus spécifiques pour l’accès aux objets, plus directes et plus performantes, ont été largement adoptées par les techniques d’écriture des scripts Dhtml et constituent le contenu du présent chapitre.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzMTFBbh+jzIgLAA==-enidentnumber

268

Détection du DOM

L’évolution des possibilités de prendre en compte certains objets et d’accéder aux objets au fil des versions des navigateurs fournit, de façon indirecte, une technique pour identifier le navigateur du visiteur et éventuellement pour adapter les lignes de code en fonction de ce dernier. Détaillons ceci.

À l’époque, la nouveauté de Netscape 3 et d’Internet Explorer 4 par rapport aux versions antérieures était de pouvoir accéder aux images du document. Ainsi le fait de pouvoir reconnaître le chemin document.images attestait que l’on avait bien affaire à Netscape 3 et Internet Explorer 4. Dans le cas contraire, on avait encore affaire à une ancienne version.

On voyait fleurir des tests du type :

if (document.images) Instructions pour NS3 et IE4 else Instructions pour NS2 et IE3

Pour distinguer les deux compères Netscape 3 et Internet Explorer 4, on pouvait dans le même registre, exploiter leur implantation du Document Object Model. Ainsi, Netscape 3, reconnaissait document.layers (que ne reconnaissait pas Internet Explorer 4). Et par ailleurs, Internet Explorer 4 reconnaissait document.all (que ne reconnaissait pas Netscape 3).

On imagina donc le test :

if (document.all) Instructions pour IE4 else Instructions pour NS3

Par la suite, Internet Explorer 5 et Netscape 6 reconnurent tous deux la nouvelle instruction document.getElementById. Il était facile de distinguer ces navigateurs (à l’époque) de nouvelle génération par rapport aux anciens navigateurs par le test :

if (document.getElementById) Instructions pour IE5 et NS 6 else Suite des tests pour les anciens navigateurs.

Et ainsi de suite...

On peut ainsi dresser un tableau pour les différents navigateurs :

DOM Navigateur

document.all Interner Explorer 4+

window.attachEvent Internet Explorer 5+

window.createPopup Internet Explorer 5.5+

getElementById && document.compatMode Internet Explorer 6+

typeof document.documentElement.style.maxHeight!="undefined" Internet Explorer 7+

document.getElementById Firefox 1+ Internet Explorer 5.5+

window.XMLHttpRequest Firefox 1+ Internet Explorer 7+

window.getComputedStyle Firefox 1+


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzh4/uhx+jzIgLAA==-enidentnumber

269

À l’heure actuelle, un test sur document.getElementById && document.createElement (voir exemple) atteste, dans l’affirmative, que l’on a affaire à un navigateur de la dernière génération, qui reconnaît bien le Document Object Model et qui est performant en Dhtml.

Cette façon de détecter le navigateur du visiteur est plus pratique et donc plus utilisée que celle abordée au chapitre L’environnement du visiteur Le navigateur.

Exemple 1 : Détecter un navigateur Dhtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test Dhtml</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> if (document.getElementById && document.createElement) document.write("Je suis au top pour le Dhtml"); </script> </body> </html>

Bien entendu, les deux navigateurs retenus pour le présent ouvrage passent le test.

Internet Explorer 7

Firefox 2

Exemple 2 : Détecter la version 6 d’Internet Explorer

Array.every Firefox 1.5+

window.Iterator Firefox 2+



270

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Détection IE</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> if (document.getElementById && document.compatMode) document.write("<h2>Internet Explorer 6 ou +</h2>"); </script> </body> </html>

Ryan Parman, de Skyzyx.com, a regroupé le fichier iexplore.exe avec les fichiers du noyau du navigateur pour chacune des versions d’Internet Explorer. Ces versions autonomes (standalone) d’Internet Explorer 4.0, 5.0,

5.5 sont disponibles sur sa page de téléchargement : http://www.skyzyx.com/downloads/ (voir chapitre Tester les CSS Outils Internet Explorer).



271

Définir un objet

Tous les éléments d’un document Html sont des objets. Certains de ces objets sont accessibles de façon conventionnelle, comme les formulaires ou les images. Pour d’autres, il sera nécessaire ou plus rapide de les définir explicitement par l’attribut id (chapitre Classes et pseudoclasses Notion de classe (class et id).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Objet par id</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #objet_1 position: absolute; visibility: visible; top: 30px; left: 100px; width: 120px </style> </head> <body> <div id="objet_1"> <img src="world.jpg" alt="" height="70" width="70"> <h4>Le monde</h4> </div> </body> </html>

Dans la balise <div>, on détermine l’attribut id (id="objet_1") dont les propriétés sont définies par la pseudoclasse de style, #objet_1 ....


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzZ4sAlB+jzIgLAA==-enidentnumber

272

Accéder à un objet

Il y a plusieurs façons d’accéder à un objet.

1. Méthode classique

C’est la méthode que nous avons étudiée et utilisée dans la partie JavaScript de cet ouvrage. Elle consiste à définir le chemin, d’objet en objet, vers l’objet concerné.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Méthode classique</title> <script type="text/javascript"> function test() var utilisateur = document.form.votrenom.value; alert(utilisateur); </script> </head> <body> <form name="form"> <input name="votrenom" value="Nom" size="30"> <input type="submit" value="OK" onclick="test()"> </form> <div> Entrez votre nom et cliquez. </div> </body> </html>

On accède à la valeur de l’objet par document.form.votrenom.

2. Méthode getElementById

La méthode getElementById recherche l’élément selon son Id.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzT5WhoB+jzIgLAA==-enidentnumber

273

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>getElementById</title> <script type="text/javascript"> function test() var utilisateur = document.getElementById(’votrenom’).value; alert(utilisateur); </script> </head> <body> <form> <input id="votrenom" value="Nom" size="30"> <input type="submit" value="OK" onclick="test()"> </form> <div> Entrez votre nom et cliquez. </div> </body> </html>

La méthode getElementById accède à l’objet dont on a fourni l’Id (ici ’votrenom’).

La capture d’écran est identique à celle pour la méthode classique.

3. Méthode getElementsByName

La méthode getElementsByName va détecter l’élément par son nom. Cette information est notée sous forme de tableau.

Attention, getElements s’utilise bien au pluriel car on peut avoir plusieurs noms alors qu’on ne peut avoir qu’un seul Id.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>getElementsByName</title> <script type="text/javascript"> function test() var utilisateur = document.getElementsByName("votrenom")[0].value; alert(utilisateur); </script> </head> <body> <form> <input name="votrenom" value="Nom" size="30"> <input type="submit" value="OK" onclick="test()"> </form> <div> Entrez votre nom et cliquez. </div> </body> </html>

La capture d’écran est toujours identique.

4. Méthode getElementsByTagName

La méthode getElementsByTagName va chercher la balise qui a été transmise en argument (ici ’input’).



274

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> getElementsByTagName</title> <script type="text/javascript"> function test() var utilisateur = document.getElementsByTagName("input")[0].value; alert(utilisateur); </script> </head> <body> <form> <input value="Nom" size="30"> <input type="submit" value="OK" onclick="test()"> </form> <div> Entrez votre nom et cliquez. </div> </body> </html>

La capture d’écran ne change pas.

Exemple :

Pour accéder à un objet (une balise <h1>), on utilisera la méthode de getElementById (soit prendre un élément par son attribut Id).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>getElementById</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <h1 id="titre">Mon Titre</h1> <script type="text/javascript"> document.getElementById(’titre’).style.border="solid black 2px"; </script> L’inscription originale était : <h1>Mon Titre</h1> </body> </html>

On a identifié la première balise h1 par id="titre".

Dans le script, on accède à cet objet par document.getElementById(’titre’). Ensuite, par style.border, appliqué à cet objet, il est alors possible d’en changer le style, ici l’ajout d’une bordure.



275



276

Accéder à un événement

La gestion des événements a été largement abordée au chapitre Gestionnaires d’événements. JavaScript étant un élément du Dhtml, on s’empressera de reprendre cet outil.

Exemple :

Dans le script suivant, nous allons, au clic de la souris sur l’objet défini au point Définir un objet de ce chapitre (objet_1), déplacer celuici par rapport à sa position déclarée dans la feuille de style.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Objet par id</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function move() var objet = document.getElementById("objet_1"); objet.style.top=5 + "px"; objet.style.left=5 + "px"; </script> <style type="text/css"> #objet_1 position: absolute; visibility: visible; top: 30px; left: 100px; width: 120px </style> </head> <body> <div id="objet_1" onclick="move()"> <img src="world.jpg" alt="" height="70" width="70"> <h4>Le monde</h4> </div> </body> </html>

Au clic sur l’objet, la fonction move() est appelée (onclick="move()).

Dans cette fonction move(), on crée une variable objet qui contient l’adresse de l’objet "objet_1". Cette adresse est obtenue par la méthode document.getElementById("objet_1"), soit, de façon littéraire : à partir du document, prendre un élément par son Id qui est "objet_1".

Pour cet objet, on modifie la valeur de la déclaration de style top par objet.style.top. Idem pour la valeur du style left (ces manipulations seront détaillées plus loin dans cet ouvrage).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzk+/gtB+jzIgLAA==-enidentnumber

277


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzk+/gtB+jzIgLAA==-enidentnumber

278

Passer un événement à une fonction

Tous les événements du navigateur génèrent certaines informations sur ce qui se produit, l’endroit où l’événement se produit et la manière dont il se produit. Il est possible de fournir ces informations directement à une fonction JavaScript. On pourra alors par la suite y accéder sans devoir faire appel à la méthode getElementById.

Exemple :

Au clic sur l’image, le script enregistre les informations relatives à cet événement par une fonction. Après traitement par la fonction, une boîte d’alerte affiche la position X (horizontale) et Y (verticale) du curseur de la souris au moment du clic.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Evt fonction</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function passage(event) alert(event.clientX + " et " + event.clientY) </script> <style type="text/css"> #objet_1 visibility: visible; position: absolute; top: 20px; left: 20px </style> </head> <body> <div id="objet_1" onclick="passage(event)"> <img src="world.jpg" height="70" width="70"> </div> </body> </html>

Au clic de la souris, on appelle la fonction passage() à laquelle on transmet l’événement en paramètre (onclick="passage(event)).

Dans la fonction passage(), avec les informations transmises en paramètre, on peut accéder à la position X et Y de l’endroit où on a cliqué sur l’image (evt.clientX et evt.clientY). Une boîte d’alerte affiche ces coordonnées.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzM5q+0B+jzIgLAA==-enidentnumber

279


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzM5q+0B+jzIgLAA==-enidentnumber

280

Lier un événement à un objet

Les gestionnaires d’événement sont le plus souvent directement appliqués à la balise de l’objet, à l’endroit où on souhaite détecter l’événement, par exemple, un survol par la souris d’une image.

Une autre méthode consiste à lier un événement à un ou plusieurs objet(s). On utilisera les acquis du script précédent (variable event) pour accéder directement à l’objet et effectuer les manipulations.

Exemple :

À chaque fois que l’on clique sur l’image, celleci se déplace.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Evt fonction</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function move() document.getElementById(’objet_1’).onclick = moveobject; function moveobject (event) var objet = document.getElementById(this.id); event = window.event; var moveLeft=event.clientX; var moveTop=event.clientY; objet.style.left = moveLeft + ’px’; objet.style.top = moveTop + ’px’; </script> <style type="text/css"> #objet_1 visibility: visible; position: absolute; top: 20px; left: 20px </style> </head> <body onload="move()"> <div id="objet_1"> <img src="world.jpg" height="70" width="70"> </div> </body> </html>

Au chargement de la page (onload), on active la fonction move().

Celleci associe au clic (onclick) sur objet_1 identifié par getElementById(’objet_1’), une autre fonction, soit moveobject().

Dans cette dernière, on crée la variable objet à partir de l’Id déterminé dans la fonction move(), ce qui donne l’écriture document.getElementById(this.id). On crée une autre variable, event, qui enregistre l’événement qui se produit dans la fenêtre (window.event). Les variables moveLeft et moveTop contiennent les coordonnées du clic sur l’image. On donne, par objet.style.left, la nouvelle coordonnée ainsi trouvée par rapport à sa position initiale déterminée dans la déclaration de style. Idem pour objet.style.top. Ce qui crée le déplacement.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzm2op3x+jzIgLAA==-enidentnumber

281


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzm2op3x+jzIgLAA==-enidentnumber

282

Introduction

En Dhtml, la connaissance de l’environnement du visiteur est primordiale. On pense bien entendu aux modalités d’exécution des scripts qui peuvent varier d’un navigateur à l’autre, d’une version à l’autre d’un même navigateur et parfois d’une même version selon les systèmes d’exploitation. Mais cette démarche a surtout comme but de connaître l’environnement de l’objet qui sera appréhendé par le script Dhtml.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz+S+r7h+jzIgLAA==-enidentnumber

283

L’objet JavaScript navigator

L’objet navigator de JavaScript fournit un ensemble d’informations sur l’environnement du visiteur et tout particulièrement sur le navigateur qu’il utilise. D’une utilité réduite en JavaScript, il trouve sa pleine puissance en Dhtml. C’est pour cette raison que nous en avons retardé l’étude.

Passons en revue quelquesunes de ses propriétés et méthodes.

navigator.appCodeName

Comme Internet Explorer, Netscape, Mozilla, Opera ou Firefox renvoient la même valeur, cette propriété n’est pas très utile dans la pratique.

navigator.appName

navigator.appVersion

Les informations, autant pour Internet Explorer que pour Firefox sont assez neutres. Seul MSIE (MicroSoft Internet Explorer) permet vraiment d’identifier Internet Explorer.

navigator.language

navigator.userLanguage

navigator.platform

navigator.userAgent

Internet Explorer 6 et 7 Mozilla (étonnant n’estce pas ?)

Firefox 2 et 3 Mozilla

Internet Explorer 6 Microsoft Internet Explorer

Internet Explorer 7 Microsoft Internet Explorer

Firefox 2 et 3 Netscape

Internet Explorer 6 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

Internet Explorer 7 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Firefox 2 et 3 5.0 (Windows; frFR)

Internet Explorer 6 undefined

Internet Explorer 7 undefined

Firefox frFR

Internet Explorer 6 fr

Internet Explorer 7 fr

Firefox 2 et 3 undefined

Internet Explorer 6 Win32

Internet Explorer 7 Win32

Firefox 2 et 3 Win32


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzz2ksBCCjzIgLAA==-enidentnumber

284

Internet Explorer 6 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

Internet Explorer 7 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Firefox 2 Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

Firefox 3 Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzz2ksBCCjzIgLAA==-enidentnumber

285

Le système d’exploitation

Bien que la propriété platform pourrait convenir, c’est plutôt la propriétéappVersion qui est utilisée dans les scripts Dhtml.

Par la méthode indexOf (chapitre L’objet String Manipulation des caractères), on peut voir si la chaîne partielle "Win" ou "Mac" est présente dans la propriété appVersion.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Système d’exploitation</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> if (navigator.appVersion.indexOf("Win") != -1) system = "Windows"; else if (navigator.appVersion.indexOf("Mac") != -1) system = "Macintosh"; else system ="Inconnu"; document.write("Mon système d’exploitation est " + system); </script> </body> </html>

La principale utilité de ce script est de pouvoir adapter la taille de la police par défaut qui est différente sous Macintosh et sous Windows.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzK2GFFiCjzIgLAA==-enidentnumber

286

Le navigateur

On peut connaître le nom du navigateur par la propriétéuserAgent. Par la méthode indexOf (chapitre L’objet String Manipulation des caractères), on peut voir si la chaîne partielle "MSIE" ou "Firefox" est présente.

La recherche du nom et de la version du navigateur s’effectue plus couramment dans la pratique par le mode de sélection des objets du navigateur (chapitre Le Dhtml et les objets Détection du DOM) qui fournit un résultat plus pratique et plus direct.

Exemple 1 : Identifier Firefox ou Internet Explorer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Navigateur</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> if (navigator.userAgent.indexOf("MSIE") != -1) navigateur = "Internet Explorer"; else if (navigator.userAgent.indexOf("Firefox") != -1) navigateur = "Firefox"; else navigateur ="Autre"; document.write("Votre navigateur est" + navigateur); </script> </body> </html>

Exemple 2 : Identifier les versions d’Internet Explorer

Nous utiliserons les informations transmises par navigator.userAgent.

Il est évident que nous rechercherons la présence des chaînes partielles MSIE 7, MSIE 6 et MSIE 5.5 pour identifier les versions d’Internet Explorer.

Le script devient :

Internet Explorer 7 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Internet Explorer 6 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

Internet Explorer 5.5 Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.1; SV1)


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4aYFJSCjzIgLAA==-enidentnumber

287

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Navigateur IE</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> if (navigator.userAgent.indexOf("MSIE 7") != -1) document.write("<h2> Internet Explorer 7</h2>"); if (navigator.userAgent.indexOf("MSIE 6") != -1) document.write("<h2> Internet Explorer 6</h2>"); if (navigator.userAgent.indexOf("MSIE 5.5") != -1) document.write("<h2> Internet Explorer 5.5</h2>"); </script> </body> </html>

Testé sous Internet Explorer 5.5


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4aYFJSCjzIgLAA==-enidentnumber

288

La langue

La langue du navigateur (et en toute probabilité, la langue du visiteur), est fournie par la propriétéuserLanguage pour Internet Explorer ou la propriété language pour Firefox, de l’objet navigator. On en retirera les deux premières lettres par substring(0,2) (chapitre L’objet String Manipulation des caractères).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Langue</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> if (navigator.userAgent.indexOf("MSIE") != -1) langue=navigator.userLanguage.substring(0,2); else langue=navigator.language.substring(0,2); if (langue=="fr") langue="français" document.write("Vous parlez le " + langue + "."); </script> </body> </html>

Si le site a une ambition internationale, on peut prévoir de rediriger le visiteur vers une page dans sa langue. Une fois la langue déterminée, on peut rediriger le visiteur par un window.location (chapitre Quelques autres objets L’objet location).

Ce script peut être mis en œuvre au chargement de la page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Redirection langue</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function test_langue() if (navigator.userAgent.indexOf("MSIE") != -1) langue=navigator.userLanguage.substring(0,2); else langue=navigator.language.substring(0,2); if (langue=="fr")


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzkfV3OCCjzIgLAA==-enidentnumber

289

window.location="francais.htm"; if (langue=="en") window.location="english.htm"; if (langue=="es") window.location="espagnol.htm"; if (langue != ("fr" ||"en"||"es")) window.location="defaut.htm" </script> </head> <body onload="test_langue()"> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzkfV3OCCjzIgLAA==-enidentnumber

290

La résolution d’écran

À l’époque où les concepteurs de sites s’interrogent sur la résolution d’écran la plus utilisée sur la toile (800x600, 1024x768 ou plus), cette information est parfois cruciale. On peut ainsi, éventuellement, rediriger le visiteur vers une page adaptée à la bonne résolution d’écran.

On reprendra les propriétés width et height de l’objet screen (chapitre Quelques autres objets).

Il ne faut pas confondre la résolution d’écran avec la dimension de la fenêtre du navigateur (point La fenêtre du navigateur du présent chapitre).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Résolution d’écran</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> document.write("Ma résolution d\’écran est de " + screen.width + "x"+ screen.height); </script> </body> </html>

On peut prévoir des pages particulières en fonction de la résolution d’écran.

<html> <head> <title>Redirection écran</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> document.write("Votre résolution d\’écran est de " + screen.width + "x"+ screen.height); if (screen.width < 1024) window.location="800.htm"; if (screen.width == 1024) window.location="1024.htm"; if (screen.width > 1024) window.location="plus.htm"; </script> </head> <body> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzsdRuRSCjzIgLAA==-enidentnumber

291


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzsdRuRSCjzIgLAA==-enidentnumber

292

Le nombre de couleurs

Le nombre de couleurs utilisé par l’écran du visiteur peut être une information primordiale pour les sites d’essence graphique.

Cette information est fournie par l’objet screen et la propriété colorDepth (voir chapitre Quelques autres objetsL’objet screen). Cette propriété colorDepth renvoie le nombre de bits de la palette de couleurs de la machine du visiteur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Couleurs</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> document.write("L\’écran est en " + screen.colorDepth +" bits "); document.write("et affiche" + Math.pow(2,screen.colorDepth) +" couleurs."); </script> </body> </html>

Nombre de bits Nombre de couleurs

4

8

16

32

16 soit 24

256 soit 28

65 536 soit 216

4 294 967 296 soit 232


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzCVqKUSCjzIgLAA==-enidentnumber

293

La fenêtre du navigateur

Pour connaître les dimensions de la fenêtre du navigateur, on utilise les propriétés outerWidth et outerHeight de l’objet window (chapitre L’objet window Méthodes open() et close()).

Cette information n’est disponible que sous Firefox, Netscape et Mozilla, pas sous Internet Explorer, ce qui se révèlera une source d’incompatibilité pour de nombreux scripts Dhtml.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Fenêtre de navigateur Firefox</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> document.write("La largeur totale de la fenêtre est de " + window.outerWidth +" pixels.<br> "); document.write("La hauteur totale de la fenêtre est de " + window.outerHeight +" pixels."); </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQ4+5XyCjzIgLAA==-enidentnumber

294

La zone visible de la page

La zone disponible pour la page peut être déterminée par les propriétés innerWidth et innerHeight de l’objet window (chapitre L’objet window Méthodes open() et close()) pour Firefox.

Pour Internet Explorer, ces dimensions sont accessibles par les propriétés body.clientWidth et body.clientHeight de l’objet document.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Fenêtre de navigateur IE</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> var largeur; var hauteur; if (window.innerWidth) largeur = window.innerWidth; else largeur = document. body.clientWidth; if (window.innerHeight) hauteur = window.innerHeight; else hauteur = document. body.clientHeight; document.write("La largeur disponible est de " + largeur +" pixels.<br>"); document.write("La hauteur disponible est de " + hauteur +" pixels."); </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz49YXbCCjzIgLAA==-enidentnumber

295

Le titre de la page

On peut accéder au titre de la page Web par la propriété <title> de l’objet document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <html> <head> <title>Quel joli titre que voilà !</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> document.write("Le titre de la page est :<br>"); document.write(document.title); </script> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz81W1fCCjzIgLAA==-enidentnumber

296

Détecter l’objet cliqué

Retrouvons par son identifiant (Id), l’objet qui a été cliqué par l’utilisateur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Objet par id</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function trouver(event) idobjet = event.srcElement.id; if (idobjet) alert(’Vous avez cliqué ’ + idobjet); </script> <style type="text/css"> #objet_1 position: absolute; visibility: visible; top: 10px; left: 10px; #objet_2 position: absolute; visibility: visible; top: 60px; left: 140px; </style> </head> <body> <img id="objet_1" onclick="trouver(event)" src="world1.jpg" height="70" width="70"> <img id="objet_2" onclick="trouver(event)" src="world2.jpg" height="70" width="70"> </body> </html>

Soit deux images identifiées par id="objet_1" et id="objet_2".

Le clic sur l’image déclenche la fonction trouver(), à laquelle on passe comme paramètre l’événement event(onclick="trouver(event)").

La fonction trouver() enregistre dans la variable idobjet l’objet sur lequel a porté l’événement par la propriété srcElement(event.srcElement.id).

Si la variable existe (if (idobjet)), on affiche dans une boîte d’alerte l’identifiant de l’objet cliqué (alert (’Vous avez cliqué ’ + idobjet)).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzlVYyjCCjzIgLAA==-enidentnumber

297

Si l’on souhaite rendre ce script compatible pour Firefox, il faut utiliser target au lieu de srcElement. La ligne de code serait :

var idobjet = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);

Le code complet serait alors :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Objet par id</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function trouver(evt) var idobjet = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null); if (idobjet) alert(’Vous avez cliqué ’ + idobjet); </script> <style type="text/css"> #objet_1 position: absolute; visibility: visible; top: 10px; left: 10px; #objet_2 position: absolute; visibility: visible; top: 60px; left: 140px; </style> </head> <body> <img id="objet_1" onclick="trouver(event)" src="world1.jpg" height="70"

Exemple de compatibilité



298

width="70"> <img id="objet_2" onclick="trouver(event)" src="world2.jpg" height="70" width="70"> </body> </html>



299

Détecter les dimensions d’un objet

Il tombe sous le sens que les images ont une dimension (largeur et hauteur). Depuis l’introduction des feuilles de style, de nombreux autres objets peuvent être caractérisés par des attributs de largeur et de hauteur.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Dimension objet</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function trouver(idobjet) objet = document.getElementById(idobjet); largeur = objet.offsetWidth; hauteur = objet.offsetHeight; alert(" largeur = " + largeur + " et hauteur = " + hauteur); </script> <style type="text/css"> #objet_1 position: absolute; visibility: visible; top: 10px; left: 10px; </style> </head> <body> <div id="objet_1" onclick="trouver(’objet_1’)"> <img src="world.jpg"> </div> </body> </html>

Au clic de la souris sur l’image (id="objet_1"), la fonction trouver() est appelée. On lui passe l’Id en paramètre.

Dans la fonction trouver(), on enregistre dans une variable objet, la référence à l’Id objet_1 (getElementById(idobjet)). La variable largeur trouve par la propriété offsetWidth, la largeur de cet objet (largeur = objet.offsetWidth). La variable hauteur trouve par la propriété offsetHeight, la hauteur (hauteur = objet.offsetHeight). Une boîte d’alerte affiche la largeur et la hauteur ainsi déterminée.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzueuhmiCjzIgLAA==-enidentnumber

300

Les dimensions retournées peuvent varier d’un navigateur à l’autre. Firefox donne les dimensions réelles. Internet Explorer ajoute les bordures.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzueuhmiCjzIgLAA==-enidentnumber

301

Détecter la position d’un objet

On utilise les feuilles de style CSS pour fixer la position d’un objet par rapport au coin supérieur gauche (top et left).

Le JavaScript permet de retrouver cette position, ce qui sera utilisé au chapitre suivant pour faire bouger un objet.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Position objet</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function trouver(idobjet) objet = document.getElementById(idobjet); var top = objet.offsetTop; var left = objet.offsetLeft; alert(" top = " + top + " et left = " + left); </script> <style type="text/css"> #objet_1 position: absolute; visibility: isible; top: 10px; left: 120px; </style> </head> <body> <div id="objet_1" onclick="trouver(’objet_1’)"> <img src="world.jpg"> </div> </body> </html>

Au clic de la souris sur l’image (id="objet_1"), la fonction trouver() est appelée. L’Id lui est passé en paramètre.

Dans la fonction trouver(), on note dans une variable objet, la référence à l’Id objet_1(getElementById(idobjet)). La variable top trouve par la propriété offsetTop, la position de cet objet par rapport au bord supérieur (top = objet. offsetTop). La variable left trouve par la propriété offsetLeft, la position par rapport au bord gauche (left = objet.offsetLeft).

Une boîte d’alerte affiche les positions ainsi déterminées.

top et left


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzx7EgqCCjzIgLAA==-enidentnumber

302

La position du coin inférieur droit (bottom et right) de l’élément peut aussi nous intéresser.

Il n’y a pas de propriétés JavaScript spécifiques pour trouver directement la position bottom et right. On procèdera pour bottom par l’addition de top et de la hauteur (height). Et pour right, par l’addition de left et de la largeur (width).

Le script devient :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Dimension objet 2</title> <<meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function trouver(idobjet) objet = document.getElementById(idobjet); var droite = objet.offsetWidth + objet.offsetLeft; var bas = objet.offsetHeight + objet.offsetTop; alert("right = " + droite+ " et bottom = " + bas); </script> <style type="text/css"> #objet_1 position: absolute; visibility: visible; top: 10px; left: 120px; </style> </head> <body> <div id="objet_1" onclick="trouver(’objet_1’)"> <img src="world.jpg">

bottom et right



303

</div> </body> </html>

Au clic de la souris sur l’image (id="objet_1"), la fonction trouver() est appelée. L’Id lui est passé en paramètre.

Dans la fonction trouver(), on enregistre dans une variable objet, la référence à l’Id objet_1 (getElementById(idobjet)). La variable droite se calcule l’addition des propriétés objet.offsetWidth et objet.offsetLeft. La variable bas se calcule par l’addition des propriétés objet.offsetHeight et objet.offsetTop.

Une boîte d’alerte affiche les positions ainsi déterminées.



304

Détecter la visibilité d’un objet

Un objet peut aussi être visible (visible) ou caché (hidden). La détection de cet état permettra ensuite de cacher un objet visible et inversement.

Les navigateurs ne peuvent accéder directement à l’état de visibilité. Ils ne peuvent le faire que si cette possibilité a été définie dynamiquement.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Visibilité</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function initialiser(idobjet, visibilite) var objet = document.getElementById(idobjet); objet.style.visibility = visibilite; function trouver(idobjet) var objet = document.getElementById(idobjet); var visibilite = objet.style.visibility; alert("L’objet est " + visibilite ); </script> <style type="text/css"> #objet_1 position: absolute; visibility: visible; top: 10px; left: 120px; </style> </head> <body onload="initialiser(’objet_1’, ’visible’)"> <div id="objet_1" onclick="trouver(’objet_1’)"> <img src="world.jpg"> </div> </body> </html>

La fonction initialiser() mise en œuvre au chargement de la page (onload) définit de façon dynamique l’état de la visibilité. On transmet comme paramètres l’objet en question (’objet_1’) et son état de visibilité (’visible’). Cette fonction capture l’objet par getElementById et note son état de visibilité (objet.style.visibility = visibilite).

Le clic de la souris sur l’image met en œuvre la fonction trouver(). Celleci, après avoir repris l’objet, note dans la variable visibilite, la valeur de cette dernière (objet. style.visibility). Une boîte d’alerte affiche l’information.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzuyFntCCjzIgLAA==-enidentnumber

305


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzuyFntCCjzIgLAA==-enidentnumber

306

Détecter un type d’événement

Le script suivant va détecter le type d’événement déclenché par la souris.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Evénement</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function initialiser(idobjet) var objet = document.getElementById(idobjet); objet.onmousedown = trouver; document.onclick = trouver; function trouver(event) var event = window.event; if (event.type) alert(’Vous avez fait un ’ + event.type); </script> </head> <body onload="initialiser(’objet_1’)"> <div id="objet_1"> <p>Cliquez sur la page</p> <pre> ... </pre> </div> </body> </html>

Au chargement de la page (onload), on initialise (fonction initialiser()) les événements que l’on cherche à détecter. Le script se limite au clic du bouton de la souris (onmousedown et onclick) mais d’autres événements pourraient être ajoutés à cet endroit du script.

La fonction trouver() repère l’événement lorsqu’il se produit et l’affiche dans une boîte d’alerte.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQziWJjwyCjzIgLAA==-enidentnumber

307


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQziWJjwyCjzIgLAA==-enidentnumber

308

Détecter le bouton de la souris utilisé

Le Dhtml permet de détecter non seulement le clic de la souris mais aussi, quel bouton de la souris a été enfoncé.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Bouton souris</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function initialiser(idobjet) var objet = document.getElementById(idobjet); objet.onmousedown = trouver; function trouver(event) event = window.event; if (typeof event.button != ’undefined’) alert(’Bouton N° ’ + event.button); </script> </head> <body onload="initialiser(’objet_1’)"> <div id="objet_1"> <p>Cliquez la page.</p> <pre> ... </pre> </div> </body> </html>

Comme souvent, Internet Explorer ne fait pas les choses comme les autres navigateurs. Voici le tableau de correspondance des boutons de la souris pour Microsoft Internet Explorer et Firefox, Netscape et autres navigateurs de la famille Mozilla.

Au chargement de la page (onload), on initialise (fonction initialiser()) les événements que l’on cherche à détecter, ici onmousedown.

Si un clic de la souris a lieu (if (typeof event.button != ’undefined’)), on affiche la valeur attribuée au bouton dans une boîte d’alerte.

Bouton Internet Explorer

Firefox (Mozilla)

Aucun

Gauche

Milieu

Droit

0

1

4

2

null

0

1

2


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzWS1N1CCjzIgLAA==-enidentnumber

309

Il est aisé d’appliquer le script précédent pour désactiver le clic droit (bouton 2) de la souris et ainsi empêcher la copie de texte ou d’image.

Le script devient :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Bouton droit</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function initialiser(idobjet) var objet = document.getElementById(idobjet); objet.onmousedown = trouver; function trouver(event) event = window.event; if (event.button == ’2’) alert("Clic droit désactivé.\nIl y a un copyright sur les images."); </script> </head> <body onload="initialiser(’objet_1’)"> <div id="objet_1"> <img src="world.jpg"> </div> </body> </html>

On reprend le script précédent et on teste si la valeur du bouton est 2, ce qui signifie que le bouton droit a été utilisé. Dans l’affirmative, une boîte d’alerte s’affiche, empêchant l’apparition du menu contextuel.

Application



310



311

Détecter les coordonnées du curseur de la souris

Les coordonnées du curseur de la souris au moment de l’événement (ici le clic de la souris) peuvent être déterminées non seulement par rapport à la fenêtre du navigateur mais aussi par rapport à l’écran. Ces renseignements seront utiles, par exemple, pour des applications à caractère graphique.

Exemple 1 :

Retrouver les coordonnées du curseur au clic de la souris.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Coordonnées souris</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function initialiser(idobjet) var objet = document.getElementById(idobjet); objet.onmousedown = trouver; function trouver(event) var event = window.event; alert (’Position horizontale par rapport au navigateur = ’ + event.clientX + ’\nPosition verticale par rapport au navigateur = ’ + event.clientY); alert (’Position horizontale par rapport à l\’écran = ’++ event.screenX + ’\nPosition verticale par rapport à l\’écran = ’ + event.screenY); </script> </head> <body onload="initialiser(’objet_1’)"> <div id="objet_1"> <p>Cliquez la page.</p> <pre> ... </pre> </div> </body> </html>

Au chargement de la page (onload), on initialise par la fonction initialiser(), l’événement que l’on cherche à détecter (onmousedown).

Si un clic de la souris a eu lieu, on cherche les valeurs clientX, clientY, screenX et screenY, que l’on affiche dans des boîtes d’alerte. Voici la première :


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzo5xIMiGjzIgLAA==-enidentnumber

312

Exemple 2 :

Retrouver, en direct, les coordonnées du mouvement du curseur de la souris lors d’un événement onmousemove.

Attention, ce script ne fonctionne que sous Internet Explorer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Coordonnées souris a</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script language="JavaScript"> document.onmousemove = trouver; function afficher(x, y) with (document.form) curseurX.value = x; curseurY.value = y; function trouver(evt) afficher(event.x, event.y); </script> </head> <body> Bougez la souris <form name="form"> X : <input type="text" name="curseurX" size="4"> Y : <input type="text" name="curseurY" size="4"> </form> </body> </html>

Soit deux zones de texte (curseurX et curseurY).

Au chargement de la page (voir le début du script), le code appelle la fonction trouver() dès qu’un mouvement de la souris a été détecté (document.onmousemove).

La fonction trouver() repère la position X et Y du curseur (event.x, event.y) et appelle la fonction afficher().

Cette fonction afficher() envoie, à chaque valeur nouvelle du curseur, les coordonnées à la zone de texte correspondante du formulaire.



313



314

Introduction

De nombreux scripts Dhtml reposent sur quelques applications de base comme le déplacement d’un objet, le changement de la visibilité ou du contenu d’un objet.

Ces applications élémentaires mettent en œuvre les outils étudiés aux chapitres précédents et tout spécialement la détection d’un objet et la modification de ses valeurs.

Ces techniques assimilées, il sera possible d’aborder des scripts Dhtml plus évolués (Chapitre Scripts classiques).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz5Q44QiGjzIgLAA==-enidentnumber

315

Changer la position horizontale d’un objet

Le script tient en deux lignes. On détecte l’objet à bouger par getElementById et on modifie la valeur de sa position déterminée par la propriété de style left.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Position horizontale</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function move(idobjet,y) var objet = document.getElementById(idobjet); objet.style.left = y + ’px’; </script> <style type="text/css"> #monde position: absolute; top: 70px; left: 20px; </style> </head> <body> <div onmouseover="move(’monde’,200);" onmouseout="move(’monde’,20);" style="width: 100px;"> Survolez-moi ! </div> <div id="monde"> <img src="world.jpg"> </div> </body> </html>

L’objet à déplacer est l’image world.jpg qui est mise dans un élément boîte par la balise <div> ... </div>. Cette boîte possède un identifiant (id="monde") qui renvoie à des propriétés de style qui en déterminent la position, notamment sa position visàvis du bord gauche (left: 20px).

L’effet est mis en action par un onmouseover et un onmouseout qui appellent la fonction move(). Cette fonction comporte deux paramètres, l’objet concerné (’monde’) et la nouvelle valeur de left.

La fonction move() détecte l’objet fourni en paramètre (getElementById(idobjet)). L’objet détecté, le script lui fournit sa nouvelle valeur de left, transmise à la fonction dans le deuxième paramètre.

Par l’événement onmouseout, l’objet revient à sa position initiale.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzw5+gYCGjzIgLAA==-enidentnumber

316


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzw5+gYCGjzIgLAA==-enidentnumber

317

Changer la position verticale d’un objet

Le script ne comporte pas de grande modification. Ici, c’est la valeur de sa position déterminée par la propriété de style top qui sera modifiée.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Position verticale</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function move(idobjet,x) var objet = document.getElementById(idobjet); objet.style.top = x + ’px’; </script> <style type="text/css"> #monde position: absolute; top: 10px; left: 140px </style> </head> <body> <div onmouseover="move(’monde’,150);" onmouseout="move (’monde’,10);" style="width: 100px;"> Survolez-moi ! </div> <div id="monde"> <img src="world.jpg"> </div> </body> </html>

L’objet à déplacer est l’image world.jpg qui est mise dans une boîte par la balise <div> ... </div>. Cet élément boîte a un Id (id="monde") qui renvoie à des propriétés de style qui déterminent sa position, notamment sa position visàvis du bord supérieur (top: 10px).

L’effet est mis en œuvre par un onmouseover et un onmouseout qui appellent la fonction move(). Cette fonction possède deux paramètres, l’objet concerné (’monde’) et la nouvelle valeur de top.

La fonction move() détecte l’objet fourni en paramètre (getElementById(idobjet)). L’objet détecté, le script lui fournit sa nouvelle valeur de top, transmise à la fonction par le deuxième paramètre.

Par l’événement onmouseout, l’objet revient à sa position initiale.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQUQZfSGjzIgLAA==-enidentnumber

318


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzQUQZfSGjzIgLAA==-enidentnumber

319

Changer les positions horizontale et verticale d’un objet

En modifiant à la fois la position verticale (top) et horizontale (left), on obtiendra un déplacement en diagonale.

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Les deux positions</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function move(idobjet,x,y) var objet = document.getElementById(idobjet); objet.style.top = x + ’px’; objet.style.left = y + ’px’; </script> <style type="text/css"> #monde position: absolute; top: 40px; left: 20px </style> </head> <body> <div onmouseover="move(’monde’,150,200);" onmouseout="move (’monde’,40,20);" style="width: 100px;"> Survolez-moi ! </div> <div id="monde"> <img src="world.jpg"> </div> </body> </html>

L’objet à déplacer est toujours l’image world.jpg qui est mise dans une boîte par la balise <div> ... </div>. Cette boîte a un Id (id="monde") qui renvoie à des propriétés de style qui déterminent sa position visàvis du bord supérieur (top: 40px) et du bord gauche (left: 20px).

L’effet est mis en œuvre par un onmouseover et un onmouseout qui appellent la fonction move(). Cette fonction a ici trois paramètres, l’objet concerné, la nouvelle valeur de top et la nouvelle valeur de left.

La fonction move() détecte l’objet fourni en paramètre (document.getElementById(idobjet)).

Une fois l’objet détecté, on lui redonne les nouvelles valeurs de top et de left, fournies à la fonction dans les deuxième et troisième paramètres. Par l’événement onmouseout, l’objet revient à sa position initiale.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzxVIMkSGjzIgLAA==-enidentnumber

320


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzxVIMkSGjzIgLAA==-enidentnumber

321

Faire glisser un objet horizontalement

Dans les cas précédents, l’objet change de position brutalement. Il serait assurément plus plaisant si ce mouvement était progressif.

Exemple :

Outre le déplacement, il faut ajouter une fonction qui déplace progressivement l’objet de quelques pixels, jusqu’au point d’arrivée.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Déplacement h</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> var position=60; var vitesse=1; function move() var objet=document.getElementById(’texte’); position += vitesse; if (position >= 120 || position <= 20) vitesse= 0 - vitesse; objet.style.left=position; window.setTimeout("move();",25); </script> <style type="text/css"> #texte position: absolute; top: 40px; left: 90px; </style> </head> <body onload="move(’texte’)"> <h2 id="texte" > Texte qui bouge </h2> </body> </html>

L’objet à déplacer est le texte "Texte qui bouge". Celuici est contenu dans un élément boîte, ici une balise <h2> ... </h2>. Cette boîte a un identifiant (id="text") qui renvoie à des propriétés de style qui en déterminent la position initiale.

La fonction de mouvement move() est déclenchée dès le chargement de la page (onload).

Le script commence par la définition de la variable position (environ la moitié de la longueur de l’objet "texte") et de la variable vitesse (le nombre de pixels des déplacements intermédiaires).

La fonction move() détecte l’objet "texte" par son Id (getElementById("texte")). On ajoute à la variable position, les nombres de pixels définis dans la variable vitesse (position += vitesse).

Ensuite, un test conditionnel est effectué pour voir si le mouvement n’atteint pas les limites droite et gauche fixées (position >= 120 ou position <= 20). Dans ce cas, le mouvement est inversé. Sinon, la position left est modifiée par la propriété obj.style.left=position. Pour répéter le mouvement, on adjoint un minuterie qui réactive la fonction move() tous les 25 millièmes de secondes (setTimeout("move();",25)).

Sont paramétrables la variable position, la variable vitesse, les positions limites gauche et droite et la vitesse de réinitialisation en millièmes de secondes.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzK8i6niGjzIgLAA==-enidentnumber

322


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzK8i6niGjzIgLAA==-enidentnumber

323

Faire glisser un objet verticalement

Le script n’est pas fondamentalement différent. Il suffit d’adapter le changement de position horizontale (left) en position verticale (top).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Déplacement h</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> var position=60; var vitesse=1; function move() var objet=document.getElementById(’texte’); position += vitesse; if (position >= 140 || position <= 20) vitesse= 0 - vitesse; objet.style.left=position; window.setTimeout("move();",25); </script> <style type="text/css"> #texte position: absolute; top: 40px; left: 90px; </style> </head> <body onload="move(’texte’)"> <h2 id="texte" > Texte qui bouge </h2> </body> </html>

Le déplacement vertical est déterminé par objet.style.top=position.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzw71OryGjzIgLAA==-enidentnumber

324

Faire glisser un objet en diagonale

Pour obtenir un déplacement en diagonale, il faut modifier à la fois la position verticale (variable positionX et top) et la position horizontale (variable positionY et left).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Déplacement diagonal</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> var positionX=60; var positionY=60; var vitesse=1; function move() var objet=document.getElementById(’texte’); positionX += vitesse; positionY += vitesse; if (positionX >= 120 || positionX <= 20) vitesse= 0 - vitesse; objet.style.top=positionX; objet.style.left=positionY; window.setTimeout("move();",25); </script> <style type="text/css"> #texte position: absolute; top: 40px; left: 90px; </style> </head> <body onload="move(’texte’)"> <h2 id="texte" > Texte qui bouge </h2> </body> </html>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzkZD7ziGjzIgLAA==-enidentnumber

325

Faire apparaître et disparaître (visibility) un objet

Il est évident que l’on va utiliser les propriétés de style visibility: visible et visibility:hidden (chapitre Propriétés d’affichage à l’écran Curseur).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Visible ou caché</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function visibilite(idobjet,etat) var objet = document.getElementById(idobjet); objet.style.visibility = etat; </script> <style type="text/css"> #monde visibility: visible; </style> </head> <body onload="visibilite(’monde’,’visible’);"> <p> <form> <input type="button" onclick="visibilite(’monde’,’hidden’);" value="Cacher"> <input type="button" onclick="visibilite(’monde’,’visible’);" value="Montrer"> </form> </p> <div id="monde"> <img src="world.jpg"> </div> Le monde </body> </html>

Au chargement de la page, on lance la fonction visibilite(), à laquelle on a fourni comme paramètres l’objet et l’état de la visibilité. Le code est onload="visibilite(’monde’,’visible’);". L’image s’affiche alors.

Au clic sur le bouton Cacher, on transmet à la fonction visibilite(), l’objet et l’état inverse de la visibilité (hidden). L’objet est détecté de façon classique par getElementById(idobjet). Connaissant l’objet, on retient ses propriétés de style (objet.style). Parmi les styles de l’objet, on s’intéresse à la propriété visibility, à laquelle on donne la valeur fournie en argument de la fonction (soit objet.style.visibility = etat).

Et inversement pour le bouton Montrer.

On remarquera que lorsque l’image est invisible, son emplacement reste présent.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz658E3SGjzIgLAA==-enidentnumber

326


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz658E3SGjzIgLAA==-enidentnumber

327

Faire apparaître et disparaître (display) un objet

Outre la propriété de style visibility, on peut aussi utiliser la propriété display (chapitre Propriétés d’affichage à l’écran Visibilité).

Exemple :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>display</title> <script type="text/javascript"> function display(idobjet,etat) var objet = document.getElementById(idobjet); etat = objet.style.display; if (etat == ’none’) objet.style.display = ’block’; else objet.style.display = ’none’; </script> <style type="text/css"> #monde display: block; </style> </head> <body> <div id="monde"> <img src="world.jpg"> </div> Le monde <p> <form> <input type="button" onclick="display(’monde’,’none’);" value="Cacher"> <input type="button" onclick="display(’monde’,’block’);" value="Montrer"> </p> </body> </html>

Au clic sur le bouton, la fonction display() est activée. L’objet (monde) et l’état de l’affichage (none ou block) sont passés en paramètres.

La fonction display() charge dans la variable etat, l’état de l’affichage de l’objet (etat = objet.style.display). Si l’état correspond à l’absence d’affichage (etat == none), on affiche l’objet (objet.style.display = ’block’). Sinon, on fait disparaître l’objet (objet.style.display = ’none’).

On remarquera qu’avec la propriété display, l’emplacement de l’objet a également disparu.

Cet exemple est une belle démonstration de l’aspect dynamique du Html qui permet de changer sensiblement l’aspect de la page après que celleci ait été chargée par le navigateur.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzb5TQ6SGjzIgLAA==-enidentnumber

328


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzb5TQ6SGjzIgLAA==-enidentnumber

329

Changer le contenu d’un objet

La propriété innerHTML permet de modifier le contenu compris entre les balises d’ouverture et de fermeture d’un objet déterminé.

Exemple 1 :

Soit un texte et un lien. Au clic sur le lien, le texte sera modifié.

Nous utiliserons ici l’objet all qui est propre à Microsoft. L’objet all donne accès à tous les différents éléments et contenus d’un fichier HTML. On peut ainsi par son intermédiaire lire la plupart des propriétés et les modifier. Certaines méthodes de l’objet all permettent entre autres d’insérer ou de supprimer des repères HTML ou des mentions dans des repères HTML. Par ce moyen, l’accès dynamique à toutes les composantes d’un fichier est possible.

L’objet all ne fait pas partie du standard du langage JavaScript officiel. C’est un objet propre à Microsoft implémenté depuis Internet Explorer 4.0. Il ne fonctionne donc que sous Internet Explorer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Changer contenu</title> <script type="text/javascript"> var nouveau = "<b>nouveau texte en caractères gras<\/b> "; function modifier() document.all.texte.innerHTML = nouveau; </script> </head> <body> <p id="texte">texte, texte, texte, texte</p> <a href="javascript:modifier()">Modifier</a> </body> </html>

Au clic sur le lien, la fonction modifier() est appelée.

Dans le script, le texte de remplacement est noté sous la variable nouveau. La fonction modifier(), accède aux éléments de la page (document.all) et donc au texte de celleci (document.all.texte). La méthode innerHtml permet de modifier le texte en le remplaçant par le texte stocké dans la variable nouveau.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzR7GE9iGjzIgLAA==-enidentnumber

330

Exemple 2 :

Soit un formulaire constitué d’une zone de texte et d’un bouton OK.

Au clic sur le bouton OK, le texte encodé s’affichera sur la page. Nous revenons à la façon maintenant habituelle de procéder (getElementById).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Changer contenu</title> <script type="text/javascript"> function ecrire() var utilisateur = document.getElementById(’nom’).value; var objet = document.getElementById(’texte’); objet.innerHTML = ’<h2>Bonjour ’+ utilisateur + ’ !</h2>’ </script> <style type="text/css"> h2 border: 1px solid black; background-color:#99ccff; text-align: center; </style> </head> <body> <input type="text" id="nom" size="30"> <input type="submit" name="enter" value="OK" onclick="ecrire()"> <div id="texte"> Entrez votre nom et faites "OK". </div> </body> </html>

Au clic sur le bouton OK, l’exécution de la fonction ecrire() est lancée.



331

Cette fonction retrouve, dans la variable utilisateur, le contenu de la zone de texte (getElementById(’nom’).value). Elle repère dans la variable objet l’endroit où s’affichera le nouveau contenu (getElementById(’texte’)). On écrit dans cette zone (objet.innerHTML), la chaîne de caractères fournie après le signe égal.



332

Introduction

Nous avons vu aux chapitres précédents que le Dhtml permettait d’accéder à un attribut de style spécifique et de le modifier. Ainsi par exemple, un élément visible peut devenir invisible.

Dans ce chapitre, nous allons voir que l’on peut modifier dynamiquement toutes les propriétés de style d’un élément ou d’une page.

Le concept du Dhtml décrit comme étant du JavaScript appliqué aux feuilles de style, prend dans ce chapitre toute sa dimension et son actualité.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzReh4BiKjzIgLAA==-enidentnumber

333

Équivalences JavaScript et propriétés CSS

Un problème peut surgir quand on cherche à combiner des appels de références JavaScript à des propriétés CSS, par exemple dans le code suivant :

document.getElementById("boite").style.borderColor = "#ff0000"; document.getElementById("boite").style.backgroundColor = "#ffff00"; document.getElementById("boite").style.color = "#000000";

Ce problème tient au fait que les références JavaScript et les propriétés CSS ne sont pas forcément nommées de la même manière, ce qui peut amener à une confusion gênante lors du développement d’un script Dhtml. Voici donc un tableau exhaustif, listant les propriétés et les références dont le nom diverge.

Tableau des équivalences en références JavaScript et propriétés CSS :

JavaScript CSS

backgroundAttachment,

backgroundColor,

backgroundImage

backgroundPosition

backgroundRepeat

backgroundattachment

backgroundcolor

backgroundimage

backgroundposition

backgroundrepeat

borderBottom

borderBottomColor

borderBottomStyle

borderBottomWidth

borderColor

borderLeft

borderLeftColor

borderLeftStyle

borderLeftWidth

borderRight

borderRightColor

borderRightStyle

borderRightWidth

borderStyle

borderTop

borderbottom

borderbottomcolor

borderbottomstyle

borderbottomwidth

bordercolor

borderleft

borderleftcolor

borderleftstyle

borderleftwidth

borderright

borderrightcolor

borderrightstyle

borderrightwidth

borderstyle

bordertop

borderTopColor

borderTopStyle

borderTopWidth

borderWidth

bordertopcolor

bordertopstyle

bordertopwidth

borderwidth

fontFamily

fontSize

fontWeight

fontVariant

fontfamily

fontsize

fontweight

fontvariant

letterSpacing letterspacing


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzHcHxFyKjzIgLAA==-enidentnumber

334

lineHeight lineheight

listStyle

listStyleImage

listStylePosition

listStyleType

liststyle

liststyleimage

liststyleposition

liststyletype

marginBottom

marginLeft

marginRight

marginTop

marginbottom

marginleft

marginright

margintop

paddingBottom

paddingLeft

paddingRight

paddingTop

pageBreakAfter

pageBreakBefore

paddingbottom

paddingleft

paddingright

paddingtop

pagebreakafter

pagebreakbefore

styleFloat float

textDecoration

textDecorationLineThrough

textDecorationNone

textDecorationUnderline

textDecorationOverline

textIndent

textTransform

textdecoration

Textdecoration: linethrough

textdecoration: none

textdecoration: underline

textdecoration: overline

textindent

texttransform

verticalAlign verticalalign

zIndex zindex


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzHcHxFyKjzIgLAA==-enidentnumber

335

Rechercher une propriété de style (IE6+)

La difficulté provient du fait que Internet Explorer 6 utilise la propriété currentStyle tandis que FireFox, ainsi que Netscape et Mozilla, utilisent getPropertyValue.

Nous limiterons les scripts et leurs explications à Internet Explorer 6 pour ne pas surcharger ce chapitre.

Exemple :

Dans cet exemple, on recherche la taille de la police d’un élément (voir #objet1).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Quel style ?</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function display(idobjet,IEstyle) var objet = document.getElementById(idobjet); objet_size = objet.currentStyle[IEstyle] alert(objet_size) </script> <style type="text/css"> #objet1 position: relative; font-size: 24px; width: 100px </style> </head> <body> <div id="objet1">Test</div> <a href="javascript:display(’objet1’,’fontSize’)">Cliquez moi</a> </body> </html>

Au clic sur le lien, la fonction display() est appelée. Elle comporte deux arguments, l’objet (objet1) et la propriété su style (fontSize).

Dans cette fonction, on accède à l’objet concerné par getElementById. On y repère le style souhaité au moyen de currentStyle.

La valeur de la propriété du style est affichée dans une boîte d’alerte.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzy1ZFKCKjzIgLAA==-enidentnumber

336


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzy1ZFKCKjzIgLAA==-enidentnumber

337

Changer une propriété de style (IE6+)

Une fois l’élément détecté, le JavaScript permet de modifier une propriété de style.

Exemple :

Le but du script est d’afficher le texte avec une police plus grande pour les utilisateurs qui ne peuvent lire le texte de départ (affiché avec une très petite police).

Soit une page avec deux boutons. Le texte visible est affiché par une feuille de style (id="objet1") relatif au sélecteur <div> ... </div>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Changer de style</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function addstyle(idstyle,nom_style,valeur) var objet = document.getElementById(idstyle); objet.style[nom_style] = valeur; </script> <style type="text/css"> #objet1 position: relative; font-size: 10px; text-align: center; width: 290px </style> </head> <body> <form> <input type="button" onclick="addstyle(’objet1’,’fontSize’,’24px’)" value="Mauvaise vue"> <input type="button" onclick="addstyle(’objet1’,’fontSize’,’10px’)" value="Bonne vue"> </form> <div id="objet1"> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx </div> </body> </html>

Le clic sur le bouton Mauvaise vue (onclick), appelle la fonction addstyle() qui comporte trois arguments : l’objet (objet1), le style (fontSize) et sa nouvelle valeur (24px).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzq4GINSKjzIgLAA==-enidentnumber

338

La fonction addstyle() repère l’objet par getElementById(idstyle) et affecte à la propriété taille de caractères (fontSize), la nouvelle valeur qui a été transmise en paramètre. Ceci se fait tout simplement par l’instruction objet.style[nom_style] = valeur.

Un clic sur le bouton Bonne vue remet la taille de la police à la situation initiale (10px) en procédant de la même façon.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzq4GINSKjzIgLAA==-enidentnumber

339

Ajouter une propriété de style (IE6+)

Une particularité d’Internet Explorer est de pouvoir ajouter dynamiquement une propriété de style à un style existant.

Exemple :

Soit la situation de départ.

En cliquant sur le lien, le script changera l’arrièreplan de la page. Autrement dit, le script ajoutera la propriété de style background-color à la déclaration de style existante (<style id="monstyle">).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Changer de style 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function addstyle(selecteur,definition) document.styleSheets.monstyle.addRule(selecteur,definition) </script> <style type="text/css" id="monstyle"> h2 font-size: 24pt; </style> </head> <body> <h2> <a onclick="addstyle(’body’,’background-color:#99ccff’)" href="#"> Changer d’arrière-plan </a> </h2> <p> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx </p> </body> </html>

Le clic sur le lien appelle la fonction addstyle() qui comporte comme paramètres le sélecteur body et la définition background-color:#99ccff, qui sont les éléments de style à ajouter au style existant (id="monstyle").

L’ajout se fera par addRule(selecteur,definition) sur l’élément dont le chemin d’accès est


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzj2JERCKjzIgLAA==-enidentnumber

340

document.styleSheets.monstyle.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzj2JERCKjzIgLAA==-enidentnumber

341

Changer de déclaration de style (IE6+)

Toujours plus fort. Il est possible de changer complètement de style en passant d’une déclaration de style à une autre.

Les différents styles sont ici déterminés par class.

Exemple :

La situation de départ : soit une page avec deux boutons et un texte affiché avec la feuille de style définie dans la classe normal.

Le but du script est d’appeler une classe différente en cliquant sur le bouton Plus grand et de même pour le bouton Plus petit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Quel style ?</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function setclass(idobjet,newclass) var objet = document.getElementById(idobjet); objet.className = newclass; </script> <style type="text/css"> #objet1 position: relative .petit position: relative; text-align: center; font-size: 8px; width: 290px .grand position: relative; font: 24px cursive; text-align: center; width: 290px .normal position: relative text-align: center; font-style: italic; font-size: 16px; width: 290px </style> </head>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz5xaRUSKjzIgLAA==-enidentnumber

342

<body> <form> <input type="button" onclick="setclass(’objet1’,’grand’) " value="Plus grand"> <input type="button" onclick="setclass(’objet1’,’petit’) " value="Plus petit"> </form> <div id="objet1" class="normal"> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx </div> </body> </html>

Le fichier comporte trois classes :

la classe normal pour le style de départ lors de l’affichage de la page.

la classe grand pour le style correspondant au bouton Plus grand.

la classe petit pour le style correspondant au bouton Plus petit.

Au clic sur le bouton Plus grand, la fonction setclass() est activée. On lui transmet comme paramètre l’objet concerné (objet1) et la nouvelle classe à appliquer (grand).

La fonction setclass(), après avoir identifié l’objet (getElementById(idobjet)), applique par la méthode className, la nouvelle classe passée en paramètre (grand). L’instruction complète est objet.className = newclass.

La capture d’écran correspondant à cette étape est :

Au clic sur le bouton Plus petit, la fonction setclass() est activée. On lui transmet comme paramètres l’objet concerné (objet1) et l’autre classe à appliquer (petit).

La fonction setclass(), après avoir identifié l’objet (getElementById(idobjet)), applique par la méthode className, la nouvelle classe passée en paramètre (petit).

La capture d’écran correspondant à cette étape est :



343



344

Activer ou désactiver un style (IE6+)

Dernière possibilité. Il est possible de passer d’une définition de style définie par la balise <style> ... </style> à une autre déclaration, comprise elle aussi dans une balise <style> ... </style>.

On attribue à chaque balise <style>, un Id différent.

Exemple :

Le clic sur le bouton Changer active une déclaration de style différente (soit une balise <script> différente).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Activer style</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function activerstyle(idobjet) objet = document.getElementById(idobjet) if (objet.disabled==true) objet.disabled=false; else objet.disabled=true; </script> <style id="style2"> .dhtmlstyle font: italic 28pt cursive; </style> <style id="style1"> .dhtmlstyle font: bold 14pt monospace; letter-spacing: 2pt; </style> </head> <body onload="activerstyle(’style1’);"> <span class="dhtmlstyle">CSS dynamique !</span> <form> <input type="button" onclick="activerstyle(’style2’);activerstyle(’style1’);" Value="Changer"> </form> </body> </html>

On remarquera pour commencer les deux balises <style> ... </style> définies par un id différent :


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz0aofYCKjzIgLAA==-enidentnumber

345

<style id="style2">

... </style> et <style id="style1">

... </style>

Au chargement de la page (onload de la balise <body>), la fonction activerstyle() est mise en œuvre. On lui passe comme paramètre un style, soit ’style1’.

Au clic sur le bouton Changer (onclick de la balise <input>), on transmet à activerstyle(), à la fois l’objet style1 et l’objet style2. Le test conditionnel en début de script désactive le style en place et active l’autre style. La page devient alors :


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz0aofYCKjzIgLAA==-enidentnumber

346

Exemples

1. Changer une balise <iframe>

Le script changera dynamiquement l’adresse du fichier contenu dans la balise <iframe>.

La balise <iframe> contient au départ le fichier 1.htm.

Après avoir cliqué sur le bouton, elle contiendra le fichier 2.htm.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Iframe</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function change(idobjet) var objet=document.getElementById(idobjet); objet.src="2.htm"; </script> </head> <body> <iframe id="myiframe" src="1.htm" width="200" height="100"></iframe> <form> <input type="button" onclick=change(’myiframe’) value="Changer"> </form> </body> </html>

Au clic sur le bouton, la fonction change() est activée. Comme paramètre, il lui a été transmis l’objet ’myiframe’. Après avoir repéré l’élément par son identifiant, le script modifie l’attribut src pour lui fournir la nouvelle adresse (objet.src="2.htm").


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzV/qnbSKjzIgLAA==-enidentnumber

347

2. Appliquer le filtre glow

L’étude des filtres graphiques propres à Internet Explorer a été abordée au chapitre Feuilles de style d’Internet Explorer Les filtres graphiques. On y retrouvera les spécifications du filtre glow()dans la section Autres filtres.

Pour rappel, ces filtres ne fonctionnent que sous Internet Explorer.

Au survol d’un élément, ici le texte compris entre une balise <h1>, le filtre glow() sera appliqué à celuici.

<html> <head> <title>Glow</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function back() document.getElementById(’myHeader’).style.filter=false; function glow() document.getElementById(’myHeader’).style.filter="glow(strength=4)"; </script> <style> h1 width:310; </style> </head> <body> <h1>Filtre graphique Glow</h1> <h1 id="myHeader" onmouseover="glow()" onmouseout="back()"> Filtre graphique Glow </h1> </body> </html>

Au survol du texte de la seconde balise <h1 id="myHeader" > (onmouseover), la fonction glow() est appelée. Cette fonction applique au style de l’élément repéré par son identifiant, le filtre glow dont on a déterminé l’intensité à la valeur 4. La ligne de code complète correspondante est :

document.getElementById(’myHeader’).style.filter="glow(strength=4)";

Lorsque la souris quitte l’élément (onmouseout), la fonction back() désactive l’effet du filtre.



348

3. Changer le filtre opacity

La caractéristique opacity appartient au filtre alpha() des filtres graphiques d’Internet Explorer (voir chapitre Feuilles de style d’Internet Explorer Filter:alpha()).

Pour rappel, ces filtres ne fonctionnent que sous Internet Explorer.

Au départ, l’image world.jpg apparaît en filigrane sous l’effet du filtre. À son survol par la souris, elle retrouvera toutes ses couleurs.

<html> <head> <title>Opacity</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function opaq() document.getElementById(’myImage’).filters.alpha.opacity=10; function makeclean() document.getElementById(’myImage’).filters.alpha.opacity=100; </script> <style> img filter:alpha(opacity=10) </style> </head> <body> <p>Survolez l’image</p> <img id="myImage" src="world.jpg" onmouseover="makeclean()" onmouseout="opaq()" width="70" height="70"> </body> </html>

Au départ, l’image apparaît en filigrane car on lui a appliqué le style img filter: alpha(opacity = 10).

Au survol de l’image par la souris, la fonction makeclean() lui rendra toute sa couleur en modifiant la valeur du filtre à 100 (soit absence de l’effet opacity). Pour ce faire, après avoir repéré l’image par son identifiant, la valeur du filtre est mise à 100. Le code de la ligne est :

document.getElementById(’myImage’).filters.alpha.opacity=100;

Lorsque le curseur quitte l’image, le fonction opaq() redonne les valeurs initiales au filtre.

document.getElementById(’myImage’).filters.alpha.opacity=10;



349

4. Ajouter des lignes à un tableau

Soit au départ un tableau de trois lignes et deux colonnes. Le script permettra de faire apparaître dynamiquement une ligne supplémentaire (voir capture d’écran à la fin de l’exemple).

Le script s’inspire de la section Changer de déclaration de style (IE6+) du présent chapitre. Au départ, le tableau est affiché selon la classe normal.

Au clic sur le bouton + de données, c’est la classe plus qui sera affichée.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Tableau 1</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function setclass(idobjet,newclass)



350

var objet = document.getElementById(idobjet); objet.className = newclass; </script> <style type="text/css"> #objet1 position: relative; #table border: 1px solid black; text-align:center; .moins position: relative; display:none; .plus position: relative; display:block; .normal position: relative; display:none; </style> </head> <body> <table width="260"> <tr> <td id="table">Element 1</td> <td id="table">Element 2</td> </tr> <tr> <td id="table">Element 3</td> <td id="table">Element 4</td> </tr> <tr> <td id="table">Element 5</td> <td id="table">Element 6</td> </tr> <tr id="objet1" class="normal"> <td id="table">Element 7</td> <td id="table">Element 8</td> </tr> </table> <div style="text-align:center;width:260px;">Tableau de données <form> <input type="button" onclick="setclass(’objet1’,’plus’)" value="+ de données"> <input type="button" onclick="setclass(’objet1’,’moins’)" value="- de données"> </form> </div> </body> </html>

Au départ, la classe normal cache la quatrième ligne du tableau (.normal display:none;).

Au clic sur le bouton + de données, la fonction setclass() attribue à la quatrième ligne (tr id="objet1"), la classe plus qui a été transmise en argument à la fonction par objet.className = newclass. La classe plus affiche la quatrième ligne (.plus display: block).



351

Au clic sur le bouton de données, on revient à la situation initiale par la classe moins.

5. Colorier les lignes d’un tableau

Soit au départ un tableau conventionnel. Le script permettra de colorier les lignes impaires du tableau au survol de celuici par la souris (voir capture d’écran à la fin de l’exemple).

Le script s’inspire de la section Activer ou désactiver un style (IE6+) du présent chapitre. Au départ, le tableau est affiché selon le style de la balise <style id="style2">. Le survol de la souris entraînera l’affichage selon la balise <style id="style1">.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Tableau 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function activerstyle (idobjet) objet = document.getElementById(idobjet) if (objet.disabled==true) objet.disabled=false; else objet.disabled=true;



352

</script> <style id="style1"> .table font: italic 12pt; background-color:#9cf; .table1 font: italic 12pt; background-color:white; </style> <style id="style2"> .table font: italic 12pt; background-color:white; .table1 font: italic 12pt; background-color:white; </style> </head> <body onload="activerstyle(’style1’)"> <table width="260" border="1" cellspacing="0" style="text-align:center" onmouseover="activerstyle(’style2’);activerstyle(’style1’);" onmouseout="activerstyle(’style1’);activerstyle(’style2’);"> <tr> <td class="table">Element 1</td> <td class="table">Element 2</td> </tr> <tr> <td class="table1">Element 3</td> <td class="table1">Element 4</td> </tr> <tr> <td class="table">Element 5</td> <td class="table">Element 6</td> </tr> <tr> <td class="table1">Element 7</td> <td class="table1">Element 8</td> </tr> <tr> <td class="table">Element 9</td> <td class="table">Element 10</td> </tr> </table> </body> </html>

Au chargement de la page (onload de la balise y), la fonction activerstyle() est mise en œuvre. On lui passe comme paramètre un style, soit ’style1’.

Au survol du tableau par la souris (onmouseover), on transmet à activerstyle(), à la fois l’objet style1 et l’objet style2. Le test conditionnel en début de script, désactive le style en place et active l’autre style.



353

Idem lorsque le curseur quitte le tableau (onmouseout).



354

Introduction

Le Web foisonne de scripts Dhtml prêts à l’emploi qu’il suffit d’inclure dans le code de la page Html. Pour cela, interrogez votre moteur de recherche préféré. Il peut être cependant intéressant d’en comprendre l’écriture et le fonctionnement pour éventuellement les adapter.

Nous passerons en revue dans ce chapitre quelques scripts classiques dont le code a été dépouillé pour en faciliter l’explication.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz2x2leyKjzIgLAA==-enidentnumber

355

Déplacement d’un objet (drag and drop)

Ce script permet, après avoir cliqué sur un objet, de le déplacer et de le déposer quelque part sur la page. Cet effet est plus connu sous le vocable anglosaxon de "drag and drop".

Soit au départ, une image et un texte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag and drop</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> var dragok=false; var cX,cY,cZ; function move() if (event.button==1&&dragok) cZ.style.pixelLeft=pos1+event.clientX-cX; cZ.style.pixelTop=pos2+event.clientY-cY; return false function clic() idobjet=event.srcElement.id; if (document.getElementById(idobjet)) dragok=true; cZ=event.srcElement; pos1=cZ.style.pixelLeft; pos2=cZ.style.pixelTop; cX=event.clientX; cY=event.clientY; document.onmousemove=move function drop() var dragok=false; document.onmousedown=clic; document.onmouseup=drop; </script> <style type="text/css"> #drag position:relative; cursor:hand


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQznZqZiCKjzIgLAA==-enidentnumber

356

</style> </head> <body> Cliquez et déplacez. <p> <img src="world.jpg" id="drag"> </p> <p> <h1 id="drag">Texte</h1> </p> </body> </html>

Le script comporte trois fonctions : le clic sur l’objet (clic), le mouvement de l’objet (move) et le dépôt de celuici (drop).

La fonction clic() repère si l’objet a été cliqué (event.srcElement.id). Elle enregistre les coordonnées du clic de la souris de deux façons. La première enregistre (event.srcElement) les coordonnées horizontales (pos1=cZ.style.pixelLeft) et verticales (pos2=cZ.style.pixelTop) du clic sur l’objet au pixel près. Elle enregistre ensuite la position du clic par rapport au bord gauche et supérieur de la fenêtre (cX=event.clientX et cY=event.clientY). Cette information sera utile pour calculer le déplacement de l’objet. Elle appelle enfin la fonction move().

La fonction move() affiche le déplacement de l’objet. Celuici est calculé en fonction de l’emplacement initial (pos1 ou pos2) auquel on ajoute le déplacement total de l’objet par rapport aux bords gauche et supérieur (event.clientX ou event.clientY) moins la position initiale par rapport à ces bords (cX ou cY).

La fonction drop() appelée au relâchement du curseur (document.onmouseup) signale que l’objet n’est plus concerné par le déplacement.

Fonctionne avec Internet Explorer seulement.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQznZqZiCKjzIgLAA==-enidentnumber

357

Une image qui suit le curseur de la souris

Pas forcément d’une utilité évidente, le script où le curseur est suivi par des images ou des lettres est néanmoins un classique du Dhtml. En voici une version élémentaire destinée à en comprendre le fonctionnement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Suivre la souris</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function move(e) objet=document.getElementById("mouse"); xpointer=event.x; ypointer=event.y; objet.style.left=xpointer + 10; objet.style.top=ypointer + 10; function go() document.onmousemove=move; </script> <style type="text/css"> #mouse position:absolute; left:-50; top:-50; </style> </head> <body onload="go();"> <h1>Animation Dhtml</h1> <div ID="mouse"> <img src="mouse.gif" width="21" height="21" alt="" border="0"> </div> </body> </html>

La fonction go() activée au chargement de la page initialise l’événement onmousemove et appelle la fonction move().

Celleci note dans des variables (xpointer et ypointer), la position verticale et horizontale (event.x et event.y) du curseur. L’image préalablement identifiée par getElementById, est affichée (objet.style.left et top) à la position du curseur augmentée de quelques pixels (ici 10) pour qu’elle ne vienne se positionner au même emplacement que celuici (xpointer et ypointer + 10).



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz96miliKjzIgLAA==-enidentnumber

358

Du texte qui suit le curseur de la souris

Variante du script précédent avec cette fois un texte défilant qui suit le curseur.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Suivre la souris 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <script type="text/javascript"> var message=’Votre message ici!’; var initialvisible=0; if (document.all) document.write(’<marquee id="textedefilant" style="position:absolute; width:120px; border:1px solid black; font-size:14px; background-color: white; visibility:hidden;"> ’+message+’ </marquee>’); function followcursor() if (initialvisible==0) textedefilant.style.visibility="visible"; initialvisible=1 textedefilant.style.left=document.body.scrollLeft+event.clientX+10; textedefilant.style.top=document.body.scrollTop+event.clientY+10; function out() textedefilant.style.visibility="hidden"; setTimeout("out()",0); document.onmousemove=followcursor; document.ondblclick=out; </script> </body> </html>

L’effet défilant est assuré, de façon sommaire, par la balise <marquee> ... </marquee>. Celleci est identifiée (id="textedefilant") et est agrémentée par une déclaration de style. On notera que la balise <marquee> est cachée (visibility:hidden) au départ du script.

La fonction followcursor() appelée au mouvement de la souris (document.onmousemove), fait apparaître le texte défilant de la balise <marquee> (textedefilant.style.visibility="visible") et positionne l’objet textedefilant à l’endroit du curseur avec un petit report de 10 pixels (textedefilant.style.left ou top = document.body.scrollLeft+event.clientX ou Y +10).

La fonction out() activée au double clic (document.ondblclick) cache l’objet texte défilant (textedefilant.style.visibility="hidden").

Fonctionne avec Internet Explorer seulement, bien que la balise <marquee> soit reconnue par Firefox.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzsUc5pCKjzIgLAA==-enidentnumber

359

Une infobulle explicative

Bel effet Dhtml qui peut se révéler très informatif.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Infobulle</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> <div id="infobulle" style="position: absolute; z-index: 2; background-color: #9cf;"></div> <script type="text/javascript"> position_x = 3; position_y = -25; var objet = document.getElementById(’infobulle’).style; document.onmousemove = souris; function pop(message) document.getElementById("infobulle").innerHTML = message; objet.visibility = "visible"; function souris(e) var x = event.x + document.body.scrollLeft; var y = event.y + document.body.scrollTop; objet.left = x + position_x; objet.top = y + position_y; function out() document.getElementById("infobulle").innerHTML = ’’; objet.visibility = "hidden"; </script> <div> <span onmouseover="pop(’Explications pour ce lien’);" onMouseout="out();">Sur un texte.</span> </div> <br> <div>Sur une image.<br> <span onmouseover="pop(’Le monde est à vous’);" onmouseout="out();"> <img src="world.jpg" border="0"> </span> </div> </body> </html>

Au début du script, l’infobulle est positionnée par rapport au curseur de la souris (position_x et position_y). L’objet est repéré (getElementById) et la fonction souris() est appelée au moindre mouvement du curseur (onmousemove).

La fonction souris() enregistre les informations sur la position du curseur

var x = event.x + document.body.scrollLeft; var y = event.y + document.body.scrollTop; objet.left = x + position_x; objet.top = y + position_y;

Au survol du texte ou de l’image, la fonction pop() est mise en action. Le texte de l’infobulle lui est fourni comme paramètre. Son rôle est d’afficher l’infobulle (innerHTML = message et objet.visibility = "visible").

Lorsque le curseur quitte l’image ou le texte (onmouseout), la fonction out() n’affiche plus rien (innerHTML = ’’) et masque l’infobulle (objet.visibility = "hidden").


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz1zdlsyKjzIgLAA==-enidentnumber

360



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz1zdlsyKjzIgLAA==-enidentnumber

361

Une infobulle dynamique

Bien étrange infobulle dont la zone d’affichage apparaît de façon dynamique, avant que le texte de celleci ne soit présent.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Infobulle dynamique</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #infobulle border: #000080 2px solid; padding: 2px; background: #9cf; position: absolute; left: 20px; top: 35px; visibility: hidden; </style> <script type="text/javascript"> var text=’<center>Votre texte ici !</center>’; var x=1; var y=1; function go() infobulle.style.visibility=’visible’; draw(); function draw() infobulle.style.width=x++; infobulle.style.height=y+=0.25; if (parseInt(infobulle.style.width)>270) infobulle.innerHTML=text; else setTimeout("draw()", 10); </script> </head> <body onload=’go()’> <div id="infobulle"></div> </body> </html>

Une balise <div> ... </div> identifie l’infobulle (id="infobulle") et ses attributs de style sont déterminés (#infobulle...). Notons que celleci est positionnée de façon absolue (position: absolute).

La fonction go() est lancée au chargement de la page (onload). Son rôle se limite à rendre l’infobulle visible (infobulle.style.visibility=’visible’) et à appeler la fonction draw().

La fonction draw() dessine progressivement la zone de l’infobulle en augmentant la largeur de 1 (infobulle.style.width=x++) et la hauteur de 0.25 (infobulle. style.height=y+=0.25).

Un compteur setTimeout permet de répéter l’action jusqu’à ce que la largeur atteigne, ici, 270 pixels. À ce momentlà seulement, le texte de l’infobulle sera affiché (infobulle.innerHTML=text).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDRV+wiKjzIgLAA==-enidentnumber

362



enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzDRV+wiKjzIgLAA==-enidentnumber

363

Du texte défilant dans une zone de texte

Un script simple pour afficher un texte défilant dans une zone de texte. On n’oubliera pas que cette zone de texte peut être retravaillée par une feuille de style.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Texte défilant 1</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #texte border: none; </style> <script type="text/javascript"> var contenu = "Le Dhtml, c’est super chouette ! "; var partiel = ""; i=1; function scrollit() i++; if (i==contenu.length) null else if (i > contenu.length) i = 1; partiel = contenu.substring(0,i); document.form.zonetexte.value = partiel; setTimeout("scrollit()",100); </script> </head> <body onload="scrollit()"> <form name="form"> <input type="text" id="texte" name="zonetexte" size="30" value=""> </form> </body> </html>

Le texte défilant est placé dans la variable contenu. L’espace à la fin de la chaîne de caractères a son importance.

La fonction scrollit() est activée dès le chargement de la page. Elle permet de faire défiler le texte, caractère par caractère, et de l’afficher dans la zone de texte.

Le défilement est assuré jusqu’à ce que tous les caractères (variable i) aient été traités (i==contenu.length). À chaque passage, la variable i est augmentée d’une unité (i++). L’effet pas à pas est assuré par le fait que l’on affiche à chaque fois une chaîne partielle du texte de départ par substring(0,i) comme vu au chapitre L’objet String Manipulation des caractères ToLowerCase(). Cette chaîne partielle est imprimée dans la zone de texte dont on indique le chemin de façon conventionnelle (document.form.zonetexte.value = partiel).


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzz+/U0SKjzIgLAA==-enidentnumber

364

Remarquons le petit bug d’Internet Explorer 6 qui, malgré border:none, affiche quand même une petite bordure.

Ce script, plus JavaScript que Dhtml, est compatible avec Internet Explorer et Firefox.

Proche du script précédent, ce script affiche le texte déroulant dans une balise <div>. La relation à l’objet s’effectue ici par un getElementById.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Texte défilant 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> var contenu = "Le Dhtml, c’est super chouette ! "; var partiel = ""; i=1; function scrollit() i++; if(i == contenu.length) null else if(i > contenu.length) i = 1; partiel = contenu.substring(0,i); document.getElementById("bloc").innerHTML = partiel; setTimeout("scrollit()",100); </script> <style type="text/css"> #bloc width:200px; height:10px; background-color:#9cf; color:black; border:solid 1px black; font-family:Arial; font-size:12px; padding:2px; </style> </head> <body onload="scrollit()"> <div id=bloc></div> </body> </html>

Pour le détail des explications, on se reportera au script précédent.

Variante



365

En bref, l’objet est détecté par document.getElementById("bloc") et l’inscription de la chaîne est effectuée par innerHtml, appliqué à l’objet.

Compatible avec Internet Explorer et Firefox.



366

Du texte déroulant de façon verticale

Des messages apparaissent, tour à tour, dans un élément boîte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Texte défilant vertical</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #bloc border: 1px solid black; font-size: 14px; background-color: #9cf; width: 150px; color: black; font-family: Arial; height: 20px; text-align:center; </style> <body> <div id="bloc"></div> <script type="text/javascript"> texte = new Array; texte[0] = " Message 1 !"; texte[1] = " Message 2 !"; texte[2] = " Message 3 !"; texte[3] = " Message 4 !"; texteactuel = 0; function changemessage() document.getElementById("bloc").innerHTML = texte[texteactuel]; texteactuel++; if(texteactuel >= texte.length) texteactuel = 0; if(document.getElementById) setInterval("changemessage()",2000) </script> </head> </body> </html>

L’élément bloc est créé, dans le body, par une balise <div> qui a comme attribut l’identifiant id="bloc". Des propriétés de style lui sont associées (#bloc...).

Le script commence par la définition d’un tableau (new Array) qui contiendra les différents messages (texte[x]) (si nécessaire, reportezvous au chapitre L’objet Array (tableau)). On définit quel message s’affichera en premier (texteactuel = 0).

La fonction changer(), qui affichera les textes, est créée.

Le code document.getElementById("bloc").innerHTML met à jour l’élément boîte en affichant le contenu de texte [texteactuel]. La variable texteactuel est incrémentée d’une unité en vue de l’affichage du texte suivant. On vérifie que texteactuel n’est pas supérieur au nombre total de messages enregistrés (texteactuel >= texte.length). Si c’est le cas, on recommence en réinitialisant texteactuel à 0.

Un compteur setTimeout active la fonction changer() toutes les deux secondes.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzm9UU4CKjzIgLAA==-enidentnumber

367

Compatible avec Internet Explorer et Firefox.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzm9UU4CKjzIgLAA==-enidentnumber

368

Une nouvelle fenêtre adaptée à la résolution d’écran de votre visiteur

Ouvrir une nouvelle fenêtre qui sera toujours adaptée à la résolution d’écran du visiteur, quelle qu’elle soit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>window 1</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function fenetre() var destination="page.htm"; ewwin=window.open("","","scrollbars"); newwin.moveTo(0,0); newwin.resizeTo(screen.width,screen.height); newwin.location=destination; </script> </head> <body> <form> <input type="button" onClick="fenetre()" value="Ouvrir"> </form> </body> </html>

L’adresse de la page à afficher (page.htm) dans la nouvelle fenêtre est notée dans la variable destination.

La variable newwin enregistre les caractéristiques de la nouvelle fenêtre. Elle est d’abord mise à 0 (newwin.moveTo(0,0)). Ensuite, le script la redimensionne (newwin.resizeTo) à la dimension de la résolution d’écran du visiteur comme vu au chapitre Quelques autres objets L’objet screen (screen.width et screen.height).

L’adresse de la page qui sera affichée par le navigateur dans la nouvelle fenêtre est passée à celuici (newwin.location=destination).

Ce script fonctionne avec Internet Explorer et Firefox.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz75TK/SKjzIgLAA==-enidentnumber

369

Une fenêtre popup toujours centrée

Ce script permet d’afficher une fenêtre popup toujours au centre de l’écran.

Soit une fenêtre popup de 200x200.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>window 2</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function centrer() hauteur = screen.availHeight; largeur = screen.availWidth; positionv=(hauteur - 200)/2; positionh= (largeur -200)/2; window.open("page.htm", "test", "toolbar=0,location=0,directories=0,status=0, scrollbars=0,resizable=0,menubar=0,top="+positionv+",left="+positionh+" ,width=200 ,height=200"); </script> </head> <body> <form> <input type=button value="Test pop-up" onclick="centrer()"> </form> </body> </html>

On enregistre dans les variables hauteur et largeur, la dimension de la fenêtre (screen.availHeight et screen.availWidth).

La variable positionv détermine la position verticale de la fenêtre. Elle se calcule en prenant la moitié de la hauteur totale diminuée de la hauteur de la fenêtre popup ((hauteur - 200)/2). La variable positionh détermine la position horizontale de la fenêtre. Elle se calcule en prenant la moitié de la largeur totale diminuée de la largeur de la fenêtre popup ((largeur - 200)/2).

Le code window.open(’page.htm’,’test’,... doit absolument être écrit sur la même ligne.

Ce script est compatible avec Internet Explorer et Firefox.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz3YWMGCOjzIgLAA==-enidentnumber

370

Affichage d’une page après un certain délai

Il est parfois nécessaire de retarder l’affichage d’une page (préchargement d’images par exemple). Ce script permet d’afficher un message d’attente ou une page provisoire pour faire patienter le visiteur.

Avec la propriété de style display et un compteur setTimeout, le tour est joué.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Délai</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function changer() setTimeout("document.getElementById(’temp’).style.display=’none’",3000); setTimeout("document.getElementById(’delai’).style.display=’block’",3000); </script> </head> <body onload="changer()"> <div id="temp" style="display:block"> Veuillez patienter... </div> <div id="delai" style="display:none"> xxx xxx xxx xxx xxx xxx xxx xxx <br> xxx xxx xxx xxx xxx xxx xxx xxx <br> xxx xxx xxx xxx xxx xxx xxx xxx <br> xxx xxx xxx xxx xxx xxx xxx xxx <br> xxx xxx xxx xxx xxx xxx xxx xxx <br> xxx xxx xxx xxx xxx xxx xxx xxx <br> </div> </body> </html>

Le script ne comporte que quelques lignes.

Le message d’attente est inclus dans des balises <div> ... </div> avec la propriété display:block, donc avec un affichage effectif (id="temp").

La page normale est incluse dans une autre balise <div> ... </div> avec la propriété display:none. Elle est ainsi provisoirement cachée (id="delai").

La fonction changer() est appelée au chargement de la page.

Un premier compteur programmé avec un délai de 3 secondes (3000), activera la ligne de code du premier argument. Dans celuici, on retrouve l’identifiant de la balise <div> provisoire (id="temp"), soit document.getElementById(’temp’). On en modifie alors la propriété de style display, soit style.display=’none’ pour faire disparaître le message d’attente.

Un second compteur avec le même délai procède de façon identique avec l’autre balise <div> (id="delai"). Après avoir


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4xNoMSOjzIgLAA==-enidentnumber

371

détecté celleci par son id, sa propriété display est changée (style.display=’none’) faisant ainsi apparaître la page définitive.

Il ne faut surtout pas oublier les balises fermantes </div>.

Ce script est compatible Internet Explorer et Firefox.


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz4xNoMSOjzIgLAA==-enidentnumber

372

Menus CSS (liens)

Il est inutile de souligner l’importance d’un menu de navigation informatif et convivial dans le design d’un site Web.

On voit fleurir ces derniers temps des menus de navigation de plus en plus élaborés, à l’aide de feuilles de style CSS.

Ces différents menus sont une belle illustration des matières parcourues dans cet ouvrage, soit le CSS et le Dhtml.

1. Menu CSS vertical

Qu’ils soient uniquement réalisés en feuilles de style CSS ou associés à du Dhtml, la construction de ces menus passe par la création de boutons.

Ces boutons (CSS bien entendu) peuvent être inclus dans de nombreux éléments Html comme des liens, des tableaux, des listes. Certains peuvent même être positionnés de façon absolue sur la page.

Commençons par coder, en simple Html, les différents liens du menu. Soit ici cinq balises de lien <a> ... </a> comprises dans le corps du document.

<body> <a class="nav" href="page1.htm">Page 1</a> <a class="nav" href="page2.htm">Page 2</a> <a class="nav" href="page3.htm">Page 3</a> <a class="nav" href="page4.htm">Page 4</a> <a class="nav" href="page5.htm">Page 5</a> </body>

Rien d’extraordinaire si ce n’est la classe nav qui nous sera utile pour assigner un style au lien.

Et ce sera tout pour le Html !

Le résultat visible à ce momentci est :

Déterminons maintenant le style des boutons du menu. Ils prennent la forme d’un élément boîte dont les dimensions sont définies (width et height) ainsi que la propriété display (voir chapitre Propriétés d’affichage à l’écran Visibilité).

<head> <style type="text/css"> a.nav, a.nav:link, a.nav:visited display: block; width: 150px; height: 25px; </style> </head>

La page devient :

Nous allons faire ressembler ces éléments boîte à des boutons. Pour rester simple au niveau du code, on ajoutera uniquement aux propriétés de style, un arrièreplan de couleur et une bordure. Le code précédent devient :


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz38BuPyOjzIgLAA==-enidentnumber

373

<head> <style type="text/css"> a.nav, a.nav:link, a.nav:visited+ display: block; width: 150px; height: 25px; background :#99ccff; border: 1px solid black; </style> </head>

Ces boutons sont cependant un peu trop simplistes. Nous allons donc les sophistiquer quelque peu. On ajoute ainsi :

margin-top: 2px pour séparer les boutons par un petit espace (chapitre L’élément boîte Marges externes).

text-align: center pour centrer le texte dans le bouton (chapitre Texte Alignement horizontal).

text-decoration: none pour enlever le soulignement du lien (chapitreTexte Décoration).

color: black afin que la couleur du lien reste toujours noire, même quand celuici est visité (chapitre Texte Couleur).

...

Le code devient alors :

<head> <style type="text/css"> a.nav, a.nav:link, a.nav:visited display: block; width: 150px; height: 25px; background:+#99ccff; border: 1px solid black; margin-top: 2px; text-align: center; text-decoration: none; font-family: Arial, Verdana, sans-serif; font-size:12px; color: black; </style> </head>

Ce qui donne :



374

Il reste à corriger quelques défauts d’affichage par des astuces CSS. On ajoute ainsi : line-height:25px et overflow:hidden pour tenir compte de certaines particularités d’affichage d’Internet Explorer.

<head> <style type="text/css"> a.nav, a.nav:link, a.nav:visited display: block; width: 150px; height: 25px; background: #99ccff; border: 1px solid black; margin-top: 2px; text-align: center; text-decoration: none; font-family: Arial, Verdana, sans-serif; font-size:12px; color: black; line-height:25px; overflow:hidden; </style> </head>

On obtient ainsi :

Il ne reste plus qu’à prévoir l’effet du lien actif et du lien survolé.

Soit à ajouter entre les balises <style> ... </style> :

a.nav:hover background: white; font-weight: bold; a.nav:active color: red;

Le code complet de la page est ainsi :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Menu CSS horizontal</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> a.nav, a.nav:link, a.nav:visited display: block; width: 150px; height: 25px; background: #99ccff; border: 1px solid black; margin-top: 2px; text-align: center; text-decoration: none; font-family: Arial, Verdana, sans-serif; font-size:12px; color: black; line-height:25px;



375

overflow:hidden; a.nav:hover background: white ; font-weight: bold; a.nav:active color: red; </style> </head> <body> <a class="nav" href="page1.htm">Page 1</a> <a class="nav" href="page2.htm">Page 2</a> <a class="nav" href="page3.htm">Page 3</a> <a class="nav" href="page4.htm">Page 4</a> <a class="nav" href="page5.htm">Page 5</a> </body> </html>

2. Menu CSS horizontal

Pour réaliser, à partir du point précédent, un menu horizontal, il suffit d’ajouter simplement la propriété float:left au style de a.nav, a.nav:link, a.nav:visited.

Le code complet serait :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Menu CSS horizontal</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> a.nav, a.nav:link, a.nav:visited display: block;

float:left;

width: 75px; height: 25px; background: #99ccff; border: 1px solid black; margin-top: 2px; text-align: center; text-decoration: none; font-family: arial, verdana, sans-serif;



376

font-size:12px; color: black; line-height:25px; overflow:hidden; a.nav:hover font-weight: bold; background: white ; a.nav:active color: red; </style> </head> <body> <a class="nav" href="page1.html">Page 1</a> <a class="nav" href="page2.html">Page 2</a> <a class="nav" href="page3.html">Page 3</a> <a class="nav" href="page4.html">Page 4</a> </body> </html>



377

Menus CSS (liste)

1. Menu CSS vertical

Il est également possible de créer un menu de navigation à partir d’une liste à puces.

Voici le code Html de la liste :

<div id="nav"> <ul> <li><a href="page1.htm">Page 1</a></li> <li><a href="page2.htm">Page 2</a></li> <li><a href="page3.htm">Page 3</a></li> <li><a href="page4.htm">Page 4</a></li> <li><a href="page5.htm">Page 5</a></li> </ul> </div>

Le code classique est entouré de balises <div> ... </div> pour en faire un élément boîte. Il est identifié par id="nav".

Les puces sont plutôt gênantes dans ce menu de navigation. Nous allons les enlever par la propriété de style list-style-type:none (Chapitre Les listes). Les propriétés padding:0px et margin:0px sont là pour assurer un centrage correct dans l’élément boîte.

<head> <style type="text/css"> #nav ul list-style-type: none; padding: 0px; margin: 0px; </style> </head>

On confectionne ensuite les boutons.

<head> <style type="text/css"> #nav li a display: block; height: 25px; line-height: 25px; width: 100px; background: #99ccff; border: 1px solid navy; color: navy; text-decoration: none; text-align: center; </style>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzj+CvUSOjzIgLAA==-enidentnumber

378

</head>

Et pour terminer, on ajoute un effet sur le lien survolé.

#nav a:hover background: white ; font-style: italic;

Le code complet devient ainsi :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Menu liste vertical</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #nav ul list-style: none; padding: 0px; margin: 0px; #nav li a display: block; height: 25px; line-height: 25px; width: 100px; background: #99ccff; border: 1px solid navy; color: navy; text-decoration: none; text-align: center; #nav a:hover background: white ; font-style: italic; </style> </head> <body> <div id="nav"> <ul> <li><a href="page1.htm">Page 1</a></li> <li><a href="page2.htm">Page 2</a></li> <li><a href="page3.htm">Page 3</a></li> <li><a href="page4.htm">Page 4</a></li> <li><a href="page5.htm">Page 5</a></li> </ul> </div> </body> </html>



379

2. Menu CSS horizontal

Pour créer à partir du code cidessus un menu horizontal, il suffit de spécifier float:left à #nav li.

Si on souhaite séparer les boutons, on ajoutera un espace à gauche et à droite par margin: 0 2px :

#nav li float: left; margin: 0 2px; padding: 0; text-align: center;


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Menu liste horizontal</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #nav ul list-style: none; padding: 0; margin: 0; #nav li a display: block; height: 25px; line-height: 25px; width: 100px; background: #99ccff; border: 1px solid navy; color: navy; text-decoration: none; text-align: center; #nav a hover background: white ; font-style: italic; #nav li float: left; margin: 0 2px;



380

padding: 0; text-align: center; </style> </head> <body> <div id="nav"> <ul> <li><a href="page1.htm">Page 1</a></li> <li><a href="page2.htm">Page 2</a></li> <li><a href="page3.htm">Page 3</a></li> </ul> </div> </body> </html>



381

Exemples de boutons CSS

Les concepteurs de pages Web ont trouvé, avec les feuilles de style, de quoi alimenter leur imagination débordante et créatrice. Voici quelques exemples de boutons en CSS pour le moins particuliers.

1. Bouton en relief

Bouton en 3D qui semble s’enfoncer au passage de la souris.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Bouton 1</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #menu a text-decoration:none; text-align: center; background-color:#9ab; color:#fff; font-family:courier new; font-weight:bold; display:block; width:100px; height:18px; font-size:14px; border-top:2px soli #fff; border-left:2px solid #def; border-right:2px solid #89a; border-bottom:2px solid+#345; margin:2px; #menu a:hover text-decoration:none; text-align: center; background-color:#9ab; color:#000; font-family:courier new; font-weight:bold; display:block; width:100px; height:18px; font-size:14px; border-bottom:2px solid #fff; border-right:2px solid #def; border-left:2px solid #89a; border-top:2px solid #345; margin:2px; </style> </head> <body> <div id="menu"> <a href="#">Page 1</a>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzM96GXyOjzIgLAA==-enidentnumber

382

<a href="#">Page 2</a> <a href="#">Page 3</a> <a href="#">Page 4</a> <a href="#">Page 5</a> </div> </body </html>

Il faudrait encore prévoir le style pour a:active et a:visited.

2. Bouton accentué

Lors du survol par le curseur, le bouton est agrémenté d’un petit rectangle de couleur.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Bouton 3</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #menu width:200px; text-align:center; #menu a text-decoration:none; background-color:#9cf; color:#000; font-family: Arial; display:block; width:100px; height:16px; font-size:14px; border-right:5px solid #fff; margin:5px #menu a:hover text-decoration:none; background-color:#9cf; color:red; font-family:Arial; font-weight:bold; display:block; width:100px; height:16px; font-size:14px; border-right:5px solid red; margin:5px; </style> </head> <body> <div id="menu"> <a href="#">Page 1</a> <a href="#">Page 2</a>



383

<a href="#">Page 3</a> <a href="#">Page 4</a> <a href="#">Page 5</a> </div> </body> </html>


Le petit rectangle qui suit le survol de la souris est obtenu simplement avec une bordure de couleur et d’une épaisseur de 5 pixels.

3. Bouton avec une image

Une image (ici une petite flèche arrow.gif) est incluse dans le bouton.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Bouton 4</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #nav a display: block; border: solid 2px black; font-family: sans-serif; font-size: 13px; padding: 4px 5px 4px 20px; color: #000; text-decoration: none; background-image: url(arrow.gif); background-repeat: no-repeat; background-position: 6px 6px; background-color: #9cf; width: 100px; height: 20px; margin-top: 2px; #nav a:hover display: block; width: 100px; height: 20px; background-color: #FF6; font-weight: bold </style> </head> <body> <div id="nav"> <a href="#">Page 1</a> <a href="#">Page 2</a> <a href="#">Page 3</a>



384

<a href="#">Page 4</a> <a href="#">Page 5</a> </div> </body> </html>


4. Bouton avec un arrièreplan

Le bouton contient une image en arrièreplan.

Soit normal.jpg pour le bouton en position neutre :

Soit over.jpg pour le bouton survolé :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Bouton 5/title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #nav position:relative; font-family: sans-serif; background-image: url(normal.jpg); background-repeat: no-repeat; display: block; width: 125px; height: 25px; margin-top: 1px; padding: 0; #nav a display:block; font-size: 11px; width: 125px; height: 25px; display: block; float: left; margin-top: 1px; padding: 0px; color: black; text-decoration: none; #nav a:hover background-image: url(over.jpg); background-repeat: no-repeat; display: block;



385

width: 125px; height: 25px; font-weight: bold; color: red; margin-top: 1px; padding: 0px; #nav span position:absolute; left: 10px; top: 5px; margin: 0px; </style> </head> <body> <div id="nav"><a href="#"><span>Page 1</span></a></div> <div id="nav"><a href="#"><span>Page 2</span></a></div> <div id="nav"><a href="#"><span>Page 3</span></a></div> <div id="nav"><a href="#"><span>Page 4</span></a></div> <div id="nav"><a href="#"><span>Page 5</span></a></div> </body> </html>




386

Menu déroulant Dhtml horizontal

Les menus réalisés uniquement en feuilles de style CSS sont déjà du plus bel effet, l’ajout d’un peu de Dhtml les rendra encore plus spectaculaires.

Le Dhtml peut appliquer un effet de menu déroulant, ce qui permettra un gain de place appréciable.

Il faut commencer par construire le menu principal en Html (ici une liste de définition).

<body <div id="menu"> <dl> <dt>Chapitre 1</dt> </dl> <dl> <dt>Chapitre 2</dt> </dl> <dl> <dt>Chapitre 3</dt> </dl> </div> </body>

Ensuite, toujours en Html, ajoutons les sousmenus (ici sous forme de liste à puces).

<body <div id="menu"> <dl> <dt>Chapitre 1</dt> <dd id="sousmenu1"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> <li><a href="#">Point 5</a></li> </ul> </dd> </dl> <dl> <dt>Chapitre 2</dt>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQz/WgKbSOjzIgLAA==-enidentnumber

387

<dd id="sousmenu2"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> <li><a href="#">Point 5</a></li> </ul> </dd> </dl> <dl> <dt>Chapitre 3</dt> <dd id="sousmenu3"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> <li><a href="#">Point 5</a></li> </ul> </dd> </dl> </div> </body>

Ajoutons les feuilles de style pour les chapitres (les #menu ...).

Pour rappel, la position horizontale est obtenue par la propriété list-style-type:none.

<style type="text/css"> dl, dt, dd, ul, li margin: 0px; padding: 0px; list-style-type: none; #menu position: absolute; top: 0; left: 0; width: 100%; #menu dl float: left; width: 100px; margin: 0 2px; #menu dt cursor: pointer; text-align: center; font-weight: bold;



388

background: #9cf; border: 1px solid black; #menu dd border: 1px solid black; #menu li text-align: center; background: #fff; #menu li a color: black; text-decoration: none; display: block; height: 100%; border: 0 none; #menu dt a color: black; text-decoration: none; display: block; height: 100%; border: 0 none; #menu li a:hover background: #9cf; #menu dt a:hover background: #9cf; a text-decoration: none; color: black; </style>

Il reste, pour terminer, à ajouter le JavaScript pour l’effet Dhtml (menu déroulant).

<head> <script type="text/javascript"> function montrer(id) var objet = document.getElementById(id); for (var i = 1; i<=10; i++) if (document.getElementById(’sousmenu’+i)) document.getElementById(’sousmenu’+i).style.display=’none’; if (objet) objet.style.display=’block’; </script>



389

</head> + <body onload="montrer()"> + <dt onmouseover="javascript:montrer(’sousmenu1’);">Chapitre 1</dt> <dt onmouseover="javascript:montrer(’sousmenu2’);">Chapitre 2</dt> <dt onmouseover="javascript:montrer(’sousmenu3’);">Chapitre 3</dt>

La fonction montrer() détecte l’objet dont l’Id est ’sousmenu’ + i. Dans un premier temps, tous les sousmenus sont cachés (style.display=’none’). Le seul menu affiché est celui qui aura été transmis à la fonction comme argument (if (objet) objet.style.display=’block’ ).

Cette fonction est activée au chargement de la page (<body onload="montrer()">).

Au survol d’un chapitre (onmouseover), la fonction montrer() est activée avec comme paramètre le sousmenu de celuici (par exemple, montrer(’sousmenu1’)).

Le script complet :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Menu déroulant Dhtml</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function montrer(id) var objet = document.getElementById(id); for (var i = 1; i<=10; i++) if (document.getElementById(’sousmenu’+i)) document.getElementById(’sousmenu’+i).style.display=’none’; if (objet) objet.style.display=’block’; </script> <style type="text/css"> dl, dt, dd, ul, li margin: 0px; padding: 0px; list-style-type: none; #menu position: absolute; top: 0; left: 0; width: 100%; #menu dl float: left; width: 100px; margin: 0 2px; #menu dt cursor: pointer; text-align: center; font-weight: bold; background: #9cf; border: 1px solid black; #menu dd border: 1px solid black; #menu li



390

text-align: center; background: #fff; #menu li a color: black; text-decoration: none; display: block; height: 100%; border: 0 none; #menu dt a color: black; text-decoration: none; display: block; height: 100%; border: 0 none; #menu li a:hover background: #9cf; #menu dt a:hover background: #9cf; a text-decoration: none; color: black; </style> </head> <body onload="montrer()"> <div id="menu"> <dl> <dt onmouseover="javascript:montrer(’sousmenu1’);">Chapitre 1</dt> <dd id="sousmenu1"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> <li><a href="#">Point 5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montrer(’sousmenu2’);">Chapitre 2</dt> <dd id="sousmenu2"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> <li><a href="#">Point 5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montrer(’sousmenu3’);">Chapitre 3</dt> <dd id="sousmenu3"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> <li><a href="#">Point 5</a></li> </ul> </dd> </dl> </div> </body> </html>



391



392

Menu déroulant Dhtml vertical

Cet effet est aussi appelé "navigation tree" par les anglossaxons.

Le html de départ :

<body> <dl id="menu"> <dt>Chapitre 1</dt> <dd id="sousmenu1"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd> <dt>Chapitre 2</dt> <dd id="sousmenu2"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd> <dt>Chapitre 3</dt> <dd id="sousmenu3"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd> <dt>Chapitre 4</dt> <dd id="sousmenu4" <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd>


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzo5JseiOjzIgLAA==-enidentnumber

393

</dl> </body>

Les feuilles de style CSS :

<style type="text/css"> dl, dt, dd, ul, li margin: 0px; padding: 0px; list-style-type: none; #menu position: absolute; top: 5px; left: 10px; dl#menu width: 140px; dl#menu dt cursor: pointer; margin: 2px 0; height: 20px; line-height: 20px; text-align: center; font-family: sans-serif; font-size: 10pt; border: 1px solid black; background: #9cf; dl#menu dd border: 1px solid black; dl#menu li text-align: center; background: #fff; dl#menu li a color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; dl#menu dt a color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; dl#menu li a:hover background: #9cf; dl#menu dt a:hover background: #9cf; </style>

Le JavaScript pour l’effet Dhtml :

<scrip type="text/javascript"> function montrer(id) var objet = document.getElementById(id); for (var i = 1; i<=10; i++) if (document.getElementById(’sousmenu’+i)) document.getElementById(’sousmenu’+i).style.display=’none’;



394

if (objet) objet.style.display=’block’; </script> + <body onload="montrer()"> + <dt onclick="javascript:montrer(’sousmenu1’);">Chapitre 1</dt> <dt onclick="javascript:montrer(’sousmenu2’);">Chapitre 2</dt> <dt onclick="javascript:montrer(’sousmenu3’);">Chapitre 3</dt> <dt onclick="javascript:montrer(’sousmenu4’);">Chapitre 4</dt>

La fonction montrer() détecte l’objet dont l’Id est ’sousmenu’ + i. Dans un premier temps, tous les sousmenus sont cachés (style.display=’none’). Le seul menu affiché est celui qui aura été transmis à la fonction comme argument (if (objet) objet.style.display=’block’ ).

Cette fonction est activée au chargement de la page (<body onload="montrer()">).

Au survol d’un chapitre (onmouseover), la fonction montrer() est activée avec comme paramètre le sousmenu de celuici (par exemple, montrer(’sousmenu1’)).

Le code complet est :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Menu vertical Dhtml</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"> function montrer(id) var objet = document.getElementById(id); for (var i = 1; i<=10; i++) if (document.getElementById(’sousmenu’+i)) document.getElementById(’sousmenu’+i).style.display=’none’; if (objet) objet.style.display=’block’; </script> <style type="text/css"> dl, dt, dd, ul, li margin: 0px; padding: 0px; list-style-type: none; #menu position: absolute; top: 5; left: 10; dl#menu width: 140px; dl#menu dt cursor: pointer; margin: 2px 0; height: 20px; line-height: 20px; text-align: center; font-family: sans-serif; font-size: 10pt; border: 1px solid black;



395

background: #9cf; dl#menu dd border: 1px solid black; dl#menu li text-align: center; background: #fff; dl#menu li a color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; dl#menu dt a color: #000; text-decoration: none; display: block; border: 0 none; height: 100%; dl#menu li a:hover background: #9cf; dl#menu dt a:hover background: #9cf; </style> </head> <body onload="montrer()"> <dl id="menu"> <dt onclick="javascript:montrer(’sousmenu1’);">Chapitre 1</dt> <dd id="sousmenu1"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd> <dt onclick="javascript:montrer(’sousmenu2’);">Chapitre 2</dt> <dd id="sousmenu2"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd> <dt onclick="javascript:montrer(’sousmenu3’);">Chapitre 3</dt> <dd id="sousmenu3"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd> <dt onclick="javascript:montrer(’sousmenu4’);">Chapitre 4</dt> <dd id="sousmenu4"> <ul> <li><a href="#">Point 1</a></li> <li><a href="#">Point 2</a></li> <li><a href="#">Point 3</a></li> <li><a href="#">Point 4</a></li> </ul> </dd>



396

</dl> </body> </html>



397

Annexe 1 : Mots réservés JavaScript

Outre les mots réservés énumérés cidessus, il est préférable d’éviter les mots suivants dans les noms de variables. Ces noms sont utilisés pour les objets, méthodes ou propriétés par le langage JavaScript.

abstract

boolean

break

byte

case

catch

char

class

continue

const

debugger

default

delete

do

double

else

extends

enum

export

false

final

finally

float

for

function

goto

if

implements

import

in

instanceOf

int

interface

label

long

native

new

null

package

private

protected

public

return

short

static

super

switch

synchronized

this

throw

throws

transient

true

try

typeof

var

void

volatile

while

with


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzMfCDiCOjzIgLAA==-enidentnumber

398

alert

all

anchor

anchors

area

array

assign

blur

button

checkbox

clearTimeout

clientInformation

close

closed

confirm

crypto

date

defaultStatus

document

element

elements

embed

embeds

escape

eval

event

fileUpload

focus

form

forms

frame

frames

frameRate

function

getClass

hidden

history

image

images

isNaN

java

JavaArray

JavaClass

JavaObject

JavaPackage

innerHeight

innerWidth

layer

layers

length

link

location

Math

mimeTypes

name

navigate

navigator

netscape

Number

Object

offscreen

onblur

onerror

onfocus

onload

onunload

open

opener

option

outerHeight

outerWidth

packages

pageXOffset

pageYOffset

parent

parseFloat

parseInt

password

plugin

prompt

prototype

radio

reset

screenX

screenY

scroll

secure

select

self

setTimeout

status

String

submit

sun

taint

text

textarea

top

toString

unescape

untaint

valueOf

window


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzMfCDiCOjzIgLAA==-enidentnumber

399

Annexe 2 : Équivalences JavaScript et propriétés CSS

Tableau des équivalences en référence JavaScript et propriétés CSS :

Javascript CSS

textDecoration

textDecorationLineThrough

textDecorationNone

textDecorationUnderline

textDecorationOverline

textIndent

textTransform

textdecoration

textdecoration: linethrough

textdecoration: none

textdecoration: underline

textdecoration: overline

textindent

texttransform

styleFloat float

listStyle

listStyleImage

listStylePosition

listStyleType

liststyle

liststyleimage

liststyleposition

liststyletype

paddingBottom

paddingLeft

paddingRight

paddingTop

pageBreakAfter

pageBreakBefore

paddingbottom

paddingleft

paddingright

paddingtop

pagebreakafter

pagebreakbefore

fontFamily

fontSize

fontWeight

fontVariant

fontfamily

fontsize

fontweight

fontvariant

borderBottom

borderBottomColor

borderBottomStyle

borderBottomWidth

borderColor

borderLeft

borderLeftColor

borderLeftStyle

borderLeftWidth

borderRight

borderRightColor

borderRightStyle

borderRightWidth

borderStyle

borderbottom

borderbottomcolor

borderbottomstyle

borderbottomwidth

bordercolor

borderleft

borderleftcolor

borderleftstyle

borderleftwidth

borderright

borderrightcolor

borderrightstyle

borderrightwidth

borderstyle


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzd7qJlyOjzIgLAA==-enidentnumber

400

borderTop

borderTopColor

borderTopStyle

borderTopWidth

borderWidth

bordertop

bordertopcolor

bordertopstyle

bordertopwidth

borderwidth

marginBottom

marginLeft

marginRight

marginTop

marginbottom

marginleft

marginright

margintop

lineHeight lineheight

letterSpacing letterspacing

verticalAlign verticalalign

zIndex zindex

backgroundAttachment

backgroundColor

backgroundImage

backgroundPosition

backgroundRepeat

backgroundattachment

backgroundcolor

backgroundimage

backgroundposition

backgroundrepeat


enidentnumber-AAEAAAD/////AQAAAAAAAAAMAgAAAE1FTkkuRWRpdGlvbnMuTUVESUFwbHVzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAJ0VOSS5FZGl0aW9ucy5NRURJQXBsdXMuQ29tbW9uLldhdGVybWFyawIAAAAHcGlzVGV4dAlwaWR0ZURhdGUBAA0CAAAABgMAAAA8MzkzMDAxIC0gSm9uaWZhciBsaW5hIC0gYWNiZGMxZTQtZDAyYy00ODRiLWFiZDQtNDRmY2Q1ZGYxYzQzd7qJlyOjzIgLAA==-enidentnumber

401

Documents

Des CSS au DHTML - JavaScript appliqué aux feuilles de style