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

コピペで簡単にできるレスポンシブ対応GoogleMapの設置方法

この記事は約 1 分で読めます。 ショップなどのサイトだと、地図は必須ツール。GoogleMapを利用する機会が多いです。 今回、スマホ対応サイトでGoogleMapを設置する機会がありました。 細か …

no image

WordPress 「wp_head」を入れて上部に隙間ができた時

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作っていて、「wp_head();」を入れた途端・・・ブラウザ上部に28pxの隙間が出来る現象が起きました。 ブラウザによっては …

no image

「AMPPS」にa-blog cmsのローカル環境を作ってみる

この記事は約 1 分で読めます。 「MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる」で作ったローカル環境に国産CMSの「a-blog cms」をインストールしてみたいと思い …

no image

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。