JavaScriptの簡単なメモ
LastUpdate : 08/12/14
JavaScriptについて調べたことやってみたこと、すんごい基本的なことなんかを書いてみます。内容については随時追加予定・・・。
ここに記述したJavaScriptについては、 Firefox2.0.0.16 にて動作確認を一応しています。
ＨＴＭＬのHEADタグ内や、BODYの中（本文の中）や、外部ファイルにJavaScriptを記述し、それをHTML内に読み込ませたりできる様子。
以下、例。
| Javascriptの記述と呼び出しのサンプル |
<html>
<head>
<title>Javascriptのテスト</title>
<script type="text/javascript" src="js_test.js"></script>
<script type="text/javascript">
<!--
function local_msg_write()
{
document.write("<font color=\"orange\">Javascriptにてメッセージを出力しています。</font>")
}
//-->
</script>
</head>
<body>
<!-- bodyの中に埋め込みされたJavascript -->
<script type="text/javascript">
<!--
document.write("Javascriptのテストページですよ。");
//-->
</script>
<!-- headにて定義された関数の呼び出しを行うJavascript -->
<script type="text/javascript">
<!--
write_msg();
//-->
</script>
<!-- このhtmlファイルと同じ階層にあるjs_test.jsというファイルの中にて定義された関数を呼び出すJavascript -->
<script type="text/javascript">
<!--
local_msg_write();
//-->
</script>
</body>
</html>
|
| js_test.js |
/**
* 文字列を出力します。
*/
function write_msg()
{
document.write("<p><font color=\"blue\">こんにちは。外部に保存したJavascriptファイルの関数です。</font></p>");
}
|
実行結果は以下のようになります。
Javscriptをブラウザの設定などでＯＦＦにしていた場合、ユーザに警告メッセージを表示します。
| Javascriptに対応していない場合、警告メッセージを表示します |
<html>
<head>
<title>Javascriptのテスト2</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("JavascriptがOFFだと表示されないよ！");
//-->
</script>
<noscript>
<p>
<font color="orange">javascriptをＯＮにしてください。正しく表示されませんよ？ｗ</font>
</p>
</noscript>
<p>Javascriptのテストのページです。その２</p>
</body>
</html>
|
実行結果
今回は実行結果もみてみたいため、Servletもついてます（本当はperlでCGIを作ろうとしたが、マシンにその環境がインストールされてなかったｗ
サーブレットについては、単純に、どのようなデータが送信されたか調べたかっただけなので、解説は簡単なものだけですｗ
サーブレットについて：
「 index.jsp 」を最初に表示し、そこでボタンを押すと、サーブレットに処理がわたり（この処理を担当するのが「 ServletTest.java 」）、画面が遷移し、「 main.jsp 」画面が表示されます（この画面にサーブレットの実行結果が出力される）。
今回作成したファイルは以下のもの：
index.jsp
ServletTest.java
main.jsp
今回作成したファイルはjspファイルですが、実行結果はHTMLファイルになるため、index.jspの実行結果を載せます。
| index.jspの実行結果 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>テストページです</title>
<script type="text/javascript">
<!--
function post_action()
{
//文字列をセット
document.opt1_form.name_value.value="送信用に文字列をセット"
//年月日を取得
var date = new Date();
document.opt1_form.submit_date.value = date.getFullYear() + '/' + (date.getMonth()+1) + '/' + date.getDate();
//送信を行う。
document.opt1_form.submit();
return false;
}
//-->
</script>
</head>
<body>
テストのページです。
<form method="POST" action="/ServletTest/ServletTest">
<input type="text" name="text1" size="50" value="テストのメッセージですよー">
<input type="hidden" name="send_option1" value="optionですよ">
<br>
<input type="submit" value="送信">
<input type="hidden" name="sample" value="test!!">
<p>
<input type="button" value="Javascriptでsumit" onClick="post_action()">
</p>
</form>
<form name="opt1_form" method="POST" action="/ServletTest/ServletTest" target="_blank">
<input type="hidden" name="name_value" value="">
<input type="hidden" name="submit_date" value="">
</form>
</body>
</html>
|
submitボタンもありつつ、buttonで、javasscriptを呼び出すもの、二つのタイプがあります。両者、使用するformが異なるため、送信されるデータも異なるはずです。
また、buttonでjavascriptを呼び出すほうは、targetに_blankを指定することで、送信のレスポンスを、新しいウインドウに表示するようにしています。
index.jspを表示させると以下のような画面になります。
まず、「送信」ボタンを押下した場合（画面が普通に遷移するパターン）の実行結果は以下のとおりです。
そして、「Javascriptでsubmit」ボタンを押下した場合（javascriptでsubmitし、送信するフォームも上記とは異なる）の実行結果は以下のとおりです。
このように、ウインドウが新しく開き、実行結果がそこへ出力されます。
以上にように、送られるフォームの内容が異なる点も注目すべき点です。