22744


下記のようにウェブページのリンク先がときどき`javascript:;`になっていてリンク先のファイルやページに飛べないことがあります。

この`javascript:;`はそもそもどのような処理をして、サイト制作者はなんのためにこのようなリンクを作成するのでしょうか？

[code]

    <a href="javascript:;" rel="nofollow">example.pdf</a>
[/code]


CC BY-SA 3.0
2016-03-02T16:21:31.097
22742
2016-03-02T21:24:17.830
2016-03-02T21:06:46.700
4236
5505
question
javascript html
javascript:; ってなんですか？


`javascript:;`自体は特になにもしません。  
恐らく、本来の動作はJavaScriptで行うが、href属性に何か入れないとリンクとして表示されないので、副作用のない`javascript:;`をhref属性に入れてリンクとして用いていると思われます。


CC BY-SA 3.0
2016-03-02T17:00:31.103
22743
2016-03-02T17:00:31.103
22742
answer


`javascript:`
で始まるURLに移動しようとすると、後続のJavascriptコードが実行されます。が、今回の場合Javascriptコードは空っぽなので、何もしません。

リンクをクリックしたときにJavascriptを実行するようにしたい場合、最近ではJavascript側からイベントハンドラを登録することが多いですが、この場合href属性はなくても動きますよね。しかし、aタグは元々リンク専用のタグでないこともあり、
**ハイパーリンクの記法としてはhref属性が必要です** 。実際、href属性がないとリンクらしい見た目にはなりません。

[code]

    document.getElementById('link').addEventListener('click', function(){ alert('clicked!') });
[/code]

[code]

    <a id="link">Click me!</a>
[/code]

かといって適当な値を指定してはリンクとして機能してしまいます。`<a href="">`
と空文字列を指定しても、（クエリ文字列もURLフラグメントも指定されていない）同じページへのリンクになってしまいます。

そこで **何もしないリンク先** として、何もしないJavascriptを指定するのです。他にも例えば：

  * `<a href="javascript:return false;">`
  * `<a href="javascript:void(0)">`

なお、イベントハンドラで `event.preventDefault()`
を呼び出すことで、「hrefに指定されたURLに遷移する」というデフォルトの挙動を抑制することができます。この場合はhrefに何を指定しても構いません。

参考： [a 要素 - HTML |
MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)


CC BY-SA 3.0
2016-03-02T17:03:40.280
22744
2016-03-02T17:03:40.280
8000
22742
answer


HTML観点では他の方も説明されているように`a`タグを記述するだけでなく`href`属性を付与しなければHTML上はハイパーリンクとして表示されません。（下線が引かれ、文字が青くなるかどうか。）  
そのため`href`属性に何等かの値を含める必要がありますが、

[code]

    <a href="">link</a>
    
[/code]

と空文字にしてしまうと自分自身のページへジャンプしてしまうため（スクロール位置も先頭に戻ります）、URLとしては無効な文字列を記述する必要がありました。というのもJavaScript登場当時はJavaScript未対応のブラウザーも存在したからです。そこで編み出されたのが質問の

[code]

    <a href="javascript:;">link</a>
    
[/code]

です。`javascript:;`をURLと解釈した場合にJavaScriptを解釈できない既存のブラウザーも`javascript:`という未知のプロトコルということになりリンク先にジャンプできないわけです。  
その上で、JavaScriptを解釈できるブラウザーにとってはJavaScript言語の

[code]

    ;
    
[/code]

というソースコードになり何も実行しないという意味になります。

* * *

実はJavaScript観点では

[code]

    javascript:;
    
[/code]

というソースコードと解釈されることもあります。しかしこれも問題はなく、

  * `javascript:`というgoto文のジャンプ先ラベル
  * `;`という空ステートメント

となり構文エラーとはなりません。蛇足ですが

[code]

    http://example.com
    
[/code]

というURLもJavaScript言語上は

  * `http:`というgoto文のジャンプ先ラベル
  * `//example.com`というコメント文

となり構文エラーとはなりません。


CC BY-SA 3.0
2016-03-02T21:24:17.830
22746
2016-03-02T21:24:17.830
4236
22742
answer