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