JavaScript 演習２ 1. 前回の補足説明＋復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題１.

Presentation on theme: "JavaScript 演習２ 1. 前回の補足説明＋復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題１."— Presentation transcript:

1 JavaScript 演習２ 1

2 前回の補足説明＋復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題１

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

4 prompt 関数 prompt( 引数 ) －引数をメッセージとして表示し，ユーザ からの入力情報（文字列）を取得する関数 ex9.html 4 var value = prompt(" 値を入力してください． "); alert(value); document.write(' prompt 関数 '); document.write(' ' +value + ' ');

5 演習問題１ prompt 関数と document.write 関数を用いて ，ユーザから入力されたテキスト，文字 の色，文字のサイズ（ % ）に応じて，表示 内容を変化させる JavaScript プログラムを 書きなさい 5 上記の例をタグで表現する と・・・ Hello, World ヒント

6 本日の内容 条件分岐 繰り返し parseInt 関数と parseFloat 関数 演習 2 document.getElementById 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取 得 配列 DOM （ Document Object Model ） ラジオボタンで選択された値の 取得 リスト（コンボ）ボックスで選 択された値の取得 チェックボックスで選択された 値の取得 提出課題

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

8 繰り返し ex12.html for 文 while 文 8 for ( 初期化 ; テスト ; 更新 ) { アクション ; } 初期化 ; while ( テスト ) { アクション ; 更新 ; } for (var i=0;i<5;i++) { document.write(" " + i + " "); } var i = 0; while(i< 5){ document.write(" " + i + " "); i++; }

9 parseInt 関数と parseFloat 関数 parseInt( 引数 ) – 引数で文字列を渡すと数値に変換 parseFloat( 引数 ) – 引数で文字列を渡すと浮動小数点に変換 ex13.html 9

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

11 document.getElementById 関数 document.getElementById( 引数 ) – 引数で指定した要素オブジェクトを得る document.getElementById( 引数 ).innerHTML – 引数で指定した要素オブジェクトの HTML を得る document.getElementById( 引数 ).style.CSS プロパテ ィ – 引数で指定した要素オブジェクトの CSS プロパティを得 る –CSS プロパティ名は，基本的には「ハイフン (-) 」を除去 し，ハイフンの後の文字を大文字に変換したものを用いる – 参考： http://codepunk.hardwar.org.uk/css2js.htmhttp://codepunk.hardwar.org.uk/css2js.htm 11

12 オブジェクトのイメージ Hello document.getElementById(“id1”) 属性： 色 (style.color): black HTML テキスト (innerHTML): Hello document.getElementById(“id1”).innerHTML = ‘Hello, World’; document.getElementById(“id1”).style.color = ‘red’; H1 要素のオブジェクト Hello, World

13 document.getElementById 関数 13 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"; } ex14.html document.getElementById 関数 項目 1 項目 2 項目 3 JavaScript HTML onload=‘ 関数名 ’ ドキュメントが完全 に読み込まれた後に 指定した関数を呼び 出す div は「 division （区画）」の略 他の要素をまとめて，構造化する際 に用いられる JavaScript で操作する対象になる

14 演習問題 3 div 要素に id 属性を指定し， JavaScript プログラ ムにより div 要素の CSS プロパティを設定し，以 下の長方形を表示するプログラムを作成せよ 14 <div style="position:absolute; top:40; left:40; width:150; height:250; background-color:#0000FF; border: thick solid red; visibility: visible;"> function showRect() { document.getElementById(“rect”).style. ・・・ ・ } JavaScriptHTML ヒント

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

16 基本的なフォーム テキスト –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 ） XXX ～

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

18 テキストボックスの入力値の取 得 文字を入力してください。 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"); } JavaScript HTML

