情報通信コース
プログラミング
（PartⅡ JavaScript講座）
本演習はプログラミング学習の一環としてjava Script言語に
よるホームページ作成を行うものである．演習を通じて．オ
ブジェクト指向の基本概念を学習すると共に，Java言語の
予習を兼ねる
を兼ねる
2007年12月 （Version
（V i 1
1.0）
0）
1
ビルトインオブジェクト
ビルトインオブジェクトは言語仕様レベルでの文字列や時間等のオブジェクトを指す．
これらのクラスは元々登録されており，活用することでプログラミングが楽になる．
・Arrayオブジェクト （配列を扱うオブジェクト）
・Mathオブジェクト（数値計算を行うオブジェクト）
・Stringオブジェクト（文字列の変数のことです）
g
・Dateオブジェクト（日時を管理するオブジェクト）
・RegExpオブジェクト（正規表現を扱うオブジェクト）
（例 ）
（例1）Mathオブジェクト
オブジ クト
Math オブジェクトは、少し特殊なオブジェクトで、new を使って新しいオブジェクトを作らず
に、そのまま使える．
＜プロパティ（内部変数）＞
＜プ
パテ （内部変数）＞
E : 自然対数の底（2.718）
PI : 円周率
などなど
＜メソッド（関数）＞
ド 関数
abs
: 絶対数の取得
cos
: コサインの取得
log
: 自然対数の取得
max
: ２値を比べの大きい値の取得
min
: ２値を比べの小さい値の取得
random
: 乱数の取得
round
: 四捨五入で整数化
捨 入 整数化
などなど
30
ビルトインオブジェクト
Mathオブジェクト使用例：余弦定理で辺の長さを求める
<script language= JavaScript ><!-f
function
i Yogen(
Y
( s, bb, c ) {
余弦定理の関数
var r, d;
r = Math.sqrt( Math.pow(b, 2) + Math.pow(b, 2) + 2*b*c*Math.cos(s*Math.PI/180) );
d = Math.floor( r*100 + 0.5)/100
少数第2位を四捨五入
return
t
dd;
}
</script>
</head>
<b d >
<body>
<script language= JavaScript ><!-sita = 30.0; b = 10.0; c = 12;
Result = Yogen(sita, b, c);
d
document.write
t it ("頂角θ
( 頂角θ=" + sita
it + ", 辺b=
辺b " + b + ", 辺c=
辺 " + c + "<BR>")
<BR> );
document.write ("の底辺の長さは = " + Result);
</script>
余弦定理
31
ビルトインオブジェクト
（例2）Dateオブジェクト
new演算子とDate()関数にて作成した変数は、Dateオブジェクトになる．プロパティはなく，
用意されているメソッドは以下の通り．
＜メソッド（関数）＞
getDate : 日を返す(1 31)
getDay
: 曜日を返す(0 6)
getHours : 時間を返す(0 23)
getMinutes : 秒を返す(0 59)
getMonth
M h : 月を返す(0 11)
getSeconds:
S
d 秒を返す(0 59)
などなど
Dateオブジェクト使用例1
<body>
<script language= JavaScript ><!—
Dateオブジェクトの生成
now = new Date()
document.write( 今日は + now.getYear() + 年
+ (now.getMonth() + 1) + 月
+ now.getDate() + 日ですね )
</script>
</body>
オブジェクトnowに格納された現在
時刻情報から，年，月，日を呼び
出して表示する
32
ビルトインオブジェクト
Dateオブジェクト使用例2：現在時間を更新しながら表示
<script type= text/javascript >
clockクラスの生成
クラ
成
function
c
clock()
c c () {
現在時間の取得
var now = new Date();
時の取り出し
var h = now.getHours();
分の取り出し
var m = now.getMinutes();
秒の取り出し
var s = now.getSeconds();
g
();
function _disp() {
表示のメソッド
var tm =
+ h;
2桁表示への集約
tm += ((m < 10) ? :0 : : ) + m;
tm += ((
((s < 10)) ? :0 : : ) + s;;
document.disp.time.value = tm;
}
clock.prototype.disp = _disp;
}
</script>
</head>
<body>
表示フォーム
<form name="disp">
p
現在時刻：<input type="text" name="time" size=8>
</form>
<script language="JavaScript">
間欠的な（500msごとの）メソッド呼び出し
setInterval("new clock().disp();",500);
p
</script>
</body>
33
ナビゲータオブジェクト
ナビゲータオブジェクトはブラウザの各部品や情報を制御するオブジェクトである．
（基本動作はHTMLが行い，その高機能化を行うための関数群）
ナ ゲ ションオブジ クトは
ナビゲーションオブジェクトはwindowオブジェクトを基幹として，以下のような階層
オブジ クトを基幹として，以下のような階層
関係が存在する．
window*━┏document━┏Form━━┏Select━━Option
┣Frame
┣Layer
┣Button
┣location
┣Link
┣Checkbox
┗history
┣Image
┣Radio
┣Area
┣
┣Reset
┣
┣Anchor ┣Submit
┗Applet ┣Hidden
┣Password
┣FileUpload
┣Text
┗Textarea
各オブジェクトにはプロパティとメソッドが複数用意されている．
（例） document.fgcolor=“#00FF00”
←プロパティ
document write(“長さ
document.write(
長さ = ” + Result + <BR>); ←メソッド
* windowとFrame（windowと同じメソッドを持つ）だけ接頭を省略できる．
window.document.fgcolor → document.fgcolor
34
ナビゲータオブジェクト
（例1）documentオブジェクト
ドキュメント(ブラウザ)に文字列を書き出す。タグを書き出すこともできるので、
例えば<IMG>タグを書き出してペ ジ上に画像を表示することも可能
例えば<IMG>タグを書き出してページ上に画像を表示することも可能．
documentオブジェクト使用例
<body>
<script language= JavaScript ><!—
ドキュメントの作成を開始します
document.open();
document.write("文字列を書き出します。");
<IMG>タグを書き出してページ上に画
document.write("<img src='../images/img002.gif'>");
像を表示させる
document.close();
ドキュメントの作成を終了する
</script> </script>
</body>
なお，JavaScript特有のいい加減さ（？）で，open()やclose()無しにも動作するこ
とができる．しかしながら度々ブラウザにアクセスするような複雑なプログラムで
はopen()∼close()を習慣づけたほうがエラーを回避できる．
＜参考＞IMGタグの属性
<img border="1" src="../images/img002.gif" width="128" height="128" alt="イラスト2" title="犬">
境界線の太さ
ソース画像*の場所
画像の幅，高さ
*注意…扱える画像はgif, jpeg, png
テキストとしての意味
マウス指示時の説明
35
ナビゲータオブジェクト
（例2）document.imageオブジェクト
document.imageオブジェクトの使用例1（画像の属性変化）
イメ ジオブジェクトを使うと 画像の属性などを変えながら表示することができる
イメージオブジェクトを使うと，画像の属性などを変えながら表示することができる
<script language="JavaScript"><!-function bigImage(imageName,imageFile)
{
document.images[imageName].src=imageFile;
}
// --></script>
</head>
<body>
<img src="sample10_1.jpg" name="bigScr">
<br><br>
<img src="sample10
src= sample10_1.jpg
1 jpg" width=64 height=48
onMouseover="bigImage('bigScr','sample10_1.jpg')">
<img src="sample10_2.jpg" width=64 height=48
onMouseover="bigImage('bigScr','sample10_2.jpg')">
<img src="sample10
src= sample10_3.jpg
3 jpg" width=64 height=48
onMouseover="bigImage('bigScr','sample10_3.jpg')">
</body>
document.images['（画像名）'].src="（変更する画像のファイル名）";
36
ナビゲータオブジェクト
document.imageオブジェクトの使用例2（マウス通過で入れ替わる）
<head>
<title>マウス通過で切り替え</title>
<script language="JavaScript"><!-var count = 0;
var imagefile = new Array("card_ura.gif", "card_omote.gif");
var image = new Array(imagefile.length);
for(count = 0; count < (imagefile.length - 1); count++){
image[count] = new Image();
image[count].src = imagefile[count];
}
function ImageChange(id, kind){
window.document.images[id].src = imagefile[kind];
}
// --></script>
/
p
</head>
<body>
<a href="javascript:"
onMouseOut="ImageChange('img1',
g
g ( g , 0)"
)
onMouseOver="ImageChange('img1', 1)">
<img name="img1" src="card_ura.gif" border="0">
</a>
</body>
y
このような速い動作はキャッシュに読み込むことが効果的になる
37
ナビゲータオブジェクト
document.imageオブジェクトの使用例3（スライドショウ）
<title>マウス通過で切り替え2</title>
<script language="JavaScript"><!-language JavaScript ><!
var count = 0;
var imagefile = new Array("start.jpg", "newyork.jpg", "london.jpg", "yokohama.jpg");
// …以下例2と同じ…
// --></script>
></script>
</head>
<body>
<img src="start.jpg" alt="START" width="150" height="100" name="img1"> <br>
<a href="javascript:"
href javascript:
onMouseOver="ImageChange('img1', 1)"
onMouseOut="ImageChange('img1', 0)">NEW YORK</a>
｜
<a href="javascript:"
href javascript:
onMouseOver="ImageChange('img1', 2)"
onMouseOut="ImageChange('img1', 0)">LONDON</a>
｜
<a href="javascript:"
href javascript:
onMouseOver="ImageChange('img1', 3)"
onMouseOut="ImageChange('img1', 0)">YOKOHAMA</a>
</body>
画像の数が多くなればなるほど，キャッシュの効果が出てくる
38
ナビゲータオブジェクト
（例3）document.formオブジェクト
HTMLタグである<form></form>を高機能化するオブジェクトである．<form>は
ブラウザからサーバへ情報を送ったりする場合に使用されるタグであるが 無
ブラウザからサーバへ情報を送ったりする場合に使用されるタグであるが，無
効な情報などもノーチェックで送るため，サーバの負担増が問題視されている．
document.formオブジェクトはそのような無効情報などを事前にチェックできる．
＜form＞タグの説明
タグ 説明
<form> タグの設定
Action：送信先プログラムのURIを指定する
method：送信の際の転送方法（HTTPメソッド）を指定する
<form>内に書き込む命令タグ （<INPUT>・<SELECT>・ <TEXTAREA>等）
<input type=“text”> テキストの入力欄を作る
<input type=“password”>
type password > パスワ
パスワード形式の入力欄を作る
ド形式の入力欄を作る
<input type=“radio”> ラジオボタンを作る
<input type=“checkbox”> チェックボックスを作る
<input type= submit > 送信ボタンを作る
<input type="reset">
type reset > リセットボタンを作る
<form method="POST" action="cgi-bin/xxx.cgi">
<div>名前：<input type="text" name="NAME"></div>
<div>住所：<input type="text"
type= text name=
name="ADDR"></div>
ADDR ></div>
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>
39
ナビゲータオブジェクト
document.formオブジェクトの使用例
<script type= text/javascript > <!-f
function
ti check()
h k() {
var flag = 0;
// 設定開始（必須にする項目を設定してください）
if(document.form1.field1.value == ) { // 「お名前」の入力をチェック
fl = 11;
flag
}
else if(document.form1.field2.value == ) { // 「パスワード」の入力をチェック
flag = 1;
}
else if(document.form1.field3.value == ) { // 「コメント」の入力をチェック
flag = 1;
}
if( flag ) {
window.alert( 必須項目に未入力がありました ); // 警告ダイアログを表示
return false; // 送信を中止
}
else{
return true; // 送信を実行
}
}
</script>
</head>
40
ナビゲータオブジェクト
document.formオブジェクトの使用例
<body>
<form method= POST action= *****.cgi name= form1 onSubmit= return check() >
お名前：<input type= text name= field1 size= 25 > （必須）
<BR>
パスワード：<input type= password name= field2 size= 25 > （必須）
<BR>
コメント：<textarea name= field3 rows= 3 cols= 25 wrap= off ></textarea> （必須）
<BR> <BR>
<input type= submit value= 送信 >
</form>
</body>
</html>
41
ナビゲータオブジェクト
（例4）frameオブジェクト
HTMLタグである<frameset></frameset>の属性をアクティブに変化させるなど
の高機能化を実現できるオブジェクトである．
の高機能化を実現できるオブジェクトである
＜frame＞タグの説明
<frameset>∼ </frameset>の間に以下の設定を行って使う
・<frame
<f
src= fframe1.htm
1h
name= fframe1
1 > ： URL を指定
・<frameset rows= 50%,* > ： 行の幅をピクセルか％で指定
.* は残り全てを指示している
・<frameset cols= 50%,* > ： 列の幅をピクセルか％で指定
・<frame
<f
bborder>
d > ： 境界線の指定
<head><title>フレーム使用例</title></head>
<frameset rows="100,*">
<frame src="frame_ue.htm"
"
" name="ue">
" "
<frameset cols="150,*">
<frame src="frame_hidari.htm" name="hidari">
<frame src="frame_migi.htm" name="migi">
</frameset>
/
<html><title>frame_ue.html</title></head>
<noframes>
<body bgcolor="#FF0000">
このページはフレームを使用しています。
<p><font color="#FFFFFF">frame_ue.htm</font></p>
</noframes>
</body>
</
</frameset>
>
</html>
</html>
注：frameはブラウザごとの独自ルールが強いタグであるため，複雑な使用は避けること
42
ナビゲータオブジェクト
document.frameオブジェクトの使用例
2つのフレームの属性（色）を同時に変化させる
●フレーム分割ページ
<html>
<head>
<title>クリックしたら同時に２つのフレームを入れ替える</title>
<title>クリックしたら同時に２つのフレ
ムを入れ替える</title>
<frameset cols="20%,*">
<frame src="code_left.html">
<frameset rows="50%,*">
<frame src="code
src= code_top.html
top html" name=
name="topPage">
topPage >
<frame src="code_bottom.html" name="bottomPage">
</frameset>
</frameset>
</head>
</html>
<html>
<h d>
<head>
<title>code_top</title>
</head>
<body>
上のフレ ムです
上のフレームです。
</body>
</html>
<html>
<h d>
<head>
<title>code_bottom</title>
</head>
<body>
下のフレ ムです
下のフレームです。
</body>
</html>
43
ナビゲータオブジェクト
●左側のページ(code_left.html)
<html>
<head>
<title>code_left</title>
<script language="JavaScript"><!-function set2Frame(jpURL1,jpURL2)
{
parent.topPage.location.href = jpURL1;
parent.bottomPage.location.href = jpURL2;
}
// --></script>
</head>
<body>
<a href="javaScript:set2Frame('page1.html','page2.html')">ページ１，２</a><br>
<a href="javaScript:set2Frame('page3.html','page4.html')">ページ３，４</a><br>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body bgcolor="cyan">
その１です
</body>
</html>
<html>
<head>
<title></title>
</head>
<body bgcolor= yellow">
その2です
</body>
</html>
<html>
<head>
<title></title>
</head>
<body bgcolor= green">
その3です
</body>
</html>
<html>
<head>
<title></title>
</head>
<body bgcolor= skin">
その4です
</body>
</html>
44
イベントハンドラ
Web閲覧やパソコン操作によって生じるイベントをトリガとしてプログラムの制
御を行う方法．以下のようなイベント種類が存在する．
マウスイベント
マウス操作（クリック、ダブルクリック、マウスダウン、マウスアップ、マウス移動）が行われたときに発生。
キーボードイベント
キ ボ ド操作（キ ダウ
キーボード操作（キーダウン、キープレス、キーアップ）が行われたときに発生。
キ プ
キ
プ）が行われたときに発生
フォームイベント
フォーム上で何らかの操作が行われたときに発生。
ウインドウイベント
ウィンドウが移動・サイズ変更されたときに発生。
ペ ジイベント
ページイベント
フォーム上でオブジェクトの状態が変化したり、フォーカスされたりしたときに発生。
イメージイベント
イメージ（画像）の読み込みが完了したり
イメ
ジ（画像）の読み込みが完了したり、中断または失敗したときに発生。
中断または失敗したときに発生
タイマーイベント
ユーザーが何かをするというのではなく、時間経過に従って或る処理をする場合に使う。
暗黙のイベント
スクリプトや HTML の中で特に定義しなくても、発生するイベント。 HTML の中に書かれたソースで，ペー
ジが読み込まれると自動的に実行されるようなもの．
45
イベントハンドラ
イベントを明示的に呼び出す場合、
①<INPUT type= button onClick= （処理） > のようにタグの属性（attribute）にイベントを記述する
②スクリプトの中で window.onmousemove
window onmousemove = （関数）のようにオブジェクトのプロパティとして記述する
③<SCRIPT for="window" event="onload"> のように、<SCRIPT> タグの event 属性の値として呼び出す
方法がある．
イベントハンドラの使用例1
<FORM name="test1">
<INPUT type="text" sise=5 name="input_data">
<INPUT type="button" value="ここをクリック" onClick="var dat = ''; dat =
document.test1.input_data.value; if (dat == '') alert('何も入っていません！'); else
alert(dat + 'が入力されました。')">
</FORM>
イベントハンドラの使用例2
<A href="javascript: Now = new Date();
alert(Now.toLocaleString());">今何時？</A>
46
割り込み処理
割込みとは、現在実行中のプログラムを一時中断させて、より緊急性の高い他の
プログラムを実行させるための機構である。 割込んだプログラムが終了すると、
中断されていたプ グラムは再開される。
中断されていたプログラムは再開される。
割込み処理は以下のように種類分けできる
種類
割込み名称
説明
プログラム割込み
オーバーフローやゼロ除算など、プログラムでの例外時に発生する
SVC割込み
プログラムが入出力など OS の機能を利用するスーパーバイザコール呼び
出し時に発生する
機械チェック割込み
ハードウェアに異常が発見された場合に発生する
入出力割込み
入出力装置の動作完了時に発生する
タイマー割込み
ある一定時間が経過すると発生する
コンソール割込み
コンソールから何らかのスイッチが押されたときに発生する
が
内部
外部
JavaScriptはシビアな処理時間を必要としない環境で使用されるため，使用でき
る処理は以下の2つのタイマ 割り込みのみである．
る処理は以下の2つのタイマー割り込みのみである
①timerID=setInterval("処理命令",割り込み間隔）
処理命令はタイマー割り込みで実行される命令や関数名
処理命令はタイマ
割り込みで実行される命令や関数名
割り込み間隔は、1/1000秒単位
timerIDは割り込み解除に使う。省略可能
「setTimeout」と違い一度実行すると一定間隔に処理命令を実行し続ける
47
割り込み処理
②timerID=setTimeout("処理命令",割り込み間隔)
内容は「setInterval」と同じだが、実行すると一定間隔で処理命令を１度だけ実行する。
自動的に動くプログラムにするには呼び出された処理命令のなかで「 Ti
自動的に動くプログラムにするには呼び出された処理命令のなかで「setTimeout」を実行
を実行
しなければならないが、連続的に「setTimeout」を実行すると割り込み間隔がずれてしまう
恐れがある。
割り込み処理の使用例
<html>
<head>
<title>割り込み処理</title>
<script language="JavaScript"><!-function tokei() {
dt=new Date();
h=dt
h
dt.getHours();
getHours();
m=dt.getMinutes();
s=dt.getSeconds();
document.title="時刻"+h+":"+m+":"+s;
}
setInterval('tokei()',1000);
// --></script>
</head>
<body>
</body>
</html>
48
リファレンス
＜JavaScript入門編＞
（とほほのJavaScriptリファレンス）
http://www tohoho web com/js/what htm
http://www.tohoho-web.com/js/what.htm
（初心者のためのJavaScript講座）
http://www.pori2.net/js/
（JavaScript入門）
http://plusone.jpn.org/javascript/
（イヌでもわかるJavaScript講座）
http://www.red.oit-net.jp/tatsuya/java/
＜JavaScriptによるオブジェクト指向編＞
（オブジェクト指向）
http://www.atmarkit.co.jp/fdotnet/basics/oop01/oop01_01.html
（JavaScriptによるオブジェクト指向プログラミング）
http://www.morijp.com/masarl/homepage3.nifty.com/masarl/article/js-oop.html
（オブジェクト指向っぽい JavaScript 開発入門）
http://www2.fukuicompu.co.jp/bitspoon/javascript/basic00.html
（クラス生成）
http://chaichan.web.infoseek.co.jp/src/javasc07.htm
2008 copy right Shoji.Yamamoto
50
© Copyright 2024 ExpyDoc
