JavaScript 演習3 › japanese › 2014-e...DOM関数の例 • ex17.html •...

JavaScript 演習３

1

document.getElementById関数

• document.getElementById(引数)

– 引数で指定した要素オブジェクトを得る

• document.getElementById(引数).innerHTML

– 引数で指定した要素オブジェクトのHTMLを得る

• document.getElementById(引数).style.CSSプロパティ

– 引数で指定した要素オブジェクトのCSSプロパティを得る

– CSSプロパティ名は，基本的には「ハイフン(-)」を除去し，ハイフンの後の文字を大文字に変換したものを用いる

– 参考： http://codepunk.hardwar.org.uk/css2js.htm

2

http://codepunk.hardwar.org.uk/css2js.htm

document.getElementById関数

3

function test() {

var h1Value = document.getElementById("id1").innerHTML;

alert(h1Value);

document.getElementById("id1").innerHTML = prompt('');

var item1 = document.getElementById("item1").innerHTML;

alert(item1);


alert(item2);


alert(item3);

document.getElementById("divid").innerHTML = "テスト";

document.getElementById("divid").style.color = "red";

document.getElementById("divid").style.fontSize = "200%";

document.getElementById("divid").style.backgroundColor = "black";

}

ex14.html

<body onload='test()'>

<h1 id="id1">document.getElementById関数</h1>

<ul>

<li id="item1">項目1</li>



</ul>

<div id="divid"></div>

</body>

JavaScript

HTML

onload=‘関数名’

ドキュメントが完全に読み込まれた後に指定した関数を呼び出す

divは「division（区画）」の略

他の要素をまとめて，構造化する際に用いられる

JavaScriptで操作する対象になる

演習問題3

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

4

<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.background

Color = “#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

8

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

<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点";

配列の添字を文字列にすることができる

12

DOM（Document Object Model）

• 文書のトップであるDocumentオブジェクトから下位の階層の構造を表すモデル

「JavaScript DOMリファレンス」http://www.openspc2.org/JavaScript/JavaScript_DOM/

13

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>


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>


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

JavaScript 演習3 › japanese › 2014-e...DOM関数の例 • ex17.html •...

Documents

Transcript of JavaScript 演習3 › japanese › 2014-e...DOM関数の例 • ex17.html •...