JavaScript 演習３ 山口研究室 後期博士課程2年 玉川 奨 (たまがわ すすむ) 居室：24－604 / 23－620 玉川 奨 (たまがわ すすむ) 居室：24－604 / 23－620 mail : s_tamagawa@ae.keio.ac.jp
演習問題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 function showRect() { document.getElementById(“rect”).style.・・・・ document.getElementById(“rect”).style.backgroundColor = “#0000FF”; } HTML <body onload=“showRect()”> <div id=“rect”></div> </body>
本日の内容 イベント処理 基本的なフォーム テキストボックスの入力値の取得 配列 DOM（Document Object Model） ラジオボタンで選択された値の取得 リスト（コンボ）ボックスで選択された値の取得 チェックボックスで選択された値の取得 提出課題
イベント処理 JavaScriptでは、ユーザからの入力があると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 テキストエリア textarea要素 rows属性で行数，cols属性で列数を表す ボタン input要素のtype属性がbutton（または，submit, reset） <form> <input type=“”>XXX <select> <option>～ </select> <textarea></textarea> </form>
テキストボックスの入力値の取得 テキストボックス内に入力したデータを、 ボタンが押されたらdiv要素に出力 ex15.html
テキストボックスの入力値の取得 JavaScript HTML function getValue() { var text = document.getElementById("input").value; document.getElementById("output").innerHTML = text; } function checkValue() { if (text == "") { alert("文字を入力してください．"); } else { alert("OK"); HTML <form> 文字を入力してください。 <br /> <input type="text" id="input“ onkeyup=“getValue()" /> <input type=“button” value=“値の確認" onclick=“checkValue()" /> </form> <div id="output"></div>
演習問題４ テキストボックスを２つ作成し，入力値の加算結果をdiv要素に出力せよ parseFloat関数を利用すること 余力があれば，数値かどうかのチェックも行うこと isNaN（Not a Number）関数を利用すると，入力値が数値かどうかを判別可能 (数値でない場合にtrueを返す）
演習問題４ さらに余力がある人は，テキストボックスの横のdiv要素に以下のメッセージを出力するようにしてみてください テキストボックスが空の場合には「数値を入力してください」 テキストボックスが数値以外の場合には「数値ではありません」 テキストボックスが数値の場合には「ＯＫ」 ex15.htmlのonkeyupイベントハンドラを用いること メッセージは上記のとおりでなくても良い
配列 ex16.html 配列の生成 配列のサイズを指定するときは 連想配列 オブジェクトの型が異なっても格納することができる var a = new Array(); a[0] = 1.2; a[1] = "JavaScript"; a[2] = true; a[3] = {x:1, y:3}; var a = [1.2, "JavaScript", true, {x:1, y:3}]; オブジェクトの型が異なっても格納することができる 配列のサイズを指定するときは var a = new Array(10); 連想配列 配列の添字を文字列にすることができる a[score] = "88点";
DOM（Document Object Model） 「JavaScript DOMリファレンス」http://www.openspc2.org/JavaScript/JavaScript_DOM/
DOM関数の例 ex17.html document.getElementById(id) 引数に指定したidを持つDOMオブジェクトを返す document.createElement(要素) 引数で指定したHTML要素を作成する オブジェクト.setAttribute(属性名, 値) オブジェクトの属性に値をセットする オブジェクト.appendChild(オブジェクト) 指定したオブジェクトにオブジェクトを追加する
DOM関数の例 JavaScript HTML <div id="dom_test"></div> function domTest() { var divObj = document.getElementById("dom_test"); var h1Obj = document.createElement("h1"); h1Obj.setAttribute("style", "color: navy;"); h1Obj.innerHTML = "Hello, World!"; divObj.appendChild(h1Obj); var colorArray = ["red", "blue", "green", "yellow"]; for (var i = 0; i < colorArray.length; i++) { var pObj = document.createElement("p"); pObj.innerHTML = "DOMを用いて追加された段落" + i; pObj.style.fontSize = "200%"; pObj.style.color = colorArray[i]; divObj.appendChild(pObj); } HTML <div id="dom_test"></div>
ラジオボタンで選択された値の取得 ex18.html
ラジオボタンで選択された値の取得 JavaScript HTML 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; break; } HTML <form id="radio_form“ onclick=“getRadioValue()”> あなたの性別を教えて下さい．<br/> <input type=“radio” name= "性別" value="男" checked="checked" />男 <input type=“radio” name= "性別" value="女" />女 </form> <div id="output">男</div>
演習問題５ ex18.htmlを元に，男を選択した場合には青色マークを女を選択した場合には赤色マークを出力するようにせよ ヒント： <div id=“mark” style=“width: 15; height: 3; background-color: blue”> を <div id=“output”>男</div> の前に挿入
リスト（コンボ）ボックスで 選択された値の取得 ex19.html
リスト（コンボ）ボックスで 選択された値の取得 JavaScript function getSelectValue(){ var html = "<ul>"; var selectElement = document.getElementById("select_element"); for (var i = 0; i < selectElement.length; i++) { var item = selectElement.options[i]; if (item.selected) { html += "<li>" + item.value + "</li>"; } html += "</ul>"; document.getElementById("output").innerHTML = html; HTML <form> <select id="select_element" name=“animal" size="4" onclick="getSelectValue()" multiple> <option value="ペンギン">ペンギン</option> <option value="トラ">トラ</option> <option value="ライオン">ライオン</option> <option value="アザラシ">アザラシ</option> </select> </form> <div id="output"></div> コンボボックスに変更したい場合は，select要素のsize属性の値を1にし，multipleを削除すれば良い． （multipleを付けるとリストボックスで複数項目を選択できるようになる．）
チェックボックスで 選択された値の取得 ex20.html
チェックボックスで 選択された値の取得 JavaScript HTML function getCheckBoxValue(){ var html = "<ul>"; var checkboxForm = document.getElementById("checkbox_form"); for (var i = 0; i < checkboxForm.length; i++) { var checkbox = checkboxForm.elements[i]; if (checkbox.checked) { html += "<li>" + checkbox.value + "</li>"; } html += "</ul>"; document.getElementById("output").innerHTML = html; HTML <form id="checkbox_form" name="animal" onclick="getCheckBoxValue()"> <input type="checkbox" value="ペンギン" />ペンギン <input type="checkbox" value="トラ" />トラ <input type="checkbox" value="ライオン" />ライオン <input type="checkbox" value="アザラシ" />アザラシ </form> <div id="output"></div>
提出課題
課題１（基本） テキストボックスに幅と高さを入力し，背景色をラジオボタンから選択し，ボタンを押すと，div要素に入力した値に応じた矩形が表示されるようにする ボタンを押すと 入力値に応じて 矩形が変化
課題１（発展） 発展課題（例） 余力がある人は，さらに，表示する矩形の個数や枠の幅や色も指定できるようにしてみましょう．
課題２ アンケート項目の内容を整形して画面に出力 必須 発展課題（例） 入力情報を画面に表示 テキストボックスとボタンを用いて，div要素に入力内容を整形して表示する onclick以外のイベントハンドラを最低１つは用いること 入力情報を画面に表示 発展課題（例） 入力値のチェック （空だったらアラートなど） 2. <table>タグを利用して出力 3. チェックボックスの活用 4. リストボックスの活用
レポート 締切 6月22日（金）23:59 までにメールを送信 メール宛先 メールの件名 添付すべきファイル 学籍番号_氏名_JS演習 To：s_tamagawa@ae.keio.ac.jp メールの件名 学籍番号_氏名_JS演習 学籍番号，アンダーバーは必ず半角でお願いします 添付すべきファイル 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 気軽にお越しください♪ 優しい山口研メンバーが待ってます。