js | 3300.me

js

last update: 2021/03/15

Search :

: 0 results

script設定

<meta http-equiv="Content-Script-Type" content="text/javascript">

// HTML5ならデフォルトのContent-Script-TypeがJavaScriptなので省略可

内部script

// 書式


<script type="text/javascript">  // HTML5ならtypeは省略可

  処理;

/*
複数行
コメント
*/

// 一行コメント
</script>


---


// 最小のHTML5


<!doctype html>
<title>title</title>
<script>

</script>

code_popup


---


// JavaScript未対応ブラウザ対策


<!doctype html>
<title>title</title>
<script>
<!--
処理;
// -->
</script>
// scriptを表示してしまうのを防ぐためコメントアウト
// 閉じコメントアウトの//はNetscape用
<noscript>
JavaScript対応ブラウザで表示してください。
</noscript>

code_popup

外部script

<script src="読み込むファイルのパス"></script>
<script src="読み込むファイルのパス" async></script> // async load, immediately run
<script src="読み込むファイルのパス" defer></script> // async load, run after analysis HTML

変数

var foo = 42;
console.log(foo);  // 42

var bar = 84, baz = 126;  // まとめて定義可能
console.log(bar);  // 84
console.log(baz);  // 126

code_popup

// 変数名には半角英数字とアンダースコアとドルが利用可能
// 変数名の先頭は数字NG

// 予約語は利用不可
// abstract, boolean, break, byte, case, catch, char, class, comment, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, label, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with

データ型

console.log('foo');　　// foo(文字列,string)
console.log('42');　　// 42(文字列,string)
console.log(42);　　// 42(数値,number)
console.log(42 === 42);　　// true(真偽値,boolean)
console.log(42 !== 42);　　// false(真偽値,boolean)

console.log(document.getElementById('foo'));　　// null(期待される値が存在しない場合)
console.log(typeof null);　　// object

var bar;
console.log(bar);　　// undefined(未定義の値)
console.log(typeof undefined);　　// undefined

console.log(0 / 0);　　// NaN(数値が期待されるが数値ではない値, Not a Number)

console.log(42 / 0);　　// Infinity(正の無限大)
console.log(-42 / 0);　　// -Infinity(負の無限大)
// 1.79769313486231570e+308を超える数

code_popup

---

// 数値の種類

console.log(42);  // 42：10進数
console.log(042);  // 34：8進数
console.log(0x42);  // 66：16進数
console.log(42.8e4);  // 428000：浮動小数点数（42.8×10の4乗）

code_popup

---

// エスケープシーケンス

console.log('\n');  // 改行(LF)
console.log('\r');  // リターン(CR)
console.log('\t');  // タブ
console.log('\\');  // \
console.log('\'');  // '
console.log('\"');  // "

code_popup

---

// falsy

console.log(Boolean('string'));  // true
console.log(Boolean(true));  // true
console.log(Boolean(1));  // true
console.log(Boolean({}));  // true

console.log(Boolean(false));  // false
console.log(Boolean(undefined));  // false
console.log(Boolean(null));  // false
console.log(Boolean(0));  // false
console.log(Boolean(NaN));  // false
console.log(Boolean(''));  // false

code_popup

数値演算

// 算術演算子

console.log(5 + 2);  // 7（加算）
console.log(5 - 2);  // 3（減算）
console.log(5 * 2);  // 10（乗算）
console.log(5 / 2);  // 2.5（除算）
console.log(5 % 2);  // 1（余剰）
console.log(5 ** 2);  // 25（べき乗） // es6

console.log(0.2 * 3);  // 0.6000000000000001 (2進数での計算から生じる誤差)
console.log(((0.2 * 10) * 3) / 10);  // 0.6 (一旦整数にして計算すれば回避)

code_popup

---

// 代入演算子

var foo;

foo = 5;  // fooに5を代入
  console.log(foo);  // 5
foo += 5;  // fooの値に5を加算してfooに再代入
  console.log(foo);  // 10
foo -= 5;  // fooの値に5を減算してfooに再代入
  console.log(foo);  // 5
foo *= 5;  // fooの値に5を乗算してfooに再代入
  console.log(foo);  // 25
foo /= 5;  // fooの値に5を除算してfooに再代入
  console.log(foo);  // 5
foo %= 5;  // fooの値と5の余剰をfooに再代入
  console.log(foo);  // 0

code_popup

---

// インクリメント演算子, デクリメント演算子

var foo = 42, bar = 0;

bar = foo++;  // 代入してから1を加算
console.log(foo);  // 43
console.log(bar);  // 42

var foo = 42, bar = 0;

bar = ++foo;  // 1を加算してから代入
console.log(foo);  // 43
console.log(bar);  // 43

var foo = 42, bar = 0;

bar = foo--;  // 代入してから1を減算
console.log(foo);  // 41
console.log(bar);  // 42

var foo = 42, bar = 0;

bar = --foo;  // 1を減算してから代入
console.log(foo);  // 41
console.log(bar);  // 41

code_popup

---

// 優先順位

括弧付き > 掛け算割り算 > 足し算引き算
算術演算子(左 > 右) > 代入演算子(左 < 右)

算術演算子は左から処理
1) foo = 1 + 2 + 3;
2) foo = 3 + 3;
3) foo = 6;

代入演算子は右から処理
1) foo = bar = baz = 42;  // bazに42を代入
2) foo = bar = 42;  // barに42を代入
3) foo = 42;  // fooに42を代入

console.log(foo = 42);  // は、「42」と出る。すなわち、

code_popup

1) foo = 42;
2) 42;  // 「foo = 42」が「42」を返している

---

// 文字列化、数値化

// 加算演算子の別機能＜連結,数値の文字列化＞
console.log('foo' + "bar");  // foobar
console.log('foo' + 42)  // foo42
console.log('84' + 42)  // 8442(数値ではない)

// その他算術演算子の別機能＜文字列の数値化＞
console.log('84' - 42)  // 42
console.log('84' * 42)  // 3528
console.log('84' / 42)  // 2
console.log('84' % 42)  // 0

code_popup

---

// 被演算子
// オペレータ(演算子)とオペランド(値)
// 左オペランド
// 右オペランド
// 単項演算子
// 二項演算子
// 三項演算子

論理演算

// 等価演算子

console.log(42 == 42);  // true
console.log(42 == '42');  // true  文字列の42が数値の42に変換されて比較されるため、true
console.log(42 === '42');  // false  データ型変換を行わず比較
console.log(true == 1);  // true
console.log(true === 1);  // false
console.log(true === 0);  // false
console.log(true === 42);  // false
console.log(null == undefined);  // true
console.log(null === undefined);  // false
console.log(NaN === NaN);  // false

console.log(42 != 42);  // false
console.log(42 != '42');  // false
console.log(42 !== '42');  // true  データ型変換を行わず比較

console.log(!!42);  // true  Booleanに変換
console.log(!!'42');  // true  Booleanに変換
console.log(!![1, 2, 3]);  // true  Booleanに変換

code_popup

---

// 比較演算子

console.log(42 < 84);  // true
console.log(42 > '84');  // false
console.log(42 <= 42);  // true
console.log(42 >= '42');  // true

code_popup

---

// 論理演算子


// &&（論理積）・・・左オペランドが true・0以外の数値・文字列 なら、右オペランドを評価し、右オペランドも true・0以外の数値・文字列 なら右オペランドの値を返す。左オペランドが false・特殊な値・0だった場合、右オペランドの評価は行わず、左オペランドの値を返す。

console.log(1 < 2 && 3 < 4);  // true
console.log(2 < 1 && 3 < 4);  // false
console.log(1 && 3 < 4);  // true
console.log(0 && 3 < 4);  // 0
console.log(42 && 3 < 4);  // true
console.log('foo' && 3 < 4);  // true
console.log(1 < 2 && null);  // null
console.log(null && 3 < 4);  // null
console.log(null && null);  // null
console.log(null && undefined);  // null
console.log(undefined && 3 < 4);  // undefined
console.log(NaN && 3 < 4);  // NaN
console.log(1 && 1);  // 1
console.log(0 && 0);  // 0
console.log(-42 && 42);  // 42
console.log(42 && -42);  // -42
console.log(-4.2 && 4.2);  // 4.2

code_popup


// ||（論理和）・・・左オペランドが true・0以外の数値・文字列 なら、それをそのまま返す。左オペランドが false・特殊な値・0 なら、右オペランドを評価し、右オペランドの結果を返す。 

console.log(1 < 2 || 3 < 4);  // true
console.log(2 < 1 || 3 < 4);  // true
console.log(1 || 3 < 4);  // 1
console.log(0 || 3 < 4);  // true
console.log(42 || 3 < 4);  // 42
console.log('foo' || 3 < 4);  // foo
console.log(1 < 2 || null);  // true
console.log(null || 3 < 4);  // true
console.log(null || null);  // null
console.log(null || undefined);  // undefined
console.log(undefined || 3 < 4);  // true
console.log(NaN || 3 < 4);  // true
console.log(1 || 1);  // 1
console.log(0 || 0);  // 0
console.log(-42 || 42);  // -42
console.log(42 || -42);  // 42
console.log(-4.2 || 4.2);  // -4.2

code_popup

---

// 条件演算子

// foo ? bar : baz ・・・ foo が真なら bar、偽なら baz を返す
// if (foo) { bar } else { baz } と同じ

console.log(42 ? 'true' : 'false');  // true
console.log(42 < 0 ? 'true' : 'false');  // false
console.log(0 ? 'true' : 'false');  // false
console.log(1 ? 'true' : 'false');  // true
console.log(true ? 'true' : 'false');  // true
console.log(false ? 'true' : 'false');  // false
console.log(null ? 'true' : 'false');  // false
console.log(undefined ? 'true' : 'false');  // false
console.log(NaN ? 'true' : 'false');  // false

code_popup

文字列処理

var foo = 'abcdef';

console.log(foo.indexOf('cd'));  // 2
console.log(foo.lastIndexOf('cd'));  // 2
console.log(foo.search('cd'));  // 2

console.log(foo.includes('cd'));  // true
console.log(foo.startsWith('cd'));  // false
console.log(foo.endsWith('cd'));  // false

console.log(foo.charAt(2));  // c
console.log(foo.slice(2));  // cdef
console.log(foo.substring(2));  // cdef
console.log(foo.substr(2));  // cdef

console.log(foo.replace('cd', ''));  // abef
console.log(foo.split('cd'));  // ['ab', 'ef']

console.log('ABCDEF'.toLowerCase());  // abcdef
console.log(foo.toUpperCase());  // ABCDEF

console.log('2'.padStart(2, '0'));  // 02

code_popup

正規表現

// 判定する関数


var foo = 'abcdef';

console.log(/cd/.exec(foo));  // ["cd", ...] // マッチすればその文字列、しなければnullを返す
console.log(/cd/.test(foo));  // true // マッチすればtrue、しなければfalseを返す

console.log(foo.match(/cd/));  // ["cd", ...] // マッチすればその文字列、しなければnullを返す
console.log(foo.search(/cd/));  // 2 // マッチすればその箇所、しなければ-1を返す
console.log(foo.replace(/cd/,'42'));  // ab42ef // マッチすれば置換、しなければそのまま返す
console.log(foo.split(/cd/));  // ["ab", "ef"] // マッチすれば分割し配列に入れる、しなければそのまま返す
console.log((foo.split(/cd/))[0]);  // ab
console.log((foo.split(/cd/))[1]);  // ef
console.log((foo.split(/cd/))[2]);  // undefined

code_popup

---

// 括弧をつけて配列に入れる


var foo = 'abcdef';

console.log(/cd/.exec(foo));  // ["cd", ...]
console.log(/(c)d/.exec(foo));  // ["cd", "c", ...]
console.log(/(c)(d)/.exec(foo));  // ["cd", "c", "d", ...]
console.log(/(c)(?:d)/.exec(foo));  // ["cd", "c", ...]

console.log(foo.match(/cd/));  // ["cd", ...]
console.log(foo.match(/(c)d/));  // ["cd", "c", ...]
console.log(foo.match(/(c)(d)/));  // ["cd", "c", "d", ...]
console.log(foo.match(/(c)(?:d)/));  // ["cd", "c", ...]

console.log(foo.split(/cd/));  // ["ab", "ef"]
console.log(foo.split(/(c)d/));  // ["ab", "c", "ef"]
console.log(foo.split(/(c)(d)/));  // ["ab", "c", "d", "ef"]
console.log(foo.split(/(c)(?:d)/));  // ["ab", "c", "ef"]

// (?: 〜 )は「配列に入れない」指定

code_popup

---

// オプション


var foo = 'abCDef';
console.log(foo.match(/cd/i));  // ["CD", ...] // 大文字小文字関係なく判定

var foo = 'abcdef abcdef';
console.log(foo.match(/cd/g));  // ["cd", "cd"] // 複数マッチし、配列に入れる

code_popup

---

// 書式１


var foo = 'abcdeeef';

console.log(/a.c/.test(foo));  // a(なんでも1個)c　を含むならtrue
console.log(/de+f/.test(foo));  // d(eが1個以上)f　を含むならtrue
console.log(/de*f/.test(foo));  // d(eが0個以上)f　を含むならtrue
console.log(/de.+f/.test(foo));  // de(なんでも1個以上)f　を含むならtrue
console.log(/de.*f/.test(foo));  // de(なんでも0個以上)f　を含むならtrue
console.log(/de?f/.test(foo));  // d(eが0個か1個)f　を含むならtrue

code_popup

---

// 書式２


var foo = 'abcdef';

console.log(/a[acef]f/.test(foo));  // a(a,c,e,fいずれか1個)f　を含むならtrue
console.log(/a[bcde]f/.test(foo));  // a(b,c,d,eいずれか1個)f　を含むならtrue
console.log(/a[b-e]f/.test(foo));  // 同上
console.log(/a[a-z]f/.test(foo));  // a(小文字アルファベットいずれか1個)f　を含むならtrue
console.log(/a[a-zA-Z]f/.test(foo));  // a(アルファベットいずれか1個)f　を含むならtrue

console.log(/de{3}f/.test(foo));  // d(eが3個)f　を含むならtrue
console.log(/de{2,4}f/.test(foo));  // d(eが2個以上、4個以下)f　を含むならtrue
console.log(/de{2,}f/.test(foo));  // d(eが2個以上)f　を含むならtrue

console.log(/a(bc)+/.test(foo));  // a(bcが1個以上)　を含むならtrue
console.log(/ab|cd|ef/.test(foo));  // (abかcdかef)　を含むならtrue
console.log(/a(bc|de)f/.test(foo));  // a(bcかde)f　を含むならtrue

code_popup

---

// 書式３


var foo = 'abcdefabc';

console.log(/^abc/.test(foo));  // abcがfooの文頭ならtrue
console.log(/abc$/.test(foo));  // abcがfooの文末ならtrue
console.log(/^abc$/.test(foo));  // 文字列がabcに完全一致するならtrue
console.log(/a[a-zA-Z]f/.test(foo));  // a(アルファベットいずれか1個)f　を含むならtrue
console.log(/a[^a-zA-Z]f/.test(foo));  // a(アルファベット以外のいずれか1個)f　を含むならtrue

// ^ は [ ] の中にあるか外にあるかで意味が違う

code_popup

---

// 書式４


var foo = 'abcdef';

console.log(/abc(?=def)/.test(foo));  // abcに続く文字列がdefの場合true
console.log(/abc(?!def)/.test(foo));  // abcに続く文字列がdefでない場合true

code_popup

---

// 書式５


var foo = 'a b1c  d.e';

