Transcript 演習2
JavaScript 演習２ 山口研究室 後期博士課程3年 玉川 奨 (たまがわ すすむ) 居室：24－604 / 23－620 mail : [email protected] 1 前回の補足説明＋復習 • IEにおけるJavaScriptのデバッグ方法 • prompt関数 • 演習問題１ IEにおけるJavaScriptのデバッグ方法 1. ツール→インターネットオプションメニューを実行 2. 詳細設定タブの「スクリプトエラーごとに通知を表示する」をチェック 「スクリプトのデバッグを使用しない(Internet Explorer)」のチェックを はずす 3. IEを再起動 ＩＥを再起動 演習問題１ • prompt関数とdocument.write関数を用いて ，ユーザから入力されたテキスト，文字の色， 文字のサイズ（%）に応じて，表示内容を変化 させるJavaScriptプログラムを書きなさい 4 条件分岐 • ex10.html, ex11.html if (条件1) { • if文 文1; } else if (条件2) { 文2; ・・・・・ } else { 文N; } 条件の部分には， 論理値（true or false) が入る • switch文 マッチする選択肢が なかったときに実行 switch (テストデータ) { case マッチデータ１: 文１; break; case マッチデータ２: 文２; break; default: 文３; break; } break文を使って他の選択肢が 実行されないようにする 5 繰り返し • ex12.html • for文 for (初期化; テスト; 更新) { アクション; } • while文 初期化; while (テスト) { アクション; 更新; } 6 parseInt関数とparseFloat関数 • parseInt(引数) – 引数で文字列を渡すと数値に変換 • parseFloat(引数) – 引数で文字列を渡すと浮動小数点に変換 • ex13.html 7 演習問題2 • “Hello!”という文字列をユーザが入力した数だけ表 示するJavaScriptプログラムを作成しなさい • 行数を5で割った余りが1の場合には赤色，２の場 合には緑色，３の場合には黄色，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> <body> <h1 <h1 id="id1“ id="id1">Hello</h1> style=‘color: red’>Hello, World</h1> </body> </body> document.getElementById(“id”) H1要素のオブジェクト 属性： 色 (style.color): black HTMLテキスト (innerHTML): Hello document.getElementById(“id”).style.color = ‘red’; document.getElementById(“id”).innerHTML = ‘Hello, World’; document.getElementById関数 ex14.html JavaScript 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); 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()'> <h1 id="id1">document.getElementById関数</h1> ドキュメントが完全に 読み込まれた後に指 定した関数を呼び出す <ul> divは「division（区画）」の略 <li id="item1">項目1</li> <li id="item2">項目2</li> <li id="item3">項目3</li> </ul> <div id="divid"></div> </body> 他の要素をまとめて，構造化する際に 用いられる 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 入力フォーカスが移された時と要素 <input>, <select>, <textarea> の値が変わった時 onclick マウスを一回クリックした時 大半の要素 onmouseover マウスが要素の上に移動した 大半の要素 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> 演習問題４ • テキストボックスを２つ作成し，入力値の加算 結果をdiv要素に出力せよ – parseFloat関数を利用すること – 余力があれば，数値かどうかのチェックも行うこと • isNaN（Not a Number）関数を利用すると，入力値が数 値かどうかを判別可能 (数値でない場合にtrueを返す） 演習問題４は提出する必要は ありません． 演習問題４ • さらに余力がある人は，テキストボックスの横のdiv要素に 以下のメッセージを出力するようにしてみてください – テキストボックスが空の場合には「数値を入力してください」 – テキストボックスが数値以外の場合には「数値ではありません」 – テキストボックスが数値の場合には「ＯＫ」 • ex15.htmlのonkeyupイベントハンドラを用いること • メッセージは上記のとおりでなくても良い 提出課題 20 課題１（基本） テキストボックスに幅と高さを入力し，背景色をラジオ ボタンから選択し，ボタンを押すと，div要素に入力した 値に応じた矩形が表示されるようにする ボタンを押すと 入力値に応じて 矩形が変化 課題１（発展） 発展課題（例） 余力がある人は，さらに，表示する 矩形の個数や枠の幅や色も指定 できるようにしてみましょう． 課題２ アンケート項目の内容を整形して画面に出力 必須 入力情報を画面に表示 1. テキストボックスとボタンを 用いて，div要素に入力内 容を整形して表示する 2. onclick以外のイベントハン ドラを最低１つは用いること 発展課題（例） 1. 入力値のチェック （空だったらアラートなど） 2. <table>タグを利用して出力 3. チェックボックスの活用 4. リストボックスの活用 レポート 締切 6月28日（金）23:59 までにメールを送信 メール宛先 To：[email protected] メールの件名 学籍番号_氏名_JS演習 学籍番号，アンダーバーは必ず半角でお願いします 添付すべきファイル wordファイル(レポート本文) ２～３枚程度，ファイル名「学籍番号_氏名_JS演習.doc」 課題1.html，課題2.html JavaScriptとCSSを別ファイルにした場合には，それらのフ ァイルも添付すること レポート レポート本文に書くべき項目 動作確認行ったブラウザ(IE or Firefox) 作成したJavaScriptの解説 HTML，CSS，JavaScriptを書く上で工夫した点 感想 注意 課題１と２共に工夫をしなくても合格点は出ますが，工夫 がしてある場合には評価します 機能性・技術性・デザイン性・工夫した点を評価します CSS, JavaScriptはできれば別ファイルとして書く方が望 ましいです 問い合わせ先 • 第１研究室 24-604A • 第２研究室 23-620B E-mail: [email protected] 気軽にお越しください♪ 優しい山口研メンバーが待ってます。