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

トランポリンジャンプ
Pocket

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

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

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

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

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

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

まずは普通にaタグにhref属性をつけてリンクする場合は

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

クリックしたらリンクに飛ぶよね

トップページに飛ぶ

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

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

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

トップページに飛ぶ

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

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

トップページに飛ぶ

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

マウスポインタをテキストに被らせるとリンク先に飛ぶよ

トップページに飛ぶ

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

マウスポインタをテキストに被らせてから離すとリンク先に飛ぶよ

トップページに飛ぶ

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

「href」のあとに書いてある「onclick」の箇所を変更しただけなんだ

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

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

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

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

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

hrefはHypertext Referenceの略だよ

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

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

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

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

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

それじゃまた今度ね!

SeeYou!!NextTime!!



Related Post

Pocket