宣言

<script> </script>

変数

constletvar let count = 0;

配列

const numbers = [1, 2, 3]; const array = ["one", "two", "three"];

連想配列

const obj = {key1: "value1", key2: "value2", key3: "value3"};

文字列演算子

結合演算子「+」 結合代入演算子「+=」

if 文

if (条件) { 条件が真であれば実行 } else if (条件2) { 条件2が真であれば実行 } else { 条件が偽であれば実行 }

比較演算子

a == b (値は等しい) a === b(値は等しい かつ 型も等しい) a != b (値は等しくない) a !== b(値が等しくない または 型が等しくない) a > b (より大きい) a >= b (より大きい または 等しい) a < b (より小さい) a <= b (より小さい または 等しい)

論理演算子

p && q (pかつq) p || q (pまたはq) !p (pでない)

for 文

for (let i = 0; i < 10; i++) { console.log ( i ); }


const list = ["one", "two", "three"]; for (let i = 0; i < list.length; i++){ console.log ( list[ i ] ); }

※break — ループ処理を途中で終了する
※continue — ループ処理で処理をスキップする


for-in 文

const obj = { propA: "値1", propB: "値2", propC: "値3" }; for ( const prop in obj ) { console.log ( "キー:" + prop ); console.log ( "値:" + obj[prop] ); }

※必ず要素の順番通りに出力されることが保証されていない
※主に連想配列に使用する


for-of 文

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

while 文

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

do-while 文

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

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


querySelector

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

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


querySelectorAll

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

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


addEventListener

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);

this

<form> <input type="text" name="text" /> <input type="button" id="btn1" name="btn" value="ボタン" onclick="testFunc(this.id,this.value,this.form.text.value)" /> </form> <script> function testFunc(a,b,c){ console.log(a); console.log(b); console.log(c); } </script>

コメントアウト

// コメント または /* コメント */


- guitar site WAVE -