JavaScript演習

JavaScript 演習２
山口研究室後期博士課程2年
玉川奨 (たまがわすすむ)
居室：24－604 / 23－620
mail : [email protected]
1
前回の補足説明＋復習
• IEにおけるJavaScriptのデバッグ方法
• prompt関数
• 演習問題１
IEにおけるJavaScriptのデバッグ方法
1. ツール→インターネットオプションメニューを実行
2. 詳細設定タブの「スクリプトエラーごとに通知を表示する」をチェック
「スクリプトのデバッグを使用しない(Internet Explorer)」のチェックを
はずす
3. IEを再起動
ＩＥを再起動
演習問題１
• prompt関数とdocument.write関数を用いて
，ユーザから入力されたテキスト，文字の色，
文字のサイズ（%）に応じて，表示内容を変化
させるJavaScriptプログラムを書きなさい
4
条件分岐
• ex10.html, ex11.html
if (条件1) {
• if文
文1;
} else if (条件2) {
文2;
・・・・・
} else {
文N;
}
条件の部分には，
論理値（true or false)
が入る
• switch文
マッチする選択肢が
なかったときに実行
switch (テストデータ) {
case マッチデータ１:
文１;
break;
case マッチデータ２:
文２;
break;
default:
文３;
break;
}
break文を使って他の選択肢が
実行されないようにする
5
繰り返し
• ex12.html
• for文
for (初期化; テスト; 更新) {
アクション;
}
• while文
初期化;
while (テスト) {
アクション;
更新;
}
6
parseInt関数とparseFloat関数
• parseInt(引数)
– 引数で文字列を渡すと数値に変換
• parseFloat(引数)
– 引数で文字列を渡すと浮動小数点に変換
• ex13.html
7
演習問題2
• “Hello!”という文字列をユーザが入力した数だけ表
示するJavaScriptプログラムを作成しなさい
• 行数を5で割った余りが1の場合には赤色，２の場
合には緑色，３の場合には黄色，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>
<body>
<h1
<h1
id="id1“
id="id1">Hello</h1>
style=‘color: red’>Hello, World</h1>
</body>
</body>
document.getElementById(“id”)
H1要素のオブジェクト
属性：
色 (style.color): black
HTMLテキスト (innerHTML): Hello
document.getElementById(“id”).style.color = ‘red’;
document.getElementById(“id”).innerHTML = ‘Hello, World’;
document.getElementById関数
ex14.html
JavaScript
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";
}
HTML
onload=‘関数名’
<body onload='test()'>
<h1 id="id1">document.getElementById関数</h1>
ドキュメントが完全に
読み込まれた後に指
定した関数を呼び出す
<ul>
divは「division（区画）」の略
<li id="item1">項目1</li>
<li id="item2">項目2</li>
<li id="item3">項目3</li>
</ul>
<div id="divid"></div>
</body>
他の要素をまとめて，構造化する際に
用いられる
JavaScriptで操作する対象になる
12
演習問題3
• div要素にid属性を指定し，JavaScriptプログラムに
よりdiv要素のCSSプロパティを設定し，以下の長方
形を表示するプログラムを作成せよ
<div style="position:absolute;
top:40; left:40;
width:150; height:250;
background-color:#0000FF;
border: thick solid red;
visibility: visible;">
</div>
JavaScript
ヒント
function showRect() {
document.getElementById(“rect”).style.・・・・
document.getElementById(“rect”).style.background
Color = “#0000FF”;
}
HTML
<body onload=“showRect()”>
<div id=“rect”></div>
13
</body>
イベント処理
• 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
テキストボックスの入力値の取得
JavaScript
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");
}
}
HTML
<form>
文字を入力してください。 <br />
<input type="text" id="input“ onkeyup=“getValue()" />
<input type=“button” value=“値の確認" onclick=“checkValue()" />
</form>
<div id="output"></div>
演習問題４
• テキストボックスを２つ作成し，入力値の加算
結果をdiv要素に出力せよ
– parseFloat関数を利用すること
– 余力があれば，数値かどうかのチェックも行うこと
• isNaN（Not a Number）関数を利用すると，入力値が数
値かどうかを判別可能 (数値でない場合にtrueを返す）
演習問題４は提出する必要は
ありません．
演習問題４
• さらに余力がある人は，テキストボックスの横のdiv要素に
以下のメッセージを出力するようにしてみてください
– テキストボックスが空の場合には「数値を入力してください」
– テキストボックスが数値以外の場合には「数値ではありません」
– テキストボックスが数値の場合には「ＯＫ」
• ex15.htmlのonkeyupイベントハンドラを用いること
• メッセージは上記のとおりでなくても良い
提出課題
20
課題１（基本）
テキストボックスに幅と高さを入力し，背景色をラジオ
ボタンから選択し，ボタンを押すと，div要素に入力した
値に応じた矩形が表示されるようにする
ボタンを押すと
入力値に応じて
矩形が変化
課題１（発展）
発展課題（例）
余力がある人は，さらに，表示する
矩形の個数や枠の幅や色も指定
できるようにしてみましょう．
課題２
アンケート項目の内容を整形して画面に出力
必須
入力情報を画面に表示
1. テキストボックスとボタンを
用いて，div要素に入力内
容を整形して表示する
2. onclick以外のイベントハン
ドラを最低１つは用いること
発展課題（例）
1. 入力値のチェック
（空だったらアラートなど）
2. <table>タグを利用して出力
3. チェックボックスの活用
4. リストボックスの活用
レポート
締切
6月22日（金）23:59 までにメールを送信
 メール宛先
 To：[email protected]
 メールの件名
 学籍番号_氏名_JS演習
学籍番号，アンダーバーは必ず半角でお願いします
 添付すべきファイル
 wordファイル(レポート本文)
２～３枚程度，ファイル名「学籍番号_氏名_JS演習.doc」
 課題1.html，課題2.html
 JavaScriptとCSSを別ファイルにした場合には，それらのフ
ァイルも添付すること
レポート
 レポート本文に書くべき項目
動作確認行ったブラウザ(IE or Firefox)
作成したJavaScriptの解説
HTML，CSS，JavaScriptを書く上で工夫した点
感想
 注意
 課題１と２共に工夫をしなくても合格点は出ますが，工夫
がしてある場合には評価します
 機能性・技術性・デザイン性・工夫した点を評価します
 CSS, JavaScriptはできれば別ファイルとして書く方が望
ましいです
問い合わせ先
• 第１研究室 24-604A
• 第２研究室 23-620B
E-mail:
[email protected]
気軽にお越しください♪
優しい山口研メンバーが待ってます。

Download Report