どうもジャングルオーシャンのミケです。
今日は簡単なJavascriptの勉強をしていこうと思うよ！
HTMLを勉強した人ならわかると思うけど
どこか他のページにリンクをする時ってaタグを使うよね
今回はaタグを使わずにいろんな動きでリンクさせる方法を書いていくよ
とりあえず難しい言葉は抜きにして見ていこう！
aタグにhref属性をつけてリンクする場合
href
|
1 |
<a href=“https://www.jungleocean.com/” >トップページに飛ぶ</a> |
これはそのままaタグにhref属性を追加してリンクさせた状態
ボタンをクリックしたらリンク先に飛ぶよね
あえて違う書き方でリンクをさせた場合
onclick
|
1 |
<p onclick="location.href='https://www.jungleocean.com/';">トップページに飛ぶ</p> |
hrefにURLを入れずにクリックしたときにトップページにリンクさせる書き方だよ
これもボタンをクリックしたらリンク先に飛ぶよ
トップページに飛ぶ
ダブルクリックした時にリンク先に飛ぶようにする書き方
ondbclick
|
1 |
<p ondblclick="location.href='https://www.jungleocean.com/';">トップページに飛ぶ</p> |
ダブルクリックをしないとリンク先に飛べないようになってるよ
トップページに飛ぶ
マウスポインタを乗せた時にリンク先に飛ぶようにする書き方
onmouseover
|
1 |
<p onmouseover="location.href='https://www.jungleocean.com/';">トップページに飛ぶ</p> |
マウスポインタをボタンに乗せるとリンク先に飛ぶよ
トップページに飛ぶ
マウスポインタをはずした時にリンク先に飛ぶようにする書き方
onmouseout
|
1 |
<p onmouseout="location.href='https://www.jungleocean.com/';">トップページに飛ぶ</p> |
マウスポインタをボタンに乗せてからはずすとリンク先に飛ぶよ
トップページに飛ぶ
記述内容を見てわかったと思うんだけど
「href」ではなくて「on～～」というものを使っているんだ
これらはイベントハンドラって言う処理の書き方だよ
そのイベントハンドラの中にいれてあるのがJavascriptの記述で
locationにhrefの中のURLをいれてくれっていう命令をしていることになるんだ
ちなみにlocationはロケーションバーのことで
ブラウザの上部にあるURLが書いてある箇所のこと！
hrefはHypertext Referenceの略だよ！
こういうJavascriptの勉強をしていると
イベントハンドラとかオブジェクトとかプロパティとか難しいカタカナがよく出てくるから
もうわけわからん！って拒否反応でちゃう人もいると思うんだけど
実際に記述だけ見てみるとそんなに難しいものではないよね
まずは簡単なものから徐々にステップアップしていこう！！
それじゃまた今度ね！
