JavaScript練習課題01〜05

JavaScript 授業

JavaScript練習課題（1）

載せていなかった授業内で進めたスクリプト

【J01】

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js01</title>
  <style type="text/css">
	p img {
		cursor: pointer;
	}
	</style>
</head>
<body>
 <p><img src="images/hana.jpg" width="500" height="333" onClick="alert('花の写真です')"></p>
</body>
</html>
【J02】

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js02</title>
  <style type="text/css">
	p img {
		cursor: pointer;
	}
	</style>
</head>
<body>
 <p><img src="images/hana.jpg" width="500" onMouseOver="alert('花の写真です')"></p>
</body>
</html>
【J03】

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js03</title>
  <style type="text/css">
	p img {
		cursor: pointer;
	}
	</style>
</head>
<body>
 <p><img src="images/hana.jpg" width="500" onMouseOut="alert('花の写真です')"></p>
</body>
</html>
【J04】

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js04</title>
  <style type="text/css">
	p img {
		cursor: pointer;
	}
	</style>
</head>
<body>
	<p><img src="images/hana.jpg" width="500" onLoad="alert('花の写真です')"></p>
</body>
</html>
【J05】

クリックでアラートを表示するJavaScriptを記述しなさい。J01と同じ結果です。「function」を使用しなさい。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>js05</title>
  <script>
	function photo() {
		alert('花の写真です');
	}
	</script>
  <style type="text/css">
	p img {
		cursor: pointer;
	}
	</style>
</head>
<body>
  <p><img src="images/hana.jpg" width="500" onClick='photo()'></p>
</body>
</html>