JavaScript 演習 2 1
本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5
演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 3
演習問題 1 の解答例 解答例 1:style 属性の値をダブルクォートで囲む場合 var text = prompt(" テキストを入力してください "); var textcolor = prompt(" 文字の色を入力してください "); document.write('<h1 style="color: ' + textcolor + ';">' + text + '</h1>'); 解答例 2:style 属性の値をシングルクォートで囲む場合 var text = prompt(" テキストを入力してください "); var textcolor = prompt(" 文字の色を入力してください "); document.write("<h1 style='color: " + textcolor + ";'>" + text + '</h1>'); 解答例 3:style 属性の値をダブルクォートで囲む場合 ( エスケープを利用 ) var text = prompt(" テキストを入力してください "); var textcolor = prompt(" 文字の色を入力してください "); document.write("<h1 style=\"color: " + textcolor + ";\">" + text + '</h1>'); 4
演習問題 1 でよくある誤り 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 プロパティ名は, 基本的には ハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる 参考 : http://codepunk.hardwar.org.uk/css2js.htm 6
オブジェクトのイメージ <body> <h1 <h1 id="id1 id="id1">hello</h1> style= color: red >Hello, World</h1> </body> H1 要素のオブジェクト document.getelementbyid( id ) 属性 : 色 (style.color): black HTML テキスト (innerhtml): Hello document.getelementbyid( id ).style.color = red ; document.getelementbyid( id ).innerhtml = Hello, World ;
document.getelementbyid 関数 ex14.html 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); JavaScript onload= 関数名 ドキュメントが完全に読み込まれた後に指定した関数を呼び出す <body onload='test()'> </body> } document.getelementbyid("divid").innerhtml = " テスト "; document.getelementbyid("divid").style.color = "red"; document.getelementbyid("divid").style.fontsize = "200%"; document.getelementbyid("divid").style.backgroundcolor = "black"; <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> div は division( 区画 ) の略 他の要素をまとめて, 構造化する際に用いられる JavaScript で操作する対象になる HTML 8
演習問題 4 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 入力フォーカスが移された時と要素の値が変わった時 onclick マウスを一回クリックした時大半の要素 onmouseover マウスが要素の上に移動した大半の要素 <input>, <select>, <textarea> 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>
演習問題 5 テキストボックスにクイズの正解番号入力し,id が ouput の div タグに, 正解か不正解かを出力する JavaScript プログラムを作成せよ クイズは HTML として記述すること parseint 関数を利用して, 文字列を数値に変換 余力があれば, 数値かどうかのチェックも行うこと isnan(not a Number) 関数を利用すると, 入力値が数値かどうかを判別可能 ( 数値でない場合に true を返す )
演習問題 5( 発展版 ) さらに余力がある人は, 回答ボタンの横の span 要素に以下のメッセージを出力するようにしてみてください テキストボックスが空または 1 3 の数値以外の場合には 1 3 の数値を入力してください テキストボックスが 1 3 の数値の場合には OK ex15.html の onkeyup イベントハンドラを用いること メッセージは上記のとおりでなくても良い