第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html <title> </title> <table border="1" style="border-collapse:co

Size: px

Start display at page:

Download "第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html <title> </title> <table border="1" style="border-collapse:co"

あきみかなり
5 years ago
Views:

1 付録

2 第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html <title> </title> <table border="1" style="border-collapse:collapse"> <caption> </caption> <col style="width:200px"><col style="width:300px"> <tr><td>aqua</td><td style="background-color:aqua"></td></tr> <tr><td>black</td><td style="background-color:black"></td></tr> <tr><td>blue</td><td style="background-color:blue"></td></tr> <tr><td>fuchsia</td><td style="background-color:fuchsia"></td></tr> <tr><td>gray</td><td style="background-color:gray"></td></tr> <tr><td>green</td><td style="background-color:green"></td></tr> <tr><td>lime</td><td style="background-color:lime"></td></tr> <tr><td>maroon</td><td style="background-color:maroon"></td></tr> <tr><td>navy</td><td style="background-color:navy"></td></tr> <tr><td>olive</td><td style="background-color:olive"></td></tr> <tr><td>orange</td><td style="background-color:orange"></td></tr> <tr><td>purple</td><td style="background-color:purple"></td></tr> <tr><td>red</td><td style="background-color:red"></td></tr> <tr><td>silver</td><td style="background-color:silver"></td></tr> <tr><td>teal</td><td style="background-color:teal"></td></tr> <tr><td>white</td><td style="background-color:white"></td></tr> <tr><td>yellow</td><td style="background-color:yellow"></td></tr> </table> 17.2( 演習 3-4) 順序つきリストの番号をローマ数字に変更しなさい pr3-4.html <title> </title> <ol style="list-style-type:upper-roman"> <li><table></li> <li><caption></li> 2

3 17. 演習の答え <li><tr></li> <li><th></li> <li><td></li> <li><col></li> </ol> ol の番号をローマ数字にするには list-style-type を upper-roman にします 17.3( 演習 3-5) 順序つきリストを順序なしリストに変更しなさい pr3-5.html <title> </title> <ul> <li><table></li> <li><caption></li> <li><tr></li> <li><th></li> <li><td></li> <li><col></li> </ul> ol を順序なしリスト ul に書き換えます終了タグの方も書き換える必要があります 17.4( 演習 3-6)imgの画像ファイルがないとき何が起こる? 画像の代わりに altに指定した代用テキストが表示されます 17.5 ( 演習 3-7)mailto での送信を試しなさい <form action="mailto:someone@example.com" method="post" enctype="text/plain"> 上記色文字部分の mailto: に続く送信先を各自のものに変えて送信します 3

