今回はHTMLとJavaScriptを使って「戻るボタン」「進むボタン」「更新ボタン」を作成する方法をご紹介します。
どのボタンもページ遷移の操作には欠かせない重要な要素です。
一見すると難しそうな操作ですが、ほんの数行を書くだけで済む簡単な作業ですので、みなさんもぜひ試してみてくださいね。
今回のテーマ
- HTMLとJavaScriptを使って戻るボタンを作る方法
- HTMLとJavaScriptを使って進むボタンを作る方法
- HTMLとJavaScriptを使って更新ボタンを作る方法
【迷ったらココ！】HTMLやJavaScriptが学べるプログラミングスクール3選
テックアカデミー | デイトラ | 侍エンジニア |
| 講師は全員現役エンジニア 週2回のマンツーマンメンタリング 無料の転職サポートあり 課題レビュー＆チャット質問し放題 | 1年間のエンジニアサポート カリキュラムは無期限閲覧可能 専用チャットコミュニティ参加 Webセミナー勉強会に参加 | 累計指導45,000人＆転職成功率98% オーダーメイドカリキュラム対応 無料の転職サポートあり 専属マンツーマンレッスン方式 |
当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。
-
HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
続きを見る
目次
HTMLとJavaScriptを使って戻るボタンを作る方法
まずはHTMLとJavaScriptを使って戻るボタンを作る方法ですが以下の通りです。
1 | <input type="button" value="戻る" onclick="modoru()"> |
1 2 3 4 | //戻る function modoru(){ history.back(); } |
まずHTMLで、modoru()という関数が呼び出されるボタンを作成します。
modoru()関数では１つ前のページに戻るという操作「history.back()」をJavaScriptで指定しています。
HTMLとJavaScriptを使って進むボタンを作る方法
まずはHTMLとJavaScriptを使って進むボタンを作る方法ですが以下の通りです。
1 | <input type="button" value="進む" onclick="susumu()"> |
1 2 3 4 | //進む function susumu(){ history.forward(); } |
まずHTMLで、susumu()という関数が呼び出されるボタンを作成します。
susumu()関数では１つ前のページに進むという操作「history.forward()」をJavaScriptで指定しています。
HTMLとJavaScriptを使って更新ボタンを作る方法
まずはHTMLとJavaScriptを使って更新ボタンを作る方法ですが以下の通りです。
1 | <input type="button" value="更新" onclick="koushin()"> |
1 2 3 4 | //更新 function koushin(){ location.reload(); } |
まずHTMLで、kousin()という関数が呼び出されるボタンを作成します。
koushin()関数では１つ前のページに戻るという操作「location.reload()」をJavaScriptで指定しています。
ちなみにHTMLだけを使って実装したい時は以下のコードを書きましょう。
1 | <a href="">ページのリロード</a> |
ここではaタグで空のリンク先を設定しています。
HTMLの場合、リンク先が空のときはリロードする仕組みになっています。
まとめ：HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法
まとめ
- HTML&JavaScriptを使って戻る処理ではhistory.back()
- HTML&JavaScriptを使って進む処理ではhistory.forward()
- HTML&JavaScriptを使って更新処理ではlocation.reload()
関数をJavaScriptで書こう
今回はHTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法について解説しました。
ご覧の通り、簡単なコードを数行書くだけで簡単に実装できるのでおすすめです。
みなさんも是非実践してみてください！
JavaScriptやHTML/CSSの学習でつまづいた時、独学に限界を感じた時はこちらの記事もオススメです。
-
JavaScriptが学べるプログラミングスクールおすすめ8選
JavaScriptを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... JavaScriptを学びたいけどまず何から始めたら良いのか分からない...プログラ ...
続きを見る
-
HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
続きを見る
-
無料体験できるプログラミングスクールおすすめ10選を解説
プログラミングスクールって思ったより高いからなかなか決められない... 無料体験できるプログラミングスクールを知りたい！ せっかくプログラミングスクールに入るなら、無料体験に参加して自分に合うスクール ...
続きを見る
