JavaScript 演習 2 1
本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4
IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック スクリプトのデバッグを使用しない (Internet Explorer) のチェックをはずす 3. IE を再起動 IE を再起動
関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法 関数名 ( 引数 ); var num = 関数名 ( 引数 ); 4
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
prompt 関数 prompt( 引数 )- 引数をメッセージとして表示し, ユーザからの入力情報 ( 文字列 ) を取得する関数 ex9.html var value = prompt(" 値を入力してください."); alert(value); document.write('<h1>prompt 関数 </h1>'); document.write('<h1>' +value + '</h1>'); 6
演習問題 1 prompt 関数と document.write 関数を用いて, ユーザから入力されたテキスト, 文字の色, 文字のサイズ (%) に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 7
条件分岐 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
繰り返し ex12.html for 文 for ( 初期化 ; テスト ; 更新 ) { アクション ; } while 文 初期化 ; while ( テスト ) { アクション ; 更新 ; } 9
parseint 関数と parsefloat 関数 parseint( 引数 ) 引数で文字列を渡すと数値に変換 parsefloat( 引数 ) 引数で文字列を渡すと浮動小数点に変換 ex13.html 10
演習問題 2 Hello! という文字列をユーザが入力した数だけ表示する JavaScript プログラムを作成しなさい 行数を 5 で割った余りが 1 の場合には赤色,2 の場合には緑色,3 の場合には黄色,4 の場合には黒,0 の場合には青色, さらに,3 の倍数の場合には 200% の大きさで Hello! を表示しなさい 11
document.getelementbyid 関数 document.getelementbyid( 引数 ) 引数で指定した要素オブジェクトを得る document.getelementbyid( 引数 ).innerhtml 引数で指定した要素オブジェクトの HTML を得る document.getelementbyid( 引数 ).style.css プロパティ 引数で指定した要素オブジェクトの CSS プロパティを得る CSS プロパティ名は, 基本的には ハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる 参考 : http://codepunk.hardwar.org.uk/css2js.htm 12
オブジェクトのイメージ <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 } 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: 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>
イベント処理 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 18
テキストボックスの入力値の取得 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>
演習問題 4 テキストボックスを 2 つ作成し, 入力値の加算結果を div 要素に出力せよ parsefloat 関数を利用すること 余力があれば, 数値かどうかのチェックも行うこと isnan(not a Number) 関数を利用すると, 入力値が数値かどうかを判別可能 ( 数値でない場合に true を返す ) 演習問題 4 は提出する必要はありません.
演習問題 4 さらに余力がある人は, テキストボックスの横の div 要素に以下のメッセージを出力するようにしてみてください テキストボックスが空の場合には 数値を入力してください テキストボックスが数値以外の場合には 数値ではありません テキストボックスが数値の場合には OK ex15.html の onkeyup イベントハンドラを用いること メッセージは上記のとおりでなくても良い