Feuilles de Style en Cascade (CSS),
Langage JavaScript
et
HTML Dynamique (DHTML)
Pierre Juillot
HTML statique: protocole HTTP et balise <META>
de l'animation au niveau HTTP:
Les CSS
1. de l'HTML standard aux CSS
Un document HTML
suppression de l'indentation par élimination des balises <TABLE>
<TR> <TD>...
Une première CSS: rétablissement de l'indentation
migration des attributs de balises vers le STYLE
2. L'association des CSS à un document HTML
L'élément HTML STYLE
Le lien <LINK> à un fichier de STYLE externe
L'importation d'un fichier de STYLE externe
L'attribut STYLE d'une balise
les classes et l'élément CLASS
les ID's
la balise <SPAN>
la balise <DIV>
Pseudo-classes et pseudo-éléments
pseudo-classes
pseudo-éléments
4. Quelques propriétés des CSS
Les fontes
Spécification des fontes
Résumé des spécifications: la propriété font:
Positionnement statique
Le Modèle en boîte
Margins, Padding, Borders
Listes
Couleur
texte et background color
Image background
décoration des liens
listes des propriétés
Des effets de texte:
Effet d'ombre en CSS:
Effets d'embossage:
Le clipping
Le logo d'Arte:
les W3C Core Styles
un document avec les 8 W3C Core Styles
Le langage JavaScript
1. Éléments de langage:
le Document Objet Model": DOM
Variables entières et chaînes de caractères:
Un premier calcul:
Un première fonction:
Variable booléenne, opérateur logique ! et boucle:
Variable booléenne, opérateurs de comparaison:
if - else:
Opérateurs logiques && et || if - then else if - else:
Décimal - Octal- Hexadécimal - Binaire:
exemple: calcul du jour de la semaine :
2. l'objet document
propriétés et méthodes de l'objet document
accès aux propriétés des balises:
modification de propriétés:
Alternance de fond: heures paires / heures impaires:
date de dernière modification (première méthode):
dump des propriétés de l'objet document:
Les entités en HTML et en JavaScript:
une fonction "classique": la factorielle:
Un calculateur:
3. Animation et premiers événements
propriétés et méthodes de l'objet window
Un premier click, passage de la souris et boîte alert :
La méthode SetTimeout():
Une première horloge:
quelques méthodes de l'objet Date:
Dans le train Strasbourg-Paris
4. l'objet window et les événements
Liste des événements et des event handlers:
dump des propritétés de l'objet window:
Taille de la fenêtre :
la boîte prompt :
la boîte confirm :
ouverture d'une fenêtre et event handler OnLoad:
arguments de la méthode window.open()
Jouer un son et event handler:
plusieurs actions dans un même événement
Mot de passe:
Mot de passe (variante)
Mot de passe et fichiers de type .js
Boucle sur les couleurs et les <FRAME>:
Display des couleurs:
Attention! une fenêtre infernale:
5. Plus loin avec les objets
L'objet screen:
L'objet string:
propriétés et méthodes de l'objet String
Texte déroulant continu:
L'objet Array:
propriétés et méthodes de l'objet Array
L'objet function:
propriétés et méthodes de l'objet Function
Texte déroulant:
L'objet function et arguments:
L'objet navigator:
propriétés et méthodes de l'objet navigator
Arrêt de la méthode setTimeout():
6. Traitement des <FORM>
L'opérateur ( ) ? : ;:
Soumission d'une <FORM>: la méthode onSubmit
Lecture dans une <FORM>:
Vérification d'un champ texte:
La guerre des boutons:
Vérification d'un e-mail:
Vérification du code postal:
Valeur par défaut dans un champ:
Vérification des limites:
7. Les images dynamiques
Images, liens et événement :
Image animée depuis le serveur:
Image animée sur le navigateur (client):
Plusieurs images animées:
Plusieurs images animées différentes:
Inverser le bord en gardant l'image:
Image clignotante:
Changement automatique de bannière dans un document
Changement automatique de bannière (vérification)
Changement automatique de bannière avec des images au hasard
8. Scriptorium: date et heure
La date JJ/MM/AA
La date complète en français
Fabrication d'un objet: ma voiture:
Une horloge basée sur une forme
Différence de temps: combien de temps reste-t-il jusqu'à l'an 3000?
Différence de temps: quel est mon âge ?
Différence de temps: date de dernière modification d'un fichier
une première clock digitale:
une vraie clock digitale:
une jauge:
Différence de temps: un compte à rebours:
l'horloge astronomique de la cathédrale de Strasbourg:
8. les cookies :
Ecriture d'une cookie:
Destruction d'une cookie:
Modification d'une cookie: un compteur de visites
Modification d'une cookie: un compteur de visites digital
Dynamic HTML (DHTML)
1. DHTML
Visibility, overflow, clipping
Navigateurs de quatrième génération:
Liste des propriétés d'un calque:
Changer la visibility: visible «=» hidden:
Manuel: Dynamic HTML in Netscape Communicator
2. Positionnement des éléments
Placement dynamique d'un calque:
Images cliquables et placement dynamique d'un calque:
Images cliquables et placement dynamique d'un calque (2):
Image à positionnement fixe
Génération dynamique des effets de texte:
Effet d'ombre:
Effets d'embossage:
3. Animation (addition de mouvement)
Ecriture dynamique de texte dans un calque:
Image cliquable (image-map) et calques:
La chute des lettres (un tableau de calques)
Un scroller
Construction de calques: une antique machine à écrire
déplacements dynamiques:
déplacement manuel d'un calque:
incrément des coordonnées
Positions aléatoires
déplacement dynamique d'un calque:
Mouvement perpétuel:
Superposition des calques:
modification de zIndex:
Animation avec clipping
Comme au théâtre:
Variante:
l'objet event
Propriétés de l'objet event
Capture d'un objet event: click dans une window
Un locateur
Programmer les boutons de la souris: ex. disabler un bouton
Déplacement manuel des calques:
Drag/Drop:
Drag/Drop (variante):
Clipping Dynamique
Clipping Dynamique: