WEB制作の備忘録｜朧なる足痕

演習2

JavaScript

Q1:JavaScript の標準化されたものをなんと呼ぶか書きなさい

A:ECMAScript

Q2:js フォルダー内にある sample.js を読み込む記述をしなさい

A:

Q3:警告ウィンドウを表示するスクリプトを記述しなさい(値は不要)

A:alert();　メッセージを表示する警告ダイアログボックス

Q4:ブラウザに文字列を表示するスクリプトを記述しなさい(値は不要)

A:document.write('');

  • prompt('',''); ユーザーにデータを入力してもらうダイアログボックス
  • parseInt(); 文字列を数値に変換

Q5:マウスでクリックするときのイベントハンドラを記述しなさい

A:onclick

Q6:配列 fruits の要素をコンソール内に順次一覧表示するスクリプトを記述しなさい

  • (りんご、みかん、もも、すいか、バナナ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q6</title>
</head>
<body>
<script>
var fruits = ['りんご', 'みかん', 'もも', 'すいか', 'バナナ'];
for (var i = 0; i<5; i++) {
console.log(fruits[ i ]);
}
</script>
</body>
</html>
  • 1行1行改行する
  • これは×
    • var fruits = ['りんご', 'みかん', 'もも', 'すいか', 'バナナ'];
    • console.log(fruits);
  • allayで1個ずつ表示させても良い

Q7:今日の日付を、2015年X月X日(今日の日付)と表示させる記述をしなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q7</title>
</head>
<body>
<script>
  var today = new Date();
  var d = '今日は、' + today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日です。';
  document.write( d );
  console.log( d );
</script>
</body>
</html>
  • オブジェクト名はtoday
  • getFullYear() 大文字があり、()があるものはオブジェクト
  • getMonthは0カウントのため＋1が必要
  • ブログの日付更新で必要

Q8:1~10 までの数値を加算した合計をブラウザに表示するスクリプトを記述をしなさい。 (マウスイベント不要)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q8</title>
</head>
<body>
<script>
var ans=0;
for (var i=1; i<=10; i++) {
  ans += i;
  console.log(ans);
}
document.write('1~10までの合算は' + ans + 'です。');
</script>
</body>
</html>
  • function関数はいらない

Q9:ダイアログボックスの入力ウィンドウに入力された文字が「奇数」か「偶数」かを判別する記述をしなさい(ヒント:prompt で記述する)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q9</title>
</head>
<body>
<script>
var a=prompt('半角数字で入力してください。','例：5');
a=parseInt(a);

if (a % 2 === 0) {
  alert(a + 'は偶数です。')
} else {
  alert(a + 'は奇数です。')
}
</script>
</body>
</html>

Q10:img フォルダー内にある写真「d1.jpg~d6.jpg」を表示させるよう記述しなさい。 (ヒント:for 文で記述する)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q10</title>
</head>
<body>
<script>
var htmlstr = '';
for(var i=1; i<=6; i++) {
  htmlstr += '<img src="img/d' + i + '.jpg">';
}
document.write( htmlstr );
</script>
</body>
</html>
  • iのカウンター変数
  • imgフォルダ内
  • imgがつながった状態で可

Q11:1~10 までの数値を加算した合計をブラウザに表示するスクリプトを記述をしなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q11</title>
 <script>
function total() {
var ans=0;
for(var i=1; i<=10; i++) {
  ans += i;
}
document.write('1~10の合計は、' + ans + 'です');
}
</script>
</head>
<body>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
1~10を全て合計した結果を表示できます。</p>
<p><button onclick="total()">計算結果</button></p>
</body>
</html>
  • Q8の関数Ver.
  • 関数を使っても良い。イベントを書いてファンクション、ファンクションをクリックで呼び出す。

Q12:「5」から「0」までの、カウントダウンをコンソールに表示させる記述をしなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q12</title>
</head>
<body>
<script>
var i;
for (i=5; i>=0; i--) {
  console.log( i );  
}
</script>
</body>
</html>

Q13:ダイアログボックスの入力ウィンドウに入力された文字が「奇数」か「偶数」かを判別する記述をしなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q13</title>
<script>
function disc(){
var num;

var num = prompt('数字を半角数字で入力してください。' , '');
num = parseInt(num);

if(num % 2 === 0){
  alert(num + 'は、偶数です。');
} else {
  alert(num + 'は、奇数です。');
}
}
</script>
</head>
<body>
<p><button onclick="disc()">判別する</button></p>
</body>
</html>
  • Q9の関数Ver.

Q14:配列fruitsの要素を一覧表示するスクリプトになるよう、空欄（A）（B）（C）を埋めなさい

  var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ'];
  for (var i =（ A ）; i <（ B ）; i++) {
    console.log(fruits（ C ）);
  }

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript：確認テスト0715：Q10</title>
</head>
<body>
<script>
var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ'];
for (var i = 0; i<5; i++) {
console.log(fruits[ i ]);
}
</script>
</body>
</html>