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のフレームワークを使えばもっと高度なものがつくれると思うけど、また機会があれば。