JavaScriptダウンロード入門！10選サンプルコードで学ぶ使い方と応用例

// アラート表示
alert("Hello, World!");

// ボタンクリックイベントの設定
document.getElementById("myButton").addEventListener("click", function() {
  alert("ボタンがクリックされました");
});

<input id="myInput" type="text">
<button id="myButton2">値を表示</button>

// 入力フォーム操作
document.getElementById("myButton2").addEventListener("click", function() {
  const inputValue = document.getElementById("myInput").value;
  alert("入力された値は: " + inputValue);
});

const num = prompt("数字を入力してください");

if (num % 2 === 0) {
  alert("入力された数字は偶数です");
} else {
  alert("入力された数字は奇数です");
}

// ループ処理
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

<div id="slider">
  <img src="image1.jpg" alt="image1" class="active">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

// 画像スライダー
const images = document.querySelectorAll("#slider img");
let currentIndex = 0;

function changeImage() {
  images[currentIndex].classList.remove("active");
  currentIndex = (currentIndex + 1) % images.length;
  images[currentIndex].classList.add("active");
}

setInterval(changeImage, 3000);

<div class="tabs">
  <button class="tab" data-target="content1">タブ1</button>
  <button class="tab" data-target="content2">タブ2</button>
  <button class="tab" data-target="content3">タブ3</button>
</div>
<div class="contents">
  <div id="content1">コンテンツ1</div>
  <div id="content2" hidden>コンテンツ2</div>
  <div id="content3" hidden>コンテンツ3</div>
</div>

// タブ切り替え
const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".contents div");

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    const targetId = tab.dataset.target;
    contents.forEach((content) => {
      if (content.id === targetId) {
        content.hidden = false;
      } else {
        content.hidden = true;
      }
    });
  });
});

<button id="menuButton">メニュー</button>
<div id="dropdownMenu" hidden>
  <a href="#">リンク1</a>
  <a href="#">リンク2</a>
  <a href="#">リンク3</a>
</div>

// ドロップダウンメニュー
const menuButton = document.getElementById("menuButton");
const dropdownMenu = document.getElementById("dropdownMenu");

menuButton.addEventListener("click", () => {
  dropdownMenu.hidden = !dropdownMenu.hidden;
});

<button id="openModal">モーダルを開く</button>
<div id="myModal" class="modal" hidden>
  <div class="modal-content">
    <span id="closeModal">&times;</span>
    <p>モーダルウィンドウのコンテンツです。</p>
  </div>
</div>

// モーダルウィンドウ
const openModal = document.getElementById("openModal");
const myModal = document.getElementById("myModal");
const closeModal = document.getElementById("closeModal");

openModal.addEventListener("click", () => {
  myModal.hidden = false;
});

closeModal.addEventListener("click", () => {
  myModal.hidden = true;
});

// Ajaxを利用したデータ取得
const fetchData = document.getElementById("fetchData");

fetchData.addEventListener("click", async () => {
  const response = await fetch("https://api.example.com/data.json");
  const data = await response.json();
  console.log(data);
});