7.演習3

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とCSSとJavaScriptの違い
HTML
CSS
JavaScript
外部ファイル
CSS
JavaScript
2011/6/3
• HTML
→Webページの骨格のみ
を担当。表現力は紙の文
書と同程度。
• CSS
→Webページのデザイン
を担当。通常はHTMLと
組み合わせて用いる。
• JavaScript
→Webページを動的なも
のにする。通常はHTMLと
組み合わせて用いる。
e-ビジネスソフトウェア論非公式資料
HTMLについて
• 最低限必要なのは <html> <head> <body> の
3要素のみ！
<html>
<head></head>
<body></body>
</html>
2011/6/3
e-ビジネスソフトウェア論非公式資料
プログラムの記述位置
• メイン（肉）は<body>で、<head>はトッピング
（レタスとかソース）
<html>
<head></head>
<body></body>
</html>
2011/6/3
・Webページの骨格（テキス
トやボタンの位置）は
<body>要素内に記述する
・CSSやJavaScriptといった味
付け的な要素は<head>要
素内に記述する
e-ビジネスソフトウェア論非公式資料
具体例①（外部ファイルを使用しない場合）
JSは<head>要
素内に記述
CSSは
<head>要素
内に記述
骨格は
<body>要素
内に記述
2011/6/3
test1.html
<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>
e-ビジネスソフトウェア論非公式資料
具体例②（外部ファイルを使用する場合）
test2.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>
2011/6/3
test2.css
body {background-color: #FF9;}
test2.js
alert("Hello, World!");
レポートでは、CSSや
JavaScriptは外部ファイルに
書いた方が評価されます！
e-ビジネスソフトウェア論非公式資料
DOM関数の持つ「意味」
• 「document.getElementById」って
なんなんでしょう？
⇒今からその意味を解説します
2011/6/3
e-ビジネスソフトウェア論非公式資料
サンプルプログラム
結果
②
“divid”というidを持つ要素
オブジェクトに操作を加え
る例
2011/6/3
<html>
<head>
<title>document.getElementById関数</title>
<meta http-equiv="content-type"
content="text/html; charset=Shift_JIS">
<script type="text/javascript">
<!-function test() {
document.getElementById("divid").innerHTML = "
テスト";
document.getElementById("divid").style.color =
"red";
}
//-->
①
</script>
</head>
<body onload='test()'>
<h1>document.getElementById関数</h1>
<div id="divid"></div>
</body>
</html>
e-ビジネスソフトウェア論非公式資料
「document」とは「<body>要素の中身」
• 「document」というのは、
DOM関数が使用される
HTMLファイル全体のこ
とを指します
• 実用上はそのHTMLファ
イル中の<body>要素の
中身だと解釈して問題
ありません
2011/6/3
<html>
<head>
<title>document.getElementById関数</title>
<meta http-equiv="content-type"
content="text/html; charset=Shift_JIS">
<script type="text/javascript">
<!-function test() {
document.getElementById("divid").innerHTML = "
テスト";
document.getElementById("divid").style.color =
"red";
}
//-->
</script>
</head>
<body onload='test()'>
<h1>document.getElementById関数</h1>
<div id="divid"></div>
</body>
</html>
e-ビジネスソフトウェア論非公式資料
「 . 」の意味は「～の」
例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-ビジネスソフトウェア論非公式資料
サンプルプログラム（再掲）
結果
②
“divid”というidを持つ要素
オブジェクトに操作を加え
る例
2011/6/3
<html>
<head>
<title>document.getElementById関数</title>
<meta http-equiv="content-type"
content="text/html; charset=Shift_JIS">
<script type="text/javascript">
<!-function test() {
document.getElementById("divid").innerHTML = "
テスト";
document.getElementById("divid").style.color =
"red";
}
//-->
①
</script>
</head>
<body onload='test()'>
<h1>document.getElementById関数</h1>
<div id="divid"></div>
</body>
</html>
e-ビジネスソフトウェア論非公式資料
document.write()関数
document.write()
⇒「<body>要素内」に( )内の
値を記述する
<html>
<head>
<title>document.write()関数</title>
<meta http-equiv="content-type"
content="text/html; charset=Shift_JIS">
<script type="text/javascript">
<!-var str = 'Hello, World';
document.write('<p>' + str + '</p>');
document.write("<p style='color: red; fontsize: 200%;'>" + str + "</p>");
//-->
</script>
</head>
<body>
</body>
</html>
2011/6/3
e-ビジネスソフトウェア論非公式資料
変数と文字列のつなぎ方
例1：
document.write('<p>' + str + '</p>');
（※青字が文字列、赤字が変数）
⇒文字列の間に変数を挟みたい場合は「+」でつなぐ！
例2：
document.write("<p style='color: red; font-size: 200%;'>" + str + "</p>");
（※青字が文字列、赤字が変数）
⇒「” ”」と「’ ’」は混在可能（但し「” ’ ” ’」の様な書き方は危険）
2011/6/3
e-ビジネスソフトウェア論非公式資料
スタイル(style)プロパティについて
• スタイルプロパティはCSSでの記述法（ハイフン記法）とDOM
（JavaScript）での記述法（キャメル記法）が異なる
• http://ajax.studynet.jp/dom/style/style-property で色々紹
介されています
DOMにおけるプロパティ
borderStyle
borderWidth
fontStyle
backgroundColor
maxHeight
minHeight
2011/6/3
CSSにおけるプロパティ
border-style
border-width
font-style
background-color
max-height
min-height
e-ビジネスソフトウェア論非公式資料
説明
ボーダーの線種
ボーダーの太さ
フォントのスタイル
背景色
内容領域の最大の高さ
内容領域の最小の高さ
演習1～5の解説
演習問題１
• prompt関数とdocument.write関数を用いて，
ユーザから入力されたテキスト，文字の色，
文字のサイズ（%）に応じて，表示内容を変化
させるJavaScriptプログラムを書きなさい
ヒント
上記の例をタグで表現すると・・・
<p style=‘color:red; font-size:200%;'>Hello,
World</p>
18
解答例
<html>
<head>
<title>演習1</title>
<script type="text/javascript">
<!-var str = prompt("テキストを入力してください．
");
var color = prompt("文字の色を入力してくだ
さい．");
var size = prompt("文字のサイズ(%)を入力し
てください．");
document.write("<p style='color: " + color +";
font-size: " + size +"%;'>" + str + "</p>");
//-->
</script>
</head>
<body>
</body>
</html>
2011/6/3
• ポイント
– prompt関数でユーザが
入力した値を変数に保
存する
– 保存した値を
document.write関数で
<body>要素内に書きこ
む
– 文字列と変数をきちんと
区別してつなぐ
e-ビジネスソフトウェア論非公式資料
演習問題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>
2011/6/3
• ポイント
– 繰り返し処理にはfor文
を用いる
– 繰り返し数の指定は変
数でも行えるので、
prompt関数で得た値を
代入させる
– 「color」という変数を作る
などして、計算量の少な
いシンプルなアルゴリズ
ムを目指す
e-ビジネスソフトウェア論非公式資料
演習問題3
• div要素にid属性を指定し，JavaScriptプログラムによ
りdiv要素のCSSプロパティを設定し，以下の長方形
を表示するプログラムを作成せよ
<div style="position:absolute;
top:40; left:40;
width:150; height:250;
background-color:#0000FF;
border: thick solid red;
visibility: visible;">
</div>
ヒント
JavaScript
HTML
function showRect() {
document.getElementById(“rect”).style.・・・・
}
<body onload=“showRect()”>
<div id=“rect”></div>
</body>
22
解答例
<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>
2011/6/3
• ポイント
– DOM関数を使って<div>
要素の中身をいじって
いるだけです
– スタイルプロパティの記
述法がCSSとDOMでは
違うので注意しましょう
– 復習の章で説明した内
容が理解できていれば
特に問題ないかと
e-ビジネスソフトウェア論非公式資料
演習問題４
• テキストボックスを２つ作成し，入力値の加算
結果を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").in
nerHTML = "数値を入力してください";
} else if (isNaN(num1)) {
document.getElementById("num1_error").in
nerHTML = "数値ではありません";
} else {
document.getElementById("num1_error").in
nerHTML = "OK";
}
}
1/4
2011/6/3
function checkValue2() {
var num2 =
document.getElementById("num2").v
alue;
if (num2 == "") {
document.getElementById("num2_er
ror").innerHTML = "数値を入力してく
ださい";
} else if (isNaN(num2)) {
document.getElementById("num2_er
ror").innerHTML = "数値ではありま
せん";
} else {
document.getElementById("num2_er
ror").innerHTML = "OK";
}
}
2/4
e-ビジネスソフトウェア論非公式資料
解答例（続き）
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").innerH
TML = result;
}
</script>
</head>
3/4
2011/6/3
<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>
4/4
</html>
e-ビジネスソフトウェア論非公式資料
解説①
<head>要素内
<body>要素内
function checkValue1() {
var num1 =
document.getElementById("num1").v
alue;
if (num1 == "") {
document.getElementById("num1_er
ror").innerHTML = "数値を入力してく
ださい";
} else if (isNaN(num1)) {
document.getElementById("num1_er
ror").innerHTML = "数値ではありま
せん";
} else {
document.getElementById("num1_er
ror").innerHTML = "OK";
}
}
2011/6/3
入力Ａ：<input type="text" id="num1"
onKeyup="checkValue1()"/><span
id="num1_error"></span><br />
• ポイント
– checkValue1()とcheckValue2()
の中身はほぼ同じ（入力Aを調
べるか入力Bを調べるかの違
い）
– onKeyup（打たれたキーが戻っ
た時）をトリガーとして
checkValue1()が起動する
– <span>は<div>と同類
– isNaN()関数を使い数値かどう
かを判定
e-ビジネスソフトウェア論非公式資料
解説②
<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").innerH
TML = result;
}
</script>
</head>
2011/6/3
<input type="button" value="加算"
onclick="addValues()"/>
</form>
加算結果：<div id="output"></div>
• ポイント
– 「加算」ボタンがクリックされ
るとaddValues()が起動
– 入力Aと入力Bの値を
parseFloat()関数で実数化し、
<div>要素に結果を書きこむ
– checkValue()関数でエラー
チェックしてればaddValues()
内のisNaN()関数は不要かも
しれません
e-ビジネスソフトウェア論非公式資料
補足：<div>と<span>の違い
• 参考： http://www.tg.rim.or.jp/~hexane/ach/fscs/fscs04.htm
• <div> と <span> は文書中での役割をもたない，ただ“範囲を指定
する”だけの要素である。したがって，いずれも“ここから～ここま
で”の形で使われる
• ここで“文書中での役割をもたない”というのは，たとえば <ul> はく
くった範囲に“箇条書きである”という“役割”を与えるが，
<div> と <span> は決まった役割を与えない
• <div> と <span> の違いであるが，前者はブロックで，後者はインラ
インで，スタイルの適用範囲を定める。すなわち，
– 文書中の（改行で区切られた）ある“まとまり”全体にスタイルを
適用するのが <div>
– 文章中のある部分にスタイルを適用するのが <span>
• 非常に簡単に言ってしまえば，<div> と <span> の違いは，前後に
改行を伴うか，伴わないかである
2011/6/3
e-ビジネスソフトウェア論非公式資料
演習問題５
• 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">
次へ
1/3
2011/6/3
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").st
yle.backgroundColor = "blue";
} else {
document.getElementById("mark").st
yle.backgroundColor = "red";
}break;
}
}
}
</script>
</head>
e-ビジネスソフトウェア論非公式資料
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>
3/3
2011/6/3
• ポイント
– ラジオボタンをクリックする
とgetRadioValue()が起動
する
– 「radioForm」という変数に
idが”radio_form”の<form>
オブジェクトを格納
– <form>内の要素の数（こ
の場合<input>の数）だけ
for文を回す
– もしラジオボタンがチェック
されてれば、DOM関数で
innerHTMLや
backgroundColorを変更す
る
e-ビジネスソフトウェア論非公式資料
レポート2（課題1&2）について
課題１（基本）
テキストボックスに幅と高さを入力し，背景色をラジオ
ボタンから選択し，ボタンを押すと，div要素に入力した
値に応じた矩形が表示されるようにする
ボタンを押すと
入力値に応じて
矩形が変化
課題１（発展）
発展課題（例）
余力がある人は，さらに，表示する
矩形の個数や枠の幅や色も指定
できるようにしてみましょう．
課題1のヒント
• 演習3～5の組み合わせでできます
– 演習3 → 図形の描き方
– 演習4 → 入力フォームの使い方
– 演習5 → ラジオボタンの使い方
• 発展版を作る場合は、演習2のfor文の使い
方が参考になります（引数を使って…）
2011/6/3
e-ビジネスソフトウェア論非公式資料
課題２
アンケート項目の内容を整形して画面に出力
必須
入力情報を画面に表示
1.
2.
テキストボックスとボタンを
用いて，div要素に入力内
容を整形して表示する
onclick以外のイベントハン
ドラを最低１つは用いること
発展課題（例）
入力値のチェック
（空だったらアラートなど）
2. <table>タグを利用して出力
3. チェックボックスの活用
4. リストボックスの活用
1.
課題2のヒント
• 今まで扱ってきた内容を一通りおさらいすれ
ばよいかと思います
• オリジナリティが試される問題なので、特にヒ
ントは出しません
⇒Let’s GGR !
2011/6/3
e-ビジネスソフトウェア論非公式資料
レポート２
締切
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
気軽にお越しください♪
優しい山口研メンバーが待ってます。

Download Report