見出し画像

【ワンピースで覚えるJavaScript】第３４回 ページの移動(プログラミング入門講座)

エンジニアの休日

JavaScriptを使って、ページの移動をする方法です。

ブラウザバックなどは現場でも、使うことが多いですね！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" media="screen" href="style.css">
  </head>
  <body>
    <h1>location.href</h1>
    <button id="btn1" class="btn btn-info mb-3">チョッパー</button>
    <h1>location.assign</h1>
    <button id="btn2" class="btn btn-info mb-3">チョッパー</button>
    <h1>location.replace</h1>
    <button id="btn3" class="btn btn-info mb-3">チョッパー</button>
    <h1>location.reload</h1>
    <button id="btn4" class="btn btn-info mb-3">リロード</button>
    <button id="btn5" class="btn btn-info mb-3">背景色</button>
    <h1>history.forward</h1>
    <button id="btn7" class="btn btn-info mb-3">次へ</button>
    <script src="index.js"></script>
  </body>
</html>
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" media="screen" href="style.css">
  </head>
  <body>
    <h1>チョッパー</h1>
    <img src="img/chopper.png">
    <h1>history.back</h1>
    <button id="btn6" class="btn btn-info mb-3">戻る</button>
    <script>
    //履歴に従ってページを前後
      let btn6 = document.getElementById("btn6");
      btn6.addEventListener("click", () => {
        history.back(); //前に戻る
      });
    </script>
  </body>
</html>
//ページを移動したい
//location.hrefプロパティ
let btn1 = document.getElementById("btn1");
btn1.addEventListener("click", () => {
  location.href = "chopper.html";
});

//location.assign
let btn2 = document.getElementById("btn2");
btn2.addEventListener("click", () => {
  location.assign("chopper.html");
});

//履歴を残さずにページを移動(ブラウザバックできない)
let btn3 = document.getElementById("btn3");
btn3.addEventListener("click", () => {
  location.replace("chopper.html");
});

//ページをリセット
let btn4 = document.getElementById("btn4");
let btn5 = document.getElementById("btn5");

btn4.addEventListener("click", () => {
  location.reload();
});

btn5.addEventListener("click", () => {
  btn5.style.backgroundColor = "red";
});

//履歴に従って次のページ
let btn7 = document.getElementById("btn7");
btn7.addEventListener("click", () => {
  history.forward(); //次に進む
});

この記事が気に入ったらサポートをしてみませんか？