console.log(/\s/.test(foo));  // 半角スペース,タブなどの空白文字　を含むならtrue
console.log(/\S/.test(foo));  // 半角スペース,タブなどの空白文字以外　を含むならtrue
console.log(/\d/.test(foo));  // 半角数字1つ　を含むならtrue
console.log(/\D/.test(foo));  // 半角数字以外　を含むならtrue
console.log(/\w/.test(foo));  // 半角英数字かアンダースコア　を含むならtrue
console.log(/\W/.test(foo));  // 半角英数字かアンダースコア以外　を含むならtrue
console.log(/\./.test(foo));  //  . を含むならtrue　+*?[]-^{}()|$ なども同様
console.log(/\n/.test(foo));  // 改行　を含むならtrue
console.log(/\0/.test(foo));  // null　を含むならtrue

code_popup

---

// 書式６


var foo = '';

console.log(/\b/.test(foo));  // 単語の区切り　を含むならtrue
console.log(/\B/.test(foo));  // 単語の区切り以外　を含むならtrue
console.log(/[\b]/.test(foo));  // バックスペース (U+0008)　を含むならtrue
console.log(/\v/.test(foo));  // 垂直タブ (U+000B)　を含むならtrue
console.log(/\f/.test(foo));  // 改ページ (U+000C)　を含むならtrue
console.log(/\r/.test(foo));  // リターン (U+000D)　を含むならtrue
console.log(/\cX/.test(foo));  // XにはA-Zのうち1文字が入る。/\cM/の場合、control-M (U+000D)　を含むならtrue

code_popup

分岐(if)

if (条件) {
  処理;
} else if (条件) {
  処理;
} else {
  処理;
}


// 処理が一文の場合は、中括弧を省略可能
// if ( 条件 ) 処理;

// 1つのみの条件による2分岐は、下記でも書ける
// ( 条件 ) ? 真の時の処理 : 偽の時の処理;

---

var score = 70;

if (0 <= score && score < 45) {
  console.log('bad');
} else if (45 <= score && score < 85) {
  console.log('normal'); // normal
} else if (85 <= score && score <= 100) {
  console.log('good');
} else {
  console.log('error');
}

code_popup

---

// 偽になる値
false, null, undefined, 空文字列'', 数値の0, 数値のNaN

分岐(switch)

switch (条件の対象) {
  case 値 :
    処理;
    break;
  case 値 :
    処理;
    break;
  default:
    処理;
    break;
}

---

var foo = 42;
switch (foo) {
  case 21 :
    console.log('foo = 21');
    break;
  case 42 :
    console.log('foo = 42'); // foo=42
    break;
  case 84 :
    console.log('foo = 84');
    break;
  default :
    break;
}

code_popup

ループ(for)

for (初期値; 条件; i++) {
  処理;
}

---

// for

var arr = ['a', 'b', 'c'];

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);  // a -> b -> c
}

code_popup

---

// for ~ in

var arr = ['a', 'b', 'c'];

for (var i in arr) {
  console.log(arr[i]);  // a -> b -> c
}

code_popup

---

// for ~ of

var arr = ['a', 'b', 'c'];

for (var v of arr) {
  console.log(v);  // a -> b -> c
}

code_popup

ループ(forEach)

// １）array

var arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach(function (value, index) {
  console.log(value, index);
});

code_popup

---

// ２）object

var obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
};

Object.keys(obj).forEach(function (key) {
  console.log(key);
});

Object.values(obj).forEach(function (value) {
  console.log(value);
});

Object.entries(obj).forEach(function (entry) {
  console.log(entry);
});

code_popup

ループ(while)

// １）while

while (条件) {
  処理;
}



var i = 0;
while (i < 3) {
  console.log(i);  // 0 -> 1 -> 2
  i++;
}

code_popup

---

// ２）do while

do {
  処理;
} while (条件);



var i = 42;
do {
  console.log(i);  // 42 // 必ず1回は実行する
  i++;
} while (i < 3);

code_popup

continue, break

for (var i = 0; i < 5; i++) {
  if (i === 1) {
    continue; // その回をスキップ
  }
  if (i === 3) {
    break; // ループを終了
  }
  console.log(i); // 0 -> 2
}

code_popup

例外(try, catch, finally, throw)

try {
  処理A;
} catch (e) {
  // 処理Aでエラーが起きた時実行
  // 'e'はエラーの内容が入る
} finally {
  // 処理Aでエラーが起きても起きなくても実行
}

---

// 例１）例外処理なし

console.llog('foo'); // スペルミス
console.log('bar'); // 次の処理は実行することができない

code_popup


// 例１）例外処理あり

try {
  console.llog('foo'); // スペルミス
} catch (e) {
  console.log(e); // エラー情報をアウトプットすることができる
} finally {
  console.log('bar'); // 次の処理も実行することができる
}

code_popup

---

// 例２）例外処理なし

// var color = 'red'
var color = ''; // 誤ってcolorが空だった場合
console.log('I like ' + color + '.'); // I like . // 意味のない文章が表示されてしまう
console.log('done.'); // done

code_popup


// 例２）例外処理あり

// var color = 'red'
var color = ''; // 誤ってcolorが空だった場合

try {
  if (color === '') {
    throw 'error: no color'; // 値やオブジェクトをcatch(e)に送る
  }
  console.log('I like ' + color + '.'); // この処理は実行しない
} catch (e) {
  console.log(e); // エラー情報をアウトプットできる
} finally {
  console.log('done.'); // done
}

code_popup

関数

// 定義1 - 関数文のみ

fnc1(); // fnc1
function fnc1() {
  console.log('fnc1');
}
// 変数 fnc1 が定義される
// 実行時に関数文の巻き上げが起こるためfnc1()で参照できる

code_popup

---

// 定義2 - 変数に無名関数を代入

fnc2(); // error
var fnc2 = function() {
  console.log('fnc2');
}
// 変数 fnc2 が定義されるが、関数の前からは参照できない

code_popup

---

// 定義3 - 変数に関数文を代入

var fnc3 = function fnc() {
  console.log('fnc3');
}
fnc3(); // fnc3
fnc(); // error
// 変数 fnc3 が定義されるが、関数の前からは参照できない
// 変数 fnc は定義されないため、fnc() では動かない

code_popup

---

// 再帰呼び出し

function fnc(v) {
  console.log(v);
  v--;
  if(v >= 0) {
    fnc(v);  // 関数の中から自身を呼び出す
  }
}

fnc(5);  // 5 -> 4 -> 3 -> 2 -> 1 -> 0

code_popup

---

// 引数の初期値

function fnc(v = 42) {
  console.log(v);
}

fnc(5);  // 5
fnc();  // 42

code_popup

戻り値

function sum(foo, bar) {
  return foo + bar;  // returnでその値を返して処理を終わる
  console.log('baz');  // これは実行されない
}

console.log(sum(42,84));  // 126

code_popup

---

function sum(foo, bar) {  // 関数内にreturnが無い場合はundefinedを返す
  console.log('baz');  // baz
}

console.log(sum(42, 84));  // undefined

code_popup

---

function sum(foo, bar) {
  return;  // 単にreturnした場合はundefinedを返す
}

console.log(sum(42, 84));  // undefined

code_popup

スコープ

function bar() {
  foo = 84;  // グローバル変数(window.fooと同値)
}

foo = 42;
bar();
console.log(foo);  // 84

code_popup



function bar() {
  var foo = 84;  // ローカル変数(関数の中だけ有効)
}

foo = 42;
bar();
console.log(foo);  // 42

code_popup


---

// スコープチェーン


var foo = 42;

function bar() {
  function baz() {
    console.log(foo);
  }
  baz();
}

bar(); // 42


// 1-a）bar();
// 1-b）各ローカル関数ごとに変数を記憶する領域(bar用, baz用)が生成される(変数オブジェクトという)
// 1-c）スコープチェーンの関係(グローバル <-- bar <-- baz　参照の経路)が生成される
// 2）bar(); --> baz(); --> console.log(foo);
// 3）baz用変数オブジェクトでfooが定義されていないため、1つ外側を参照
// 4）bar用変数オブジェクトでfooが定義されていないため、1つ外側を参照
// 5）グローバル(<script>...</script>)でfooが定義されている
// 6）値を返す

code_popup

即時関数,無名関数

function fnc1() {  // 普通の関数定義
  console.log('fnc1');
}
fnc1();  // 呼び出し


(function fnc2() {  // 即時関数(呼び出し無しで定義から実行まで)
  console.log('fnc2');
})();


(function() {  // 関数名は省略可能 -> 無名関数
  console.log('fnc3');
})();


(function(v) {  // 引数を使う場合
  console.log('fnc4 ' + v);  // fnc4 value
})('value');


// ↓括弧でなく単項演算子などでも可
(function() {console.log('a');})();
!function() {console.log('b');}();
+function() {console.log('c');}();
void function() {console.log('d');}();


console.log(fnc1());  // fnc1
console.log(fnc2());  // undefined
// 即時関数,無名関数は一度実行したら消え、その後呼び出せない


// 即時関数,無名関数は、関数名や関数内変数のグローバルへの割り当てを回避する

code_popup

setTimeout

console.log('1');
setTimeout(() => {
  console.log('2');
}, 1000);
console.log('3');

code_popup

---

const timeCount = () => {
  const date = new Date();
  console.log(date);
  setTimeout(timeCount, 1000);
}

timeCount();

code_popup

コールバック

// exsample1

var fnc1 = function(callback) {
  for (var i = 0; i < 5000; i++) {
    console.log('Running fnc1...');
  }
  callback();
};

var fnc2 = function() {
  console.log('finished');
};

fnc1(fnc2);

// 関数の引数として関数を渡し、内部で実行することをコールバックという

code_popup

---

// exsample2

var fnc1 = function(callback) {
  console.log('Running fnc1...')
  setTimeout(function() {
    callback();
  }, 2000);
};

var fnc2 = function() {
  console.log('Running fnc2...')
  setTimeout(function() {
    console.log('finished');
  }, 2000);
};

fnc1(fnc2);

code_popup

---

// exsample3

var fnc1 = function(callback) {
  console.log('Running fnc1...')
  setTimeout(function() {
    callback(fnc3);
  }, 2000);
};

var fnc2 = function(callback) {
  console.log('Running fnc2...')
  setTimeout(function() {
    callback();
  }, 2000);
};

var fnc3 = function() {
  console.log('Running fnc3...')
  setTimeout(function() {
    console.log('finished');
  }, 2000);
};

fnc1(fnc2);

code_popup

非同期

console.log('a');
setTimeout(function() {console.log('b')}, 1000);
console.log('c');

// a -> c -> b

// 1) キューにconsole.log('a');を登録
// 2) キューにsetTimeout(~~~);を登録
// 3) キューにconsole.log('c');を登録
// 4) console.log('a');の実行
// 5) setTimeout(~~~);の実行 -> タイマーにfunction() {console.log('b')}を登録
// 6) console.log('c');の実行
// 7) 5)から1000ミリ秒後に別のキューにconsole.log('b');を登録
// 8) console.log('b');の実行

code_popup

配列

// 一次元配列

var arr = new Array("foo",42,true);  // 書式１
var arr = ["foo",42,true];  // 書式２

console.log(arr[0]);  // foo
console.log(arr[1]);  // 42
console.log(arr[2]);  // true
console.log(arr[3]);  // undefined

console.log(arr.length);  // 3

console.log(arr);  // ['foo', 42, true]

arr.push(3,4);
console.log(arr);  // ['foo', 42, true, 3, 4]

arr.child = 5;
console.log(arr);  // ['foo', 42, true, 3, 4, child: 5]
console.log(arr[5]);  // undefined
console.log(arr.child);  // 5

arr.push(6);
console.log(arr);  // ['foo', 42, true, 3, 4, 6, child: 5]
console.log(arr[5]);  // 6

arr.reverse();
console.log(arr);  // [6, 4, 3, true, 42, 'foo', child: 5]

code_popup

---

// 多次元配列

var arr = [['foo', 42, true], ['bar', 84, false]];

console.log(arr[1]);  // ['bar', 84, false]
console.log(arr[1][1]);  // 84

console.log(arr.length);  // 2

console.log(arr);  // [Array[3], Array[3]]

code_popup

---

// 配列のループ処理1 (for)

var arr = ['foo', 42, true];

for (var i = 0, al = arr.length; i < al; i++) {
  console.log(arr[i]);  // foo -> 42 -> true
}

// for (var i = 0; i < arr.length; i++) だと毎回lengthプロパティを参照するので非効率

code_popup

---

// 配列のループ処理2 (for〜in)

var arr = ['foo', 42, true];

for (var i in arr) {
  console.log('arr[' + i + '] = ' + arr[i]);
}

// arr[0] = foo
// arr[1] = 42
// arr[2] = true

code_popup

---

// 配列のループ処理3 (forEach)

var arr = ['foo', 42, true];
function fnc(value, index) {
  console.log('arr[' + index + '] = ' + value);
}

arr.forEach(fnc);

// arr[0] = foo
// arr[1] = 42
// arr[2] = true

code_popup

---

// pop, shift

var arr = [1, 2, 3,];

arr.shift();
console.log(arr); // [2, 3,]
arr.pop();
console.log(arr); // [2,]

code_popup

---

// splice

var arr = [1, 2, 3,];

arr.splice(1, 0, 1.5);
console.log(arr); // [1, 1.5, 2, 3,]
arr.splice(1, 1, 1.6);
console.log(arr); // [1, 1.6, 2, 3,]

code_popup

---

// concat

var arr1 = [1, 2, 3,];
var arr2 = [4, 5, 6,];

var arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6,]

code_popup

---

// join

var arr = [1, 2, 3,];

console.log(arr.join()); // 1,2,3

code_popup

---

// find

var arr = ['a', 'b', 'c',];

console.log(arr.find(value => value === 'b')); // 'b'
console.log(arr.find(value => {
  return value === 'b';
})); // 'b'

code_popup

---

// sort

var arr = [6, 4, 5, 3, 1, 2,];

arr.sort((a, b) => {
  if (a > b) {
    return 1;
  }
  if (a === b) {
    return 0;
  }
  if (a < b) {
    return -1;
  }
});

console.log(arr); // [1, 2, 3, 4, 5, 6,]

code_popup

---

// localeCompare

var arr = ['b', 'a', 'd', 'e', 'c',];

arr.sort((a, b) => a.localeCompare(b));
console.log(arr); // ['a', 'b', 'c', 'd', 'e',]

code_popup

---

// map

var arr1 = [1, 2, 3,];

var arr2 = arr1.map(value => value * 2);
console.log(arr2); // [2, 4, 6,]

code_popup

---

// filter

var arr1 = [1, 2, 3, 4, 5, 6,];

var arr2 = arr1.filter(value => value % 2 === 0);
console.log(arr2); // [2, 4, 6,]

code_popup

---

// Arraylike1

var str = 'abcdef';
console.log([...str]); // ['a', 'b', 'c', 'd', 'e', 'f',]

code_popup

---

// Arraylike2

<div>div</div>
<div class="on">div</div>
<div>div</div>

<script>
var divs = document.querySelectorAll('div');

// var on_els = divs.filter((el) => {
//   el.classList.contains('on');
// }); // error [divs is not array]

divs = [...divs];

var on_els = divs.filter((el) => {
  return el.classList.contains('on');
});

console.log(on_els); // [div.on]
</script>

code_popup

オブジェクト(定義)

// 書式１(ドット記法)


var obj = new Object();  // var obj = {}; と同じ
obj.val1 = 'foo';
obj.val2 = 42;
obj.mtd1 = function() {console.log(84)};

console.log(obj.val1);  // foo
console.log(obj.val2);  // 42
console.log(obj.mtd1);  // function() {console.log(84)};
obj.mtd1();  // 84

code_popup


---

// 書式２(ブラケット記法)


