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

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

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

no image

ライセンスについて考えてみた。

この記事は約 1 分で読めます。Webサイトを作っていて、素材だったり、ライブラリだったり・・・いろいろ利用しまくってます。 ・・・で、利用する際にいろいろ利用範囲や使い方について気になったりします。 …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

no image

WordPressプラグイン「PhotoDropper」でフリー画像を記事にラクラク挿入♪

この記事は約 1 分で読めます。 photo credit: Remedios205 文字だらけの記事。ちょっと読むのがツライですね。。。 でも、イメージ画像がナイ!そんな時に使えそうなプラグインを探 …