11/4 JavaScript - おかゆ学習帳

イベントハンドラの練習

イベント

「キーボードのボタンが押された」とか「マウスが移動した」等のコンピュータ上で発生するなんらかの事象のこと。

イベントハンドラ

イベントが発生したときに行う処理のこと。「on〜」で始まる。

【J01】[[Here]]

写真をクリックでアラート(警報、メッセージ)を表示するJavaScriptを記述する。

cursor: pointer
下記カーソルを合わせたときに指アイコンにするために記述する。

onClick="alert('表示させる文字')"
対象オブジェクトをクリックすると起動

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（1）</title>
<style type="text/css">
<!--
p img {
  cursor: pointer;
}
-->
</style>
</head>

<body>
<p><img src="images/baretrees.jpg" width="640" height="427" alt="木の写真" onClick="alert('モノクロの木の写真です！')"></p>
</body>
</html>

【J02】[[Here]]

マウスオーバーでアラートを表示するJavaScriptを記述する。

onMouseOver="alert('表示させる文字')
対象オブジェクトにマウスカーソルが重なった際に起動

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（2）</title>
<style type="text/css">
<!--
p img {
  cursor: pointer;	
}

-->
</style>
</head>

<body>
<p><img src="images/forest path bw.jpg" width="640" height="427" alt="森の小道" onMouseOver="alert('森の小道です！')"></p>
</body>
</html>

【J03】[[Here]]

マウスアウトでアラートを表示するJavaScriptを記述する。

onMouseOut="alert('表示させる文字')"
対象オブジェクトからマウスカーソルが離れた際に起動

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（3）</title>
<style type="text/css">
<!--
p img {
	cursor:pointer;
}
-->
</style>
</head>

<body>
<p><img src="images/concept _12_.jpg" width="640" height="427" alt="バラの写真" onMouseOut="alert('バラの写真です!')"></p>
</body>
</html>

【J04】[[Here]]

ページを開いた瞬間にアラートを表示するJavaScriptを記述

onLoad="alert('表示させる文字')"
ページがロードされた際に起動

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（4）</title>
</head>

<body>
<p><img src="images/tour-effel-close-sun-bw.jpg" width="640" height="427" alt="エッフェル塔" onLoad="alert('エッフェル塔!')"></p>
</body>
</html>

【J05】[[Here]]

クリックでアラートを表示する。「function」を使用。

function＝関数
同じ計算,同じ動作を一つにまとめて名前を付けたもので、同じ処理を何度も繰り返す場合に使う。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（5）</title>
<style>
<!--
p img {
  cursor: pointer;
}
-->
</style>
<script> 
<!--
  function PhotoInfo() {
　　　alert('モノクロの木の写真です');
}
//-->
</script>
</head>

<body>
<p><img src="images/baretrees.jpg" width="640" height="427" alt="木の写真" onClick="PhotoInfo()"></p>
</body>
</html>

【J06】[[Here]]

ボタンをクリックしたらアラートで答えを表示する。「function」を使用

button onClick
ボタンをクリックした時に JavaScript を実行する

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラの練習（6）</title>
<script>
<!--
function ans() {
  var answer="You Tube";
  alert(answer);
}
//-->
</script>
</head>

<body>
<p>問題</p>
<p>インターネット動画サービスでもっとも有名な動画サイトは？<br>
<button onClick="ans()">答えを見る</button></p>
</body>
</html>

【J07】[[Here]]

「h1要素」と「ｐ要素」を表示するJavaScriptを記述する

document.write("表示させる文字")
括弧内にある文字をブラウザで表示する。

"\(バックスラッシュ)n"
改行

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字の表示</title>
<script>
<!--
document.write("<h1>はじめてのJavaScript</h1>"+"\n");
document.write("<p>ゼロからJavaScriptを記述できるように練習します。</p>");
//-->
</script>
</head>
<body>
</body>
</html>

【J08】

（1）onload=ウェブページの読み込み完了を示す
（2）( )=関数に渡される情報を囲む
（3）alert=ポップアップウィンドウにメッセージを表示する
（4）;=JavaScriptのコードの行の終端

【J09】[[Here]]

ボタンをクリックするとアラートに「Hello　JavaScript!」と表示させる。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンでアラートを表示</title>
<style type="text/css">
<!--
p button {
　cursor: pointer;
}
-->
</style>
<script>
<!--
function ans() {
  var answer="Hello JavaScript!";
  alert(answer);
}
//-->
</script>
</head>
<body>
<h2>アラートを表示する</h2>
<hr>
<p>ボタンをクリックするとアラートが表示されます。</p>
<p><button onClick="ans()">クリックしてください。</button></p>
</body>
</html>

【J10】[[Here]]

JavaScriptをOFF状態の場合に、有効にして見ることを促す文字が見えるようにする。

＜noscript＞〜＜/noscript＞
JavaScriptに対応していないブラウザへのメッセージを記述する際に用いる。
スクリプト対応ブラウザは＜noscript＞〜＜/noscript＞の間の文書を無視し、未対応ブラウザは＜noscript＞〜＜/noscript＞の間の文書を表示する。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>noscriptタグの使用例</title>
<script>
<!--
 document.write("<h1>JavaScriptを実行中です<\/h1>");
//-->
</script>
</head>
<body>
<noscript>
<h1>このページはJavaScriptを有効にしてご覧ください</h1>
</noscript>
</body>
</html>