e- ビビビビビビビビビビビ JavaScript ビビ③ ビビビビビ ビビ 2 ビ ビビビビ Muneaki Hoshina e- ビビビビビビビビビビビ ビビビビビ Let’s GGR!
Mar 19, 2016
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 と組み合わせて用いる。
2011/6/3 e- ビジネスソフトウェア論 非公式資料
HTML と CSS と JavaScript の違い
JavaScript
CSS
JavaScript
CSS
HTML
外部ファイル
• 最低限必要なのは <html> <head> <body> の 3 要素のみ!HTML について
2011/6/3 e- ビジネスソフトウェア論 非公式資料
<html><head></head><body></body></html>
• メイン(肉)は <body> で、 <head> はトッピング(レタスとかソース)プログラムの記述位置
2011/6/3 e- ビジネスソフトウェア論 非公式資料
<html><head></head><body></body></html>
・ Web ページの骨格(テキストやボタンの位置)は<body> 要素内に記述する・ CSS や JavaScript といった味付け的な要素は<head> 要素内に記述する
<html><head>
<title>JavaScript の書き方1 </title><style type="text/css">
body {background-color: #FF9;}</style><script type="text/javascript">alert("Hello, World!");</script>
</head><body>
<h1>JavaScript の書き方1 </h1><p>HTML ファイル内に書く方法 </p>
</body></html>
2011/6/3 e- ビジネスソフトウェア論 非公式資料
具体例①(外部ファイルを使用しない場合)
骨格は<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;}
2011/6/3 e- ビジネスソフトウェア論 非公式資料
具体例②(外部ファイルを使用する場合)
alert("Hello, World!");
test2.html test2.css
test2.js
レポートでは、 CSS やJavaScript は外部ファイルに書いた方が評価されます!
• 「 document.getElementById 」ってなんなんでしょう?⇒ 今からその意味を解説します
DOM 関数の持つ「意味」
2011/6/3 e- ビジネスソフトウェア論 非公式資料
<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>
2011/6/3 e- ビジネスソフトウェア論 非公式資料
サンプルプログラム
“divid” という id を持つ要素オブジェクトに操作を加える例
①②
結果
• 「 document 」というのは、 DOM 関数が使用される HTML ファイル全体のことを指します• 実用上はその HTMLファイル中の <body>要素の中身だと解釈して問題ありません
2011/6/3 e- ビジネスソフトウェア論 非公式資料
「 document 」とは「 <body> 要素の中身」<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>
例 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;
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>
2011/6/3 e- ビジネスソフトウェア論 非公式資料
サンプルプログラム(再掲)
“divid” という id を持つ要素オブジェクトに操作を加える例
①②
結果
<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; font-size: 200%;'>" + str + "</p>");//--></script>
</head><body>
</body></html>
2011/6/3 e- ビジネスソフトウェア論 非公式資料
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) プロパティについて
2011/6/3 e- ビジネスソフトウェア論 非公式資料
DOMにおけるプロパティ
CSSにおけるプロパティ 説明
borderStyle border-style ボーダーの線種borderWidth border-width ボーダーの太さfontStyle font-style フォントのスタイルbackgroundColor background-color 背景色maxHeight max-height 内容領域の最大の高さminHeight min-height 内容領域の最小の高さ
演習 1~ 5の解説
演習問題1• prompt 関数と document.write 関数を用いて,ユーザから入力されたテキスト,文字の色,文字のサイズ( % )に応じて,表示内容を変化させる JavaScript プログラムを書きなさい
18
上記の例をタグで表現すると・・・<p style=‘color:red; font-size:200%;'>Hello, World</p>
ヒント
<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>
• ポイント– prompt 関数でユーザが入力した値を変数に保存する– 保存した値を
document.write 関数で<body> 要素内に書きこむ
– 文字列と変数をきちんと区別してつなぐ
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解答例
演習問題 2• “Hello!” という文字列をユーザが入力した数だけ表示する JavaScript プログラムを作成しなさい• 行数を 5 で割った余りが 1 の場合には赤色,2の場合には緑色,3の場合には黄色, 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 」という変数を作るなどして、計算量の少ないシンプルなアルゴリズムを目指す
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解答例
演習問題 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では違うので注意しましょう– 復習の章で説明した内容が理解できていれば特に問題ないかと
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解答例
演習問題4• テキストボックスを2つ作成し,入力値の加算結果を div 要素に出力せよ– parseFloat 関数を利用すること– 余力があれば,数値かどうかのチェックも行うこと• isNaN ( Not a Number )関数を利用すると,入力値が数値かどうかを判別可能 ( 数値でない場合に true を返す)
演習問題4は提出する必要はありません.
演習問題4• さらに余力がある人は,テキストボックスの横の div 要素に以下のメッセージを出力するようにしてみてください
– テキストボックスが空の場合には「数値を入力してください」– テキストボックスが数値以外の場合には「数値ではありません」– テキストボックスが数値の場合には「OK」
• ex15.html の onkeyup イベントハンドラを用いること• メッセージは上記のとおりでなくても良い
<html><head><title>演習問題4</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";}
}
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解答例
1/4 2/4
function addValues() {var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;if (isNaN(num1)) {alert(" 入力Aは数値ではありません. ");}if (isNaN(num2)) {alert(" 入力Bは数値ではありません. ");}var result = parseFloat(num1) + parseFloat(num2);document.getElementById("output").innerHTML = result;
}</script></head>
<body><h1> 入力値の加算 </h1><form>数値を入力してください。 <br /> 入力A: <input type="text" id="num1"
onKeyup="checkValue1()"/><span id="num1_error"></span><br /> 入力B: <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>
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解答例(続き)
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() 関数を使い数値かどうかを判定
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解説① 入力A: <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(" 入力Aは数値ではありません.");}if (isNaN(num2)) {alert(" 入力Bは数値ではありません.");}var result = parseFloat(num1) + parseFloat(num2);document.getElementById("output").innerHTML = result;
}</script></head>
• ポイント– 「加算」ボタンがクリックされると addValues() が起動– 入力 A と入力 B の値を parseFloat()関数で実数化し、 <div> 要素に結果を書きこむ– checkValue() 関数でエラーチェックしてれば addValues() 内の
isNaN() 関数は不要かもしれません
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解説② <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> の違い
2011/6/3 e- ビジネスソフトウェア論 非公式資料
演習問題5• ex18.html を元に,男を選択した場合には青色マークを女を選択した場合には赤色マークを出力するようにせよ– ヒント:
<div id=“mark” style=“width: 15; height: 3; background-color: blue”>を<div id=“output”>男 </div>の前に挿入
演習問題5は提出する必要はありません.
<html><head><title> 演習問題5 </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>
2011/6/3 e- ビジネスソフトウェア論 非公式資料
解答例
1/3 2/3
次へ
<body><h1> 演習問題5 </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)について
課題1(基本)テキストボックスに幅と高さを入力し,背景色をラジオボタンから選択し,ボタンを押すと, div 要素に入力した値に応じた矩形が表示されるようにする
ボタンを押すと入力値に応じて矩形が変化
課題1(発展)発展課題(例)余力がある人は,さらに,表示する矩形の個数や枠の幅や色も指定できるようにしてみましょう.
• 演習 3 ~ 5 の組み合わせでできます– 演習 3 → 図形の描き方– 演習 4 → 入力フォームの使い方– 演習 5 → ラジオボタンの使い方
• 発展版を作る場合は、演習 2 の for 文の使い方が参考になります(引数を使って…)
課題 1 のヒント
2011/6/3 e- ビジネスソフトウェア論 非公式資料
課題2アンケート項目の内容を整形して画面に出力
1. 入力値のチェック (空だったらアラートなど)2. <table> タグを利用して出力3. チェックボックスの活用4. リストボックスの活用
発展課題(例)
入力情報を画面に表示必須1. テキストボックスとボタンを用いて, div 要素に入力内容を整形して表示する2. onclick以外のイベントハンドラを最低1つは用いること
• 今まで扱ってきた内容を一通りおさらいすればよいかと思います• オリジナリティが試される問題なので、特にヒントは出しません ⇒ Let’s GGR !
課題 2 のヒント
2011/6/3 e- ビジネスソフトウェア論 非公式資料
レポート2締切
6月 24日(金) 23:59 までにメールを送信メール宛先
To: [email protected]メールの件名
学籍番号 _氏名 _JS 演習 2 学籍番号,アンダーバーは必ず半角でお願いします添付すべきファイル
word ファイル ( レポート本文 ) 2~3枚程度,ファイル名「学籍番号 _氏名 _JS 演習2 .doc 」課題 1.html ,課題 2.htmlJavaScript と CSS を別ファイルにした場合には,それらのファイルも添付すること
レポート2レポート本文に書くべき項目
動作確認行ったブラウザ (IE or Firefox)作成した JavaScript の解説HTML , CSS , JavaScript を書く上で工夫した点感想
注意課題1と2共に工夫をしなくても合格点は出ますが,工夫がしてある場合には評価します機能性・技術性・デザイン性・工夫した点を評価しますCSS, JavaScriptはできれば別ファイルとして書く方が望ましいです
問い合わせ先• 第1研究室 24-604A • 第2研究室 23-620B
気軽にお越しください♪優しい山口研メンバーが待ってます。
E-mail: [email protected]: @YamLabTA