JavaScript 演習 2 山口研究室後期博士課程 3 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 1
前回の補足説明 + 復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題 1
IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック スクリプトのデバッグを使用しない (Internet Explorer) のチェックをはずす 3. IE を再起動 IE を再起動
演習問題 1 prompt 関数と document.write 関数を用いて, ユーザから入力されたテキスト, 文字の色, 文字のサイズ (%) に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 4
条件分岐 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 文を使って他の選択肢が実行されないようにする 5
繰り返し ex12.html for 文 for ( 初期化 ; テスト ; 更新 ) { アクション ; } while 文 初期化 ; while ( テスト ) { アクション ; 更新 ; } 6
parseint 関数と parsefloat 関数 parseint( 引数 ) 引数で文字列を渡すと数値に変換 parsefloat( 引数 ) 引数で文字列を渡すと浮動小数点に変換 ex13.html 7
演習問題 2 Hello! という文字列をユーザが入力した数だけ表示する JavaScript プログラムを作成しなさい 行数を 5 で割った余りが 1 の場合には赤色,2 の場合には緑色,3 の場合には黄色,4 の場合には黒,0 の場合には青色, さらに,3 の倍数の場合には 200% の大きさで Hello! を表示しなさい 8
本日の内容 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4
document.getelementbyid 関数 document.getelementbyid( 引数 ) 引数で指定した要素オブジェクトを得る document.getelementbyid( 引数 ).innerhtml 引数で指定した要素オブジェクトの HTML を得る document.getelementbyid( 引数 ).style.css プロパティ 引数で指定した要素オブジェクトの CSS プロパティを得る CSS プロパティ名は, 基本的には ハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる 参考 : http://codepunk.hardwar.org.uk/css2js.htm 10
オブジェクトのイメージ <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 で操作する対象になる 12
演習問題 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> 13 </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 16
テキストボックスの入力値の取得 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 イベントハンドラを用いること メッセージは上記のとおりでなくても良い
提出課題 20
課題 1( 基本 ) テキストボックスに幅と高さを入力し, 背景色をラジオボタンから選択し, ボタンを押すと,div 要素に入力した値に応じた矩形が表示されるようにする ボタンを押すと入力値に応じて矩形が変化
課題 1( 発展 ) 発展課題 ( 例 ) 余力がある人は, さらに, 表示する矩形の個数や枠の幅や色も指定できるようにしてみましょう.
課題 2 アンケート項目の内容を整形して画面に出力 入力情報を画面に表示 必須 1. テキストボックスとボタンを用いて,div 要素に入力内容を整形して表示する 2. onclick 以外のイベントハンドラを最低 1 つは用いること 発展課題 ( 例 ) 1. 入力値のチェック ( 空だったらアラートなど ) 2. <table> タグを利用して出力 3. チェックボックスの活用 4. リストボックスの活用
締切 レポート 6 月 28 日 ( 金 )23:59 までにメールを送信 メール宛先 To:s_tamagawa@ae.keio.ac.jp メールの件名 学籍番号 _ 氏名 _JS 演習学籍番号, アンダーバーは必ず半角でお願いします 添付すべきファイル word ファイル ( レポート本文 ) 2~3 枚程度, ファイル名 学籍番号 _ 氏名 _JS 演習.doc 課題 1.html, 課題 2.html JavaScript と CSS を別ファイルにした場合には, それらのファイルも添付すること
レポート レポート本文に書くべき項目 動作確認行ったブラウザ (IE or Firefox) 作成した JavaScript の解説 HTML,CSS,JavaScript を書く上で工夫した点 感想 注意 課題 1 と 2 共に工夫をしなくても合格点は出ますが, 工夫がしてある場合には評価します 機能性 技術性 デザイン性 工夫した点を評価します CSS, JavaScript はできれば別ファイルとして書く方が望ましいです
問い合わせ先 第 1 研究室 24-604A 第 2 研究室 23-620B E-mail: s_tamagawa@ae.keio.ac.jp 気軽にお越しください 優しい山口研メンバーが待ってます