JavaScript 演習2...本日の内容 • prompt関数 • 演習1 • 演習2 •...

JavaScript 演習２

1

本日の内容

• prompt関数

• 演習１

• 演習2

• document.getElementById関数

• 演習3

• イベント処理

• 基本的なフォーム

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

• 演習4

IEにおけるJavaScriptのデバッグ方法

ＩＥを再起動

1. ツール→インターネットオプションメニューを実行

2. 詳細設定タブの「スクリプトエラーごとに通知を表示する」をチェック

「スクリプトのデバッグを使用しない(Internet Explorer)」のチェックをはずす

3. IEを再起動

関数

• 再利用可能なJavaScriptコードのかたまりに名前をつけたもの • ex7.html

function 関数名（引数） {

定義内容 return 戻り値;

}

4

関数名（引数）; var num = 関数名（引数）;

定義方法

呼び出し方法

document.write関数

• document.write(引数)－引数をHTMLとして表示させる

• ex8.html

5

var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>");

prompt関数 • prompt(引数)－引数をメッセージとして表示し，ユーザからの入力情報（文字列）を取得する関数

• ex9.html

6

var value = prompt("値を入力してください．");

alert(value);

document.write('<h1>prompt関数</h1>');

document.write('<h1>' +value + '</h1>');

演習問題１

• prompt関数とdocument.write関数を用いて，ユーザから入力されたテキスト，文字の色，文字のサイズ（%）に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい

7

条件分岐 • ex10.html, ex11.html

• if文

• switch文

8

if (条件1) {

文1;

} else if (条件2) {

文2;

・・・・・ } else {

文N;

}

条件の部分には，

論理値（true or false)

が入る

switch (テストデータ) {

case マッチデータ１:

文１;

break;

case マッチデータ２:

文２;

break;

default:

文３;

break;

}

break文を使って他の選択肢が実行されないようにする

マッチする選択肢が

なかったときに実行

繰り返し

• ex12.html

• for文

• while文

9

for (初期化; テスト; 更新) {

アクション;

}

初期化;

while (テスト) {

アクション;

更新;

}

parseInt関数とparseFloat関数

• parseInt(引数)

–引数で文字列を渡すと数値に変換

• parseFloat(引数)

–引数で文字列を渡すと浮動小数点に変換

• ex13.html

10

演習問題2

• “Hello!”という文字列をユーザが入力した数だけ表示するJavaScriptプログラムを作成しなさい

• 行数を5で割った余りが1の場合には赤色，２の場合には緑色，３の場合には黄色，4の場合には黒，0

の場合には青色，さらに，3の倍数の場合には200%の大きさで”Hello!”を表示しなさい

11

document.getElementById関数

• document.getElementById(引数)

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

• document.getElementById(引数).innerHTML

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

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

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

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

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

12

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

オブジェクトのイメージ

<body>

<h1 id="id1">Hello</h1>

</body>

document.getElementById(“id”)

属性：色 (style.color): black

HTMLテキスト (innerHTML): Hello

document.getElementById(“id”).innerHTML = ‘Hello, World’;

document.getElementById(“id”).style.color = ‘red’;

H1要素のオブジェクト

<body>

<h1 id="id1“ style=‘color: red’>Hello, World</h1>

</body>

document.getElementById関数

14

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プロパティを設定し，以下の長方形を表示するプログラムを作成せよ

15

<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

ヒント

イベント処理

• 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

18

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

<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イベントハンドラを用いること

• メッセージは上記のとおりでなくても良い

JavaScript 演習2...本日の内容 • prompt関数 • 演習1 • 演習2 •...

Documents

Transcript of JavaScript 演習2...本日の内容 • prompt関数 • 演習1 • 演習2 •...