JavaScript 演習 2 1

Size: px

Start display at page:

Download "JavaScript 演習 2 1"

さやなふじつぐ
5 years ago
Views:

1 JavaScript 演習 2 1

2 本日の内容演習問題 1の解答例前回の続き document.getelementbyid 関数演習問題 4 イベント処理基本的なフォームテキストボックスの入力値の取得演習問題 5

3 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 3

4 演習問題 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

5 演習問題 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

6 document.getelementbyid 関数 document.getelementbyid( 引数 ) 引数で指定した要素オブジェクトを得る document.getelementbyid( 引数 ).textcontent 引数で指定した要素オブジェクトのテキストを得る document.getelementbyid( 引数 ).innerhtml 引数で指定した要素オブジェクトの HTML を得る document.getelementbyid( 引数 ).style.css プロパティ引数で指定した要素オブジェクトの CSS プロパティを得る CSS プロパティ名は, 基本的にはハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる参考 : 6

7 オブジェクトのイメージ <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("item3").innerhtml; alert(item3); JavaScript onload= 関数名ドキュメントが完全に読み込まれた後に指定した関数を呼び出す <body onload='test()'> </body> } document.

getelementbyid("divid").style.backgroundcolor = "black"; <h1 id="id1">document.

8 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:

9 演習問題 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

10 イベント処理 JavaScript ではユーザからの入力があると Web ブラウザがイベントを生成例えばキーボードを押したりマウスを動かしたりクリックしたりするなど様々な場面でイベントが発生するあるイベントが発生した際にそのイベントに対するイベントハンドラを定義しておけばインタラクティブなページを作ることが可能イベントハンドラ発生契機サポートする HTML 要素 onblur 要素が入力フォーカスを失った時 <button>, <input>, <label>, <select>, <textarea>,<body> onchange 入力フォーカスが移された時と要素の値が変わった時 onclick マウスを一回クリックした時大半の要素 onmouseover マウスが要素の上に移動した大半の要素 <input>, <select>, <textarea> onkeydown(up) ユーザが何かキーを押したフォーム要素と <body> onload ページが読み込まれた時 body 要素と共によく用いられる

11 基本的なフォームテキスト 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>

12 テキストボックスの入力値の取得テキストボックス内に入力したデータをボタンが押されたら div 要素に出力 ex15.html 12

13 テキストボックスの入力値の取得 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>

14 演習問題 5 テキストボックスにクイズの正解番号入力し,id が ouput の div タグに, 正解か不正解かを出力する JavaScript プログラムを作成せよクイズは HTML として記述すること parseint 関数を利用して, 文字列を数値に変換余力があれば, 数値かどうかのチェックも行うこと isnan(not a Number) 関数を利用すると, 入力値が数値かどうかを判別可能 ( 数値でない場合に true を返す )

15 演習問題 5( 発展版 ) さらに余力がある人は, 回答ボタンの横の span 要素に以下のメッセージを出力するようにしてみてくださいテキストボックスが空または 1 3 の数値以外の場合には 1 3 の数値を入力してくださいテキストボックスが 1 3 の数値の場合には OK ex15.html の onkeyup イベントハンドラを用いることメッセージは上記のとおりでなくても良い

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数演習 1 演習 2 document.getelementbyid 関数演習 3 イベント処理基本的なフォームテキストボックスの入力値の取得演習 4 IE における JavaScript のデバッグ方法 1. ツールインターネットオプションメニューを実行 2. 詳細設定タブのスクリプトエラーごとに通知を表示するをチェック