4 第 2 部 JavaScript 編 17.6 ( 演習 3-8) 本の読者アンケートフォームを作る pr3-8.html <title> </title> <h2> </h2> <form action="mailto:someone@example.com" method="post" enctype="text/plain"> <p> <input type="text" name=" "><br> </p><p> <select name=" "> <option value="10 ">10 </option><option value="20 ">20 </option> <option value="30 ">30 </option><option value="40 ">40 </option> <option value="50 ">50 </option><option value="60 ">60 </option> <option value="70 ">70 </option><option value="80 ">80 </option> </select> </p><p> <br> <input type="checkbox" name=" " value=" "> <input type="checkbox" name=" " value=" "> <input type="checkbox" name=" " value=" "> <input type="checkbox" name=" " value=" "> <input type="checkbox" name=" " value=" "> </p><p> <br> <input type="radio" name="grade" id="good" value="grade1"> <label for="good"> </label> <input type="radio" name="grade" id="soso" value="grade2"> <label for="soso"> </label> <input type="radio" name="grade" id="bad" value="grade3"> <label for="bad"> </label> </p><p> <br> <textarea rows="5" cols="30" name=" "></textarea> </p> <input type="submit" value=" "> </form> 17.7( 演習 4-1)divやspanにtitle 属性を指定してツールチップを表示 pr4-1.html <title> </title> <style>.conts {width:90%;background-color:#ccffcc 4

5 17. 演習の答え.pnt {color:red </style> <h3> </h3> <div class="conts" title=" "> <ul> <li> 1 </li> <li> 1</li> <li> </li> <li> 1</li> </ul> </div> <h3> </h3> <div class="conts" title=" "> <ol> <li> </li> <li> </li> <li> </li> <li> 20 </li> </ol> <span class="pnt" title=" "> </span> <br> <span class="pnt" title=" "> </span> </div> 17.8 ( 演習 6-1) 変数名の先頭を大文字に変えると? pr6-1.html <title> </title> var theme = " "; var title = ""; var studentid = null; var pages, tate = 20, yoko = 20; alert( "theme " + theme ); alert( "title " + title ); alert( "studentid " + studentid ); alert( "pages " + Pages ); alert( "tate " + tate ); alert( "yoko " + yoko ); 5

6 第 2 部 JavaScript 編 studentidの内容が表示されたあと alertダイアログが表示されません Pagesという変数は宣言されていないためエラーとなりそこでプログラムの実行が終わるためです 17.9 ( 演習 6-2)3 日間の売上金額を入れる配列 pr6-2.html <title> </title> <h1>3 </h1> var sales = new Array(); sales[0] = ; sales[1] = ; sales[2] = ; alert( sales[0] ); alert( sales[1] ); alert( sales[2] ); new Array(); でsalesを宣言したあと配列要素番号を指定してそれぞれの日の売上金額を代入します配列要素番号は 0 2 です ( 演習 6-3) 曜日の名前を配列に入れリストで表示 pr6-3.html <title> </title> <h1> </h1> <ul> var dayname = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]; document.write( "<li>" + dayname[0] ); document.write( "<li>" + dayname[1] ); 6

7 17. 演習の答え document.write( "<li>" + dayname[2] ); document.write( "<li>" + dayname[3] ); document.write( "<li>" + dayname[4] ); document.write( "<li>" + dayname[5] ); document.write( "<li>" + dayname[6] ); </ul> の前後で <ul> と </ul> タグを書きリストの中身 <li> はで書いています document.write() で "<li>" に続けて各曜日の名前を出力しています daynameの要素は dayname[0] dayname[6] ですなお daynameの宣言部のようにコードが横に長くなるときはコンマなどの切れ目で改行して読みやすくします引用符で囲んだ定数文字列の途中など変なところでは区切らないようにしましょう 17.11( 演習 6-4)[ 深夜 ] のボタンを押すと "Good night!" と表示する pr6-4.html <title> </title> <p> </p> function greet( msg ) { alert( msg ); <button type="button" onclick="greet( 'Good morning!' )"> </button> <button type="button" onclick="greet( 'Hello!' )"> </button> <button type="button" onclick="greet( 'Good evening!' )"> </button> <button type="button" onclick="greet( 'Good night!' )"> </button> 17.12( 演習 8-1)if 文を使って人数に応じた団体割引率を表示 pr8-1.html function discount() { var ninzu = prompt( " ", "1" ); 7

8 第 2 部 JavaScript 編 if( ninzu >= 300 ) { alert( "3 " ); else if( ninzu >= 100 ) { alert( "2 " ); else if( ninzu >= 30 ) { alert( "1 " ); else { alert( " " ); <p> </p> <button type="button" onclick="discount()"> </button> 300 人以上が3 割引その条件のelse つまり 300 人未満という条件のうち100 人以上が2 割引ですから else if( ninzu >= 100 ) と書けますそれも除いた残りのうち30 人以上が1 割引ということですからその下でelse if( ninzu >= 30 ) と書けば1 割引となる人数の判断ができますもしも問題文の通りにif 文を書くと次のようになります if( ninzu >= 300 ) { alert( "3 " ); if( ninzu < 300 && ninzu >= 100 ) { alert( "2 " ); if( ninzu < 100 && ninzu >= 30 ) { alert( "1 " ); if( ninzu < 30 ) { alert( " " ); これでもプログラムは動くのですが上の答えの書き方の方が読みやすいだけでなく処理内容が単純明快ですなおこの演習問題のテンプレートでは head 部のに関数を置き body 部に書いたボタンのイベントによりその関数を呼び出して使っています ( 演習 8-2) 偶数判定のプログラム (if-else 版 ) pr8-2.html function iseven( num ) { // true false if( num % 2 == 0 ) { return true; else { return false; 8

9 17. 演習の答え function inputnum() { var num = prompt( " ", "0" ); var res = iseven( num ); document.getelementbyid ("msgout").innerhtml =" " + res + " " <p> </p> <button type="button" onclick="inputnum()"> </button> <p id="msgout"></p> ifの条件がtrueのときも elseのときも実行する文が1つだけなので { で囲まずに次のように書いても構いません if( num % 2 == 0 ) return true; else return false; ( 演習 8-3) 偶数判定のプログラム ( 条件演算子版 ) pr8-3.html function iseven( num ) { // true false return ( num % 2 == 0 )? true : false; function inputnum() { var num = prompt( " ", "0" ); var res = iseven( num ); document.getelementbyid("msgout").innerhtml =" " + res + " " <p> </p> <button type="button" onclick="inputnum()"> </button> <p id="msgout"></p> 9

10 第 2 部 JavaScript 編 return で条件式の評価結果を返しています (num % 2 == 0) が真なら? の後の true が条件式の値になりそうでなければ false が条件式の値になります ( 演習 8-4)case"2" の break を取った時の動作は? 次のように変更して確認します pr8-4.html function show() { var kanji, num = prompt( " ", "" ); switch( num ) { case "1": kanji=" "; break; case "2": kanji=" "; // break; case "3": kanji=" "; break; default : kanji=" "; break; document.getelementbyid("msgout").innerhtml=kanji; <p> </p> <button type="button" onclick="show()"> </button> <p id="msgout"></p> case "2" の後のbreakを取ると 2 を指定したときに " 参 " が表示されます 2を指定したときのプログラムの動作は case "2" でkanji=" " としたあとbreakがないのでそのまま下に流れてcase "3" のコードへ進みますそして kanjiに " " が代入されますそのあとのbreakでswitch を抜けます document.getelementbyid("msgout").inner HTML=kanji; により最後にkanjiに代入された " 参 " が表示されますその他の数字を指定したときは各 caseのbreakでswitchを抜けるので正しく動作します 17.16( 演習 8-5)numの初期値が5だとすると何が表示される? 次のように変更して確認します ex8-9.html の書き換え 10

11 17. 演習の答え var num = 5; while( num > 7 ) { num -= 7; alert( num ); numの初期値が 5 だと whileループの条件 num > 7を最初から満たさないので繰り返しの中身は一度も実行されません初期値のままの 5 が表示されます 17.17( 演習 8-6)continue と break を逆にすると? 次のように変更して確認します ex8-11.html の書き換え function arrayopr() { var data = new Array( 1, 3, 5, 0, 7, -1, 9 ); var i; for( i = 0; i < data.length; i++ ) { if( data[i] == 0 ) break; if( data[i] < 0 ) continue; document.getelementbyid("msgout").innerhtml += "data[" + i + "] = " + data[i] + "<br>"; document.getelementbyid("msgout").innerhtml += " :i = " + i; <p>continue break </p> <button type="button" onclick="arrayopr()"> </ button> <p id="msgout"></p> 11

12 第 2 部 JavaScript 編 data[3] の 0 のときに break によって for の繰り返しを抜けるので表示されるデータは先頭の 3 つだけですね繰り返し終了後の i の値は 3 です data[0] = 1 data[1] = 3 data[2] = 5 :i = ( 演習 10-1)maxIndex() のテスト用データを考えなさい ( テストデータ例 ) 確認項目テストデータ期待される結果配列を渡すと最大値を持つ要素の要素番号を戻すか [ 2, 5, 7, 3, 15, 4, 1 ] [ 22, 3, 5, 8, 12 ] [ 1.2, 6.1, 5.3, 6.2 ] 最大値が複数回現れるとき最小の要素番号を戻すか [ 2, 15, 7, 3, 15, 4, 1 ] 1 配列以外が指定されたら -1 を戻すか 5 ([] で囲まない ) -1 配列に要素が含まれないときは -1 を戻す [] または new Array() ( 演習 10-2)total() を使って数値の配列の平均値を求めなさい pr10-2.html function total( a ) { var sum, i; if( a.length === undefined a.length < 1 ) return [ -1, undefined ]; sum = 0; for( i = 0; i < a.length; i++ ) { sum += a[i]; return [ 0, sum ]; function testmain( ) { var array = [ 3, 2, 5, 1, 4, 7 ]; var reply = total( array ); if( reply[0] == 0 ) { alert( " : " + reply[1] / array.length ); 12

13 17. 演習の答え <p> </p> <button onclick="testmain()"> </button> 平均は total() で求めた合計を配列要素数で割り算して求めます total() の処理がうまくいったか if 文でreply[0] を判定しています戻り値が0つまり OK ならreply[1] に入っている合計を配列要素数 array.lengthで割りその結果を表示します ( 演習 12-1) プロパティの値を表示しなさい確認するプログラムは次のようになります pr12-1.html <title> </title> <p id="id1" style="color:gray"> </p> function chgcolor( colname ) { document.getelementbyid("id1").style.color = colname; function getprop() { var elm = document.getelementbyid("id1"); alert( elm.innerhtml ); alert( elm.style.color ); <button type="button" onclick="chgcolor( 'red' )"> </button> <button type="button" onclick="chgcolor( 'blue' )"> </button> <button type="button" onclick="chgcolor( 'yellow' )"> </button> <button type="button" onclick="getprop()"> </button> 13

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数演習 1 演習 2 document.getelementbyid 関数演習 3 イベント処理基本的なフォームテキストボックスの入力値の取得演習 4 IE における JavaScript のデバッグ方法 1. ツールインターネットオプションメニューを実行 2. 詳細設定タブのスクリプトエラーごとに通知を表示するをチェック