Javascript (カレンダー021_エラー修正_終)

■エラーを修正する。
前回試験してエラーとなったところ（12、17、19）を修正した。

　12．カレンダーの緑色でない日付をクリックする。
　（何も表示されないと期待していたけど、htmlのソースコードのようなものが表示される）
　→　下のように場合分け（if, else if, else）を修正した。データベースから特定の日付のデータを取得して表示させるけど、データがなかった際には初めてアクセスしたときと同じようにrouteを呼び出していた。そのため、アクセスした際のソースコードが戻り値として出てきたよう。緑色でない日付をクリックしたとき空白となるようにした。

    request.addListener("end", async function() {

       var string="";
       var array=await getdataMysql(postData);

       if(postData.length===0){
          init=1;
          route(handle, pathname, response, postData);
       }else if(array.length===0){
          string=""+"#|||#"+"";
          response.end(string);
       }else {
          postData=array;
          for (i = 0; i < postData.length; i++) {
             string=postData[i].title+"#|||#"+postData[i].Note;
          }
          response.end(string);
       }
    });

　17．テキストエリアに「」、「」と入力し、Saveボタンを押下する。
　（データベースに登録されないと期待していたけど、登録される。）
　→　タイトル、本文のいずれかが空の場合、データベースに登録されないようにした。

　19．テキストエリアに「タイトル入力」、「本文入力」と入力した後、カレンダーの緑色の日付をクリックする（2020.12.1）。
　（「タイトル」「本文」（2020年12月1日分）が表示されると期待していたけど、「本文入力」が残ったままとなる。）
　→　本文の表示にinnerHTMLを使用していたが、この場合、テキストエリアに何かしら入力した後では、日付をクリックしても表示されなくなるよう。valueにすると正しく動いた（下のコードのように修正）。

  'document.getElementsByName(\'diary_body\')[0].innerHTML = result[1];'+

  'document.getElementsByName(\'diary_body\')[0].value = result[1];'+

他にもテキストエリアのサイズやブラウザのコンソール表示など修正し、最終的に下のようにした。
同じ日に何度か登録した場合、一番最後に登録したものがテキストエリアに表示され、コマンドラインには該当する日のすべてのデータが表示されるようにしている。本文の文字数もデータベースに登録されるようにした（コマンドライン上の一番右の数値、ブラウザ上には表示されない）。

最終的なコードと試験データ用のSQLが下のもの。
使い方としては、Node.js, XAMPPをダウンロード（ここではNode.js v12.18.3, XAMPP Version: 7.4.8を使った）。XAMPPからApache, Mysqlを実行し、http://127.0.0.1/phpmyadmin/からデータベース(test), テーブル(diarydb)を準備。コマンドラインからnode index.jsを実行。ブラウザへアクセス（localhost:8888）。で動くと思う。

今回でjavascriptは一区切りにする。javascriptはウェブプログラミングの基本的なものの1つなので触れておいて損はないと思う。ただ、これからどう発展させるかいまいちイメージがつかない。phpなど他の技術と組み合わせるのが一般的なのか？ExpressやAngularなどjavascriptのフレームワークを使えばもっと高度なものがつくれると思うけど、また機会があれば。