JavaScript 2 - yamaguti.comp.ae.keio.ac.jp · •条件分岐 •繰り返し •文字列を数値に変換する方法 •演習問題2-2 •演習問題2-3 •document.getElementByIdメソッド

JavaScript 演習2

JavaScript 演習の概要

• 1回目

– JavaScriptの概要

– 開発環境の整備

– JavaScriptの基本文法1

• 2回目

– JavaScriptの基本文法2

• 3回目

– イベント処理1

• 4回目

– イベント処理2

– DOM (Document Object Model)

2

JavaScript 演習2の内容

• promptメソッド

• window.setTimeout

• 演習問題2-1

• 条件分岐

• 繰り返し

• 文字列を数値に変換する方法

• 演習問題2-2

• 演習問題2-3

• document.getElementByIdメソッド

• 演習問題2-4

3

promptメソッド4

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

• 正式にはwindow.promptだが，「window.」は省略可能

• ex9.html, js/ex9.js

window.setTimeout5

window.setTimeout(function(){// ここに処理内容を書く

}, 500);

画面上にHTMLの内容を表示する前にprompt関数によりダイアログが表示されるため、0.5秒 (500ミリ秒) 待ってから処理を行う

演習問題2-1

promptメソッドとdocument.body.innerHTMLを用いて，ユーザから入力されたテキストと文字の色に応じて，表示内容を変化させるJavaScriptプログラムを書きなさい

6

条件分岐

• ex10.html, ex11.html, js/ex10.js, js/ex11.js

• if文

• switch文

7

if (条件1) {文1;

} else if (条件2) {文2;・・・・・

} else {文N;

}

条件の部分には，論理値（true or false)

が入る

switch (テストデータ) {case マッチデータ１:

文１;

break;case マッチデータ２:

文２;

break;default:

文３;

break;}

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

マッチする選択肢がなかったときに実行

繰り返し


• for文

• while文

8

for (初期化; テスト; 更新) {アクション;

}

初期化;while (テスト) {

アクション;更新;

}

文字列を数値に変換する方法

• parseInt(引数)

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

– 実数文字列を渡した場合，小数点以下は無視される

• parseFloat(引数)

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

• Number(引数)

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

– 数値以外の文字列を渡した場合，NaNが返る

• isNaN(引数)

– 引数に渡された文字列が数値文字列でない場合にtrueを返す（数値文字列の場合はfalseを返す）


9

演習問題2-2

演習問題2-1を拡張して，指定した文字列と色とフォントサイズを，指定した回数表示するJavaScriptプログラムを書きなさい

10

演習問題2-3

• 3択クイズのJavaScriptプログラムを作成しなさい

– document.body.innerHTMLを用いて，クイズの問題と選択肢を表示しなさい

– promptメソッドにより番号を入力し，正解か不正解かをdocument.body.innerHTMLを用いて表示しなさい

– 正解の時と不正解の時で，フォントの色などを変更してみてください

11

3択クイズの例

document.getElementByIdメソッド

• document.getElementById(引数)

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

• document.getElementById(引数).textContent

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

• document.getElementById(引数).innerHTML

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

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

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

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

• 参考： http://www.w3schools.com/jsref/dom_obj_style.asp

12

http://www.w3schools.com/jsref/dom_obj_style.asp

オブジェクトのイメージ

<body>

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

</body>

document.getElementById("id1")

属性：色 (style.color): black

HTMLテキスト (innerHTML): Hello

document.getElementById("id1").innerHTML = 'Hello, World';

document.getElementById("id1").style.color = 'red';

H1要素のオブジェクト

<body>

<h1 id="id1" style='color: red'>Hello, World</h1>

</body>

ex14.html, js/ex14.js

13

document.getElementById関数

• ex15, js/ex15.js

• 各idに対応する要素の内容を取得してコンソールに表示

• id1の要素の内容をpromptから入力した文字列に変更

• div要素の内容を色：red，サイズ:200%，背景色：lightgray，文字列:テストに変更

– divはdivisionの略で，他の要素をグループ化する際などに用いられる

14

演習問題2-４

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

<div style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: lightgray; border: thick solid black; visibility: visible;"></div>

<body><div id=“rect” /><script src="js/js-ex2-1.js"></script>

</body>

document.getElementById(“rect”).style.・・・・document.getElementById(“rect”).style.backgroundColor = “lightgray”;

JavaScript HTMLヒント

15

Documents

JavaScript 2 - yamaguti.comp.ae.keio.ac.jp · •条件分岐 •繰り返し •文字列を数値に変換する方法 •演習問題2-2 •演習問題2-3 •document.getElementByIdメソッド