Maverick Project

■HTML5 Top

１．Selectors API

２．File API

３．localStorage

３．イベント

４．クラス属性

５．タグの属性

■Selectors API

Selectors API

より柔軟にDOM要素指定。
querySelector()メソッドを使用すると最初の一要素のみ取得し、querySelectorAll()メソッドを使用すると該当するすべての要素を取得する。
ただし、ID セレクタのみで検索する場合などは、getElementById()を使用したほうが高速らしい。

<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <script src="js/sample.js" charset="UTF-8"></script>
</head>
<body>
   <div id="my1-id">
      <div>
         <div class="my2-cls">aaa</div>
      </div>
   </div>
   <div id="my2-id">
      <div>
         <div class="my2-cls">bbb</div>
      </div>
      <div class="my2-cls">ccc</div>
   </div>
   <div class="my2-cls">ddd</div>
   <div class="my2-cls">eee</div>
</body>
</html>



window.addEventListener('load', function(){

   // > 区切りの場合、親要素の直下にある要素が対象になる
   // > querySelector()の場合最初に検索された要素のみ返す。
   var result = document.querySelector('#my2-id > div.my2-cls');
   console.log(result.innerText);
   
   // ccc
   
   // 半角スペース区切りの場合、親要素の配下にある要素が対象になる
   var result = document.querySelector('#my1-id div[class="my2-cls"]');
   console.log(result.innerText);
   
   // aaa

   // カンマ区切りで複数の条件を指定し、querySelectorAllメソッドを使用して該当するすべての要素を取得
   // なおArray.prototype.slice.call()メソッドを使用してArrayオブジェクトに変換したほうが逆にパフォーマンスが落ちる気がする
   var result = document.querySelectorAll('#my1-id div.my2-cls, #my2-id > div.my2-cls');
   for(var obj of result){
      console.log(obj.innerText);
   }
   
   // aaa
   // ccc

}, false);

リファレンス：MDN

■File API

File API

ローカル端末にあるファイルの読み込みを行う。

<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <script>
      window.addEventListener('load', function(){
         // File API が使用できるかチェックする
         if (!FileReader) {
            alert('File API が使用できません');
            return;
         }   

         // ファイル選択処理
         function handleFileSelect(evt) {
         
            var files = evt.target.files;

            document.querySelector('#list').innerHTML = '';

            for (var file of files) {
         
               // textファイルのみ対象
               if (!file.type.match('text.*')){
                  document.querySelector('#list').innerHTML += file.name + '：対象外。';
                  continue;
               }

               var output = '<strong>' + file.name + '</strong> (' + file.type + ') - ' +
                     file.size + ' bytes - ' +
                     'last modified: ' + file.lastModifiedDate.toLocaleDateString() +
                     '<br>';
                        
               document.querySelector('#list').innerHTML += output;
               
               var reader = new FileReader();

               // 読み込み成功時に呼び出されるイベント設定
               reader.onload = (function(theFile) {
                  // ファイルの内容を出力(行読み込みする場合は改行コードでsplitする)
                  console.log(theFile.target.result);
               });
               // abort時に呼び出されるイベント設定
               reader.onabort = (function(theFile){
                  document.querySelector('#list').innerHTML += theFile.name + '：abortしました。';

               });
               // error時に呼び出されるイベント設定
               reader.onerror = (function(theFile){
                  document.querySelector('#list').innerHTML += theFile.name + '：errorが発生しました。';
               });

               // 文字コードを指定してファイル読み込み
               reader.readAsText(file, 'UTF-8');
            }
         }
         
         // ファイルが選択されると発生するイベントを設定
         document.querySelector('#files').addEventListener('change', handleFileSelect, false);
         
      }, false);
   </script>
   <title>サンプル</title>
</head>
<body>
   <input type="file" id="files" name="files[]" multiple /><p>
   <output id="list"></output>
</body>
</html>

リファレンス：MDN

■localStorage

localStorage

ローカルストレージにkey、value形式でデータを保存できる。
sessionStorageと似ているが、sessionStorage は保存されたデータがセッションが終わると同時に
（ブラウザが閉じられたときに）クリアされるがlocalStorageはクリアされない。
しかし閲覧履歴データを消去(Chromeの場合、「Cookie と他のサイトデータ」)するとクリアされる。

また有効期限を任意に設定できるCokkieに対してlocalStorageには有効期限はない。
さらにCookieの最大容量が4KBであるのに対して、localStorageは5MBとなっている。

