JS/ES – イベント登録のタイミング

2020-12-09 / tau / コメントする

概要

オブジェクトにイベントリスナーを登録する場合、対象オブジェクトの生成とリスナー登録の前後関係に留意しなければならない。

失敗例

まず失敗例。以下のコードはボタンをクリックしても動作しない。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リスナー登録～失敗</title>
    <script>
      document.getElementById('button').addEventListener(
        'click', (() => alert('clicked!')), false);
    </script>
  </head>
  <body>
    <button id ="button">Click Me!</button>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>リスナー登録～失敗</title>

document.getElementById('button').addEventListener(

'click', (() => alert('clicked!')), false);

</script>

</head>

<body>

<button id ="button">Click Me!</button>

</body>

</html>

なぜなら、head要素でbodyが読み込まれる前にid=”button”の要素を読み込もうとするが、その段階でまだ対象となるbutton要素は読み込まれていないからだ。

その後bodyでbutton要素が配置されるが、そのときにはリスナーを登録しようとして失敗しているので、結局button要素にはリスナーは登録されていない。

事実検証画面で確認すると、”Uncaught TypeError: Cannot read property ‘addEventListener’ of null”となっていて、リスナーを登録しようとしている要素がnullだとなっている。

改善例1～後置

以下は、button要素が配置された後にスクリプトを実行するように、script要素の位置を後ろに異動したもの。この場合はエラーにはならず、ボタンを押せば無事ダイアログが表示される。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リスナー登録～後置</title>
  </head>
  <body>
    <button id ="button">Click Me!</button>
    <script>
      document.getElementById('button').addEventListener(
        'click', (() => alert('clicked!')), false);
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>リスナー登録～後置</title>

</head>

<body>

<button id ="button">Click Me!</button>

document.getElementById('button').addEventListener(

'click', (() => alert('clicked!')), false);

</script>

</body>

</html>

改善例2～onload

以下の例は、スクリプトをhead要素に置いたままで正常に実行する例。

リスナー登録の部分をwindow.onloadのリスナーとして定義することで、ページの読み込みが完了した後にwindow.onload()が実行され、その内容としてリスナーの登録が行われる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リスナー登録～後置</title>
    <script>
      window.onload = () => {
        document.getElementById('button').addEventListener(
          'click', (() => alert('clicked!')), false);
      }
    </script>
  </head>
  <body>
    <button id ="button">Click Me!</button>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>リスナー登録～後置</title>

window.onload = () => {

document.getElementById('button').addEventListener(

'click', (() => alert('clicked!')), false);

}

</script>

</head>

<body>

<button id ="button">Click Me!</button>

</body>

</html>

この方法は、JSのコードを別ファイルとしてheadで読み込むような際にも有効。

改善例2’～windowリスナーの追加

もう一つの改善例は、windows.onload()メソッドをオーバーライドする代わりに、windowにloadイベントに対するリスナーを追加するもの。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リスナー登録～後置</title>
    <script>
      window.addEventListener('load', () => {
        document.getElementById('button').addEventListener(
          'click', (() => alert('clicked!')), false);
      });
    </script>
  </head>
  <body>
    <button id ="button">Click Me!</button>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>リスナー登録～後置</title>

window.addEventListener('load', () => {

document.getElementById('button').addEventListener(

'click', (() => alert('clicked!')), false);

});

</script>

</head>

<body>

<button id ="button">Click Me!</button>

</body>

</html>

これは先のwindow.onload()のオーバーライドと同じ効果を持ち、ボタンには適切にリスナーが登録される。

JS/ES – イベントハンドリングの基本

2020-12-09 / tau / コメントする

概要

JavaScriptのイベントハンドリングの基本は（他の言語と同様に）、以下の手順を踏む。

イベントを発生させるオブジェクトを生成する
イベントリスナー（イベントハンドラー）を定義する
- その際、捕捉したいイベントを指定する
イベントリスナーをオブジェクトに登録する

以下、JSにおけるイベントリスナーの登録手順を整理する。

基本形式

最も基本に忠実な手順を如何に例示する。

具体的には、ボタンを配置し、クリックに対するリスナーを定義し、そのリスナーをボタンに登録している。

<button id="button1">関数定義</button>

<script>
  function onclick1() {
    alert("関数定義");
  }

  var button1 = document.getElementById('button1');
  button1.addEventListener('click', onclick1, false);
</script>

function onclick1() {

alert("関数定義");

}

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

button1.addEventListener('click', onclick1, false);

</script>

無名関数

以下の例では、無名関数としてリスナーを定義し、それを直接addEventListenerの引数としている。

無名関数を使っているので、リスナーを保持する変数は必要ない（リスナーに名前を付ける必要がない）。リスナーの処理内容が少ないときに使える。