var obj = new Object();
obj['val1'] = 'foo';
obj['val2'] = 42;
obj['mtd1'] = function() {console.log(84)};

console.log(obj['val1']);  // foo
console.log(obj['val2']);  // 42
console.log(obj['mtd1']);  // function() {console.log(84)}
obj['mtd1']();  // 84

// プロパティを演算で表記可能
console.log(obj['v' + 'a' + 'l' + '1']);  // foo
// 数字で始まるプロパティが使用可能
obj['123'] = 'bar';
console.log(obj['123']);  // bar

code_popup


---

// 書式３(オブジェクトリテラル)


var obj = {
  val1: 'foo',
  val2: 42,
  val3: {
    val3_1: 84,
    val3_2: 126
  },
  mtd1: function() {
    console.log(168);
  }
};

console.log(obj.val1);  // foo
console.log(obj.val2);  // 42
console.log(obj.val3.val3_2);  // 126
console.log(obj.val3.val3_3);  // undefined
console.log(obj.val3.val3_3 || 'known');  // known // 初期値の設定が可能
console.log(obj.val3.val3_2 || 'known');  // 126
console.log(obj.mtd1);  // function() { console.log(168); }
obj.mtd1();  // 168
console.log(obj);  // Object {...}

code_popup

オブジェクト(this)

１) グローバル


console.log(this);  // Window { ... }
// この場合、thisが属するオブジェクト(すなわちグローバル)を参照する

code_popup


---

２) 即時関数


(function() {
  console.log(this);  // Window { ... }
  // この場合もグローバルを参照する

})();

code_popup


---

３) 関数呼び出し


function fnc() {
  console.log(this);  // Window { ... }
  // この場合もグローバルを参照する

}
fnc(); // 関数呼び出し

code_popup


---

４) オブジェクトのメソッド呼び出しと関数呼び出し


var obj = {
  val: 'foo',
  mtd: function() {
    console.log(this); // Object {val: 'foo'}
    // メソッド呼び出しの場合、thisはベースオブジェクト(自分の親となるオブジェクト)を参照する

    function fnc() {
      console.log(this); // Window { ... }
      // 関数呼び出しの場合、thisはグローバルを参照する
    }
    fnc(); // 関数呼び出し
  }
};
obj.mtd(); // メソッド呼び出し
code_popup



// 関数呼び出しを有効にする方法

var obj = {
  val: 'foo',
  mtd: function() {
    console.log(this); // Object {val: 'foo'}

    var _this = this;
    function fnc() {
      console.log(_this); // Object {val: 'foo'}
    }
    fnc(); // 関数呼び出し
  }
};
obj.mtd(); // メソッド呼び出し

code_popup


---

５) コンストラクタ


function fnc() {
  this.val = 'foo';
  this.mtd = function() {
    console.log(this); // fnc {val: 'foo'}
  };
}

var obj = new fnc();
// インスタンス生成(objをthisとしたオブジェクトを作る)

obj.mtd(); // メソッド呼び出し

code_popup


---

６) call


var obj = {
  foo1: 'bar1',
  foo2: 'bar2',
};

function fnc(arg1, arg2) {
  console.log(this);
  this.param1 = arg1;
  this.param2 = arg2;
  console.log(this);
}

fnc.call(obj, 'var1', 'var2');
// fncを呼び出し、任意のobjectをthisに設定できる

code_popup


---

７) apply


var obj = {
  foo1: 'bar1',
  foo2: 'bar2',
};

function fnc(arg1, arg2) {
  console.log(this);
  this.param1 = arg1;
  this.param2 = arg2;
  console.log(this);
}

fnc.apply(obj, ['var1', 'var2']);
// callとほぼ同じだが第二引数が配列

code_popup


---

８) bind


var obj = {
  foo1: 'bar1',
  foo2: 'bar2',
};

function fnc(arg1, arg2) {
  this.param1 = arg1;
  this.param2 = arg2;
  console.log(this);
}

var fnc1 = fnc.bind(obj); // thisにobjを設定した新しい関数fnc1を作成できる
var fnc2 = fnc.bind(obj, 1); // thisにobjを設定、引数に任意の値を一つ指定
var fnc3 = fnc.bind(obj, 1, 2); // thisにobjを設定、引数に任意の値を二つ指定

// 追加引数なし
fnc1();
fnc2();
fnc3();

// 追加引数あり
fnc1(3); // 第一引数(arg1)に3が入る
fnc2(3); // 第一引数は埋まっているため、第二引数(arg2)に3が入る
fnc3(3); // 両方埋まっているため、3は入らない

code_popup


// nullを設定

function fnc(arg1, arg2, arg3) {
  console.log(this); // nullの場合thisへのbindは無効
  console.log(arg1); // 1が固定される
  console.log(arg2); // 空き
  console.log(arg3); // 空き
}

var fnc1 = fnc.bind(null, 1);
fnc1(2, 3);

code_popup

オブジェクト(可変長引数)

// arguments


function fnc () {
  console.log(arguments);  // [4, 2]
  console.log(typeof arguments);  // object
  console.log(arguments[0]);  // 4
  console.log(arguments[1]);  // 2
  console.log(arguments[2]);  // undefined
  return arguments[0] + arguments[1];
}

console.log(fnc(4, 2));  // 6

// argumentsは引数を配列的に格納するオブジェクト(可変長引数)

code_popup


---

// 仮引数を置いた場合


function fnc (foo) {
  console.log(foo);  // 4
  console.log(arguments[0]);  // 4
  console.log(arguments[1]);  // 2
  console.log(arguments[2]);  // undefined
  return arguments[0] + arguments[1];
}

console.log(fnc(4, 2));  // 6

// 第1引数が仮引数に入り、argumentsも生成される
// 仮引数に入るのはオブジェクト(argument)では無い

code_popup


---

// arguments.callee


function fnc () {
  return arguments.callee;
}

console.log(fnc);  // functionの内容
console.log(fnc());  // functionの内容

// arguments.calleeは実行中の関数自身を参照する

code_popup

オブジェクト(名前付き引数)

function sum(args) {
  if (args.arg1 === undefined) { args.arg1 = 1; }
  if (args.arg2 === undefined) { args.arg2 = 1; }
  return args.arg1 + args.arg2;
}

console.log(sum({ arg1: 42, arg2: 84 }));  // 126
console.log(sum({ arg1: 42 }));  // 43
console.log(sum({ arg2: 84 }));  // 85
console.log(sum({}));  // 2
console.log(sum());  // Uncaught TypeError: Cannot read property 'arg1' of undefined

code_popup

オブジェクト(連想配列)

// 連想配列(ハッシュ) と for 〜 in


var obj = {
  val1 : 'foo',
  val2 : 'bar',
  val3 : 'baz',
}

for (var i in obj) {
  console.log('value of ' + i + ' is ' + obj[i]);
}

// value of val1 is foo
// value of val2 is bar
// value of val3 is baz

code_popup


---

// 連想配列(ハッシュ) と if 〜 in


var obj = {
  val1 : 'foo',
  val2 : 'bar',
  val3 : 'baz',
}

if ('val2' in obj) {
  console.log(obj['val2']);  // bar
}

code_popup

オブジェクト(列挙)

var obj = {
  'key1': 'val1',
  'key2': 'val2',
  'key3': 'val3',
};

console.log(Object.keys(obj));  // ["key1", "key2", "key3"]
console.log(Object.values(obj));  // ["val1", "val2", "val3"]
console.log(Object.entries(obj));  // [["key1", "val1"], ["key2", "val2"], ["key3", "val3"]]

code_popup

実体と参照

実体：プリミティブ型。値そのもの。
参照：実体の場所を指す情報。オブジェクト名や配列名。



// １）配列の参照コピー

var arr1 = ['foo','bar','baz'];
var arr2 = arr1;  // 参照情報のコピーになる

arr1[2] = 'qux';  // arr1が参照する値を変える(実体値を変える)と、

console.log(arr1[2]);  // qux
console.log(arr2[2]);  // qux  arr2が参照する値も変わる(同じ実体値を参照している)

code_popup



// ２）配列の実体コピー

function copyArray(inArr) {  // 配列を実体コピーする関数
  var outArr = [];  // 新しい配列を作る
  for (var i = 0; i < inArr.length; i++) {
    if (inArr[i] instanceof Array) {  // inArr[i] が Array(配列) なら true
      outArr[i] = copyArray(inArr[i]);  // trueならもう一度関数を呼ぶ
    } else {
      outArr[i] = inArr[i];  // trueでなければ実体の値を代入
    }
  }
  return outArr;
}

var arr1 = [['foo0', 'bar0'], ['foo1','bar1']];
var arr2 = copyArray(arr1);  // 実体の複製ができるため、

arr1[1][1] = 'qux1';  // arr1が参照する値を変えても、

console.log(arr1[1][1]);  // qux1
console.log(arr2[1][1]);  // bar1  arr2が参照する値は変化しない

code_popup

DOM参照(基礎)

// １）document参照


<!doctype html>
<title>title</title>

<script>

console.log(document.parentNode);  // null
console.log(document);  // #document // 最上層のオブジェクト
console.log(document.documentElement);  // <html>...</html> 
console.log(document.documentElement.tagName);  // HTML
console.log(document.html);  // undefined
console.log(document.body);  // <body>...</body>
console.log(document.body.tagName);  // BODY

</script>

code_popup

---

// ２）idで参照


<!doctype html>
<title>title</title>

<p id="bar" class="foobar" title="foobaz" name="fooqux">baz<b>qux</b>quxx</p>

<script>

var foo = document.getElementById('bar');  // document はオブジェクト。getElementById はメソッド。

console.log(foo);  // <p ...>...</p>
console.log(foo.innerHTML);  // baz<b>qux</b>quxx
console.log(foo.textContent);  // bazquxquxx
console.log(foo.parentNode);  // <body>...</body>  親ノードは書き換え不可
console.log(foo.tagName);  // P
console.log(foo.childNodes);  // [text, b, text, item: function] // ノードリスト
console.log(foo.childNodes.length);  // 3
console.log(foo.childNodes.item(0));  // "baz" // テキストノード
console.log(foo.childNodes[0]);  // "baz"
console.log(foo.childNodes[0].nodeType);  // 3 // テキストノードを示す番号
console.log(foo.childNodes[0].nodeName);  // #text
console.log(foo.childNodes[0].nodeValue);  // baz
console.log(foo.childNodes[1].previousSibling.nodeValue);  // baz
console.log(foo.childNodes[1].nextSibling.nodeValue);  // quxx
console.log(foo.firstChild.nodeValue);  // baz
console.log(foo.lastChild.nodeValue);  // quxx
console.log(foo.id);  // bar
console.log(foo.className);  // foobar
console.log(foo.title);  // foobaz
console.log(foo.name);  // undefined // nameは参照できる要素が限られている

</script>

code_popup

---

// ２-２）titleタグ、scriptタグの textプロパティ


<!doctype html>
<title id="baz0">qux</title>

<script id="baz1">

var foo = document.getElementById('baz0');
var bar = document.getElementById('baz1');

console.log(foo.text);  // qux
console.log(bar.text);  // (scriptの中身)

</script>

code_popup

---

// ３）タグで参照


<!doctype html>
<title>title</title>

<p>
bar
<b>qux0</b>
<b>qux1</b>
quxx
</p>

<script>

var foo = document.getElementsByTagName('b');

console.log(foo);  // [b, b, item: function] // ノードリスト
console.log(foo.length);  // 2
console.log(foo.item(0));  // <b>qux0</b>
console.log(foo.item(0).innerHTML);  // qux0

</script>

code_popup

---

// ４）classで参照（ie8以前は無効）


<!doctype html>
<title>title</title>

<p>
bar
<b class="baz">qux0</b>
<b class="baz">qux1</b>
quxx
</p>

<script>

var foo = document.getElementsByClassName('baz');

console.log(foo);  // [b.baz, b.baz, item: function] // ノードリスト
console.log(foo.length);  // 2
console.log(foo.item(0));  // <b ...>qux0</b>
console.log(foo.item(0).innerHTML);  // qux0

</script>

code_popup

---

// ５）querySelector


<!doctype html>
<title>title</title>

<p>
bar
<b class="baz">qux0</b>
<b class="baz">qux1</b>
quxx
</p>

<script>

var foo1 = document.querySelector('.baz');
var foo2 = document.querySelectorAll('.baz');

console.log(foo1);  // <b class="baz">qux0</b> // taking first element
console.log(foo2);  // NodeList(2) [b.baz, b.baz]

</script>

code_popup

DOM操作(基礎)

<!doctype html>
<title>title</title>

<h1></h1>

<input type="button" value="appendPeach" onclick="appendPeach();">
<input type="button" value="appendFivePeaches" onclick="appendFivePeaches();">
<input type="button" value="insertBlueberry" onclick="insertBlueberry();">
<input type="button" value="removeBottom" onclick="removeBottom();">
<input type="button" value="removeAll" onclick="removeAll();">
<input type="button" value="cloneTop" onclick="cloneTop();">
<input type="button" value="replaceAll" onclick="replaceAll();">
<input type="button" value="reset" onclick="reset();">

<ul id="fruit_list">
<li>apple</li>
<li>orenge</li>
<li>banana</li>
<li>grape</li>
</ul>


<script>

function appendPeach() {
  var ul = document.getElementById('fruit_list');
  var li = document.createElement('li');
  li.innerHTML = document.createTextNode('peach').nodeValue;
  ul.appendChild(li);

  // liとTextNodeを生成し、liの中にTextNodeを入れる。ul内の一番最後にliを挿入する。
}

function appendFivePeaches() {
  var ul = document.getElementById('fruit_list');
  var fgm = document.createDocumentFragment();  // 暫定的な木構造の枠を生成
  for (i = 0; i < 5; i++) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode('peach'));
    fgm.appendChild(li);
  }
  ul.appendChild(fgm);  // 追加する要素は5つだがulにappendする処理は1回で済む
}

function insertBlueberry() {
  var ul = document.getElementById('fruit_list');
  var li = document.createElement('li');
  li.appendChild(document.createTextNode('blueberry'));
  ul.insertBefore(li, ul.firstChild);

  // liとTextNodeを生成し、liの中にTextNodeを入れる。ul内の一番最初にliを挿入する。
}

function removeBottom() {
  var ul = document.getElementById('fruit_list');
  if(ul.hasChildNodes()) {
    if (ul.lastChild.nodeValue === '\n') {
      ul.removeChild(ul.lastChild);
    }
    if (ul.hasChildNodes()) {
      ul.removeChild(ul.lastChild);
    }
  }

  // ul内にノードが存在すれば、最後のノードを削除する。
}

function removeAll() {
  var ul = document.getElementById('fruit_list');
  while(ul.hasChildNodes()) {
    ul.removeChild(ul.lastChild);
  }

  // ul内に子ノードが存在すれば true、最後の子ノードを削除する。子ノードが無くなるまで処理を繰り返す。
}

function cloneTop() {
  var ul = document.getElementById('fruit_list');
  for (i = 0; i < ul.childNodes.length; i++) {
    if(ul.childNodes.item(i).tagName === 'LI') {
      ul.appendChild(ul.childNodes.item(i).cloneNode(true)); // trueにすると子ノードも含む
      break;
    }
  }

  // ul内の最初のliを複製して最後に挿入する。
}

function replaceAll() {
  var ul = document.getElementById('fruit_list');
  for (i = 0; i < ul.childNodes.length; i++) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode('strawberry'));

    if (ul.childNodes.item(i).tagName === 'LI') {
      ul.replaceChild(li, ul.childNodes.item(i));
    }
  }

  // ul内の全てのノードのうち、liに限り、新しく生成したliに置換する。
}

