JavaScript 演習３

1

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

演習問題3

• div要素にid属性を指定し，JavaScriptプログラムによりdiv要素のCSSプロパティを設定し，以下の長方形を表示するプログラムを作成せよ

2

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リファレンス」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関数の例

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

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

演習問題５ • ex18.htmlを元に，男を選択した場合には青色マークを女を選択した場合には赤色マークを出力するようにせよ

– ヒント：

を 男 の前に挿入

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

• ex19.html

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

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

• 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以外のイベントハンドラを最低１つは用いること

レポート

締切

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

To：s_tamagawa@ae.keio.ac.jp

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

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

レポート

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

動作確認行ったブラウザ(IE or Firefox)

作成したJavaScriptの解説

HTML，CSS，JavaScriptを書く上で工夫した点

感想

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

機能性・技術性・デザイン性・工夫した点を評価します

CSS, JavaScriptはできれば別ファイルとして書く方が望ましいです

問い合わせ先

• 第１研究室 24-604A

• 第２研究室 23-620B

気軽にお越しください♪

優しい山口研メンバーが待ってます。

E-mail:

s_tamagawa@ae.keio.ac.jp