Java Script 演習３山口研究室後期博士課程3年玉川奨たまがわすすむ居室

Java. Script　演習３山口研究室後期博士課程3年玉川　奨 (たまがわすすむ) 居室： 24－604 / 23－620 mail : s_tamagawa@ae. keio. ac. jp 1

演習問題3 • div要素にid属性を指定し，Java. Scriptプログラムによりdiv要素のCSSプロパティを設定し，以下の長方形を表示するプログラムを作成せよ <div style="position: absolute; top: 40; left: 40; width: 150; height: 250; background-color: #0000 FF; border: thick solid red; visibility: visible; "> </div> Java. Script ヒント function show. Rect() { document. get. Element. By. Id(“rect”). style. ・・・・ document. get. Element. By. Id(“rect”). style. background Color = “#0000 FF”; } HTML <body onload=“show. Rect()”> <div id=“rect”></div> 2 </body>

本日の内容 • • • イベント処理基本的なフォームテキストボックスの入力値の取得配列 DOM（Document Object Model）ラジオボタンで選択された値の取得リスト（コンボ）ボックスで選択された値の取得チェックボックスで選択された値の取得提出課題

イベント処理 • Java. Scriptでは、ユーザからの入力があるとWebブラウザがイベントを生成 – 例えば、キーボードを押したり、マウスを動かしたりクリックしたりするなど様々な場面でイベントが発生する　　あるイベントが発生した際に、そのイベントに対するイベントハンドラを定義しておけば、インタラクティブなページを作ることが可能イベントハンドラ発生契機サポートするHTML要素 onblur 要素が入力フォーカスを失った時 <button>, <input>, <label>, <select>, <textarea>, <body> onchange 入力フォーカスが移された時と要素 <input>, <select>, <textarea> の値が変わった時 onclick マウスを一回クリックした時大半の要素 onmouseover マウスが要素の上に移動した大半の要素 onkeydown(up) ユーザが何かキーを押したフォーム要素と<body> onload ページが読み込まれた時 body要素と共によく用いられる

基本的なフォーム • テキスト – input要素のtype属性がtext • ラジオボタン – input要素のtype属性がradio – name属性の値を共通にすることでグループ化できる – value属性で値を指定 • メニュー（リストボックスとコンボボックス） – select要素とoption要素 – select要素のsize属性の値が1の場合にはコンボボックス，2以上の場合にはリストボックス – option要素のvalue属性で値を指定 • チェックボックス – input要素のtype属性がcheckbox – value属性で値を指定 • テキストエリア – textarea要素 – rows属性で行数，cols属性で列数を表す • ボタン – input要素のtype属性がbutton（または，submit, reset） <form> 　　<input type=“”>XXX 　　<select> 　　　　<option>～　　</select> 　　<textarea></textarea> </form>

テキストボックスの入力値の取得 • テキストボックス内に入力したデータを、ボタンが押されたらdiv要素に出力 • ex 15. html 6

テキストボックスの入力値の取得 Java. Script function get. Value() { var text = document. get. Element. By. Id("input"). value; document. get. Element. By. Id("output"). inner. HTML = text; } function check. Value() { var text = document. get. Element. By. Id("input"). value; if (text == "") { alert("文字を入力してください．"); } else { alert("OK"); } } HTML <form> 文字を入力してください。 <input type="text" id="input“ onkeyup=“get. Value()" /> <input type=“button” value=“値の確認" onclick=“check. Value()" /> </form> <div id="output"></div>

演習問題４ • テキストボックスを２つ作成し，入力値の加算結果をdiv要素に出力せよ – parse. Float関数を利用すること – 余力があれば，数値かどうかのチェックも行うこと • is. Na. N（Not a Number）関数を利用すると，入力値が数値かどうかを判別可能 (数値でない場合にtrueを返す）

演習問題４ • さらに余力がある人は，テキストボックスの横のdiv要素に以下のメッセージを出力するようにしてみてください – テキストボックスが空の場合には「数値を入力してください」 – テキストボックスが数値以外の場合には「数値ではありません」 – テキストボックスが数値の場合には「ＯＫ」 • ex 15. htmlのonkeyupイベントハンドラを用いること • メッセージは上記のとおりでなくても良い

配列 • ex 16. html • 配列の生成 var a = new Array(); a[0] = 1. 2; a[1] = "Java. Script"; a[2] = true; a[3] = {x: 1, y: 3}; var a = [1. 2, "Java. Script", true, {x: 1, y: 3}]; オブジェクトの型が異なっても格納することができる • 配列のサイズを指定するときは var a = new Array(10); • 連想配列配列の添字を文字列にすることができる a[score] = "88点"; 10

DOM（Document Object Model） • 文書のトップであるDocumentオブジェクトから下位の階層の構造を表すモデル「Java. Script DOMリファレンス」 http: //www. openspc 2. org/Java. Script_DOM/ 11

DOM関数の例 • ex 17. html • document. get. Element. By. Id(id) – 引数に指定したidを持つDOMオブジェクトを返す • document. create. Element(要素) – 引数で指定したHTML要素を作成する • オブジェクト. set. Attribute(属性名, 値) – オブジェクトの属性に値をセットする • オブジェクト. append. Child(オブジェクト) – 指定したオブジェクトにオブジェクトを追加する

DOM関数の例 Java. Script function dom. Test() { var div. Obj = document. get. Element. By. Id("dom_test"); var h 1 Obj = document. create. Element("h 1"); h 1 Obj. set. Attribute("style", "color: navy; "); h 1 Obj. inner. HTML = "Hello, World!"; div. Obj. append. Child(h 1 Obj); var color. Array = ["red", "blue", "green", "yellow"]; for (var i = 0; i < color. Array. length; i++) { var p. Obj = document. create. Element("p"); p. Obj. inner. HTML = "DOMを用いて追加された段落" + i; p. Obj. style. font. Size = "200%"; p. Obj. style. color = color. Array[i]; div. Obj. append. Child(p. Obj); } } HTML <div id="dom_test"></div>

ラジオボタンで選択された値の取得 • ex 18. html

ラジオボタンで選択された値の取得 Java. Script function get. Radio. Value(){ var radio. Form = document. get. Element. By. Id("radio_form"); for (var i = 0; i < radio. Form. length; i++) { var radio. Button = radio. Form. elements[i]; if (radio. Button. checked) { document. get. Element. By. Id("output"). inner. HTML = radio. Button. value; break; } } } HTML <form id="radio_form“ onclick=“get. Radio. Value()”> あなたの性別を教えて下さい．<br/> <input type=“radio” name= "性別" value="男" checked="checked" />男 <input type=“radio” name= "性別" value="女" />女 </form> <div id="output">男</div>

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

リスト（コンボ）ボックスで選択された値の取得 • ex 19. html

リスト（コンボ）ボックスで選択された値の取得 Java. Script function get. Select. Value(){ var html = "<ul>"; var select. Element = document. get. Element. By. Id("select_element"); for (var i = 0; i < select. Element. length; i++) { var item = select. Element. options[i]; if (item. selected) { html += "<li>" + item. value + "</li>"; } } html += "</ul>"; document. get. Element. By. Id("output"). inner. HTML = html; } HTML <form> <select id="select_element" name=“animal" size="4" onclick="get. Select. Value()" multiple> <option value="ペンギン">ペンギン</option> <option value="トラ">トラ</option> コンボボックスに変更したい場合は， <option value="ライオン">ライオン</option> select要素のsize属性の値を 1にし， <option value="アザラシ">アザラシ</option> multipleを削除すれば良い． </select> （multipleを付けるとリストボックスで </form> 複数項目を選択できるようになる．） <div id="output"></div>

チェックボックスで選択された値の取得 • ex 20. html

チェックボックスで選択された値の取得 Java. Script function get. Check. Box. Value(){ var html = "<ul>"; var checkbox. Form = document. get. Element. By. Id("checkbox_form"); for (var i = 0; i < checkbox. Form. length; i++) { var checkbox = checkbox. Form. elements[i]; if (checkbox. checked) { html += "<li>" + checkbox. value + "</li>"; } } html += "</ul>"; document. get. Element. By. Id("output"). inner. HTML = html; } HTML <form id="checkbox_form" name="animal" onclick="get. Check. Box. Value()"> <input type="checkbox" value="ペンギン" />ペンギン <input type="checkbox" value="トラ" />トラ <input type="checkbox" value="ライオン" />ライオン <input type="checkbox" value="アザラシ" />アザラシ </form> <div id="output"></div>

提出課題 21

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

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

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

自由課題来年度のeビジネスソフトウェア論の授業ページのデザインを考えてください

レポート l 締切 l 6月28日（金）23: 59 までにメールを送信 l メール宛先 l To：s_tamagawa@ae. keio. ac. jp l メールの件名 l 学籍番号_氏名_JS演習　学籍番号，アンダーバーは必ず半角でお願いします l 添付すべきファイル l wordファイル(レポート本文) 　２～３枚程度，ファイル名「学籍番号_氏名_JS演習. doc」 l 課題1. html，課題2. html, (やった人は)自由課題. html l Java. ScriptとCSSを別ファイルにした場合には，それらのファイルも添付すること

レポート l レポート本文に書くべき項目 l 動作確認行ったブラウザ(IE or Firefox) l 作成したJava. Scriptの解説 l HTML，CSS，Java. Scriptを書く上で夫した点 l 感想 l 注意 l 課題１と２共に夫をしなくても合格点は出ますが，夫がしてある場合には評価します l 機能性・技術性・デザイン性・夫した点を評価します l CSS, Java. Scriptはできれば別ファイルとして書く方が望ましいです

問い合わせ先 • 第１研究室 24 -604 A • 第２研究室 23 -620 B E-mail: 　 s_tamagawa@ae. keio. ac. jp 気軽にお越しください♪ 優しい山口研メンバーが待ってます。

Java Script 演習３ 山口研究室 後期博士課程3年 玉川 奨 たまがわ すすむ 居室

Java Script 演習３山口研究室後期博士課程3年玉川奨たまがわすすむ居室