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

(1)

Web

Webプログラミング

プログラミング

プログラミング1

1

JavaScript

(4)

(4章)

2013/7/17(水)

1/24 湘南工科大学講義資料Webプログラミング1(2013) 阿倍湘南工科大学講義資料Webプログラミング1(2013) 阿倍 2/24

講義計画

日時

講義内容

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 (

7/17 (水

水

水)

)

JavaScript

(4) (4

(4) (4章

(4) (4

章

章)

)

7/24 (水)

レポート出題

7/31 (水)

XML (5章)、

レポート提出

成績評価

成績評価は以下の方針とします。

演習への取り組み状況(毎回)

⇒

50%

レポート内容

⇒

50%

※出席3分の2以上

(

(出席

出席

出席10

10回

10

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¥

(2)

(

(演習

演習

演習1)Date

1)Date

1)Dateオブジェクト

1)Date

オブジェクト

5/24 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

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

</script> </body> </html>

(

(演習

演習

演習1)

1)

1)結果

結果

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からの経過時間をミリ秒で取り出す

(

(演習

演習

演習2)Form

2)Form

2)Formオブジェクト

オブジェクト

オブジェクト(1/2)

(1/2)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja">

<head>

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

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

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

(3)

(

(演習

演習

演習2)Form

2)Form

2)Formオブジェクト

オブジェクト

オブジェクト(2/2)

(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>

(

(演習

演習

演習2)

2)

2)結果

結果

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

により合計金額を計算

(

(演習

演習

演習2)

2)

2)解説

解説

解説(1)

(1)

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

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

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

(

(演習

演習

演習2)

2)

2)解説

解説

解説(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)チェックを外す

⇒

減算

(4)

Form

Formオブジェクト：解説

オブジェクト：解説

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 文字オブジェクトの名前

(

(演習

演習

演習3)

3)

3)localtion

localtion

localtionオブジェクト

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>

(

(演習

演習

演習3)

3)

3)結果

結果

locationオブジェクト：解説

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

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

プロパティ

値

内容

href 文字表示されているホームページのURL hostname 文字 URLのドメイン名 pathname 文字 URLのドメイン名以降のパス protocol 文字 URLのプロトコル(http:)

メソッド

内容

reload() ホームページを更新する replace() 履歴を残さずに移動する

(5)

(

(演習

演習

演習4)Math

4)Math

4)Mathオブジェクト

4)Math

オブジェクト

オブジェクト(1/2)

(1/2)

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

前略 <title>演習13-4(JavaScript)</title> <script type="text/javascript"> <!--function omikuji(){ vara = Math.random() * 3; a = Math.floor(a); switch (a) { case 0: alert("【大吉！】"); break; case 1: alert("【中吉！】"); break; default: alert("【小吉！】"); } }

(

(演習

演習

演習4)Math

4)Math

4)Mathオブジェクト

オブジェクト

オブジェクト(2/2)

(2/2)

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

//--> </script> </head> <body> <h1> 本日の運勢(おみくじ) </h1> 以下のボタンをクリックして今日の運勢を表示しましょう。<br><br> <button onClick="omikuji()">今日の運勢を占おう</button> </body> </html>

(

(演習

演習

演習4)

4)

4)結果

結果

Math

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までの数値を返す(乱数)

(6)

(

(演習

演習

演習5)

5)

5)setTimeout

5)

setTimeout

setTimeout()

()

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

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

<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>をクリックしてください。

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

Web

Web