演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理演習

(1)

Webデータ管理

JavaScript (4) (4章)

(2)

講義で使うフォルダ



演習室のPCのハードディスクには演習で作成したデータは

保管できません。



各PCの「ネットワーク接続」ショートカットからメディア情報セ

ンターのサーバーにアクセスしてください(Zドライブとして使

用できます)。

演習名

使用するフォルダ

演習1

Z:¥Webデータ管理¥20120111¥演習1¥

演習2

Z:¥Webデータ管理¥20120111¥演習2¥

演習3

Z:¥Webデータ管理¥20120111¥演習3¥

演習4

Z:¥Webデータ管理¥20120111¥演習4¥

演習5

Z:¥Webデータ管理¥20120111¥演習5¥

(3)

(演習1)Dateオブジェクト



「jstest12-5.html」の内容を修正し「jstest13-1.html」で保存してください

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>演習13-1(JavaScript)</title> </head> <body> <h1> ホームページへようこそ </h1> このホームページは、時刻に応じて背景色と文字色が変化します。 <br><br> <script type="text/javascript"> <!—

(4)

(5)

Dateオブジェクト：解説



Dateオブジェクトの作成

var 変数名 = new Date();



Dateオブジェクトから年月日、時分秒を取り出す

メソッド名

処理内容

getFullYear()

年を数値として取り出す(例2011)

getMonth()

月を数値として取り出す(0～11)

getDate()

日を数値として取り出す(0～31)

getDay()

曜日を数値として取り出す(0～6)

getHours()

時間を数値として取り出す(0～23)

getMinutes()

分を数値として取り出す(0～59)

getSeconds()

秒を数値として取り出す(0～59)

getMilliseconds()

ミリ秒を数値として取り出す(0～999)

getTime()

1970年1月1日0:00からの経過時間をミリ秒で取り出す

(6)

(演習2)Formオブジェクト(1/2)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>演習13-2(JavaScript)</title> <style type="text/css">

