Amélioration du balisage structurel avec JavaScript

Points clés

Le balise structurée améliorée avec JavaScript peut considérablement améliorer l'accessibilité et la maintenabilité du contenu de la page Web tout en réduisant la taille du fichier.
JavaScript peut être utilisé efficacement pour ajouter dynamiquement la fonctionnalité aux éléments HTML, tels que l'insertion automatique des liens de référence en références de blocs à l'aide de l'attribut
• . cite
L'intégration de JavaScript avec des balises structurées vous permet de créer des interfaces utilisateur dynamiques, telles que des panneaux d'onglet sans rafraîchissement de page.
Il est crucial de s'assurer que les améliorations JavaScript ne gênent pas la fonctionnalité de base des pages Web; même si JavaScript est désactivé, la page doit rester fonctionnelle.
Les technologies JavaScript avancées telles que la gestion des événements et les opérations DOM peuvent être utilisées sans interférer avec les scripts existants ou les paramètres de navigateur, assurer la compatibilité et améliorer l'expérience utilisateur.

Il y a quelques années, la compétence clé dans l'écriture de HTML était de maîtriser les compétences de table suffisamment pour convaincre deux navigateurs majeurs de fonctionner plus ou moins comme vous le souhaitez. Le Web moderne est très différent, et la qualité de votre balisage dépend de la façon dont vous utilisez habilement des éléments structurels tels que des titres, des paragraphes et des listes pour décrire votre contenu. Les avantages de cette approche ont été expliqués à plusieurs reprises: plus facile à maintenir le code, des tailles de fichiers plus petites, une meilleure accessibilité et la possibilité de contrôler l'apparence d'un site Web à partir d'une seule feuille de style, plutôt que de la modifier dans un énorme bloc de blocs tagués couvrant plusieurs pages. Un avantage moins souvent discuté est que les balises bien structurées ouvrent la porte à des améliorations supplémentaires du site Web basées sur la technologie tierce Web côté client, JavaScript. Cet article explorera deux façons dont les balises JavaScript et bien structurées peuvent fonctionner ensemble. Le premier exemple montrera comment améliorer les références de blocs en se connectant à son attribut CITE. Le deuxième exemple démontrera un script "meilleure pratique" pour créer des liens qui basculent les panneaux visibles sur la page.

Référence du bloc

Pour notre premier exemple, jetons un coup d'œil aux éléments de référence en blocs. Cet élément est souvent confondu avec l'application de l'indentation, mais son utilisation correcte est que les références de marquage qui devraient être visuellement séparées du texte environnant. La balise de référence de bloc de démarrage peut avoir un attribut CITE en option qui doit contenir l'URL de la page source de citation. Le seul problème avec la propriété CITE est que le navigateur l'ignore complètement. Les puristes de tag peuvent l'apprécier, mais d'un point de vue purement pratique, l'utilisation n'a pas d'avantages au-delà de la satisfaction de l'utilisation de la bonne marque. C'est là que JavaScript entre en jeu. En utilisant DOM, vous pouvez ajouter un lien à la source de la citation au bas de n'importe quelle référence de bloc avec l'attribut CITE. Voici le code de fonction qui fait ceci:

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

Examinons de plus près le corps de la fonction.

var quotes = document.getElementsByTagName('blockquote');

Cette ligne de code utilise la méthode DOM getElementsByTagName pour trouver tous les éléments de référence de bloc dans la page actuelle et les attribuer à un tableau nommé quotes (en fait htmlcollection, mais c'est une structure de données qui se comporte comme un tableau).

for (var i = 0; i < quotes.length; i ) { ... }

Maintenant, nous traversons le nœud de référence du bloc collecté. Chaque fois que nous boucons, nous utilisons la méthode getAttribute pour récupérer l'attribut cite de l'élément. Si la propriété CITE est définie, nous passerons à la partie intéressante: créer un lien "source" au bas de la citation.

var a = document.createElement('a'); a.setAttribute('href', cite); a.setAttribute('title', cite);

Lorsque nous voulons ajouter dynamiquement de nouveaux éléments HTML à la page à l'aide du DOM, la bonne façon de le faire est de créer ces éléments par programme à l'aide de la méthode createElement. Les lignes ci-dessus créent un nouvel élément «A» et l'attribuent les attributs HREF et Title, qui sont tous deux définis comme URL de la citation.

a.appendChild(document.createTextNode('Source'));

Nous voulons que l'élément de lien contienne un texte que les utilisateurs peuvent cliquer pour activer le lien. Le nœud de texte d'origine est créé à l'aide de la méthode createTextNode. DOM traite les éléments HTML comme composant un arbre, donc pour ajouter du texte à notre lien nouvellement créé, nous devons appeler sa méthode appendChild.

var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a);