<button id="button2">無名関数</button>

<script>
  var button2 = document.getElementById('button2');
  button2.addEventListener('click', (() => alert("無名関数")), false);
</script>

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

button2.addEventListener('click', (() => alert("無名関数")), false);

</script>

メソッドチェーン

以下の例では、ボタンオブジェクトの取得とリスナーの登録をメソッドチェーンで行い、さらにリスナーを無名関数で渡している。

リスナーの処理コード量が多いときは、無名関数ではなく通常の関数定義とする。

<button id="button3">対象連鎖</button>

<script>
  document.getElementById('button3').addEventListener(
    'click', (() => alert("オブジェクトチェーン")), false);
</script>

document.getElementById('button3').addEventListener(

'click', (() => alert("オブジェクトチェーン")), false);

</script>

JS/ES – 配列～Array

2020-12-09 / tau / コメントする

配列の定義

リテラル

配列のリテラルは他の言語と似ていて、[]の中に要素を','で区切って並べる。

var array = [-1, 1, 3, 7];
console.log(array);

// (4) [-1, 1, 3, 7]

var array = [-1, 1, 3, 7];

console.log(array);

// (4) [-1, 1, 3, 7]

空の配列も定義可能。

var array = [];
console.log(array);

// []

var array = [];

console.log(array);

// []

`Array`コンストラクター

Arrayクラスのコンストラクターで空の配列を作成可能。

var array = new Array();
console.log(array);

// []

var array = new Array();

console.log(array);

// []

要素の参照・追加

配列の要素の参照は他の言語と同じ。もちろん値の更新もできる。

var array = [1, 2, 3, 5];

console.log(array[0]);

// 1

var array = [1, 2, 3, 5];

console.log(array[0]);

// 1

新たに要素を追加するには、インデックスと値を指定。もちろん値の更新も可能。

array[4] = 8;
console.log(array);


// [1, 2, 3, 5, 8]

array[4] = 8;

console.log(array);

// [1, 2, 3, 5, 8]

配列の要素は、すべて同じ型でなくてもよい。

array[5] = 'thirteen';
console.log(array);

// [1, 2, 3, 5, 8, "thirteen"]

array[5] = 'thirteen';

console.log(array);

// [1, 2, 3, 5, 8, "thirteen"]

要素番号を飛ばして値を追加すると、その間は'empty'になる。

var array = new Array();

array[0] = 0;
array[1] = 1;
array[3] = 3;
array[7] = 7;
console.log(array);

// [0, 1, empty, 3, empty × 3, 7]

var array = new Array();

array[0] = 0;

array[1] = 1;

array[3] = 3;

array[7] = 7;

console.log(array);

// [0, 1, empty, 3, empty × 3, 7]

配列の長さ

配列の長さ（要素数）はlengthプロパティーで得られる。

array = [1, 2, 3, 5, 8];
console.log(array.length);

// 5

array = [1, 2, 3, 5, 8];

console.log(array.length);

// 5

先頭・末尾要素の取出し・追加・削除

配列の先頭要素・末尾要素について、追加や削除・取出しのメソッドが準備されていて、配列をキューやスタックのように使うことができる。詳細は配列の先頭・末尾要素の追加・削除にまとめている。

push～末尾追加
pop～末尾取出し・削除
unshift～先頭追加
shift～先頭取出し・削除

要素の取出し・削除・置換

`splice`～インデックス指定で取出し・削除・置換

splice()メソッドは指定したインデックスから指定した数の要素を削除する。追加する要素を指定した場合は指定した位置に要素が追加される。

`filter`～指定した内容の要素の取出し・削除

条件に一致する要素のみ取り出す場合、filter()メソッドを使う。filter()メソッドは非破壊的で新たな配列を生成する。

array = [1, 2, 3, 4, 3, 2, 1];

console.log(array.filter(v => v !== 2));

[1, 3, 4, 3, 1]

array = [1, 2, 3, 4, 3, 2, 1];

console.log(array.filter(v => v !== 2));

[1, 3, 4, 3, 1]

要素の内容を指定して削除する場合もfilter()で。

array = [1, 2, 3, 4, 3, 2, 1];

console.log(array.filter(v => v !== 2));

[1, 3, 3, 1]

array = [1, 2, 3, 4, 3, 2, 1];

console.log(array.filter(v => v !== 2));

[1, 3, 3, 1]

`map`～配列の要素の加工

map()メソッドは配列の各要素やインデックスなどの処理結果を要素とする配列を返す。

値とインデックスの順次取り出し

`for`文で値を取り出す

最も基本的なfor文の使い方で、インデックスを0～配列長−1まで変化させて直接参照する方法。