function reset() {
  var ul = document.getElementById('fruit_list');
  while(ul.hasChildNodes()) {
    ul.removeChild(ul.firstChild);
  }
  var fruit = ['apple', 'orenge', 'banana', 'grape'];
  var fgm = document.createDocumentFragment();
  for (i = 0; i < fruit.length; i++) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(fruit[i]));
    fgm.appendChild(li);
  }
  ul.appendChild(fgm);

  // ul内の全てのノードを削除し、スタート時のノードを生成する。
}

</script>

code_popup

DOM参照,操作(table)

<!doctype html>
<title>title</title>

<table id="fruit_list">
<tr>
<td>apple</td><td>red</td><td>42</td>
</tr>
<tr>
<td>banana</td><td>yellow</td><td>84</td>
</tr>
</table>


<script>

var table = document.getElementById('fruit_list');

console.log(table);  // <table ...>...</table>
console.log(table.rows);  // [tr, tr, ...] // HTMLCollection
console.log(table.rows.length);  // 2
console.log(table.rows[0]);  // <tr>...</tr> // HTMLTableRowElement
console.log(table.rows[0].rowIndex);  // 0
console.log(table.rows[0].innerHTML);  // <td>apple</td><td>red</td><td>42</td>
console.log(table.rows[0].cells);  // [td, td, td, ...] // HTMLCollection
console.log(table.rows[0].cells.length);  // 3
console.log(table.rows[0].cells[0]);  // <td>apple</td> // HTMLTableCellElement
console.log(table.rows[0].cells[0].cellIndex);  // 0
console.log(table.rows[0].cells[0].innerHTML);  // apple
console.log(table.tBodies);  // [tbody, ...] // HTMLCollection
console.log(table.tBodies.length);  // 1
console.log(table.tBodies[0]);  // <tbody>...</tbody> // HTMLTableSectionElement
console.log(table.tBodies[0].innerHTML);  // (tableタグ内の全てのノード)

</script>

code_popup

---

<!doctype html>
<title>title</title>
<body onload="sum();">

<input type="button" value="change_number" onclick="resetNumber();">
<input type="button" value="insertPeach" onclick="insertPeach();">
<input type="button" value="deleat_peach" onclick="deletePeach();">
<input type="button" value="deleteCaption" onclick="deleteCaption();">
<input type="button" value="reset" onclick="reset();">

<table id="fruit_list" border="1">
<caption>fruit_list</caption>
<thead>
<tr>
<th>name</th><th>color</th><th>number</th>
</tr>
</thead>
<tfoot>
<tr>
<td>sum</td><td></td><td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>apple</td><td>red</td><td>42</td>
</tr>
<tr>
<td>banana</td><td>yellow</td><td>126</td>
</tr>
</tbody>
</table>


<script>

function resetNumber() {
  var table = document.getElementById('fruit_list');

  for (var i = 0; i < table.rows.length; i++) {
    var target_row = table.rows[i];
    var target_cell = target_row.cells[0].innerHTML;
    if(target_cell !== 'name' && target_cell !== 'foot') {
      target_row.deleteCell(2);
      target_row.insertCell(2).innerHTML = 0;
    }
  }
  sum();
}

function insertPeach() {
  var table = document.getElementById('fruit_list')
  var peach = ['peach','pink',84]

  var row = table.insertRow(2);
  for (var i = 0; i < peach.length; i++) {
    var cell = row.insertCell(i);
    cell.appendChild(document.createTextNode(peach[i]));
  }
  sum();
}

function deletePeach() {
  var table = document.getElementById('fruit_list');

  for (var i = 0; i < table.rows.length; i++) {
    if(table.rows[i].cells[0].innerHTML === 'peach') {
      table.deleteRow(i);
      i--;
    }
  }
  sum();
}

function reset() {
  var table = document.getElementById('fruit_list');
  while(table.hasChildNodes()) {
    table.removeChild(table.lastChild);
  }
  table.createTHead().innerHTML = '<tr><th>name</th><th>color</th><th>number</th></tr>';
  table.createTFoot().innerHTML = '<tr><td>sum</td><td></td><td></td></tr>';
  table.createTBody().innerHTML = '<tr><td>apple</td><td>red</td><td>42</td></tr><tr><td>banana</td><td>yellow</td><td>126</td></tr>';
  table.createCaption().innerHTML = 'fruit_list';
  sum();
}

function deleteCaption() {
  var table = document.getElementById('fruit_list');

  table.deleteCaption();
}

function sum() {
  var table = document.getElementById('fruit_list');
  var sum = 0;
  for (var i = 0; i < table.rows.length; i++) {
    var target_row = table.rows[i];
    var target_cell = target_row.cells[0].innerHTML;
    if(target_cell !== 'name' && target_cell !== 'sum') {
      sum = sum + parseInt(target_row.cells[2].innerHTML, 10);
    }
  }
  for (var i=0;i<table.rows.length;i++) {
    if(table.rows[i].cells[0].innerHTML === 'sum') {
      table.rows[i].cells[2].innerHTML = sum;
    }
  }
}

</script>

code_popup

DOM参照,操作(img)

<!doctype html>
<title>title</title>

<img id="foo" src="bar.gif" alt="baz" name="qux">

<script>

var img = document.getElementById('foo');

console.log(img.src);  // 〜/bar.gif
console.log(img.alt);  // baz
console.log(img.name);  // qux

</script>

code_popup

DOM参照,操作(attribute)

<!doctype html>
<title>title</title>

<img src="foo" alt="bar" width="42" height="42">

<script>

var img = document.getElementsByTagName('IMG');

console.log(img[0].getAttribute('src'));  // foo
console.log(img[0].getAttribute('alt'));  // bar
console.log(img[0].getAttribute('width'));  // 42
console.log(img[0].getAttributeNode('src'));  // src="baz" // Attrオブジェクト(これより下でsetした値も上書きして反映される)

img[0].setAttribute('src', 'baz');
img[0].setAttribute('alt', 'qux');
img[0].setAttribute('width', '84');

console.log(img[0].getAttribute('src'));  // baz
console.log(img[0].getAttribute('alt'));  // qux
console.log(img[0].getAttribute('width'));  // 84

console.log(img[0].hasAttribute('src'));  // true
console.log(img[0].hasAttribute('title'));  // false

console.log(img[0].getAttribute('title'));  // null

img[0].setAttribute('title', 'quxx');
console.log(img[0].getAttribute('title'));  // quxx

</script>

code_popup

DOM参照,操作(css)

// １）インラインスタイル


