プログラミング特別講座2 第1回目 2006/1/30
JavaScriptとは
- ブラウザで実行されるプログラミング言語。
- Javaとう名前が付くが、Javaとは無関係(Javaから派生した言語ではない)。
- ブラウザ上でしか実行できない。
- FlashのActionScriptはJavaScriptの派生物
- HTMLと混在して記述
- オブジェクト指向なプログラミング言語
入力する場所
Javascriptを入力しておく場所は次のいずれかになる。
- ヘッダ部
- ボディ部
- 別ファイル
ヘッダ部に入力
<script type="text/javascript"> ... </script>
ボディ部に入力
<script language="javascript"> ... </script>
JavaScriptによる出力の例
document.write()メソッドを利用する。
<html>
<head>
<title>document.write()</title>
</head>
<body>
<h1>document.write()のテスト</h1>
<script language="javascript">
document.write("Hello, JavaScript<br>");
document.write("出力のテストです。");
msg = "<br>変数に代入された文字列です。";
document.write(msg + "<br>");
document.write("変数msgの文字列の長さは" + msg.length + "です。<br>");
</script>
</body>
</html>
JavaScriptによる時間の取得
Javaと同様にDateオブジェクトを作り、メソッドを使って西暦年などをを取得できる。
次のリストは現在時間を取得し、表示、時刻によるメッセージを表示、背景色を変更するものです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>JavaScriptで時間取得</title>
<script type="text/javascript">
// 日付を取得
d = new Date(); // 日付オブジェクトの作成
Y = d.getFullYear(); // 4桁の西暦年を取得
M = d.getMonth() + 1; // 月数を取得
D = d.getDate(); // 日にちを取得
Y = d.getDay(); // 曜日を取得
H = d.getHours(); // 時数を取得
mm = d.getMinutes(); // 分数を取得
yobi = new Array("日", "月", "火", "水", "木", "金", "土");
// Helloメッセージの表示
function dspDate(){
msg = Y + "年" + M + "月" + D + "日(" + yobi[Y] + "曜日)";
document.write("今日は" + msg + "です。<br>");
msg = H + "時" + mm + "分"; document.write("現在" + msg);
}
// 時間帯によってメッセージを変える
function dspMsg(){
if(H < 6){
msg = "まだ夜も明けていませんよ!";
} else if(H < 11){
msg = "おはようございます。";
} else if(H <= 16) {
msg = "こんにちは";
} else {
msg = "こんばんは";
}
document.write(msg);
}
// 時間によって背景色を変化させる
function chBgColor(){
x = Math.floor((H * 60 + mm) / 5.625);
document.bgColor = "#FFFF"+ x.toString(16);
}
</script>
<style type="text/css">
BODY {
font-size : 10pt;
}
</style>
</head>
<body>
<script language="javascript">
chBgColor();
</script>
<h1>JavaScriptで時間取得</h1>
<hr>
<script language="javascript">
document.write(d);
document.write("<hr>");
dspDate();
document.write("<hr>");
dspMsg();
document.write("<hr>");
</script>
</body>
</html>
現在の日付を取得
d = new Date();
2000/01/01の日付に設定
特定の日付のオブジェクトを作るには引数に日付の文字列を指定すればよい。
d = new Date("2000/01/01");
プログラムを関数化する
Javaのメソッド同じように、一つの機能をまとめ、名前を付けたもの。
<html>
<head>
<title>function</title>
<script language="javascript">
// 関数の定義
function enmenseki(r){
return r * r * 3.14159;
}
</script>
</head>
<body>
<h1>functionの例</h1>
<script language="javascript">
document.write("半径10cmの円の面積は");
document.write(enmenseki(10)); // 関数の利用
document.write("平方センチメートルです。");
</script>
</body>
</html>
JavaScriptでフォーム入力
- JavaScriptのプログラムへデータを入力するにはHTMLのフォームを使います。
- 入力を受け取る関数を定義し、onClickイベントの値に指定します。
- 値は文字列として受け取ります。
- eval()関数で文字列を数値に変換します。
- documentオブジェクトのプロパティとして値を取得します。
<html>
<head>
<meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
<title>JavaScript:フォーム</title>
<script type="text/javascript">
// 処理用関数の定義
function shori(){
red = eval(document.fm1.R.value); // 値の取得と数値化
R = red.toString(16); // 16進数の文字列に変換
green = eval(document.fm1.G.value);
G = green.toString(16);
blue = eval(document.fm1.B.value);
B = blue.toString(16);
bgcolor = R + G + B;
document.bgColor = '#' + bgcolor; // 背景色の設定
document.fm1.outA.value = document.bgColor;
}
</script>
</head>
<body>
<h1>JavaScriptのプログラムへの入力</h1>
<h2>ページの背景色を変更する</h2>
<p>以下のフォームに0〜255まで数値を入力し、変更ボタンをクリックするとページの背景色が変わります。</p>
<form name="fm1">
R<input name="R" type="text"><br>
G<input name="G" type="text"><br>
B<input name="B" type="text"><br>
<input onclick="shori()" value="変更" type="button">
<input value="リセット" type="reset">
<br>
背景色のRGBの値:<input name="outA" type="text">
</form>
</body>
</html>