前回、eclipseにjavascriptのプロジェクト(の殻)の作成はできたので、実際にhtmlとjsを書いてみて動かしてみる。
最初といえば「Hello, World!」を表示させるのがセオリー(?)ですがそれではつまらないので、ボタンを押したら「Hello, JavaScript!」のメッセージが表示されるように以下のようなhtmlとjsを書いてみた。
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="hello"></div>
<input type="button" value="ボタン" onclick="hello()" />
<script type="text/javascript" src="./test_javascript.js"></script>
</body>
</html>
test_javascript.js
function hello(){
document.getElementById("hello").textContent = "Hello, JavaScipt!";
}
では、実際にhtmlが表示されjsが実行されるか確認してみる。
①htmlを右クリック＞実行＞サーバーで実行 を選択
②サーバー(デフォルトだとlocalhostのやつ?)を選択し、次へボタン押下
③実行したいプロジェクトが右側の”構成済み”に存在することを確認し、完了ボタン押下
④htmlが表示された！のでボタンを押下してみると、、
⑤「Hello, JavaScript!」が表示された！
よって、htmlが表示されjsがちゃんと呼ばれて実行されるところまで確認できた。