前回の補足説明+復習
• IEにおけるJavaScriptのデバッグ方法
• prompt関数
• 演習問題1
IEにおけるJavaScriptのデバッグ方法
IEを再起動
1. ツール→インターネットオプションメニューを実行
2. 詳細設定タブの「スクリプトエラーごとに通知を表示する」をチェック
「スクリプトのデバッグを使用しない(Internet Explorer)」のチェックをはずす
3. IEを再起動
演習問題1
• prompt関数とdocument.write関数を用いて,ユーザから入力されたテキスト,文字の色,文字のサイズ(%)に応じて,表示内容を変化させるJavaScriptプログラムを書きなさい
4
条件分岐 • 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文を使って他の選択肢が実行されないようにする
マッチする選択肢が
なかったときに実行
繰り返し
• ex12.html
• for文
• while文
6
for (初期化; テスト; 更新) {
アクション;
}
初期化;
while (テスト) {
アクション;
更新;
}
parseInt関数とparseFloat関数
• parseInt(引数)
–引数で文字列を渡すと数値に変換
• parseFloat(引数)
–引数で文字列を渡すと浮動小数点に変換
• ex13.html
7
演習問題2
• “Hello!”という文字列をユーザが入力した数だけ表示するJavaScriptプログラムを作成しなさい
• 行数を5で割った余りが1の場合には赤色,2の場合には緑色,3の場合には黄色,4の場合には黒,0
の場合には青色,さらに,3の倍数の場合には200%の大きさで”Hello!”を表示しなさい
8
本日の内容
• document.getElementById関数
• 演習3
• イベント処理
• 基本的なフォーム
• テキストボックスの入力値の取得
• 演習4
document.getElementById関数
• document.getElementById(引数)
– 引数で指定した要素オブジェクトを得る
• document.getElementById(引数).innerHTML
– 引数で指定した要素オブジェクトのHTMLを得る
• document.getElementById(引数).style.CSSプロパティ
– 引数で指定した要素オブジェクトのCSSプロパティを得る
– CSSプロパティ名は,基本的には「ハイフン(-)」を除去し,ハイフンの後の文字を大文字に変換したものを用いる
– 参考: http://codepunk.hardwar.org.uk/css2js.htm
10
オブジェクトのイメージ
<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関数
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で操作する対象になる
演習問題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
ヒント
イベント処理
• 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
16
テキストボックスの入力値の取得
<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
演習問題4
• テキストボックスを2つ作成し,入力値の加算結果をdiv要素に出力せよ
– parseFloat関数を利用すること
–余力があれば,数値かどうかのチェックも行うこと
• isNaN(Not a Number)関数を利用すると,入力値が数値かどうかを判別可能 (数値でない場合にtrueを返す)
演習問題4は提出する必要は
ありません.
演習問題4 • さらに余力がある人は,テキストボックスの横のdiv要素に以下のメッセージを出力するようにしてみてください
– テキストボックスが空の場合には「数値を入力してください」
– テキストボックスが数値以外の場合には「数値ではありません」
– テキストボックスが数値の場合には「OK」
• ex15.htmlのonkeyupイベントハンドラを用いること
• メッセージは上記のとおりでなくても良い
提出課題
20
課題1(基本)
テキストボックスに幅と高さを入力し,背景色をラジオボタンから選択し,ボタンを押すと,div要素に入力した値に応じた矩形が表示されるようにする
ボタンを押すと
入力値に応じて
矩形が変化
課題1(発展) 発展課題(例)
余力がある人は,さらに,表示する矩形の個数や枠の幅や色も指定できるようにしてみましょう.
課題2 アンケート項目の内容を整形して画面に出力
1. 入力値のチェック
(空だったらアラートなど)
2. <table>タグを利用して出力
3. チェックボックスの活用
4. リストボックスの活用
発展課題(例)
入力情報を画面に表示
必須
1. テキストボックスとボタンを用いて,div要素に入力内容を整形して表示する
2. onclick以外のイベントハンドラを最低1つは用いること
レポート
締切
6月28日(金)23:59 までにメールを送信
メール宛先 To:[email protected]
メールの件名 学籍番号_氏名_JS演習
学籍番号,アンダーバーは必ず半角でお願いします
添付すべきファイル wordファイル(レポート本文)
2~3枚程度,ファイル名「学籍番号_氏名_JS演習.doc」 課題1.html,課題2.html
JavaScriptとCSSを別ファイルにした場合には,それらのファイルも添付すること
レポート
レポート本文に書くべき項目
動作確認行ったブラウザ(IE or Firefox)
作成したJavaScriptの解説
HTML,CSS,JavaScriptを書く上で工夫した点
感想
注意
課題1と2共に工夫をしなくても合格点は出ますが,工夫がしてある場合には評価します
機能性・技術性・デザイン性・工夫した点を評価します
CSS, JavaScriptはできれば別ファイルとして書く方が望ましいです