Download
1 / 28
280 likes | 395 Views
JavaScript 演習３. 山口研究室 後期博士課程 3 年 玉川 奨 ( たまがわ すすむ ) 居室： 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 ;
E N D
JavaScript 演習３ 山口研究室 後期博士課程3年 玉川 奨 (たまがわ すすむ) 居室：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 HTML function showRect() { document.getElementById(“rect”).style.・・・・ document.getElementById(“rect”).style.backgroundColor = “#0000FF”; } <body onload=“showRect()”> <div id=“rect”></div> </body>
本日の内容 • イベント処理 • 基本的なフォーム • テキストボックスの入力値の取得 • 配列 • DOM（Document Object Model） • ラジオボタンで選択された値の取得 • リスト（コンボ）ボックスで選択された値の取得 • チェックボックスで選択された値の取得 • 提出課題
イベント処理 • JavaScriptでは、ユーザからの入力があるとWebブラウザがイベントを生成 • 例えば、キーボードを押したり、マウスを動かしたりクリックしたりするなど様々な場面でイベントが発生する あるイベントが発生した際に、そのイベントに対するイベントハンドラを定義しておけば、インタラクティブなページを作ることが可能
基本的なフォーム • テキスト • 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
テキストボックスの入力値の取得 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点";
DOM（Document Object Model） • 文書のトップであるDocumentオブジェクトから下位の階層の構造を表すモデル 「JavaScript DOMリファレンス」http://www.openspc2.org/JavaScript/JavaScript_DOM/
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(){ 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; 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>"; varselectElement = document.getElementById("select_element"); for (vari = 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 function getCheckBoxValue(){ var html = "<ul>"; varcheckboxForm = document.getElementById("checkbox_form"); for (vari = 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要素に入力した値に応じた矩形が表示されるようにする ボタンを押すと 入力値に応じて 矩形が変化
課題１（発展） 発展課題（例） 余力がある人は，さらに，表示する矩形の個数や枠の幅や色も指定できるようにしてみましょう．
課題２ アンケート項目の内容を整形して画面に出力 • 入力値のチェック （空だったらアラートなど） 2. <table>タグを利用して出力 3. チェックボックスの活用 4. リストボックスの活用 必須 • テキストボックスとボタンを用いて，div要素に入力内容を整形して表示する • onclick以外のイベントハンドラを最低１つは用いること 入力情報を画面に表示 発展課題（例）
自由課題 来年度のeビジネスソフトウェア論の 授業ページのデザインを考えてください
レポート • 締切 • 6月28日（金）23:59 までにメールを送信 • メール宛先 • To：s_tamagawa@ae.keio.ac.jp • メールの件名 • 学籍番号_氏名_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: s_tamagawa@ae.keio.ac.jp 気軽にお越しください♪ 優しい山口研メンバーが待ってます。