array = ['zero', 'one', 'two', 'three'];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// zero
// one
// two
// three

array = ['zero', 'one', 'two', 'three'];

for (let i = 0; i < array.length; i++) {

console.log(array[i]);

}

// zero

// one

// two

// three

`for...of`で値を直接取り出す

ES6のfor...of構文は、配列から要素を順次取り出してくれる（Pythonのfor...inと同じ動作）。

array = ['zero', 'one', 'two', 'three'];

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

// zero
// one
// two
// three

array = ['zero', 'one', 'two', 'three'];

for (let value of array) {

console.log(value);

}

// zero

// one

// two

// three

`for...in`でインデックスを取り出す

ES6のfor...inは配列からインデックスを順次取り出してくれる。ただし戻り値はStringなので要注意。

array = ['zero', 'one', 'two', 'three'];

for (let index in array) {
  console.log(typeof index, index);
}

// string 0
// string 1
// string 2
// string 3

array = ['zero', 'one', 'two', 'three'];

for (let index in array) {

console.log(typeof index, index);

}

// string 0

// string 1

// string 2

// string 3

`entries()`でインデックスと値を同時に取り出す

Array.prototype.entries()はインデックスと値の配列をイテレーションで返してくれる。

array = ['zero', 'one', 'two', 'three'];

for (let [index, value] of array.entries()) {
  console.log(typeof index, index, value);
}

// number 0 zero
// number 1 one
// number 2 two
// number 3 three

array = ['zero', 'one', 'two', 'three'];

for (let [index, value] of array.entries()) {

console.log(typeof index, index, value);

}

// number 0 zero

// number 1 one

// number 2 two

// number 3 three

`map()`に値とインデックスの2つの引数を指定する

Array.prototype.map()は引数で指定したコールバック関数を各要素に適用した結果を配列として返す。通常は引数を1つ指定して配列の要素を得て、それに対して処理する。

array = ['zero', 'one', 'two', 'three'];

console.log(array.map((value => 'value is ' + value)));

// ["value is zero", "value is one", "value is two", "value is three"]

array = ['zero', 'one', 'two', 'three'];

console.log(array.map((value => 'value is ' + value)));

// ["value is zero", "value is one", "value is two", "value is three"]

map()は2つ目の引数を指定することができて、その場合2つ目の引数にはインデックスの値が入る。しかも、for…inと違ってインデックスは数値として得られる。

array = ['zero', 'one', 'two', 'three'];

console.log(array.map((value, index) => typeof index + ':' + index));

// ["number:0", "number:1", "number:2", "number:3"]

array = ['zero', 'one', 'two', 'three'];

console.log(array.map((value, index) => typeof index + ':' + index));

// ["number:0", "number:1", "number:2", "number:3"]

`reducer`～配列要素に対するイテレーション

samやmax/minメソッドはない

JSには多言語のように配列要素の合計や最大値を求める汎用の関数やメソッドが準備されていない。

その実装は、プログラムごとにArray.reduce()メソッドで行われているようだ。たとえば要素の合計を求める例を以下に示す。

var sum = function(accumulator, current_value) {
  return accumulator + current_value;
}

var data = [2, 1, 4, 3];
console.log(data.reduce(sum));

// 10

var sum = function(accumulator, current_value) {

return accumulator + current_value;

}

var data = [2, 1, 4, 3];

console.log(data.reduce(sum));

// 10

配列の複製

const array_clone = [].concat(array)

const array_clone = array.slice(0, array.length)

const array_clone = [...array]

const array_clone = Array.from(array)

const array_clone = array.map(x => x)

JS/ES – Array.reduce

2020-12-09 / tau / コメントする

概要

Array.prototype.reduce()メソッドは、配列の要素を一つずつ取り出しながら畳み込み処理し、一つの値を返すメソッド。

要素の合計や最大値の取得といった基本的な処理もこのメソッドで実装する。

書式

reduce()メソッドは引数にコールバック関数をとる。

[配列].reduce(callback[, initial_value]);

コールバック関数がとるべき引数は決まっている。

callback(accumulator, current_value[, index[, array]])

処理の概要

initial_valueが指定されない場合、以下のように処理される。

配列の最初の要素の値がaccumulatorにセットされる
1. 要素数が1の場合には、そのまま終了
2. 要素数が2の場合には、2番目の要素の値がcurrent_valueにセットされる
最後の要素に達するまで、定義された関数の処理を行い、curren_valueを次の要素の値とする

initial_valueが指定された場合は、accumulatorの初期値としてinitial_valueが使われ、最初のcurrent_valueには1つ目の要素の値がセットされる。通常、initial_valueを指定しておく方が安全。

畳み込みの途中結果はaccumulatorに保存されていくが、戻り値は処理内容に応じてユーザーが定義する。