<!doctype html>
<title>title</title>
<style>
p {background-color: #f00;}
</style>

<p>foo</p>


<script>

var p = document.getElementsByTagName('p').item(0);

p.style.display = 'table-cell';  // ↓以下、pのインラインに設定される
p.style.width = '100px';
p.style.height = '100px';
p.style.margin = '10px';
p.style.padding = '10px';
p.style.border = '1px solid #000';
p.style.textAlign = 'center';  // プロパティ名にハイフンは使わない
p.style.verticalAlign = 'middle';  // プロパティ名にハイフンは使わない

console.log(p.style);  // CSSStyleDeclaration {...}
console.log(p.style.display);  // table-cell
console.log(p.style.backgroundColor);  // 空（styleではインラインのみ取得可）

</script>

code_popup

---

// ２）計算済みスタイル


<!doctype html>
<title>title</title>
<style>
p {background-color: #f00;}
</style>

<p>foo</p>


<script>

var p = document.getElementsByTagName('p').item(0);

console.log(document);  // #document // HTMLDocument
console.log(document.defaultView);  // Window {...}
console.log(document.defaultView.getComputedStyle(p, null));  // CSSStyleDeclaration {...}
console.log(document.defaultView.getComputedStyle(p, null).backgroundColor);  // rgb(255, 0, 0)　書き換え不可

// null の部分には、":first-letter" など疑似要素を入れることが可能
// ":hover" などは疑似クラスなので利用不可

</script>

code_popup

---

// ３）スタイルシートリスト


<!doctype html>
<title>title</title>

<link rel="stylesheet" href="http://3300.me/top/css/3300.css">
// ↑ document.styleSheets[0]

<style>
div {padding: 30px;}
p {padding: 30px;}
span {padding: 30px; display: block;}
</style>
// ↑ document.styleSheets[1]

<div>
<p>
<span>foo</span>
</p>
</div>

<script>

console.log(document.styleSheets);  // StyleSheetList
console.log(document.styleSheets.length);  // 2 // 読み込みcssとstyleタグの合計数
console.log(document.styleSheets[0]);  // CSSStyleSheet
console.log(document.styleSheets[0].ownerNode);  // <link ...> // HTMLLinkElement
console.log(document.styleSheets[1].ownerNode);  // <style>...</style> // HTMLStyleElement
console.log(document.styleSheets[0].ownerNode.nodeName);  // LINK
console.log(document.styleSheets[1].ownerNode.nodeName);  // STYLE
console.log(document.styleSheets[0].disabled);  // false // そのstyleSheetを無効化するかどうか
console.log(document.styleSheets[1].cssRules);  // CSSRuleList
console.log(document.styleSheets[1].cssRules.length);  // 3 // divとpとspanで3つ
console.log(document.styleSheets[1].cssRules[0]);  // CSSStyleRule
console.log(document.styleSheets[1].cssRules[0].cssText);  // div { padding: 30px; }
console.log(document.styleSheets[1].cssRules[0].selectorText);  // div
console.log(document.styleSheets[1].cssRules[0].style);  // CSSStyleDeclaration
console.log(document.styleSheets[1].cssRules[0].style.padding);  // 30px

</script>

// jsfiddleなどでは別のstylesheetも取得するため、正しく動かない
// ローカルでhtmlに貼り付け、ブラウザで確認すれば正しく動く

code_popup

---

// ４）スタイルシート操作


<!doctype html>
<title>title</title>

<input type="button" value="red" onclick="red()">
<input type="button" value="green" onclick="green()">
<input type="button" value="blue" onclick="blue()">

<style>
body {background: #fff;}
</style>

<script>

var css = document.styleSheets[0];

function red() {
  css.insertRule('body {background: #f00;}', css.cssRules.length);
  // 第2引数は数字で、この場合 '1' になり、1行目の body {〜}が '0' にあたるので、2行目に追加される
  css.deleteRule(0);
  // 1行目の body {〜} を削除する
}
function green() {
  css.insertRule('body {background: #0f0;}', css.cssRules.length);
  css.deleteRule(0);
}
function blue() {
  css.insertRule('body {background: #00f;}', css.cssRules.length);
  css.deleteRule(0);
}

</script>

// jsfiddleなどでは別のstylesheetも取得するため、正しく動かない
// ローカルでhtmlに貼り付け、ブラウザで確認すれば正しく動く

code_popup

DOM参照,操作(form)

<!doctype html>
<title>title</title>

<form action="http://3300.me">
  <input type="text" value="foo">
  <input type="checkbox">
  <select>
    <option>bar</option>
    <optgroup>
    <option>baz</option>
    <option>qux</option>
    </optgroup>
  </select>
</form>


<script>

var form_list = document.forms;
console.log(form_list);  // [form, ...] // HTMLCollection
console.log(form_list.item(0));  // <form ...>...</form> // HTMLFormElement
console.log(form_list.item(0).elements);  // [input, input, select, ...] // HTMLFormControlsCollection
console.log(form_list.item(0).elements.length);  // 3 // FormElementの数
console.log(form_list.item(0).elements.item(0));  // <input ...>...</input> // HTMLInputElement

var input = form_list.item(0).elements.item(0);
console.log(input.type);  // text
console.log(input.value);  // foo（書き換え可）
console.log(input.defaultValue);  // foo（書き換え不可）
console.log(input.disabled);  // false
console.log(input.readOnly);  // false

var check = form_list.item(0).elements.item(1);
console.log(check.checked);  // false（書き換え可）
console.log(check.defaultChecked);  // false（書き換え不可）

var select = form_list.item(0).elements.item(2);
console.log(select.options);  // [option, option, option, ...] // HTMLOptionsCollection
console.log(select.options.length);  // 3 // optionをいくつ含むか
console.log(select.length);  // 3 // 以降、optionsを省略しても同じ結果
console.log(select.item(0));  // <option>bar</option>[object HTMLOptionElement]
console.log(select.item(0).value);  // bar
console.log(select.item(3));  // null
console.log(select.selectedIndex);  // 0 // 選択されている番号。何も選択されていない場合は -1

</script>

code_popup

---

<!doctype html>
<title>title</title>

<form action="http://3300.me">
  <input type="button" value="append_option" onclick="appendOption()">
  <input type="button" value="remove_option" onclick="removeOption()">
  <select>
    <option>foo</option>
  </select>
</form>


<script>

var select = document.forms.item(0).elements.item(2);

function appendOption() {
  var option = document.createElement('option');
  option.appendChild(document.createTextNode('foo'));
  select.add(option, select.options.item(0));
}

function removeOption() {
  if (0 < select.length) {
    select.remove(0);
  } else {
    console.log('no option');
  }
}

</script>

code_popup

イベント

<!doctype html>
<title>title</title>

<input type="button" value="push" onclick="console.log('input')">

code_popup

---

onclick　　　// クリック時
ondblclick　　　// ダブルクリック時
onmouseup　　　// マウスボタンを上げた時
onmousedown　　　// マウスボタンを押した時
onmousemove　　　// マウスを動かしている時
onmouseout　　　// マウスポインタが離れた時
onmouseover　　　// マウスポインタが乗った時
onkeyup　　　// キーを上げた時
onkeydown　　　// キーを押した時
onkeypress　　　// キーを押してる時

onchange　　　// フォーム要素の選択、変更時
onselect　　　// テキスト選択時
onsubmit　　　// 送信時
onreset　　　// リセット時

onblur　　　// フォーカスが外れた時
onfocus　　　// フォーカスが当たった時

onload　　　// 読み込み完了時
onunload　　　// ウィンドウ削除時、ウィンドウ切り替え時、リロード時
onabort　　　// 画像読み込み中断時
onerror　　　// 画像読み込みエラー時

// など

イベントリスナ

// １）特定のノードをイベントリスナに設定する場合


<!doctype html>
<title>title</title>

<p id="foo">click</p>  // 反応する
<p id="bar">click</p>  // 反応しない


<script>

function elTest() {
  console.log('baz');
}

var foo = document.getElementById('foo');

if(addEventListener) {
  foo.addEventListener('click', elTest, false);  // foo(特定のpタグ) をイベントリスナに設定する
} else if(attachEvent) {
  foo.attachEvent('onclick', elTest);  // IE8以前は addEventListener に未対応
}

</script>

code_popup

---

// １−２）無名関数で反応させる場合


<!doctype html>
<title>title</title>

<p id="foo">click</p>

<script>

var foo = document.getElementById('foo');

foo.addEventListener('click', function() {
  console.log('bar');
}, false);

</script>

code_popup

---

// ２）document全体をイベントリスナに設定し、イベントが起きた箇所で反応させる場合


<!doctype html>
<title>title</title>

<p id="foo">click</p>  // 反応する
<p id="bar">click</p>  // 反応する


<script>

function elTest(ev) {  // 引数にはイベントオブジェクトが入ってくる
  if(ev.target.tagName === 'P') {  // pタグ以外の箇所をクリックした時に反応しないようにする
    console.log(ev);  // MouseEvent {...}
    console.log(ev.target);  // <p ...>click</p> // HTMLParagraphElement // IE8以前は srcElement
    console.log(ev.target.id);  // (クリックしたpタグのid)
    console.log(ev.currentTarget);  // (イベントリスナに設定された要素)
  }
}

if(addEventListener) {
  document.addEventListener('click', elTest, false);  // document をイベントリスナに設定する。
} else if(attachEvent) {
  document.attachEvent('onclick', elTest);  // IE8以前は addEventListener に未対応
}

</script>

code_popup

イベントフローの性質

// １-１）イベントバブリング１


<!doctype html>
<title>title</title>

<div onclick="console.log('div')" style="background: #ddd; padding: 10px;">div
<p onclick="console.log('p')" style="background: #eee;">p click</p>
</div>

// p -> div
// p部分をクリックすると、同時にdiv部分もクリックしていることになるが、子ノードから先にイベントを起こす性質がある

code_popup

---

// １-２）イベントバブリング２


<!doctype html>
<title>title</title>

<div id="foo" style="background: #ccc; padding: 10px;">div
<p id="bar" style="background: #ddd; padding: 10px;">p
<span id="baz" style="display: block; background: #eee;">span click</span>
</p>
</div>

<script>
function elTest1() {console.log('div');}
function elTest2() {console.log('p');}
function elTest3() {console.log('span');}
document.getElementById('foo').addEventListener('click', elTest1, false);
document.getElementById('bar').addEventListener('click', elTest2, false);
document.getElementById('baz').addEventListener('click', elTest3, false);
</script>

// span -> p -> div
// イベントリスナの第3引数がfalseだとバブリング（子ノードから先にイベントを起こす）

code_popup

---

// ２）イベントキャプチャリング


<!doctype html>
<title>title</title>

<div id="foo" style="background: #ccc; padding: 10px;">div
<p id="bar" style="background: #ddd; padding: 10px;">p
<span id="baz" style="display: block; background: #eee;">span click</span>
</p>
</div>

<script>
function elTest1() {console.log('div');}
function elTest2() {console.log('p');}
function elTest3() {console.log('span');}
document.getElementById('foo').addEventListener('click', elTest1, true);
document.getElementById('bar').addEventListener('click', elTest2, true);
document.getElementById('baz').addEventListener('click', elTest3, true);
</script>

// div -> p -> span
// イベントリスナの第3引数がtrueだとキャプチャリング（親ノードから先にイベントを起こす）

code_popup

---

// ３）デフォルトアクションの制限


<!doctype html>
<title>title</title>

<a href="http://3300.me/">click</a>


<script>
function elTest(ev) {
  if(ev.target.tagName === 'A') {
    console.log('ev');
    ev.preventDefault();
  }
}
document.addEventListener('click', elTest, false);
</script>

// ev
// aタグのリンクを反応させない

code_popup

---

// ４）イベントフローの中断


<!doctype html>
<title>title</title>

<p id="foo" style="background: #ddd; padding: 10px;">p
<span id="bar" style="display: block; background: #eee;">span <a href="http://3300.me/">click</a></span>
</p>

<script>
function elTest1(ev) {console.log('p');}
function elTest2(ev) {console.log('span');ev.stopPropagation();}
document.getElementById('foo').addEventListener('click', elTest1, false);
document.getElementById('bar').addEventListener('click', elTest2, false);
</script>

// span
// spanのイベントのあとバブリングが止まるので、pでのイベントは起こらない
// aのリンクは反応する

code_popup

---

// ５）対になるターゲット


<!doctype html>
<html style="background: #fff; padding: 15px;">
<title>title</title>

<body style="background: #ddd; padding: 10px;">body
<p style="background: #eee; padding: 10px;">p
<span style="display: block; background: #ccc;">span</span>
</p>

<script>
function elTest(ev) {
console.log('target : ' + ev.target.tagName + '\n' + 'relatedTarget : ' + ev.relatedTarget.tagName);
}

document.addEventListener('mouseover', elTest, false);
</script>

// mouseoverしたノードがtargetになる
// 同時に、mouseoutしたノードが、対のrelatedTargetになる

</body>
</html>

code_popup

オブジェクト指向(コンストラクタとインスタンス)

function cns() {
  this.val = "foo";
};
// コンストラクタ(オブジェクトの生成元)となる関数オブジェクトcnsを定義
// この場合のthisは、cnsを元に生成される新たなオブジェクト(インスタンス)を参照する

var ins = new cns(); // new演算子でcnsを呼ぶと、インスタンスが生成され、それが戻り値になる

console.log(ins.val); // foo // cnsをモデルとして、insのプロパティvalが定義された


console.log(cns); // function cns() // cns は関数
console.log(cns.prototype); // cns {} // cns.prototype は関数cnsの雛形オブジェクト
console.log(ins); // cns {val: 'foo'} // ins は生成されたインスタンスオブジェクト ins {val: 'foo'}
console.log(ins.__proto__); // cns {} // ins.__proto__ は関数cnsの雛形オブジェクト
console.log(ins.constructor); // function cns() // insのコンストラクタは関数cns
console.log(ins instanceof cns); // true // insはcnsのインスタンス
console.log(Object.getPrototypeOf(ins) === cns.prototype); // true // insはcnsのprototypeオブジェクトを参照可能

code_popup

---

// オブジェクト指向とは

・システムを部品の組み合わせで構築する
・部品を再利用することで、同処理の開発重複を防ぐ
・開発や管理の効率化、合理化が目的

オブジェクト指向(プロトタイプとObject)

function cns() {
  this.val = "foo";
};
var ins = new cns();
// コンストラクタを定義し、インスタンスを生成


console.log(cns.prototype); // Object {constructor: function} // prototypeは、cnsが持つ雛形(生成するオブジェクトの形)
console.log(ins.__proto__); // Object {constructor: function} // __proto__は、生成元(cns)の雛形
console.log(cns.prototype === ins.__proto__); // true // 上記の2つは同じもの
console.log(ins.prototype); // undefined // insは関数オブジェクトではないので雛形を持たない
console.log(cns.prototype.isPrototypeOf(ins)); // true // insのプロトタイプはcns.prototype


console.log(Object); // function Object() { [native code] } // 大元のObject関数
console.log(Object.prototype); // Object {...} // Object // Objectが持つ雛形
console.log(Object.prototype.__proto__); // null // 雛形に生成元は無い

console.log(ins.__proto__.__proto__); // Object {...} // Object // ins.__proto__ の生成元の雛形を参照
console.log(ins.__proto__.__proto__ === Object.prototype); // true // ins.__proto__のモデルはObjectが持つ雛形
console.log(ins.__proto__.__proto__.__proto__); // null // Objectに生成元は無い


// var ins = new Object();
// オブジェクト定義のこの式は、Object関数をコンストラクタとしてインスタンスins(オブジェクト)を生成する、という意味

code_popup

オブジェクト指向(Functionとconstructor)

function cns() {
  this.val = 'foo';
};
var ins = new cns();
// コンストラクタを定義し、インスタンスを生成


console.log(Function); // function function() { [native code] } // 大元のFunction関数
console.log(ins.constructor); // function cns() {this.val = 'foo';} // constructorは、生成元(cns)そのものを参照
console.log(ins.constructor === cns); // true // insのコンストラクタはcns
console.log(cns.constructor === Function); // true // cnsのコンストラクタはFunction
console.log(Function.constructor === Function); // true // FunctionのコンストラクタもFunction
console.log(Object.constructor === Function); // true // ObjectのコンストラクタもFunction
console.log(Function.prototype.__proto__ === Object.prototype); // true // Functionが持つ雛形は、Objectが持つ雛形から生成されている

// つまり、関数の形としてはObjectがFunctionをモデルとしているが、オブジェクトの形としてはFunctionがObjectをモデルとしている

code_popup

オブジェクト指向(メソッドの定義)

// １）コンストラクタの中に設定

function fruit(c) {
  this.color = c;
  this.talk = function() {
    console.log('My color is ' + this.color + '.');
  };
}

var apple = new fruit('red'); // インスタンスを生成 -> インスタンスの中にメソッドA(function() {〜})ができる
var banana = new fruit('yellow'); // インスタンスを生成 -> インスタンスの中にメソッドB(function() {〜})ができる
var grape = new fruit('violet'); // インスタンスを生成 -> インスタンスの中にメソッドC(function() {〜})ができる

apple.talk(); // My color is red. // メソッドAが動く
banana.talk(); // My color is yellow. // メソッドBが動く
grape.talk(); // My color is violet. // メソッドCが動く

// コンストラクタの中にメソッドがあると、
// インスタンス1つにつき1つのメソッドが生成される
// それぞれのメソッドは内容が同じため、メモリの無駄

code_popup

---

// ２）コンストラクタのプロトタイプとして設定

function fruit(c) {
  this.color = c;
}
fruit.prototype.talk = function() {
  console.log('My color is ' + this.color + '.');
};

var apple = new fruit('red'); // インスタンスを生成 -> インスタンスの中にメソッドは無い
var banana = new fruit('yellow'); // インスタンスを生成 -> インスタンスの中にメソッドは無い
var grape = new fruit('violet'); // インスタンスを生成 -> インスタンスの中にメソッドは無い

apple.talk(); // My color is red. // コンストラクタのプロトタイプのメソッドAが動く
banana.talk(); // My color is yellow. // コンストラクタのプロトタイプのメソッドAが動く
grape.talk(); // My color is violet. // コンストラクタのプロトタイプのメソッドAが動く

// 参照対象のメソッドがインスタンス内に無い場合、JSは生成元であるコンストラクタのプロトタイプを参照する
// 上記の3つはいずれも、プロトタイプとして設定された同じメソッドが動く

code_popup

オブジェクト指向(プロトタイプチェーン)

var obj1 = new Object();  // オブジェクトを定義
obj1.val = 42;  // プロパティを定義

function fnc1() {};  // 関数オブジェクトを定義
fnc1.prototype = obj1;  // fnc1のprototypeに、オブジェクトobj1を定義
var obj2 = new fnc1();  // fnc1をコンストラクタとして、インスタンスobj2を生成する

function fnc2() {};  // 関数オブジェクトを定義
fnc2.prototype = obj2;  // fnc2のprototypeに、オブジェクトobj2を定義
var obj3 = new fnc2();  // fnc2をコンストラクタとして、インスタンスobj3を生成する

console.log(obj3.val);  // 42

// １）console.log(obj3.val); -> obj3.val を参照
// ２）obj3.valが定義されていないので、obj3のコンストラクタであるfnc2のプロトタイプを参照
// ３）fnc2のプロトタイプはobj2だから、obj2.valがあるかどうかを判定
// ４）obj2.valが定義されていないので、obj2のコンストラクタであるfnc1のプロトタイプを参照
// ５）fnc1のプロトタイプはobj1だから、obj1.valがあるかどうかを判定
// ６）obj1.valが定義されているので、obj1.val = 42 を返す


console.log(obj3.hasOwnProperty('val')); // false
console.log(obj2.hasOwnProperty('val')); // false
console.log(obj1.hasOwnProperty('val')); // true // オブジェクトがプロパティを直接持っていればtrue

// hasOwnPropertyは、そのオブジェクト自体の中のプロパティやメソッドの有無を参照


console.log(obj3); // fnc2 {...}
console.log(obj3.__proto__ === fnc2.prototype); // true
console.log(obj2.__proto__ === fnc1.prototype); // true
console.log(obj1.__proto__ === Object.prototype); // true
console.log(obj3.__proto__.__proto__.__proto__ === Object.prototype); // true

console.log(obj3.constructor); // function Object() { [native code] }
console.log(obj3.constructor === fnc2); // false
console.log(obj3.constructor === fnc1); // false
console.log(obj3.constructor === Object); // true

// 便宜上、「obj3のコンストラクタはfnc2」という言い回しをしているが、
// 厳密には「全てのインスタンスのconstructorはObject」


console.log(Object.prototype); // Object {...}
console.log(Object.prototype.__proto__); // null

// そして、Object.prototype がプロトタイプチェーンの終着点となる

code_popup

オブジェクト指向(継承)

// 継承元コンストラクタ cns1
function cns1(t) {
  this.val = t;
}
cns1.prototype.mtd = function() {
  console.log(this.val);
};

// 継承先コンストラクタ cns2
function cns2() {
  cns1.apply(this, arguments); // 継承の定義(applyでcns2のthisをcns1のthisに設定することで、cns2~cns1間でのthisや引数の流用が可能になる)
}
cns2.prototype = new cns1(); // プロトタイプチェーンの定義(cns2のprototypeにcns1のインスタンスを設定することで、cns2にプロパティやメソッドがない場合cns1を参照するようになる)


var ins1 = new cns1('ins1_text'); // cns1のインスタンスins1を定義
var ins2 = new cns2('ins2_text'); // cns2のインスタンスins2を定義

ins1.mtd(); // ins1_text
ins2.mtd(); // ins2_text

code_popup

---

// 継承元コンストラクタ
function cns1(t) {
  this.val = t;
}
cns1.prototype.mtd = function() {
  console.log(this.val);
};

// 継承先コンストラクタ
function cns2() {
  // cns1.apply(this, arguments); -> 継承の定義をはずすと、
}
cns2.prototype = new cns1();


var ins1 = new cns1('ins1_text');
var ins2 = new cns2('ins2_text');

ins1.mtd(); // ins1_text
ins2.mtd(); // undefined -> 引数を引き継げない

code_popup

---

// 継承元コンストラクタ
function cns1(t) {
  this.val = t;
}
cns1.prototype.mtd = function() {
  console.log(this.val);
};

// 継承先コンストラクタ
function cns2() {
  cns1.apply(this, arguments);
}
// cns2.prototype = new cns1(); -> プロトタイプチェーンの定義をはずすと、


var ins1 = new cns1('ins1_text');
var ins2 = new cns2('ins2_text');

ins1.mtd(); // ins1_text
ins2.mtd(); // Uncaught TypeError: ins2.mtd is not a function -> メソッドを引き継げない

code_popup

オブジェクト指向(クロージャ)

// outer scope
var closure = function() {
  var v = 0;
  // inner scope
  return function() {
    v++;
    return v;
  };
};

var run = closure();

console.log(run()); // 1
console.log(run()); // 2
console.log(run()); // 3
console.log(run()); // 4

// a) run = closure(); // global => outer => inner のスコープチェーンが定義される
// b) console.log(run());
// c) innerに入る
// d) v++; // inner内にvが無いので1つ外のouterのv( = 0)を参照し、+1、 その参照経路がinner内で定義される
// e) return v; // inner
// f) return v <= function(){v++;return v;}; // outer
// g) 1回目は1を出力
// h) run();
// i) innerに入る
// j) v++; // inner内にd)で定義されたvを参照し、+1
// k) 以降、e)~j)を繰り返す

code_popup

オブジェクト指向(ゲッタとセッタ)

var obj = {
  foo: 0,
  get mtd () { return this.foo; }, // 参照されるとゲッタが動く
  set mtd (v) { this.foo = v; }, // 代入されるとセッタが動く
};

console.log(obj.mtd); // 0
obj.mtd = 1;
console.log(obj.mtd); // 1

obj.foo = 'str';
console.log(obj.mtd); // str // 直接fooにアクセスすると上書きできてしまう

code_popup

---

function cns() { // クロージャ構成にして外からfooへのアクセスを制限
  var foo = 0;
  return {
    get mtd () { return foo; },
    set mtd (v) { foo = v; },
  };
};
var ins = new cns();

console.log(ins.mtd); // 0
ins.mtd = 1;
console.log(ins.mtd); // 1

code_popup

---

function cns() { // クロージャ構成で外からfooへのアクセスを制限
  var foo = false;
  return {
    get mtd () { return foo; },
    set mtd (v) {
      if (v === true || v === false) { // さらにセット可能の条件を設定
        foo = v;
      };
    },
  };
};
var ins = new cns();


console.log(ins.mtd); // false // 初期値

ins.mtd = true; // 条件を満たし上書き可
console.log(ins.mtd); // true

ins.mtd = 42; // 条件を満たさず上書き不可
console.log(ins.mtd); // true

foo = 42; // fooへのアクセス制限により上書き不可
console.log(ins.mtd); // true

ins.mtd = false; // 条件を満たし上書き可
console.log(ins.mtd); // false

code_popup

オブジェクト指向(名前空間)

// 書式1 - 直書き

// 処理1
var val1 = {
  'v1': 'foo',
  'v2': 'bar',
};
var fnc1 = function() {
  console.log(val1.v1); // foo
};
fnc1();

// 処理2
var val2 = {
  'v3': 'baz',
  'v4': 'qux',
};
var fnc2 = function() {
  console.log(val2.v4); // qux
};
fnc2();

// グローバル変数が多く、他と競合が発生しやすい

code_popup



---

// 書式2 - 全体を関数化

var fncAll = function() {
  // 処理1
  var val1 = {
    'v1': 'foo',
    'v2': 'bar',
  };
  var fnc1 = function() {
    console.log(val1.v1); // foo
  };
  fnc1();

  // 処理2
  var val2 = {
    'v3': 'baz',
    'v4': 'qux',
  };
  var fnc2 = function() {
    console.log(val2.v4); // qux
  };
  fnc2();
};

fncAll();

// fncAllのみがグローバル変数となる

code_popup



---

// 書式3 - 即時関数化

(function() {
  // 処理1
  var val1 = {
    'v1': 'foo',
    'v2': 'bar',
  };
  var fnc1 = function() {
    console.log(val1.v1); // foo
  };
  fnc1();

  // 処理2
  var val2 = {
    'v3': 'baz',
    'v4': 'qux',
  };
  var fnc2 = function() {
    console.log(val2.v4); // qux
  };
  fnc2();
})();

// グローバル変数を無くせる
// 処理ごとに分離されてなく、拡張時の影響範囲が把握しにくい

code_popup



---

// 書式4 - 処理のオブジェクト化

(function() {
  // 処理1
  var obj1 = {
    v: {
      v1: 'foo',
      v2: 'bar',
    },
    run: function() {
      console.log(this.v.v1); // foo
    },
  }
  obj1.run();

  // 処理2
  var obj2 = {
    v: {
      v3: 'baz',
      v4: 'qux',
    },
    run: function() {
      console.log(this.v.v4); // qux
    },
  }
  obj2.run();
})();

code_popup


// 以上のように処理を分離することはできるが、
// 以下のように処理1と処理2を別のファイルなどに分ける場合、互いのデータはとれなくなる
// 複数のオブジェクトの間で変数の重複はなくなる

// 処理1
(function() {
  var obj1 = {
    v: {
      v1: 'foo',
      v2: 'bar',
    },
    run: function() {
      console.log(this.v.v1 + obj1.v.v1); // foofoo
    },
  }
  obj1.run();
})();

// 処理2
(function() {
  var obj2 = {
    v: {
      v3: 'baz',
      v4: 'qux',
    },
    run: function() {
      console.log(this.v.v4 + obj1.v.v1); // Uncaught ReferenceError: obj1 is not defined
    }
  }
  obj2.run();
})();

// 即時関数をやめれば互いのデータをとれるが、グローバル変数が2つできてしまう

code_popup



---

// 書式5 - 名前空間の設定

// グローバル設定
var NAMESPACE = {};

// 処理1
NAMESPACE.obj1 = {
  v: {
    v1: 'foo',
    v2: 'bar',
  },
  run: function() {
    console.log(this.v.v1);
  },
}

// 処理2
NAMESPACE.obj2 = {
  v: {
    v3: 'baz',
    v4: 'qux',
  },
  run: function() {
    console.log(this.v.v4 + NAMESPACE.obj1.v.v1);
  },
}

// オブジェクト参照
NAMESPACE.obj1.run(); // foo
NAMESPACE.obj2.run(); // quxfoo


// 処理1と処理2が別ファイルであっても、シングルページで両方読み込めば、互いのデータをやり取りできる
// しかし、グローバル設定は全てのjsの先頭でないといけない
// 複数ファイルをconcatする場合、グローバル設定より処理が先に来てしまうという懸念がある

code_popup



---

// 書式6 - 名前空間の設定(より汎用性の高い構成)

// 処理1
var NAMESPACE = NAMESPACE || {}; // グローバル設定
NAMESPACE.obj1 = {
  v: {
    v1: 'foo',
    v2: 'bar',
  },
  run: function() {
    console.log(this.v.v1);
  },
}

// 処理2
var NAMESPACE = NAMESPACE || {}; // グローバル設定
NAMESPACE.obj2 = {
  v: {
    v3: 'baz',
    v4: 'qux',
  },
  run: function() {
    console.log(this.v.v4 + NAMESPACE.obj1.v.v1);
  },
}

// オブジェクト参照
NAMESPACE.obj1.run(); // foo
NAMESPACE.obj2.run(); // quxfoo


// NAMESPACEがundefineなら新規オブジェクトを定義し、既存のNAMESPACEがあるならそれを代入する
// concatの際、グローバル設定より処理が先に来てしまうという懸念はない
// 処理1と処理2の順番が入れ変わったとしても正常に動く
// 処理ごとにファイルを分割できる

code_popup



---

// 書式7 - 名前空間のオブジェクトでまとめる


var NAMESPACE = {

  init: function() {
    this.obj1.run(); // thisはNAMESPACE
    this.obj2.run(); // thisはNAMESPACE
  },

  obj1: {
    v: {
      v1: 'foo',
      v2: 'bar',
    },
    run: function() {
      console.log(this.v.v1); // thisはobj1
    },
  },

  obj2: {
    v: {
      v3: 'baz',
      v4: 'qux'
    },
    run: function() {
      console.log(this.v.v4 + NAMESPACE.obj1.v.v1); // thisはobj2
    },
  },
}

// 実行
NAMESPACE.init(); // foo -> quxfoo


// 実行の表記は固定で、NAMESPACEオブジェクトのinitメソッド内で各fncを制御できる
// ファイルを分けることは難しい

code_popup



---

// 書式8 - 書式6にinitを追加したタイプ

var NAMESPACE = NAMESPACE || {};
NAMESPACE.init = function() {
  this.obj1.run();
  this.obj2.run();
}

var NAMESPACE = NAMESPACE || {};
NAMESPACE.obj1 = {
  v: {
    v1: 'foo',
    v2: 'bar',
  },
  run: function() {
    console.log(this.v.v1);
  },
}

var NAMESPACE = NAMESPACE || {};
NAMESPACE.obj2 = {
  v: {
    v3: 'baz',
    v4: 'qux',
  },
  run: function() {
    console.log(this.v.v4 + NAMESPACE.obj1.v.v1);
  },
}

// 実行
NAMESPACE.init(); // foo -> quxfoo


// 実行表記を固定できる
// ファイルを分けても、initのファイルから各処理を制御できる

code_popup

JSON

var jsonStrings = `{ "key1": "var1", "key2": "var2", "key3": "var3" }`;
var jsonObj = JSON.parse(jsonStrings);
console.log(jsonObj);
console.log(JSON.stringify(jsonObj));

code_popup

HTTP通信

<!doctype html>
<title>request_a.html</title>
<meta charset="utf-8">

<h1>This page is request_a.html</h1>
<h2>request: get.html</h2>
<button onclick="sendReq()">send request</button>
<h3>↓Status</h3>
<pre></pre>
<pre></pre>
<h3>↓Response Headers</h3>
<pre></pre>
<h3>↓Response</h3>
<pre></pre>

<script>

function sendReq() {
  var foo = new XMLHttpRequest();  // １）インスタンス生成
  foo.open('GET', 'get.html');  // ２）リクエスト設定 // 第3引数はデフォルトでtrue(非同期)
  foo.send();  // ３）リクエスト送信

  // ４）サーバにリクエストが届く
  // ５）サーバがリクエストを解釈する
  // ６）サーバがレスポンスを送信する

  foo.addEventListener('loadend', function() {
    var pre = document.getElementsByTagName('pre');
    pre[0].textContent = foo.status;
    pre[1].textContent = foo.statusText;
    pre[2].textContent = foo.getAllResponseHeaders();
    pre[3].textContent = foo.response;
  });

  // ７）レスポンス受信完了のタイミングで値を取得し、preに格納
}

</script>

code_popup

sample   ←リクエストするファイルがサーバにある場合
sample   ←リクエストするファイルがサーバに無い場合


---

// XMLHttpRequest() のイベント

loadend   リクエスト終了(成功・失敗に関わらず)
loadstart   リクエスト開始
load  リクエスト成功
progress   データ受信時(連続的に取得)
abort  リクエスト中断
error  リクエスト失敗
timeout  制限時間を超過

HTTP通信(JSON)

// JSONファイルのデータを出力

<!doctype html>
<title>get_json.html</title>
<meta charset="utf-8">

<h1>This page is get_json.html</h1>
<h2>request: fruit_list.json</h2>
<button onclick="getJson()">get json</button>

<table border="1">
<thead>
<tr>
<th>name</th>
<th>color</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script>

function getJson() {
  var foo = new XMLHttpRequest();
  foo.open('GET', 'fruit_list.json');
  foo.send();

  foo.addEventListener('loadend', function() {
    var data = JSON.parse(foo.responseText);

    for (i = 0; data.fruit_list[i]; i++) {
      var tbody = document.getElementsByTagName('tbody')[0];
      var tr  = document.createElement('tr');
      var name  = document.createElement('td');
      var color = document.createElement('td');
      name.appendChild(document.createTextNode(data.fruit_list[i].name));
      color.appendChild(document.createTextNode(data.fruit_list[i].color));
      tr.appendChild(name);
      tr.appendChild(color);
      tbody.appendChild(tr);
    }
  });
}

</script>

code_popup

sample


---

// クロージャを使って3つずつ出力

<!doctype html>
<title>get_json_closer.html</title>
<meta charset="utf-8">

<h1>This page is get_json_closer.html</h1>
<h2>request: fruit_list.json</h2>
<button onclick="getJsonThreeFruits()">get json 3 fruits</button>

<table border="1">
<thead>
<tr>
<th>name</th>
<th>color</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script>

// requestのsendと、trのappend
function sendReq(count) {
  var req = new XMLHttpRequest();
  req.open('GET', 'fruit_list.json');
  req.send();

  req.addEventListener('loadend', function() {
    var data = JSON.parse(req.responseText);

    for (i = 0; i < 3; i++) {
      var j = (count * 3) + i;  // 参照するデータの番号調整

      if(data.fruit_list[j]) {  // データが存在すれば実行
        var tbody = document.getElementsByTagName('tbody')[0];
        var tr  = document.createElement('tr');
        var name  = document.createElement('td');
        var color = document.createElement('td');
        name.appendChild(document.createTextNode(data.fruit_list[j].name));
        color.appendChild(document.createTextNode(data.fruit_list[j].color));
        tr.appendChild(name);
        tr.appendChild(color);
        tbody.appendChild(tr);
      }
    }
  });
}

// クロージャ
function getJson() {
  var count = 0;
  return function() {
    sendReq(count);
    count++;
  }
}

// インスタンス生成
var getJsonThreeFruits = new getJson();

</script>

code_popup

sample

---------------------------------------------------------------

let

// block level only

if (true) {
  var foo = 42;
}
console.log(foo); // 42

if (true) {
  let bar = 42;
}
console.log(bar); // bar is not defined

code_popup

---

// instead of IIFE

{
  let foo = 42;
}
console.log(foo); // foo is not defined

code_popup

const

// value(cannot be assigned)

const foo = 42;
foo = 84; // Assignment to constant variable.

code_popup

---

// array

const foo = [42, 84, 126];

foo[0] = 168;
console.log(foo); // [168, 84, 126]

foo = []; // Assignment to constant variable.

code_popup

---

// object

const foo = {
  bar: 42,
  baz: 84,
  qux: 126,
};
foo.bar = 168;
console.log(foo.bar); // 168

foo = {}; // Assignment to constant variable.

code_popup

template literal

let foo = `abc
def`;

console.log(foo);
// abc
// def

code_popup

---

let foo = '42';

console.log(`84${foo}126`); // 8442126

code_popup

---

// tagged templates

const var1 = 'var1';
const var2 = 'var2';
const fnc = (strings, ...values) => {
  console.log(strings); // ["str1\", "str2", "str3", raw: Array(3)]
  console.log(strings[0]); // str1\
  console.log(strings[1]); // str2
  console.log(strings[2]); // str3
  console.log(strings.raw); // ["str1\\", "str2", "str3"]
  console.log(strings.raw[0]); // str1\\
  console.log(strings.raw[1]); // str2
  console.log(strings.raw[2]); // str3
  console.log(values); // ["var1", "var2"]
  console.log(values[0]); // var1
  console.log(values[1]); // var2
}
fnc`str1\\${var1}str2${var2}str3`;

code_popup

symbol

const foo = Symbol('42');
const bar = Symbol('42');
console.log(typeof foo); // symbol
console.log(foo === bar); // false // unique value
console.log(typeof !!foo); // boolean // convert to boolean
console.log(typeof new Object(bar)); // object // convert to object

code_popup

---

const foo = Symbol('42');
const bar = Symbol('42');
console.log(typeof foo.toString()); // string // string型に変換可能
console.log(typeof (bar + '')); // Cannot convert a Symbol value to a string // 暗黙的な変換は不可

code_popup

---

const foo = Symbol('42');
console.log(typeof Number(foo)); // Cannot convert a Symbol value to a number // number型に変換不可

code_popup

---

// 定数として利用

const WINDOWS_OS = Symbol();
const MAC_OS = Symbol();
console.log(WINDOWS_OS === MAC_OS); // false

code_popup

---

// added method


const addedMethod = Symbol();

Array.prototype[addedMethod] = () => {
  console.log('run addedMethod');
};

const arr = [1, 2, 3];
arr[addedMethod]();

code_popup

destructuring assignment

const [foo, bar, baz] = [42, 84];
console.log(foo); // 42
console.log(bar); // 84
console.log(baz); // undefined

code_popup

---

const [foo, bar, ...baz] = [42, 84, 126, 168, 210];
console.log(foo); // 42
console.log(bar); // 84
console.log(baz); // [126, 168, 210]
console.log(baz[0]); // 126
console.log(typeof foo); // number
console.log(typeof baz); // object

code_popup

---

const {foo, bar} = {foo: '42', bar: '84'};
console.log(foo); // 42

code_popup

---

const {foo: x, bar} = {foo: '42', bar: '84'};
console.log(x); // 42
console.log(bar); // 84
console.log(foo); // foo is not defined

code_popup

---

const {foo = 'default', bar} = {bar: '84'};
console.log(foo); // default
console.log(bar); // 84

code_popup

---

function foo() {
  const bar = 'bar_r';
  const baz = 'baz_r';
  return [bar, baz];
}
const [qux, quxx] = foo();
console.log(qux); // bar_r
console.log(quxx); // baz_r

code_popup

---

let foo = '42';
let bar = '84';
[foo, bar] = [bar, foo];
console.log(foo); // 84
console.log(bar); // 42

code_popup

---

const obj = {
  key1: 'val1',
  key2: 'val2',
  key3: 'val3',
};

const { key1, key2, key3, } = obj;

console.log(key1);
console.log(key2);
console.log(key3);

code_popup

---

function foo({v1 = 0, v2 = 0, v3 = 0}) {
  return v1 + v2 + v3;
}
console.log(foo({v1: 42, v2: 84})); // 126

code_popup

---

const data1 = {
  v1: 42,
  v2: 84,
};
const data2 = {
  v1: 126,
  v2: 168,
};

function getV1({v1}) {
  console.log(v1);
}
function getV2({v2}) {
  console.log(v2);
}

getV1(data1); // 42
getV1(data2); // 126
getV2(data1); // 84
getV2(data2); // 168

code_popup

spread syntax

console.log(Math.max(42, 84, 126)); // 126
console.log(Math.max([42, 84, 126])); // NaN
console.log(Math.max.apply(null, [42, 84, 126])); // 126 // es5
console.log(Math.max(...[42, 84, 126])); // 126 // es6

code_popup

for...of

// array

const data = [42, 84, 126];
Array.prototype.foo = function() {};
for (const v of data) {
  console.log(v); // 42, 84, 126
}
for (const v in data) {
  console.log(v); // 0, 1, 2, foo
}

code_popup

---

// string

const data = 'abcdef';
for (const v of data) {
  console.log(v); // a, b, c, d, e, f
}

code_popup

function

// default value

function foo(v = 'default') {
  console.log(v);
}
foo('bar'); // bar
foo(); // default

code_popup

---

// variable length argument

function sum(...args) {
  let result = 0;
  for (const v of args) {
    result += v;
  }
  return result;
}
console.log(sum(42, 84, 126)); // 252
console.log(sum(42, 84, 126, 168)); // 420
console.log(sum(...[42, 84, 126, 168])); // 420
console.log(sum([42, 84, 126, 168])); // 042, 84, 126, 168
console.log(sum()); // 0

code_popup

---

// Arrow Function 1

const double1 = function(v) {
  return 2 * v;
};
console.log(double1(42)); // 84


const double2 = (v) => 2 * v;
console.log(double2(42)); // 84

code_popup

---

// Arrow Function 2

const sum1 = function(...args) {
  let result = 0;
  for (const v of args) {
    result += v;
  }
  return result;
};
console.log(sum1(42, 84)); // 126


const sum2 = (...args) => {
  let result = 0;
  for (const v of args) {
    result += v;
  }
  return result;
};
console.log(sum2(42, 84)); // 126

code_popup

---

// Arrow Function 3 (fixed this)

const obj1 = {
  val: 'foo',
  mtd: function() {
    console.log(this); // Object {val: "foo"}

    const _this = this;
    const fnc = function() {
      console.log(_this); // Object {val: "foo"}
    };
    fnc(); // function execution
  },
};
obj1.mtd(); // method execution


const obj2 = {
  val: 'foo',
  mtd() {
    console.log(this); // Object {val: "foo"}

    const fnc = () => {
      console.log(this); // Object {val: "foo"}
    };
    fnc(); // function execution
  },
};
obj2.mtd(); // method execution

code_popup

---

// shortening method

const obj = {
  mtd1: () => {
    return 'mtd1';
  },
  mtd2 () {
    return 'mtd2';
  },
};
console.log(obj.mtd1()); // mtd1
console.log(obj.mtd2()); // mtd2

code_popup

object

// es6 value definition

const foo1 = 'bar1';
const foo2 = 'bar2';
const foo3 = 'bar3';
const obj = {
  foo1,
  foo2,
  foo3,
};
console.log(obj);

code_popup


// es5

const obj = {};
obj.foo1 = 'bar1';
obj.foo2 = 'bar2';
obj.foo3 = 'bar3';
console.log(obj);

code_popup

---

// es6 function definition

const obj = {
  fnc1 () {},
  fnc2 () {},
};
console.log(obj);

code_popup


// es5

const obj = {
  fnc1: function () {},
  fnc2: function () {},
};
console.log(obj);

code_popup

class

// es6

class Player {
  constructor(name, gender, age) {
    this.v1 = name;
    this.v2 = gender;
    this.v3 = age;
  }
  talk() {
    return 'My name is ' + this.v1 + '.\nI\'m ' + this.v2 + ' and ' + this.v3 + ' years old.';
  }
  attack() {
    return this.v1 + ' attacked.';
  }
}

const player1 = new Player('Taro', 'male', 22);
const player2 = new Player('Hana', 'female', 27);

console.log(player1.talk());
console.log(player2.talk());
console.log(player1.attack());
console.log(player2.attack());

// const Player = class {
//  ...
// }
//
// なども可

code_popup

---

// es5

function Player(name, gender, age) {
  this.v1 = name;
  this.v2 = gender;
  this.v3 = age;
}
Player.prototype = {
  talk: function() {
    return 'My name is ' + this.v1 + '.\nI\'m ' + this.v2 + ' and ' + this.v3 + ' years old.';
  },
  attack: function() {
    return this.v1 + ' attacked.';
  }
}

var player1 = new Player('Taro', 'male', 22);
var player2 = new Player('Hana', 'female', 27);

console.log(player1.talk());
console.log(player2.talk());
console.log(player1.attack());
console.log(player2.attack());

code_popup

---

// constructorは初期化時に実行される
// constructorも関数、ゆえに引数も使える


class Player {
  constructor() {
    console.log('test');
  }
}

new Player();

code_popup

class(extends)

class Parent {
  constructor(...arg) {
    console.log('in Parent ', ...arg);
  }
  mtd() {
    console.log('mtd');
  }
}

class Child extends Parent {
  constructor(...arg) {
    super(...arg);  // super calls parent constructor
    console.log('in Child ', ...arg);
  }
}

const ins = new Child('var1', 'var2');
ins.mtd();

code_popup

---

class Father {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  talk() {
    console.log(`My name is ${this.name}. ${this.age} years old.`);
  }
}

class Child extends Father {
  constructor(name, age) {
    super(name, age);
  }
  talk() {
    console.log(`My father's name is ${this.name}.`);
  }
}

const far = new Father('Tom', '42');
const chi = new Child('Tom', '42');
far.talk();
chi.talk();

code_popup

class(static method)

class Player {
  static talk(name, gender, age) {
    return 'My name is ' + name + '.\nI\'m ' + gender + ' and ' + age + ' years old.';
  }
}

console.log(Player.talk('Taro', 'male', 22));
console.log(Player.talk('Hana', 'female', 27));

// Methods not reflected in the instance

const ins = new Player();
console.log(ins);
console.log(ins.talk('Taro', 'male', 22));
// ins.talk is not a function

code_popup

class(set, get)

class Player {
  set val(value) {
    this._val = value;
  }

  get val() {
    return this._val;
  }
}

const ins = new Player();

ins.val = 42;

console.log(ins.val);

code_popup

iterator

const arr = [1, 2, 3];

const iterator = arr[Symbol.iterator]();

const val1 = iterator.next();
console.log(val1.value);
console.log(val1.done);

const val2 = iterator.next();
console.log(val2.value);
console.log(val2.done);

const val3 = iterator.next();
console.log(val3.value);
console.log(val3.done);

const val4 = iterator.next();
console.log(val4.value);
console.log(val4.done);

code_popup

generator

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = generator();

console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().value);
console.log(iterator.next().done);

code_popup

---

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = generator();

for (let value of iterator) {
  console.log(value);
}

code_popup

---

function* generator() {
  console.log('test1');
  yield 1;
  console.log('test2');
  yield 2;
  console.log('test3');
  yield 3;
}

const iterator = generator();

const id = setInterval(() => {
  const it = iterator.next();
  console.log(it.value);

  if (it.done === true) {
    clearInterval(id);
  }
}, 1000);

code_popup

modules

<!doctype html>
<html>
<head>
<title>title</title>

<script type="module">console.log('2');</script>

</head>
<body>

<script>console.log('1');</script>

</body>
</html>
code_popup

---

// alerts.js

export function bringAlert(alt) {
  alert(alt);
}

// html

<!doctype html>
<title>title</title>

<script type="module">
  import {bringAlert} from './alerts.js';
  bringAlert('test');
</script>

module.exports

// fnc1.js

module.exports = function fnc1() {
  console.log('a');
};
// or
module.exports = function() {
  console.log('b');
};
// or
module.exports = () => {
  console.log('c');
};

---

// main.js

const fnc1 = require('./fnc/fnc1');
// or
import fnc1 from './fnc/fnc1';

fnc1();

export default

// typeFunction.js

export default () => {
  console.log('a');
};

---

// typeObject.js

export default {
  item1: 'a',
  item2: 'b',
};

---

// typeClass.js

export default class {
  constructor(name, gender, age) {
    this.v1 = name;
    this.v2 = gender;
    this.v3 = age;
  }
  talk() {
    return 'My name is ' + this.v1 + '.\nI\'m ' + this.v2 + ' and ' + this.v3 + ' years old.';
  }
  attack() {
    return this.v1 + ' attacked.';
  }
}

---

// main.js

import typeFunction from './fnc/typeFunction';
typeFunction();

import typeObject from './fnc/typeObject';
console.log(typeObject);

import TypeClass from './fnc/typeClass';
const ins = new TypeClass('Taro', 'male', 22);
console.log(ins.talk());
console.log(ins.attack());

export const, class

// typeFunction.js

export const fnc = () => {
  console.log('a')
};

---

// typeObject.js

export const obj = {
  item1: 'a',
  item2: 'b',
};

---

// typeClass.js

export class Cls {
  constructor(name, gender, age) {
    this.v1 = name;
    this.v2 = gender;
    this.v3 = age;
  }
  talk() {
    return 'My name is ' + this.v1 + '.\nI\'m ' + this.v2 + ' and ' + this.v3 + ' years old.';
  }
  attack() {
    return this.v1 + ' attacked.';
  }
};

---

// main.js

import {fnc} from './fnc/typeFunction';
fnc();

import {obj} from './fnc/typeObject';
console.log(obj);

import {Cls} from './fnc/typeClass';
const ins = new Cls('Taro', 'male', 22);
console.log(ins.talk());
console.log(ins.attack());

promise

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve();
  }, 2000);
});

