JavaScript – その他

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

処理時間の計測

処理時間の計測には、console.time()とconsole.timeEnd()を用いることができる。

console.time( "timer" );

var n = 0;
while ( n < 1000000 ) {
  n++;
}

console.timeEnd( "timer" );

console.time( "timer" );

var n = 0;

while ( n < 1000000 ) {

n++;

}

console.timeEnd( "timer" );

コールスタック・オーバーフロー

再帰のネストが深すぎると、コールスタック・オーバーフローが発生する。

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
  } else {
    n--;
    countdown( n - 1 );
  }
}


console.log( "start" );
countdown( 100000 );

// 実行結果
// start
// Uncaught RangeError: Maximum call stack size exceeded

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

} else {

n--;

countdown( n - 1 );

}

console.log( "start" );

countdown( 100000 );

// 実行結果

// start

// Uncaught RangeError: Maximum call stack size exceeded

これを回避する方法の一つとして、setTimeout()関数による方法がある。

Lifegame (JavaScript)

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

概要

Javascript学習のスタートアップのために試作したもの。

内部に配列を持ち、世代交代の結果を文字ベースで表示し、setInterval()で更新している。

htmlのdiv要素内に文字ベースで表示している。

デモンストレーション

このアプリケーションは文字ベースなため、ブラウザやスタイルによって大変見にくい。別ページで用意したこのアプリケーションで、ブラウザによっては見やすくなる場合がある

パターン選択

移動体

周期型

長寿型

ランダム

実行

表示エリア

コード内容

HTML

カテゴリーごとの初期パターン選択ボタン、起動／停止ボタン、表示エリアを表示させている。

<div>
<h3>パターン選択</h3>
移動体
<input type="button" value="Grider" onclick="patternGrider()">
<input type="button" value="L-Spaceship" onclick="patternSpaceshipL()">
<input type="button" value="M-Spaceship" onclick="patternSpaceshipM()">
<input type="button" value="H-Spaceship" onclick="patternSpaceshipH()">
<br>
周期型
<input type="button" value="Octagon" onclick="patternOctagon()">
<input type="button" value="Nebula" onclick="patternNebula()">
<br>
長寿型
<input type="button" value="Die hard" onclick="patternDiehard()">
<br>
ランダム
<input type="button" value="Random" onclick="patternRandom()">
</div>

<div>
<h3>実行</h3>
<input type="button" value="start/stop" onclick="startAndStop()">
</div>

<div>
<h3>表示エリア</h3>
<div id="display_area"></div>


<script src="./js/app_lifegame1.js"></script>

<div>

<h3>パターン選択</h3>

移動体

<br>

周期型

<br>

長寿型

<br>

ランダム

</div>

<div>

</div>

<div>

<h3>表示エリア</h3>

JavaScript

グローバルな二次元配列にセルの情報を保持し、配列上で世代交代の処理をしたうえで、HTMLに書き出している。初期パターンの選択は、パターンごとの設定用関数を準備し、ボタンで呼び出している。主な処理ブロックは以下の通り。

グローバル処理: グローバル変数の宣言と初期値定義を行っている。
初期パターン選択: 各パターンのボタンのクリックに応じて、パターンごとに準備された関数が呼び出され、初期pターンの設定と表示を行う。
起動・停止: ボタンのクリックによって、一定時間間隔で世代交代関数を実行させ、停止させる。
世代交代: ライフゲームのルールに従い、一世代後のパターンを決定し、表示する。

グローバル処理

共通して利用する変数の宣言／定義
グリッドの初期化
初期状態のグリッドの表示

var isRunning = false;
var timer;

var rows = 20;
var cols = 20;
// エリアサイズ+2のグリッドを確保
var cell = new Array( rows + 2 );
for ( var i = 0; i <= rows + 1; i++ ) {
  cell[i] = new Array( cols + 2 );
}
// 更新用のグリッドを確保
var newCell = new Array( rows + 2 );
for ( var i = 0; i <= rows + 1; i++ ) {
  newCell[i] = new Array( cols + 2 );
}

initialize();

display();


function initialize() {
  for ( var i = 0; i <= rows + 1; i++ ) {
    for ( var j = 0; j <= cols + 1; j++ ) {
      cell[i][j] = 0;
      newCell[i][j] = 0;
    }
  }
}


function display() {
  var displayArea = document.getElementById( "display_area" );
  displayArea.innerHTML = "";

  for ( var i = 1; i <= rows; i++ ) {
    for ( var j = 1; j <= cols; j++ ) {
      displayArea.innerHTML += ( cell[i][j] == 0 ) ? "□" : "■";
    }
    displayArea.innerHTML += "<br>";
  }
}

var isRunning = false;

var timer;

var rows = 20;

var cols = 20;

// エリアサイズ+2のグリッドを確保

var cell = new Array( rows + 2 );

for ( var i = 0; i <= rows + 1; i++ ) {

cell[i] = new Array( cols + 2 );

}

// 更新用のグリッドを確保

var newCell = new Array( rows + 2 );

for ( var i = 0; i <= rows + 1; i++ ) {

newCell[i] = new Array( cols + 2 );

}

initialize();

display();

