Technologie : DOM

Openweb.eu.org > Technologie : DOM

0 | 10

Adaptive Images and Responsive Web Design

by Cédric Morin, on the 16 December 2013

Cédric Morin makes a ready-to-use solution solving Adaptive Images issue, that fits well with dynamic websites (one more solution, yeah): this solution is not trivial, but is designed to be automated.

Adaptive Images et Responsive Web Design

par Cédric Morin, le 10 décembre 2013

Cédric Morin étudie une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui).

Cette solution est complexe, mais est prévue pour être complètement automatisable (comprenez industrialisable).

CaenJS, retour d’expérience

par Le collectif Openweb, le 1er novembre 2013

Tout le collectif OpenWeb se félicite d’apprendre que de nouveaux événements francophones voient le jour. Aujourd’hui nous relatons avec l’aide de Sylvain Zyssman la première édition de CaenJS.

Les attributs async et defer pour script

par Nicolas Hoffmann, le 10 juillet 2013

Les Performances web, pour aller plus loin

par Nicolas Hoffmann, le 3 juillet 2011

Dans Introduction à la performance web, les bases des bonnes pratiques et des enjeux de la performance web ont été posées. Cet article a pour but d’aller plus loin dans ce vaste domaine en décryptant l’affichage d’une page et les pistes pour l’accélérer.

Introduction à la performance Web

par Nicolas Hoffmann, le 10 février 2011

Travailler les performances d’un site web peut être un travail de très longue haleine et extrêmement technique, impliquant de multiples acteurs et de multiples compétences. L’idée de cet article est de comprendre pourquoi ce domaine est en plein essor et d’en poser les bases.

Validation avancée des formulaires

par Harmen Christophe, le 17 septembre 2008

La simple mise en place de formulaires sur un site peut devenir une opération assez complexe dès lors que l’on souhaite effectuer des contrôles sur les données saisies par les utilisateurs. Pour effectuer ce type de contrôles, deux possibilités nous sont offertes :

  • Vérifier les données côté serveur après validation du formulaire ;
  • Vérifier les données côté client avant transmission des données au serveur.

Dans cet article, nous allons montrer l’intérêt que peut apporter le Modèle Objet de Document (DOM) pour effectuer des contrôles côté client. Cette deuxième solution ne devra toutefois pas nous faire oublier la nécessité absolue d’effectuer dans le même temps des contrôles côté serveur. Ces derniers permettront d’une part d’éviter la soumission complète des données dans un format invalide, et d’autre part nous permettront d’assurer l’accessibilité de nos formulaires aux utilisateurs n’ayant pas la possibilité ou ayant fait le choix de ne pas activer Javascript sur leur poste de travail.

Si la solution proposée ici est un plus par rapport aux indispensables contrôles côté serveur, elle ne manque pas d’intérêt : elle permet d’éviter des échanges de données fastidieux avec le serveur, d’accélérer la validation des formulaires, et également d’enrichir et de faciliter la saisie pour les utilisateurs.

Mais avant de commencer, que devons nous savoir :

L’objet XMLHttpRequest

par Maurice Svay, le 21 avril 2005

De nouvelles applications web ont vu le jour récemment : recherche avec complétion automatique, sauvegarde instantanée d’informations, interface mail hyperdynamique, cartographie, etc. mais aucune ne fait appel à des plugins tiers comme Flash ou Java. On parle alors souvent de méthode AJAX qui s’articule essentiellement autour de Javascript et d’un objet (dans le sens de la programmation orientée objets) en particulier : XMLHttpRequest.

ECMAScript et (X)HTML

par Steve Frécinaux, le 21 mars 2005

Comment insérer un script ECMAScript dans un fichier HTML.

Bien valider ses formulaires avec Javascript

par Laurent Jouanneau, le 17 décembre 2003

En fouinant sur le web, on peut découvrir plusieurs pratiques pour appeler
des scripts en Javascript qui vérifient le contenu d’un formulaire. Mais elles
sont, hélas, rarement correctes dans le sens où beaucoup d’entre elles
réduisent l’accessibilité et l’ergonomie des formulaires, voire sont
inefficaces. Cet article vous propose de passer en revue ce qu’il faut faire
et ne pas faire en la matière.

0 | 10

Une définition

Le DOM est l’interface programmatique (API) qui permet au développeur web d’accéder et de manipuler le contenu d’une page web, aussi appelée document. Il fournit une représentation structurée et orientée objet des éléments et du contenu d’une page avec les méthodes permettant de modifier les propriétés de ces objets. Il fournit aussi des méthodes permettant l’ajout et la suppression de tels objets, permettant ainsi au développeur web de créer du contenu dynamique en modifiant le contenu, la structure et le style du document.

Le DOM fournit aussi une interface de gestion des événements, pour capturer les actions du navigateur et de son utilisateur, et d’y réagir.

DOM et JavaScript/ECMAScript

Le DOM étant une API, il est utilisé depuis un langage de programmation qui s’exécute dans le navigateur. Il s’agit le plus souvent de JavaScript ou de son équivalent standardisé ECMAScript, mais le DOM a été conçu pour être indépendant de tout langage.

Les différentes versions

Il existe plusieurs versions du DOM. Toutes sont standardisées par le W3C :

  1. le DOMLevel 1 (Core + HTML) est daté du 1er octobre 1998 ;
  2. le DOM Level 2, plus complexe, est divisé en plusieurs parties : Core, Events, Style, Views et Traversal and range, finalisées simultanément le 13 novembre 2000. La spécification DOM Level 2 HTML a été finalisée en janvier 2003 ;
  3. le DOM level 3 est en cours de conception par le W3C.

Il existe aussi ce que l’on appelle abusivement le DOM Level 0, qui est un ensemble d’API qui existaient déjà dans les navigateurs avant même que le W3C n’ait standardisé DOM Level 1. DOM Level 0 n’est donc pas un standard.