const arr = ["AAA", "BBB", "CCC"]; for (const elem of arr) { console.log(elem); }

let count = 0; while (count < 10) { console.log (count); count++ }

let count = 0; do { console.log (count); count++; } while (count < 10);

※ 1回は処理が実行される

<form> <select name="aaa" onchange="this.form.submit()"> <option value="hoge">hoge</option> <option value="fuga">fuga</option> <option value="piyo">piyo</option> </select> </form>

function check(){ if(window.confirm('実行しますか？')){ // 確認ダイアログを表示 return true; // 「OK」時は送信を実行 } else { // 「キャンセル」時の処理 window.alert('キャンセルされました。'); // 警告ダイアログを表示 return false; // 送信を中止 } }

HTML

<form onSubmit="return check()"> ・・・ ・・・

全てのチェックボックスにチェックを入れたり、外したりする。

HTML

<p> <div> <label for="checksAll"> <input type="checkbox" id="checksAll">全て選択 </label> </div> </p> <p> <div> <label> <input type="checkbox" class="checks" value="check1">チェック１ </label> <label> <input type="checkbox" class="checks" value="check2">チェック２ </label> <label> <input type="checkbox" class="checks" value="check3">チェック３ </label> <label> <input type="checkbox" class="checks" value="check4">チェック４ </label> <label> <input type="checkbox" class="checks" value="check5">チェック５ </label> </div> </p>

JavaScript

const checkall = document.getElementById("checksAll"); // 全て選択のチェックボックスの要素を取得 const checks = document.querySelectorAll(".checks"); // その他のチェックボックスの要素を取得 checkall.addEventListener('click', () => { // 全て選択がクリックされたら for (val of checks) { // その他のチェックボックスに対してループ処理 checkall.checked == true ? val.checked = true : val.checked = false; // 全て選択がチェックされたら全てチェックする、全て選択のチェックが外れたら全てのチェックを外す } });

HTML

<div id="text1"> テキスト情報 </div> <div> <input type="text" id="textbox1" /> <input type="button" value="click" onclick="test()" /> </div>

textContent, getAttribute, value

const element = document.getElementById('text1'); const element2 = document.getElementById('textbox1'); console.log(element.textContent); console.log(element2.getAttribute('type')); function test(){ console.log(element2.value); }

const target = document.querySelector('#example-id'); target.innerHTML = "innerHTML のテスト";

※ 引数は、CSS のセレクタを指定。

const target = document.querySelectorAll('.example-class'); target.forEach(function (element) { element.innerHTML = "innerHTML のテスト"; });

※ 引数は、CSS のセレクタを指定。

HTML

<input id="evt" placeholder="Enter some text" name="name"/> <p id="values"></p>

input イベントは、値が変更されたときに発生します。

const input1 = document.querySelector('#evt'); const log1 = document.getElementById('values'); input1.addEventListener('input', updateValue, false); function updateValue(e) { log1.innerHTML = e.target.value; }

change イベントは、値の変更が確定したときに発生します。

const input1 = document.querySelector('#evt'); const log1 = document.getElementById('values'); input1.addEventListener('change', updateValue, false); function updateValue(e) { log1.innerHTML = e.target.value; }

無名関数を使った書き方。

const input1 = document.querySelector('#evt'); const log1 = document.getElementById('values'); input1.addEventListener('change', function() { log1.innerHTML = input1.value; }, false);