Puce et Média

Présentation

Depuis l'apparition de l'objet style dans Internet Explorer, et rien n'étant venu le remplacer ou lui faire concurence, il est possible de lire ou initialiser n'importe quelle valeur de style d'un élément, de la même manière que si la description était placé dans l'attribut style de cet élément. Le DOM a fini par l'adopter dans son niveau 2 et donc tout les navigateurs compatibles sont succeptibles de les lire et les interpréter.

Pourquoi le DOM scripting ?

DOMScripting ? Dans un premier temps, si d'une part le mot DOM n'évoque rien pour vous, vous pouvez suivre le tutorial proposant une rapide introduction au DOM et d'autre part pour l'aspect scripting vous pouvez suivre celui qui aborde les bases de JavaScript. Nous allons explorer au cours du présent tutorial les avantages et parfois les cpmplexités du DOM Scripting. Avant d'aller plus loin, voyons voir une définition succinte de ce qu'est le DOM Scripting, ou de ce qu'il y a quelques années, on appelait le DHTML :

Le DOMScripting est une technique qui permet de manipuler le DOM d'une page web avec le langage de programmation ECMAScript. De ce fait tout se passe coté client et décharge ainsi le travail coté serveur. L'interface utilisateur des applications peuvent donc être très souple à utiliser, avoir une ergonomie totallement adaptative et évolutive et permettre ainsi à l'utilisateur une expérience plus riche. Les fenêtres déplaceables au sein d'une page, la réorganisation du contenu, le réagencement de certaines données, mais si on couple ces interaction avec la gestion CSS de l'affichage, d'autres portes encore plus esthétiques s'ouvrent alors et permettent des effets visuels de transitions ou de présentations comme les menus à onglets, les accordéons, les fenêtres compilables, etc...

Il serait tenté de penser que le DOM Scripting contient l'aspect AJAX dont nous présentions les possibilités dans la première partie de ce tutrorial. En fait cela est un peu vrai, rappelons nous que AJAX est un avant tout un ensemble de technologies dont DOM, ECMAScript et CSS font partie. Ce qu'il manque à la description faite ci dessus est le noyau dur de AJAX c'est à dire le rechargement de données sans recharger la page, l'objet XMLHttpRequest.

Relation script / document

De la même manière qu'il est intéressant d'externaliser les feuilles de style CSS, il en est de même pour le Javascript. Nous allons donc externaliser les fichiers Javascript. Par la même occasion affrenchissons nous de la problématique du chargement de la page. En effet, si nous executons un code, directement depuis ce fichier de code externalisé, qui nous garantit que la page sera entièrement chargé au moment de l'exécution du code. Ouvrez à cette occasion le fichier DOM_scripting_03.htm & DOM_scripting_03.js prévus à cet effet.

Introduction

Attention, il ne faut pas confondre DOM (Document Object Model) avec un énième langage de programmation, mais bien au contraire de prendre en considération que c'est une manière de pouvoir explorer ou manipuler l'arborescence d'un document structuré de type XML ou HTML. La cerise sur le gateau, c'est que le DOM restant une recommandation du W3C, celui se préserve de tout propriétarisme de quelques technologies que ce soit. De ce fait il ne faut pas sans arrêt réinventer la roue, ni l'eau chaude.... Concretement, cela signifie que pour ceux d'entre vous qui ont déjà exploré une quelconque arborescence de type XML dans un quelconque langage (compatible avec les standards...) vont pouvoir comprendre les mécaniques d'exploratiuon du DOM du HTML en quelques minutes....

Malgré cette dernière remarque, ce tutorial, n'a aucunement la prétention de couvrir l'ensemble de l'exploration du DOM, mais du moins de vous en apporter de bonnes bases d'exploration... vous pourrez également le compléter avec l'introduction au DOM Scripting au cours du tutorial sur AJAX. A ce sujet, le présent tutorial sur le DOM considère que lors de la mise en pratique d'exemples vous êtes déjà à l'aise avec Javascript, si tel n'était pas le cas, n'hésitez pas de vous rapprocher du tutorial sur l'introduction à JavaScript..

Présentation

Nous allons au cours de cet article explorer l'arborescence du document et voir les relations entre noeuds et attributs.

Présentation des librairies

Il existe diverses librairies Javascript qui permettent d'accélerer le développement de nos applications AJAX... En attendant de pouvoir étayer et définir chacune d'entre elle, cet article permet d'en lister les principales et d'indiquer leurs sites respectifs...

L'objet à l'origine d'AJAX

Depuis le début de ce tutorial, l'ensemble des approches et des exercices ne porte que sur la manipulation des données reçus par le navigateurs lors de la première requête. Nous allons voir maintenant comment alimenter à nouveau le document par des données fraichement cueillies sur le serveur. Il existe une simple complexité qui est qu'en fonction du navigateur l'objet XMLHttpRequest n'est pas identique. Mais une fois ce filtrage passé le reste des opérations est identique quelques soit ne navigateur, de même que les méthodes et propriétés..