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

Let’s GGR! e-ビジネスソフトウェア論JavaScript演習③ 山口研究室　修士2年保科宗淳 MuneakiHoshina e-ビジネスソフトウェア論　非公式資料

目次 • 過去2回の復習 • HTMLとCSSとJavaScriptの違い • HTMLについて • プログラムの記述位置 • DOM関数の持つ「意味」 • 変数と文字列のつなぎ方 • スタイル(style)プロパティについて • 演習1～5の解説 • レポート2（課題1&2）について • 演習1～5がどのように活かせるかのヒント e-ビジネスソフトウェア論　非公式資料

過去2回の復習

HTMLとCSSとJavaScriptの違い • HTML 　→Webページの骨格のみを担当。表現力は紙の文書と同程度。 • CSS →Webページのデザインを担当。通常はHTMLと組み合わせて用いる。 • JavaScript →Webページを動的なものにする。通常はHTMLと組み合わせて用いる。 HTML CSS JavaScript 外部ファイル CSS JavaScript e-ビジネスソフトウェア論　非公式資料

HTMLについて <html> <head></head> <body></body> </html> 最低限必要なのは <html><head><body>の3要素のみ！ e-ビジネスソフトウェア論　非公式資料

プログラムの記述位置 ・Webページの骨格（テキストやボタンの位置）は<body>要素内に記述する・CSSやJavaScriptといった味付け的な要素は<head>要素内に記述する <html> <head></head> <body></body> </html> メイン（肉）は<body>で、<head>はトッピング（レタスとかソース） e-ビジネスソフトウェア論　非公式資料

具体例①（外部ファイルを使用しない場合） 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> JSは<head>要素内に記述 CSSは<head>要素内に記述骨格は<body>要素内に記述 e-ビジネスソフトウェア論　非公式資料

具体例②（外部ファイルを使用する場合） test2.html test2.css <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;} test2.js • alert("Hello, World!"); レポートでは、CSSやJavaScriptは外部ファイルに書いた方が評価されます！ e-ビジネスソフトウェア論　非公式資料

DOM関数の持つ「意味」 「document.getElementById」ってなんなんでしょう？ ⇒今からその意味を解説します e-ビジネスソフトウェア論　非公式資料

サンプルプログラム <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を持つ要素オブジェクトに操作を加える例 e-ビジネスソフトウェア論　非公式資料

「document」とは「<body>要素の中身」 • 「document」というのは、DOM関数が使用されるHTMLファイル全体のことを指します • 実用上はそのHTMLファイル中の<body>要素の中身だと解釈して問題ありません <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> e-ビジネスソフトウェア論　非公式資料

「 . 」の意味は「～の」 例1：例2： document.getElementById("divid").style.color = "red"; ⇒ 「<body>要素内」の「”divid”というidを持つ要素」の「style」の「色」を「赤」に変更する document.getElementById("divid").innerHTML = "テスト"; ⇒「<body>要素内」の「”divid”というidを持つ要素」の「innerHTML(※)」を「”テスト”」という文字列に置き換える ※ <div id=“divid”>（ここの部分がinnerHTML）</div> e-ビジネスソフトウェア論　非公式資料

サンプルプログラム（再掲） <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を持つ要素オブジェクトに操作を加える例 e-ビジネスソフトウェア論　非公式資料

document.write()関数 <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() ⇒「<body>要素内」に( )内の値を記述する e-ビジネスソフトウェア論　非公式資料

変数と文字列のつなぎ方 例1：例2： document.write("<p style='color: red; font-size: 200%;'>" + str + "</p>"); （※青字が文字列、赤字が変数） ⇒「” ”」と「’ ’」は混在可能（但し「” ’ ” ’」の様な書き方は危険） document.write('<p>' + str + '</p>'); （※青字が文字列、赤字が変数） ⇒文字列の間に変数を挟みたい場合は「+」でつなぐ！ e-ビジネスソフトウェア論　非公式資料

スタイル(style)プロパティについて スタイルプロパティはCSSでの記述法（ハイフン記法）とDOM（JavaScript）での記述法（キャメル記法）が異なる http://ajax.studynet.jp/dom/style/style-property　で色々紹介されています e-ビジネスソフトウェア論　非公式資料

