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

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

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

関連記事

no image

クリッカプルマップをjQueryでレスポンシブ対応させる方法

この記事は約 1 分で読めます。 滅多に使わないのですが、たま~に「クリッカプルマップ」を使用してコーディングをする事があります。 しかし、「クリッカプルマップ」はレスポンシブで使用してしまうと、リン …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …

no image

「baserCMS」をエックスサーバーにインストールしてみた

この記事は約 1 分で読めます。 今回、「baserCMS」に関わる機会がありそうなので、試しにエックスサーバー にインストールしてみました。 日頃WordPressばかりだったので、簡単インストール …