JavaScriptイベントバインディング（jsがサポートされていない場合に便利）

まず、たとえば、Web ページを強化するために JavaScript を使用しますが、ユーザーのブラウザが JavaScript をサポートしていない場合、またはユーザーが JavaScript 機能を無効にしている場合に、Web ページが正常に表示されるかどうかを考慮する必要があります。 ?たとえば、次の例では、

コードをコピーコードは次のとおりです:

ポップアップ機能はカスタマイズされており、URL 内の Web ページを制限するために新しいウィンドウが開きます。ただし、クライアントがサポートしていない場合、Web ページは正しく動作しません。したがって、この方法を使用する場合は、さらに考慮して、次のコードを使用するのがより適切になります。

コードをコピーコードは次のとおりです:

次に、著者は例として CSS を使用します。 CSS を使用する過程で、CSS ファイルをロードするためにを使用したことを除いて、Web ページのコンテンツに CSS 関連のコードを追加していないことがわかりました。そのため、構造を適切に統合できます。 . これはスタイルから分離されています。つまり、CSS コードはメインコードに侵入しません。これにより、クライアントが CSS を知らなくても、主要なコンテンツを顧客が見ることができ、コンテンツ構造も顧客に表示できます。したがって、JavaScript は動作層に相当し、CSS はプレゼンテーション層に相当します。 JavaScript も CSS と同じくらい非侵入的です。以下は本からの一例です。

コードをコピーコードは次のとおりです:

上記のコードは、クライアントが JavaScript をサポートしていない場合でも正常に動作することを保証しますが、上記のコードには onclick などのイベントハンドラーが表示されます。そこで、CSS などのメソッドを使用して、必要な機能を完成させます。以下のように:

コードをコピーコードは次のとおりです:

このようにして、ページがロードされるときに、window.onload を実行して、どのが使用するクラスを検出し、一律に PopUp メソッドを使用することができます。次のコード

コードをコピーコードは次のとおりです。

var links = document.getElementsByTagName("a "); 
for (var i=0 ; i if (links[i].getAttribute("class") == "popup") {
 links[ i]. onclick = function() {
 PopUp(this.getAttribute("href")); //これは onClick = "popUp(this.href)"
 と等しいので注意してください。 //そのため、links[i].
 return false;
 }
 }
}

こうすることで、HTML コードへの侵入が少なくなります。

最後に、著者は下位互換性を実現し、JavaScript を最小限に抑える必要性について話しました。下位互換性を保つために、if(document.getElementById) のようなものを使用して、このメソッドが存在するかどうかをテストできます。このメソッドは、存在する場合にのみ使用できます。 JavaScript コードの最小化は主に JavaScript を減らすことであり、これにより Web ページの読み込み速度が向上します。

次に、本を読んでいるときに理解できなかった問題に遭遇しました。エビがそれを解決するのに役立つことを願っています。

<スクリプト> はどこに配置する必要がありますか? JavaScript DOM プログラミングの分野で述べたように、ではなくの前に

著者別の最新記事