<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <script>
      
      window.addEventListener('load', function(){
         // localStorage が使用できるかチェックする
         if (!(localStorage)) {
            alert('localStorage が使用できません');
            return;
         }

         // データ検索
         document.getElementById('cmdSearch').addEventListener('click', function(){
            var txtKey = document.getElementById('txtKey');
            var lblData = document.getElementById('lblData');
            
            var datas = localStorage.getItem(txtKey.value);
            if (datas != null){

               lblData.textContent = txtKey.value + ' : ';

               if (datas.indexOf(',') != -1){
      
                  try{
                     datas = JSON.parse(datas);
                  }catch(e){
                     alert('JSON形式にパースできないため検索できません。');
                     return;
                  }

                  for (var data of Object.values(datas)){
                     lblData.textContent += '[' + data + '], ';
                  }
               }
               else{
                  lblData.textContent += datas;
               }
            }
            else{
               alert('データなし');
            }
         }, false);
         
         // データ保存
         document.getElementById('cmdSave').addEventListener('click', function(){
            var txtKey = document.getElementById('txtKey');
            var txtValue = document.getElementById('txtValue');
            
            if (txtKey.value.length == 0 || txtValue.value.length == 0){
               alert('データを入力してください。');
               return;
            }

            var datas;

            // ,が存在する場合は複数データとみなしてJSON形式にパースする
            if (txtValue.value.indexOf(',') != -1){
               // JSON形式にパースするために配列データ形式に文字列編集する
               datas = '["' + txtValue.value.replace(new RegExp('"', 'g'), '\\"').split(',').join('","') + '"]';

               try{
                  var test = JSON.parse(datas);
               }catch(e){
                  alert('JSON形式にパースできないため保存できません。');
                  return;
               }
            }
            else{
               datas = txtValue.value;
            }

            localStorage.setItem(txtKey.value, datas);
         }, false);

         // データ削除
         document.getElementById('cmdDelete').addEventListener('click', function(){
            var txtKey = document.getElementById('txtKey');
            
            switch (txtKey.value.length){
            case 0:   // 全削除
               localStorage.clear();
               break;
            default:  // 検索対象のみ削除
               localStorage.removeItem(txtKey.value);
               break;
            }
         }, false);

      }, false);
   </script>
   <title>サンプル</title>
</head>
<body>
   <div id="lblData"></div>
   <input type="text" id="txtKey" value="" placeholder="キー"/>
   <input type="text" id="txtValue" value="" size="60" placeholder="値 (複数データを保存する場合はカンマで区切る)"/><p>
   <input type="button" id="cmdDelete" value="削除" />
   <input type="button" id="cmdSave" value="保存" />
   <input type="button" id="cmdSearch" value="検索" />
</body>
</html>

リファレンス：MDN

■イベント

DOMContentLoaded
文書の解析が完了した段階で発生する。スタイルシートや画像、サブフレームの読み込みが終わるのを待たないためloadイベントより早い段階で実行される。
ページが完全に読み込み終わったことを検知する必要がない場合は、DOMContentLoadedイベントを使用すべき。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <script src="js/sample.js" charset="UTF-8"></script>
</head>
<body>
   <a href='aaa.html' id='foo'>リンク</a>
</body>
</html>



window.addEventListener('DOMContentLoaded', function(){
   console.log('解析完了');
}, false);
       
リファレンス：MDN

■クラス属性

classList

classList.toggle()メソッドは引数のクラス名がタグに含まれている場合はクラス属性を削除し、含まれていない場合は追加する。

<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <link rel="stylesheet" type="text/css" href="css/sample.css" charset="UTF-8">
   <script>
      window.addEventListener('load', function(event){
      var obj = document.getElementById('foo_id');
   
      obj.addEventListener('mouseenter', function(){
         obj.classList.toggle('foo_class1');
         obj.classList.toggle('foo_class2');
      }, false);

      obj.addEventListener('mouseleave', function(){
         obj.classList.toggle('foo_class1');
         obj.classList.toggle('foo_class2');
      }, false);

   }, false);
   </script>
</head>
<body>
   <div class='foo_class2' id='foo_id'>あああ
      <div class='foo_class'>えええ</div>
   </div>
   <div class='foo_class'>いいい</div>
</body>
</html>



.foo_class1{
   color:red
}

.foo_class2{
   color:blue
}

■タグの属性