promise.then(() => {
  console.log('then');
});

console.log('run');

code_popup

---

const foo = (point) => {
  return new Promise((resolve, reject) => {
    if (point > 0) {
      resolve(point);
    } else {
      reject();
    }
  });
};

// foo().then(func()).catch(func()).finally(func()); の形
foo(50).then((point) => {
  console.log(point + ' points get. Great.')
}).catch(() => {
  console.log('There is no score.')
}).finally(() => {
  console.log('Done.')
});

// foo().then(func(), func()).finally(func()); の形
foo(50).then((point) => {
  console.log(point + ' points get. Great.')
}, () => {
  console.log('There is no score.')
}).finally(() => {
  console.log('Done.')
});

console.log('1'); // sync

code_popup

async sample(xhr_resolve), async sample(xhr_reject)

---

// syntax suger (resolve)

const foo = (point) => {
  return Promise.resolve(point);
  // same as below
  // return new Promise((resolve) => {
  //   resolve(point);
  // });
};

foo(50).then((point) => {
  console.log(point + ' points get. Great.')
});

code_popup

---

// syntax suger (reject)

const foo = () => {
  return Promise.reject(new Error('err'));
};

foo(50).catch((err) => {
  console.log(err)
});

code_popup

---

// promises chain

Promise.resolve(1)
  .then(v => {
    console.log(v);
    return v * 2;
  })
  .then(v => {
    console.log(v);
    return v * 2;
  })
  .then(v => {
    console.log(v);
  });

  // can take over the value

