Utopie DHTML: conception Web moderne à l'aide de JavaScript & Dom

Le charme du déverrouillage des pages Web dynamiques: profondément dans le monde de Dhtml

Cet article est extrait du nouveau livre de SitePoint "DHTML Utopia: Modern Web Design Using Javascript & Dom", qui explore la technologie DHTML en profondeur, vous apprenant à créer une riche expérience utilisateur sans sacrifier la convivialité et la compatibilité standard. L'auteur Stuart Langridge utilise les normes Web et sépare le code et les balises pour créer des applications DHTML engageantes, pratiques et interactives.

Ce livre couvre plus de 300 pages de compétences DHTML, y compris le modèle d'objet de document (DOM), les scripts à distance, les technologies AJAX, XML-RPC et XPath pour vous aider à créer vos propres applications de projet Web. Par exemple, construire un menu de navigation hiérarchique conforme aux normes;

Les extraits suivants vous amèneront à comprendre rapidement les technologies et les applications de base de DHTML. Pour plus d'informations, veuillez visiter la page du livre ou consulter le catalogue complet. Vous pouvez également télécharger la version PDF. Maintenant, allons au chapitre 1.

Chapitre 1: Aperçu de la technologie DHTML

Ce chapitre fournit brièvement un bref aperçu des bases nécessaires pour créer un site Web DHTML, y compris la combinaison de HTML, CSS et JavaScript. Le DHTML n'est pas une technologie unique, mais une fusion intelligente de ces trois technologies, comme l'art de la cuisine, le résultat final peut être de simples plats ou de grands banquets à la maison.

HTML Basics

Le site Web est écrit en HTML. Afin de créer un site Web amélioré DHTML réussi, votre HTML doit remplir deux conditions: valide et SEMANTIM .

• fefficient html: Suivez les règles de la spécification HTML et assurez-vous que votre code HTML est conforme aux normes, ce qui est crucial pour la construction de DHTML. Cela inclut correctement les balises de nidification, la fermeture des balises de conteneur et l'utilisation des déclarations de type de document (doctype). Utilisez le validateur W3C pour vérifier la validité de HTML.

• Semantisé HTML: Utilisez des balises HTML pour décrire les propriétés des éléments de document, pas leur apparence. Par exemple, utilisez la balise <code><p></p> pour représenter les paragraphes et utilisez la balise <blockquote></blockquote> pour représenter les références, plutôt que d'utiliser la balise <br> ou <font></font> pour contrôler le formatage du texte. Le marquage sémantique facilite l'application de la technologie DHTML.

Ajouter CSS

Les feuilles de style en cascade (CSS) sont utilisées pour décrire comment le HTML est rendu, c'est-à-dire pour définir l'apparence de chaque élément sur la page. Grâce au style CSS, les pages DHTML peuvent traiter indépendamment l'apparence et le contenu de la page, réalisant une séparation propre.

Ajouter JavaScript

JavaScript est un langage de programmation utilisé pour ajouter un comportement dynamique à un site Web. HTML définit la structure de la page, CSS définit l'apparence de la page et JavaScript définit le comportement d'interaction utilisateur, tel que cliquer sur les boutons, faire glisser une image ou déplacer une souris. JavaScript fonctionne avec DOM, associant des actions à différents événements (souris sur, glisser et cliquer).

Recommandations d'outils

Un bon environnement de développement JavaScript et l'éditeur de code peuvent considérablement améliorer l'efficacité du développement. Il est recommandé d'utiliser Mozilla Firefox pour le débogage et d'utiliser un éditeur de code qui prend en charge la mise en évidence de la syntaxe.

Chapitre 2: Modèle d'objet de document (DOM)

DOM décrit une page HTML comme un ensemble d'objets qui peuvent être accessibles par les programmes JavaScript, qui mappe les éléments de page à une structure d'arbre (arbre Dom). Chaque élément devient un nœud d'élément et chaque fragment de texte devient un nœud de texte. La structure de l'arbre DOM correspond au niveau de nidification des balises HTML. Le HTML efficace et correctement imbriqué est essentiel pour construire le bon arbre Dom.

