単位が取れる JavaScript ノート e...•最低限必要なのはの...

e-ビジネスソフトウェア論

JavaScript演習③

山口研究室修士2年

保科宗淳Muneaki Hoshina

e-ビジネスソフトウェア論非公式資料

Let’s

GGR!

• 過去2回の復習– HTMLとCSSとJavaScriptの違い– HTMLについて– プログラムの記述位置– DOM関数の持つ「意味」– 変数と文字列のつなぎ方– スタイル(style)プロパティについて

• 演習1～5の解説• レポート2（課題1&2）について

– 演習1～5がどのように活かせるかのヒント

目次

2011/6/3 e-ビジネスソフトウェア論非公式資料

過去2回の復習

• HTML→Webページの骨格のみを担当。表現力は紙の文書と同程度。

• CSS→Webページのデザインを担当。通常はHTMLと組み合わせて用いる。

• JavaScript→Webページを動的なものにする。通常はHTMLと組み合わせて用いる。


HTMLとCSSとJavaScriptの違い

JavaScript

CSS

JavaScript

CSS

HTML

外部ファイル

• 最低限必要なのは <html> <head> <body>の3要素のみ！

HTMLについて


<html><head></head><body></body></html>

• メイン（肉）は<body>で、<head>はトッピング（レタスとかソース）

プログラムの記述位置


<html><head></head><body></body></html>

・Webページの骨格（テキス

トやボタンの位置）は<body>要素内に記述する

・CSSやJavaScriptといった味付け的な要素は<head>要素内に記述する

<html><head>

<title>JavaScriptの書き方１</title><style type="text/css">body {background-color: #FF9;}</style><script type="text/javascript">alert("Hello, World!");</script>

</head><body>

<h1>JavaScriptの書き方１</h1><p>HTMLファイル内に書く方法</p>

</body></html>


具体例①（外部ファイルを使用しない場合）

骨格は<body>要素内に記述

CSSは<head>要素内に記述

JSは<head>要素内に記述

test1.html

<html><head>

<title>JavaScriptの書き方2</title><link rel="stylesheet" type="text/css" href="test2.css"><script type="text/javascript" src="test2.js"></script>

</head><body>

<h1>JavaScriptの書き方2</h1><p>外部ファイルを使用する方法</p>

</body></html>

body {background-color: #FF9;}


具体例②（外部ファイルを使用する場合）

alert("Hello, World!");

test2.html test2.css

test2.js

レポートでは、CSSやJavaScriptは外部ファイルに書いた方が評価されます！

• 「document.getElementById」ってなんなんでしょう？

⇒今からその意味を解説します

DOM関数の持つ「意味」


<html><head><title>document.getElementById関数</title><meta http-equiv="content-type"

content="text/html; charset=Shift_JIS"><script type="text/javascript"></script>

</head><body onload='test()'>

<h1>document.getElementById関数</h1><div id="divid"></div>

</body></html>


サンプルプログラム

“divid”というidを持つ要素

オブジェクトに操作を加える例

①②

結果

• 「document」というのは、DOM関数が使用されるHTMLファイル全体のことを指します

• 実用上はそのHTMLファイル中の<body>要素の

中身だと解釈して問題ありません


「document」とは「<body>要素の中身」<html><head><title>document.getElementById関数</title><meta http-equiv="content-type"



//--></script>



</body></html>

例1：

document.getElementById("divid").innerHTML = "テスト";

⇒「<body>要素内」の「”divid”というidを持つ要素」の「innerHTML(※)」を「”テスト”」という文字列に置き換える

※ <div id=“divid”>（ここの部分がinnerHTML）</div>

例2：

document.getElementById("divid").style.color = "red";

⇒ 「<body>要素内」の「”divid”というidを持つ要素」の「style」の「色」を「赤」に変更する


「 . 」の意味は「～の」

<html><head><title>document.getElementById関数</title><meta http-equiv="content-type"



//--></script>



</body></html>


サンプルプログラム（再掲）

“divid”というidを持つ要素

オブジェクトに操作を加える例

①②

結果

<html><head>

<title>document.write()関数</title><meta http-equiv="content-type" content="text/html; charset=Shift_JIS"><script type="text/javascript"></script>

</head><body>

</body></html>


document.write()関数

document.write()⇒「<body>要素内」に( )内の値を記述する

例1：

document.write('<p>' + str + '</p>');

（※青字が文字列、赤字が変数）

⇒文字列の間に変数を挟みたい場合は「+」でつなぐ！

例2：

document.write("<p style='color: red; font-size: 200%;'>" + str + "</p>");

（※青字が文字列、赤字が変数）

⇒「” ”」と「’ ’」は混在可能（但し「” ’ ” ’」の様な書き方は危険）


変数と文字列のつなぎ方

• スタイルプロパティはCSSでの記述法（ハイフン記法）とDOM（JavaScript）での記述法（キャメル記法）が異なる

• http://ajax.studynet.jp/dom/style/style-property で色々紹介されています

スタイル(style)プロパティについて


DOMにおけるプロパティ CSSにおけるプロパティ説明

borderStyle border-style ボーダーの線種

borderWidth border-width ボーダーの太さ

fontStyle font-style フォントのスタイル

backgroundColor background-color 背景色

maxHeight max-height 内容領域の最大の高さ

minHeight min-height 内容領域の最小の高さ

http://ajax.studynet.jp/dom/style/style-property



演習1～5の解説

演習問題１

• prompt関数とdocument.write関数を用いて，

ユーザから入力されたテキスト，文字の色，文字のサイズ（%）に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい

18

上記の例をタグで表現すると・・・<p style=‘color:red; font-size:200%;'>Hello, World</p>

ヒント

<html><head><title>演習1</title><script type="text/javascript">

</script>

</head><body></body></html>

• ポイント

– prompt関数でユーザが

入力した値を変数に保存する

– 保存した値をdocument.write関数で<body>要素内に書きこむ

– 文字列と変数をきちんと区別してつなぐ


解答例

演習問題2

• “Hello!”という文字列をユーザが入力した数だけ表示するJavaScriptプログラムを作成しなさい

• 行数を5で割った余りが1の場合には赤色，２の場合には緑色，３の場合には黄色，4の場合には黒，0の場合には青色，さらに，3の倍数の場合には200%の大きさで”Hello!”を表示しなさい

20

<html><head><title>演習2</title><script type="text/javascript">var str = prompt("数値を入力してください．");var num = parseInt(str);for (var i = 0; i < num; i++) {

if(i%5 == 0){var color = 'red';}else if(i%5 == 1){ var color = 'green';}else if(i%5 == 2){ var color = 'yellow';}else if(i%5 == 3){ var color = 'black';}else{var color = 'blue';}if(i%3 == 2){document.write("<p style='color: " + color + "; font-size:200%;'>Hello!</p>");}else{document.write("<p style='color: " + color + ";'>Hello!</p>");}

}</script></head><body></body></html>

• ポイント

– 繰り返し処理にはfor文を用いる

– 繰り返し数の指定は変数でも行えるので、prompt関数で得た値を代入させる

– 「color」という変数を作る

などして、計算量の少ないシンプルなアルゴリズムを目指す


解答例

演習問題3

• div要素にid属性を指定し，JavaScriptプログラムによりdiv要素のCSSプロパティを設定し，以下の長方形を表示するプログラムを作成せよ

22

<div style="position:absolute; top:40; left:40;width:150; height:250; background-color:#0000FF;border: thick solid red;visibility: visible;">

</div>

<body onload=“showRect()”><div id=“rect”></div>

</body>

function showRect() {document.getElementById(“rect”).style.・・・・

}

JavaScript HTMLヒント

<html>

<head>

<title>演習3</title>

<script type="text/javascript">

function showRect(){

document.getElementById("rect").style.position = "absolute";

document.getElementById("rect").style.top = 40;

document.getElementById("rect").style.left = 40;

document.getElementById("rect").style.width = 150;

document.getElementById("rect").style.height = 250;

document.getElementById("rect").style.backgroundColor = "#0000FF";

document.getElementById("rect").style.border = "thick solid red";

document.getElementById("rect").style.visibility = "visible";

}

</script>

<body onLoad="showRect();">

<div id="rect"></div>

</body>

</html>

• ポイント

– DOM関数を使って<div>

要素の中身をいじっているだけです

– スタイルプロパティの記述法がCSSとDOMでは違うので注意しましょう

– 復習の章で説明した内容が理解できていれば特に問題ないかと


解答例

演習問題４

• テキストボックスを２つ作成し，入力値の加算結果をdiv要素に出力せよ

– parseFloat関数を利用すること

–余力があれば，数値かどうかのチェックも行うこと

• isNaN（Not a Number）関数を利用すると，入力値が数値かどうかを判別可能 (数値でない場合にtrueを返す）

演習問題４は提出する必要はありません．

演習問題４

• さらに余力がある人は，テキストボックスの横のdiv要素に以下のメッセージを出力するようにしてみてください– テキストボックスが空の場合には「数値を入力してください」

– テキストボックスが数値以外の場合には「数値ではありません」

– テキストボックスが数値の場合には「ＯＫ」

• ex15.htmlのonkeyupイベントハンドラを用いること

• メッセージは上記のとおりでなくても良い

<html><head><title>演習問題４</title><meta http-equiv="content-type"

content="text/html; charset=Shift_JIS"><script type="text/javascript">function checkValue1() {

var num1 = document.getElementById("num1").value;if (num1 == "") {document.getElementById("num1_error").innerHTML = "数値を入力してください";} else if (isNaN(num1)) {document.getElementById("num1_error").innerHTML = "数値ではありません";} else {document.getElementById("num1_error").innerHTML = "OK";}

}

function checkValue2() {var num2 = document.getElementById("num2").value;if (num2 == "") {document.getElementById("num2_error").innerHTML = "数値を入力してください";} else if (isNaN(num2)) {document.getElementById("num2_error").innerHTML = "数値ではありません";} else {document.getElementById("num2_error").innerHTML = "OK";}

}


解答例

1/4 2/4

• 参考： http://www.tg.rim.or.jp/~hexane/ach/fscs/fscs04.htm• <div>と <span>は文書中での役割をもたない，ただ“範囲を指定する”だけの要素である。したがって，いずれも“ここから～ここまで”の形で使われる

• ここで“文書中での役割をもたない”というのは，たとえば <ul>はくくった範囲に“箇条書きである”という“役割”を与えるが，<div>と <span>は決まった役割を与えない

• <div>と <span>の違いであるが，前者はブロックで，後者はインラインで，スタイルの適用範囲を定める。すなわち，

– 文書中の（改行で区切られた）ある“まとまり”全体にスタイルを適用するのが <div>

– 文章中のある部分にスタイルを適用するのが <span>• 非常に簡単に言ってしまえば，<div> と <span>の違いは，前後に改行を伴うか，伴わないかである

補足：<div>と<span>の違い


http://www.tg.rim.or.jp/~hexane/ach/fscs/fscs04.htm

http://www.tg.rim.or.jp/~hexane/ach/fscs/fscs04.htm

演習問題５• ex18.htmlを元に，男を選択した場合には青色マー

クを女を選択した場合には赤色マークを出力するようにせよ

– ヒント：<div id=“mark” style=“width: 15; height: 3; background-color: blue”>を<div id=“output”>男</div>の前に挿入

演習問題５は提出する必要はありません．

<html>

<head>

<title>演習問題５</title>

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<script type="text/javascript">

function getRadioValue(){var radioForm =

document.getElementById("radio_form");for (var i = 0; i < radioForm.length; i++) {

var radioButton = radioForm.elements[i];if (radioButton.checked) {

document.getElementById("output").innerHTML = radioButton.value;if (radioButton.value == "男") {

document.getElementById("mark").style.backgroundColor = "blue";} else {

document.getElementById("mark").style.backgroundColor = "red";}break;}}

}</script></head>


解答例

1/3 2/3

次へ

<body><h1>演習問題５</h1><form id="radio_form"

onclick="getRadioValue()">あなたの性別を教えて下さい．<br/><input type="radio" name="性別"

value="男" checked="checked" />男<input type="radio" name="性別"

value="女" />女</form><div id="mark" style="width: 15; height:

3; background-color: blue"></div><div id="output">男</div>

</body></html>

• ポイント– ラジオボタンをクリックするとgetRadioValue()が起動する

– 「radioForm」という変数にidが”radio_form”の<form>オブジェクトを格納

– <form>内の要素の数（この場合<input>の数）だけfor文を回す

– もしラジオボタンがチェックされてれば、DOM関数でinnerHTMLやbackgroundColorを変更する


解答例（続き）

3/3

レポート2（課題1&2）について

課題１（基本）

テキストボックスに幅と高さを入力し，背景色をラジオボタンから選択し，ボタンを押すと，div要素に入力した値に応じた矩形が表示されるようにする

ボタンを押すと入力値に応じて矩形が変化

課題１（発展）発展課題（例）

余力がある人は，さらに，表示する矩形の個数や枠の幅や色も指定できるようにしてみましょう．

• 演習3～5の組み合わせでできます

–演習3 → 図形の描き方

–演習4 → 入力フォームの使い方

–演習5 → ラジオボタンの使い方

• 発展版を作る場合は、演習2のfor文の使い方が参考になります（引数を使って…）

課題1のヒント


課題２アンケート項目の内容を整形して画面に出力

1. 入力値のチェック

（空だったらアラートなど）

2. <table>タグを利用して出力

3.チェックボックスの活用

4. リストボックスの活用

発展課題（例）

入力情報を画面に表示

必須

1. テキストボックスとボタンを用いて，div要素に入力内容を整形して表示する

2. onclick以外のイベントハンドラを最低１つは用いること

• 今まで扱ってきた内容を一通りおさらいすればよいかと思います

• オリジナリティが試される問題なので、特にヒントは出しません

⇒Let’s GGR !

課題2のヒント


レポート２

締切6月24日（金）23:59 までにメールを送信

メール宛先 To：[email protected]

メールの件名学籍番号_氏名_JS演習2学籍番号，アンダーバーは必ず半角でお願いします

添付すべきファイルwordファイル(レポート本文)２～３枚程度，ファイル名「学籍番号_氏名_JS演習２.doc」課題1.html，課題2.html JavaScriptとCSSを別ファイルにした場合には，それらのファイルも添付すること

レポート２

レポート本文に書くべき項目

動作確認行ったブラウザ(IE or Firefox)

作成したJavaScriptの解説

HTML，CSS，JavaScriptを書く上で工夫した点感想

注意課題１と２共に工夫をしなくても合格点は出ますが，工夫がしてある場合には評価します

機能性・技術性・デザイン性・工夫した点を評価します

CSS, JavaScriptはできれば別ファイルとして書く方が望ましいです

問い合わせ先

• 第１研究室 24-604A

• 第２研究室 23-620B

気軽にお越しください♪

優しい山口研メンバーが待ってます。

E-mail: [email protected]

Twitter: @YamLabTA

mailto:[email protected]

単位が取れる JavaScript ノート e...•最低限必要なのはの...

Documents

Transcript of 単位が取れる JavaScript ノート e...•最低限必要なのはの...

単位が取れる JavaScript ノート e...•最低限必要なのは の...

Documents

Transcript of 単位が取れる JavaScript ノート e...•最低限必要なのは の...

単位が取れる JavaScript ノート e...•最低限必要なのはの...

Transcript of 単位が取れる JavaScript ノート e...•最低限必要なのはの...