web-dev-qa-db-ja.com

javascript： "protocol"でリンクを使用するのはなぜ悪い習慣ですか？

1990年代には、次のようにJavascriptコードを<a>href属性に直接配置する方法がありました。

<a href="javascript:alert('Hello world!')">Press me!</a>

そして突然、私はそれを見るために立ち止まりました。それらはすべて次のようなものに置き換えられました。

<a href="#" onclick="alert('Hello world!')">Press me!</a>

Javascriptコードをトリガーすることが唯一の目的であり、実際のhrefターゲットがないリンクの場合、onclickプロパティの代わりにhrefプロパティを使用することが推奨されるのはなぜですか。

javascripthtmlhref
49
zneak

実行コンテキストが異なります。これを確認するには、代わりに次のリンクを試してください。

<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript:は、要素のメソッドとしてではなく、グローバルコンテキストで実行されます。これは、通常、必要なものです。ほとんどの場合、操作した要素を使用して、または要素に関連して何かを実行しているので、そのコンテキストで実行することをお勧めします。

また、インラインスクリプトはまったく使用しませんが、はるかにクリーンです。これらをよりクリーンな方法で処理するためのフレームワークを確認してください。 jQueryの例：

$('a').click(function() { alert(this.tagName); });
51
Nick Craver

実際には、どちらの方法も廃止されたと見なされます。代わりに、開発者は、ロジックとコードを本物のマークアップから分離するために、外部JSファイル内のすべてのJavaScriptを分離することをお勧めします。

これは、保守とデバッグが容易なコードを作成し、Web標準とアクセシビリティを促進するためです。次のように考えてください。例を見ると、ページにそのようなリンクが何百もあり、外部JS参照を使用して他の関数のalert動作を変更する必要がある場合、必要なのは大量のコードを何度もコピーして貼り付けたり、検索と置換を行ったりするのではなく、1つのJSファイル内の単一のイベントバインディングを変更します。

18
Levi Hackwith

いくつかの理由：

  1. 悪いコード慣行：
    HREFタグは、別の場所へのハイパーリンク参照があることを示します。実際にユーザーをどこにも連れて行かないjavascript関数に同じタグを使用することは、プログラミングの悪い習慣です。

  2. SEOの問題：
    WebクローラーはHREFタグを使用して、Webサイト全体をクロールし、接続されているすべての部分をリンクしていると思います。 javascriptを挿入することで、この機能を壊します。

  3. アクセシビリティを破る：
    一部のスクリーンリーダーはJavaScriptを実行できず、ハイパーリンクを期待している間はJavaScriptの処理方法を知らない可能性があると思います。ユーザーは、リンクにカーソルを合わせるとブラウザのステータスバーにリンクが表示され、「javascript：」のような文字列が表示されて混乱する可能性があります。

  4. あなたはまだ1990年代です：
    主流のアドバイスは、JavaScriptを別のファイルに入れ、1990年代に行われたようにページのHTMLと混同しないことです。

HTH。

10
Sunny

新しいタブでたくさんのリンクを開きます-javascript：void（）を見るためだけです。だからあなたは私とあなた自身を悩ませます（Googleは同じことを見るからです）。

別の理由（他の人も言及しています）は、異なる言語を異なるドキュメントに分割する必要があることです。どうして？上手、

  • 混合言語は、ほとんどのIDEとバリデーターで十分にサポートされていません。 CSSとJSをHTMLページ（またはその他のこと）に埋め込むと、埋め込まれた言語の正確性を静的にチェックする機会がほとんど失われます。場合によっては、埋め込み言語もあります。 （A PHPまたはASPドキュメントは有効なHTMLではありません。）構文エラーや不整合が実行時にのみ表示されることは望ましくありません。
  • もう1つの理由は、指定する必要のあるものの種類を明確に分離することです。コンテンツ用のHTML、レイアウト用のCSS、通常はレイアウトとルックアンドフィールを増やすためのJSです。これらは1対1でマップされません。通常、レイアウトをコンテンツ要素全体に適用する必要がありますカテゴリコンテンツ要素（したがってCSS）とルックアンドフィール（したがってjQuery）。それらは、コンテンツ要素が変更されるさまざまな時点で（実際、コンテンツはその場で生成されることが多い）、さまざまな人々によって変更される可能性があります。したがって、それらを別々のドキュメントに保存することも理にかなっています。
6
reinierpost

短い答え：インラインCSSが悪いという理由で、インラインJavascriptは悪いです。

4
leepowers

javascript:プロトコルを使用すると、アクセシビリティに影響し、ページのSEOフレンドリー性にも悪影響を及ぼします。

