Guide des débutants du DHTML

Points de base

• HTML dynamique (DHTML) n'est pas un langage de programmation indépendant, mais une technologie d'amélioration HTML.
• La fonction principale de DHTML est de modifier dynamiquement l'apparence et le contenu de la page Web sans recharger la page, qui repose sur des fonctionnalités intégrées du navigateur de quatrième génération.
• L'implémentation de DHTML varie considérablement du navigateur à un navigateur; <layer></layer> <div> <code><table> Afin d'atteindre la compatibilité entre les navigateurs, DHTML doit utiliser différentes technologies de script selon le navigateur, ce qui met en évidence l'importance des technologies de détection du navigateur telles que la détection d'objets dans des scripts efficaces. Malgré l'émergence sans fin de nouvelles technologies telles que Ajax et JQuery, le DHTML est toujours pertinent et est la compétence de base pour créer du contenu Web dynamique interactif. <li> </li> <li> En tant que webmaster autoproclamé, je fais de mon mieux pour suivre les dernières technologies Web. J'apprends actuellement DHTML, c'est-à-dire HTML dynamique. Après avoir beaucoup entendu parler de cette technologie et de la façon dont il finira par révolutionner Internet, j'ai pensé que je devais me lever du canapé et commencer à l'apprendre ou je ne serais plus qualifié pour m'appeler «administrateur de site Web». Si vous ne savez rien de DHTML comme moi, ce tutoriel vous convient. Profitez du processus d'apprentissage, n'hésitez pas à m'envoyer un e-mail si vous avez des questions. </li> C'est une bonne question et j'avoue que j'ai du mal à trouver une réponse directe. Je me souviens avoir vu un article sur le groupe de nouvelles JavaScript essayant de répondre à cette question avec la réponse suivante: <p> </p> <p> "Dhtml est une combinaison de HTML et JavaScript" </p> Je me suis dit: "N'est-ce pas une page Web avec JavaScript?" J'ai recherché des centaines de résultats de recherche sur les moteurs de recherche, à la recherche de la réponse insaisissable, mais je ne le trouvais toujours pas. Alors j'ai pensé, peu importe ce que c'est, j'apprendrai d'abord DHTML, puis je trouvera ce que c'est! Maintenant que je suis programmeur DHTML, je pense que je suis prêt à vous fournir une belle définition DHTML: <p> <q> </q> "DHTML est une combinaison de plusieurs fonctionnalités de navigateur intégrées dans la quatrième génération de navigateurs qui rendent les pages Web plus dynamiques" </p> que vous voyez, DHTML n'est pas un langage de script (tel que JavaScript), mais est juste une caractéristique de navigateur - ou amélioration - qui permet à votre utilisateur d'être dynamique. Ce que vous devez vraiment apprendre n'est pas du DHTML lui-même, mais la syntaxe dont vous avez besoin pour utiliser DHTML. Avant toute autre chose, vous voudrez peut-être accéder rapidement à Dynamic Drive et voir ce que cette langue peut faire. <p></p> <p> Comme je l'ai dit, DHTML est une collection de fonctions qui ensemble rendent votre page Web dynamique. Je pense qu'il est important maintenant de définir ce que signifie le créateur de DHTML en disant "dynamique". "Dynamic" est défini comme la capacité d'un navigateur à modifier l'apparence et le style d'une page Web après le chargement d'un document. Je me souviens que lorsque j'apprenais JavaScript, on m'a appris que je pouvais créer des pages Web dynamiquement à l'aide de la méthode <code>document.write() de JavaScript. Par exemple:

  document.write("This is text created on the fly!")

  Je me souviens me dire: "Ce n'est pas mal." Mais que se passe-t-il si le contenu que je veux créer est non seulement dynamique, mais aussi généré à la demande? J'étais toujours naïf à ce moment-là et j'ai essayé de le faire en nilitant le code ci-dessus dans une fonction et en l'appelant via le bouton de formulaire:

  Appuyer sur le bouton est une déception. Toute ma page Web a été effacée, ne laissant que le texte généré par la fonction.

  C'est le passé. Maintenant, avec l'introduction de DHTML, je peux modifier le contenu de la page Web à tout moment comme je le souhaite sans que le navigateur efface tout le reste. C'est cela que DHTML. La capacité d'un navigateur à modifier l'apparence et le style même après le chargement du document.

  Puisque je vous ai déjà excité, je pense être juste, je devrais y verser de l'eau froide. La technologie DHTML est actuellement en développement, et NS 4 et IE 4 varient considérablement dans leur mise en œuvre de cette grande technologie. Il n'est actuellement pas possible d'écrire un morceau de code DHTML et de s'attendre à ce qu'il fonctionne correctement dans les deux navigateurs. De plus, ces deux navigateurs sont à des stades différents de leur développement DHTML; DHTML dans IE 4 est beaucoup plus puissant et plus polyvalent que le DHTML dans NS 4, basé sur mes propres connaissances et ce que j'entends. Je ne veux pas aider à répandre une publicité, donc je suis ici pour y aller.

  Cela peut être une bonne ou une mauvaise chose, selon votre point de vue. Le DHTML dans NS 4 est très simple et peut essentiellement se résumer en un mot - couche. J'ai été surpris moi-même, mais c'était vrai - NS 4 s'appuie entièrement sur une nouvelle étiquette appelée <layer></layer> pour jouer la magie de son DHTML. Cette nouvelle balise est dynamique car elle peut être placée n'importe où sur la page Web (sans autre chose), peut être déplacée, son contenu interne peut être mis à jour à la demande, etc.

  Syntaxe de base

  <layer></layer> La syntaxe de base des balises ne pourrait pas être simple (il semble que toute balise en html soit compliquée!):

  <calque> Texte dans le calque <code><layer>层内文本</layer>

  La balise

  <layer></layer> est une balise de contenu, ce qui signifie que vous pouvez y ajouter du contenu (comme <table>). Continuez à essayer d'insérer le code ci-dessus dans votre page ... vous remarquerez que le texte à l'intérieur du calque flotte et chevauche avec d'autres textes. Imaginez qu'une couche est comme un morceau de papier, situé au-dessus du reste de la page, et ne prend pas de place dans le flux de documents. <h5> Attributs de calque </h5> <p> Une seule couche peut être ennuyeuse, et encore moins inutile. Heureusement, il a plus de fonctionnalités. La couche prend en charge les propriétés, vous permettant de la localiser à l'aide de systèmes de coordonnées X et Y, de lui fournir un arrière-plan, de le couper (en rendant une zone spécifique de la couche visible), le cacher, etc. J'ai répertorié les propriétés de calque les plus importantes ci-dessous: </p> <table> <thead> <tr> <th>层属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>id 层的名称，用于在脚本中标识它 left 层相对于x坐标的位置 top 层相对于y坐标的位置 width 层的宽度，以px或%为单位 height 层的高度，以px或%为单位 bgColor 层的背景颜色 background 层的背景图像 src 层中包含的外部HTML文档

  Vous pouvez mélanger et faire correspondre différents attributs à volonté.

  Cliquez ici pour afficher un exemple de calque en utilisant certaines des propriétés ci-dessus

  Notez que je n'ai pas spécifié les attributs left et top. Lorsque vous ne spécifiez pas, le calque sera placé où vous le définissez.

  Couche de script

  C'est l'une des choses les plus importantes à propos des couches - comment les scripter. Après tout, c'est le script qui rend les couches actives. Pour accéder à une couche, vous devez utiliser la syntaxe suivante:

  document.layername

  L'accès à la couche n'est que la première étape. Une fois que vous avez accédé à une couche, vous pouvez continuer à manipuler l'une des propriétés de la couche pour produire des effets dynamiques.

  Cliquez ici pour afficher un exemple où la couleur d'arrière-plan du calque passe entre le rouge et le bleu.

  Toutes les couches de propriétés sont lisibles et inscriptibles, alors assurez-vous d'essayer chaque propriété!

  Lorsque j'ai commencé à apprendre la mise en œuvre de IE 4 pour DHTML, j'ai réalisé que c'était beaucoup plus compliqué que la version correspondante NS. DHTML dans IE ne dépend d'aucune balise, mais de nouveaux objets et attributs générés par des balises HTML courantes (telles que

  et ) Vous avez l'habitude d'utiliser. Il est plus puissant, mais il est également plus difficile à maîtriser.

  IE 4 Objet de style

  Les éléments HTML dans IE 4 prennent désormais en charge un objet de style, qui est essentiellement un objet "dynamique" pour manipuler dynamiquement l'apparence et la sensation de l'élément. Comme la balise <layer></layer>, un élément peut également se voir attribuer un attribut "ID", qui peut ensuite être utilisé pour l'identifier pendant les scripts. Par exemple:

  <div id="adiv"> </div>

  Dans votre script, la syntaxe requise pour accéder à l'objet de style "ADIV" est la suivante:

  adiv.style <code>adiv.style

  Les objets de style

  contiennent de nombreuses propriétés, en manipulant ces propriétés, vous pouvez modifier dynamiquement l'apparence des éléments. Je vais maintenant montrer certaines de ces propriétés:

  Propriétés importantes des objets de style

  1. BackgroundColor <code>backgroundColor Couleur d'arrière-plan de l'élément
  2. BackgroundImage <code>backgroundImage Image d'arrière-plan de l'élément
  3. Couleur <code>color Couleur de l'élément
  4. Position <code>position Type de position de l'élément. Les valeurs acceptables sont "absolues" et "relatives"
  5. pixelwidth <code>pixelWidth largeur d'élément
  6. pixelHeight <code>pixelHeight hauteur de l'élément
  7. pixelleft <code>pixelLeft position de l'élément par rapport à la coordonnée x
  8. Pixeltop <code>pixelTop Position de l'élément par rapport aux coordonnées y

  Les attributs ci-dessus ne représentent qu'un sous-ensemble de tous les attributs pris en charge, mais ce sont les attributs les plus couramment utilisés. La syntaxe de base pour manipuler n'importe quel attribut de style est la même, je le montrerai plus tard. En accédant à ces propriétés, nous pouvons modifier l'apparence et le style de la plupart des éléments HTML (plutôt que la balise <layer></layer> dans netscape!).

  Cliquez ici pour voir une démonstration simple

  Veuillez noter comment j'ai changé la couleur du texte:

  Sometext.style.color = 'Red' <code>sometext.style.color = 'red'

  J'utilise d'abord l'ID de l'élément pour y accéder, puis à travers l'objet de style, et enfin à travers l'attribut de couleur du style, j'ai pu facilement changer la couleur du texte au besoin!

  Tous les attributs de style sont en lecture et accessibles de manière similaire: élément id- & gt;

  Cliquez ici pour voir un autre exemple qui élargit l'image lorsque la souris le plane et la restaure à sa taille d'origine lorsque la souris se déplace.

  Oui, je sais que ce n'est pas l'exemple le plus pratique au monde, mais cela illustre très bien le fonctionnement du DHTML. Les images changent la taille selon les besoins sans recharger les documents. C'est quelque chose que JavaScript ne peut pas faire seul.

  Si vous n'avez pas été effrayé par la syntaxe et les différences fonctionnelles dans DHTML dans NS 4 et IE 4, alors vous pouvez apprendre à créer dynamiquement du contenu sur la page ou à apporter des modifications au besoin!

  Contenu dynamique dans ns 4

  Changer ce qui est dans NS 4 implique - vous l'avez deviné - Layer <code>layer Tags. Toutes les couches sont considérées par le navigateur NS comme différentes entités du reste de la page, et ils ont leur propre objet de document (qui à son tour contient d'autres objets pris en charge par le document). Comprendre cela est très important car le fait que la couche contient un autre objet de document permet de créer un contenu dynamique dans NS. Je vais d'abord construire un calque de base, puis montrer comment changer ce qu'il y a à l'intérieur:

  <coucheer height="30" id="alayer" width="100%"> <code><layer height="30" id="alayer" width="100%"></layer>

  Êtes-vous prêt à accéder à l'objet de document dans la couche ci-dessus? Voici la syntaxe requise:

  document.alayer.document document.alayer.Document

  Donc, avec ces informations, je pouvais écrire un script qui modifie le contenu de la couche toutes les 3 secondes.

  Cliquez ici pour voir un exemple de la façon de procéder dans Netscape.

  Le texte est généré et effacé dynamiquement, sans recharger le document!

  Contenu dynamique dans IE 4

  Dans IE 4, le contenu dynamique est implémenté via un attribut spécial appelé innerHTML, qui existe dans les balises <span></span> et

  . Définissez simplement cette propriété sur la nouvelle valeur HTML et le contenu à l'intérieur <span></span> ou

  sera immédiatement mis à jour vers la nouvelle valeur! Je vais illustrer comment procéder en modifiant l'exemple ci-dessus pour créer du contenu dynamique pour les utilisateurs de IE 4: cliquez ici pour voir les exemples pour IE.

  Le même résultat est tout simplement différent dans l'implémentation!

  Si vous aimez utiliser des animations, vous serez heureux de savoir qu'avec DHTML, la page Web entière est maintenant votre toile! Vous pouvez créer du contenu libre de voler à l'écran. Dans Netscape, cela se fait en fonctionnant les propriétés <layer></layer> et left de la balise top. Dans IE 4, la même chose se fait en modifiant les propriétés pixelLeft et pixelTop de l'objet de style.

  Déplacer les éléments dans NS 4

  Rappel Dans la leçon 2, la couche prend en charge les propriétés left et top, qui contrôlent leurs décalages par rapport au coin supérieur gauche du document. Eh bien, en utilisant des opérations mathématiques simples et quelques lignes de scripts, nous pouvons mettre à jour ces propriétés dynamiquement afin que les couches se déplacent! L'exemple suivant modifie la propriété left de la couche afin qu'elle se déplace horizontalement lorsque le bouton est enfoncé.

  Cliquez ici pour afficher l'exemple.

  Vous voyez, tout ce que je fais est d'ajouter constamment à la propriété left de "l'espace" pour le faire bouger et remettre la propriété à sa valeur d'origine lorsque je souhaite renvoyer la couche à sa position initiale.

  Déplacer les éléments dans IE 4

  Soit dit en passant, le jour où NS et IE sont d'accord sur une implémentation de DHTML est le jour où je peux arrêter d'écrire deux versions de chaque chose (il suffit de parcourir ma frustration). Le déplacement d'un élément dans IE 4 nécessite d'abord d'abord d'envelopper cet élément dans une <span></span> ou

  positionnée, puis de modifier les propriétés <span></span> et <div> de <code>pixelLeft ou pixelTop. Cela semble compliqué, mais c'est en fait très simple.

  Cliquez ici pour afficher l'exemple.

  Ce que j'ai fait en premier, c'est de définir le <div> externe appelé "spatial" sur la position relative, qui est nécessaire pour rendre l'élément mobile (vous pouvez également le définir sur la valeur "absolue"). Ensuite, en manipulant l'attribut <code>pixelWidth de son objet de style, les éléments se déplacent.

  Avant que le "vrai" croisement DHTML ne soit disponible (en d'autres termes, lorsque NS et IE sont de retour à Sanity), le DHTML transversal signifie essentiellement en utilisant diverses techniques de script que vous choisissez au cours de ces années JavaScript pour renifler le navigateur que l'utilisateur utilise et exécute le code conçu pour ce solider. Dans cette leçon, je vais d'abord expliquer un moyen de créer une couche "cross-browser", puis vous montrer une technique de script que j'ai apprise récemment qui vous permet de renifler facilement le type de navigateur.

  Créez une couche "cross-browser"

  D'accord, nous avons des balises NS compréhension <layer></layer>, c'est-à-dire compréhension <span></span> et <div>. Si nous voulons créer un effet DHTML simple, comme les images en mouvement, nous devons généralement utiliser deux balises - une balise <code>layer pour NS 4, et une balise div ou span pour IE 4. Pas très joli, non? Eh bien, j'ai récemment appris qu'il existe en fait un moyen de créer une couche "croisement" avec une balise, bien que ce soit un peu buggy en termes de NS. Apparemment, NS 4 traite absolument positionné div comme le même que la couche. Ainsi, sans plus tarder, voici un exemple de couche de navigateur croisé: <div id="crosslayer" style="position:absolute"> </div> ns 4 traite le div <code>div ci-dessus comme exactement le même que la couche. Comme toute autre couche, pour y accéder, nous devons d'abord passer par l'objet de document, puis l'ID de la couche:

  document.crosslayer <code>document.crosslayer

  Dans IE 4, nous utiliserons simplement l'ID de div <code>div:

  CROSSLAYER <code>crosslayer

  J'ai constaté que dans NS, spécifiant les couches de cette manière, bien que pratique en termes de compatibilité entre les navigateurs, présente un inconvénient majeur. De telles couches ne fonctionnent pas toujours comme des couches normales et n'écrasent parfois même pas le navigateur. Préparez-vous pour des situations inattendues!

  Sniffing du navigateur - Détection des objets

  Jusqu'à récemment, chaque fois que je voulais déterminer le type de navigateur de l'utilisateur, j'ai utilisé l'objet Navigator <code>navigator comme la plupart des programmeurs JavaScript. Ce qui suit décrit l'utilisation de cet objet pour renifler NS 4 et IE 4:

  var ns4 = (navigator.appname == "netscape" && navigator.appversion & gt; = 4) <code>var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4) var ie4 = (Navigator.appname == "Microsoft Internet Explorer" && navigator.appversion & gt; = 4) <code>var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)

  Je déteste personnellement utiliser Navigator <code>navigator objets - il est trop compliqué à utiliser (voir la confusion ci-dessus!). Ok, j'ai de bonnes nouvelles à vous dire. Il existe en fait un moyen plus rapide de renifler divers navigateurs, qui est appelé détection d'objets.

  L'idée est basée sur le fonctionnement de JavaScript. Si le navigateur ne prend pas en charge un objet spécifique, JavaScript renvoie null <code>null lorsque vous le référez. Comprenant ce fait, nous pouvons utiliser des références d'objets (au lieu de Navigator <code>if objets) dans l'instruction si <code>navigator pour déterminer le navigateur de l'utilisateur.

  donnons un exemple. Nous savons que NS 3 et IE 4 prennent en charge Document.images <code>document.images objets. Si nous voulons renifler ces navigateurs, nous faisons ceci:

  if (document.images) alert ("vous utilisez ns 3 ou ie 4") <code>if (document.images) alert("You are using NS 3 or IE 4 ")

  La traduction de ce qui précède en anglais signifie: "Si le navigateur prend en charge des images <code>images objets (seuls le support NS 3 et IE 4), un message d'avertissement est émis".

  Considérez la détection d'objets comme un moyen indirect de déterminer le type de navigateur de l'utilisateur. La détection d'objets n'est pas une détermination directe du nom et de la version du navigateur de l'utilisateur (via Navigator <code>navigator objet), mais une technologie de reniflement du navigateur plus général et plus gênante.

  Alors, comment utilisons-nous la détection d'objets pour renifler NS 4 et IE 4? Eh bien, seul NS 4 prend en charge document.layers <code>document.layers objets, uniquement IE 4 prend en charge document.all <code>document.all. Nous pouvons utiliser ces connaissances pour déterminer facilement si un utilisateur utilise NS 4, c'est-à-dire 4 ou les deux:

  if (document.layers) alert ("vous utilisez ns 4") <code>if (document.layers) alert("You are using NS 4 ") if (document.all) alert ("vous utilisez IE 4") <code>if (document.all) alert("You are using IE 4 ")

  if (document.layers || document.all) alert ("vous utilisez ns 4 ou ie 4") <code>if (document.layers || document.all) alert("You are using either NS 4 or IE 4 ")

  Maintenant, vous n'avez plus à revenir à l'objet désordonné Navigator <code>navigator pour le reniflement du navigateur!

  Ressources DHTML

  Évidemment, ce tutoriel n'est qu'une introduction au DHTML. Voici quelques excellentes ressources pour poursuivre votre parcours d'apprentissage DHTML:

  • Exemple dhtml du lecteur dynamique
  • Guide DHTML de MSDN

  FAQ HTML (DHTML) dynamique

  Quelle est la différence entre HTML et DHTML?

  HTML (Hypertext Buquup Language) est un langage de balisage standard utilisé pour créer des pages Web. Il est statique, ce qui signifie qu'il ne changera pas une fois qu'il se charge. DHTML (HTML dynamique), d'autre part, n'est pas une langue autonome, mais une extension de HTML. Il combine HTML, JavaScript et CSS pour créer du contenu Web interactif et dynamique. Cela signifie que DHTML permet aux pages Web d'apporter des modifications et d'interagir avec les utilisateurs sans recharger la page.

  Comment DHTML améliore-t-il l'interaction utilisateur?

  DHTML améliore l'interaction utilisateur en permettant aux pages Web de réagir à la saisie de l'utilisateur sans recharger la page. Ceci est réalisé en utilisant JavaScript et CSS. Par exemple, DHTML peut être utilisé pour créer des menus déroulants, des animations et d'autres fonctionnalités interactives. Cela rend l'expérience utilisateur plus attrayante et efficace.

  Puis-je utiliser DHTML avec d'autres langages de programmation?

  Oui, le DHTML peut être utilisé avec d'autres langages de programmation. Bien que le DHTML lui-même soit une combinaison de HTML, CSS et JavaScript, il peut également interagir avec des langages tels que PHP et ASP.NET. Cela permet la création d'applications Web plus complexes et plus dynamiques.

  DHTML est toujours pertinent aujourd'hui?

  Bien que de nouvelles technologies telles que Ajax et JQuery soient devenues populaires, le DHTML est toujours pertinent et largement utilisé. C'est la partie fondamentale du développement Web, et la compréhension du DHTML peut fournir une base solide pour apprendre les technologies Web plus avancées.

  Quelles sont les utilisations courantes de DHTML?

  DHTML est souvent utilisé pour créer du contenu Web interactif. Cela comprend les menus déroulants, la vérification du formulaire, les animations et le défilement d'image, etc. Il peut également être utilisé pour créer des applications à page unique où le site ou l'application entier est chargé dans une page HTML.

  Comment le DHTML améliore-t-il les performances du site Web?

  DHTML peut améliorer considérablement les performances du site Web en permettant aux pages Web de réagir à la saisie des utilisateurs sans recharger la page. Cela réduit la charge du serveur et rend l'expérience utilisateur plus fluide et plus rapide.

  Quels sont les composants de DHTML?

  DHTML se compose de quatre composants principaux: HTML, CSS, JavaScript et Document Object Model (DOM). HTML fournit la structure de la page, CSS contrôle la présentation, JavaScript permet l'interactivité et Dom permet la manipulation des éléments de la page.

  Comment DHTML fonctionne-t-il avec le modèle d'objet de document (DOM)?

  Le modèle d'objet de document (DOM) est un élément clé de DHTML. Il fournit une représentation structurée d'une page Web qui peut être exploitée à l'aide de JavaScript. Cela permet de modifier dynamiquement les pages en fonction de l'entrée utilisateur.

  DHTML est-il difficile à apprendre?

  La difficulté d'apprendre le DHTML varie en fonction de vos connaissances antérieures et de votre expérience de développement Web. Si vous connaissez déjà HTML, CSS et JavaScript, l'apprentissage du DHTML sera une extension naturelle de ces compétences. Cependant, si vous n'êtes pas familier avec le développement Web, cela peut prendre un certain temps pour maîtriser ces concepts.

  Où puis-je en savoir plus sur DHTML?

  Il existe de nombreuses ressources disponibles pour apprendre le DHTML sur Internet. Des sites Web tels que Geeksforgeeks, JavatPoint et TutorialSpoint fournissent des guides et des tutoriels complets. De plus, vous pouvez trouver de nombreux tutoriels vidéo sur des plates-formes comme YouTube.