type="text"
HTML5 ではinputタグにいくつか属性が追加されている。
type="text"で使用できる主な属性は以下の通り。
１．autocomplete：入力候補を提示して入力内容を自動補完する。onの場合有効。
２．pattern：正規表現で入力値のパターンチェックを行う。サンプルの場合半角数字のみ入力可能。
３．placeholder：未入力時に初期値を表示する。
４．required：必須入力。
５．list：入力値のリストをコンボボックスで表示する。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post">
   <label for="text_id">データ入力：</label><input type="text" name="データ入力" value="" id="text_id" size="8" maxlength="8" autocomplete="on" pattern="[0-9]+" placeholder="12345678" required list="datalist" />
   <datalist id="datalist">
   <option value="12345678">
   <option value="11111111">
   <option value="99999999">
   </datalist>
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
type="number"
HTML5 ではtype="number"が追加されている。
type="number"で使用できる主な属性は以下の通り。
１．autocomplete：入力候補を提示して入力内容を自動補完する。onの場合有効。
２．list：入力値のリストをコンボボックスで表示する。ただしstep属性を未設定の場合のみ有効になる( Chrome以外のブラウザでの動作は未確認 )。
３．max：入力できる最大値。
４．min：入力できる最小値。
５．required：必須入力。
６．step：ステップ値。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post">
   <label for="number_id">データ入力：</label><input type="number" name="データ入力" value="" id="number_id" autocomplete="on" placeholder="999" required list="datalist" max="999" min="0" step="10" />
   <datalist id="datalist">
   <option value="111">
   <option value="999">
   </datalist>
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
type="range"
HTML5 ではtype="range"が追加されている。
type="range"で使用できる主な属性は以下の通り。
１．autocomplete：入力候補を提示して入力内容を自動補完する。rangeでは意味ないと思う。
２．list：入力値のリストをコンボボックスで表示する。rangeでは意味ないと思う。
３．max：入力できる最大値。
４．min：入力できる最小値。
５．step：ステップ値。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <script>
   function foo(obj){
      var o = document.getElementById("value_id");
      o.textContent = "データ入力：" + obj.value;
   }

   function foo2(){
      var o = document.getElementById("value_id");
      o.textContent = "データ入力：";
   }
   </script>
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post">
   <label id="value_id" for="range_id">データ入力：</label><input type="range" name="データ入力" value="" id="range_id" max="999" min="0" step="10" onchange="foo(this);" />
   <p>

   <input type="reset" value="クリア" onclick="foo2();" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
type="color"
HTML5 ではtype="color"が追加されている。
type="color"で使用できる主な属性は以下の通り。
１．autocomplete：入力候補を提示して入力内容を自動補完する。colorでは意味ないと思う。
２．list：入力値のリストをコンボボックスで表示する。colorでは意味ないと思う。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <script>
   function foo(obj){
      var o = document.getElementById("value_id");
      o.textContent = "データ入力：" + obj.value;
   }
   </script>
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post">
   <label id="value_id" for="color_id">データ入力：</label><input type="color" name="データ入力" value="" id="color_id" onchange="foo(this);" />
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
type="checkbox"
type="checkbox"で使用できる主な属性は以下の通り。
１．required：必須入力。しかし、チェックボックスでの必須入力チェックは通常いずれか一つ以上チェックされているかなので自前でチェックロジック組むことになると思う。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <script>
   function check(){
      var check = false;
      var obj = document.getElementsByName("データ入力");
      for( var o of obj ){
         if( o.checked ){
            check = true;
            break;
         }
      }

      if( !check ){
         alert('いずれかの項目をチェックしてください。');
      }

      return check;
   }
   </script>
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post" onsubmit="return check();" >
   <input type="checkbox" name="データ入力" value="データ１" />データ１
   <input type="checkbox" name="データ入力" value="データ２" />データ２
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
type="radio"
type="radio"で使用できる主な属性は以下の通り。
１．required：必須入力。しかし、ラジオボックスは初期値を設定しておけばいずれかが必ずチェックされるので不要。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post" >
   <input type="radio" name="データ入力" value="データ１" checked="checked" />データ１
   <input type="radio" name="データ入力" value="データ２" />データ２
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
type="file"
type="file"で使用できる主な属性は以下の通り。
１．accept：サーバーに送信可能なファイルタイプ
　　複数指定する場合はカンマ区切りで指定する
　　Chromeの場合絞り込んでも「すべてのファイル」を選択すると結局すべてのファイルが選択できるのでサーバー側でのチェックが必要。
　　"text/*" -> テキスト形式のファイル全般
　　"image/*" -> 画像形式のファイル全般
　　"audio/*" -> mp3、oggなどのオーディオ形式のファイル全般
　　"video/*" -> mp4、movなどのビデオ形式のファイル全般
　　.pngのように指定すると拡張子で指定できる
２．multiple：設定すると複数のファイルを指定できる
３．required：必須入力チェック
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post" >
   <label id="value_id" for="file_id">ファイル選択：</label><input type="file" name="ファイル選択" value="" id="file_id" accept="text/*" multiple required />
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
type="submit"
type="submit"で使用できる主な属性は以下の通り。
１．formaction：送信先URLを指定
２．formenctype：送信するデータ形式
　　　application/x-www-form-urlencodedの場合
　　　　キー1=値1&キー2=値2&... といった感じで&区切りでフォーム項目のデータを送信する。UrlEncodingして送信される。
　　　multipart/form-data
　　　　画像ファイルや添付ファイルなどのバイナリ形式のファイルをサーバーにアップロードする際に使用する
　　　text/plain
　　　　UrlEncodingしないで送信する。
３．formmethod：get/postといった送信方法を指定
４．formnovalidate：入力されたデータのバリデーションチェックを行わない。
５．formtarget：_blank・_self・_parent・_top といった送信するターゲットを指定
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
</head>
<form>
   <label id="value_id" for="file_id">ファイル選択：</label><input type="file" name="ファイル選択" value="" id="file_id" accept="text/*" multiple required />
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信1" id="submit1_id" formaction="xxx.html" formenctype="multipart/form-data" formmethod="post" formnovalidate formtarget="_self" />
   <input type="submit" value="送信2" id="submit2_id" formaction="yyy.html" formenctype="multipart/form-data" formmethod="post" formtarget="_self" />