HTMLは何か何かのハイプターテキストを表すことに注意してください...ハイパーテキストは、リンクと参照を含むテキストを示します。これは、アンカー要素<a>が使用される目的です。

javascript: 'プロトコル'を使用すると、アンカー要素を誤用していることになります。 <a>要素を誤用しているため、GoogleボットやJawsスクリーンリーダーなどは、JSについてはあまり気にしないが、ハイパーテキストMLについては十分に気にするため、ページを「理解」するのに問題があります。 、アンカーhrefsに特に注意してください。

また、JavaScriptが有効になっていないユーザーがページにアクセスしたときのページのユーザビリティにも影響します。あなたはそれらのユーザーに期待されるリンクの機能と振る舞いを破っています。リンクのように見えますが、javascriptプロトコルを使用しているため、リンクのようには機能しません。

「でも、最近JavaScriptを無効にしている人は何人いますか？」と思うかもしれません。しかし、私はその考えを「ブラウザ設定のチェックボックスのために、何人の潜在的な顧客を拒否しても構わないと思っているか」という言葉に沿って表現したいと思います。

つまり、hrefがHTML属性であり、そのため、サイトの動作ではなく、サイトの情報に属します。 JavaScriptは動作を定義しますが、データや情報に干渉することは絶対に避けてください。このアイデアの縮図は、外部JavaScriptファイルです。 onclickを属性として使用するのではなく、JavaScriptファイルのイベントハンドラーとして使用します。

4
Richard JP Le Guen

最悪の問題は、おそらくそれが期待される機能を壊すことです。
たとえば、他の人が指摘しているように、新しいウィンドウで開く/タブ=リンク切れ=イライラ/混乱しているユーザー。

私は常に代わりにonclickを使用しようとしますが、andページのURLハッシュに何かを追加して、トリガーする目的の関数を示しますandでチェックを追加しますハッシュをチェックして関数をトリガーするためのpageload。

このようにして、クリック、新しいタブ/ウィンドウ、さらにはブックマーク/送信されたリンクに対して同じ動作が得られ、JSがオフの場合でも問題が発生することはありません。

言い換えれば、このようなもの（非常に単純化された）：

リンクの場合：

onclick = "doStuff()"

href = "#dostuff"

ページの場合：

onLoad = if(hash="dostuff") doStuff();
3
MatsSvensson

また、非推奨とセマンティクスについて話している限り、おそらくそれを指摘する価値があります '</a> 'は'クリック可能 'を意味するのではなく、'アンカー 'を意味し、別のページへのリンクを意味します。したがって、そのタグを使用してアプリケーション内の別の「ビュー」に切り替えることは理にかなっていますが、計算は実行しません。 href属性にURLがないという事実は、アンカータグを使用してはならないことを示しているはずです。

または、クリックイベントアクションをほぼすべてのhtml要素に割り当てることができます-おそらく<h1>、<img>、または<p>より適切でしょうか？とにかく、他の人が言及しているように、javascriptが要素に到達してonclickを割り当てるための「フック」（document.getElementById）として使用できる別の属性（おそらく「id」）を追加します。そうすれば、コンテンツ（HTML）プレゼンテーション（CSS）とインタラクティブ機能（JavaScript）を分離しておくことができます。そして、世界は終わりません。

2
matt lohkamp

私は通常、「EnableJavascript.htm」というランディングページを持っており、「この機能を使用するには、Javascriptを有効にする必要があります」という大きなメッセージが表示されます。そして、このようにアンカータグを設定します...

<a href="EnableJavascript.htm" onclick="funcName(); return false;">

このように、アンカーには正当な宛先があり、可能な場合はいつでもJavascript機能によって上書きされます。これは正常に低下します。しかし、今日では、Javascriptをミックスに振りかけることを決定する前に、通常、complete機能を備えたWebサイトを構築しています（これにより、このようなアンカーは不要になります）。

マークアップでonclick属性を直接使用することはまったく別のトピックですが、jQueryのようなライブラリを使用した目立たないアプローチをお勧めします。

2
Josh Stodola

ユーザーがステータスバーに表示する内容と関係があると思います。通常、JavaScriptが有効になっていない場合に備えて、アプリケーションはフェイルオーバー用に構築する必要がありますが、常にそうであるとは限りません。

スパムが発生しているため、人々はよりスマートになり、電子メールが「フィッシュ」に見えると、リンクが実際にどこに到達するかを確認するためにステータスバーを見る人が増えています。

'returnfalse;'を追加することを忘れないでください。リンクの最後に移動して、ページがユーザーの一番上にジャンプしないようにします（それが探している動作でない限り）。

1
RDL