Javascript (カレンダー013_Nodeへ移す3(jQuery調べ))
■カレンダーのjavascriptをNodeへ移すためのより道
カレンダーのjavascriptの中で、jQueryを使って、カレンダー内の要素をクリックすると入力画面が出るようにしているけど、nodeで実行した場合、クリックしても反応しない。カレンダーのコードの問題なのか、nodeの問題なのかよくわからないので、簡単なjQueryを試してみる。
まず簡単なhtmlを用意する。
<html>
<body>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<div id="aaa"><p id="aaaid">AAA</p><div><br>
<div id="text-button"><p id="text">Click</p></div>
<script>
document.getElementById("text-button").onclick = function() {
document.getElementById("text").innerHTML = "text onclick";
};
$("#aaa").click(function(){
$("#aaaid").append("bbb")
});
</script>
</body>
</html>
このhtmlをブラウザで開くとAAAとClickの文字が出る。Clickをクリックすると、document.getElementByIdの部分が反応して、「text onclick」の文字に置き換わる。AAAをクリックすると、$("#aaa").clickのjQueryの部分が反応して、「bbb」が文字に追加される（なぜかClickをクリックしても「bbb」が追加されてしまうが）。
これと似たコードと他の検証用のコードをrequestHandlers.jsに組み入れ実行してみる。index.js, router.js, server.jsには特に手を付けない。実行してアクセスした画面が下のもの。
nodeの起動は成功し、localhost:8888へのアクセスもできたが、$ is not definedといったエラーは出ている。組み入れたコードは宣言（<script type="text/javascript" src="jquery-3.5.1.min.js">）を除いており、jQueryの参照がないため出ているよう。ただ、上のhtmlと同じように宣言を入れても、ファイルがないといったエラーが出る。
GET http://localhost:8888/jquery-3.5.1.min.js net::ERR_ABORTED 404 (Not Found)
画面に出たものの挙動を確認すると、Click部分をクリックするとブラウザで確認したとおり、「text onclick」の文字に置き換わる。エラーが出ているjQueryの部分（AAAのクリック）はやはり動作しない。また、画面読み込み時に、console.log($("#aaa").text());は正しくコンソールに表示された。requestHandlers.jsでもrequire('jquery')としてjQueryを読み込んでいるが、こちらは機能しているよう。でも、$("#aaa").click(function()の使い方はできないみたい。
まとめると下記のようになった（下にrequestHandlers.jsのコードを付ける）。
1. Nodeプログラム中の$("(jQueryでのid参照)").textは可能。
2. Nodeプログラム中の$("(jQueryでのid参照)").clickは不可。
3. Nodeプログラム中のdocument.getElementById("(id参照)").onclickは不可。
4. Nodeプログラムへのhtml書き込み、html読み込みの$("(jQueryでのid参照)").clickは不可。
5. Nodeプログラムへのhtml書き込み、html読み込みのdocument.getElementById("(id参照)").onclickは可能。
nodeを使用する際にjQueryを使用するのは一般的でないのかな。もっと別のフレームワークを使えば、今JQueryで対応している入力画面をそのままにnodeへ移動できるかもしれないけど、気力もないので、jQueryを使わず移動できないか試してみる。
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const jquery = require('jquery');
var events = require('events')
var eventEmitter = new events.EventEmitter()
var fs = require('fs');
function start(response, postData) {
body = `
<html>
<body>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<div id="aaa">AAA<div><br>
<div id="text-button"><p id="text">Click</p></div>
<script>
document.getElementById("text-button").onclick = function() {
document.getElementById("text").innerHTML = "text onclick";
console.log('jsdom click');
};
$("#aaa").click(function(){
$("#aaaid").append("bbb")
console.log('jsdom click');
});
</script>
</body>
</html>`;
const dom = new JSDOM(body);
const { document } = dom.window;
const $ = jquery(dom.window);
//jsdom click display
document.onclick=function(e){
console.log('jsdom click display');
};
//jsdom click display ver 2
//=============================上本文の3番===========================
document.getElementById("text-button").onclick = function() {
console.log('jsdom click display ver2');
document.getElementById("text").innerHTML = "text onclick";
};
//jQuery sample display
console.log($("#aaa"));
//=============================上本文の1番===========================
console.log($("#aaa").text());
console.log($("#aaa")[0].id);
console.log($("#aaa").width());
console.log($("#aaa").append('bbbbbbbbbbbbb'));
console.log($("#aaa").text());
//jQuery click display
//=============================上本文の2番===========================
$("#aaa").click(function(){
console.log("jQuery click display");
});
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
eventEmitter.on('click', function () {
console.log('click!')
})
//=============================上本文の4, 5番(html読み込み===========
//上のresponse.writeHeadからの3行と重複するのでコメントをつけたりして入れ替えている。
//fs.readFile('./text.html', 'utf-8' , doReard );
//function doReard(err, data) {
// response.writeHead(200, {'Content-Type': 'text/html'});
// response.write(data);
// response.end();
// }
}
function upload(response, postData) {
}
exports.start = start;
exports.upload = upload;