Voyager à travers l'arbre Dom

Voyager à travers l'arbre DOM fait référence au processus d'accès à chaque nœud dans l'arborescence en séquence. Ceci est généralement mis en œuvre en utilisant récursivement. La méthode document.getElementById() est utilisée pour obtenir l'élément de l'ID spécifié, et la méthode document.getElementsByTagName() est utilisée pour obtenir tous les éléments du type spécifié.

Éléments DOM de fonctionnement

Vous pouvez utiliser JavaScript pour modifier les propriétés, le contenu du texte et les propriétés de style des éléments DOM. La méthode appendChild() est utilisée pour ajouter de nouveaux nœuds enfants, la méthode insertBefore() est utilisée pour insérer de nouveaux nœuds enfants avant le nœud spécifié, la méthode removeChild() est utilisée pour supprimer les nœuds enfants et la méthode cloneNode() est utilisée pour reproduire les nœuds.

DOM Opération Exemple: forme étendue et commutation d'image modulaire

Ce chapitre fournit deux exemples: une forme extensible qui permet aux utilisateurs d'ajouter dynamiquement des champs d'entrée; et une commutation d'image modulaire qui détecte et définit automatiquement les effets de commutation d'image via JavaScript sans modifier manuellement le code HTML.

Chapitre 3: Gestion des événements DOM

Les événements sont des actions qui se produisent sur des éléments, tels que les clics de souris, les modifications de formulaire, etc. Le cœur de la programmation DHTML est le traitement d'événements, c'est-à-dire en écrivant du code pour répondre aux événements.

Méthode de gestion des événements

La gestion des événements DOM moderne utilise la méthode addEventListener() (et la méthode attachEvent de IE) pour attacher un écouteur d'événements à un élément. La fonction d'écoute d'événements reçoit un objet d'événement en tant que paramètre, qui contient des informations détaillées sur l'événement, telles que les éléments cibles, les coordonnées de souris, etc.

Événements Bublant et bloquant le comportement par défaut

L'événement Bubble fait référence au processus dans lequel un événement bouillonne vers le haut de l'élément cible à son élément ancêtre. La méthode stopPropagation() peut empêcher l'événement de bouillonner. La méthode preventDefault() peut bloquer le comportement par défaut des événements, tels que la prévention des sauts de liaison.

Manipulation des événements de navigateur transversal

Pour s'assurer que le code fonctionne correctement dans différents navigateurs, les méthodes de traitement des événements compatibles entre les navigateurs doivent être utilisées, comme l'utilisation de la fonction addEvent() pour gérer uniformément les méthodes addEventListener() et attachEvent().

Exemple de traitement des événements: liens intelligents et mise en surbrillance de la table

Ce chapitre fournit deux exemples: liens intelligents, permettant aux utilisateurs de choisir d'ouvrir un lien dans une nouvelle fenêtre;

Chapitre 4: Détection des fonctionnalités du navigateur

Afin de garantir que les améliorations du DHTML ne causent pas de problèmes dans les navigateurs qui ne prennent pas en charge ces fonctions, une détection des fonctionnalités du navigateur est requise.

Détection de propriétés

La détection des fonctionnalités fait référence à une méthode qui vérifie directement si un navigateur prend en charge une fonction spécifique, plutôt que de déduire la fonctionnalité qu'il prend en charge en identifiant le type de navigateur. Cela comprend la vérification si la méthode et l'attribut Dom existent.

Exemple de détection des fonctionnalités: image de défilement

Ce chapitre fournit un exemple d'image défilable qui utilise la détection des fonctionnalités pour garantir que le code fonctionne correctement dans différents navigateurs et gérer les différences de navigateur dans l'acquisition de coordonnées de souris.

Les chapitres restants de ce livre exploreront davantage des techniques et des applications plus avancées du DHTML.

(L'image reste le format et la position d'origine inchangés)

L'image ne peut pas être affichée car le lien photo ne peut pas être accessible. Veuillez vous assurer que le lien de l'image est valide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!