JavaScript 演習2

JavaScript　演習２
1
本日の内容
• 
• 
• 
• 
• 
• 
• 
• 
演習問題１の解答例
前回の続き
document.getElementById関数
演習問題４
イベント処理
基本的なフォーム
テキストボックスの入力値の取得
演習問題５
演習問題１
•  promptメソッドとdocument.writeメソッドを用
いて，ユーザから入力されたテキストと文字の
色に応じて，表示内容を変化させるJavaScript
プログラムを書きなさい
3
演習問題１の解答例
解答例１：style属性の値をダブルクォートで囲む場合
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write('<h1 style="color: ' + textColor + ';">' + text + '</h1>');
解答例２：style属性の値をシングルクォートで囲む場合
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write("<h1 style='color: " + textColor + ";'>" + text + '</h1>');
解答例３：style属性の値をダブルクォートで囲む場合（エスケープを利用）
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write("<h1 style=\"color: " + textColor + ";\">" + text + '</h1>');
4
演習問題１でよくある誤り
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write("<h1 style="color: textColor;">" + text + "</h1>");
緑の文字列を書きだそうとしてしまう．
JavaScript上の文字列とstyle属性値が混在している．
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write('<h1 style="color: textColor;">' + text + "</h1>");
「textColor」という色で出力することになる．
textColor変数に格納された文字列に展開されない．
5
document.getElementById関数
•  document.getElementById(引数)
–  引数で指定した要素オブジェクトを得る
•  document.getElementById(引数).textContent
–  引数で指定した要素オブジェクトのテキストを得る
•  document.getElementById(引数).innerHTML
–  引数で指定した要素オブジェクトのHTMLを得る
•  document.getElementById(引数).style.CSSプ
ロパティ
–  引数で指定した要素オブジェクトのCSSプロパティを得る
–  CSSプロパティ名は，基本的には「ハイフン(-)」を除去し
，ハイフンの後の文字を大文字に変換したものを用いる
6
–  参考： http://codepunk.hardwar.org.uk/css2js.htm
オブジェクトのイメージ
<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>
<li id="item1">項目1</li>
<li id="item2">項目2</li>
<li id="item3">項目3</li>
</ul>
<div id="divid"></div>
</body>
divは「division（区画）」の略
他の要素をまとめて，構造化する際に
用いられる
JavaScriptで操作する対象になる
8
演習問題４
•  div要素にid属性を指定し，JavaScriptプログラムによ
りdiv要素のCSSプロパティを設定し，以下の正方形
を表示するプログラムを作成せよ
<div style="position: absolute;
top: 100px; left: 100px; width: 100px;
height: 100px; background-color:
lightgray; border: thick solid black;
visibility: visible;"></div>
JavaScript
ヒント
function showRect() {
document.getElementById(“rect”).style.・・・・
document.getElementById(“rect”).style.backgroundColor = “lightgray”;
}
HTML
<body onload=“showRect()”>
<div id=“rect”></div>
</body>
9
イベント処理
•  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
12
テキストボックスの入力値の取得
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>
演習問題５
•  テキストボックスにクイズの正解番号入力し，idが
ouputのdivタグに，正解か不正解かを出力する
JavaScriptプログラムを作成せよ
–  クイズはHTMLとして記述すること
–  parseInt関数を利用して，文字列を数値に変換
–  余力があれば，数値かどうかのチェックも行うこと
•  isNaN（Not a Number）関数を利用すると，入力値が数値かどう
かを判別可能 (数値でない場合にtrueを返す）
演習問題５（発展版）
•  さらに余力がある人は，回答ボタンの横のspan
要素に以下のメッセージを出力するようにしてみ
てください
–  テキストボックスが空または１〜３の数値以外の場合
には「１〜３の数値を入力してください」
–  テキストボックスが１〜３の数値の場合には「ＯＫ」
•  ex15.htmlのonkeyupイベントハンドラを用いること
•  メッセージは上記のとおりでなくても良い

Download Report