javascript まとめ①

HTML要素の取得方法

document.querySelector('セレクター');

HTML全体を表すdocumentオブジェクトの中から指定したセレクターを、持つ要素を取得するという
意味になる。

javascriptで「どこ」の「何」を「どう変える」かの書き方

例）
どこの

document.querySelector('#text');

何を

document.querySelector('#text').textContent;

どう変える

document.querySelector('#text').textContent=hello;

HTML内からてtextというidの要素を探しだし、そのテキストにhelloという文字列を入れるという指示になる

定数

定数とはいろいろな文字列や数値、式などを入れておくことができる箱

const 定数名 = 定数に入れる値;

イベント

「何が」「どうなったら」「どうなるか」をaddEventListenerで書く

const btn = document.querySelector("button");

function bgChange() {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener("click", bgChange);

1行目
htmlからbutton要素を取得し、定数btnに代入

2行目から
bgChangeという関数を定義
中の処理はバックグラウンドカラーをランダムに変える処理

7行目
ボタンがクリックされたら、bgChange関数を行う