Transcript PPT
JavaScript 演習３ 山口研究室 後期博士課程3年 玉川 奨 (たまがわ すすむ) 居室：24－604 / 23－620 mail : [email protected] 1 演習問題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.background Color = “#0000FF”; } HTML <body onload=“showRect()”> <div id=“rect”></div> 2 </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 – value属性で値を指定 • テキストエリア – textarea要素 – rows属性で行数，cols属性で列数を表す • ボタン – input要素のtype属性がbutton（または，submit, reset） <form> <input type=“”>XXX <select> <option>～ </select> <textarea></textarea> </form> テキストボックスの入力値の取得 • テキストボックス内に入力したデータを、 ボタンが押されたらdiv要素に出力 • ex15.html 6 テキストボックスの入力値の取得 JavaScript function getValue() { var text = document.getElementById("input").value; document.getElementById("output").innerHTML = text; } function checkValue() { var text = document.getElementById("input").value; 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点"; 10 DOM（Document Object Model） • 文書のトップであるDocumentオブジェクトか ら下位の階層の構造を表すモデル 「JavaScript DOMリファレンス」 http://www.openspc2.org/JavaScript/JavaScript_DOM/ 11 DOM関数の例 • ex17.html • document.getElementById(id) – 引数に指定したidを持つDOMオブジェクトを返す • document.createElement(要素) – 引数で指定したHTML要素を作成する • オブジェクト.setAttribute(属性名, 値) – オブジェクトの属性に値をセットする • オブジェクト.appendChild(オブジェクト) – 指定したオブジェクトにオブジェクトを追加する DOM関数の例 JavaScript 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 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> select要素のsize属性の値を1にし， <option value="アザラシ">アザラシ</option> multipleを削除すれば良い． </select> （multipleを付けるとリストボックスで </form> 複数項目を選択できるようになる．） <div id="output"></div> チェックボックスで 選択された値の取得 • ex20.html チェックボックスで 選択された値の取得 JavaScript 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> 提出課題 21 課題１（基本） テキストボックスに幅と高さを入力し，背景色をラジオ ボタンから選択し，ボタンを押すと，div要素に入力した 値に応じた矩形が表示されるようにする ボタンを押すと 入力値に応じて 矩形が変化 課題１（発展） 発展課題（例） 余力がある人は，さらに，表示する 矩形の個数や枠の幅や色も指定 できるようにしてみましょう． 課題２ アンケート項目の内容を整形して画面に出力 必須 入力情報を画面に表示 1. テキストボックスとボタンを 用いて，div要素に入力内 容を整形して表示する 2. onclick以外のイベントハン ドラを最低１つは用いること 発展課題（例） 1. 入力値のチェック （空だったらアラートなど） 2. <table>タグを利用して出力 3. チェックボックスの活用 4. リストボックスの活用 自由課題 来年度のeビジネスソフトウェア論の 授業ページのデザインを考えてください レポート 締切 6月28日（金）23:59 までにメールを送信 メール宛先 To：[email protected] メールの件名 学籍番号_氏名_JS演習 学籍番号，アンダーバーは必ず半角でお願いします 添付すべきファイル wordファイル(レポート本文) ２～３枚程度，ファイル名「学籍番号_氏名_JS演習.doc」 課題1.html，課題2.html, (やった人は)自由課題.html JavaScriptとCSSを別ファイルにした場合には，それらのフ ァイルも添付すること レポート レポート本文に書くべき項目 動作確認行ったブラウザ(IE or Firefox) 作成したJavaScriptの解説 HTML，CSS，JavaScriptを書く上で工夫した点 感想 注意 課題１と２共に工夫をしなくても合格点は出ますが，工夫 がしてある場合には評価します 機能性・技術性・デザイン性・工夫した点を評価します CSS, JavaScriptはできれば別ファイルとして書く方が望 ましいです 問い合わせ先 • 第１研究室 24-604A • 第２研究室 23-620B E-mail: [email protected] 気軽にお越しください♪ 優しい山口研メンバーが待ってます。