Webの記録

苦手なJavaScriptをイチから勉強してみる【イベント編】

投稿日:2013年1月6日 更新日:

この記事は約 5 分で読めます。

苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。

イチから「JavaScript」を学び直しをする為に記録を残しています。少しずつメモを追加していきます。

私の個人的なメモなので、ちょっと違うよ!とか、こうしたら?というのがあると思います。その場合はこっそりコメント等頂けると有難いです!

少しずつメモしているので、連載的な感じで続きを書いていってます。過去のメモも、時々追記していきます。超・初心者向けです。


JavaScript勉強の流れ

  1. 基本準備編
  2. 記述の基礎編
  3. イベント編 ←今回はココ。
  4. 関数編
  5. JavaScriptを外部ファイルにする
  6. 条件分岐(if文)と繰り返し処理(for文)・・・これから更新していきます!

イベントって?

JavaScriptの実行を、ユーザーの操作(クリックしたら実行など)のタイミングや、ページを読み込んだり・・・の状況に応じて利用する。

代表的なマウスイベント
onclick
クリックした時
ondblclick
ダブルクリックした時
onmousedown
マウスボタンを押した時
onmouseup
マウスボタンを離した時
onmouseover
マウスカーソルが領域内に入った時
onmouseout
マウスカーソルが領域内から離れた時
簡単なマウスイベントの例

練習用なので、アラート表示をするようにしています。

表示したらすぐにアラートを出して、それぞれの文字列の上でマウス操作をするとアラートを出すようにしています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="lt" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Javascript</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="imagetoolbar" contents="no" />

<link href="css/fontset.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="message">マウスの反応をみる</div>

<ul>
	<li><a href="#" id="red" onclick="alert('「あいうえお」をクリックしたね');">あいうえお</a></li>
	<li><a href="#" id="blue" onmouseover="alert('「かきくけこ」の上にカーソルをのせたね');">かきくけこ</a></li>
	<li><a href="#" id="green" ondblclick="alert('「さしすせそ」をダブルクリックしたね');">さしすせそ</a></li>
</ul>

<script type="text/javascript">
<!--
        alert('表示されたら警告');
//-->
</script>
<noscript>
	<p>このページはJavaScriptを有効にしてください。</p>
</noscript>
</body>
</html>

onclick=”○○”などの、○○の部分に実行したい内容を記述します。

全部の行にJavaScriptを記述していると、内容によっては同じ処理を何度もする場合もあるので効率が悪いし、コードが長くなります。
そんなワケで、関数にする方法を次回で書きます。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ6【single.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今のところ、「index.php」「header.php」「sidebar.php」「footer. …

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …

no image

Evernote Site Memoryボタンを付けてみた♪

この記事は約 1 分で読めます。日頃、いろいろな情報をEvernoteにまとめています。 使い始めるとホントに便利で、無くてはならない存在になっています。 ・・・で、Evernoteで便利な方法はない …

no image

WordPressのオベンキョウ①

WordPressで、自分のサイトを作る事にしました。