↑
宣言
<script>
</script>
↑
変数
const、let、var
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: "値１",
propB: "値２",
propC: "値３"
};
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回は処理が実行される
↑
select フォームを変更すると submit
<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);
}
↑
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>
↑
insertAdjacentHTML
element.insertAdjacentHTML(position, text);
position には element に対する相対位置を、以下に示す文字列の1つで指定する。
'beforebegin'：element の直前に挿入
'afterbegin'：element 内部の、最初の子要素の前に挿入
'beforeend'：element 内部の、最後の子要素の後に挿入
'afterend'：element の直後に挿入
<!-- beforebegin -->
<element>
<!-- afterbegin -->
foo
<!-- beforeend -->
</element>
<!-- afterend -->
const element = document.getElementById('text1');
element.insertAdjacentHTML('beforeend','<b>beforeendtext</b>');
↑
コメントアウト
// コメント または /* コメント */
↑
- guitar site WAVE -