演習1～5の解説

演習問題１ ヒント上記の例をタグで表現すると・・・ <p style=‘color:red; font-size:200%;'>Hello, World</p> prompt関数とdocument.write関数を用いて，ユーザから入力されたテキスト，文字の色，文字のサイズ（%）に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい

解答例 <html> <head> <title>演習1</title> <script type="text/javascript">  </script> </head> <body> </body> </html> • ポイント • prompt関数でユーザが入力した値を変数に保存する • 保存した値をdocument.write関数で<body>要素内に書きこむ • 文字列と変数をきちんと区別してつなぐ e-ビジネスソフトウェア論　非公式資料

演習問題2 • “Hello!”という文字列をユーザが入力した数だけ表示するJavaScriptプログラムを作成しなさい • 行数を5で割った余りが1の場合には赤色，２の場合には緑色，３の場合には黄色，4の場合には黒，0の場合には青色，さらに，3の倍数の場合には200%の大きさで”Hello!”を表示しなさい

解答例 <html> <head> <title>演習2</title> <script type="text/javascript"> varstr = prompt("数値を入力してください．"); var num = parseInt(str); for (vari = 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」という変数を作るなどして、計算量の少ないシンプルなアルゴリズムを目指す 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>

解答例 <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では違うので注意しましょう • 復習の章で説明した内容が理解できていれば特に問題ないかと 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").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 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").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 e-ビジネスソフトウェア論　非公式資料

解説① <head>要素内 <body>要素内 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 /> 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").innerHTML = result; } </script> </head> • ポイント • 「加算」ボタンがクリックされるとaddValues()が起動 • 入力Aと入力Bの値をparseFloat()関数で実数化し、<div>要素に結果を書きこむ • checkValue()関数でエラーチェックしてればaddValues()内のisNaN()関数は不要かもしれません <input type="button" value="加算" onclick="addValues()"/> </form> 加算結果：<div id="output"></div> 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> の違いは，前後に改行を伴うか，伴わないかである e-ビジネスソフトウェア論　非公式資料

演習問題５ <div id=“mark” style=“width: 15; height: 3; background-color: blue”> を <div id=“output”>男</div> の前に挿入演習問題５は提出する必要はありません． • ex18.htmlを元に，男を選択した場合には青色マークを女を選択した場合には赤色マークを出力するようにせよ • ヒント：

解答例 <html> <head> <title>演習問題５</title> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> function getRadioValue(){ varradioForm = document.getElementById("radio_form"); for (vari = 0; i < radioForm.length; i++) { varradioButton = 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 e-ビジネスソフトウェア論　非公式資料

解答例（続き） <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 e-ビジネスソフトウェア論　非公式資料

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

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

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

課題1のヒント • 演習3～5の組み合わせでできます • 演習3　→　図形の描き方 • 演習4　→　入力フォームの使い方 • 演習5　→　ラジオボタンの使い方 • 発展版を作る場合は、演習2のfor文の使い方が参考になります（引数を使って…） e-ビジネスソフトウェア論　非公式資料

課題２ アンケート項目の内容を整形して画面に出力必須 • テキストボックスとボタンを用いて，div要素に入力内容を整形して表示する • onclick以外のイベントハンドラを最低１つは用いること入力情報を画面に表示発展課題（例） • 入力値のチェック（空だったらアラートなど） 2. <table>タグを利用して出力 3. チェックボックスの活用 4. リストボックスの活用

課題2のヒント 今まで扱ってきた内容を一通りおさらいすればよいかと思いますオリジナリティが試される問題なので、特にヒントは出しません　⇒Let’s GGR ! e-ビジネスソフトウェア論　非公式資料

レポート２ • 締切 • 6月24日（金）23:59 までにメールを送信 • メール宛先 • To：s_tamagawa@ae.keio.ac.jp • メールの件名 • 学籍番号_氏名_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:s_tamagawa@ae.keio.ac.jp Twitter: @YamLabTA 気軽にお越しください♪ 優しい山口研メンバーが待ってます。

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