前回の補足説明＋復習
• IEにおけるJavaScriptのデバッグ方法
• prompt関数
IEにおけるJavaScriptのデバッグ方法
ＩＥを再起動
1. ツール→インターネットオプションメニューを実行
2. 詳細設定タブの「スクリプトエラーごとに通知を表示する」をチェック
「スクリプトのデバッグを使用しない(Internet Explorer)」のチェックを
はずす
3. IEを再起動
演習問題１
• prompt関数とdocument.write関数を用いて
，ユーザから入力されたテキスト，文字の色，
文字のサイズ（%）に応じて，表示内容を変化
させるJavaScriptプログラムを書きなさい
条件分岐
• ex10.html, ex11.html
• if文
• switch文
5if
(条件1) {
文1;
}
else if
(条件2) {
文2;
・・・・・
}
else
{
文N;
}
条件の部分には，
論理値（true or false)
が入る
switch (テストデータ) { case マッチデータ１: 文１; break; case マッチデータ２: 文２; break; default: 文３; break; } break文を使って他の選択肢が 実行されないようにする マッチする選択肢が なかったときに実行繰り返し
• ex12.html
• for文
• while文
for (初期化; テスト; 更新) {
アクション;
}
初期化;
while (テスト) {
アクション;
更新;
}
parseInt関数とparseFloat関数
• parseInt(引数)
– 引数で文字列を渡すと数値に変換
• parseFloat(引数)
– 引数で文字列を渡すと浮動小数点に変換
• ex13.html
7演習問題2
• “Hello!”という文字列をユーザが入力した数だけ表
示するJavaScriptプログラムを作成しなさい
• 行数を5で割った余りが1の場合には赤色，２の場
合には緑色，３の場合には黄色，4の場合には黒，0
の場合には青色，さらに，3の倍数の場合には
200%の大きさで”Hello!”を表示しなさい
本日の内容
• 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>
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>
基本的なフォーム
•
テキスト
– 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要素に出力
テキストボックスの入力値の取得
<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"); } }