Pour nous permettre de styliser de nouveaux liens de manière flexible à l'aide de CSS, nous pouvons l'envelopper dans un élément de paragraphe. Le code ci-dessus crée un tel élément, définit sa classe sur "Blockquotesource" pour fournir un crochet CSS, puis ajoute le lien à lui en utilisant appendChild. À ce stade, le nouveau fragment de document que nous avons construit est équivalent à la HTML suivante:

<code><p> <a href="https://www.php.cn/link/a725c77dfdec0a53250d0709ed36e1fe" title="https://www.php.cn/link/a725c77dfdec0a53250d0709ed36e1fe">Source</a> </p>

À l'heure actuelle, notre extrait est toujours invisible car bien que nous l'ayons créé en mémoire, nous ne l'avons pas encore attachée à notre documentation. C'est ce que fait la dernière ligne de la fonction:

quotes[i].appendChild(p);

quotes[i] appendChild est l'élément de référence de bloc sur lequel nous travaillons actuellement.

Fixez notre nouveau paragraphe à la référence du bloc afin qu'il soit visible.

Il y a deux étapes supplémentaires. Tout d'abord, nous devons exécuter la fonction ci-dessus lorsque la page est chargée pour la première fois. Il existe de nombreuses façons d'y parvenir. Le moyen le plus simple est d'ajouter un appel à la fonction à la propriété Onload de l'élément corporel du document:

Cela fonctionne bien, mais nous pouvons le faire mieux. Étant donné que nos fonctions JavaScript seront hébergées dans des fichiers externes, ne serait-il pas plus significatif pour que les fichiers externes entraînent l'exécution des fonctions? L'approche naïve consiste à utiliser le code JavaScript suivant:

window.onload = extractBlockquoteCitations;

//

Notez que nous fournissons le nom de la fonction, mais ignorez le () à la fin, ce qui entraînera l'exécution de la fonction. JavaScript prend en charge le style de programmation fonctionnelle, ce qui signifie que les fonctions peuvent être transmises sous forme de paramètres, stockées dans des structures de données, et peuvent même être renvoyées à partir d'autres fonctions comme tout autre objet de données. Je vais discuter de ce sujet davantage dans les prochains articles, mais le résultat est que l'attribution de la fonction à window.onload le fera exécuter après le chargement de la page.

Cependant, cette solution présente également un inconvénient. Si vous souhaitez utiliser plusieurs scripts exécutés une fois la charge de page terminée sur une page donnée, le dernier script qui s'inscrit à window.onload sera le seul script qui s'exécute. Ce qui est vraiment nécessaire, c'est un moyen de fixer notre fonction au gestionnaire Onload de l'objet Window sans écraser ce qui est déjà là. Malheureusement, Internet Explorer et d'autres navigateurs diffèrent dans la façon de gérer de telles pièces jointes dynamiques; Ce qui suit est la fonction:

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

Ce qui suit est le code pour ajouter notre fonction BlockQuotes à l'événement de charge de l'objet de fenêtre:

addEvent(window, 'load', extractBlockquoteCitations);

La dernière étape consiste à coiffer la citation avec CSS. Voici un extrait de code CSS relativement simple qui gère les références de blocs:

function addEvent(obj, evType, fn){
    if (obj.addEventListener){
        obj.addEventListener(evType, fn, false);
        return true;
    } else if (obj.attachEvent){
        var r = obj.attachEvent("on"+evType, fn);
        return r;
    } else {
        return false;
    }
}

Le produit fini peut être consulté ici.

Commutateur de panneau

Maintenant, considérons un effet dynamique plus avancé - le commutateur de panneau. L'objectif ici est de placer plusieurs panneaux sur la page (en utilisant des balises Div) et d'afficher un seul panneau à la fois. Un ensemble de liens toujours visibles peut être utilisé pour sélectionner le panneau actuellement affiché. Ceci est utile pour créer des interfaces à onglets pour parcourir une gamme d'écrans associés sans rafraîchir la page à chaque fois que vous sélectionnez un onglet.

Chaque fois que vous utilisez JavaScript pour améliorer votre page, vous devez vous souvenir d'une bonne règle selon laquelle la page doit toujours être disponible même si JavaScript est désactivé. Dans ce cas, cela signifie que la solution idéale devrait fonctionner comme annoncé lorsque JavaScript est activé, mais dans un environnement non javascript, tous les panneaux doivent être affichés sur la page, chaque lien se liant directement au panneau pertinent et en utilisant des extraits URL.

Alors, c'est la marque la plus simple qui puisse fonctionner:

` Panneau 1 | Panneau 2

Il s'agit du panneau 1

Il s'agit du panneau 2

`

Étonnamment, ce qui précède est presque tout le balisage dont nous avons besoin pour accrocher un javascript pour créer l'effet souhaité. Nous pouvons continuer avec le code ci-dessus, mais ajoutons une classe au lien pour indiquer clairement que nous voulons effectuer des opérations spéciales sur eux:

<a href="https://www.php.cn/link/65dfa16ba6de9bdb34ea435c9fe2a425" class="toggle">Panel 1</a> | <a href="https://www.php.cn/link/379d08c7a38df48c777c07ea990a3bcf" class="toggle">Panel 2</a>

//

Ce qui suit est de savoir comment fonctionne JavaScript. Lorsque la page se charge, le script analysera tous les liens sur la page pour tous les liens qui contiennent "basculer" dans sa classe. Pour tous les liens trouvés, l'attribut HREF est vérifié et l'élément spécifié est positionné et ajouté au tableau d'élément cible. Tous les autres éléments sauf le premier élément seront "fermés", donc lorsque la page se chargera, seul le premier panneau restera visible. Le lien lui-même attachera un gestionnaire d'événements JavaScript de sorte que lorsqu'ils sont activés, leurs panneaux correspondants peuvent être affichés.

Le script complet peut être consulté ici. Ce qui suit est une explication étape par étape du fonctionnement du code.

var et_toggleElements = [];

La première ligne crée un tableau mondial vide qui enregistrera des références aux éléments du panneau sur la page. Parce que ce script a des variables globales et de nombreuses fonctions, nous préfixons chaque fonction avec "ET_" (pour "Toggle facile") - ce qui réduit la possibilité que notre fonction aura des conflits de nom avec d'autres scripts chargés sur la même page.