function initialize() {

for ( var i = 0; i <= rows + 1; i++ ) {

for ( var j = 0; j <= cols + 1; j++ ) {

cell[i][j] = 0;

newCell[i][j] = 0;

}

function display() {

var displayArea = document.getElementById( "display_area" );

displayArea.innerHTML = "";

for ( var i = 1; i <= rows; i++ ) {

for ( var j = 1; j <= cols; j++ ) {

displayArea.innerHTML += ( cell[i][j] == 0 ) ? "□" : "■";

}

displayArea.innerHTML += "<br>";

}

初期パターン選択

ボタンで選択された初期パターンに対応した設定関数が呼び出される。設定関数はパターンごとに準備され、配列リテラルの内容を、グリッドの”ほぼ中央”にコピーする。

function patternGrider() {
  initialize();

  var pattern = [
    [1,1,1],
    [1,0,0],
    [0,1,0]
  ];

  copyPattern( pattern );

  display();
}

function patternSpaceshipL() {
  initialize();

  var pattern = [
    [0,1,0,0,1],
    [1,0,0,0,0],
    [1,0,0,0,1],
    [1,1,1,1,0]
  ];

  copyPattern( pattern );

  display();
}


function copyPattern( pattern ) {
  var patternRow = pattern.length;
  var patternCol = pattern[0].length;
  var startRow = Math.floor( rows / 2 ) - Math.floor( patternRow / 2 );
  var startCol = Math.floor( cols / 2 ) - Math.floor( patternCol / 2 );
  for ( var i = 0; i < patternRow; i++ ) {
    for ( var j = 0; j < patternCol; j++ ) {
      cell[startRow + i][startCol + j] = pattern[i][j];
    }
  }
}

function patternGrider() {

initialize();

var pattern = [

[1,1,1],

[1,0,0],

[0,1,0]

];

copyPattern( pattern );

display();

}

function patternSpaceshipL() {

initialize();

var pattern = [

[0,1,0,0,1],

[1,0,0,0,0],

[1,0,0,0,1],

[1,1,1,1,0]

];

copyPattern( pattern );

display();

}

function copyPattern( pattern ) {

var patternRow = pattern.length;

var patternCol = pattern[0].length;

var startRow = Math.floor( rows / 2 ) - Math.floor( patternRow / 2 );

var startCol = Math.floor( cols / 2 ) - Math.floor( patternCol / 2 );

for ( var i = 0; i < patternRow; i++ ) {

for ( var j = 0; j < patternCol; j++ ) {

cell[startRow + i][startCol + j] = pattern[i][j];

}

起動・停止

起動・停止のボタンが押されるたびに、稼働状態／停止状態がスイッチする。稼働時には、一定時間間隔で関数life()を呼び出している。life()関数内では、世代交代を施した後、表示をさせる。

function startAndStop() {
  if ( isRunning ) {
    clearInterval( timer );
    isRunning = false;
  } else {
    timer = setInterval( "life()", 500 );
    isRunning = true;
  }
}


function life() {
  nextGeneration();

  display();
}

function startAndStop() {

if ( isRunning ) {

clearInterval( timer );

isRunning = false;

} else {

timer = setInterval( "life()", 500 );

isRunning = true;

}

function life() {

nextGeneration();

display();

}

世代交代

あるセルの次世代の状態は、そのセル自身の状態と、その周囲8つのセルの数によって定められる。

	存在	不在
0～1	死滅	不在
2	存在	不在
3	存在	誕生
4～	死滅	不在

function nextGeneration() {
  var n;
  for ( var i = 1; i <= rows; i++ ) {
    for ( var j = 1; j <= cols; j++ ) {
      n = numOfNeighbors( i, j );

      if ( n <= 1 )
        newCell[i][j] = 0;
      else if ( n == 2 )
        newCell[i][j] = cell[i][j];
      else
        if ( n == 3 ) newCell[i][j] = 1;
      else
        newCell[i][j] = 0;
    }
  }

  for ( var i = 0; i <= rows + 1; i++ ) {
    for ( var j = 0; j <= cols + 1; j++ ) {
      cell[i][j] = newCell[i][j];
    }
  }
}

function numOfNeighbors( i, j ) {
  var count = 0;
  count += cell[i-1][j-1] + cell[i-1][j] + cell[i-1][j+1];
  count += cell[i][j-1] + cell[i][j+1];
  count += cell[i+1][j-1] + cell[i+1][j] + cell[i+1][j+1];

  return count;
}

function nextGeneration() {

var n;

for ( var i = 1; i <= rows; i++ ) {

for ( var j = 1; j <= cols; j++ ) {

n = numOfNeighbors( i, j );

if ( n <= 1 )

newCell[i][j] = 0;

else if ( n == 2 )

newCell[i][j] = cell[i][j];

else

if ( n == 3 ) newCell[i][j] = 1;

else

newCell[i][j] = 0;

}

for ( var i = 0; i <= rows + 1; i++ ) {

for ( var j = 0; j <= cols + 1; j++ ) {

cell[i][j] = newCell[i][j];

}

function numOfNeighbors( i, j ) {

var count = 0;

count += cell[i-1][j-1] + cell[i-1][j] + cell[i-1][j+1];

count += cell[i][j-1] + cell[i][j+1];

count += cell[i+1][j-1] + cell[i+1][j] + cell[i+1][j+1];

return count;

}

JavaScript – Timer

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

概要

JavaScriptのタイマ関連の実装。

Dateオブジェクトによる経過時間の計測
setInterval()による等時間間隔の起動
setTomeout()による等時間間隔の実行キュー登録

Dateオブジェクト

Dateオブジェクトのミリ秒単位の値を用いる方法。

DateオブジェクトのvalueOf()メソッドでミリ秒単位の現在時刻を取得し、これを用いて時間を判定する。これに続く処理を純粋に遅延させることになる。

var endTime = ( new Date() ).valueOf() + 3000;

console.log( "start" );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

var endTime = ( new Date() ).valueOf() + 3000;

console.log( "start" );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

なお、valueOf()メソッドの代わりに、+newオペレータを用いることができる。

var endTime = +new Date() + 3000

1	var endTime = +new Date() + 3000

setInterval()

起動

指定した時間間隔で関数を呼び出す。他の処理とは無関係に呼び出されるため、関数の処理内容が重い場合には、処理が終わる前に呼び出されてしまうことがある。

setInterval()関数の第1引数に繰り返し実行したい関数を、第2引数に繰り返し間隔をミリ秒単位の数値で指定。関数の指定方法としては、以下の3通り。

文字列で記述	関数名を文字列として記述。その際、関数の後の()も付けて記述
直接記述	関数名をクォート／ダブルクォートで囲まず直接記述。関数の後ろの()はつけない
無名関数を使って記述	function(){}の中にターゲットとなる関数を記述

# 文字列で関数名を記述する例
setInterval( "animation()";

# 関数名を直接記述する例
setInterval( animation, 1000 ); 1000 );

# 無名関数を使った例
setInterval( function() { animation(); }, 1000 );

# 文字列で関数名を記述する例

setInterval( "animation()";

# 関数名を直接記述する例

setInterval( animation, 1000 ); 1000 );

# 無名関数を使った例

setInterval( function() { animation(); }, 1000 );

引数がある場合

繰り返し実行する関数が引数を持つ場合、文字列で引数を記述するか、無名関数を使って記述する。

var char0 = '□';
var char1 = '■';

# 文字列で記述する例
setInterval( "animation( char0, char1 )", 1000 );

# 無名関数を使う例
setInterval( function() { animation( char0, char1 ); }, 1000 );

var char0 = '□';

var char1 = '■';

# 文字列で記述する例

setInterval( "animation( char0, char1 )", 1000 );

# 無名関数を使う例

setInterval( function() { animation( char0, char1 ); }, 1000 );

停止

タイマーの起動と停止を制御するには、起動時にsetInterval()を変数で参照し、そのオブジェクトに対してclearInterval()で停止をかける。

<input type="button" id="id_button" value="start/stop" onclick="startAndStop()">
<p id="id_target"></p>

<script>
<!--

var target = document.getElementById( "id_target" );
var char0 = '□';
var char1 = '■';
var isRunning = false;
var flag = 0;
var timer;

function startAndStop() {
  if ( isRunning ) {
    clearInterval( timer );
    isRunning = false;
  } else {
    timer = setInterval( "animation( char0, char1 )", 1000 );
    isRunning = true;
  }
}

function animation( ch0, ch1 ) {
  if ( flag == 0 ) {
    target.innerHTML = ch0;
    flag = 1;
  } else {
    target.innerHTML = ch1;
    flag = 0;
  }
}

//-->
</script>

<!--

var target = document.getElementById( "id_target" );

var char0 = '□';

var char1 = '■';

var isRunning = false;

var flag = 0;

var timer;

function startAndStop() {

if ( isRunning ) {

clearInterval( timer );

isRunning = false;

} else {

timer = setInterval( "animation( char0, char1 )", 1000 );

isRunning = true;

}

function animation( ch0, ch1 ) {

if ( flag == 0 ) {

target.innerHTML = ch0;

flag = 1;

} else {

target.innerHTML = ch1;

flag = 0;

}

//-->

</script>

setTimeout()

基本形

setTimeout()の第1引数に実行したい関数を文字列で、第2引数に遅延時間をミリ秒で指定する。

console.log( "start" );

setTimeout( "main()", 3000 );

console.log( "end" );

function main() {
  console.log( "in main()" );
}

console.log( "start" );

setTimeout( "main()", 3000 );

console.log( "end" );

function main() {

console.log( "in main()" );

}

上記の例では、以下のように推移する。

“start”を表示
setTimeout()を実行→3秒後にmain()関数が呼び出されるよう指定
“end”を表示
約3秒後にmain()が実行され、”in main()”を表示

起動

関数を文字列とする方法

setTimeout( "main()", 3000 );
setTimeout( "main( 100 )", 3000 );
setTimeout( "main( arg )", 3000 );

setTimeout( "main()", 3000 );

setTimeout( "main( 100 )", 3000 );

setTimeout( "main( arg )", 3000 );

文字列で引数を分離する方法

setTimeout( "main(" + 100 + ")", 3000);
setTimeout( "main(" + arg + ")", 3000 );

1 2	setTimeout( "main(" + 100 + ")", 3000); setTimeout( "main(" + arg + ")", 3000 );

無名関数を使う方法

setTimeout( function() { main(); }, 3000 );
setTimeout( function() { main( 100 ); }, 3000 );
setTimeout( function() { main( arg ); }, 3000 );

setTimeout( function() { main(); }, 3000 );

setTimeout( function() { main( 100 ); }, 3000 );

setTimeout( function() { main( arg ); }, 3000 );

タイマとしての利用

等時間間隔で実行したい関数で、setTimeout()において再帰的に自己を呼び出すことによってタイマーとして利用できる。

counter( 10 );


function counter( n ) {
  if ( n == 0 ) {
    console.log( "count end" );
  } else {
    console.log( n );
    n--;
    timer = setTimeout( function() { counter( n ); }, 1000 );
  }
}

counter( 10 );

function counter( n ) {

if ( n == 0 ) {

console.log( "count end" );

} else {

console.log( n );

n--;

timer = setTimeout( function() { counter( n ); }, 1000 );

}

遅延時間後に実行キューに登録されることから、それぞれの関数の実行は重複することなく担保される。このため、setInterval()に比べて関数間の衝突は生じないが、実際の実行間隔は遅延時間より長くなる。

停止

setTimeout()はsetInterval()と同じくタイマーIDを返し、これに対してclearTimeout()を実行することでタイマーを停止できる。

var timer;

setTimeout( function() { stop(); }, 5000 );
counter( 10 );


function counter( n ) {
  if ( n == 0 ) {
    console.log( "count end" );
  } else {
    console.log( n );
    n--;
    timer = setTimeout( function() { counter( n ); }, 1000 );
  }
}


function stop() {
  clearTimeout( timer );
}

var timer;

setTimeout( function() { stop(); }, 5000 );

counter( 10 );

function counter( n ) {

if ( n == 0 ) {

console.log( "count end" );

} else {

console.log( n );

n--;

timer = setTimeout( function() { counter( n ); }, 1000 );

}

function stop() {

clearTimeout( timer );

}

上記の例では、タイマーを止めるstop()関数が5秒後に実行されるようにし、counter()を開始している。counter()自身がが終了する前にstop()が実行され、counter()は停止する。

補足

実行キュー

setTimeout()は、指定した関数を指定した遅延時間後に実行キューに登録する。このため、setTimeout()実行後に時間がかかる処理に移った場合、その処理中に遅延指定した関数がキューに登録され、処理実行後に関数が実行される。

var endTime = ( new Date() ).valueOf() + 5000;

console.log( "start" );

setTimeout( function() { hoo(); }, 3000 );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );


function hoo() {
  console.log( "delay" );
}

var endTime = ( new Date() ).valueOf() + 5000;

console.log( "start" );

setTimeout( function() { hoo(); }, 3000 );

while ( ( new Date() ).valueOf() < endTime );

console.log( "end" );

function hoo() {

console.log( "delay" );

}

上記の例の場合、

setTimeout()が実行され、3秒の遅延時間のカウント開始
whileループに入る
3秒後、hoo()が実行キューに登録される
5秒後、whileループから抜ける
実行キューに登録されたhoo()が即時実行される

スタック・オーバーフローの回避

setTimeout()を用いるシーンの一つに、再帰定義のコールスタック・オーバーフローの回避がある。この場合、再帰呼び出しの度にsetTimeout()でラップし、待機時間をゼロとする。

setTimeout( 関数, 0 )；

1	setTimeout( 関数, 0 )；

これにより、関数はスタックではなく実行キューに並べられ、オーバーフローは発生しない。ただし、通常の再帰呼び出しに比べて大幅に実行時間が増加する。

たとえば以下の例では単純なループにかかる時間を測っており、

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
  } else {
    n--;
    countdown( n );
  }
}


console.log( "start" );
console.time( "timer" );
countdown( 10000 );
console.timeEnd( "timer" );

// 実行結果
// start
// end
//timer: 10.000ms

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

} else {

n--;

countdown( n );

}

console.log( "start" );

console.time( "timer" );

countdown( 10000 );

console.timeEnd( "timer" );

// 実行結果

// start

// end

//timer: 10.000ms

次の例では、再帰的にsetTimeout()で自己を呼び出すようにしているが、処理時間の乖離が大きい。

function countdown( n ) {
  if ( n == 0 ) {
    console.log( "end" );
    console.timeEnd( "timer" );
  } else {
    n--;
    setTimeout( function() {
      countdown( n ); 
    }, 0 );
  }
}

console.log( "start" );
console.time( "timer" );
countdown( 10000 );

// 実行結果
// start
// end
// timer: 40317.000ms

function countdown( n ) {

if ( n == 0 ) {

console.log( "end" );

console.timeEnd( "timer" );

} else {

n--;

setTimeout( function() {

countdown( n );

}, 0 );

}

console.log( "start" );

console.time( "timer" );

countdown( 10000 );

// 実行結果

// start

// end

// timer: 40317.000ms

なお、この方法で関数をsetTimeout()に引き渡す際、引数まで含めて文字列で引き渡そうとするとUncaught ReferenceError: 引数 is not definedとエラーになる。

HTML Entity Converter (JavaScript)

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

概要

HTMLの文字のうち、'<‘、’>’、’&’とそれぞれの実体参照を相互変換。

変換の時は’&’→”&”の変換を最初にし、逆変換の時は”&”→’&’の変換を最後にする。
文字列の検索と置換には、[string].split[beforeString].join[afterString]で行っている。

実行

Entity Converterを新しいタブで開く

JavaScript – クラス

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

クラスの構築

コンストラクタ

JavaScriptではクラス定義はなく、コンストラクタを関数で定義する。

thisはこの関数が含まれるオブジェクト(のインスタンス)を指す
newによって新しいオブジェクトの無名インスタンスが生成される
代入演算子(=)によって、変数が上記のインスタンスを参照する
その結果、thisは定義されたインスタンスを指す

コンストラクタで定義されていないプロパティでも、インスタンスごとに後から追加可能だが、これは可読性やクラスとしての一貫性を損なう。

function MyClass( name ) {
this.name = name;
}

var john = new MyClass( "John" );
var louis = new MyClass( "Louis" );

// インスタンスごとにプロパティが保持される
console.log( john.name );
console.log( louis.name );

// 未定義のプロパティはundefined
console.log( john.age );
console.log( louis.age );

// 後からinstanceごとにプロパティを追加可能
instance1.age = 30;
console.log( john.age );// 30
console.log( louis.age );// undefined

function MyClass( name ) {

this.name = name;

}

var john = new MyClass( "John" );

var louis = new MyClass( "Louis" );

// インスタンスごとにプロパティが保持される

console.log( john.name );

console.log( louis.name );

// 未定義のプロパティはundefined

console.log( john.age );

console.log( louis.age );

// 後からinstanceごとにプロパティを追加可能

instance1.age = 30;

console.log( john.age );// 30

console.log( louis.age );// undefined

インスタンスの識別

同じクラスのインスタンスへの参照が同一か異なるかを比較することができる。

function MyClass() {
}

me = new MyClass();
copy = me;
other = new MyClass();

console.log( ( me == me ) ); // true
console.log( ( me == copy ) ); // true
console.log( ( me == other ) ); // false
console.log( ( copy == other ) ); // false

console.log( ( me != me ) ); // false
console.log( ( me != copy ) ); // false
console.log( ( me != other ) ); // true
console.log( ( copy != other ) ); // true

function MyClass() {

}

me = new MyClass();

copy = me;

other = new MyClass();

console.log( ( me == me ) ); // true

console.log( ( me == copy ) ); // true

console.log( ( me == other ) ); // false

console.log( ( copy == other ) ); // false

console.log( ( me != me ) ); // false

console.log( ( me != copy ) ); // false

console.log( ( me != other ) ); // true

console.log( ( copy != other ) ); // true

この比較はthisを用いても可能。

function MyClass() {
}

MyClass.prototype.isSameAs = function( other ) {
return ( this == other ) ? true : false;
}

me = new MyClass();
copy = me;
another = new MyClass();

console.log( me.isSameAs( me ) ); // true
console.log( me.isSameAs( copy ) ); // true
console.log( me.isSameAs( another ) ); // false

function MyClass() {

}

MyClass.prototype.isSameAs = function( other ) {

return ( this == other ) ? true : false;

}

me = new MyClass();

copy = me;

another = new MyClass();

console.log( me.isSameAs( me ) ); // true

console.log( me.isSameAs( copy ) ); // true

console.log( me.isSameAs( another ) ); // false

メソッド

非効率的な方法

コンストラクタの中で、プロパティと同じようにthis.[関数名]と無名関数定義によってプロパティを定義可能。

function MyClass( name ) {
this.name = name;
this.age;

this.setAge = function( age ) {
this.age = age;
}
}

var john = new MyClass( "John" );
john.setAge( 30 );

console.log( john.age );

function MyClass( name ) {

this.name = name;

this.age;

this.setAge = function( age ) {

this.age = age;

}

var john = new MyClass( "John" );

john.setAge( 30 );

console.log( john.age );

ただし、thisで指定された対象はインスタンスごとに生成・保持されるため、上記コードではインスタンスの数分のメソッドが生成されてしまう。

prototypeによる方法

JavaScriptにおける全てのオブジェクトはObjectに由来する。すべてのオブジェクトはObject.prototypeからメソッドとプロパティを継承しているが、それらは上書きすることが可能。

インスタンスでメソッドを実行しようとした時にそのメソッドが存在しない場合、そのクラスのprototypeにメソッドを探しに行く。新たに定義したクラスのprototypeプロパティに関数を定義しておくことで、全てのインスタンスが共通のprototype下のメソッドを利用することになる。

prototypeにメソッドを定義する方法の一つは、メソッド単位でクラスのprototypeに登録する方法と、オブジェクトリテラルでまとめて定義する方法がある。

メソッド単位で定義する方法

メソッドごとにクラスのprotottypeに一つずつ記述していく方法。

function MyClass() {
this.name = "";
}

MyClass.prototype.setName = function( name ) {
this.name = name;
}

MyClass.prototype.getName = function() {
return( this.name );
}

function MyClass() {

this.name = "";

}

MyClass.prototype.setName = function( name ) {

this.name = name;

}

MyClass.prototype.getName = function() {

return( this.name );

}

オブジェクトリテラルでまとめて定義する方法

クラスの初期設定時に連想配列で定義する。

この方法は、新規にメソッドを定義する場合に一回のみ使用するもので、後から同じ方法でメソッドを追加しようとしした場合、最初の定義内容がすべてオーバーライドされる。

ただ、メソッド定義を敢えてダイナミックに変更するのでなければ、この方法はメソッドの定義のあり方として明快ともいえる。

function MyClass() {
this.name = "";
}

MyClass.prototype = {
setName: function( name ) {
this.name = name;
}, // ここのカンマに注意

getName: function() {
return( this.name );
}
}

function MyClass() {

this.name = "";

}

MyClass.prototype = {

setName: function( name ) {

this.name = name;

}, // ここのカンマに注意

getName: function() {

return( this.name );

}

メソッド定義の注意点

クラスの生成はコンクトラクタの前後を問わないが、メソッドを実行する段階では、prototypeへのメソッドの登録が実行済みでなければならない(記述位置の前後関係ではなく、関数呼び出しも含めた実体上の実行順序)。

C++やJavaなどコンパイラが全体の宣言・定義をパースする場合は問題ないが、インタプリタ系のJavaScriptは、定義=宣言と実行の順序については厳しい。

継承

子クラスのprototypeに親クラスを登録することで継承でき、親クラスのプロパティ、メソッドも利用可能となる。

ChildClass.prototype = new ParentClass();

1	ChildClass.prototype = new ParentClass();

これは厳密な意味でのクラスの継承というよりは、そのような挙動をするためのprototypeチェーンに組み込んだというところ。

注意点

子クラスのメソッドの定義は必ず親クラスの継承の後で行うこと。継承の際にprototypeの内容が上書きされてしまうため、継承の前にメソッド定義すると子クラスのメソッドが参照されなくなってしまう(下記の例では、”instance.setAge is not a function”とエラーになる)。

子クラスのメソッド定義でオブジェクトリテラルを使ってはいけない。継承の後にこれを行うと、親クラスのメソッドがすべて上書きされてしまう。

// 親クラスとメソッドの定義
function ParentClass() {
this.name = "";
}

ParentClass.prototype = {
setName: function( name ) {
this.name = name;
}
}

// 子クラスの定義
function ChildClass() {
this.age = 0;
}

// クラスの継承
ChildClass.prototype = new ParentClass();


// 【重要】子クラスのメソッド定義は必ず継承の後で
// 【重要】子クラスのメソッド定義は必ずprototypeへの追加で
ChildClass.prototype.setAge = function( age ) {
this.age = age;
}

/*
// 【重要】子クラスのメソッド定義でオブジェクトリテラルは使えない
ChildClass.prototype = {
setAge: function( age ) {
this.age = age;
}
}
*/

// テスト
var instance = new ChildClass();
instance.setName( "John" );
instance.setAge( 30 );

console.log( instance.name );
console.log( instance.age );

// 親クラスとメソッドの定義

function ParentClass() {

this.name = "";

}

ParentClass.prototype = {

setName: function( name ) {

this.name = name;

}

// 子クラスの定義

function ChildClass() {

this.age = 0;

}

// クラスの継承

ChildClass.prototype = new ParentClass();

// 【重要】子クラスのメソッド定義は必ず継承の後で

// 【重要】子クラスのメソッド定義は必ずprototypeへの追加で

ChildClass.prototype.setAge = function( age ) {

this.age = age;

}

// 【重要】子クラスのメソッド定義でオブジェクトリテラルは使えない

ChildClass.prototype = {

setAge: function( age ) {

this.age = age;

}

// テスト

var instance = new ChildClass();

instance.setName( "John" );

instance.setAge( 30 );

console.log( instance.name );

console.log( instance.age );

JavaScript – 変数・スコープ

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

変数のスコープ

グローバルスコープ／ローカルスコープ

var宣言で定義された変数は、その関数内のローカルスコープ
var宣言なしで定義された変数は、どこで定義されてもグローバルスコープ

/*
　グローバル領域での定義
*/
v1 = "global1";
var v2 = "global2";

console.log( "start" );
console.log( "v1=" + v1 );// ->"global1"
console.log( "v2=" + v2 );// ->"global2"


/*
　グローバル変数の関数内での参照
*/
f1();

function f1() {
  console.log( "in f1()" );
  console.log( "v1=" + v1 );// ->"global1"
  console.log( "v2=" + v2 );// ->"global2"
}


/*
　ローカル変数とグローバル変数
　・まずf2()内で同名の変数をローカル定義(var宣言)
　・その実行結果は、同名のグローバル変数に影響を与えない
　・ローカルで定義された変数はグローバル参照できない
*/
f2();
console.log( "after f2()" );
console.log( "v1=" + v1 );// ->"global1"
console.log( "v2=" + v2 );// ->"global2"
//console.log( "v3=" + v3 ); -> error "not defined"

function f2() {
  var v1 = "local1";
  var v2 = "local2";
  var v3 = "local3";
  console.log( "in f2()" );
  console.log( "v1=" + v1 );// ->"local1"
  console.log( "v2=" + v2 );// ->"local2"
  console.log( "v3=" + v3 );// ->"local3"
}


/*
　関数内でのグローバル変数の影響
　・f3()内でvarなしで定義された変数はグローバル
　・既に存在すれば上書きされる(v1, v2)
　・存在していなければ新たにグローバル定義される(v3)
　以下ではf3()が実行され、その結果でグローバル変数が影響を受ける
*/
f3();
console.log( "after f3()" );
console.log( "v1=" + v1 );// ->"local1"
console.log( "v2=" + v2 );// ->"local2"
console.log( "v3=" + v3 );// ->"local3"

function f3() {
  v1 = "local1";
  v2 = "local2";
  v3 = "local3";
  console.log( "in f3()" );
  console.log( "v1=" + v1 );// ->"local1"
  console.log( "v2=" + v2 );// ->"local2"
  console.log( "v3=" + v3 );// ->"local3"
}<br>

　グローバル領域での定義

v1 = "global1";

var v2 = "global2";

console.log( "start" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

　グローバル変数の関数内での参照

f1();

function f1() {

console.log( "in f1()" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

}

　ローカル変数とグローバル変数

　・まずf2()内で同名の変数をローカル定義(var宣言)

　・その実行結果は、同名のグローバル変数に影響を与えない

　・ローカルで定義された変数はグローバル参照できない

f2();

console.log( "after f2()" );

console.log( "v1=" + v1 );// ->"global1"

console.log( "v2=" + v2 );// ->"global2"

//console.log( "v3=" + v3 ); -> error "not defined"

function f2() {

var v1 = "local1";

var v2 = "local2";

var v3 = "local3";

console.log( "in f2()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

}

　関数内でのグローバル変数の影響

　・f3()内でvarなしで定義された変数はグローバル

　・既に存在すれば上書きされる(v1, v2)

　・存在していなければ新たにグローバル定義される(v3)

　以下ではf3()が実行され、その結果でグローバル変数が影響を受ける

f3();

console.log( "after f3()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

function f3() {

v1 = "local1";

v2 = "local2";

v3 = "local3";

console.log( "in f3()" );

console.log( "v1=" + v1 );// ->"local1"

console.log( "v2=" + v2 );// ->"local2"

console.log( "v3=" + v3 );// ->"local3"

}<br>

ブロックスコープ

JavaScriptにはブロックスコープの概念はない。

関数の中のif{}やfor{}など複数のブロックで同じ変数名を用いると、関数内で共通の変数になる。

特に、for文のループカウンタなどの一時的な変数は、不用意にvar宣言なしで用いると、予期しないところでグローバルに影響を与えてしまう可能性がある。

/*
　関数f()を呼び出し、その後の変数をチェック
*/
f();
console.log( "after f()" );
console.log( "v1=" + v1 );// 関数内のvarなしはグローバル
//console.log( "v1=" + v2 ); -> error "not defined"
//console.log( "v1=" + v3 ); -> error "not defined"
console.log( "v4=" + v4 );// for文でもvarなしはグローバル


function f() {
  console.log( "in f()" );
  {
    v1 = "v1 in block";
    var v2 = "v2 in block";
  }
  console.log( "v1=" + v1 );
  console.log( "v2=" + v2 );

  // for文でvar宣言すれば、関数内ローカルにはなる
  for ( var v3 = 0; v3 < 2; v3++ ) {
    console.log( "v3 in for block:" + v3 );
  }
  // ただしブロック内のみのローカルとはならない
  console.log( "v3 out of for block:" + v3 );

  // for文でvarなしで宣言するとグローバル変数になる
  for ( v4 = 0; v4 < 2; v4++ ) {
    console.log( "v4 in for block:" + v4 );
  }
  console.log( "v4 out of for block:" + v4 );
}

　関数f()を呼び出し、その後の変数をチェック

f();

console.log( "after f()" );

console.log( "v1=" + v1 );// 関数内のvarなしはグローバル

//console.log( "v1=" + v2 ); -> error "not defined"

//console.log( "v1=" + v3 ); -> error "not defined"

console.log( "v4=" + v4 );// for文でもvarなしはグローバル

function f() {

console.log( "in f()" );

{

v1 = "v1 in block";

var v2 = "v2 in block";

}

console.log( "v1=" + v1 );

console.log( "v2=" + v2 );

// for文でvar宣言すれば、関数内ローカルにはなる

for ( var v3 = 0; v3 < 2; v3++ ) {

console.log( "v3 in for block:" + v3 );

}

// ただしブロック内のみのローカルとはならない

console.log( "v3 out of for block:" + v3 );

// for文でvarなしで宣言するとグローバル変数になる

for ( v4 = 0; v4 < 2; v4++ ) {

console.log( "v4 in for block:" + v4 );

}

console.log( "v4 out of for block:" + v4 );

}

関数の引数のスコープ

関数の引数はvarなしで宣言するが、スコープは関数内ローカルとなる。

var n = 1;

console.log( f( n ) );
console.log( n );

function f( n ) {
  console.log( n );

  n++;
  console.log( n );

  return n;
}

var n = 1;

console.log( f( n ) );

console.log( n );

function f( n ) {

console.log( n );

n++;

console.log( n );

return n;

}

グローバル領域でn = 1を定義
f( n )で引数を引き取った後、関数内ではn == 1
関数内でnをインクリメントし、n = 2
関数の結果はf( n ) = 2
その後、グローバル領域でn == 1で変化していない

変数操作のタイミング

グローバル変数への操作は、スクリプトがの実行の際に行われる。htmlファイル内であれば、そのファイルが読み込まれた時。別のjsファイルの場合はそれが読み込まれた時。

ローカル変数への操作は、その関数が実行された時。

以下の例では、htmlファイル読み込み時にグローバル変数が定義・参照され、その後ボタンを押すたびにmain()関数が実行され、ローカル変数が定義・参照される。

<input type="button" value="Test" onclick="main()">

<script>
var global = "global";

console.log( global );


function main() {
  var local = "local";

  console.log( global );
  console.log( local );
}
</script>

// 実行結果
// global
// 以下、ボタンを押すごとに
// global
// local

var global = "global";

console.log( global );

function main() {

var local = "local";

console.log( global );

console.log( local );

}

</script>

// 実行結果

// global

// 以下、ボタンを押すごとに

// global

// local

JavaScript – データ型・演算

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

データ型

文字型

リテラル

文字列のリテラルを表すには、対になったダブルクォート(“)かシングルクォート(‘)で囲む。

x = "abcd";
y = 'efgh';

1 2	x = "abcd"; y = 'efgh';

エスケープ文字

\n	NewLine(改行文字)
\f	フォームフィード
\b	バックスペース
\r	キャリッジリターン
\t	タブ
\’/\”	シングルクォート／ダブルクォート
\\	バックスラッシュ
\0nn/\0onn	8進数
\xnn	16進数nnによる文字コード指定(ex. ‘A’=’\x41’)
\unnnn	Unicode文字(ex. ‘あ’=’\u3042’)

数値型

JavaScriptでは、内部的にすべての数値が浮動小数点として扱われる。

整数値の表現

10進数	数字の列で指定。先頭の数字は0(ゼロ)以外。
8進数	先頭が0(ゼロ)である数字の列で指定。
16進数	先頭”0x”に続く0～9, a～fの列で指定、

8進数、16進数では、負の値を表すことはできるが、小数部分はなく、浮動小数点表記は使用できない。

以下の例は、10進、8進、16進の各数値の演算結果をconsole.logに出力する。

function test_var1() {
  var num_dec = 100;
  var num_oct = 0100;
  var num_hex = 0x100;

  console.log( "Numeric Test" );
  console.log( num_dec );
  console.log( num_oct );
  console.log( num_hex );

  console.log( num_dec + num_oct + num_hex);
}

function test_var1() {

var num_dec = 100;

var num_oct = 0100;

var num_hex = 0x100;

console.log( "Numeric Test" );

console.log( num_dec );

console.log( num_oct );

console.log( num_hex );

console.log( num_dec + num_oct + num_hex);

}

浮動小数点数の表現

以下の4つの表現は全て同じ値を表す。

0.0001
.0001
1e-4
1.0e-4

論理型(Boolean)

trueとfalseの二値。なお、比較式において以下の評価はすべてfalseとして解釈される。

0
null
undefined
空の文字列

特殊な値

Null	Null型にはnullという値が1つだけある。typeof演算子ではnull値はnull型ではなくObject型として扱われる。
undefined	未定義の変数を参照した場合に返される。
NaN	不適切な値で、以下の場合に返される。未定義の変数を含む数値演算文字列を含む数値演算ゼロをゼロで除算した場合
Infinity	正の無限大。計算結果が正の数値でオーバーフローした場合や、通常の正の数値をゼロで割った場合に返される。
-Infinity	負の無限大。計算結果が負の数値でオーバーフローした場合や、通常の負の数値をゼロで割った場合に返される。

演算

代入演算子

代入演算子は、文字列／数値のリテラル／変数を変数に割り当てる。

str = "abc";
val = 123;
newStr = str;
newVal = val;

str = "abc";

val = 123;

newStr = str;

newVal = val;

文字列演算子

結合演算子

“+”演算子は2つの文字列を結合。

a = "abc" + 'def';

1	a = "abc" + 'def';

数値演算子

算術演算子

Javaと同じ算術演算子+、-、*、/、%(剰余)、インクリメント／デクリメント演算子++、–がある。

比較演算子

Javaと同じ演算子==、!=、<、>、<=、>=がある。

論理演算子

Javaと同じ演算子、&&、||、!(否定)がある。

複合代入

演算結果を代入する場合、複合代入演算子の短縮表記も可能。

x += y
x <<= y

1 2	x += y x <<= y

条件演算子

==、!=	等しい／等しくない
===、!==	同一である／同一でない

たとえば文字列と数値を比較するとき、==を用いると文字列がNumber型に変換され比較される。

一方===では型変換は行われない状態で、厳密にその内容が等しいかどうかが比較される。

typeof演算子

typeof <em>引数</em>

1	typeof <em>引数</em>

引数の型に応じて、以下の文字列が返される。

数値	number
文字列	string
オブジェクト	object
配列	object
関数	function
論理型	boolean
null	number
NaN	number
undefined	undefined

文字列と数値が混在した演算

以下のルールに従う。

数値同士の演算の結果は数値
二項のうち少なくとも一つが文字列の場合、数値であっても文字列と評価し、結果は文字列
先頭から演算を進め、数値が続く限りは数値演算を続け、一旦文字列演算になると以降は全て文字列演算として評価。

1 + 2	3
“1” + 2	“12”
1 + “2”	“12”
1 + 2 + “3”	“33”
1 + “2” + 3	“123”
“1” + 2 + 3	“123”

JavaScript – 記述位置

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

記述位置と記述方法

HTMLソース内に直接記述
HTMLソース内に関数を直接記述
HTMLからJavaScriptの外部ファイルを読み込み

HTML内への直接記述

HTMLソースに以下のように記述。

<script>
document.write("<p>Javascriptテスト<br>");
document.write("body内直接記述の例</p>");
</script>

document.write("<p>Javascriptテスト<br>");

document.write("body内直接記述の例</p>");

</script>

正確には<script type=”text/javascript”>だが、HTML5ではscript要素のtype属性はデフォルトでJavaScriptなので省略可能。

関数の直接記述

head要素内に以下を記述し、

<script>
<!--
  function test0() {
    document.write("head要素内でのJavaScript実行例");
  }
//-->
</script>

<!--

function test0() {

document.write("head要素内でのJavaScript実行例");

}

//-->

</script>

body要素で以下のように記述することもできる。

<script>
<!--
  test0();
//-->
</script>

<!--

test0();

//-->

</script>

外部ファイルの読み込み

例えば以下の内容のファイルを”test1.js”として準備。

保存する場所は、HTMLファイルと同じディレクトリにある”js”ディレクトリの下とする。

function test1() {
  alert("JavaScriptの外部ファイルテスト");
}

function test1() {

alert("JavaScriptの外部ファイルテスト");

}

headセクションで以下のようにスクリプトファイルを読み込む。

<script src="./js/test1.js"></script>

1	<script src="./js/test1.js"></script>

そして、たとえば以下のように関数を呼び出して実行。

<input type="button" value="JavaScript外部ファイル実行" onclick="test1()">

1	<input type="button" value="JavaScript外部ファイル実行" onclick="test1()">

覚え書き

VistaとSugarSyncでの問題

Windows Vista上のSugerSyncと同期したフォルダ内でこれを実行したところ、alert内の文字が文字化けしてしまった。HTMLソースがUTF-8で、scriptタグの属性に明示的に”charset=UTF-8″を記述しても解消されない。また、スクリプトソースの<!–などのコメントを除き、出力文字を全て半角としても現象は変わらない（そもそもalertダイアログの冒頭に表示される日本語が文字化けしている可能性もある）。

これに対して、デスクトップ上に新たなフォルダをつくり、関係するHTMLファイルとCSSファイルを移動させて実行したところ、以下のような挙動。本現象が発生したVista＋SugarSyncの不安定性に関しては、今しばらく調査が必要。

デスクトップ上に”dev”フォルダを作成し、SugarSyncの動機フォルダから必要なファイルとフォルダを移動
devフォルダ内のhtmlファイルを直接エディタで編集可能
しばらく編集、保存、ブラウザ表示を繰り返していると、htmlファイルにロックがかかる
devフォルダの名前を変更しようとしたところ、ロックがかかる
表示中のブラウザを閉じるとロックがかからんくなったので、フォルダ名をdev→dvに変更
その後ロックがかからなくなる

2015-12-21.