0.5.x/test/type.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/site.css">\r
  11         <link rel="stylesheet" type="text/css" href="../stylesheets/peta.common.css">\r
  12         <link rel="stylesheet" type="text/css" href="../stylesheets/system.css">\r
  13         <!-- InstanceBeginEditable name="doctitle" -->\r
  14         <title>[js]type | pettanR</title>\r
  15         <!-- InstanceEndEditable -->\r
  16         <!-- InstanceBeginEditable name="head" -->\r
  17         <style>\r
  18                 dt { font-weight:bold;}\r
  19                 .type-is-String { color:red;}\r
  20                 .type-is-Number { color:#f6f;}\r
  21                 .type-is-Function { color:green;}\r
  22                 .type-is-Array, .type-is-Object {\r
  23                         color:blue;\r
  24                 }\r
  25                 .type-is-Boolean, .type-is-null, .type-is-undefined {\r
  26                         color:#666;\r
  27                 }\r
  28                 .type-is-HTMLElement {\r
  29                         color:orange;\r
  30                 }\r
  31         </style>\r
  32         <!-- InstanceEndEditable -->\r
  33 </head>\r
  34 \r
  35 <body>\r
  36     <div id="general-content">\r
  37         <div id="outer-wrapper">\r
  38             \r
  39             <div id="header">\r
  40                 <div class="base-content-width" style="position:relative;">\r
  41                     <h1><a href="../index.html">pettanR</a></h1>\r
  42                 <!-- global navi -->\r
  43                     <div id="global-navi">\r
  44                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
  45                     </div>\r
  46                 </div>\r
  47             </div>\r
  48             \r
  49             <div id="inner-wrapper" class="base-content-width">\r
  50                                 <!-- InstanceBeginEditable name="main_content" -->\r
  51 \r
  52                                 <div id="main">\r
  53                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; javascript のための型判定</div>\r
  54                                         <h2>javascript のための型判定</h2>\r
  55                                         <p>以下の表は js によっ書き出されています．Array 型 と  HTMLElement 型 の判定が面倒です．また、NodeList 型が返るか？はブラウザ毎の実装差があるようです．</p>\r
  56                                         <dl id="output" class="dl-table clearfix"></dl>\r
  57                                         <h3>参考記事</h3>\r
  58                                         <p>以下の記事を参考にしました．</p>\r
  59                                         <p>\r
  60                                                 <a href="http://d.hatena.ne.jp/cheesepie/20091122/1258897939" target="_blank">JavaScriptで型判定いろいろ - Cheese Pie</a>\r
  61                                                 このページの型チェック用コードのベースにした記事です．\r
  62                                         </p>\r
  63                                         <p>\r
  64                                                 <a href="http://zombiebook.seesaa.net/article/118457190.html" target="_blank">Javascript:element の判定とそれに関わる諸事: Script雑感</a>\r
  65                                                 isElement の判定の参考にしました．ie5  や ns6 といった古いブラウザでもチェックされていてすばらしいです． \r
  66                                         </p>\r
  67                                         <h3>メモ</h3>\r
  68                                         <p>2012-03-18 file.read() のための DeepCopy を書きたくて、型判定方法について調べる．</p>\r
  69                                 </div>\r
  70                                 <!-- InstanceEndEditable -->\r
  71             </div>\r
  72         </div>\r
  73     </div>\r
  74     \r
  75     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
  76 \r
  77         <div id="footer">\r
  78             <div id="footer-item-container" class="base-content-width clearfix">\r
  79                 <div class="footer-item-wrapper">\r
  80                     <div class="footer-item">\r
  81                         <h2>ぺったんR にようこそ</h2>\r
  82                         <ul>\r
  83                             <li>サンプル</li>\r
  84                             <li>ぺったんRの特徴</li>\r
  85                             <li>沿革</li>\r
  86                         </ul>\r
  87                         <h2>Test</h2>\r
  88                         <ul>\r
  89                             <li><a href="index.html">Test Index</a></li>\r
  90                         </ul>\r
  91                     </div>\r
  92                 </div>\r
  93                 <div class="footer-item-wrapper">\r
  94                     <div class="footer-item">\r
  95                         <h2>ドキュメント</h2>\r
  96                         <ul>\r
  97                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
  98                             <li>絵師向けドキュメント</li>                                                     \r
  99                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 100                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 101                         </ul>\r
 102                     </div>\r
 103                 </div>\r
 104                 <div class="footer-item-wrapper">\r
 105                     <div class="footer-item">\r
 106                         <h2>プロトタイプ</h2>\r
 107                         <ul>\r
 108                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 109                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 110                         </ul>\r
 111                         <h2>Ajax contents</h2>\r
 112                         <ul>\r
 113                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 114                         </ul>\r
 115                     </div>\r
 116                 </div>\r
 117                 <div class="footer-item-wrapper" style="width:170px;">\r
 118                     <div class="footer-item" style="padding-right:0;">\r
 119                         <h2>ぺったんRチーム</h2>\r
 120                         <ul>\r
 121                             <li>わたしたちについて</li>\r
 122                             <li>ミッション</li>\r
 123                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 124                             <li>個人情報保護方針</li>\r
 125                             <li>作品の取り扱い</li>\r
 126                             <li>お問い合わせ</li>\r
 127                         </ul>\r
 128                     </div>\r
 129                 </div>\r
 130             </div>\r
 131             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 132         </div><!-- #EndLibraryItem -->\r
 133         </div>\r
 134         <script type="text/javascript">\r
 135                 var has_server_support = false;\r
 136         </script>\r
 137 <!-- InstanceBeginEditable name="script" -->\r
 138                 <script type="text/javascript">\r
 139 /**\r
 140  * Decision type of variable.\r
 141  * @class Type\r
 142  * @static\r
 143  */\r
 144         var Type = {\r
 145                 isObject : function(v) {\r
 146                         return typeof v === 'object';\r
 147                 },\r
 148                 isFunction : function(v) {\r
 149                         return typeof v === 'function';\r
 150                 },\r
 151                 isArray : function(v) {\r
 152                         return Object.prototype.toString.call(v) === "[object Array]";\r
 153                 },\r
 154                 isBoolean : function(v) {\r
 155                         return typeof v === 'boolean';\r
 156                 },\r
 157                 isString : function(v) {\r
 158                         return typeof v === 'string';\r
 159                 },\r
 160                 isNumber : function(v) {\r
 161                         return typeof v === 'number';\r
 162                 },\r
 163                 isHTMLElement : ( 'HTMLElement' in window ?\r
 164                         function(v){\r
 165                                 return v instanceof HTMLElement\r
 166                         } :\r
 167                         function(v) {\r
 168                                 if( Type.isObject(v) === false ){\r
 169                                         return false;\r
 170                                 }\r
 171                                 var r;\r
 172                                 if(v && v.nodeType === 1){\r
 173                                         try{\r
 174                                                 r = v.cloneNode(false);\r
 175                                         } catch(n) {\r
 176                                                 return false;\r
 177                                         }\r
 178                                         if(r === v) return false;\r
 179                                         try{\r
 180                                                 r.nodeType = 9;\r
 181                                                 return r.nodeType === 1;\r
 182                                         } catch(n) {}\r
 183                                         return true;\r
 184                                 }\r
 185                                 return false;\r
 186                         }\r
 187                 ),\r
 188                 isElementCollection : function(v) {\r
 189                         return (Object.prototype.toString.call(v) === "[object HTMLCollection]");\r
 190                 },\r
 191                 isNull : function(v) {\r
 192                         return v === null;\r
 193                 },\r
 194                 isUndefined : function(v) {\r
 195                         return typeof v === 'undefined';\r
 196                 },\r
 197                 /**\r
 198                  * @method getType\r
 199                  * @param {Any} v The variable\r
 200                  * @return {String} type of the variable\r
 201                  */\r
 202                 getType : function(v) {\r
 203                         if(Type.isNull(v)) {\r
 204                                 return "null";\r
 205                         }\r
 206                         if(Type.isUndefined(v)) {\r
 207                                 return "undefined";\r
 208                         }\r
 209                         if(Type.isHTMLElement(v)) {\r
 210                                 return "HTMLElement";\r
 211                         }\r
 212                         return Object.prototype.toString.call(v).split(" ")[1].replace("]", "");\r
 213                 }\r
 214         };\r
 215 \r
 216         var output = document.getElementById( 'output'),\r
 217                 testNameArray = [ '"abc"', 'true', '100', '[]', '{}', 'function(){}', 'undefined', 'null', 'document.getElementById( "output")', 'document.getElementById("notExist")', 'document.getElementsByTagName("div")', 'document.body.childNodes', 'document.createTextNode( "hello" )'],\r
 218                 testValueArray = [ "abc", true, 100, [], {}, function(){}, undefined, null, output, document.getElementById("notExist"), document.getElementsByTagName("div"), document.body.childNodes, document.createTextNode( "hello" )],\r
 219                 dt, dd, type;\r
 220         for(var i=0, l=testValueArray.length; i<l; ++i){\r
 221                 dt = document.createElement( 'dt');\r
 222                 dd = document.createElement( 'dd');\r
 223                 output.appendChild( dt );\r
 224                 output.appendChild( dd );\r
 225                 type = Type.getType(testValueArray[i]);\r
 226                 dt.appendChild( document.createTextNode( type ));\r
 227                 dt.className = 'type-is-' + type;\r
 228                 dd.appendChild( document.createTextNode( testNameArray[i]));\r
 229         }\r
 230                 </script>\r
 231 \r
 232 <!-- InstanceEndEditable -->\r
 233 </body>\r
 234 <!-- InstanceEnd --></html>\r