</form>
</html>
       
type="image"
type="image"で使用できる主な属性は以下の通り。
１．src：ボタンに使用する画像のURL
２．alt：画像の代替テキスト
３．height：画像の高さ
４．width：画像の幅
５．formaction：送信先URLを指定
６．formenctype：送信するデータ形式
　　　application/x-www-form-urlencodedの場合
　　　　キー1=値1&キー2=値2&... といった感じで&区切りでフォーム項目のデータを送信する。UrlEncodingして送信される。
　　　multipart/form-data
　　　　画像ファイルや添付ファイルなどのバイナリ形式のファイルをサーバーにアップロードする際に使用する
　　　text/plain
　　　　UrlEncodingしないで送信する。
７．formmethod：get/postといった送信方法を指定
８．formnovalidate：入力されたデータのバリデーションチェックを行わない。
９．formtarget：_blank・_self・_parent・_top といった送信するターゲットを指定
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
</head>
<form>
   <label for="text_id">データ入力：</label><input type="text" name="データ入力" value="" id="text_id" size="8" maxlength="8" autocomplete="on" pattern="[0-9]+" placeholder="12345678" required list="datalist" />
   <datalist id="datalist">
   <option value="12345678">
   <option value="11111111">
   <option value="99999999">
   </datalist>
   <p>
   
   <input type="reset" value="クリア" />
   <input type="image" value="送信" id="submit_id" src="Image/07.png" alt="入力" height="50px" width="200px" formaction="xxx.html" formenctype="application/x-www-form-urlencoded" formmethod="post" formnovalidate formtarget="_self" />
</form>
</html>
       
autofocus
autofocus を設定すると初期表示時にフォーカスされる。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post">
   <label for="text_id">データ入力：</label><input type="text" name="データ入力" value="" id="text_id" size="8" maxlength="8" autocomplete="on" pattern="[0-9]+" placeholder="12345678" required list="datalist" autofocus />
   <datalist id="datalist">
   <option value="12345678">
   <option value="11111111">
   <option value="99999999">
   </datalist>
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
progress
progress は進捗状況をプログレスバーで表示する。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <script>
      var count = 0;
      
      window.addEventListener('load', function(){
         var countup = function(){
         
            var obj = document.getElementById('progress_id');
            obj.value = count;

            if (count >= 100){
               count = 0;
            }
            else{
               count+=10;
            }
         
            setTimeout(countup, 100);
         }
      
         countup();
      }, false);
   </script>
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post">
   <progress max="100" value="0"  id="progress_id">現在、動画をダウンロード中です。</progress>
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       
meter
meter は進捗状況を基底範囲内の測定値を表す。
<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <script>
      var count = 0;
      
      window.addEventListener('load', function(){
         var countup = function(){
         
            var obj = document.getElementById('progress_id');
            obj.value = count;

            if (count >= 100){
               count = 0;
            }
            else{
               count+=10;
            }
         
            setTimeout(countup, 100);
         }
      
         countup();
      }, false);
   </script>
   <title>サンプル</title>
</head>
<form action="xxx.html" method="post">
   <progress max="100" value="0"  id="progress_id">現在、動画をダウンロード中です。</progress>
   <p>

   <input type="reset" value="クリア" />
   <input type="submit" value="送信" id="submit_id" />
</form>
</html>
       

Top