javascript 　演習３

JavaScript 　演習３

1

山口研究室後期博士課程 3 年玉川　奨 ( たまがわすすむ )居室： 24 － 604 / 23 － 620mail : [email protected]

演習問題 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;">

</div>

<body onload=“showRect()”> <div id=“rect”></div></body>

function showRect() {document.getElementById(“rect”).style. ・・・・

document.getElementById(“rect”).style.backgroundColor = “#0000FF”;}

JavaScript

HTML

ヒント

本日の内容• イベント処理• 基本的なフォーム• テキストボックスの入力値の取得• 配列• 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

テキストボックスの入力値の取得

<form>文字を入力してください。 <br /> <input type="text" id="input“ onkeyup=“getValue()" /> <input type=“button” value=“ 値の確認 " onclick=“checkValue()" /></form><div id="output"></div>

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 リファレンス」http://www.openspc2.org/JavaScript/JavaScript_DOM/ 11

http://www.openspc2.org/JavaScript/JavaScript_DOM/

DOM 関数の例

• ex17.html• document.getElementById(id)

– 引数に指定した id を持つ DOM オブジェクトを返す• document.createElement( 要素 )

– 引数で指定した HTML 要素を作成する• オブジェクト .setAttribute( 属性名 , 値 )

– オブジェクトの属性に値をセットする• オブジェクト .appendChild( オブジェクト )

– 指定したオブジェクトにオブジェクトを追加する

DOM 関数の例

<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); }}

JavaScript

HTML

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

• ex18.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>

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 を元に，男を選択した場合には

青色マークを女を選択した場合には赤色マークを出力するようにせよ– ヒント：

<div id=“mark” style=“width: 15; height: 3; background-color: blue”>を<div id=“output”> 男 </div>の前に挿入

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

• ex19.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>

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;}

JavaScript

HTML

コンボボックスに変更したい場合は， select 要素の size 属性の値を 1 にし， multiple を削除すれば良い．（ multiple を付けるとリストボックスで複数項目を選択できるようになる．）

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

• ex20.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>

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;}

JavaScript

HTML

提出課題

21

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

ボタンを押すと

入力値に応じて矩形が変化

課題１（発展）発展課題（例）

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

課題２アンケート項目の内容を整形して画面に

出力

1. 入力値のチェック（空だったらアラートなど

）2. <table> タグを利用して出力3. チェックボックスの活用4. リストボックスの活用

発展課題（例）

入力情報を画面に表示

必須1. テキストボックスとボタ

ンを用いて， div 要素に入力内容を整形して表示する

2. onclick 以外のイベントハンドラを最低１つは用いること

自由課題

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

レポート締切

6月 28 日（金） 23:59 までにメールを送信メール宛先

To ： [email protected]メールの件名

学籍番号 _氏名 _JS 演習　学籍番号，アンダーバーは必ず半角でお願いします

添付すべきファイルword ファイル ( レポート本文 )　２～３枚程度，ファイル名「学籍番号 _氏名 _JS 演習 .doc 」課題 1.html ，課題 2.html, (やった人は )自由課題 .htmlJavaScript と CSS を別ファイルにした場合には，それらの

ファイルも添付すること

レポートレポート本文に書くべき項目

動作確認行ったブラウザ (IE or Firefox)作成した JavaScript の解説HTML ， CSS ， JavaScript を書く上で工夫し

た点感想

注意課題１と２共に工夫をしなくても合格点は出ますが，工夫がしてある場合には評価します

機能性・技術性・デザイン性・工夫した点を評価しますCSS, JavaScript はできれば別ファイルとして書く方

が望ましいです

問い合わせ先• 第１研究室 24-604A • 第２研究室 23-620B

気軽にお越しください♪優しい山口研メンバーが待ってます。

E-mail: 　[email protected]

javascript 演習３

Documents

javascript 　演習３