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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …

no image

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …

no image

Google Analytics始めてみた。

この記事は約 2 分で読めます。前々からアクセス解析は少し興味あって・・・。 「FC2」とか、「NINJA TOOLS」のアクセス解析を利用していたのですが、前々から気になっていた「Google An …

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …