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