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

(1)

(2)

17 演習の答え

◦17.1（演習3-3）1列目のwidthを200px、2列目を300pxにしなさい pr3-3.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>標準色</title> </head> <body>

<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> </body> </html> ◦17.2（演習3-4）順序つきリストの番号をローマ数字に変更しなさい pr3-4.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>テーブルに使うタグ</title> </head> <body> <ol style="list-style-type:upper-roman"> <li><table></li> <li><caption></li>

(3)

ol

の番号をローマ数字にするには、

list-style-type

を

upper-roman

にします。 ◦17.3（演習3-5）順序つきリストを順序なしリストに変更しなさい pr3-5.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>テーブルに使うタグ</title> </head> <body> <ul> <li><table></li> <li><caption></li> <li><tr></li> <li><th></li> <li><td></li> <li><col></li> </ul> </body> </html> 　

ol

を順序なしリスト

ul

に書き換えます。終了タグの方も書き換える必要があります。 ◦17.4（演習3-6）imgの画像ファイルがないとき何が起こる？ 　画像の代わりに、

alt

に指定した代用テキストが表示されます。 ◦17.5（演習3-7）mailtoでの送信を試しなさい

(4)

◦17.6（演習3-8）「本の読者アンケート」フォームを作る pr3-8.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>読者アンケート</title> </head> <body> <h2>読者アンケートにご協力ください</h2>

<p>

本の名前：<input type="text" name="書籍名"><br> </p><p>年代：

</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="bad" value="grade3"> <label for="bad">面白くなかった</label>

</p><p>その他感想があれば教えてください<br>

<input type="submit" value="送信"> </form> </body> </html> ◦17.7（演習4-1）divやspanにtitle属性を指定してツールチップを表示 pr4-1.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>おいしい目玉焼き</title> <style> .conts {width:90%;background-color:#CCFFCC}

(5)

.pnt {color:red} </style>

</head> <body> <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> </body> </html> ◦17.8（演習6-1）変数名の先頭を大文字に変えると？ pr6-1.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>変数定義</title> </head> <body> 変数の内容を表示します <script> 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 ); </script>

(6)

</body> </html> 　

studentID

の内容が表示されたあと、alertダイアログが表示されません。　

Pages

という変数は宣言されていないためエラーとなり、そこでプログラムの実行が終わるためです。 ◦17.9（演習6-2）3日間の売上金額を入れる配列 pr6-2.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>配列を使う演習</title> </head> <body> <h1>3日間の売上金額</h1> <script>

var sales = new Array(); sales[0] = 180000; sales[1] = 220000; sales[2] = 321000; alert( sales[0] ); alert( sales[1] ); alert( sales[2] ); </script> </body> </html>

new Array();

で

sales

を宣言したあと、配列要素番号を指定して、それぞれの日の売上金額を代入します。配列要素番号は、0 〜 2です。 ◦17.10（演習6-3）曜日の名前を配列に入れ、リストで表示 pr6-3.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>配列を使う演習</title> </head> <body> <h1>曜日</h1> <ul> <script>

var dayname = [ "Monday", "Tuesday", "Wednesday"

, "Thursday", "Friday", "Saturday", "Sunday" ]; document.write( "<li>" + dayname[0] );

(7)

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] ); </script>

</ul> </body> </html>

<script>

〜

</script>

の前後で

<ul>

と

</ul>

タグを書き、リストの中身

<li>

は

<script>

〜

</script>

で書いています。

document.write()

で

"<li>"

に続けて各曜日の名前を出力しています。

dayname

の要素は、

dayname[0]

〜

dayname[6]

です。

　なお、

dayname

の宣言部のように、コードが横に長くなるときは、コンマなどの切れ目で改行して読みやすくします。引用符で囲んだ定数文字列の途中など、変なところでは区切らないようにしましょう。 ◦17.11（演習6-4）［深夜］のボタンを押すと、"Goodnight!"と表示する pr6-4.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>あいさつを表示する関数</title> </head> <body> <p>関数を呼び出して使う</p> <script> function greet( msg ) { alert( msg ); } </script>

</body> </html> ◦17.12（演習8-1）if文を使って人数に応じた団体割引率を表示 pr8-1.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>Workbench</title> <script> function discount() {

(8)

if( ninzu >= 300 ) { alert( "3割引です" ); } else if( ninzu >= 100 ) { alert( "2割引です" ); } else if( ninzu >= 30 ) { alert( "1割引です" ); } else { alert( "割引なしです" ); } } </script> </head> <body> <p>団体割引率を調べます。</p>

<button type="button" onclick="discount()">人数を入力する</button> </body>

</html>

　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

部の

<script>

〜

</script>

に関数を置き、

body

部に書いたボタンのイベントにより、その関数を呼び出して使っています。 ◦17.13（演習8-2）偶数判定のプログラム（if-else版） pr8-2.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>Workbench</title> <script>

function isEven( num ) {

//偶数ならtrueを返し、そうでなければfalseを返す

if( num % 2 == 0 ) { return true; } else {

(9)

} }

function inputNum() {

var num = prompt( "調べる数値は？", "0" ); var res = isEven( num );

document.getElementById ("msgout").innerHTML ="判定結果は " + res + " です。" } </script> </head> <body> <p>偶数判定をします。</p>

<button type="button" onclick="inputNum()">数を入力する</button> <p id="msgout"></p>

</body> </html>

if

の条件が

true

のときも、

else

のときも実行する文が１つだけなので、

{ }

で囲まずに次のように書いても構いません。

if( num % 2 == 0 ) return true; else return false;

◦17.14（演習8-3）偶数判定のプログラム（条件演算子版） pr8-3.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>Workbench</title> <script>

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 + " です。" } </script> </head> <body> <p>偶数判定をします。</p>

<button type="button" onclick="inputNum()">数を入力する</button> <p id="msgout"></p>

</body> </html>

(10)

return

で条件式の評価結果を返しています。

(num % 2 == 0)

が真なら、

?

の後の

true

が条件式の値になり、そうでなければ

false

が条件式の値になります。 ◦17.15（演習8-4）case"2"のbreakを取った時の動作は？ 　次のように変更して確認します。 pr8-4.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>Workbench</title> <script> 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; } </script> </head> <body> <p>壱から参までの漢数字を表示します。</p>

</body> </html>

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の書き換え <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS">

(11)

<title>Workbench</title> </head> <body> <script> var num = 5; while( num > 7 ) { num -= 7; } alert( num ); </script> </body> </html>

num

の初期値が5だと、

while

ループの条件

num > 7

を最初から満たさないので、繰り返しの中身は一度も実行されません。初期値のままの5が表示されます。 ◦17.17（演習8-6）continueとbreakを逆にすると？ 　次のように変更して確認します。 ex8-11.htmlの書き換え <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>Workbench</title> </head> <body> <script> 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; } </script> <p>continueやbreakの確認</p>

<button type="button" onclick="arrayOpr()">ボタンを押してください</ button>

(12)

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 <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>Workbench</title> <script> 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 ); }

(13)

</script> </head> <body>

<p>配列要素の平均を求める</p>

<button onclick="testMain()">結果を表示する</button> </body>

</html>

　平均は、

total()

で求めた合計を配列要素数で割り算して求めます。

total()

の処理がうまくいったか、

if

文で

reply[0]

を判定しています。戻り値が0つまり、OK なら

reply[1]

に入っている合計を配列要素数

array.length

で割り、その結果を表示します。 ◦17.20（演習12-1）プロパティの値を表示しなさい 　確認するプログラムは、次のようになります。 pr12-1.html <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <title>色を変える関数</title> </head> <body> <p id="id1" style="color:gray">ボタンを押すと色が変わる</p> <script>

function chgColor( colname ) {

document.getElementById("id1").style.color = colname; }

function getProp() {

var elm = document.getElementById("id1"); alert( elm.innerHTML );

alert( elm.style.color ); }

</script>

<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>

</body> </html>