WEB、始めました

半年間WEB制作の学校に通います。その記録。

30日目　javascript　　イベント　swich文　演習

イベント
http://tototo.webcrow.jp/script/on01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イベント（１）</title>
</head>

<body>
<p><img src="img/01.jpg" alt="" onmouseover="console.log('マウスが乗りました');" onmouseout="console.log('マウスが外れました');"></p>

<p><img src="img/01.jpg" alt="" onmouseover="this.src='img/01_o.jpg'" onmouseout="this.src='img/01.jpg'"></p>
</body>
</html>

swich 文
http://tototo.webcrow.jp/script/swich.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>swich文で月を判定する</title>
<script>
var month;

function season() {
	month = prompt('月を入力してください','1から12の値を半角数字で入力');
	month = Number( month );
	//NumberはparseIntと同じ
	
	switch(month) {
		case 12:
		case 1:
		case 2:
		  document.write("<h1>冬です。</h1>");
		break;
		
		case 3:
		case 4:
		case 5:
		  document.write("<h1>春です。</h1>");
		break;
		
		case 6:
		case 7:
		case 8:
		  document.write("<h1>夏です。</h1>");
		break;
		
		case 9:
		case 10:
		case 11:
		  document.write("<h1>秋です。</h1>");
		break;
		
		default:
		  document.write("<h1>1から12の値を入力してください</h1>");
	}
	
}

</script>
</head>

<body>

<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウィンドウが表示されます。</p>
<p><button onclick='season()'>月別に季節を判別する</button></p>
</body>
</html>

演習

Q1.同一ディレクトリ内のJavaScriptファイル「sample.js」をHTMLファイルに読み込むには、どのように記述すればよいか書きなさい

A.

<script src="sample.js"></script>


Q2.以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？

<script>
  var x = 10, y = 20;
  x = y;
  y = x;
  console.log (y);
</script>


A.10


Q3.以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？

<script>
var x = 10;
x += '10';
console.log(x);
</script>

A.1010



Q4.1年が何秒かを表示するJavaScriptを記述しなさい。

A.

<script>
var byou = 60;
var fun = 60;
var jikan =24;
var niti = 365;
var time = byou * fun * jikan * niti;

console.log(time);

</script>

Q5.
「長いメッセージの場合は、
改行します。」
と表示するJavaScriptを記述しなさい。


A.

<script>
document.write('長いメッセージの場合は、' + '<br>' + '改行します。');


</script>


Q6.以下のように表示するJavaScriptを記述しなさい。

f:id:chawannmusi:20160309155004p:plain


A.

<script>
prompt('好きな花は？','ひまわり');

</script>

Q7.
画像をクリックでアラートを表示するJavaScriptを記述しなさい。
（写真は自由。）「function」は使用しない通常のアラート。


f:id:chawannmusi:20160309155109p:plain

A.

<script>
<body>
<p><img src="img/01.jpg" alt="茨城県産のいちご・あまおう" onclick="alert('茨城県産の「あまおう」です！');"></p>


</body>

</script>

Q8.マウスオーバーでアラートを表示するJavaScriptを記述しなさい。（写真は自由。）

f:id:chawannmusi:20160309155250p:plain

A.

<script>
<body>
<p><img src="img/01_o.jpg" alt="ショートケーキ" onMouseOver="alert('「あまおう」を使ったショートケーキの写真です！');"</p>

</body>

</script>


Q9.ページを開いた瞬間にアラートを表示するJavaScriptを記述しなさい。（写真は自由。）

A.

<script>
<body>
<p><img src="img/01.jpg" alt="茨城県産のいちご・あまおう" onload="alert('茨城県産の「あまおう」です！');"></p>

</body>
</script>