36日目 習熟度確認試験2 JavaScript
※以下の指示に従って、プログラムを作成しなさい。
・表示は全てブラウザ上に表示するように記述すること
・DOMまたはwrite()メソッドと指定がない場合は、どちらでも可。
・CSSの記述は不要（必然性があれば記述可）
【問1】サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問１】</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="imgbox"> <h1>【問１】サムネール</h1> <div class="thumbnail"> <img src="../img/s01.jpg" alt="" onmouseover="swap.src='../img/01.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s02.jpg" alt="" onmouseover="swap.src='../img/02.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s03.jpg" alt="" onmouseover="swap.src='../img/03.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s04.jpg" alt="" onmouseover="swap.src='../img/04.jpg'" onmouseout="swap.src='../img/00.jpg'"><img src="../img/s05.jpg" alt="" onmouseover="swap.src='../img/05.jpg'" onmouseout="swap.src='../img/00.jpg'"> </div><!--/.thumbnail--> <div class="mainImg"> <img src="../img/00.jpg" alt="" name="swap"> </div><!--/.mainImg--> </div><!--/.imgbox--> </body> </html>
【問2】1～45までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問２】</title> <script> function kai() { var ans = 0; for(var i=1; i<=45; i++) { ans += i; } var total = '1～45までの合計は、'+ ans +'です。'; document.getElementById('sumNum').textContent = total; } </script> </head> <body> <h1>【問２】1～45までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。</h1> <p><button onClick="kai()">合計を求める</button></p> <div id="sumNum"></div> </body> </html>
【問3】入力された値が7の倍数かどうかを判別する記述を、write()メソッドの記述を使ってボタンを押したときに表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問３】</title> <script> var num; function baisu() { num = prompt( '半角数字を入力して下さい', 49 ); num = parseInt( num ); if ( num%7 === 0 ) { document.write( '入力された' + num + 'は7の倍数です。' ); } else { document.write( '入力された' + num + 'は7の倍数ではありません。' ); } } </script> </head> <body> <h1>入力された値が7の倍数かどうかを判別します。</h1> <p><button onClick="baisu()">判別する</button></p> </body> </html>
【問4】1～入力された値までの合計を、write()メソッドの記述を使ってボタンを押したときに表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問４】</title> <script> function total() { var ans = 0; var maxNum; maxNum = prompt('半角で数字を入力して下さい。','100'); maxNum = parseInt( maxNum ); for(var i=1 ; i<=maxNum ; i++) { ans += i ; console.log( ans ); } document.write('1～' + maxNum + 'の合計は、' + ans + 'です。'); } </script> </head> <body> <h3>入力した数字までの合計</h3> <p>以下のボタンをクリックすると、<br> 入力した数字までの合計を求めて表示します。</p> <p><button onclick="total()">計算結果</button></p> </body> </html>
【問5】今日の西暦年月日曜日(～年～月～日～曜日)を表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問５】</title> </head> <body> <script> var n= new Date(); var f= n.getFullYear(); var m= n.getMonth()+1; var d= n.getDate(); var y= n.getDay(); var w=[ '日', '月', '火', '水', '木', '金', '土']; y = w[y]; document.write('<h1>今日は' + f +'年' + m + '月' + d + '日' + y + '曜日です。</h1>' ); </script> </body> </html>
【問6】現在の時刻を(～時～分～秒)を表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問６】</title> <script> function time() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var htmlstr; htmlstr = '現在の時刻は、' + h + '時' + m + '分' + s + '秒です。' document.getElementById( 'ans' ).textContent = htmlstr; } </script> </head> <body> <h1>現在の時刻を表示</h1> <p><button onClick="time()">表示する</button></p> <div id="ans"></div> </body> </html>
【問7】「月曜日」と「金曜日」が「定休日」、それ以外は「営業日」を表示させなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問７】</title> <script> function yobi() { var today = new Date(); var day = today.getDay(); var holiday = '今日は定休日です。'; var weekday = '今日は営業しています。'; if( day===1 || day===5 ) { document.getElementById( 'ans' ).textContent = holiday; } else { document.getElementById( 'ans' ).textContent = weekday; } } </script> </head> <body onLoad="yobi()"> <h1>定休日か営業日か判別</h1> <p id="ans"></p> </body> </html>
【問8】「大吉」「中吉」「小吉」「凶」と、ボタンを押したときにランダムに表示されるおみくじプログラムをDOMの記述を使って作りなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問８】</title> <script> function omikuji() { var rdm = Math.random(); if( rdm< 0.25 ) { document.getElementById( 'ans' ).textContent = '大吉'; } else if( rdm<0.5 ) { document.getElementById( 'ans' ).textContent = '中吉'; } else if( rdm<0.75 ) { document.getElementById( 'ans' ).textContent = '小吉'; } else { document.getElementById( 'ans' ).textContent = '凶'; } } </script> </head> <body> <h1>おみくじ</h1> <p>下のボタンをクリックするとおみくじが引けます。</p> <p><button onclick="omikuji()">おみくじを引く</button></p> <h2 id="ans"></h2> </body> </html>
【問9】5×5までの九九一覧表を、write()メソッドで記述しなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問９】</title> <style> table { border-collapse: collapse; } td,th { width: 50px; text-align: center; } th { background-color: #CCC; } </style> </head> <body> <table width="500" border="1"> <tr> <th> </th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> </tr> <script> for (var i=1 ; i<=5 ; i++) { document.write('<tr>'); document.write('<th>' + i + '</th>'); for (var j=1 ; j<=5; j++) { document.write('<td>' + i*j + '</td>'); } document.write('</tr>'); } </script> </table> </body> </html>
【問10】表示されている画像をクリックの度に、順番(1→2→3→4→5)に表示が変更されるプログラムをDOMの記述を使って作りなさい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【問１０】</title> <script> var i=1; var fig; function change() { if(i === 5) { i =1; //↑は５までいったら１に戻れという指示 } else { i++; } fig = '<img src="../img/' + i +'.jpg" alt="さいころ">'; document.getElementById('image').innerHTML = fig; } </script> </head> <body> <h1>画像をクリックする度に順番(1→2→3→4→5)に表示が変更されます。 <p id=image onClick="change()"><img src="../img/1.jpg" alt="さいころ"></p> </body> </html>
問１０が 「var i = 1;」の変数宣言を忘れていて出来なかった。
