JavaScript習熟度テスト:1〜5問目
【問1】サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。
習得度確認試験_1問目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>習得度確認試験_1問目</title> <link rel="stylesheet" href="style_q01.css"> </head> <body> <div class="imgBox"> <h1>【問1】</h1> <div class="thumbnail"> <!--実際はインラインで表記--> <img src="img/img01_s.jpg" alt="#" onMouseOver="swap.src='img/img01.jpg'" onMouseOut="swap.src='img/img00.jpg'"> <img src="img/img02_s.jpg" alt="#" onMouseOver="swap.src='img/img02.jpg'" onMouseOut="swap.src='img/img00.jpg'"> <img src="img/img03_s.jpg" alt="#" onMouseOver="swap.src='img/img03.jpg'" onMouseOut="swap.src='img/img00.jpg'"> <img src="img/img04_s.jpg" alt="#" onMouseOver="swap.src='img/img04.jpg'" onMouseOut="swap.src='img/img00.jpg'"> <img src="img/img05_s.jpg" alt="#" onMouseOver="swap.src='img/img05.jpg'" onMouseOut="swap.src='img/img00.jpg'"> </div><!--.thumbnail--> <div class="mainImg"> <img src="img/img01.jpg" alt="#" name="swap"> </div><!--.mainImg--> </div><!--.imgBox--> </body> </html>
【問2】1~45までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。
習得度確認試験_2問目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>習得度確認試験_2問目</title> </head> <body> <h1>ボタンを押すと、1~45までの合計を表示します。</h1> <p><button onClick="total()">答え</button></p> <p id="answer"></p> <script> var ans = 0; function total(){ for(var i=1; i<=45; i++){ console.log( i + '回目' ); ans += i; console.log( ans ); } document.getElementById( 'answer' ).innerHTML = '1~45までの合計は、' + ans + 'です。'; } </script> </body> </html>
【問3】入力された値が7の倍数かどうかを判別する記述を、write()メソッドの記述を使ってボタンを押した時に表示させなさい。
習得度確認試験_3問目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>習得度確認試験_3問目</title> </head> <body> <h1>入力された値が7の倍数かどうかを判別します。</h1> <p>以下のボタンをクリックすると、 入力された値が7の倍数かどうかを判別します。</p> <p><button onClick="judge()">数字を入力する</button></p> <script> var num; num = parseInt( num ); function judge() { num = prompt( '半角数字を入力して下さい。','' ); if( num%7 === 0 ){ document.write( '<h2>入力した数字' + num + 'は、7の倍数です。</h2>' ); } else { document.write( '<h2>入力した数字' + num + 'は、7の倍数ではありません。</h2>' ); } } </script> </body> </html>
【問4】1~入力された値までの合計を、write()メソッドの記述を使って、ボタンを押した時に表示させなさい。
習得度確認試験_4問目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>習得度確認試験_4問目</title> </head> <body> <h1>1~入力された値までの合計を表示します。</h1> <p>以下のボタンをクリックすると、<br> 入力した数字までの合計を求めて表示します。</p> <p><button onClick="total()">数字を入力する</button></p> <script> function total(){ var ans = 0; var maxNum; maxNum = prompt('半角数字を入力して下さい',''); maxNum = parseInt( maxNum ); for(var i=1; i<=maxNum; i++){ ans += i; } document.write( '1~' + maxNum + 'の合計は、' + ans + 'です。' ) } </script> </body> </html>
【問5】今日の西暦年月日曜日(~年~月~日~曜日)を表示させなさい。
習得度確認試験_5問目
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>習得度確認試験_5問目</title> </head> <body> <script> var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var day = now.getDay(); var w = [ '日','月','火','水','木','金','土' ]; day = w[ day ]; console.log( day ); document.write( '<h3>今日は' + ' ' + year + '年' + ' ' + month + '月' + ' ' + date + '日' + ' ' + ' ' + day + '曜日です。</h3>' ); </script> </body> </html>