JavaScriptによる構造マークアップの強化

キーポイント

• JavaScriptによる構造的なタグ付けは、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 cite
javaScriptを効果的に使用して、
• 属性を使用して参照リンクをブロック参照に自動的に挿入するなど、HTML要素に機能を動的に追加できます。
• JavaScriptを構造化されたタグと統合することで、ページ更新なしのタブパネルなどの動的なユーザーインターフェイスを作成できます。
• JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。

イベント処理やDOM操作などの高度なJavaScriptテクノロジーは、既存のスクリプトやブラウザのデフォルトを妨害することなく使用でき、互換性を確保し、ユーザーエクスペリエンスを向上させることができます。

数年前、HTMLを書く際の重要なスキルは、2つの主要なブラウザに多かれ少なかれ希望どおりに実行するよう説得するのに十分なテーブルスキルを習得することでした。 Modern Webは非常に異なっており、マークアップの品質は、タイトル、段落、リストなどの構造要素を使用してコンテンツを説明する程度の巧みに依存します。このアプローチの利点は、複数のページにまたがるタグ付きブロックの巨大なブロックで変更するのではなく、コードを維持しやすく、ファイルサイズが小さく、アクセシビリティが向上し、1つのStyleSheetからWebサイトのルックアンドフィールを制御する機能など、何度か説明されています。あまり頻繁に議論されていない利点は、クライアント側のWebサードパーティテクノロジーJavaScriptに基づいて、適切に構造化されたタグが追加のWebサイト強化への扉を開くことです。この記事では、JavaScriptと適切に構造化されたタグが一緒に機能する2つの方法について説明します。最初の例では、Cite属性に接続することにより、ブロック参照を強化する方法を示します。 2番目の例では、ページに表示されるパネルを切り替えるリンクを構築する「ベストプラクティス」スクリプトを示します。

ブロック参照

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);
        }
    }
}

最初の例では、目立たないブロック参照要素を見てみましょう。この要素は、インデントの適用と間違っていることがよくありますが、その正しい使用法は、周囲のテキストから視覚的に分離する必要があるマーキング参照です。 Starting Block Reference Tagには、引用ソースページのURLを含むオプションの引用属性を持つことができます。 Citeプロパティの唯一の問題は、ブラウザがそれを完全に無視することです。タグの純粋主義者はそれを高く評価するかもしれませんが、純粋に実用的な観点からは、それを使用することは、正しいマークを使用することの満足度を得る以外には利点がありません。これがJavaScriptが入ってくる場所です。 DOMを使用して、Cite属性を使用して、任意のブロック参照の下部にある引用のソースにリンクを追加できます。これを行う関数コードは次のとおりです。

var quotes = document.getElementsByTagName('blockquote');このコード行は、domメソッド

を使用して現在のページのすべてのブロック参照要素を見つけ、getElementsByTagName（実際にはhtmlcollection」という名前の配列に割り当てますが、それは配列のように動作するデータ構造です）。 quotes

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

これで、収集されたブロック参照ノードを通過しています。ループするたびに、

メソッドを使用して、要素から引用属性を取得します。 Citeプロパティが設定されている場合は、興味深い部分に進みます。引用の下部に「ソース」リンクを作成します。 getAttribute

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

DOMを使用して新しいHTML要素をページに動的に追加したい場合、これを行う正しい方法は、

メソッドを使用してこれらの要素をプログラム的に作成することです。上記の行は、新しい「A」要素を作成し、HREFとタイトルの属性を割り当てます。どちらも引用のURLとして設定されます。 createElement

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

リンク要素に、ユーザーがクリックしてリンクをアクティブにできるテキストを含めることを望みます。元のテキストノードは、

メソッドを使用して作成されます。 domはHTML要素をツリーを構成するものとして扱うため、新しく作成されたリンクにテキストを追加するには、そのcreateTextNodeメソッドを呼び出す必要があります。 appendChild

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

CSSを使用して新しいリンクを柔軟にスタイルできるようにするために、段落要素にラップできます。上記のコードは、そのような要素を作成し、クラスを「BlockQuotesource」に設定してCSSフックを提供し、

を使用してリンクを追加します。この時点で、私たちが構築した新しいドキュメントフラグメントは、次のHTMLと同等です。 appendChild

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

現時点では、メモリで作成したものの、まだドキュメントに添付されていないため、スニペットはまだ見えません。これは関数の最後の行が行うことです：

