Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4) (2 章 ) 5/22 ( 水 ) HTML+CSS (5) (2 章 ) 5/29 ( 水 ) HTML+CSS (6) (2 章 ) 6/5 ( 水 ) HTML+CSS (7) (2 章 ) 日時 講義内容 6/12 ( 水 ) CGI (3 章 ) 6/19 ( 水 ) JavaScript (1) (4 章 ) 6/26 ( 水 ) JavaScript (2) (4 章 ) 7/3 ( 水 ) JavaScript (3) (4 章 ) 7/10 ( 水 ) 休講 7/17 ( 水 ) JavaScript (4) (4 章 ) 7/24 ( 水 ) レポート出題 7/31 ( 水 ) XML (5 章 ) レポート提出 講義計画 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 1/24 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 2/24 成績評価は以下の方針とします 演習への取り組み状況 ( 毎回 ) 50% レポート内容 50% 出席 3 分の2 以上 ( 出席 10 回 ) を単位取得の条件とします ( 出席状況が3 分の2に満たない者のレポートは採点しません ) 出席は 講義回ごとに取ります 成績評価 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web プログラミング 1 20130717 演習 1 演習 2 Z: Web プログラミング 1 20130717 演習 2 演習 3 Z: Web プログラミング 1 20130717 演習 3 演習 4 Z: Web プログラミング 1 20130717 演習 4 演習 5 Z: Web プログラミング 1 20130717 演習 5 講義で使うフォルダ 3/24 4/24
jstest12-5.html の内容を修正し jstest13-1.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 演習 13-1(JavaScript)</title> <h1> ホームページへようこそ </h1> このホームページは 時刻に応じて背景色と文字色が変化します <br><br> 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"; ( 演習 1) 結果 5/24 6/24 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 からの経過時間をミリ秒で取り出す jstest13-1.html の内容を修正し jstest13-2.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <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> var total = 4800; var a = new Array(2); a[0] = 2000; a[1] = 400; a[2] = 500; ( 演習 2)Form オブジェクト (1/2) 7/24 8/24
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; <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> ( 演習 2)Form オブジェクト (2/2) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 9/24 ( 演習 2) 結果 チェックボックスのチェックにより合計金額を計算 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 10/24 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <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> var total = 4800; var a = new Array(2); a[0] = 2000; a[1] = 400; a[2] = 500; ( 演習 2) 解説 (1) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 11/24 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; <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> ( 演習 2) 解説 (2) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 12/24
Form オブジェクトの指定 document.forms[i] <form> タグが登場した順に i = 0,1,2,3 で指定 Form オブジェクトの下位オブジェクトを指定 document.forms[i].elements[j] <form> タグに登場した順 (input, button ) Checkbox オブジェクト プロパティ値指定内容 checked true/false チェックの有無 defaultchecked true/false チェックの有無の初期値 value 文字チェックボックスの値 name 文字オブジェクトの名前 Form オブジェクト : 解説 13/24 jstest13-1.html の内容を修正し jstest13-3.html で保存してください 前略 <title> 演習 13-3(JavaScript)</title> <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> ( 演習 3)localtion オブジェクト 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 14/24 location オブジェクトのプロパティ プロパティ 値 内容 href 文字 表示されているホームページのURL hostname 文字 URLのドメイン名 pathname 文字 URLのドメイン名以降のパス protocol 文字 URLのプロトコル (http:) location オブジェクトのメソッド メソッド reload() replace() 内容ホームページを更新する履歴を残さずに移動する ( 演習 3) 結果 location オブジェクト : 解説 15/24 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 16/24
jstest13-3.html の内容を修正し jstest13-4.html で保存してください 前略 <title> 演習 13-4(JavaScript)</title> 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) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 17/24 jstest13-3.html の内容を修正し jstest13-4.html で保存してください <h1> 本日の運勢 ( おみくじ ) </h1> 以下のボタンをクリックして今日の運勢を表示しましょう <br><br> <button onclick="omikuji()"> 今日の運勢を占おう </button> ( 演習 4)Math オブジェクト (2/2) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 18/24 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 オブジェクトのメソッド ( 乱数 ) ( 演習 4) 結果 メソッド 書式 処理内容 random() Math.random() 0から1までの数値を返す ( 乱数 ) Math オブジェクト : 解説 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 19/24 20/24
jstest13-4.html の内容を修正し jstest13-5.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 演習 13-5(JavaScript)</title> function idou(){ location.href = "jump.html"; <body onload="settimeout('idou()', 5000)"> <h1> ようこそホームページへ </h1> 5 秒後に自動的にメインページに移動します <br> 移動しない場合は <a href = "jump.html"> こちら </a> をクリックしてください ( 演習 5)setTimeout settimeout() ( 演習 5) 結果 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 21/24 22/24 settimeout() の活用 settimeout( 処理, 時間 ); 処理 : 実行する処理を記述時間 : 実行までの時間をミリ秒で指定 settimeout() の記述例 <body onload= settimeout( idou() ), 5000) > ホームページが表示されてから 5 秒後に関数 idou() を呼び出す 本日の演習内容について復習してください 演習 内容 作成ファイル 演習 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 settimeout() (): 解説 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 23/24 JavaScript(4) まとめ 24/24