JavaScript 演習２
本日の内容
• 演習問題１の解答例
• 前回の続き
• document.getElementById関数
• 演習問題４
• イベント処理
• 基本的なフォーム
• テキストボックスの入力値の取得
• 演習問題５
演習問題１
• promptメソッドとdocument.writeメソッドを用
いて，ユーザから入力されたテキストと文字の
色に応じて，表示内容を変化させる
JavaScript
プログラムを書きなさい
3演習問題１の解答例
4
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write('<h1 style="color: ' + textColor + ';">' + text + '</h1>');
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write("<h1 style='color: " + textColor + ";'>" + text + '</h1>');
var text = prompt("テキストを入力してください");
var textColor = prompt("文字の色を入力してください");
document.write("<h1 style=\"color: " + textColor + ";\">" + text + '</h1>');
解答例１：style属性の値をダブルクォートで囲む場合
解答例２：style属性の値をシングルクォートで囲む場合
演習問題１でよくある誤り
5
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」という色で出力することになる．
document.getElementById関数
• document.getElementById(引数)
– 引数で指定した要素オブジェクトを得る
• document.getElementById(引数).textContent
– 引数で指定した要素オブジェクトのテキストを得る
• document.getElementById(引数).
innerHTML
– 引数で指定した要素オブジェクトのHTMLを得る
• document.getElementById(引数).
style.CSSプ
ロパティ
– 引数で指定した要素オブジェクトのCSSプロパティを得る
– CSSプロパティ名は，基本的には
「ハイフン
(-)
」を除去し
，ハイフンの後の文字を大文字に変換したもの
を用いる
– 参考： http://codepunk.hardwar.org.uk/css2js.htm
6
オブジェクトのイメージ
<body> <h1 id="id1">Hello</h1> </body> document.getElementById(“id”) 属性： 色 (style.color): black HTMLテキスト (innerHTML): Hellodocument.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関数
8
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> </body> JavaScript HTML onload=‘関数名’ ドキュメントが完全に 読み込まれた後に指 定した関数を呼び出す divは「division（区画）」の略 他の要素をまとめて，構造化する際に 用いられる JavaScriptで操作する対象になる
演習問題４
• div要素にid属性を指定し，JavaScriptプログラムによ
り
div要素のCSSプロパティを設定し，以下の正方形
を表示するプログラムを作成せよ
9
<div style="position: absolute;
top: 100px; left: 100px; width: 100px;
height: 100px; background-color:
lightgray; border: thick solid black;
visibility: visible;"></div>
<body onload=“showRect()”> <div id=“rect”></div> </body> function showRect() { document.getElementById(“rect”).style.・・・・ document.getElementById(“rect”).style.backgroundColor = “lightgray”; } 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要素に出力
• ex15.html
テキストボックスの入力値の取得
<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"); } } JavaScript HTML