基本的な例

要素の合計

以下の例では、配列の要素の合計値を求めている。

関数定義では、各要素をスキャンするごとにその値をaccumulatorに足しこんでいる。その結果、最後の要素に達した時にaccumulatorの値は要素の合計値となっている。

var sum = function(accumulator, current_value) {
  return accumulator + current_value;
}

var data = [2, 1, 4, 3];
console.log(data.reduce(sum));

// 10

var sum = function(accumulator, current_value) {

return accumulator + current_value;

}

var data = [2, 1, 4, 3];

console.log(data.reduce(sum));

// 10

要素の最大値

以下の例では、配列の要素の最大値を求めている。

accumulatorの値は要素をスキャンするごとにより大きい値へと書き換えられ、実行終了時には要素のうち最大の値となっている。

var max = function(accumulator, current_value) {
  return current_value >= accumulator ? current_value : accumulator;
}

var data = [2, 1, 4, 3];
console.log(data.reduce(max));

// 4

var max = function(accumulator, current_value) {

return current_value >= accumulator ? current_value : accumulator;

}

var data = [2, 1, 4, 3];

console.log(data.reduce(max));

// 4

処理過程の確認

reduce()のイテレーション各回でaccumulatorやcurrent_valueがどのように推移するか確認してみた。

display_process = function(accumulator, current_value) {
  console.log(accumulator, current_value);
}

console.log([1, 2, 3].reduce(display_process));

// 1 2
// undefined 3
// undefined

console.log([1].reduce(display_process))

// 1

console.log([1, 2, 3].reduce(display_process, 0));

// 0 1
// undefined 2
// undefined 3
// undefined

console.log([1].reduce(display_process, 0))

// 0 1
// undefined

display_process = function(accumulator, current_value) {

console.log(accumulator, current_value);

}

console.log([1, 2, 3].reduce(display_process));

// 1 2

// undefined 3

// undefined

console.log([1].reduce(display_process))

// 1

console.log([1, 2, 3].reduce(display_process, 0));

// 0 1

// undefined 2

// undefined 3

// undefined

console.log([1].reduce(display_process, 0))

// 0 1

// undefined

コールバック関数の戻り値がないため、2回目以降のイテレーションでaccumulatorの内容がundefinedになっている。逆に言えば、reduceのイテレーションごとにコールバックの戻り値をaccumulaterに渡している。

イテレーションの最後でcurrent_valueの値がundefined、null、emptyなどのいずれでもない理由は不明。

initial_valueの指定の有無によって、accumulator、current_valueの各回の値やイテレーション回数が異なっている点に注意。

JS/ES – アロー関数

2020-12-09 / tau / コメントする

概要

アロー関数／アロー関数式は、function定義の短縮構文。

基本形

`function`を`'=>'`に

'function(引数)'を'(引数) =>'の形にするのが基本形。

var func1 = function (x, y) {
  return x + y;
}

console.log(func1(1, 2));

// 3

var func2 = (x, y) => {
  return x + y;
}

console.log(func2(2, 3));

// 5

var func1 = function (x, y) {

return x + y;

}

console.log(func1(1, 2));

// 3

var func2 = (x, y) => {

return x + y;

}

console.log(func2(2, 3));

// 5

1行表記の簡略化

さらに以下のように簡略化できる。

{}で囲んで1行表記
処理内容が1行の場合は{}が不要
引数が1つの場合は引数の()も不要

      var func3 = (x, y) => { return x + y; }

      console.log(func3(3, 4));

      var func4 = (x, y) => x + y;

      console.log(func4(4, 5));

      var func5 = x => x * x;

      console.log(func5(6));

var func3 = (x, y) => { return x + y; }

console.log(func3(3, 4));

var func4 = (x, y) => x + y;

console.log(func4(4, 5));

var func5 = x => x * x;

console.log(func5(6));

ただし引数がないときは()が必要。

var func6 = () => console.log('arrow function');

func6();

var func6 = () => console.log('arrow function');

func6();

JS/ES – 関数

2020-12-08 / tau / コメントする

ユーザー定義関数

関数式／無名関数／即時関数

アロー関数／アロー関数式

JS/ES – 関数式／無名関数／即時関数

2020-12-08 / tau / コメントする

関数式～関数の変数への代入

ユーザー定義関数はfunctionキーワードの後に関数名を指定して関数を定義し、その関数名で関数を呼び出して実行した。

これに対して、関数を変数に代入して、その変数名を用いて関数を実行することができる（関数式：function formula）。

func1 = function user_defined() {
  console.log('named function!');
}

func1();

// named function!

func1 = function user_defined() {

console.log('named function!');

}

func1();

// named function!

無名関数

