HTML JavaScript

HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法

更新日 :

HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法

今回はHTMLとJavaScriptを使って「戻るボタン」「進むボタン」「更新ボタン」を作成する方法をご紹介します。

どのボタンもページ遷移の操作には欠かせない重要な要素です。

一見すると難しそうな操作ですが、ほんの数行を書くだけで済む簡単な作業ですので、みなさんもぜひ試してみてくださいね。

今回のテーマ

  • HTMLとJavaScriptを使って戻るボタンを作る方法
  • HTMLとJavaScriptを使って進むボタンを作る方法
  • HTMLとJavaScriptを使って更新ボタンを作る方法

【迷ったらココ!】HTMLやJavaScriptが学べるプログラミングスクール3選

テックアカデミー
テックアカデミー
デイトラ
デイトラ
侍エンジニア
侍エンジニア(SAMURAI ENGINEER)
講師は全員現役エンジニア
週2回のマンツーマンメンタリング
無料の転職サポートあり
課題レビュー&チャット質問し放題
1年間のエンジニアサポート
カリキュラムは無期限閲覧可能
専用チャットコミュニティ参加
Webセミナー勉強会に参加

累計指導45,000人&転職成功率98%
オーダーメイドカリキュラム対応
無料の転職サポートあり
専属マンツーマンレッスン方式

当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。

HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】

HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい!でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...

更新日:2024年1月29日

HTMLとJavaScriptを使って戻るボタンを作る方法

まずはHTMLとJavaScriptを使って戻るボタンを作る方法ですが以下の通りです。

まずHTMLで、modoru()という関数が呼び出されるボタンを作成します。

modoru()関数では1つ前のページに戻るという操作「history.back()」をJavaScriptで指定しています。

HTMLとJavaScriptを使って進むボタンを作る方法

まずはHTMLとJavaScriptを使って進むボタンを作る方法ですが以下の通りです。

まずHTMLで、susumu()という関数が呼び出されるボタンを作成します。

susumu()関数では1つ前のページに進むという操作「history.forward()」をJavaScriptで指定しています。

HTMLとJavaScriptを使って更新ボタンを作る方法

まずはHTMLとJavaScriptを使って更新ボタンを作る方法ですが以下の通りです。

まずHTMLで、kousin()という関数が呼び出されるボタンを作成します。

koushin()関数では1つ前のページに戻るという操作「location.reload()」をJavaScriptで指定しています。

ちなみにHTMLだけを使って実装したい時は以下のコードを書きましょう。

ここでは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を学びたいけどまず何から始めたら良いのか分からない...プログラ ...

更新日:2024年1月29日

HTML/CSSが学べるプログラミングスクールおすすめ10選【2024年最新版】

HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい!でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...

更新日:2024年1月29日

無料体験できるプログラミングスクールおすすめ10選を解説
無料体験できるプログラミングスクールおすすめ10選を解説

プログラミングスクールって思ったより高いからなかなか決められない... 無料体験できるプログラミングスクールを知りたい! せっかくプログラミングスクールに入るなら、無料体験に参加して自分に合うスクール ...

更新日:2024年1月29日

プログラミングスクールの口コミ投稿フォーム
  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-HTML, JavaScript

Copyright © wagtechblog All Rights Reserved.