ゴンの気まぐれなるままに
node.js

node.js html内のjsファイルの読み込み

node.js js読み込み

前回はnodejsからcssの読み込みを行ったので、今回はjsファイルの読み込みを行います。

jsの読み込み

jsの読み込みを行う前に、3つの準備をします。

HTMLファイルの作成

test.htmlというHTMLファイルを作ります。

ボタンを押すとalertが動き「test」が表示される単純なものになります。

<html>
<head>
<meta http-equiv="content-type" content="text/html charset=UTF-8">
<title>JS テスト</title>
<script src="./js/test.js"></script>
</head>
<body>
<div class="test">
<p>JSテスト</p>
<input class="test" type="button" value="js test" onclick="test()" />
</div>
</body>
</html>

jsファイルの作成

次に簡単なjsファイルを準備します。

ファイル名は、test.jsとしますが、階層はpublicの直下のjsディレクトリの中に置きます。

function test() {
  alert(‘test’);
}

node.jsのファイル作成

最後にnode.js側の準備をします。

var http = require(‘http’);
var fs = require(‘fs’);

var server = http.createServer();
server.on(‘request’, getJs);
server.listen(8080);
console.log(‘Server running …’);

function getJs(req, res) {
  var url = req.url;
  console.log(url);
  if (‘/’ == url) {
    fs.readFile(‘./js.html’, ‘UTF-8’, function (err, data) {
      res.writeHead(200, {‘Content-Type’: ‘text/html’});
      res.write(data);
      res.end();
    });
  } else if (‘/js/test.js’ == url) {
    fs.readFile(‘./js/test.js’, ‘UTF-8’, function (err, data) {
      res.writeHead(200, {‘Content-Type’: ‘text/plain’});
      res.write(data);
      res.end();
    });
  }
}

前回のCSSを読み込んだファイルを再利用しています。

変更点は、content-typeの部分をtext/cssからtext/plainに変更しただけです。

確認

動作の確認します。

URIはlocalhostの8080ポートでアクセスして確認しています。

jsファイル読み込みテスト

ボタンを押すとアラートが表示されるのを確認できました。

まとめ

node.jsからhtmlとjsファイルの読み込みを行いました。

コード自体は簡単ですが、jsを一つ一つ準備しないといけないのと思うかもしれませんが、その必要はありません。

jsのディレクトリに正規表現なり、指定して通してあげれば、jsの中にどんなjsのファイルを置いても読み込めるようになります。