プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

課題【イベント操作】ーNo.09

課題内容

  • <概要>
  •  2つのdivタグ(縦/横が200px)を用意しましょう。
  •  このdivタグは、
  •  要素の境界がわかるように、
  •  枠線をつけておきましょう。
  •  1つ目のdivタグの背景色は赤色に、
  •  2つ目のdivタグの背景色は青色にしましょう。
  •  
  •  このdivタグに、
  •  マウスカーソルを当てた時には、
  •  「XXにマウスカーソルが当たりました」
  •  (XXは「赤色」か「青色」を表示)
  •  という文字列を、
  •  マウスカーソルをdivタグから外した時、
  •  「XXからマウスカーソルが外れました」
  •  (XXは「赤色」か「青色」を表示)
  •  という文字列を、
  •  アラートとコンソールに、
  •  それぞれ表示しましょう。
  •   

出力結果

表示としては、

このようなdivタグを表示します。

このあとは、

この赤色、青色のそれぞれに、

このように、

マウスカーソルを当てたり、外したりします。

マウスカーソルが当たっているか、

外れたかという点に関しては、

divタグの枠の中に、

(わかりやすく、背景を無くして説明します)

このようにマウスカーソルがあれば、

XXにマウスカーソルが当たりました
(XXは「赤色」か「青色」を表示)

をコンソールに表示します。

そして、

上記の状況から、

このように、

枠外にマウスのカーソルが動いた時に、

コンソールに以下の表示を行います。

XXからマウスカーソルが外れました
(XXは「赤色」か「青色」を表示)

ポイント(イベント操作)

DOMのイベント操作に関しては、

  • 対象のDOM操作の要素を取得する
  • 要素のイベントの処理を設定する

を行うことで、

イベントを操作することができます。

このイベント操作の方法に関しては、

以下の記事を参考にしてください。

イベント操作(要素にマウスカーソルが当たった時の操作)

イベント操作に関して、

「要素にマウスカーソルが当たった時の操作」

に関しては、

イベント操作の中でも、

「mouseenter」

を使って操作を行います。

このイベント操作の方法に関しては、

以下の記事を参考にしてください。

イベント操作(要素にマウスカーソルが外れた時の操作を行う)

イベント操作に関して、

「要素にマウスカーソルが外れた時の操作を行う」

に関しては、

イベント操作の中でも、

「mouseleave」

を使って操作を行います。

このイベント操作の方法に関しては、

以下の記事を参考にしてください。

答え

HTML

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <div class="custom-div red"></div>
    <div class="custom-div blue"></div>
  </body>
  <script type="text/javascript" src="sample.js"></script>
</html>

CSS

.custom-div {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  cursor: pointer;
}

.custom-div.red {
  background-color: red;
}

.custom-div.blue {
  background-color: blue;
}

javaScript

// DOMを取得する(赤色)
let sampleRed = document.querySelector('div.red');

// DOMを取得する(青色)
let sampleBlue = document.querySelector('div.blue');

// イベント操作
sampleRed.addEventListener('mouseenter', event => {

  // コンソールに表示
  console.log('赤色にマウスカーソルが当たりました');
});

// イベント操作
sampleRed.addEventListener('mouseleave', event => {

  // コンソールに表示
  console.log('赤色からマウスカーソルが外れました');
});

// イベント操作
sampleBlue.addEventListener('mouseenter', event => {

  // コンソールに表示
  console.log('青色にマウスカーソルが当たりました');
});

// イベント操作
sampleBlue.addEventListener('mouseleave', event => {

  // コンソールに表示
  console.log('青色からマウスカーソルが外れました');
});

初心者向けピックアップ

-->

人気記事(学ぶパンダ)