e- ビジネスソフトウェア論 JavaScript 演習③

e-ビジネスソフトウェア論JavaScript演習③山口研究室　修士 2年保科宗淳

Muneaki Hoshina

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

Let’sGGR!

• 過去 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" content="text/html;





</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 」の「色」を「赤」に変更する2011/6/3 e- 　ビジネスソフトウェア論非公式資

料

「 . 」の意味は「～の」

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





</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>");（※青字が文字列、赤字が変数）⇒ 「” ”」と「’ ’」は混在可能（但し「” ’ ” ’」の様な書き方は危険）2011/6/3 e- 　ビジネスソフトウェア論非公式資

料

変数と文字列のつなぎ方

• スタイルプロパティは 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

function addValues() {var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;if (isNaN(num1)) {alert(" 入力Ａは数値ではありません． ");}if (isNaN(num2)) {alert(" 入力Ｂは数値ではありません． ");}var result = parseFloat(num1) + parseFloat(num2);document.getElementById("output").innerHTML = result;

}</script></head>

<body><h1> 入力値の加算 </h1><form>数値を入力してください。 <br /> 入力Ａ： <input type="text" id="num1"

onKeyup="checkValue1()"/><span id="num1_error"></span><br /> 入力Ｂ： <input type="text" id="num2" onKeyup="checkValue2()"/><span id="num2_error"></span><br />

<input type="button" value=" 加算 " onclick="addValues()"/>

</form>加算結果： <div id="output"></div></body></html>


解答例（続き）

3/4 4/4

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";}

}

• ポイント– checkValue1() と checkValue2() の中身はほぼ同じ（入力 A を調べるか入力 B を調べるかの違い）– onKeyup （打たれたキーが戻った時）をトリガーとして

checkValue1() が起動する– <span> は <div> と同類– isNaN() 関数を使い数値かどうかを判定


解説① 入力Ａ： <input type="text" id="num1" onKeyup="checkValue1()"/><span id="num1_error"></span><br />

<head> 要素内 <body> 要素内

function addValues() {var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;if (isNaN(num1)) {alert(" 入力Ａは数値ではありません．");}if (isNaN(num2)) {alert(" 入力Ｂは数値ではありません．");}var result = parseFloat(num1) + parseFloat(num2);document.getElementById("output").innerHTML = result;

}</script></head>

• ポイント– 「加算」ボタンがクリックされると addValues() が起動– 入力 A と入力 B の値を parseFloat()関数で実数化し、 <div> 要素に結果を書きこむ– checkValue() 関数でエラーチェックしてれば addValues() 内の

isNaN() 関数は不要かもしれません


解説② <input type="button" value=" 加算 " onclick="addValues()"/></form>加算結果： <div id="output"></div>

<head> 要素内 <body> 要素内

• 参考： 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

演習問題５• 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を変更する2011/6/3 e- 　ビジネスソフトウェア論非公式資

料

解答例（続き）

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.htmlJavaScript と CSS を別ファイルにした場合には，それらのファイルも添付すること

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

動作確認行ったブラウザ (IE or Firefox)作成した JavaScript の解説HTML ， CSS ， JavaScript を書く上で工夫した点感想

注意課題１と２共に工夫をしなくても合格点は出ますが，工夫がしてある場合には評価します機能性・技術性・デザイン性・工夫した点を評価しますCSS, JavaScriptはできれば別ファイルとして書く方が望ましいです

問い合わせ先• 第１研究室 24-604A • 第２研究室 23-620B

気軽にお越しください♪優しい山口研メンバーが待ってます。

E-mail: [email protected]: @YamLabTA

mailto:[email protected]

Documents

e- ビジネスソフトウェア論 JavaScript 演習③