JavaScript早見表（04）ページと操作をつなぐ

← 早見表（03）データと処理をまとめる / 早見表（05）外部データを読み込んで使う →

画面を操作する(DOM)

書き方説明例
querySelector()HTMLから要素を探す(id は #、class は .)
// HTML: <h1 id="title">こんにちは</h1>
let title = document.querySelector("#title");
getElementById()id を指定して要素を探す。querySelector("#note") と同じ
let note = document.getElementById("note");
textContent要素の文字を書き換える
title.textContent = "こんばんは";
classList.add()CSSのclassを付ける/外す
title.classList.add("active");
title.classList.remove("active");
styleCSSを直接変える
title.style.color = "red";
marimo.style.left = posX + "px";
見つからないときnull と出たら、HTMLの id / class と指定が一致しているか、コードがその要素より後にあるか確認する
let result = document.querySelector("#result");
console.log(result); // null なら見つかっていない

フォーム入力

書き方説明例
value入力欄の値を読む。値は文字列
// HTML: <input id="count" type="number" value="3">
let input = document.querySelector("#count");
console.log(input.value); // "3"
Number()文字列を数値にする。計算に使うときに変換する
let count = Number(input.value);
console.log(count * 100); // 300

イベント

書き方説明例
clickボタンが押されたとき
// HTML: <button id="start">開始</button>
let button = document.querySelector("#start");
button.addEventListener("click", () => {
  console.log("スタート");
});
関数名を渡す書き方先に関数を用意して、名前で予約する
button.addEventListener("click", drawOmikuji);
function drawOmikuji() {
  console.log("引く");
}
keydownキーが押されたとき
document.addEventListener("keydown", (event) => {
  console.log(event.key);
});
矢印キーevent.key で調べる
if (event.key === "ArrowRight") {
  posX = posX + 10;
}
input入力欄の値が変わったとき
input.addEventListener("input", () => {
  console.log(input.value);
});

イベントに登録した処理は、その出来事が起きたときに動きます。

時間

書き方説明例
setInterval()指定した時間(ミリ秒)ごとに繰り返し実行
let count = 0;
let timerId = setInterval(() => {
  count += 1;
  console.log(count);
}, 1000);
clearInterval()setInterval を止める
clearInterval(timerId);
setTimeout()指定した時間(ミリ秒)後に1回だけ実行
setTimeout(() => {
  console.log("3秒たちました");
}, 3000);

時間はミリ秒で指定します。1000 = 1秒です。最初の実行も約1秒後で、実際の間隔は遅れることがあります。

← 早見表（03）データと処理をまとめる / 早見表（05）外部データを読み込んで使う →