Javascript et autres trucs dont on a besoin des fois, si, si Brice C.
Notions abordées (1/3) <ul><li>Outils </li></ul><ul><li>XHTML : un langage simple mais strict </li></ul><ul><li>CSS : </li...
Notions abordées (2/3) <ul><li>Javascript ce mal aimé </li></ul><ul><ul><li>Notions de programmation évenementielle </li><...
Notions abordées (3/3) pmsiBonnesPratiques
Outils <ul><li>Un navigateur standard et fonctionnel (au hasard, Inter^WMozilla Firefox </li></ul><ul><li>Un outil de debu...
XHTML, un langage simple ... mais strict <ul><li>Extensible HyperText Markup Language </li></ul><ul><li>On utilise la v1, ...
CSS <ul><li>Pendant ce temps là,  à Vera-Cruz  dans le code PMSIpilot ... (exemple de bloc css) </li></ul><ul><li>Les troi...
CSS : position <ul><li>Position gère le ... positionnement de l'élément (sans blague !) et peut prendre 4 valeurs : </li><...
CSS : display <ul><li>Display gère la manière d'afficher un élément donné et prend principalement 3 valeurs : </li></ul><u...
CSS : float <ul><li>Float peut prendre trois valeurs : </li></ul><ul><ul><li>Left </li></ul></ul><ul><ul><li>Right </li></...
CSS : bouton « accessible » Exemple : bouton « éditer » du visiopole
CSS : die, IE, die ! <ul><li>Une ou deux propriétés pas importantes du tout non-supportées : </li></ul><ul><ul><li>min/max...
Javascript : programmation événementielle <ul><li>On définit des fonctions qui seront des « gestionnaires d'événements » e...
Javascript : programmation événementielle UL LI A CLICK ! CAPTURE BUBBLE
Javascript : DOM <ul><li>Document Object Model </li></ul><ul><li>Interface d'accès / manipulation à des arbres XML, HTML, ...
Javascript : Mise en pratique sans lib <ul><li>Ajout d'un gestionnaire d'événement </li></ul><ul><ul><li>Standard : elem.a...
Javascript : jQuery <ul><li>$('#monDiv').click(clickHandler) </li></ul><ul><li>$(document).append('<a href=''toto.html''>a...
pmsiBonnesPratiques
pmsiBonnesPratiques <ul><li>Un objet par fichier, cet objet dispose d'une méthode init </li></ul><ul><li>Un fichier js en ...
Alors ... heureux ? <ul><ul><li>Got some questions ? </li></ul></ul>
Et maintenant ... <ul><ul><li>À SAM ! </li></ul></ul>
Prochain SlideShare
Chargement dans…5
×

Slides Js

1 981 vues

Publié le

Publié dans : Business, Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 981
Sur SlideShare
0
Issues des intégrations
0
Intégrations
218
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Slides Js

  1. 1. Javascript et autres trucs dont on a besoin des fois, si, si Brice C.
  2. 2. Notions abordées (1/3) <ul><li>Outils </li></ul><ul><li>XHTML : un langage simple mais strict </li></ul><ul><li>CSS : </li></ul><ul><ul><li>« Position, Display, Float » ou comment s'y retrouver dans la jungle des éléments </li></ul></ul><ul><ul><li>Un cas pratique : un bouton « Accessible » </li></ul></ul><ul><ul><li>IE ou « Bill est un sadique » </li></ul></ul>
  3. 3. Notions abordées (2/3) <ul><li>Javascript ce mal aimé </li></ul><ul><ul><li>Notions de programmation évenementielle </li></ul></ul><ul><ul><li>Capture / Bubbling, késako ? </li></ul></ul><ul><ul><li>Le DOM : « Department of Misery » ? </li></ul></ul><ul><ul><li>Mise en pratique sans lib : </li></ul></ul><ul><ul><ul><li>Ajout d'un gestionnaire d'événement </li></ul></ul></ul><ul><ul><ul><li>Ajout d'un élément au DOM </li></ul></ul></ul><ul><ul><li>« hello to youuuuu » jQuery </li></ul></ul><ul><ul><ul><li>Exemple </li></ul></ul></ul>
  4. 4. Notions abordées (3/3) pmsiBonnesPratiques
  5. 5. Outils <ul><li>Un navigateur standard et fonctionnel (au hasard, Inter^WMozilla Firefox </li></ul><ul><li>Un outil de debugging : Firefox (petite présentation) </li></ul>
  6. 6. XHTML, un langage simple ... mais strict <ul><li>Extensible HyperText Markup Language </li></ul><ul><li>On utilise la v1, la v2 est abandonnée au profit d'HTML5 </li></ul><ul><li>Une balise, c'est ça : <toto> </li></ul><ul><li>Toute balise doit être fermée ... </li></ul><ul><ul><li>Comme ça : <toto>mon contenu</toto> </li></ul></ul><ul><ul><li>Ou comme ça : <toto /> </li></ul></ul><ul><li>Une balise peut recevoir des arguments : </li></ul><ul><ul><li><a href=''mapage.html''>texte de mon lien</a> </li></ul></ul>
  7. 7. CSS <ul><li>Pendant ce temps là, à Vera-Cruz dans le code PMSIpilot ... (exemple de bloc css) </li></ul><ul><li>Les trois directives les plus importantes sont position, display et float </li></ul>
  8. 8. CSS : position <ul><li>Position gère le ... positionnement de l'élément (sans blague !) et peut prendre 4 valeurs : </li></ul><ul><ul><li>Static (valeur par défaut) </li></ul></ul><ul><ul><li>Absolute (positionnement absolu par rapport au conteneur, fait de l'élément un conteneur) </li></ul></ul><ul><ul><li>Relative (positionnement relatif par rapport à la position calculée, fait de l'élément un conteur) </li></ul></ul><ul><ul><li>Fixed (idem qu'absolute, mais ne bouge pas quand on scroll, bien entendu pas géré par un navigateur) </li></ul></ul>
  9. 9. CSS : display <ul><li>Display gère la manière d'afficher un élément donné et prend principalement 3 valeurs : </li></ul><ul><ul><li>Block : l'élément est considéré comme une zone rectangulaire </li></ul></ul><ul><ul><li>Inline : l'élément est considéré comme du texte qui se déroule au kilomètre </li></ul></ul><ul><ul><li>None : l'élément n'est pas affiché et ne prend pas de place dans le flux du document </li></ul></ul>
  10. 10. CSS : float <ul><li>Float peut prendre trois valeurs : </li></ul><ul><ul><li>Left </li></ul></ul><ul><ul><li>Right </li></ul></ul><ul><ul><li>None </li></ul></ul><ul><li>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é </li></ul>
  11. 11. CSS : bouton « accessible » Exemple : bouton « éditer » du visiopole
  12. 12. CSS : die, IE, die ! <ul><li>Une ou deux propriétés pas importantes du tout non-supportées : </li></ul><ul><ul><li>min/max-width/height </li></ul></ul><ul><ul><li>display: inline-block, table, table-cell, etc. (oui, c'est pour ça que je n'en avais pas parlé) </li></ul></ul><ul><ul><li>position: fixed (pas utile du tout) </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>Support non conforme de certaines propriétés (width se comporte comme un min-width) </li></ul><ul><li>Bugs divers et variés (peekaboo, etc.) </li></ul><ul><li>Des solutions ? Google Chrome Frame, Portable Firefox ? </li></ul>
  13. 13. Javascript : programmation événementielle <ul><li>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 </li></ul><ul><li>On enregistre nos gestionnaires d'événements sur des éléments (potentiellement le document lui-même) </li></ul><ul><li>Déroutant car le code ne s'exécute pas nécessaire « ligne à ligne » (oui, Olivier, c'est comme des GOTO) </li></ul><ul><li>Très utilisé en programmation d'IHM </li></ul>
  14. 14. Javascript : programmation événementielle UL LI A CLICK ! CAPTURE BUBBLE
  15. 15. Javascript : DOM <ul><li>Document Object Model </li></ul><ul><li>Interface d'accès / manipulation à des arbres XML, HTML, etc. </li></ul><ul><li>Relativement simple de compréhension et d'utilisation </li></ul><ul><li>DOM définit différents types de noeuds, les principaux sont : </li></ul><ul><ul><li>Élément </li></ul></ul><ul><ul><li>Attribut </li></ul></ul><ul><ul><li>Text </li></ul></ul>
  16. 16. Javascript : Mise en pratique sans lib <ul><li>Ajout d'un gestionnaire d'événement </li></ul><ul><ul><li>Standard : elem.addEventListener(event, callBack, useCapture) </li></ul></ul><ul><ul><li>IE : elem.attachEvent(onEvent, callBack) </li></ul></ul><ul><li>Ajout d'un élément au DOM </li></ul><ul><ul><li>cf. exemple </li></ul></ul>
  17. 17. Javascript : jQuery <ul><li>$('#monDiv').click(clickHandler) </li></ul><ul><li>$(document).append('<a href=''toto.html''>ahahah</a>') </li></ul>
  18. 18. pmsiBonnesPratiques
  19. 19. pmsiBonnesPratiques <ul><li>Un objet par fichier, cet objet dispose d'une méthode init </li></ul><ul><li>Un fichier js en plus par page (ou par composant) qui appelle les méthodes init des autres objets </li></ul><ul><li>On évite la méthode « live » pour des raisons de perfs (et parce qu'elle n'est pas encore bien finie) </li></ul><ul><li>Le cas « return false; » </li></ul>
  20. 20. Alors ... heureux ? <ul><ul><li>Got some questions ? </li></ul></ul>
  21. 21. Et maintenant ... <ul><ul><li>À SAM ! </li></ul></ul>

×