JavaScript 演習３ 1 山口研究室 後期博士課程 3 年 玉川 奨 ( たまがわ すすむ ) 居室： 24 － 604 / 23 － 620 mail :

Presentation on theme: "JavaScript 演習３ 1 山口研究室 後期博士課程 3 年 玉川 奨 ( たまがわ すすむ ) 居室： 24 － 604 / 23 － 620 mail :"— Presentation transcript:

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

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

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

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

5 基本的なフォーム テキスト –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 ） XXX ～

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

7 テキストボックスの入力値の取 得 文字を入力してください。 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"); } JavaScript HTML

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

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

10 配列 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

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

12 DOM 関数の例 ex17.html document.getElementById(id) – 引数に指定した id を持つ DOM オブジェクトを 返す document.createElement( 要素 ) – 引数で指定した HTML 要素を作成する オブジェクト.setAttribute( 属性名, 値 ) – オブジェクトの属性に値をセットする オブジェクト.appendChild( オブジェクト ) – 指定したオブジェクトにオブジェクトを追加 する

13 DOM 関数の例 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); } JavaScript HTML

14 ラジオボタンで選択された値の取得 ex18.html

15 ラジオボタンで選択された値の取 得 あなたの性別を教えて下さい． 男 女 男 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; } JavaScript HTML

16 演習問題５ ex18.html を元に，男を選択した場合には 青色マークを女を選択した場合には赤色 マークを出力するようにせよ – ヒント： を 男 の前に挿入

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

18 リスト（コンボ）ボックスで 選択された値の取得 ペンギン トラ ライオン アザラシ function getSelectValue(){ var html = " "; var selectElement = document.getElementById("select_element"); for (var i = 0; i < selectElement.length; i++) { var item = selectElement.options[i]; if (item.selected) { html += " " + item.value + " "; } html += " "; document.getElementById("output").innerHTML = html; } JavaScript HTML コンボボックスに変更したい場合 は， select 要素の size 属性の値を 1 にし， multiple を削除すれば良い． （ multiple を付けるとリストボッ クスで複数項目を選択できるよう になる．）

19 チェックボックスで 選択された値の取得 ex20.html

20 チェックボックスで 選択された値の取得 ペンギン トラ ライオン アザラシ function getCheckBoxValue(){ var html = " "; var checkboxForm = document.getElementById("checkbox_form"); for (var i = 0; i < checkboxForm.length; i++) { var checkbox = checkboxForm.elements[i]; if (checkbox.checked) { html += " " + checkbox.value + " "; } html += " "; document.getElementById("output").innerHTML = html; } JavaScript HTML

21 提出課題 21

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

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

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

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

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

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

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