2017年6月1日(木)
[JavaScript] データ構造 #HTML5&CSS3&JavaScript
[JavaScript] データ構造 #HTML5&CSS3&JavaScript
JavaScriptを深く勉強しようと思い、データ構造を解析してみた。
window配下で2階層、オブジェクト／プロパティ／メソッドを、漏れなく書き出すプログラムを作成。
【ポイント】
・for in構文
in window、in window.historyなどと記述して、オブジェクトが持つすべての値または配列の値に対して、処理を繰り返す。
・eval()関数
数式や文字列をJavaScript構文として実行する。
--
// 第1階層
for( $key1 in window ){}
// 第2階層
for( $key2 in eval('window.'+$key1) ){}
--
・try catch構文
try{}内でエラーが発生した場合、catch($exception){}を実行する。
window[$key1]が文字列に変換できない場合、エラーが発生する。$key1が、external、localStorage、sessionStorageのとき。実は、これらが既存のJavaScriptのルールをぶち壊している。いい意味でも、悪い意味でも。。。
--
try{
// エラーが発生する可能性のある処理
$str = ''+window[$key1];
}catch($exception){
// エラーが発生した場合の処理
}
--
※$exceptionの初期値は、エラーの値。必須で、任意の変数名を指定できる。今回は必要なかったが、try-catch-finallyとthrowで複雑なエラー処理が可能である。
・独自変数および独自関数の除去
独自変数の先頭に$、独自関数の先頭に_を必ず付けている。簡単に場合分けできる。
--
if( $key1.indexOf('$')==0 || $key1.indexOf('_')==0 ){}
--
・[function]および[object]を簡易表示にする。
【気づいた事】
・普段使わないものが結構あるね。
・ブラウザごとに異なり、スマホ独自のものがある。
-- javascript.html --
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
window.onload = _setup;
function _setup(){
$html = '';
$count = 0;
for( $key1 in window ){
$count++;
try{
// エラーが発生する可能性のある処理
$str = ''+window[$key1];
}catch($exception){
// エラーが発生した場合の処理
// $key1=='external' || $key1=='localStorage' || $key1=='sessionStorage'
$html += '<span style="color:red;">'+$count+' window.'+$key1+': '+'[specially]</span><br>';
continue;
}
if( $key1.indexOf('$')==0 || $key1.indexOf('_')==0 ){
// 独自変数および独自関数の場合
$count--;
continue;
}
if( $str.indexOf('function')==0 ){
$html += '<span style="color:yellowgreen;">'+$count+' window.'+$key1+': [function]</span><br>';
}else if( $str.indexOf('[object')!=0 ){
$html += $count+' window.'+$key1+': '+$str+'<br>';
}else{
$html += '<span style="color:orange;">'+$count+' window.'+$key1+': [object]</span><br>';
for( $key2 in eval('window.'+$key1) ){
try{
// エラーが発生する可能性のある処理
$str = ''+window[$key1][$key2];
}catch($exception){
// エラーが発生した場合の処理
$html += '<span style="color:red;"> .'+$key2+': '+'[specially]</span><br>';
continue;
}
if( $key2.indexOf('$')==0 || $key2.indexOf('_')==0 ){
// 独自変数および独自関数の場合
continue;
}
if( $str.indexOf('function')==0 ){
$html += '<span style="color:yellowgreen;"> .'+$key2+': [function]</span><br>';
}else if( $str.indexOf('[object')!=0 ){
$html += ' .'+$key2+': '+$str+'<br>';
}else{
$html += '<span style="color:orange;"> .'+$key2+': [object]</span><br>';
}
}
}
}
$html += '<hr>';
$html += 'e.g.<br>windows.history: [object]<br>'
for( $key in window.history ){
$html += ' .'+$key+': '+window['history'][$key]+'<br>';
}
$target = document.getElementById("memo");
$target.innerHTML = $html;
alert("It's complete!");
}
</script>
<title>JavaScript Data Structures</title>
</head>
<body>
<p>JavaScript Data Structures</p>
<hr>
<p id="memo"></p>
<hr><hr>
<p>presented by Garage Collection</p>
</body>
</html>
--
P.S. プログラミングに関するファイルは、http://neconote.jp/prg/ に集約することにした。ボチボチ、移行していくね。
http://neconote.jp/prg/javascript.html
window配下で2階層、オブジェクト／プロパティ／メソッドを、漏れなく書き出すプログラムを作成。
【ポイント】
・for in構文
in window、in window.historyなどと記述して、オブジェクトが持つすべての値または配列の値に対して、処理を繰り返す。
・eval()関数
数式や文字列をJavaScript構文として実行する。
--
// 第1階層
for( $key1 in window ){}
// 第2階層
for( $key2 in eval('window.'+$key1) ){}
--
・try catch構文
try{}内でエラーが発生した場合、catch($exception){}を実行する。
window[$key1]が文字列に変換できない場合、エラーが発生する。$key1が、external、localStorage、sessionStorageのとき。実は、これらが既存のJavaScriptのルールをぶち壊している。いい意味でも、悪い意味でも。。。
--
try{
// エラーが発生する可能性のある処理
$str = ''+window[$key1];
}catch($exception){
// エラーが発生した場合の処理
}
--
※$exceptionの初期値は、エラーの値。必須で、任意の変数名を指定できる。今回は必要なかったが、try-catch-finallyとthrowで複雑なエラー処理が可能である。
・独自変数および独自関数の除去
独自変数の先頭に$、独自関数の先頭に_を必ず付けている。簡単に場合分けできる。
--
if( $key1.indexOf('$')==0 || $key1.indexOf('_')==0 ){}
--
・[function]および[object]を簡易表示にする。
【気づいた事】
・普段使わないものが結構あるね。
・ブラウザごとに異なり、スマホ独自のものがある。
-- javascript.html --
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
window.onload = _setup;
function _setup(){
$html = '';
$count = 0;
for( $key1 in window ){
$count++;
try{
// エラーが発生する可能性のある処理
$str = ''+window[$key1];
}catch($exception){
// エラーが発生した場合の処理
// $key1=='external' || $key1=='localStorage' || $key1=='sessionStorage'
$html += '<span style="color:red;">'+$count+' window.'+$key1+': '+'[specially]</span><br>';
continue;
}
if( $key1.indexOf('$')==0 || $key1.indexOf('_')==0 ){
// 独自変数および独自関数の場合
$count--;
continue;
}
if( $str.indexOf('function')==0 ){
$html += '<span style="color:yellowgreen;">'+$count+' window.'+$key1+': [function]</span><br>';
}else if( $str.indexOf('[object')!=0 ){
$html += $count+' window.'+$key1+': '+$str+'<br>';
}else{
$html += '<span style="color:orange;">'+$count+' window.'+$key1+': [object]</span><br>';
for( $key2 in eval('window.'+$key1) ){
try{
// エラーが発生する可能性のある処理
$str = ''+window[$key1][$key2];
}catch($exception){
// エラーが発生した場合の処理
$html += '<span style="color:red;"> .'+$key2+': '+'[specially]</span><br>';
continue;
}
if( $key2.indexOf('$')==0 || $key2.indexOf('_')==0 ){
// 独自変数および独自関数の場合
continue;
}
if( $str.indexOf('function')==0 ){
$html += '<span style="color:yellowgreen;"> .'+$key2+': [function]</span><br>';
}else if( $str.indexOf('[object')!=0 ){
$html += ' .'+$key2+': '+$str+'<br>';
}else{
$html += '<span style="color:orange;"> .'+$key2+': [object]</span><br>';
}
}
}
}
$html += '<hr>';
$html += 'e.g.<br>windows.history: [object]<br>'
for( $key in window.history ){
$html += ' .'+$key+': '+window['history'][$key]+'<br>';
}
$target = document.getElementById("memo");
$target.innerHTML = $html;
alert("It's complete!");
}
</script>
<title>JavaScript Data Structures</title>
</head>
<body>
<p>JavaScript Data Structures</p>
<hr>
<p id="memo"></p>
<hr><hr>
<p>presented by Garage Collection</p>
</body>
</html>
--
P.S. プログラミングに関するファイルは、http://neconote.jp/prg/ に集約することにした。ボチボチ、移行していくね。
http://neconote.jp/prg/javascript.html
お問い合わせby Network Communication Note