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 »

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

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)

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>

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

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)

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

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é

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 ?

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

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

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

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>')

$('#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; »

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 ?

Got some questions ?

Et maintenant ... À SAM !

À SAM !