<!--h1{ border:solid 3px #993300; padding:3px; color:#993300; width:400px; } div.st1{ font-size:14pt; font-weight:bold; }

form{ margin-left:20px; } --> </style> <script type="text/javascript"> <!--var total = 4800; var a = new Array(2); a[0] = 2000;

a[1] = 400; a[2] = 500;

(7)

(演習2)Formオブジェクト(2/2)

function goukei(i){

if(document.f1.elements[i].checked == true){ total = total + a[i];

} else {

total = total - a[i]; } document.f1.elements[3].value = total; } //--> </script> </head> <body> <h1>体育館の利用料金</H1>

<div class="st1">基本使用料（2面、4時間） 4,800円</div> <form name="f1">

<input type="checkbox" onClick="goukei(1)">バレーボール用ネット×2面（400円）<br> <input type="checkbox" onClick="goukei(2)">バレーボール×10個（500円）<br><br> 合計金額 <input type="text" size="6" value="4800">円

</form>

</body> </html>

(8)

(演習2)結果

チェックボックスのチェック

により合計金額を計算

(9)

(演習2)解説(1)

<!--h1{ border:solid 3px #993300; padding:3px; color:#993300; width:400px; } div.st1{ font-size:14pt; font-weight:bold; }

form{ margin-left:20px; } --> </style> <script type="text/javascript"> <!--var total = 4800; var a = new Array(2); a[0] = 2000;

a[1] = 400; a[2] = 500;

(10)

(演習2)解説(2)

function goukei(i){

if(document.f1.elements[i].checked == true){ total = total + a[i];

} else {

total = total - a[i]; } document.f1.elements[3].value = total; } //--> </script> </head> <body> <h1>体育館の利用料金</H1>

<div class="st1">基本使用料（2面、4時間） 4,800円</div> <form name="f1">

<input type="checkbox" onClick="goukei(1)">バレーボール用ネット×2面（400円）<br> <input type="checkbox" onClick="goukei(2)">バレーボール×10個（500円）<br><br> 合計金額 <input type="text" size="6" value="4800">円

</form> </body> </html>

チェックボックスをクリック

(1)チェック ⇒ 加算

(2)チェックを外す ⇒ 減算

(11)

Formオブジェクト：解説



Formオブジェクトの指定

document.forms[i]

⇒ <form>タグが登場した順にi = 0,1,2,3…で指定



Formオブジェクトの下位オブジェクトを指定

document.images[i].elements[i]

<form>タグに登場した順(input, button…)



Checkboxオブジェクト

プロパティ

値

指定内容

checked

true/false

チェックの有無

defaultChecked

true/false

チェックの有無の初期値

value

文字

チェックボックスの値

name

文字

オブジェクトの名前

(12)

(演習3)localtionオブジェクト



「jstest13-1.html」の内容を修正し「jstest13-3.html」で保存してください

前略 <title>演習13-3(JavaScript)</title> </head> <body> <h1> 湘南工科大のリンク集 </h1> 以下のボタンをクリックすると湘南工科大の各学科のホームページに移動します。<br><br> <button onClick="location.href='http://www.shonan-it.ac.jp/contents/faculties/technology/mechanical/index.html '“>機械工学科</button> <button onClick="location.href='http://www.shonan-it.ac.jp/contents/faculties/technology/electronic/index.html '“>電気電子工学科</button> <button onClick="location.href='

http://www.shonan-it.ac.jp/contents/faculties/technology/information/index.html '“>情報工学科</button> <button onClick="location.href='http://www.shonan-it.ac.jp/contents/faculties/technology/computer/index.html '“>コンピュータ応用学科</button> <button onClick="location.href='http://www.shonan-it.ac.jp/contents/faculties/technology/design/index.html '“>コンピュータデザイン学科</button> <button onClick="location.href='http://www.shonan-it.ac.jp/contents/faculties/technology/environment/index.html '“>人間環境学科</button> </body> </html>

(13)

(14)

locationオブジェクト：解説



locationオブジェクトのプロパティ



locationオブジェクトのメソッド

プロパティ

値

内容

href

文字

表示されているホームページのURL

hostname

文字

URLのドメイン名

pathname

文字

URLのドメイン名以降のパス

protocol

文字

URLのプロトコル(http:)

メソッド

内容

reload()

ホームページを更新する

replace()

履歴を残さずに移動する

(15)

(演習4)Mathオブジェクト(1/2)



「jstest13-3.html」の内容を修正し「jstest13-4.html」で保存してください

前略

<title>演習13-4(JavaScript)</title>

<script type="text/javascript">

<!--function omikuji(){

var a = Math.random() * 3;

a = Math.floor(a);

switch (a) {

case 0:

alert("【大吉！】");

break;

case 1:

alert("【中吉！】");

break;

default:

alert("【小吉！】");

}

(16)

(演習4)Mathオブジェクト(2/2)



「jstest13-3.html」の内容を修正し「jstest13-4.html」で保存してください

//-->

</script>

</head>

<body>

<h1> 本日の運勢(おみくじ) </h1>

以下のボタンをクリックして今日の運勢を表示しましょう。<br><br>

<button onClick="omikuji()">今日の運勢を占おう</button>

</body>

</html>

(17)

(18)

Mathオブジェクト：解説



Mathオブジェクトのメソッド(数値の処理)



Mathオブジェクトのメソッド(乱数)

メソッド

書式

処理内容

abs()

Math.abs(n)

nの絶対値を返す

floor()

Math.floor(n)

nの切り捨てた整数を返す

ceil()

Math.ceil(n)

nの切り上げた整数を返す

round()

Math.round(n)

nを四捨五入した整数を返す

min()

Math.min(n, m)

nとmの小さい方の数値を返す

max()

Math.max(n, m)

nとmの大きい方の数値を返す

メソッド

書式

処理内容

random()

Math.random()

0から1までの数値を返す(乱数)

(19)

(演習5)setTimeout()



「jstest13-4.html」の内容を修正し「jstest13-5.html」で保存してください

<title>演習13-5(JavaScript)</title> <script type="text/javascript">  </script> </head> <body onLoad="setTimeout('idou()', 5000)"> <h1> ようこそホームページへ </h1> 5秒後に自動的にメインページに移動します。<br>

移動しない場合は<a href = "jump.html">こちら</a>をクリックしてください。