code_popup

---

// all

const arrFnc = [];
for (let i = 0; i < 5; i++) {
  const fnc = (resolve) => {
    console.log(`fnc ${i} start`, new Date().toLocaleTimeString());
    setTimeout(() => {
      console.log(`fnc ${i} finish`, new Date().toLocaleTimeString());
      resolve();
    }, 2000 * Math.random());
  };
  arrFnc.push(fnc)
}

console.log(arrFnc);

const arrPromise = arrFnc.map((fnc) => new Promise(fnc));

console.log(arrPromise);

Promise.all(arrPromise).then(() => {
  console.log('finish');
});

code_popup

async

// resolve (form 1)

const foo = async () => {
  return '2';
}

foo().then(v => {
  console.log(v);
});

console.log('1'); // sync

code_popup

---

// resolve (form 2)

async function foo () {
  return '2';
}

foo().then(v => {
  console.log(v);
});

console.log('1'); // sync

code_popup

---

// reject

const foo = async () => {
  return Promise.reject(new Error('err'));
}

foo().catch(err => {
  console.log(err);
});

code_popup

---

// throw

const foo = async () => {
  throw new Error('err');
}

foo().catch(err => {
  console.log(err);
});

code_popup

---

// await

const ins = () => {
  return new Promise((resolve) => {
    console.log('1');
    setTimeout(() => {
      resolve();
    }, 1000);
  });
}
const main = async () => {
  await ins().then(() => {
    console.log('2');
  });
  // await stops the subsequent processing until the execution of the promise instance.
  // await can only be used inside an async function.
  // if await is removed, the execution order becomes 1=>3=>2.
  console.log('3');
}
main();

code_popup

---

// serial processing

run();

async function run() {
  await new Promise((resolve) => {
    setTimeout(() => {
      console.log('1', new Date().toLocaleTimeString());
      resolve();
    }, 2000);
  });

  await new Promise((resolve) => {
    setTimeout(() => {
      console.log('2', new Date().toLocaleTimeString());
      resolve();
    }, 2000);
  });
}

code_popup

fetch

// text

async function fnc() {
  const file = await fetch('sample.txt');
  console.log(file);
  const text = await file.text();
  console.log(text);
};

fnc();

sample

---

// json

async function fnc() {
  const file = await fetch('sample.json');
  console.log(file);
  const json = await file.json();
  console.log(json);
};

fnc();

sample

---

// xml

async function fnc() {
  const file = await fetch('sample.xml');
  console.log(file);
  const text = await file.text();
  console.log(text);
  const xml = new DOMParser().parseFromString(text, 'application/xml');
  console.log(xml);
};

fnc();

sample

---

// jpg

async function fnc() {
  const file = await fetch('sample.jpg');
  console.log(file);
  const blob = await file.blob();
  console.log(blob);
  const image = new Image();
  image.src = URL.createObjectURL(blob);
  document.querySelector('body').appendChild(image);
};

fnc();

sample

setInterval

let num = 0;

const count = () => {
  console.log(num++);
}

const id = setInterval(() => {
  count();
  if (num >= 10) {
    clearInterval(id);
  }
}, 500);

code_popup

cookie

// set
document.cookie = 'data1=foo1';
document.cookie = 'data2=foo2';
document.cookie = 'data3=' + encodeURIComponent('foo3 foo3');
document.cookie = 'data4=foo4';
console.log(document.cookie);

// parse
const parse = function() {
  const r = document.cookie.split(';');
  let cookies = {};
  for (let i = 0; i < r.length; i++) {
    cookies[r[i].split('=')[0].trim()] = r[i].split('=')[1];
  }
  console.log(cookies);
}
parse();

// delete
document.cookie = 'data4=foo4; max-age=2'; // Until 2 second
console.log(document.cookie);
window.setTimeout(function() {
  console.log(document.cookie);
  parse();
}, 2000);

// expires
let date = new Date('2068/7/31 14:14');
document.cookie = `data5=foo5; expires=${date.toUTCString()}`; // Until the date

// search
console.log(document.cookie.indexOf('data2'));
console.log(document.cookie.indexOf('foo3'));
console.log(document.cookie.indexOf('nothing'));

code_popup

localStrage

<!doctype html>
<title>localStorage</title>

<div id="output"></div>
<input type="button" value="reload" onclick="location.reload()">
<input type="button" value="clear" onclick="clearCount()">

<script>
let view = localStorage.getItem('view_count');
const output = document.querySelector('#output');

const writeCount = (times) => {
  output.innerHTML = document.createTextNode(times).nodeValue;
}

const clearCount = () => {
  localStorage.clear();
  writeCount('view: ' + 0 + ' times.');
}

if ('localStorage' in window) {
  view = !view ? 0 : Number(view) + 1;
  localStorage.setItem('view_count', view);
  writeCount('view: ' + view + ' times.');
} else {
  writeCount('LocalStorage is not supported on this browser.');
}
</script>

