JavaScript演習

JavaScript 演習２
1
前回の補足説明＋復習
• IEにおけるJavaScriptのデバッグ方法
• prompt関数
• 演習問題１
IEにおけるJavaScriptのデバッグ方法
1. ツール→インターネットオプションメニューを実行
2. 詳細設定タブの「スクリプトエラーごとに通知を表示する」をチェック
「スクリプトのデバッグを使用しない(Internet Explorer)」のチェックを
はずす
3. IEを再起動
ＩＥを再起動
prompt関数
• prompt(引数)－引数をメッセージとして表示し，ユーザから
の入力情報（文字列）を取得する関数
• ex9.html
var value = prompt("値を入力してください．");
alert(value);
document.write('<h1>prompt関数</h1>');
document.write('<h1>' +value + '</h1>');
4
演習問題１
• prompt関数とdocument.write関数を用いて
，ユーザから入力されたテキスト，文字の色，
文字のサイズ（%）に応じて，表示内容を変化
させるJavaScriptプログラムを書きなさい
ヒント
上記の例をタグで表現すると・・・
<p style=‘color:red; fontsize:200%;'>Hello, World</p> 5
本日の内容
• 条件分岐
• 繰り返し
• parseInt関数とparseFloat
関数
• 演習2
• document.getElementById
関数
• 演習3
•
•
•
•
•
•
イベント処理
基本的なフォーム
テキストボックスの入力値の取得
配列
DOM（Document Object Model）
ラジオボタンで選択された値の取
得
• リスト（コンボ）ボックスで選択され
た値の取得
• チェックボックスで選択された値の
取得
• 提出課題
条件分岐
• 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文を使って他の選択肢が
実行されないようにする
7
繰り返し
• ex12.html
• for文 for (初期化; テスト; 更新) {
アクション;
}
for (var i=0;i<5;i++) {
document.write("<p>" + i + "</p>");
}
• while文
初期化;
while (テスト) {
アクション;
更新;
}
var i = 0;
while(i< 5){
document.write("<p>" + i + "</p>");
i++;
}
8
parseInt関数とparseFloat関数
• parseInt(引数)
– 引数で文字列を渡すと数値に変換
• parseFloat(引数)
– 引数で文字列を渡すと浮動小数点に変換
• ex13.html
9
演習問題2
• “Hello!”という文字列をユーザが入力した数だけ表
示するJavaScriptプログラムを作成しなさい
• 行数を5で割った余りが1の場合には赤色，２の場
合には緑色，３の場合には黄色，4の場合には黒，0
の場合には青色，さらに，3の倍数の場合には
200%の大きさで”Hello!”を表示しなさい
ヒント
1%5=1, 2%5=2, 3%5=3 ・・・
<p style=‘color:red;>Hello!</p>
<p style=‘color:green;>Hello!</p>
<p style=‘color:yellow;>Hello!</p>
10
document.getElementById関数
• document.getElementById(引数)
– 引数で指定した要素オブジェクトを得る
• document.getElementById(引数).innerHTML
– 引数で指定した要素オブジェクトのHTMLを得る
• document.getElementById(引数).style.CSSプロパティ
– 引数で指定した要素オブジェクトのCSSプロパティを得る
– CSSプロパティ名は，基本的には「ハイフン(-)」を除去し，ハイ
フンの後の文字を大文字に変換したものを用いる
– 参考： http://codepunk.hardwar.org.uk/css2js.htm
11
オブジェクトのイメージ
<body>
<body>
<h1
<h1
id="id1“
id="id1">Hello</h1>
style=‘color: red’>Hello, World</h1>
</body>
</body>
document.getElementById(“id1”)
H1要素のオブジェクト
属性：
色 (style.color): black
HTMLテキスト (innerHTML): Hello
document.getElementById(“id1”).style.color = ‘red’;
document.getElementById(“id1”).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で操作する対象になる
13
演習問題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
HTML
function showRect() {
document.getElementById(“rect”).style.・・・・
}
<body onload=“showRect()”>
<div id=“rect”></div>
14
</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
17
テキストボックスの入力値の取得
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イベントハンドラを用いること
• メッセージは上記のとおりでなくても良い
配列
• ex16.html
• 配列の生成
var a = new Array();
a[0] = 1.2;
a[1] = "JavaScript";
a[2] = true;
a[3] = {x:1, y:3};
var a =
[1.2, "JavaScript", true, {x:1, y:3}];
オブジェクトの型が異なっても格納することができる
• 配列のサイズを指定するときは
var a = new Array(10);
• 連想配列配列の添字を文字列にすることができる
a[score] = "88点";
21
DOM（Document Object Model）
• 文書のトップであるDocumentオブジェクトか
ら下位の階層の構造を表すモデル
「JavaScript DOMリファレンス」
http://www.openspc2.org/JavaScript/JavaScript_DOM/
22
DOM関数の例
• ex17.html
• document.getElementById(id)
– 引数に指定したidを持つDOMオブジェクトを返す
• document.createElement(要素)
– 引数で指定したHTML要素を作成する
• オブジェクト.setAttribute(属性名, 値)
– オブジェクトの属性に値をセットする
• オブジェクト.appendChild(オブジェクト)
– 指定したオブジェクトにオブジェクトを追加する
DOM関数の例
JavaScript
function domTest() {
var divObj = document.getElementById("dom_test");
var h1Obj = document.createElement("h1");
h1Obj.setAttribute("style", "color: navy;");
h1Obj.innerHTML = "Hello, World!";
divObj.appendChild(h1Obj);
var colorArray = ["red", "blue", "green", "yellow"];
for (var i = 0; i < colorArray.length; i++) {
var pObj = document.createElement("p");
pObj.innerHTML = "DOMを用いて追加された段落" + i;
pObj.style.fontSize = "200%";
pObj.style.color = colorArray[i];
divObj.appendChild(pObj);
}
}
HTML
<div id="dom_test"></div>
ラジオボタンで選択された値の取得
• ex18.html
ラジオボタンで選択された値の取得
JavaScript
function getRadioValue(){
var radioForm = document.getElementById("radio_form");
for (var i = 0; i < radioForm.length; i++) {
var radioButton = radioForm.elements[i];
if (radioButton.checked) {
document.getElementById("output").innerHTML = radioButton.value;
break;
}
}
}
HTML
<form id="radio_form“ onclick=“getRadioValue()”>
あなたの性別を教えて下さい．<br/>
<input type=“radio” name= "性別" value="男" checked="checked" />男
<input type=“radio” name= "性別" value="女" />女
</form>
<div id="output">男</div>
演習問題５
• ex18.htmlを元に，男を選択した場合には青
色マークを女を選択した場合には赤色マーク
を出力するようにせよ
– ヒント：
<div id=“mark” style=“width: 15; height: 3; background-color: blue”>
を
<div id=“output”>男</div>
の前に挿入
演習問題５は提出する必要は
ありません．
リスト（コンボ）ボックスで
選択された値の取得
• ex19.html
リスト（コンボ）ボックスで
選択された値の取得
JavaScript
function getSelectValue(){
var html = "<ul>";
var selectElement = document.getElementById("select_element");
for (var i = 0; i < selectElement.length; i++) {
var item = selectElement.options[i];
if (item.selected) {
html += "<li>" + item.value + "</li>";
}
}
html += "</ul>";
document.getElementById("output").innerHTML = html;
}
HTML
<form>
<select id="select_element" name=“animal" size="4" onclick="getSelectValue()" multiple>
<option value="ペンギン">ペンギン</option>
<option value="トラ">トラ</option>
コンボボックスに変更したい場合は，
<option value="ライオン">ライオン</option>
select要素のsize属性の値を1にし，
<option value="アザラシ">アザラシ</option>
multipleを削除すれば良い．
</select>
（multipleを付けるとリストボックスで
</form>
複数項目を選択できるようになる．）
<div id="output"></div>
チェックボックスで
選択された値の取得
• ex20.html
チェックボックスで
選択された値の取得
JavaScript
function getCheckBoxValue(){
var html = "<ul>";
var checkboxForm = document.getElementById("checkbox_form");
for (var i = 0; i < checkboxForm.length; i++) {
var checkbox = checkboxForm.elements[i];
if (checkbox.checked) {
html += "<li>" + checkbox.value + "</li>";
}
}
html += "</ul>";
document.getElementById("output").innerHTML = html;
}
HTML
<form id="checkbox_form" name="animal" onclick="getCheckBoxValue()">
<input type="checkbox" value="ペンギン" />ペンギン
<input type="checkbox" value="トラ" />トラ
<input type="checkbox" value="ライオン" />ライオン
<input type="checkbox" value="アザラシ" />アザラシ
</form>
<div id="output"></div>
提出課題
32
課題１（基本）
テキストボックスに幅と高さを入力し，背景色をラジオ
ボタンから選択し，ボタンを押すと，div要素に入力した
値に応じた矩形が表示されるようにする
ボタンを押すと
入力値に応じて
矩形が変化
課題１（発展）
発展課題（例）
余力がある人は，さらに，表示する
矩形の個数や枠の幅や色も指定
できるようにしてみましょう．
課題２
アンケート項目の内容を整形して画面に出力
必須
入力情報を画面に表示
1. テキストボックスとボタンを
用いて，div要素に入力内
容を整形して表示する
2. onclick以外のイベントハン
ドラを最低１つは用いること
発展課題（例）
1. 入力値のチェック
（空だったらアラートなど）
2. <table>タグを利用して出力
3. チェックボックスの活用
4. リストボックスの活用
レポート１
• 授業中に行った演習問題１，２，３を以下のアドレ
スにメールで提出
– 提出先
• To：[email protected]
– 提出期限
• ６月３日（金）１３：００まで：次回授業前まで
– メールの件名: 学籍番号_氏名_JS演習1
• ファイル名は以下のようにすること
– 学籍番号_氏名_JS演習問題1.html
– 学籍番号_氏名_JS演習問題2.html
– 学籍番号_氏名_JS演習問題3.html
学籍番号、アンダーバーは必ず半角でお願いします
36
レポート２
締切
6月24日（金）23:59 までにメールを送信
 メール宛先
 To：[email protected]
 メールの件名
 学籍番号_氏名_JS演習2
学籍番号，アンダーバーは必ず半角でお願いします
 添付すべきファイル
 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