これで完璧！JavaScriptの問題集

2024-04-03

はじめに

JavaScriptの実装力が格段に上がる問題集を作りました。

これができるようになったら、基礎学習は卒業してOKです。
ポートフォリオの作成に進みましょう。

JavaScriptの問題集

問題1：アラートを表示させる　

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <script>
      alert("hello world!!");
    </script>
  </body>
</html>

問題2：テキストの色を変更

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div style="padding: 100px">
      <p id="text">この文字の色を変えたい</p>
      <button id="btn">押すと色が変わる</button>
    </div>
    <script>
      const text = document.querySelector("#text");
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", function () {
        text.style.color = "red";
      });
    </script>
  </body>
</html>

問題3：テキストの色を複数回変更

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .change {
        color: red;
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <p id="text">何度でも色が変わります</p>
      <button id="btn">何回も押せるボタン</button>
    </div>
    <script>
      const text = document.querySelector("#text");
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", function () {
        text.classList.toggle("change");
      });
    </script>
  </body>
</html>

問題4：３秒後に色を変更

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div style="padding: 100px">
      <p id="text">３秒後に色が変わります</p>
    </div>
    <script>
      setTimeout(function () {
        const text = document.querySelector("#text");
        text.style.color = "red";
      }, 3000);
    </script>
  </body>
</html>

問題5：1秒ごとに色を変更

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .change {
        color: red;
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <p id="text">1秒毎に色が変わります</p>
    </div>
    <script>
      setInterval(function () {
        const text = document.querySelector("#text");
        text.classList.toggle("change");
      }, 1000);
    </script>
  </body>
</html>

問題6：モーダルの表示・非表示

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      #modal-body {
        background: #000c16;
        position: absolute;
        z-index: 10000;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        transition: 0.5s;
        color: white;
      }
      #modal-body.is-open {
        transform: translateX(0%);
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <button class="modal-btn">ボタン</button>
      <button class="modal-btn">ボタン</button>
      <button class="modal-btn">ボタン</button>
      <div id="modal-body">Hello world!!</div>
    </div>

    <script>
      const modalBtns = document.querySelectorAll(".modal-btn");
      const ModalBody = document.querySelector("#modal-body");
      modalBtns.forEach((modalBtn) => {
        modalBtn.addEventListener("click", function () {
          ModalBody.classList.toggle("is-open");
        });
      });
      ModalBody.addEventListener("click", function () {
        this.classList.toggle("is-open");
      });
    </script>
  </body>
</html>

問題7：アコーディオン

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>アコーディオン</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .accordion_title {
        padding: 10px;
        background-color: #eeeeee;
        cursor: pointer;
      }
      .accordion_content {
        height: 0px;
        overflow: hidden;
        transition: 0.3s;
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <div class="accordions">
        <div class="accordion">
          <div class="accordion_title">question1</div>
          <div class="accordion_content">
            回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です
          </div>
        </div>
        <div class="accordion">
          <div class="accordion_title">question2</div>
          <div class="accordion_content">
            回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です
          </div>
        </div>
        <div class="accordion">
          <div class="accordion_title">question3</div>
          <div class="accordion_content">
            回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です回答です
          </div>
        </div>
      </div>
    </div>
    <script>
      const accordions = document.querySelectorAll(".accordion");
      accordions.forEach((accordion) => {
        accordion.addEventListener("click", function () {
          const content = accordion.querySelector(".accordion_content");
          content.classList.toggle("active");
          if (content.classList.contains("active")) {
            content.style.height = content.scrollHeight + "px";
          } else {
            content.style.height = "0px";
          }
        });
      });
    </script>
  </body>
</html>

問題8：スクロールしたら表示

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      body {
        height: 3000px;
      }
      #scrollMarking {
        margin-top: 400px;
        background-color: lightgray;
      }
      #scrollAppearance {
        position: fixed;
        top: 100px;
        left: 100px;
        padding: 30px;
        background-color: lightcoral;
        display: none;
      }
      #scrollAppearance.show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <div id="scrollMarking">ここを過ぎたら出現する</div>
      <div id="scrollAppearance">出現物</div>
    </div>
    <script>
      let scrollY = window.pageYOffset;
      const scrollAppearance = document.querySelector("#scrollAppearance");
      const scrollMarking =
        document.querySelector("#scrollMarking").getBoundingClientRect().top +
        window.pageYOffset;
      window.addEventListener("scroll", function () {
        scrollY = window.pageYOffset;
        if (scrollY > scrollMarking) {
          scrollAppearance.classList.add("show");
        } else {
          scrollAppearance.classList.remove("show");
        }
      });
    </script>
  </body>
