ガレコレ [Garage Collection]
2017年6月1日(木)
[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+'&nbsp;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+'&nbsp;window.'+$key1+': [function]</span><br>';
   
  }else if( $str.indexOf('[object')!=0 ){
   $html += $count+'&nbsp;window.'+$key1+': '+$str+'<br>';
   
  }else{
   $html += '<span style="color:orange;">'+$count+'&nbsp;window.'+$key1+': [object]</span><br>';
   
   for( $key2 in eval('window.'+$key1) ){
    
    try{
     // エラーが発生する可能性のある処理
     $str = ''+window[$key1][$key2];
     
    }catch($exception){
     // エラーが発生した場合の処理
     $html += '<span style="color:red;">&nbsp;&nbsp;&nbsp;&nbsp;.'+$key2+': '+'[specially]</span><br>';
     continue;
    }
    
    if( $key2.indexOf('$')==0 || $key2.indexOf('_')==0 ){
     // 独自変数および独自関数の場合
     continue;
    }
    
    if( $str.indexOf('function')==0 ){
     $html += '<span style="color:yellowgreen;">&nbsp;&nbsp;&nbsp;&nbsp;.'+$key2+': [function]</span><br>';
     
    }else if( $str.indexOf('[object')!=0 ){
     $html += '&nbsp;&nbsp;&nbsp;&nbsp;.'+$key2+': '+$str+'<br>';
     
    }else{
     $html += '<span style="color:orange;">&nbsp;&nbsp;&nbsp;&nbsp;.'+$key2+': [object]</span><br>';
    }
   }
  }
 }
 
 $html += '<hr>';
 
 $html += 'e.g.<br>windows.history: [object]<br>'
 
 for( $key in window.history ){
  $html +=  '&nbsp;&nbsp;&nbsp;&nbsp;.'+$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/ に集約することにした。ボチボチ、移行していくね。
 
お問い合わせ


by Network Communication Note