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

演習問題 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 ヒント

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

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

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

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

演習問題４ テキストボックスを２つ作成し，入力値の 加算結果を 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 リファレンス」

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

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

ラジオボタンで選択された値の取得 ex18.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; } JavaScript HTML

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

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

リスト（コンボ）ボックスで 選択された値の取得 ペンギン トラ ライオン アザラシ 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 を付けるとリストボッ クスで複数項目を選択できるよう になる．）

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

チェックボックスで 選択された値の取得 ペンギン トラ ライオン アザラシ 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

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

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

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

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

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

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

問い合わせ先 第１研究室 A 第２研究室 B 気軽にお越しください ♪ 優しい山口研メンバーが待ってます。