- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

基金訓練に行ってきました。(58日目)


基金訓練(Webデザイン・プログラミング科)の58日目に行ってまいりました。
58日目は、JavaScriptプログラミングの実習です。

58日目の内容は下記のとおりです。

1.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を引数カレントオブジェクトで実行します。
(この場合カレントオブジェクトは、プルダウンメニュー)

結果

2.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が入っており、その中身は「ここに入力した内容が表示されます。」です。)

結果

3.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)の文字数を取得します。

結果

ダイアログ

ダイアログを開くメソッド。




実習で使用している教本