Slides Js

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

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 »

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

Notions abordées (3/3) pmsiBonnesPratiques

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

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>

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

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)

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

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é

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

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 ?

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

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

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

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

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

pmsiBonnesPratiques

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; »

Alors ... heureux ?
Got some questions ?

Et maintenant ...
À SAM !

Slides Js

by Brice Carpentier on Oct 29, 2009

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 117

Statistics

Slides Js — Presentation Transcript

http://www.pmsipilot.org	112
http://www.slideshare.net	5