付録
第 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
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
第 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
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
第 2 部 JavaScript 編 studentidの内容が表示されたあと alertダイアログが表示されません Pagesという変数は宣言されていないためエラーとなり そこでプログラムの実行が終わるためです 17.9 ( 演習 6-2)3 日間の売上金額を入れる配列 pr6-2.html <title> </title> <h1>3 </h1> var sales = new Array(); sales[0] = 180000; sales[1] = 220000; sales[2] = 321000; alert( sales[0] ); alert( sales[1] ); alert( sales[2] ); new Array(); でsalesを宣言したあと 配列要素番号を指定して それぞれの日の売上金額を代入します 配列要素番号は 0 2 です 17.10 ( 演習 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
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
第 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 部に書いたボタンのイベントにより その関数を呼び出して使っています 17.13 ( 演習 8-2) 偶数判定のプログラム (if-else 版 ) pr8-2.html function iseven( num ) { // true false if( num % 2 == 0 ) { return true; else { return false; 8
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; 17.14 ( 演習 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
第 2 部 JavaScript 編 return で条件式の評価結果を返しています (num % 2 == 0) が真なら? の後の true が条 件式の値になり そうでなければ false が条件式の値になります 17.15 ( 演習 8-4)case"2" の break を取った時の動作は? 次のように変更して確認します pr8-4.html function show() { var kanji, num = prompt( " 1 2 3 ", "" ); 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
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
第 2 部 JavaScript 編 data[3] の 0 のときに break によって for の繰り返しを抜けるので 表示されるデータは先頭 の 3 つだけですね 繰り返し終了後の i の値は 3 です data[0] = 1 data[1] = 3 data[2] = 5 :i = 3 17.18( 演習 10-1)maxIndex() のテスト用データを考えなさい ( テストデータ例 ) 確認項目テストデータ期待される結果 配列を渡すと 最大値を持つ要素の要素番号を戻すか [ 2, 5, 7, 3, 15, 4, 1 ] [ 22, 3, 5, 8, 12 ] [ 1.2, 6.1, 5.3, 6.2 ] 4 0 3 最大値が複数回現れるとき 最小の要素番号を戻すか [ 2, 15, 7, 3, 15, 4, 1 ] 1 配列以外が指定されたら -1 を戻すか 5 ([] で囲まない ) -1 配列に要素が含まれないときは -1 を戻す [] または new Array() -1 17.19( 演習 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
17. 演習の答え <p> </p> <button onclick="testmain()"> </button> 平均は total() で求めた合計を配列要素数で割り算して求めます total() の処理がうまくいったか if 文でreply[0] を判定しています 戻り値が0つまり OK ならreply[1] に入っている合計を配列要素数 array.lengthで割り その結果を表示します 17.20 ( 演習 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