/* Initialisation */ function et_init() { var i, link, id, target, first; first = true; for (i = 0; (link = document.links[i]); i ) { ... }

Jusqu'à présent, nous avons initialisé certaines variables, réglé le premier drapeau sur true et commencé à itération de tous les liens du document. La déclaration des variables utilisant var est très importante car elle garantit que la variable est locale à la fonction. Sans cette étape, ils seront accessibles à l'échelle mondiale et pourront interférer avec d'autres scripts.

if (/btoggleb/.exec(link.className)) { ... }

Cette condition vérifie si la classe actuellement liée contient "bascule". Nous utilisons des expressions régulières au lieu de simplement vérifier link.className == 'toggle', car les propriétés de classe peuvent contenir plusieurs classes, séparées par des espaces. /btoggleb/ est une expression régulière; b correspond partiellement à la "limite du mot", qui peut être le début ou la fin d'un espace ou d'une chaîne.

id = link.href.split('#')[1];

Si la liste de classe liée contient une bascule, nous supposons que la cible de la liaison est un extrait d'URL.

link.href.split('#') Divisez le lien href sur la balise # - nous savons que la partie qui nous intéresse est après #, nous indexons donc directement le tableau de résultat à l'aide de [1] pour extraire l'ID cible.

target = document.getElementById(id); et_toggleElements[et_toggleElements.length] = target;

Ici, nous faisons une autre supposition que le lien indique que l'élément existe. Nous utilisons la méthode getElementById() pour obtenir l'élément, puis l'ajoutons à notre tableau d'éléments en l'attribuant à un indice de tableau égal à la longueur actuelle du tableau. Cela fonctionne parce que le tableau commence à indexer à partir de 0, mais la longueur du tableau compte de 1; donc, la longueur du tableau est également l'indice de la fente vide suivante dans le tableau.

if (first) { first = false; } else { target.style.display = 'none'; }

C'est là que le premier logo que nous avons défini plus tôt entre en jeu. Nous voulons que le premier panneau sur le site Web reste visible, tandis que les autres sont cachés en utilisant JavaScript équivalent à "Afficher: aucun" dans CSS. Ce drapeau nous permet de le faire.

link.onclick = et_toggle;

Enfin, nous attribuons la fonction et_toggle à l'événement lié onclick, ce qui fait que la fonction est appelée chaque fois que le lien est activé. L'étape suivante consiste à définir la fonction.

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

Encore une fois, nous utilisons la méthode split pour extraire l'ID du lien.

Maintenant que nous savons quel panneau afficher, nous pouvons parcourir notre tableau d'éléments et fermer tous les autres éléments, sauf celui dont l'ID correspond à l'ID du panneau souhaité.

En retournant Faux, nous empêchons le lien de suivre réellement lorsqu'il est activé, ce qui peut provoquer des sauts indésirables sur les pages visionnées dans le navigateur.

La dernière étape consiste à enregistrer la fonction addEvent à l'événement de charge de la fenêtre en utilisant la fonction et_init décrite précédemment.

addEvent(window, 'load', et_init);

Vous pouvez afficher le code d'achèvement en cours d'exécution ici.

Conclusion

Dans cet article, nous voyons deux façons que les marqueurs bien structurés peuvent être utilisés avec JavaScript et DOM W3C pour des effets utiles. J'espère que ce post vous inspire à trouver de nouvelles façons d'utiliser JavaScript et le tagging intelligent.

lecture plus approfondie

Il existe de nombreux autres excellents exemples d'effets JavaScript basés sur des balises structurées. Voici quelques exemples qui valent la peine d'être prêts à faire attention:

• Aaron Boodman's Labels.js
• beaux titres de Stuart Langridge
• Aqlists de Stuart Langridge
• STUART LANGRIDGE'S SORTTtable
• Table des matières de Peter Paul-Koch

Des questions fréquemment posées sur les balises structurées en javascript

Que sont les balises structurées dans JavaScript?

Les balises structurées en JavaScript sont l'utilisation d'éléments HTML pour décrire le contenu et la structure d'un document Web. Ces éléments comprennent des titres, des paragraphes, des listes, etc. JavaScript peut manipuler ces éléments pour créer des pages Web dynamiques et interactives. Par exemple, JavaScript peut modifier le contenu d'un élément HTML, modifier le style (CSS) d'un élément HTML et même ajouter de nouveaux éléments HTML.

Comment JavaScript interagit-il avec les éléments HTML?

JavaScript interagit avec les éléments HTML via le modèle d'objet de document (DOM). DOM représente la structure d'une page Web, que JavaScript peut fonctionner. Par exemple, JavaScript peut utiliser la méthode document.createTextNode() pour créer un nouveau nœud de texte, puis l'ajouter à un élément HTML existant.

Quels sont les nœuds de texte en javascript?

Un nœud de texte dans JavaScript est un type de nœud qui représente le contenu texte d'un élément ou d'un attribut. Il peut être créé à l'aide de la méthode document.createTextNode(). Cette méthode crée un nouveau nœud de texte qui peut être attaché à un élément HTML existant, vous permettant d'ajouter dynamiquement du texte à la page Web.

Comment ajouter JavaScript à HTML?

JavaScript peut être ajouté à HTML de plusieurs manières. Vous pouvez utiliser la balise <script></script> pour l'inclure directement dans un fichier html, ou vous pouvez utiliser l'attribut <script></script> de la balise src pour lier vers un fichier javascript externe. Vous pouvez également utiliser des propriétés d'événements telles que onclick ou onload pour exécuter du code JavaScript lorsqu'un événement spécifique se produit.

Comment utiliser la méthode document.createTextNode()?

La méthode

document.createTextNode() est utilisée pour créer un nouveau nœud de texte. Appelez d'abord cette méthode avec le texte que vous souhaitez ajouter en tant que paramètre. Cela renvoie un nouveau nœud de texte, qui peut ensuite être attaché à un élément HTML existant à l'aide de la méthode appendChild().

Quel est le modèle d'objet de document (DOM)?

Document Object Model (DOM) est l'interface de programmation pour les documents HTML et XML. Il représente la structure d'un document en tant qu'arbre d'objets, chaque objet représentant une partie du document. JavaScript peut interagir avec le DOM pour manipuler le contenu et la structure d'une page Web.

Comment modifier le contenu des éléments HTML à l'aide de JavaScript?

Vous pouvez modifier le contenu d'un élément HTML à l'aide de l'attribut innerHTML dans JavaScript. Cette propriété peut être utilisée pour obtenir ou définir le contenu HTML d'un élément. Par exemple, s'il y a un élément avec ID "Myelement", il peut être modifié comme ceci: document.getElementById('myElement').innerHTML = 'New content';.

Comment changer le style des éléments HTML à l'aide de JavaScript?

Vous pouvez modifier le style des éléments HTML à l'aide de l'attribut style dans JavaScript. Cette propriété est un objet qui contient toutes les propriétés CSS de l'élément. Par exemple, s'il y a un élément avec ID "Myelement", il peut être modifié comme ceci: document.getElementById('myElement').style.color = 'red';.

Comment ajouter de nouveaux éléments HTML à l'aide de JavaScript?

Vous pouvez ajouter de nouveaux éléments HTML à l'aide de la méthode createElement() dans JavaScript. Cette méthode crée un nouvel élément, qui peut ensuite être attaché à un élément existant en utilisant la méthode appendChild(). Par exemple, vous pouvez créer un nouveau paragraphe et l'ajouter au corps du document comme suit: var p = document.createElement('p'); document.body.appendChild(p);.

Quelles sont les propriétés de l'événement en JavaScript?

L'attribut d'événement dans JavaScript est utilisé pour définir le code JavaScript à exécuter lorsqu'un événement spécifique se produit. Ces événements peuvent inclure de cliquer sur un bouton (onclick), de charger une page (onload) ou de déplacer la souris sur un élément (onmouseover), etc. Le code de l'événement est défini directement dans les propriétés de l'élément HTML.

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!