【初心者向け】あえてJavascriptを使ってリンク先に飛ぶ

どうもジャングルオーシャンのミケです。

今日は簡単なJavascriptの勉強をしていこうと思うよ！

HTMLを勉強した人ならわかると思うけど

どこか他のページにリンクをする時ってaタグを使うよね

今回はaタグを使わずにいろんな動きでリンクさせる方法を書いていくよ

とりあえず難しい言葉は抜きにして見ていこう！

aタグにhref属性をつけてリンクする場合

href

これはそのままaタグにhref属性を追加してリンクさせた状態

ボタンをクリックしたらリンク先に飛ぶよね

トップページに飛ぶ

あえて違う書き方でリンクをさせた場合

onclick

hrefにURLを入れずにクリックしたときにトップページにリンクさせる書き方だよ

これもボタンをクリックしたらリンク先に飛ぶよ

トップページに飛ぶ

ダブルクリックした時にリンク先に飛ぶようにする書き方

ondblclick

ダブルクリックをしないとリンク先に飛べないようになってるよ

トップページに飛ぶ

マウスポインタを乗せた時にリンク先に飛ぶようにする書き方

onmouseover

マウスポインタをボタンに乗せるとリンク先に飛ぶよ

トップページに飛ぶ

マウスポインタをはずした時にリンク先に飛ぶようにする書き方

onmouseout

マウスポインタをボタンに乗せてからはずすとリンク先に飛ぶよ

トップページに飛ぶ

記述内容を見てわかったと思うんだけど

「href」ではなくて「on～～」というものを使っているんだ

これらはイベントハンドラって言う処理の書き方だよ

そのイベントハンドラの中にいれてあるのがJavascriptの記述で

locationにhrefの中のURLをいれてくれっていう命令をしていることになるんだ

ちなみにlocationはロケーションバーのことで

ブラウザの上部にあるURLが書いてある箇所のこと！

hrefはHypertext Referenceの略だよ！

こういうJavascriptの勉強をしていると

イベントハンドラとかオブジェクトとかプロパティとか難しいカタカナがよく出てくるから

もうわけわからん！って拒否反応でちゃう人もいると思うんだけど

実際に記述だけ見てみるとそんなに難しいものではないよね

まずは簡単なものから徐々にステップアップしていこう！！

それじゃまた今度ね！