quotes[i].appendChild(p);

は、現在取り組んでいるブロック参照要素です。 quotes[i]新しい段落をブロック参照に添付して、表示するようにします。 appendChild

さらに2つのステップがあります。まず、ページが最初にロードされたときに上記の関数を実行する必要があります。これを達成するには多くの方法があります。最も簡単な方法は、ドキュメントボディ要素のオンロードプロパティに関数に呼び出しを追加することです。

これは正常に機能しますが、より良くすることができます。 JavaScript関数は外部ファイルでホストされるため、外部ファイルが関数を実行することはより意味がありませんか？素朴なアプローチは、次のJavaScriptコードを使用することです。

window.onload = extractBlockquoteCitations;

//

関数の名前を提供しますが、最後に（）を無視することに注意してください。これにより、関数が実行されます。 JavaScriptは機能的なプログラミングスタイルをサポートしています。つまり、関数はパラメーターとして渡され、データ構造に保存され、他のデータオブジェクトと同様に他の機能から返すことさえできます。このトピックについては、今後の投稿で詳しく説明しますが、その結果、関数をwindow.onloadに割り当てると、ページの読み込み後に実行されます。

ただし、このソリューションには1つの欠点もあります。特定のページでページの読み込みが完了した後に実行された複数のスクリプトを使用する場合、

に登録する最後のスクリプトは、実行する唯一のスクリプトになります。本当に必要なのは、すでにそこにあるものを上書きせずに、ウィンドウオブジェクトのオンロードハンドラーに関数を取り付ける方法です。残念ながら、Internet Explorerやその他のブラウザーは、このような動的なイベントの添付ファイルを処理する方法が異なります。以下は関数です：window.onload

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);
        }
    }
}

以下は、ウィンドウオブジェクトのロードイベントにブロッククォート関数を追加するコードです。

addEvent(window, 'load', extractBlockquoteCitations);最後のステップは、CSSで引用をスタイリングすることです。これは、ブロック参照を処理する比較的単純なCSSコードスニペットです。

完成品はここで見ることができます。

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;
    }
}

パネルスイッチ

さて、より高度な動的効果、つまりパネルスイッチャーを考えてみましょう。ここでの目標は、ページに複数のパネルを配置し（Divタグを使用）、一度に1つのパネルのみを表示することです。常に表示されるリンクのセットを使用して、現在表示されているパネルを選択できます。これは、タブを選択するたびにページを更新せずに、タブ付きインターフェイスを構築して、関連するさまざまな画面を閲覧するのに役立ちます。

JavaScriptを使用してページを強化するときはいつでも、JavaScriptが無効になっていても、ページがまだ利用可能でなければならないという良いルールを覚えておく必要があります。この場合、これは、JavaScriptが有効になったときに理想的なソリューションが宣伝されているように機能する必要があることを意味しますが、非JavaScript環境では、すべてのパネルをページに表示する必要があり、各リンクは関連パネルに直接リンクし、URLスニペットを使用します。

それから、これは機能する最も簡単なマークです：

`

パネル1

|

これはパネル1 です これはパネル2です`

驚くべきことに、上記は、目的の効果を作成するためにいくつかのJavaScriptをフックするために必要なほぼすべてのマークアップです。上記のコードを続けることができますが、リンクにクラスを追加して、特別な運用を実行したいことを明確にしましょう。

<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>

//

以下は、JavaScriptの仕組みです。ページが読み込まれると、スクリプトは、クラスに「トグル」を含むリンクをページ上のすべてのリンクをスキャンします。見つかったリンクの場合、HREF属性がチェックされ、指定された要素が配置され、ターゲット要素アレイに追加されます。最初の要素を除く他のすべての要素は「閉じている」ため、ページがロードされると、最初のパネルのみが表示されたままになります。リンク自体は、JavaScriptイベントハンドラーを添付して、それらがアクティブ化されると、対応するパネルを表示できるようにします。

完全なスクリプトはここで見ることができます。以下は、コードの仕組みについての段階的な説明です。

var et_toggleElements = [];

最初の行は、ページ上のパネル要素への参照を保存するグローバルな空の配列を作成します。このスクリプトにはグローバル変数と多くの関数があるため、各関数に「ET_」（「Easy Toggle」の場合）を接続します。これにより、関数が同じページにロードされた他のスクリプトとの名前が競合する可能性が減ります。

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

