JS基礎

JavaScript 自習

基礎の基礎から少しずつ、JavaScriptのおさらいをしてみます。

イベントハンドラ

写真をクリックするとアラートが表示される。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>イベントハンドラ</title>
</head>
<body>
	<img src="kori.jpg" width="481" height="320" onClick="alert('かき氷食べたい')">
</body>
</html>
関数を利用する

写真をクリックすると関数が呼び出されて、アラートが表示される。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>onClickイベントで関数</title>
    <script type="text/javascript">
	function photo() {
		alert('かき氷食べたいその２');
	}
	</script>
</head>
<body>
	<img src="kori.jpg" width="481" height="320" onClick="photo()">
</body>
</html>
変数の利用

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>変数の利用</title>
    <script type="text/javascript">
	function kotae() {
		var a = '梅干し';
		alert(a);
	}
    </script>
</head>
<body>
	<h1>問題</h1>
    <p>煮物の荷崩れを防ぐ為に入れる食べ物は何？</p>
    <button onClick="kotae()">答えを見るε(●’-')</button>
</body>
</html>
  • グローバル変数: 関数の外で宣言。Javascript全体で使える
  • ローカル変数: 関数内で宣言。その関数内でのみ使える（↑の記述）