JavaScript演習

JavaScript 演習３
山口研究室後期博士課程3年
玉川奨 (たまがわすすむ)
居室：24－604 / 23－620
mail : [email protected]
1
演習問題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>
2
</body>
本日の内容
•
•
•
•
•
•
•
•
•
イベント処理
基本的なフォーム
テキストボックスの入力値の取得
配列
DOM（Document Object Model）
ラジオボタンで選択された値の取得
リスト（コンボ）ボックスで選択された値の取得
チェックボックスで選択された値の取得
提出課題
イベント処理
• 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
6
テキストボックスの入力値の取得
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点";
10
DOM（Document Object Model）
• 文書のトップであるDocumentオブジェクトか
ら下位の階層の構造を表すモデル
「JavaScript DOMリファレンス」
http://www.openspc2.org/JavaScript/JavaScript_DOM/
11
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>
提出課題
21
課題１（基本）
テキストボックスに幅と高さを入力し，背景色をラジオ
ボタンから選択し，ボタンを押すと，div要素に入力した
値に応じた矩形が表示されるようにする
ボタンを押すと
入力値に応じて
矩形が変化
課題１（発展）
発展課題（例）
余力がある人は，さらに，表示する
矩形の個数や枠の幅や色も指定
できるようにしてみましょう．
課題２
アンケート項目の内容を整形して画面に出力
必須
入力情報を画面に表示
1. テキストボックスとボタンを
用いて，div要素に入力内
容を整形して表示する
2. onclick以外のイベントハン
ドラを最低１つは用いること
発展課題（例）
1. 入力値のチェック
（空だったらアラートなど）
2. <table>タグを利用して出力
3. チェックボックスの活用
4. リストボックスの活用
自由課題
来年度のeビジネスソフトウェア論の
授業ページのデザインを考えてください
レポート
締切
6月28日（金）23:59 までにメールを送信
 メール宛先
 To：[email protected]
 メールの件名
 学籍番号_氏名_JS演習
学籍番号，アンダーバーは必ず半角でお願いします
 添付すべきファイル
 wordファイル(レポート本文)
２～３枚程度，ファイル名「学籍番号_氏名_JS演習.doc」
 課題1.html，課題2.html, (やった人は)自由課題.html
 JavaScriptとCSSを別ファイルにした場合には，それらのフ
ァイルも添付すること
レポート
 レポート本文に書くべき項目
動作確認行ったブラウザ(IE or Firefox)
作成したJavaScriptの解説
HTML，CSS，JavaScriptを書く上で工夫した点
感想
 注意
 課題１と２共に工夫をしなくても合格点は出ますが，工夫
がしてある場合には評価します
 機能性・技術性・デザイン性・工夫した点を評価します
 CSS, JavaScriptはできれば別ファイルとして書く方が望
ましいです
問い合わせ先
• 第１研究室 24-604A
• 第２研究室 23-620B
E-mail:
[email protected]
気軽にお越しください♪
優しい山口研メンバーが待ってます。

Download Report