このような使い方で、関数名自体を指定せずに関数の実体を変数に代入することもできる。

func2 = function () {
  console.log('anonymus function!');
}

func2();

// anonymous function!

func2 = function () {

console.log('anonymus function!');

}

func2();

// anonymous function!

このように名前を持たない関数を無名関数／匿名関数(anonymous function)と呼んでいる。

このような無名関数を変数に与える関数式は、メソッドや関数の引数に関数を与えることが想定されている場合に用いる。たとえばDOMに対するイベントリスナーの登録や、配列オブジェクトのreduce()メソッドに合計を計算するためのreducerを与える例など、その活用場面は多い。

array = [1, 2, 3, 4, 5];
sum = function (accumulator, current_value) {
  return accumulator + current_value;
}
console.log(array.reduce(sum));

// 15

array = [1, 2, 3, 4, 5];

sum = function (accumulator, current_value) {

return accumulator + current_value;

}

console.log(array.reduce(sum));

// 15

即時関数

さらに、関数の変数への代入自体も省いて、無名関数のまま実行させてしまう書き方を即時関数(immediately-invoked function express: IIFE)と呼んでいる。

(function () {
  console.log('immediately-invoked!')
})()

// immediately-invoked!

(function () {

console.log('immediately-invoked!')

})()

// immediately-invoked!

この記法は、varによる変数定義が関数スコープであることを利用して、変数の汚染を防ぐために使われる。

ES6以降導入されたブロックスコープより前にはグローバルスコープと関数スコープしかなかったため、必要なコード全体をIIFEの中に納めて、そのスコープ外の変数と独立させようという考え。

JS/ES – ユーザー定義関数

2020-12-08 / tau / コメントする

概要

ユーザー定義関数(user-defined function)は、関数名、引数、戻り値を指定して定義し、プログラム中で呼び出す。

関数定義

引数なし・戻り値なし

関数の中で必要な処理だけを行う。

function func1() {
  console.log("function-1");
}

func1();

// function-1

function func1() {

console.log("function-1");

}

func1();

// function-1

引数あり・戻り値なし

与えられた引数に基づいて実行。

function func2(a, b) {
  console.log("function-2 returned:" + (a + b));
}

func2(2, 3);

// function-2 returned:5

function func2(a, b) {

console.log("function-2 returned:" + (a + b));

}

func2(2, 3);

// function-2 returned:5

引数あり・戻り値あり

与えられた引数に基づいて実行し、その結果が戻り値として返される。

function func3(x) {
  return x * 2;
}

console.log(func3(4));

// 8

function func3(x) {

return x * 2;

}

console.log(func3(4));

// 8

関数定義の巻き上げ

func4(5)

function func4(x) {
  console.log(x * x);
}

// 25

func4(5)

function func4(x) {

console.log(x * x);

}

// 25

関数定義は実行の後に書いてもよく、実行時に定義のみがプログラム先頭に巻き上げられる。

JS/ES – 変数のスコープ

2020-12-08 / tau / コメントする

スコープの種類と宣言キーワード

スコープの種類

グローバルスコープ

ドキュメント内のどこからでも参照可能。

関数スコープ

宣言された関数内でのみ参照可能。関数内の入れ子の関数・ブロックからは参照可能。

ブロックスコープ

宣言されたブロック内でのみ参照可能。ブロック内の入れ子の関数・ブロックからは参照可能。

宣言キーワードとスコープ

キーワードなしの宣言

ドキュメント内のどこからでも参照可能なグローバルスコープ。

`var`

宣言された関数内の関数スコープ。

ドキュメント直下で宣言した場合、グローバルスコープ
関数で宣言した場合、その関数内のスコープ
ブロック内で宣言した場合、そのすぐ外側の関数のスコープ（ブロックがドキュメント直下にあればグローバルスコープ）

`let, const`

宣言されたブロック内のブロックスコープ。

ドキュメント直下で宣言した場合、グローバルスコープ
関数で宣言した場合、その関数内のスコープ

確認

グローバルスコープ

JSコード

function func() {
  console.log('--- in function ---')
  console.log(global_none);
  console.log(global_var);
  console.log(global_let);
  console.log(global_const);

  global_none = 'global_none: rev in func';
  global_var = 'global_var: rev in func';
  global_let = 'global_let: rev in func';
  //global_const = 'global_const: rev in func';
  // -> Uncaught TypeError: Assignment to constant variable
  console.log('global_const: CANNOT assign')
}

global_none = 'global_none: init in global';
var global_var = 'global_var: init in global';
let global_let = 'global_let: init in global';
const global_const = 'global_const: init in global';

console.log('--- global ---')
console.log(global_none);
console.log(global_var);
console.log(global_let);
console.log(global_const);

