確認テスト JavaScript Form
17日は確認テストでした。
【ポイント】 JavaScript
window.alert( ); アラート作成
document.write(' '); ドキュメントに記載する
onClick="alert(' ')" クリックするとアラートが出る
onｍouseover="alert('' )" マウスが上にくるとアラートがでる
document.write(' ','<br>',' '); 改行
prompt(' '); 文字入力プロンプトが表示される
【ポイント】 Form
<input type="text"> テキストの入力欄を作成
<input type="radio"> ラジオボタンを作成
<input type="checkbox"> チェックボックスを作成
<input type="password"> パスワードの入力欄を作成
<input type="file"> ファイルの送信欄を作成
<textarea rows="" cols=""> テキスト入力行を複数作成する
<input type="submit" value="送信"> 送信ボタン
【ポイント】 if関数
if(条件○○だったら) {
alert(' '); }
（）内の条件がTrueの時alertが実行される。
確認テスト
答えは青字
１．
同一ディレクトリ内のJavaScriptファイル「sample.js」をHTMLファイルに読み込むには、どのように記述すればよいか書きなさい
※条件によって変わってくるそうですが、現段階での記載場所は<head>内となります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script src="sample.js"> </script>
</head>
<body>
</body>
</html>
2.
以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？
<script>
var x = 10, y = 20;
x = y;
y = x;
console.log (y);
</script>
20
3.
以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？<script>
var x = 10;
x += '10';
console.log(x);
</script>
1010
4.
以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？
<script>
var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ'];
console.log ( fruits[2]);
</script>
パイナップル
5.
以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？
<script>
var fruits = ['りんご', 'みかん', 'パイナップル', 'ぶどう', 'バナナ'];
console.log ( fruits.length );
</script>
5
6.
コンソールに「50」と表示するには、空欄「（1）」に何を記述すれがよいですか？
<script>
var number = [[10, 20], [30, 40, 50, 60], [70, 80, 90]];
console.log (number(1));
</script>);
[1][2]
7.連想配列では、インデックスのことをなんと呼びますか？
キー
8.コンソールに「山田太郎」と表示するスクリプトです。
空欄「（2）」に何を記述すればよいですか？
<script>
var user = { name:'山田太郎', age:25, height:170};
console.log (user（2）);
</script>
.name
9.以下は、連想配列の宣言と初期化を行うスクリプトです。
間違っている箇所があります。それはどこですか？
<script>
var profile = [ height:170, weight:60];
</script>
↓
<script>
var profile ={ height:170, weight:60};
</script>
10．以下のように記載させなさい
<body>
<p>あけましておめでとう!</p>
<script>
var kotoyoro;
kotoyoro = "今年もよろしく。";
window.alert(kotoyoro);
</script>
</body>
11.画像をクリックでアラートを表示するJavaScriptを記述しなさい。
（写真は自由。）「function」は使用しない通常のアラート。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q11</title>
<style>
p img {
cursor: pointer;
}
</style>
</head>
<body>
<p><img src="gazou1.gif" width="400" height="300" alt="Q11" onClick="alert('Q11 クリックでアラートを表示')"</p>
</body>
</html>
12.マウスオーバーでアラートを表示するJavaScriptを記述しなさい。
（写真は自由。を記述しなさい。（写真は自由。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q12</title>
<style>
p img {
cursor: pointer;
}
</style>
</head>
<body>
<p><img src="gazou1.gif" width="400" height="300" alt="Q12" onMouseOver="alert('Q12 マウスオーバーでアラートを表示')"</p>
</body>
</html>
13.ページを開いた瞬間にアラートを表示するJavaScriptを記述しなさい。
（写真は自由。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q13</title>
<style>
p img {
cursor: pointer;
}
</style>
</head>
<body>
<p><img src="gazou1.gif" width="400" height="300" alt="Q13" onload="alert('Q13 ページを開いた瞬間にアラートを表示')"</p>
</body>
</html>
14. 1年が何秒かを表示するJavaScriptを記述しなさい。
自分の
<!DOCTYPE HTML>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Q14</title>
</head>
<body>
<script>
var byou=60;
var fun=60;
var jikan=24;
var hi=365;
Year = byou*fun*jikan*hi;
document.write('一年間の秒数は'+Year+'です。');
</script>
</body>
</html>
【模範解答】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>１年間の秒数は？</title>
</head>
<body>
<script>
var byou = 60;
var fun = 60;
var jikan = 24;
var nichi = 365;
var time = byou * fun * jikan * nichi;
document.write('1年が何秒かをJavaScriptで表示します｡<br>');
document.write(byou, '秒×', fun, '分×', jikan, '時間×', nichi, '日 = ', time, '秒');
</script>
</body>
</html>
15.「長いメッセージの場合は、
改行します。」
と表示するJavaScriptを記述しなさい。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<script>
document.write('長いメッセージの場合は、','<br>','改行します。');
</script>
</body>
</html>
ポイント）<br>>もシングルフォーテーションで囲む。
ｂｒも必ずシングルフォーテーションで囲む！
16．以下のように表示するJavaScriptを記述しなさい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q16</title>
</head>
<body>
<script>
prompt('好きな花は？');
</script>
</body>
</html>
17．以下のように表示するJavaScriptを記述しなさい。
（20才以上なら、あなたは成人ですね それ以外は、あなたは未成年ですね
とアラートが出る様に。）
【模範】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q17</title>
</head>
<body>
<script>
var age;
age = prompt('年齢を入力してください');
if (age >= 20) {
alert('あなたは成人ですね');
} else {
alert('あなたは未成年ですね');
}
</script>
</body>
</html>
【もしくは自分なり】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q17</title>
</head>
<body>
<script>
var age;
age = prompt('年齢を入力してください');
if (age >= 20) {
alert('あなたは成人ですね');
}
if (age < 20){
alert('あなたは未成年ですね');
}
</script>
</body>
</html>
18.お問い合わせフォーム
【模範】
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<p>名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p>
<p>内容：<textarea name="subject" rows="5" cols="40">お問い合せ内容</textarea></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
19.ラジオボタン
【模範】
<body>
<h1>ラジオボタン</h1>
<form action="#" method="post">
<p>性別：
<input type="radio" name="sex" value="male" checked>男性
<input type="radio" name="sex" value="female">女性
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
20.チェックボックス
<body>
<h1>チェックボックス</h1>
<form action="#" method="post">
<p>スマートフォン：
<input type="checkbox" name="mobile" value="1" checked>iPhone
<input type="checkbox" name="mobile" value="1">Android
<input type="checkbox" name="mobile" value="1">その他
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
21.パスワード入力
<body>
<h1>パスワード入力</h1>
<form action="#" method="post">
<p>パスワード：<input type="password" name="password" size="10" maxlength="5" value="パスワード"></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
22.
<body>
<h1>写真をアップロード</h1>
<form action="#" method="post" enctype="multipart/form-data">
<p>写真：
<input type="file" name="picture">
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