19 演習問題４ テキストボックスを２つ作成し，入力値の 加算結果を div 要素に出力せよ –parseFloat 関数を利用すること – 余力があれば，数値かどうかのチェックも行 うこと isNaN （ Not a Number ）関数を利用すると，入力値 が数値かどうかを判別可能 ( 数値でない場合に true を返す） 演習問題４は提出する必要は ありません．

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

21 配列 ex16.html 配列の生成 var a = new Array(); a[0] = 1.2; a[1] = "JavaScript"; a[2] = true; a[3] = {x:1, y:3}; var a = [1.2, "JavaScript", true, {x:1, y:3}]; 配列のサイズを指定するときは var a = new Array(10); オブジェクトの型が異なっても格納することができ る 連想配列 a[score] = "88 点 "; 配列の添字を文字列にすることができる 21

22 DOM （ Document Object Model ） 文書のトップである Document オブジェク トから下位の階層の構造を表すモデル 「 JavaScript DOM リファレンス」 http://www.openspc2.org/JavaScript/JavaScript_DOM/ http://www.openspc2.org/JavaScript/JavaScript_DOM/ 22

23 DOM 関数の例 ex17.html document.getElementById(id) – 引数に指定した id を持つ DOM オブジェクトを 返す document.createElement( 要素 ) – 引数で指定した HTML 要素を作成する オブジェクト.setAttribute( 属性名, 値 ) – オブジェクトの属性に値をセットする オブジェクト.appendChild( オブジェクト ) – 指定したオブジェクトにオブジェクトを追加 する

24 DOM 関数の例 function domTest() { var divObj = document.getElementById("dom_test"); var h1Obj = document.createElement("h1"); h1Obj.setAttribute("style", "color: navy;"); h1Obj.innerHTML = "Hello, World!"; divObj.appendChild(h1Obj); var colorArray = ["red", "blue", "green", "yellow"]; for (var i = 0; i < colorArray.length; i++) { var pObj = document.createElement("p"); pObj.innerHTML = "DOM を用いて追加された段落 " + i; pObj.style.fontSize = "200%"; pObj.style.color = colorArray[i]; divObj.appendChild(pObj); } JavaScript HTML

25 ラジオボタンで選択された値の取得 ex18.html

26 ラジオボタンで選択された値の取 得 あなたの性別を教えて下さい． 男 女 男 function getRadioValue(){ var radioForm = document.getElementById("radio_form"); for (var i = 0; i < radioForm.length; i++) { var radioButton = radioForm.elements[i]; if (radioButton.checked) { document.getElementById("output").innerHTML = radioButton.value; break; } JavaScript HTML

27 演習問題５ ex18.html を元に，男を選択した場合には 青色マークを女を選択した場合には赤色 マークを出力するようにせよ – ヒント： を 男 の前に挿入 演習問題５は提出する必要 は ありません．

28 リスト（コンボ）ボックスで 選択された値の取得 ex19.html

29 リスト（コンボ）ボックスで 選択された値の取得 ペンギン トラ ライオン アザラシ function getSelectValue(){ var html = " "; var selectElement = document.getElementById("select_element"); for (var i = 0; i < selectElement.length; i++) { var item = selectElement.options[i]; if (item.selected) { html += " " + item.value + " "; } html += " "; document.getElementById("output").innerHTML = html; } JavaScript HTML コンボボックスに変更したい場合 は， select 要素の size 属性の値を 1 にし， multiple を削除すれば良い． （ multiple を付けるとリストボッ クスで複数項目を選択できるよう になる．）

30 チェックボックスで 選択された値の取得 ex20.html

31 チェックボックスで 選択された値の取得 ペンギン トラ ライオン アザラシ function getCheckBoxValue(){ var html = " "; var checkboxForm = document.getElementById("checkbox_form"); for (var i = 0; i < checkboxForm.length; i++) { var checkbox = checkboxForm.elements[i]; if (checkbox.checked) { html += " " + checkbox.value + " "; } html += " "; document.getElementById("output").innerHTML = html; } JavaScript HTML

32 提出課題 32

33 課題１（基本） テキストボックスに幅と高さを入力し，背景色を ラジオボタンから選択し，ボタンを押すと， div 要 素に入力した値に応じた矩形が表示されるように する ボタンを押すと 入力値に応じて 矩形が変化

34 課題１（発展） 発展課題（例） 余力がある人は，さらに，表示 する矩形の個数や枠の幅や色も 指定できるようにしてみましょ う．

35 課題２ アンケート項目の内容を整形して画面に 出力 1. 入力値のチェック （空だったらアラートなど ） 2. タグを利用して出 力 3. チェックボックスの活用 4. リストボックスの活用 発展課題（例） 入力情報を画面に表示 必須 1. テキストボックスとボタ ンを用いて， div 要素に入 力内容を整形して表示す る 2.onclick 以外のイベントハ ンドラを最低１つは用い ること

36 レポート１ 授業中に行った演習問題１，２，３を以下のア ドレスにメールで提出 – 提出先 To ： s_tamagawa@ae.keio.ac.jp – 提出期限 ６月３日（金）１３：００まで ：次回授業前まで – メールの件名 : 学籍番号 _ 氏名 _JS 演習 1 ファイル名は以下のようにすること – 学籍番号 _ 氏名 _JS 演習問題 1.html – 学籍番号 _ 氏名 _JS 演習問題 2.html – 学籍番号 _ 氏名 _JS 演習問題 3.html 36 学籍番号、アンダーバーは必ず半角でお願いします

37 レポート２ 締切 6 月 24 日（金） 23:59 までにメールを送信 メール宛先 To ： s_tamagawa@ae.keio.ac.jp メールの件名 学籍番号 _ 氏名 _JS 演習 2 学籍番号，アンダーバーは必ず半角でお願いします 添付すべきファイル word ファイル ( レポート本文 ) ２～３枚程度，ファイル名「学籍番号 _ 氏名 _JS 演習２.doc 」 課題 1.html ，課題 2.html JavaScript と CSS を別ファイルにした場合には，それら のファイルも添付すること

38 レポート２ レポート本文に書くべき項目 動作確認行ったブラウザ (IE or Firefox) 作成した JavaScript の解説 HTML ， CSS ， JavaScript を書く上で工夫した 点 感想 注意 課題１と２共に工夫をしなくても合格点は出ますが ，工夫がしてある場合には評価します 機能性・技術性・デザイン性・工夫した点を評価し ます CSS, JavaScript はできれば別ファイルとして書く方 が望ましいです

39 問い合わせ先 第１研究室 24-604A 第２研究室 23-620B 気軽にお越しください ♪ 優しい山口研メンバーが待ってます。 E-mail: s_tamagawa@ae.keio.ac.jp