JavaScript演習

Size: px

Start display at page:

Download "JavaScript演習"

つかさいくのや
7 years ago
Views:

1 JavaScript 演習 2 1

2 本日の内容 prompt 関数演習 1 演習 2 document.getelementbyid 関数演習 3 イベント処理基本的なフォームテキストボックスの入力値の取得演習 4

3 IE における JavaScript のデバッグ方法 1. ツールインターネットオプションメニューを実行 2. 詳細設定タブのスクリプトエラーごとに通知を表示するをチェックスクリプトのデバッグを使用しない (Internet Explorer) のチェックをはずす 3. IE を再起動 IE を再起動

4 関数再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法関数名 ( 引数 ); var num = 関数名 ( 引数 ); 4

5 document.write 関数 document.write( 引数 )- 引数を HTML として表示させる ex8.html var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>"); 5

6 prompt 関数 prompt( 引数 )- 引数をメッセージとして表示し, ユーザからの入力情報 ( 文字列 ) を取得する関数 ex9.html var value = prompt(" 値を入力してください."); alert(value); document.write('<h1>prompt 関数 </h1>'); document.write('<h1>' +value + '</h1>'); 6

7 演習問題 1 prompt 関数と document.write 関数を用いて, ユーザから入力されたテキスト, 文字の色, 文字のサイズ (%) に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 7

8 条件分岐 ex10.html, ex11.html if 文 switch 文マッチする選択肢がなかったときに実行 if ( 条件 1) { 文 1; } else if ( 条件 2) { 文 2; } else { 文 N; } switch ( テストデータ ) { case マッチデータ 1: 文 1; break; case マッチデータ 2: 文 2; break; default: 文 3; break; } 条件の部分には, 論理値 (true or false) が入る break 文を使って他の選択肢が実行されないようにする 8

9 繰り返し ex12.html for 文 for ( 初期化 ; テスト ; 更新 ) { アクション ; } while 文初期化 ; while ( テスト ) { アクション ; 更新 ; } 9

10 parseint 関数と parsefloat 関数 parseint( 引数 ) 引数で文字列を渡すと数値に変換 parsefloat( 引数 ) 引数で文字列を渡すと浮動小数点に変換 ex13.html 10

11 演習問題 2 Hello! という文字列をユーザが入力した数だけ表示する JavaScript プログラムを作成しなさい行数を 5 で割った余りが 1 の場合には赤色,2 の場合には緑色,3 の場合には黄色,4 の場合には黒,0 の場合には青色, さらに,3 の倍数の場合には 200% の大きさで Hello! を表示しなさい 11

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

13 オブジェクトのイメージ <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.

innerhtml; alert(item3); JavaScript } document.getelementbyid("divid").innerhtml = " テスト "; document.getelementbyid("divid").style.color = "red"; document.getelementbyid("divid").style.fontsize = "200%"; document.

14 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 } 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()'> ドキュメントが完全に読み込まれた後に指定した関数を呼び出す </body> <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 で操作する対象になる 14

演習問題 3 div 要素に id 属性を指定し,JavaScript プログラムにより div 要素の CSS プロパティを設定し, 以下の長方形を表示するプログラムを作成せよ <div style="position:absolute; top:40; left:40; width:150; height:250; background-color:#0000ff; border:

15 演習問題 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> 15 </body>

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

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

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

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

20 演習問題 4 テキストボックスを 2 つ作成し, 入力値の加算結果を div 要素に出力せよ parsefloat 関数を利用すること余力があれば, 数値かどうかのチェックも行うこと isnan(not a Number) 関数を利用すると, 入力値が数値かどうかを判別可能 ( 数値でない場合に true を返す ) 演習問題 4 は提出する必要はありません.

21 演習問題 4 さらに余力がある人は, テキストボックスの横の div 要素に以下のメッセージを出力するようにしてみてくださいテキストボックスが空の場合には数値を入力してくださいテキストボックスが数値以外の場合には数値ではありませんテキストボックスが数値の場合には OK ex15.html の onkeyup イベントハンドラを用いることメッセージは上記のとおりでなくても良い

JavaScript 演習 2 1

JavaScript 演習 2 1 本日の内容演習問題 1の解答例前回の続き document.getelementbyid 関数演習問題 4 イベント処理基本的なフォームテキストボックスの入力値の取得演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript