HTML5で英単語記憶アプリ作成中 No1(CSVファイル読み込み)

まいど！！

今日から、HTML5のアプリを作り始めます。

今日は、とりあえず、CSVファイルを読み込むところまで。

といっても、googleで探して、ソースコードを自分でテストしただけ。

第11回ファイル入出力 | 論理思考とプログラミング 2012秋

↑こちらのソースコードをいただきました。ありがとう！

ソースコードをそのままHTMLにしたファイル
https://www.box.com/s/f58p4uo623i5rh9q48wi

CSVファイル
https://www.box.com/s/3hsjpg1ep2yvezvp5ft1

HTMLファイルとCSVファイルをダウンロードして、HTMLファイルをダブルクリックして、CSVファイルを読み込ませると
表示される。

trタグとtdタグが分かりやすいサイト
テーブル -- ごく簡単なHTMLの説明

以下、ソースコードと自分用の解説

<input id="fileSelector" type="file" multiple="true" />
<select id="encode">
<option value="Shift_JIS">SJIS</option>
<option value="utf-8">UTF-8</option>
</select>
<button onclick="readFile()">内容表示</button>
<table id="tableArea1"></table>
 
<script type="text/javascript">
function printFile(evt) {
  var i, j, html="";
  
  var csv = evt.target.result;
  csv.replace(/\r\n?/g,"\n");  // 改行コードの統一
                               // \nは改行コードのLF
  var lines = csv.split("\n"); // 改行コード単位で、データを分割する
                               // CSVファイルから読み込んだ当初のデータはこんな感じ
                               // 5340026,大阪府,大阪市都島区,網島町\n5340013,大阪府,大阪市都島区,内代町\n5340025,大阪府,大阪市都島区,片町
                               // 扱いにくいので、\nのところで、分割して順番にlines配列に入れる
                               // 3行有ったとして、
                               // 0行目をlines[0]　添付ファイルでは、5340026,大阪府,大阪市都島区,網島町
                               // 1行目をlines[1]　添付ファイルでは、5340013,大阪府,大阪市都島区,内代町
                               // 2行目をlines[2]　添付ファイルでは、5340025,大阪府,大阪市都島区,片町
                               // の配列に入れる

  for (i=0; i<lines.length; i++) {         // lines.lengthとは、linesの配列がいくつあるか？今回は３行あるので、
                                           // 答えは、３
                                           // しかし、配列は0から数えるので、
                                           // for (i=0; i<lines.length; i++)　iは0からスタートして、3の１つ手前までと書く　分かりやすい


    var cells = lines[i].split(",");       // 0行目のデータを,で分割して　cells配列に入れる
                                           // 0行目は、5340026,大阪府,大阪市都島区,網島町
                                           // cells[0] は、5340026
                                           // cells[1] は、大阪府
                                           // cells[2] は、大阪市都島区
                                           // cells[3] は、網島町
                                           // cells.lengthは、4

    html += "<tr>";                        // htmlという、変数に"<tr>"追加　テーブルタグの行を開始

    for (j=0; j<cells.length; j++) {       // cells.lengthは4なので、0から3まで処理
      html += "<td>" + cells[j] + "</td>"; // htmlという、変数に"<td>"追加　テーブルタグの列を書く
                                           // j=0 cells[0]の時、変数htmlは、<tr><td>5340026</td>
                                           // j=1 cells[1]の時、変数htmlは、<tr><td>5340026</td><td>大阪府</td>
                                           // j=2 cells[2]の時、変数htmlは、<tr><td>5340026</td><td>大阪府</td><td>大阪市都島区</td>
                                           // j=3 cells[3]の時、変数htmlは、<tr><td>5340026</td><td>大阪府</td><td>大阪市都島区</td><td>網島町</td>

    }
    html +="</tr>";                        // for (j=0; j<cells.length; j++)が終わったので、変数htmlに"</tr>"を追加して
                                           // <tr>タグを閉じる。
                                           // 変数htmlは、<tr><td>5340026</td><td>大阪府</td><td>大阪市都島区</td><td>網島町</td></tr>
                                           // 1行しかなければ、ここで終わり。
  }
  document.getElementById("tableArea1").innerHTML = html; // id"tableArea1"を変数htmlで上書き？
}
  
function readFile() {
  var reader = new FileReader();
  reader.onload = printFile;
  
  var files = document.getElementById("fileSelector").files;
  reader.readAsText(files[0], document.getElementById("encode").value);
}
</script>