前回の板書 とその簡単な解説

• JavaScriptでは、（名前のない）関数を作って、 それを括弧の中に（つまり上位の関数に渡す引数として）書く、 ということが多い。そのときに

    function(...) {   }
  

  と書くのでなく、

    (...) => {     }
  

  と書くと、やや見やすいコードが書ける。（ES6=JavaScript2015 からの機能）

• Expressで生成された app.js本体 と そこから呼び出される、 route/*.js , views/*.jade の関係を、下の図で追いかけよう。

  

  • 変数名は、モジュール（ソースファイルと考えていい）をまたがって （同じ名前であっても）両方で同じものと認識できない。
  • そのため、require<->module.export の関係で同じオブジェクトを モジュール間で共有し、そのオブジェクトを介して データのやりとりを行うことが多い。
  • もう１つの方法は、関数呼出の引数として受け渡りをするやり方だが、 この図ではそれは扱っていない。

  

• Javascriptは、オブジェクト指向言語でもあり、
  右図のように オブジェクト名 . 属性名 という記法で
  　 オブジェクトの属性値にアクセス（参照したり代入したり）できる。

• 前回の内容の概要は下図のとおり
  

今日の解説の要点

formのactionパラメータとinputフィールド

• formでsubmitボタンを押すと、actionパラメータに書かれたURLに 問い合わせが送られる。
• これを今回はformを使わずにjQueryの機能で実現することになる。

モジュール間のデータのやりとり

• ここでは前回使った図を、あらためて描いてみた。
• こちらの図も参考にして下さい。

jQueryを使うには

• jQueryを使うためには２つのことが必要
  1. jQueryを読み込む
     • ダウンロードして、アプリケーションフォルダの public/javascripts の下に置くか、
     • CDNを使うか、いずれかの方法で

     • ページ内に（index.jadeまたはlayout.jadeに）

       script(src=”….”)

     を入れておく

  2. jQueryを起動

     $(()=>{

     })

  この中に行うべきことを書く

アプリケーションフォルダ生成後の変更点

packages.json

• node-devに変える

views/index.jade

• input, button タグ
• idを付与しておく
• data を印字

index.jade (ほぼ全部更新した)

extends layout

block content
  script(src='/lib/jquery-min.js')  //バージョン確認されたし
  script(src='/lib/memo.js')
  input#memo
  button#send
    img(src='/images/send.png')
  #data
    each item in db
      p #{item.memo}

app.js

• nedbを使う準備

以下に追加分だけ載せる

// -- 簡単なデータベース
var nedb=require('nedb')
var db=new nedb({filename:'app.db',
    autoload:true
    })
//db.insert({memo:'あいうえお'})
//db.insert({memo:'かきくけこ'})
//db.insert({memo:'さしすせそ'})
routes.db=db

//-- add の処理

app.use('/add',(req,res,nex)=>{
  //　要求処理
  var data=req.query.note
  db.insert({memo:data})
  console.log(data)
  // 応答生成
  res.contentType('application/json');
  res.send(JSON.stringify({newdata:data}));
})

routes/index.js

• オブジェクト名 router がモジュールとしてexportされる
• これをrequireで読み込んだ別ファイルのプログラムでは、 別の名前だ参照されることもある
  • expressが生成するapp.js では routes という変数がそれ。
• router.db は app.js の中で設定（生成も）されている。

index.js ( ///の箇所が変更箇所)

var express = require('express');
var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {
 　router.db.find({},(err,data)=>{			///
    res.render('index', { xyz: data });		///
  })										///
});

module.exports = router;

lib/memo.js

を新しく作った。

• jQueryを使う典型例である
• .click, .val, .prepend 等はすべて jQueryオブジェクト に関するメソッド
• ` … ` (バッククォート）で囲んだ文字列の中で ${ … } が式展開される。

$(()=>{			//ページ読み込みが終わったら呼ばれる
  $('#send').click((e)=>{     // クリック時の処理
    var data=$('#memo').val()
    $.get('/add',{note:data},(data)=>{  // データを送信
      // サーバからの応答を受信した時の処理
      var x=data.newdata
      //alert("Data Loaded: " + data.newdata);
      $('#output').prepend(`<p>${x}</p>`)
  	})
  })
})