基金訓練(Webデザイン・プログラミング科)の58日目に行ってまいりました。
58日目は、JavaScriptプログラミングの実習です。
58日目の内容は下記のとおりです。
１．form要素のイベント処理
プログラム例
<script type="text/javascript">
function check (box)
{
var obj = document .getElementById ("img");
obj .src = box .options[box .selectedIndex] .value;
}
</script>
body内
<form>
<img id="img" src="square_1.gif">
<select onChange="check(this)">
<option value="square_1.gif">正面</option>
<option value="square_2.gif">左向き</option>
<option value="square_3.gif">右向き</option>
</select>
</form>
説明
function check (box)
プルダウンメニューのオブジェクトを受け取ります。
obj .src = box .options[box .selectedIndex] .value
プルダウンメニュー(box)の選択項目を配列のデータとして、選択された配列の番号の配列データのvalueの値を、関数objのsrcの値に入れます。
(
配列の番号は、選択項目の上から0,1,2とつきます。ここの例では、正面が0、右向きが1、左向きが2になります。)
<select onChange="check(this)">
プルダウンメニューが選択された時、関数checkを引数カレントオブジェクトで実行します。
(この場合カレントオブジェクトは、プルダウンメニュー)
結果
２．innerHTMLプロパティ
タグの中身を書き換えるのに使います。
プログラム例
<script type="text/javascript">
function disp2()
{
var msg = document .getElementById("msg");
var moji = document .getElementById("moji");
msg .innerHTML = "あなたは、" + moji .value + "と入力しました。";
}
</style>
body内
<input id="moji" type="text" size="30" />
<input type="button" value="表示" onclick="disp2()" />
</form>
<div id="msg">
ここに入力した内容が表示されます。
</div>
説明
msg .innerHTML = "あなたは、" + moji .value + "と入力しました。"
関数msgに入っているタグの中身を＝以降の文字列に書き換えます。
(関数msgにはdiv#msgが入っており、その中身は｢ここに入力した内容が表示されます。｣です。)
結果
３．JavaScriptの標準オブジェクト
Mathオブジェクト
数値計算を行うためのオブジェクト。
プログラム例
<script type="text/javascript">
function rnd(m,n)
{
return Math .floor(Math .random()*(n-m+1))+m;
}
function sai()
{
var n = rnd(1,6);
var obj = document .getElementById("hyouji");
obj .value = n
}
</style>
body内
<form>
<input id="hyouji" type="text" size="1" />
<input type="button" value="さいころ回転" onclick="sai()" />
</form>
説明
return Math .floor(Math .random()*(n-m+1))+m;
Math.random()で0以上1未満の乱数を発生させ、6を掛け、その値をMath.floorで小数点以下の数字を切り捨て、最後に1を足した値を返す。
(結果、1から6までの整数が返される。)
結果
dateオブジェクト
日付を管理するためのオブジェクト。
プログラム例
<script type="text/javascript">
function today()
{
setTimeout("today()",1000);
var obj=document.getElementById("hyouji2");
var t=new Date();
var h=t.getHours();
var m=t.getMinutes();
var s=t.getSeconds();
obj.value=h+":"+m+":"+s;
}
</script>
body内
<body onLoad="today()"
<form>
現在は、
<input id="hyouji2" type="text" size="10" />
です。
</form>
</body>
説明
var t=new Date()
関数 t に、システム時間を入れます。
var h=t.getHours()
関数 h に、関数 t の時を入れます。
var i=t.getHours()
関数 m に、関数 t の分を入れます。
var j=t.getHours()
関数 s に、関数 t の秒を入れます。
結果
stringオブジェクト
文字を扱うためのオブジェクト。
プログラム例
<script type="text/javascript">
var Msg = "sei2の日記にようこそ！！！！！";
function disp3()
{
setTimeOut("disp3()",500);
var obj = document .getElementById("hyouji3");
Msg = Msg.substring(1,Msg .length) + Msg .substring(0,1);
obj .value = Msg;
}
</script>
body内
<body onLoad="disp3()">
<form>
<input id="hyouji3" type="text" size="30" />
</form>
</body>
説明
Msg = Msg.substring(1,Msg .length) + Msg .substring(0,1)
変数Msgに、Msgのもとの値の2文字目から最後の文字までの後ろに、最初の1文字を連結した値を入れます。
Msg.substring(a,b)
文字列(変数Msg)のa番の文字から、b番の前の文字までを取得します。(この時、左の1文字目が0番になります。)
Msg.length
文字列(変数Msg)の文字数を取得します。
結果
ダイアログ
ダイアログを開くメソッド。
実習で使用している教本
