Web データ管理 JavaScript (4) (4 章 ) 2012/1/11( 水 ) 1/22
演習室の 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 講義で使うフォルダ 2/22
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"> <! var now = new Date(); var hh = now.gethours(); var mm = now.getminutes(); ( 演習 1)Date オブジェクト document.write(" ただいま " + hh + " 時 " +mm + " 分です "); if (hh < 7 hh>=20){ document.bgcolor = "#ffffff"; document.fgcolor = "#000000"; } else if (hh < 17){ document.bgcolor = "#0000cc"; document.fgcolor = "#ffff33"; } else { document.bgcolor = "#ffcc66"; document.fgcolor = "#666666"; } //--> </script> </body> </html> 3/22
( 演習 1) 結果 4/22
Date オブジェクトの作成 var 変数名 = new Date(); Date オブジェクトから年月日 時分秒を取り出す メソッド名 処理内容 getfullyear() 年を数値として取り出す ( 例 2011) getmonth() getdate() getday() gethours() getminutes() getseconds() getmilliseconds() gettime() 月を数値として取り出す (0~11) 日を数値として取り出す (0~31) 曜日を数値として取り出す (0~6) 時間を数値として取り出す (0~23) 分を数値として取り出す (0~59) 秒を数値として取り出す (0~59) ミリ秒を数値として取り出す (0~999) Date オブジェクト : 解説 1970 年 1 月 1 日 0:00 からの経過時間をミリ秒で取り出す 5/22
jstest13-1.html の内容を修正し jstest13-2.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-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; ( 演習 2)Form オブジェクト (1/2) 6/22
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(0)"> 夜間照明 (2,000 円 )<br> <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> ( 演習 2)Form オブジェクト (2/2) 7/22
チェックボックスのチェックにより合計金額を計算 ( 演習 2) 結果 8/22
<!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-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; ( 演習 2) 解説 (1) 9/22
function goukei(i){ if(document.f1.elements[i].checked == true){ total = total + a[i]; チェックボックスをクリック } else { total = total - a[i]; (1) チェック 加算 } (2) チェックを外す 減算 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(0)"> 夜間照明 (2,000 円 )<br> <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> ( 演習 2) 解説 (2) 10/22
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 文字オブジェクトの名前 Form オブジェクト : 解説 11/22
jstest13-1.html の内容を修正し jstest13-3.html で保存してください 前略 <title> 演習 13-3(JavaScript)</title> </head> <body> <h1> 湘南工科大のリンク集 </h1> 以下のボタンをクリックすると湘南工科大の各学科のホームページに移動します <br><br> <button onclick="location.href='http://www.shonanit.ac.jp/contents/faculties/technology/mechanical/index.html ' > 機械工学科 </button> <button onclick="location.href='http://www.shonanit.ac.jp/contents/faculties/technology/electronic/index.html ' > 電気電子工学科 </button> <button onclick="location.href=' http://www.shonanit.ac.jp/contents/faculties/technology/information/index.html ' > 情報工学科 </button> <button onclick="location.href='http://www.shonanit.ac.jp/contents/faculties/technology/computer/index.html ' > コンピュータ応用学科 </button> <button onclick="location.href='http://www.shonanit.ac.jp/contents/faculties/technology/design/index.html ' > コンピュータデザイン学科 </button> <button onclick="location.href='http://www.shonanit.ac.jp/contents/faculties/technology/environment/index.html ' > 人間環境学科 </button> </body> </html> ( 演習 3)localtion オブジェクト 12/22
( 演習 3) 結果 13/22
location オブジェクトのプロパティ プロパティ 値 内容 href 文字 表示されているホームページのURL hostname 文字 URLのドメイン名 pathname 文字 URLのドメイン名以降のパス protocol 文字 URLのプロトコル (http:) location オブジェクトのメソッド メソッド reload() replace() 内容 ホームページを更新する 履歴を残さずに移動する location オブジェクト : 解説 14/22
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(" 小吉! "); } } ( 演習 4)Math オブジェクト (1/2) 15/22
jstest13-3.html の内容を修正し jstest13-4.html で保存してください //--> </script> </head> <body> <h1> 本日の運勢 ( おみくじ ) </h1> 以下のボタンをクリックして今日の運勢を表示しましょう <br><br> <button onclick="omikuji()"> 今日の運勢を占おう </button> </body> </html> ( 演習 4)Math オブジェクト (2/2) 16/22
( 演習 4) 結果 17/22
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の大きい方の数値を返す Math オブジェクトのメソッド ( 乱数 ) メソッド 書式 処理内容 random() Math.random() 0から1までの数値を返す ( 乱数 ) Math オブジェクト : 解説 18/22
jstest13-4.html の内容を修正し jstest13-5.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-5(JavaScript)</title> <script type="text/javascript"> <!-- function idou(){ location.href = "jump.html"; } //--> </script> </head> <body onload="settimeout('idou()', 5000)"> <h1> ようこそホームページへ </h1> 5 秒後に自動的にメインページに移動します <br> 移動しない場合は <a href = "jump.html"> こちら </a> をクリックしてください </body> </html> ( 演習 5)setTimeout() 19/22
( 演習 5) 結果 20/22
settimeout() の活用 settimeout( 処理, 時間 ); 処理 : 実行する処理を記述時間 : 実行までの時間をミリ秒で指定 settimeout() の記述例 <body onload= settimeout( idou() ), 5000) > ホームページが表示されてから 5 秒後に関数 idou() を呼び出す settimeout(): 解説 21/22
本日の演習内容について復習してください 演習 内容 作成ファイル 演習 1 Dateオブジェクト jstest13-1.html 演習 2 Formオブジェクト jstest13-2.html 演習 3 locationオブジェクト jstest13-3.html 演習 4 Mathオブジェクト jstest13-4.html 演習 5 settimeout() jstest13-5.html JavaScript(4) まとめ 22/22