Le document aborde les bases du développement web avec un focus sur XHTML, CSS et JavaScript, en expliquant des concepts clés comme la programmation événementielle et le DOM. Il fournit des exemples pratiques sur l'utilisation de CSS pour le positionnement et l'affichage, ainsi que sur la manipulation du DOM avec JavaScript sans bibliothèques externes. Le texte évoque également des bonnes pratiques pour structurer le code et gérer les événements dans le développement d'applications web.

1. Javascript et autres trucs dont on a besoin des fois, si, si Brice C.

2. Notions abordées (1/3) Outils XHTML : un langage simple mais strict CSS : « Position, Display, Float » ou comment s'y retrouver dans la jungle des éléments Un cas pratique : un bouton « Accessible » IE ou « Bill est un sadique »

3. Notions abordées (2/3) Javascript ce mal aimé Notions de programmation évenementielle Capture / Bubbling, késako ? Le DOM : « Department of Misery » ? Mise en pratique sans lib : Ajout d'un gestionnaire d'événement Ajout d'un élément au DOM « hello to youuuuu » jQuery Exemple

4. Notions abordées (3/3) pmsiBonnesPratiques

5. Outils Un navigateur standard et fonctionnel (au hasard, Inter^WMozilla Firefox Un outil de debugging : Firefox (petite présentation)

6. XHTML, un langage simple ... mais strict Extensible HyperText Markup Language On utilise la v1, la v2 est abandonnée au profit d'HTML5 Une balise, c'est ça : <toto> Toute balise doit être fermée ... Comme ça : <toto>mon contenu</toto> Ou comme ça : <toto /> Une balise peut recevoir des arguments : <a href=''mapage.html''>texte de mon lien</a>

7. CSS Pendant ce temps là, à Vera-Cruz dans le code PMSIpilot ... (exemple de bloc css) Les trois directives les plus importantes sont position, display et float

8. CSS : position Position gère le ... positionnement de l'élément (sans blague !) et peut prendre 4 valeurs : Static (valeur par défaut) Absolute (positionnement absolu par rapport au conteneur, fait de l'élément un conteneur) Relative (positionnement relatif par rapport à la position calculée, fait de l'élément un conteur) Fixed (idem qu'absolute, mais ne bouge pas quand on scroll, bien entendu pas géré par un navigateur)

9. CSS : display Display gère la manière d'afficher un élément donné et prend principalement 3 valeurs : Block : l'élément est considéré comme une zone rectangulaire Inline : l'élément est considéré comme du texte qui se déroule au kilomètre None : l'élément n'est pas affiché et ne prend pas de place dans le flux du document

10. CSS : float Float peut prendre trois valeurs : Left Right None Un élément « floatté » est positionné dans le flux normal du document, puis déplacé le plus loin possible sur la droite ou la gauche. Le reste des éléments peuvent se positionner le long d'un élément floatté

11. CSS : bouton « accessible » Exemple : bouton « éditer » du visiopole

12. CSS : die, IE, die ! Une ou deux propriétés pas importantes du tout non-supportées : min/max-width/height display: inline-block, table, table-cell, etc. (oui, c'est pour ça que je n'en avais pas parlé) position: fixed (pas utile du tout) ... Support non conforme de certaines propriétés (width se comporte comme un min-width) Bugs divers et variés (peekaboo, etc.) Des solutions ? Google Chrome Frame, Portable Firefox ?

13. Javascript : programmation événementielle On définit des fonctions qui seront des « gestionnaires d'événements » et qui seront exécutées lorsqu'un événement donné (un click, une fin de requête Ajax, une fin de transition) se sera produit On enregistre nos gestionnaires d'événements sur des éléments (potentiellement le document lui-même) Déroutant car le code ne s'exécute pas nécessaire « ligne à ligne » (oui, Olivier, c'est comme des GOTO) Très utilisé en programmation d'IHM

14. Javascript : programmation événementielle UL LI A CLICK ! CAPTURE BUBBLE

15. Javascript : DOM Document Object Model Interface d'accès / manipulation à des arbres XML, HTML, etc. Relativement simple de compréhension et d'utilisation DOM définit différents types de noeuds, les principaux sont : Élément Attribut Text

16. Javascript : Mise en pratique sans lib Ajout d'un gestionnaire d'événement Standard : elem.addEventListener(event, callBack, useCapture) IE : elem.attachEvent(onEvent, callBack) Ajout d'un élément au DOM cf. exemple

17. Javascript : jQuery $('#monDiv').click(clickHandler) $(document).append('<a href=''toto.html''>ahahah</a>')

18. pmsiBonnesPratiques

19. pmsiBonnesPratiques Un objet par fichier, cet objet dispose d'une méthode init Un fichier js en plus par page (ou par composant) qui appelle les méthodes init des autres objets On évite la méthode « live » pour des raisons de perfs (et parce qu'elle n'est pas encore bien finie) Le cas « return false; »

20. Alors ... heureux ? Got some questions ?

21. Et maintenant ... À SAM !