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

Size: px

Start display at page:

Download "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"

はなこいまる
5 years ago
Views:

1 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 演習 2 Z: Web プログラミング演習 2 演習 3 Z: Web プログラミング演習 3 演習 4 Z: Web プログラミング演習 4 演習 5 Z: Web プログラミング演習 5 講義で使うフォルダ 3/24 4/24

2 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

3 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

4 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=' ' > 機械工学科 </button> <button onclick="location.href=' ' > 電気電子工学科 </button> <button onclick="location.href=' ' > 情報工学科 </button> <button onclick="location.href=' ' > コンピュータ応用学科 </button> <button onclick="location.href=' ' > コンピュータデザイン学科 </button> <button onclick="location.href=' ' > 人間環境学科 </button> ( 演習 3)localtion オブジェクト湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 14/24 location オブジェクトのプロパティプロパティ値内容 href 文字表示されているホームページのURL hostname 文字 URLのドメイン名 pathname 文字 URLのドメイン名以降のパス protocol 文字 URLのプロトコル ( 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(" 大吉!

5 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

6 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

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

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

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

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