Objectif général : Prendre en main la bibliothèque JavaScript la plus utilisée
Objectifs spécifiques :
Inclure la bibliothèque
Sélectionner du contenu
Manipuler des éléments
Mettre en forme du contenu
Gérer des évènements
Utiliser des effets
Effectuer des requêtes AJAX
Objectif général : Prendre en main la bibliothèque JavaScript la plus utilisée
Objectifs spécifiques :
Inclure la bibliothèque
Sélectionner du contenu
Manipuler des éléments
Mettre en forme du contenu
Gérer des évènements
Utiliser des effets
Effectuer des requêtes AJAX
Le DOM (Document Object Model) est un standard W3C qui permet à des script (ici JavaScript) d'accéder ou de mettre à jour le contenu visuel, la structure ou le style de documents XML et HTML.
Dans une vaste majorité d’application Web notre principal outil de rendu est le HTML. Or, cet outil est souvent sous-utilisé: on fait un peu ce qu’on veut pour présenter correctement nos données, sans vraiment chercher à en tirer parti. Cela s’est d’autant plus compliqué avec l’avènement de la pile “HTML5” (HTML, Javascript, CSS3) qui, en cherchant à simplifier les choses, a multiplié le nombre de possibilités. Je vais me concentrer sur la méthode du “content driven developpement”. Cette méthode est celle où l’on se base sur notre contenu, l’importance des différents éléments avant de voir comment on veut les présenter. L’application de cette méthode permet d’obtenir un code HTML plus clair et plus maintenable. Il permet aussi bien souvent, de manière assez ironique, d’obtenir un design plus ergonomique qu’en appliquant une méthode “design first developpement”. Nous verrons comment cette méthode de développement nous permet d’être plus agile, et comment elle conditionne également notre manière de développer notre CSS. Enfin je parlerai de quelques outils qui permettent de tirer parti des nouveautés de HTML5 et CSS3.
3. Document Object Model
Le Document Object Model (ou DOM) est un standard du
W3C qui décrit une interface indépendante de tout
langage de programmation et de toute plate-forme,
permettant à des programmes informatiques et à des
scripts d'accéder ou de mettre à jour le contenu, la
structure ou le style de documents XML et HTML
http://fr.wikipedia.org
4. DOM & tree
<!DOCTYPE html>
<html>
<head>
<title>Exemple</title>
</head>
<body>
<h1>Super titre</h1>
<p>Super text</p>
</body>
</html>
html
head body
title
Exemple
h1
Super titre
h1
Super text
5. L’objet document
Touts page web chargée dans un navigateur web a son
propre objet document. Cet objet sert de point d'entrée
au contenu de la page et apporte des fonctions générales
au document.
https://developer.mozilla.org