これまでのところ、いくつかの変数を初期化し、最初のフラグをtrueに設定し、ドキュメント内のすべてのリンクを繰り返し始めました。変数を使用して変数を使用して宣言することは非常に重要です。変数が関数に局所的であることを保証するためです。このステップがなければ、それらはグローバルにアクセス可能であり、他のスクリプトに干渉する可能性があります。

var

if (/btoggleb/.exec(link.className)) { ... }この条件は、現在リンクされているクラスに「トグル」が含まれているかどうかをチェックします。クラスのプロパティには、スペースで区切られた複数のクラスを含めることができるため、

をチェックするだけではなく、正規表現を使用します。

は、正規表現です。 link.className == 'toggle' /btoggleb/ b

リンクされたクラスリストにトグルが含まれている場合、リンクのターゲットがURLスニペットであると仮定します。 id = link.href.split('#')[1];

＃タグでリンクhrefを分割する - 興味のある部分は＃の後であることがわかっているため、

を使用して結果配列を直接インデックスしてターゲットIDを抽出します。

link.href.split('#') [1]

ここで、リンクが要素が存在することを示すという別の仮定を立てます。 getElementById()メソッドを使用して要素を取得し、アレイの現在の長さに等しい配列インデックスに割り当てて、要素の配列に追加します。これは、配列が0からインデックス作成を開始するため、配列の長さはアレイの次の空のスロットのインデックスでもあります。

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

これは、私たちが以前に定義した最初のロゴが登場する場所です。 Webサイトの最初のパネルが表示されたままになりますが、他のパネルはCSSの「表示：なし」に相当するJavaScriptを使用して隠されています。このフラグを使用すると、これを行うことができます。

link.onclick = et_toggle;

最後に、et_toggle関数をリンクされたonclickイベントに割り当て、リンクがアクティブになるたびに関数が呼び出されます。次のステップは、関数を定義することです。

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);
        }
    }
}

繰り返しますが、splitメソッドを使用して、リンクからIDを抽出します。

表示するパネルがわかります。要素配列を繰り返して、IDが目的のパネルのIDと一致する要素を除く他のすべての要素を閉じることができます。

falseを返すことにより、アクティブ化されたときにリンクが実際に追跡されるのを防ぎます。

最後のステップは、前述のaddEvent関数を使用して、ウィンドウの荷重イベントにet_init関数を登録することです。

addEvent(window, 'load', et_init);

ここで実行中の完了コードを表示できます。

結論

この記事では、有用な効果のためにJavaScriptとW3C DOMで適切に構造化されたマーカーを使用できる2つの方法が見られます。この投稿が、JavaScriptとSmart Taggingを使用する新しい方法を見つけるように促すことを願っています。

さらに読み取り

構造化されたタグに基づいたJavaScript効果の他の多くの優れた例があります。ここに注意を払う価値のある例がいくつかあります：

Aaron Boodman's Labels.js
スチュアートラングリッジによる素敵なタイトル
スチュアートラングリッジのaqlists
Stuart Langridgeのソートテーブル
ピーター・ポール・コッホの目次

JavaScriptの構造化されたタグに関するよくある質問

JavaScriptの構造的なタグは何ですか？

JavaScriptの構造化されたタグは、Webドキュメントのコンテンツと構造を説明するためにHTML要素を使用することです。これらの要素には、タイトル、段落、リストなどが含まれます。 JavaScriptは、これらの要素を操作して、動的でインタラクティブなWebページを作成できます。たとえば、JavaScriptは、HTML要素のコンテンツを変更し、HTML要素のスタイル（CSS）を変更し、新しいHTML要素を追加することもできます。

JavaScriptはHTML要素とどのように相互作用しますか？

JavaScriptは、ドキュメントオブジェクトモデル（DOM）を介してHTML要素と相互作用します。 Domは、JavaScriptが動作できるWebページの構造を表します。たとえば、javaScriptはdocument.createTextNode()メソッドを使用して新しいテキストノードを作成し、既存のHTML要素に追加できます。

JavaScriptのテキストノードとは何ですか？

JavaScriptのテキストノードは、要素または属性のテキストコンテンツを表すノードタイプです。 document.createTextNode()メソッドを使用して作成できます。このメソッドは、既存のHTML要素に添付できる新しいテキストノードを作成し、Webページにテキストを動的に追加できるようにします。

JavaScriptをHTMLに追加する方法は？

javaScriptはいくつかの方法でHTMLに追加できます。

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル