JavaScriptによる構造マークアップの強化
キーポイント
- JavaScriptによる構造的なタグ付けは、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。
citejavaScriptを効果的に使用して、 - 属性を使用して参照リンクをブロック参照に自動的に挿入するなど、HTML要素に機能を動的に追加できます。
- JavaScriptを構造化されたタグと統合することで、ページ更新なしのタブパネルなどの動的なユーザーインターフェイスを作成できます。
- JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。
数年前、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);
}
}
}
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);
メソッドを使用してこれらの要素をプログラム的に作成することです。上記の行は、新しい「A」要素を作成し、HREFとタイトルの属性を割り当てます。どちらも引用のURLとして設定されます。 createElement
a.appendChild(document.createTextNode('Source'));
メソッドを使用して作成されます。 domはHTML要素をツリーを構成するものとして扱うため、新しく作成されたリンクにテキストを追加するには、そのcreateTextNodeメソッドを呼び出す必要があります。 appendChild
var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a);
を使用してリンクを追加します。この時点で、私たちが構築した新しいドキュメントフラグメントは、次の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
これは正常に機能しますが、より良くすることができます。 JavaScript関数は外部ファイルでホストされるため、外部ファイルが関数を実行することはより意味がありませんか？素朴なアプローチは、次のJavaScriptコードを使用することです。
window.onload = extractBlockquoteCitations;
//
関数の名前を提供しますが、最後に（）を無視することに注意してください。これにより、関数が実行されます。 JavaScriptは機能的なプログラミングスタイルをサポートしています。つまり、関数はパラメーターとして渡され、データ構造に保存され、他のデータオブジェクトと同様に他の機能から返すことさえできます。このトピックについては、今後の投稿で詳しく説明しますが、その結果、関数をwindow.onloadに割り当てると、ページの読み込み後に実行されます。
に登録する最後のスクリプトは、実行する唯一のスクリプトになります。本当に必要なのは、すでにそこにあるものを上書きせずに、ウィンドウオブジェクトのオンロードハンドラーに関数を取り付ける方法です。残念ながら、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
|驚くべきことに、上記は、目的の効果を作成するためにいくつかの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 = [];
/* Initialisation */ function et_init() { var i, link, id, target, first; first = true; for (i = 0; (link = document.links[i]); i ) { ... }
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の構造化されたタグは、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に追加できます。 リアルなヌード写真を作成する AI 搭載アプリ 写真から衣服を削除するオンライン AI ツール。 脱衣画像を無料で AI衣類リムーバー 完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。 使いやすく無料のコードエディター 中国語版、とても使いやすい 強力な PHP 統合開発環境 ビジュアル Web 開発ツール 神レベルのコード編集ソフト（SublimeText3）
ホットAIツール
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
Video Face Swap
人気の記事
ホットツール
メモ帳++7.3.1
SublimeText3 中国語版
ゼンドスタジオ 13.0.1
ドリームウィーバー CS6
SublimeText3 Mac版
ホットトピック
7844
15
1649
14
1403
52
1300
25
1241
29
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
JavaScriptは学ぶのが難しいですか？
Apr 03, 2025 am 12:20 AM
JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？
Apr 04, 2025 pm 05:12 PM
Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...
