26
JavaScript 演習2 1 山口研究室 後期博士課程3玉川 (たまがわ すすむ) 居室:24604 / 23620 mail : [email protected]

JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

JavaScript 演習2

1

山口研究室 後期博士課程3年

玉川 奨 (たまがわ すすむ)

居室:24-604 / 23-620

mail : [email protected]

Page 2: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

前回の補足説明+復習

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

• prompt関数

• 演習問題1

Page 3: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

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

IEを再起動

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

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

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

3. IEを再起動

Page 4: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

演習問題1

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

4

Page 5: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

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

• if文

• switch文

5

if (条件1) {

文1;

} else if (条件2) {

文2;

・・・・・ } else {

文N;

}

条件の部分には,

論理値(true or false)

が入る

switch (テストデータ) {

case マッチデータ1:

文1;

break;

case マッチデータ2:

文2;

break;

default:

文3;

break;

}

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

マッチする選択肢が

なかったときに実行

Page 6: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

繰り返し

• ex12.html

• for文

• while文

6

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

アクション;

}

初期化;

while (テスト) {

アクション;

更新;

}

Page 7: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

parseInt関数とparseFloat関数

• parseInt(引数)

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

• parseFloat(引数)

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

• ex13.html

7

Page 8: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

演習問題2

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

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

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

8

Page 9: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

本日の内容

• document.getElementById関数

• 演習3

• イベント処理

• 基本的なフォーム

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

• 演習4

Page 10: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

document.getElementById関数

• document.getElementById(引数)

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

• document.getElementById(引数).innerHTML

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

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

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

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

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

10

Page 11: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

オブジェクトのイメージ

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

Page 12: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

document.getElementById関数

12

function test() {

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

alert(h1Value);

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

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

alert(item1);

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

alert(item2);

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

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>

<li id="item2">項目2</li>

<li id="item3">項目3</li>

</ul>

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

</body>

JavaScript

HTML

onload=‘関数名’

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

divは「division(区画)」の略

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

JavaScriptで操作する対象になる

Page 13: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

演習問題3

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

13

<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

ヒント

Page 14: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

イベント処理

• JavaScriptでは、ユーザからの入力があるとWebブラウザがイベントを生成 – 例えば、キーボードを押したり、マウスを動かしたりクリックしたりするなど様々な場面でイベントが発生する

あるイベントが発生した際に、そのイベントに対するイベントハンドラを定義しておけば、インタラクティブなページを作ることが可能

イベントハンドラ 発生契機 サポートするHTML要素

onblur 要素が入力フォーカスを失った時 <button>, <input>, <label>,

<select>, <textarea>,<body>

onchange 入力フォーカスが移された時と要素の値が変わった時

<input>, <select>, <textarea>

onclick マウスを一回クリックした時 大半の要素

onmouseover マウスが要素の上に移動した 大半の要素

onkeydown(up) ユーザが何かキーを押した フォーム要素と<body>

onload ページが読み込まれた時 body要素と共によく用いられる

Page 15: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

基本的なフォーム • テキスト

– 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>

Page 16: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

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

• テキストボックス内に入力したデータを、

ボタンが押されたらdiv要素に出力

• ex15.html

16

Page 17: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

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

<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

Page 18: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

演習問題4

• テキストボックスを2つ作成し,入力値の加算結果をdiv要素に出力せよ

– parseFloat関数を利用すること

–余力があれば,数値かどうかのチェックも行うこと

• isNaN(Not a Number)関数を利用すると,入力値が数値かどうかを判別可能 (数値でない場合にtrueを返す)

演習問題4は提出する必要は

ありません.

Page 19: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

演習問題4 • さらに余力がある人は,テキストボックスの横のdiv要素に以下のメッセージを出力するようにしてみてください

– テキストボックスが空の場合には「数値を入力してください」

– テキストボックスが数値以外の場合には「数値ではありません」

– テキストボックスが数値の場合には「OK」

• ex15.htmlのonkeyupイベントハンドラを用いること

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

Page 20: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

提出課題

20

Page 21: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

課題1(基本)

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

ボタンを押すと

入力値に応じて

矩形が変化

Page 22: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

課題1(発展) 発展課題(例)

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

Page 23: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

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

1. 入力値のチェック

(空だったらアラートなど)

2. <table>タグを利用して出力

3. チェックボックスの活用

4. リストボックスの活用

発展課題(例)

入力情報を画面に表示

必須

1. テキストボックスとボタンを用いて,div要素に入力内容を整形して表示する

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

Page 24: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

レポート

締切

6月28日(金)23:59 までにメールを送信

メール宛先 To:[email protected]

メールの件名 学籍番号_氏名_JS演習

学籍番号,アンダーバーは必ず半角でお願いします

添付すべきファイル wordファイル(レポート本文)

2~3枚程度,ファイル名「学籍番号_氏名_JS演習.doc」 課題1.html,課題2.html

JavaScriptとCSSを別ファイルにした場合には,それらのファイルも添付すること

Page 25: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

レポート

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

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

作成したJavaScriptの解説

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

感想

注意

課題1と2共に工夫をしなくても合格点は出ますが,工夫がしてある場合には評価します

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

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

Page 26: JavaScript 演習2 - yamaguti.comp.ae.keio.ac.jp · parseInt関数とparseFloat関数 • parseInt(引数) –引数で文字列を渡すと数値に変換 • parseFloat(引数)

問い合わせ先

• 第1研究室 24-604A

• 第2研究室 23-620B

気軽にお越しください♪

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

E-mail:

[email protected]