// その他、length, key(n), removeItem など

code_popup

---

sample

random

console.log(Math.random());

console.log(new Uint16Array(10));
console.log(crypto.getRandomValues(new Uint16Array(10)));
console.log(crypto.getRandomValues(new Uint16Array(10)).join(''));

code_popup

trigonometric function

<!doctype html>
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
.point {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  background: #f00;
  border-radius: 10px;
}
</style>

<div class="point"></div>

<script>
const point = document.querySelector('.point');
const radius = 100;
let degree = 0;

const draw = () => {
  const radian = (degree * Math.PI) / 180;
  const posX = window.innerWidth / 2 + radius * Math.cos(radian);
  const posY = window.innerHeight / 2 + radius * Math.sin(radian);
  point.style.left = `${posX}px`;
  point.style.top = `${posY}px`;
  degree += 1;
}

const id = setInterval(() => {
  draw();
}, 10);
</script>

code_popup

---

sample

converting url parameters

const url = 'http://3300.me?a=111&b=222&c=333';
const obj = {};

const arr = url.split(/&|\?/).filter((value) => { return value.includes('='); });

arr.forEach((parameter) => {
  const parameterList = parameter.split('=');
  const key = parameterList[0];
  const value = decodeURIComponent(parameterList[1]);
  obj[key] = value;
});

console.log(arr);
console.log(obj);

code_popup

padStart

console.log('1'.padStart(2, '0'));
console.log('11'.padStart(2, '0'));

code_popup

encode/decode

console.log(encodeURI('https://3300.me/日本語.html'));
console.log(encodeURIComponent('https://3300.me/日本語.html'));

console.log(decodeURI('https://3300.me/%E6%97%A5%E6%9C%AC%E8%AA%9E.html'));
console.log(decodeURIComponent('https%3A%2F%2F3300.me%2F%E6%97%A5%E6%9C%AC%E8%AA%9E.html'));

code_popup

reduce

const numbers = [1, 2, 3, 4, 5];

const result = numbers.reduce((accumlate, num, i) => {
  console.log('accumlate: ' + accumlate);
  console.log('num: ' + num);
  console.log('i: ' + i);
  console.log('-----');
  return accumlate + num;
});

console.log('result: ' + result);

code_popup

---

const makeHtml = (strings, ...values) => {
  return strings.reduce((accumlate, str, i) => {
    console.log('accumlate: ' + accumlate);
    console.log('values[i - 1]: ' + values[i - 1]);
    console.log('str: ' + str);
    console.log('i: ' + i);
    console.log('-----');
    return accumlate + values[i - 1] + str;
  });
};

const val1 = 'val1';
const val2 = 'val2';
const result = makeHtml`<ul>
  <li>${val1}</li>
  <li>${val2}</li>
</ul>`;

console.log('result: ' + result);

code_popup

assign

const obj1 = {
  key1: 'val1',
  key2: 'val2',
  key3: 'val3',
}

const obj2 = obj1;
const obj3 = Object.assign({}, obj1); // same 'const obj3 = {...obj1};'

obj1['key1'] = 'rewrite';

console.log(obj2);
console.log(obj3);

code_popup

split assignment

const obj1 = {
  key1: 'val1',
  key2: 'val2',
  key3: 'val3',
}

const { key1, key2, key3 } = obj1;

console.log(key1);
console.log(key2);
console.log(key3);

code_popup

freeze

const obj1 = {
  key1: 'val1',
  key2: 'val2',
  key3: 'val3',
}

obj1.key1 = 'rewrite1';
console.log(obj1);
console.log(Object.isFrozen(obj1));

Object.freeze(obj1);

obj1.key1 = 'rewrite2';
console.log(obj1);
console.log(Object.isFrozen(obj1));

// Object.seal(obj1);
// Object.preventExtensions(obj1);

code_popup

date

const date = new Date();

const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
console.log(`${hour}時${minutes}分${seconds}秒`);

console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());

console.log(Date.parse('2010/01/01'));
console.log(Date.now('2010/01/01'));

code_popup

online

const isOnline = navigator.onLine;

if (isOnline) {
  console.log('online');
} else {
  console.log('offline');
}

code_popup

---

window.addEventListener('online', () => {
  console.log('onLine');
});

window.addEventListener('offline', () => {
  console.log('offLine');
});

code_popup

dispatchEvent

<!doctype html>
<title>title</title>

<button class="trigger">click</button>

<script>
const btn = document.querySelector('.trigger');

btn.addEventListener('click', () => {
  console.log('clicked');
});

setTimeout(() => {
  btn.dispatchEvent(new Event('click'));
}, 3000);
</script>

code_popup

insertAdjacentHTML

<!doctype html>
<title>title</title>

<style>
.target {
  border: #000 1px solid;
}
</style>

<div class="target">target</div>

<script>
const target = document.querySelector('.target');

target.insertAdjacentHTML('beforebegin', `<div>beforebegin</div>`);
target.insertAdjacentHTML('afterbegin', `<div>afterbegin</div>`);
target.insertAdjacentHTML('beforeend', `<div>beforeend</div>`);
target.insertAdjacentHTML('afterend', `<div>afterend</div>`);
</script>

code_popup

FileReader

// text

<!doctype html>
<title>title</title>

<input type="file" class="file" accept=".txt">
<p class="text"></p>

<script>
const input = document.querySelector('.file');
const text = document.querySelector('.text');

input.addEventListener('input', (ev) => {
  const file = ev.target.files[0];
  const reader = new FileReader();

  reader.addEventListener('load', () => {
    text.textContent = reader.result;
  });

  reader.readAsText(file);
});
</script>

code_popup

---

// img

<!doctype html>
<title>title</title>

<input type="file" class="file" accept=".png, .jpg">
<p class="img"><img style="width: 100%;"></p>

<script>
const input = document.querySelector('.file');
const img = document.querySelector('.img img');

input.addEventListener('input', (ev) => {
  const file = ev.target.files[0];
  const reader = new FileReader();

  reader.addEventListener('load', () => {
    img.src = reader.result;
  });

  reader.readAsDataURL(file);
});
</script>

code_popup

slider

<!doctype html>
<title>title</title>

<input type="range" class="slider" min="0" max="100" value="50">
<p class="value">50</p>

<script>
const slider = document.querySelector('.slider');
const score = document.querySelector('.value');

slider.addEventListener('input', handleChange);

function handleChange(ev) {
  const value = ev.target.value;
  score.innerHTML = value;
};
</script>

code_popup

transitionend

<!doctype html>
<title>title</title>

<div class="square"></div>

<style>
.square {
  width: 100px;
  height: 100px;
  background: #f00;
  transition: all 2s;
}
.square:hover {
  width: 300px;
}
</style>

<script>
const sq = document.querySelector('.square');

sq.addEventListener('transitionend', changeColor);

function changeColor(ev) {
  ev.target.style.backgroundColor = '#0f0';
};
</script>

code_popup

animation events

<!doctype html>
<title>title</title>

<div class="square"></div>

<style>
.square {
  width: 100px;
  height: 100px;
  background: #f00;
}
.square:hover {
  animation: infinite 1s rotate;
  // animation: 1s rotate; // no iteration
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<script>
const sq = document.querySelector('.square');

sq.addEventListener('animationstart', changeColor1);
sq.addEventListener('animationiteration', changeColor2);
sq.addEventListener('animationend', changeColor3);

function changeColor1(ev) {
  ev.target.style.backgroundColor = '#0f0';
};
function changeColor2(ev) {
  ev.target.style.backgroundColor = '#00f';
};
function changeColor3(ev) {
  ev.target.style.backgroundColor = '#000';
};
</script>

code_popup

map

const map = new Map();

map.set('key1', 'val1');
map.set('key2', 'val2');

console.log(map);
console.log(map.size);
console.log(map.get('key1'));
console.log(map.has('key1'));
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
map.forEach((value, key) => {
  console.log(value, key);
});
map.delete('key1');
console.log(map);
map.clear();
console.log(map);

code_popup

set

const set = new Set();

set.add('val1');
set.add('val2');
set.add('val2');
set.add('val2');
set.add('val3');

console.log(set);
console.log(set.size);
console.log(set.has('val1'));
console.log(set.values());
set.forEach((value) => {
  console.log(value);
});
set.delete('val1');
console.log(set);
set.clear();
console.log(set);

code_popup

layerX/layerY

<!doctype html>
<title>title</title>

<div>x: <span class="x"></span></div>
<div>y: <span class="y"></span></div>

<script>
const x = document.querySelector('.x');
const y = document.querySelector('.y');

window.addEventListener('mousemove', (ev) => {
  x.innerHTML = ev.layerX;
  y.innerHTML = ev.layerY;
});
</script>

code_popup

blob

<!doctype html>
<title>title</title>

<div class="result"></div>

<script>
const blob = new Blob(['abcde', 'fghij'], { type: "text/plain" });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'textfile.txt';
a.innerText = 'download';
const result = document.querySelector('.result');
result.appendChild(a);
</script>

code_popup

svg

// draw

<!doctype html>
<title>title</title>

<svg viewBox="0 0 200 200" width="200" height="200" class="mySvg"></svg>

<script>
const myCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

myCircle.setAttribute('cx', '100');
myCircle.setAttribute('cy', '100');
myCircle.setAttribute('r', '100');
myCircle.setAttribute('fill', '#ff0000');
myCircle.setAttribute('fill-opacity', '0.5');

const mySvg = document.querySelector('.mySvg');

mySvg.appendChild(myCircle);
</script>

code_popup

---

// animation

<!doctype html>
<title>title</title>

<svg viewBox="0 0 200 200" width="200" height="200">
  <circle class="myCircle" cx="100" cy="100" r="100" fill="#ff0000"></circle>
</svg>

<script>
const myCircle = document.querySelector('.myCircle');
let time = 0;

const animate = () => {
  time += 0.5;

  myCircle.style.fill = `hsl(0, 100%, ${time}%)`;

  if (time < 50) {
    requestAnimationFrame(animate);
  }
};

animate();
</script>

code_popup

scroll

<div style="width:9999px;height:9999px;"><span style="position:fixed;"></span></div>

<script>
const span = document.querySelector('span');
window.addEventListener('scroll', () => {
  span.innerHTML = window.scrollX + '<br>' + window.scrollY;
});
</script>

code_popup

sample

selectstart

<div class="foo">focus</div>

<script>
document.querySelector('.foo').addEventListener('selectstart', () => {
  console.log('selected text');
});
</script>

code_popup

touch

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<div style="width:100%;height:100%;"></div>

<script>
document.querySelector('div').addEventListener('touchstart', (ev) => {
  ev.target.innerHTML = 'touchstart';
});
document.querySelector('div').addEventListener('touchmove', (ev) => {
  ev.target.innerHTML = 'touchmove';
});
document.querySelector('div').addEventListener('touchend', (ev) => {
  ev.target.innerHTML = 'touchend';
});
</script>

code_popup

sample

---

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<div style="width:100%;height:100%;"></div>

<script>
document.querySelector('div').addEventListener('touchmove', (ev) => {
  let nodes;
  nodes += 'clientX: ' + ev.changedTouches[0].clientX + '\n'
  nodes += 'clientY: ' + ev.changedTouches[0].clientY + '\n'
  nodes += 'offsetX: ' + ev.changedTouches[0].offsetX + '\n'
  nodes += 'offsetY: ' + ev.changedTouches[0].offsetY + '\n'
  nodes += 'pageX  : ' + ev.changedTouches[0].pageX + '\n'
  nodes += 'pageY  : ' + ev.changedTouches[0].pageY + '\n'
  nodes += 'screenX: ' + ev.changedTouches[0].screenX + '\n'
  nodes += 'screenY: ' + ev.changedTouches[0].screenY + '\n'
  ev.target.innerHTML = nodes.replace(/\n/g, '
');
});
</script>

code_popup

sample

focus

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<div style="width:100%;height:100%;">focus</div>

<script>
const div = document.querySelector('div');
window.addEventListener('focus', () => {
  div.innerHTML = 'focus';
});
window.addEventListener('blur', () => {
  div.innerHTML = 'blur';
});
</script>

code_popup

sample

visibilitychange

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

<script>
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    console.log('visible');
  } else if (document.visibilityState === 'hidden') {
    console.log('hidden');
  }
});
</script>

code_popup

sample

fullscreen

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.onBtn {
  padding: 10px;
  border: #000 1px solid;
}
.offBtn {
  display: none;
  padding: 10px;
  border: #000 1px solid;
}
.off .onBtn {
  display: inline-block;
}
.off .offBtn {
  display: none;
}
.on .onBtn {
  display: none;
}
.on .offBtn {
  display: inline-block;
}
</style>

<div class="off">
  <p class="onBtn">On Full-Screen</p>
  <p class="offBtn">Off Full-Screen</p>
</div>

<script>
const div = document.querySelector('div');
const onBtn = document.querySelector('.onBtn');
const offBtn = document.querySelector('.offBtn');

onBtn.addEventListener('click', () => {
  onFullScreen(document.body);
  div.classList.add('on');
  div.classList.remove('off');
});

offBtn.addEventListener('click', () => {
  offFullScreen(document.body);
  div.classList.add('off');
  div.classList.remove('on');
});

const onFullScreen = (el) => {
  if (el.requestFullScreen) {
    el.requestFullScreen();
  } else if (el.webkitRequestFullScreen) {
    el.webkitRequestFullScreen();
  } else if (el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
  } else if (el.msRequestFullScreen) {
    el.msRequestFullScreen();
  }
};

const offFullScreen = () => {
  if (document.exitFullScreen) {
    document.exitFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msCancelFullScreen) {
    document.msCancelFullScreen();
  }
};
</script>

code_popup

sample

loaded

DOMContentLoaded - HTML loaded
load - All resource loaded

resize

<div></div>

<script>
const div = document.querySelector('div');
window.addEventListener('resize', () => {
  div.innerHTML = window.innerWidth + '<br>' + window.innerHeight;
});
div.innerHTML = window.innerWidth + '<br>' + window.innerHeight;
</script>

code_popup

sample

matchMedia

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, viewport-fit=cover">

<div></div>
<div></div>

<script>
const div = document.querySelectorAll('div');
const ori = window.matchMedia('(orientation: landscape)');
const wid = window.matchMedia('(max-width: 400px)');

const changeLayout = () => {
  if (ori.matches) {
    div[0].innerHTML = 'landscape';
  } else {
    div[0].innerHTML = 'portrate';
  }
  if (wid.matches) {
    div[1].innerHTML = 'width <= 400px';
  } else {
    div[1].innerHTML = 'width > 400px';
  }
};

ori.addListener(changeLayout);
wid.addListener(changeLayout);
changeLayout();
</script>

code_popup

sample

drag and drop

<style>
body {
  background: #f1f1f1;
}
.b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30%;
  border: #000 1px solid;
  background: #fff;
}
.i {
  display: flex;
  flex-wrap: wrap;
}
.i img {
  height: 80px;
  margin: 6px 6px 0 0;
}
</style>

<div class="b">drop img files</div>
<div class="i"></div>

<script>
const b = document.querySelector('.b');
const i = document.querySelector('.i');

b.addEventListener('dragover', (ev) => {
  ev.preventDefault();
});

b.addEventListener('drop', (ev) => {
  ev.preventDefault();
  const files = ev.dataTransfer.files;
  Object.values(files).forEach((file) => {
    const reader = new FileReader();
    reader.onload = function (e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      i.appendChild(img);
    }
    reader.readAsDataURL(file);
  });
});
</script>

code_popup

sample

eval

const sum = 'function f(){ return 1 + 2; }; f();';
const ans = eval(sum);
console.log(ans);

code_popup

///




code_popup