func();

console.log('--- after function call ---')
console.log(global_none);
console.log(global_var);
console.log(global_let);
console.log(global_const);

{
  console.log('--- in block ---')
  console.log(global_none);
  console.log(global_var);
  console.log(global_let);
  console.log(global_const);

  global_none = 'global_none: rev in block';
  global_var = 'global_var: rev in block';
  global_let = 'global_let: rev in block';
  //global_const = 'global_const: rev in func';
  // -> Uncaught TypeError: Assignment to constant variable
  console.log('global_const: CANNOT assign')
}

console.log('--- after block ---')
console.log(global_none);
console.log(global_var);
console.log(global_let);
console.log(global_const);

function func() {

console.log('--- in function ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

global_none = 'global_none: rev in func';

global_var = 'global_var: rev in func';

global_let = 'global_let: rev in func';

//global_const = 'global_const: rev in func';

// -> Uncaught TypeError: Assignment to constant variable

console.log('global_const: CANNOT assign')

}

global_none = 'global_none: init in global';

var global_var = 'global_var: init in global';

let global_let = 'global_let: init in global';

const global_const = 'global_const: init in global';

console.log('--- global ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

func();

console.log('--- after function call ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

{

console.log('--- in block ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

global_none = 'global_none: rev in block';

global_var = 'global_var: rev in block';

global_let = 'global_let: rev in block';

//global_const = 'global_const: rev in func';

// -> Uncaught TypeError: Assignment to constant variable

console.log('global_const: CANNOT assign')

}

console.log('--- after block ---')

console.log(global_none);

console.log(global_var);

console.log(global_let);

console.log(global_const);

実行結果

--- global ---
global_none: init in global
global_var: init in global
global_let: init in global
global_const: init in global
--- in function ---
global_none: init in global
global_var: init in global
global_let: init in global
global_const: init in global
global_const: CANNOT assign
--- after function call ---
global_none: rev in func
global_var: rev in func
global_let: rev in func
global_const: init in global
--- in block ---
global_none: rev in func
global_var: rev in func
global_let: rev in func
global_const: init in global
global_const: CANNOT assign
--- after block ---
global_none: rev in block
global_var: rev in block
global_let: rev in block
global_const: init in global

--- global ---

global_none: init in global

global_var: init in global

global_let: init in global

global_const: init in global

--- in function ---

global_none: init in global

global_var: init in global

global_let: init in global

global_const: init in global

global_const: CANNOT assign

--- after function call ---

global_none: rev in func

global_var: rev in func

global_let: rev in func

global_const: init in global

--- in block ---

global_none: rev in func

global_var: rev in func

global_let: rev in func

global_const: init in global

global_const: CANNOT assign

--- after block ---

global_none: rev in block

global_var: rev in block

global_let: rev in block

global_const: init in global

関数スコープ

var, let, constとも関数内で宣言された場合はその関数内のみのスコープ
宣言された関数の中に入れ子で宣言された関数からは参照可能
入れ子の内側の関数内で宣言されたvar, let, constは、外側の関数からは参照できない

JSコード

function func() {
  console.log('--- in function ---')

  var func_var = 'func_var: init in function';
  let func_let = 'func_let: init in function';
  const func_const = 'func_const init in function';

  console.log(func_var);
  console.log(func_let);
  console.log(func_const);

  (function() {
    var nested_func_var = 'nested_func_var: init in nested function';
    let nested_func_let = 'nested_func_var: init in nested function';
    const nested_func_const = 'nested_func_const: init in nested function';

    console.log('--- in nested function ---')
    func_var = 'func_var: rev in nested function'
    func_let = 'func_let: rev in nested function'
    console.log(func_const);
  })()

  console.log('--- after nested function ---')
  console.log(func_var);
  console.log(func_let);
  console.log(func_const);

  //console.log(nested_func_var);
  console.log('nested_func_var: NOT defined');
  //console.log(nested_func_let);
  console.log('nested_func_let: NOT defined');
  //console.log(nested_func_const);
  console.log('nested_func_const: NOT defined');
}

func();

console.log('--- after function call ---')
//console.log(func_let);
// -> Uncaught ReferenceError: func_let is not defined
console.log('func_var: NOT defined');
//console.log(func_let);
// -> Uncaught ReferenceError: func_let is not defined
console.log('func_let: NOT defined');
//console.log(func_const);
// -> Uncaught ReferenceError: func_cost is not defined
console.log('func_cost: NOT defined');

function func() {

console.log('--- in function ---')

var func_var = 'func_var: init in function';

let func_let = 'func_let: init in function';

const func_const = 'func_const init in function';

console.log(func_var);

console.log(func_let);

console.log(func_const);

(function() {

var nested_func_var = 'nested_func_var: init in nested function';

let nested_func_let = 'nested_func_var: init in nested function';

const nested_func_const = 'nested_func_const: init in nested function';

console.log('--- in nested function ---')

func_var = 'func_var: rev in nested function'

func_let = 'func_let: rev in nested function'

console.log(func_const);

})()

console.log('--- after nested function ---')

console.log(func_var);

console.log(func_let);

console.log(func_const);

//console.log(nested_func_var);

console.log('nested_func_var: NOT defined');

//console.log(nested_func_let);

console.log('nested_func_let: NOT defined');

//console.log(nested_func_const);

console.log('nested_func_const: NOT defined');

}

func();

console.log('--- after function call ---')

//console.log(func_let);

// -> Uncaught ReferenceError: func_let is not defined

console.log('func_var: NOT defined');

//console.log(func_let);

// -> Uncaught ReferenceError: func_let is not defined

console.log('func_let: NOT defined');

//console.log(func_const);

// -> Uncaught ReferenceError: func_cost is not defined

console.log('func_cost: NOT defined');

実行結果

--- global ---
--- in function ---
func_var: init in function
func_let: init in function
func_const init in function
--- in nested function ---
func_const init in function
--- after nested function ---
func_var: rev in nested function
func_let: rev in nested function
func_const init in function
nested_func_var: NOT defined
nested_func_let: NOT defined
nested_func_const: NOT defined
--- after function call ---
func_var: NOT defined
func_let: NOT defined
func_cost: NOT defined

--- global ---

--- in function ---

func_var: init in function

func_let: init in function

func_const init in function

--- in nested function ---

func_const init in function

--- after nested function ---

func_var: rev in nested function

func_let: rev in nested function

func_const init in function

nested_func_var: NOT defined

nested_func_let: NOT defined

nested_func_const: NOT defined

--- after function call ---

func_var: NOT defined

func_let: NOT defined

func_cost: NOT defined

ブロックスコープ

var宣言はブロック内外に関わらず参照可能
let, constは宣言されたブロック内のみのスコープ
宣言されたブロックの中の入れ子のブロックからは参照可能
入れ子の内側のブロック内で宣言されたvar, let, constは、外側のブロックからは参照できない

JSコード

console.log('--- global ---')
{
  console.log('--- in block ---');
  var block_var = 'block_var: init in block';
  let block_let = 'block_let: init in block';
  const block_const = 'block_const: init in block';

  console.log(block_var);
  console.log(block_let);
  console.log(block_const);

  {
    console.log('--- in nested block ---');
    var nested_block_var = 'nested_block_var: init in nested block';
    let nested_block_let = 'nested_block_let: init in nested block';
    const nested_block_const = 'nested_block_const: init in nested block';

    block_var = 'block_var: rev in nested block';
    block_let = 'block_let: rev in nested block';
    console.log(block_const);
  }

  console.log('--- after nested block ---');
  console.log(block_var);
  console.log(block_let);
  console.log(block_const);

  console.log(nested_block_var);
  //console.log(nested_block_let);
  console.log('nested_block_let: NOT defined');
  //console.log(nested_block_const);
  console.log('nested_block_const: NOT defined');
}

console.log('--- after block ---');
console.log(block_var);
//console.log(block_let);
// -> Uncaught ReferenceError: block_let is not defined
console.log('block_let: NOT defined');
//console.log(block_const);
// -> Uncaught ReferenceError: func_var is not defined
console.log('block_const: NOT defined');

console.log('--- global ---')

{

console.log('--- in block ---');

var block_var = 'block_var: init in block';

let block_let = 'block_let: init in block';

const block_const = 'block_const: init in block';

console.log(block_var);

console.log(block_let);

console.log(block_const);

{

console.log('--- in nested block ---');

var nested_block_var = 'nested_block_var: init in nested block';

let nested_block_let = 'nested_block_let: init in nested block';

const nested_block_const = 'nested_block_const: init in nested block';

block_var = 'block_var: rev in nested block';

block_let = 'block_let: rev in nested block';

console.log(block_const);

}

console.log('--- after nested block ---');

console.log(block_var);

console.log(block_let);

console.log(block_const);

console.log(nested_block_var);

//console.log(nested_block_let);

console.log('nested_block_let: NOT defined');

//console.log(nested_block_const);

console.log('nested_block_const: NOT defined');

}

console.log('--- after block ---');

console.log(block_var);

//console.log(block_let);

// -> Uncaught ReferenceError: block_let is not defined

console.log('block_let: NOT defined');

//console.log(block_const);

// -> Uncaught ReferenceError: func_var is not defined

console.log('block_const: NOT defined');

実行結果

--- global ---
--- in block ---
block_var: init in block
block_let: init in block
block_const: init in block
--- in nested block ---
block_const: init in block
--- after nested block ---
block_var: rev in nested block
block_let: rev in nested block
block_const: init in block
nested_block_var: init in nested block
nested_block_let: NOT defined
nested_block_const: NOT defined
--- after block ---
block_var: rev in nested block
block_let: NOT defined
block_const: NOT defined

--- global ---

--- in block ---

block_var: init in block

block_let: init in block

block_const: init in block

--- in nested block ---

block_const: init in block

--- after nested block ---

block_var: rev in nested block

block_let: rev in nested block

block_const: init in block

nested_block_var: init in nested block

nested_block_let: NOT defined

nested_block_const: NOT defined

--- after block ---

block_var: rev in nested block

block_let: NOT defined

block_const: NOT defined

JS/ES – JQuery – 基本

2016-06-28 / tau / コメントする

準備

JQueryのライブラリーを読み込む。

CDN (Contents Delivery Network)から読み込む場合の例は以下のとおり。

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

ライブラリーをダウンロードする場合はURLをローカルのファイルパスにする。

記述位置～readyイベント

HTML要素に作用する処理（スタイル変更など）はDOMの読み込み後でなければならない。

JQueryスクリプトの記述位置記述方法

オブジェクトとメソッド

オブジェクトの作成

jQueryの操作対象はページのDOM要素だが、jQueryでは、DOMのidやクラス名を使ってそのDOMのオブジェクトを作成し、それらのメソッドを通して操作する。

オブジェクトの作成はjQuery()コンストラクタを使い、セレクタとしてcssのセレクタを指定。

jQuery(セレクタ)　または　$(セレクタ)

1	jQuery(セレクタ)　または　$(セレクタ)

先の例では、id=”header”を与えられたオブジェクトを以下の様に作成している。

jQuery("#header")　または　$("#header")

1	jQuery("#header")　または　$("#header")

要素指定

様々な要素指定方法を参照。

メソッドによる操作

メソッドは各オブジェクトのクラスに定義されており、他のオブジェクト指向言語と同じ形で呼び出す。

jQuery("#header").css("color", "blue")

1	jQuery("#header").css("color", "blue")

この例では”#header”で作成したオブジェクトに対して、cssメソッドで前景色を青にするよう指定している。

これをエイリアスを用いて書くと以下の通り。

$("#header").css("color", "blue")

1	$("#header").css("color", "blue")

メソッドの機能

メソッドには、機能に応じて以下の種類がある。

オブジェクトの情報を取得するもの
オブジェクトに対して操作を行うもの
オブジェクトのイベント処理を行うもの

JQuery – メソッドに詳細。

概要

失敗例

改善例1～後置

改善例2～onload

改善例2’～windowリスナーの追加

概要

基本形式

無名関数

メソッドチェーン

配列の定義

リテラル

Arrayコンストラクター

要素の参照・追加

配列の長さ

先頭・末尾要素の取出し・追加・削除

要素の取出し・削除・置換

splice～インデックス指定で取出し・削除・置換

filter～指定した内容の要素の取出し・削除

map～配列の要素の加工

値とインデックスの順次取り出し

for文で値を取り出す

for...ofで値を直接取り出す

for...inでインデックスを取り出す

entries()でインデックスと値を同時に取り出す

map()に値とインデックスの2つの引数を指定する

reducer～配列要素に対するイテレーション

samやmax/minメソッドはない

配列の複製

概要

書式

処理の概要

基本的な例

要素の合計

要素の最大値

処理過程の確認

概要

基本形

functionを'=>'に

1行表記の簡略化

関数式～関数の変数への代入

無名関数

即時関数

概要

関数定義

引数なし・戻り値なし

引数あり・戻り値なし

引数あり・戻り値あり

関数定義の巻き上げ

スコープの種類と宣言キーワード

スコープの種類

グローバルスコープ

関数スコープ

ブロックスコープ

宣言キーワードとスコープ

キーワードなしの宣言

var

let, const

確認

グローバルスコープ

関数スコープ

JSコード

ブロックスコープ

JSコード

準備

記述位置～readyイベント

オブジェクトとメソッド

オブジェクトの作成

要素指定

メソッドによる操作

メソッドの機能

`Array`コンストラクター

`splice`～インデックス指定で取出し・削除・置換

`filter`～指定した内容の要素の取出し・削除

`map`～配列の要素の加工

`for`文で値を取り出す

`for...of`で値を直接取り出す

`for...in`でインデックスを取り出す

`entries()`でインデックスと値を同時に取り出す

`map()`に値とインデックスの2つの引数を指定する

`reducer`～配列要素に対するイテレーション

`function`を`'=>'`に

`var`

`let, const`