</html>

問題9：タブ切り替え

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .tabNav {
        display: inline-block;
        width: 50px;
        margin-right: 40px;
        cursor: pointer;
      }
      .tabNav.is-open {
        color: lightcoral;
      }
      .tabBody {
        padding: 15px;
        background-color: lightgray;
        display: none;
      }
      .tabBody.is-open {
        display: block;
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <div class="tabNavs">
        <div class="tabNav is-open">tabNav1</div>
        <div class="tabNav">tabNav2</div>
        <div class="tabNav">tabNav3</div>
      </div>
      <div class="tabBodys">
        <div class="tabBody is-open">tabBody1</div>
        <div class="tabBody">tabBody2</div>
        <div class="tabBody">tabBody3</div>
      </div>
    </div>
    <script>
      const tabNav = document.querySelectorAll(".tabNav");
      const tabBody = document.querySelectorAll(".tabBody");
      for (let i = 0; i < tabNav.length; i++) {
        tabNav[i].addEventListener("click", function () {
          for (let t = 0; t < tabNav.length; t++) {
            tabBody[t].classList.remove("is-open");
            tabNav[t].classList.remove("is-open");
          }
          tabBody[i].classList.add("is-open");
          tabNav[i].classList.add("is-open");
        });
      }
    </script>
  </body>
</html>

問題10：フォームから情報を取得

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div style="padding: 100px">
      <div class="outputs"></div>
      <div class="checkboxs">
        <div><input class="checkbox" type="checkbox" />1</div>
        <div><input class="checkbox" type="checkbox" />2</div>
        <div><input class="checkbox" type="checkbox" />3</div>
      </div>
      <button class="btn">出力</button>
    </div>
    <script>
      const outputWrap = document.querySelector(".outputs");
      const checkboxs = document.querySelectorAll(".checkbox");
      const btn = document.querySelector(".btn");
      btn.addEventListener("click", function () {
        outputWrap.innerHTML = "";
        for (let i = 0; i < checkboxs.length; i++) {
          if (checkboxs[i].checked) {
            const output = document.createElement("div");
            output.innerHTML = "出力結果" + (i + 1);
            output.classList.add("output");
            outputWrap.appendChild(output);
          }
        }
      });
    </script>
  </body>
</html>

問題11：スライドショー

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      #slideshow {
        position: relative;
        padding-bottom: 53%;
        background-color: black;
      }
      .slide {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        opacity: 0;
        width: 95%;
        height: auto;
        transition: 2s;
        padding: 0;
      }
      .slide.fadein {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <div id="slideshow">
        <div class="slide">
          <img style="display: block" width="100%" src="img/hero_01.jpg" />
        </div>
        <div class="slide">
          <img style="display: block" width="100%" src="img/hero_02.jpg" />
        </div>
        <div class="slide">
          <img style="display: block" width="100%" src="img/hero_03.jpg" />
        </div>
      </div>
    </div>
    <script>
      const images = document.querySelectorAll(".slide");
      let count = 0;
      images[count].classList.add("fadein");
      setInterval(() => {
        images[count].classList.remove("fadein");
        if (count === images.length - 1) {
          count = 0;
        } else {
          count++;
        }
        images[count].classList.add("fadein");
      }, 2500);
    </script>
  </body>
</html>

問題12：スクロールしたら要素をフェードイン

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>フェードコンテンツ</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .fadeItems {
        height: 300px;
        background-color: black;
        margin-top: 300px;
        opacity: 0;
        transition: 1s;
        transform: translateY(100px);
      }
      .fadeItems.show {
        opacity: 1;
        transform: translateY(0px);
      }
    </style>
  </head>
  <body>
    <div class="fadeItems"></div>
    <div class="fadeItems"></div>
    <div class="fadeItems"></div>
    <div class="fadeItems"></div>
    <div class="fadeItems"></div>
    <script>
      const fadeItems = document.querySelectorAll(".fadeItems");
      const fadeItemsTop = [];
      let windowY = window.pageYOffset;
      let windowH = window.innerHeight;
      let remainder = 100;
      for (let i = 0; i < fadeItems.length; i++) {
        fadeItemsTop.push(fadeItems[i].getBoundingClientRect().top);
      }
      window.addEventListener("resize", function () {
        windowH = window.innerHeight;
      });
      window.addEventListener("scroll", function () {
        windowY = window.pageYOffset;
        for (var i = 0; i < fadeItems.length; i++) {
          if (windowY + windowH > fadeItemsTop[i] + remainder) {
            fadeItems[i].classList.add("show");
          } else {
            fadeItems[i].classList.remove("show");
          }
        }
      });
    </script>
  </body>
</html>

問題13：スクロールしたらナビの色を変更

目標

回答

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      #scrollMarking {
        margin-top: 400px;
        background-color: gray;
      }
      .scrollNav-marker {
        margin-bottom: 1200px;
        background-color: lightgray;
        font-size: 50px;
        text-align: center;
      }
      .nav {
        padding: 20px;
        display: flex;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background-color: gray;
      }
      .nav-list {
        list-style: none;
        padding: 0 20px;
        border-right: 1px solid black;
      }
      .nav-list:last-child {
        border: none;
      }
      .nav-list.is-active {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div style="padding: 100px">
      <div class="nav">
        <div class="nav-list">ナビ1</div>
        <div class="nav-list">ナビ2</div>
        <div class="nav-list">ナビ3</div>
        <div class="nav-list">ナビ4</div>
      </div>
      <section class="scrollNav-marker">スクロールナビマーカー1</section>
      <section class="scrollNav-marker">スクロールナビマーカー2</section>
      <section class="scrollNav-marker">スクロールナビマーカー3</section>
      <section class="scrollNav-marker">スクロールナビマーカー4</section>
    </div>
    <script>
      let scrollY = window.pageYOffset;
      let navList = document.querySelectorAll(".nav-list");
      let Marker = document.querySelectorAll(".scrollNav-marker");
      let MarkerTop = [];

      for (let i = 0; i < Marker.length; i++) {
        MarkerTop.push(
          window.pageYOffset + Marker[i].getBoundingClientRect().top - 100
        );
      }

      navColor();
      window.addEventListener("scroll", function () {
        navColor();
      });

      function navColor() {
        scrollY = window.pageYOffset;
        for (let i = 0; i < MarkerTop.length; i++) {
          if (MarkerTop[i] <= scrollY && scrollY < MarkerTop[i + 1]) {
            for (let t = 0; t < MarkerTop.length; t++) {
              navList[t].classList.remove("is-active");
            }
            navList[i].classList.add("is-active");
          }
        }
        if (scrollY >= MarkerTop[MarkerTop.length - 1]) {
          for (let t = 0; t < MarkerTop.length; t++) {
            navList[t].classList.remove("is-active");
          }
          navList[MarkerTop.length - 1].classList.add("is-active");
        }
      }

      for (let i = 0; i < navList.length; i++) {
        navList[i].addEventListener("click", function () {
          window.scroll({
            top: MarkerTop[i],
            behavior: "smooth",
          });
        });
      }
    </script>
  </body>
</html>

独学に限界を感じたら、プログラミング教室がお勧めです。