読者です 読者をやめる 読者になる 読者になる

アスリート系ですがプログラミング始めました。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

マウスダウン・マウスアップ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-04-8-59-03

 

このボタンにマウスをポチった時にボタンが下がる・戻るコードを勉強したいと思います。

simpledancer.hatenablog.com

前回の星座を乱数で表示するコードの下に

  • ボタンが下がる←mousedown
  • ボタンが戻る(上がる)←mouseup

この動作をするコードを書いていきます。

<script>

(function(){
"use strict";
document.getElementById('btn').addEventListener('click',function(){

var results=['牡羊座','牡牛座','双子座','山羊座','乙女座','水瓶','天秤座','蟹座'];

var result= Math.floor(Math.random() * results.length);

document.getElementById('result').innerHTML= results[result];

});//↓ココから
document.getElementById('btn').addEventListener('mousedown',function(){
this.className='pushed';

});
document.getElementById('btn').addEventListener('mouseup',function(){
this.className='pushed';
});
})();
</script>

**************************************

addEventListenerは

DOM(要素にアクセスする仕組み)的にイベントを登録する(イベントが起こったとき関数が動くようにする)。

頭でclickした時に起こる流れが上から書かれています。

'mousedown',function(){
this.className='pushed';

もしmousedownだけだと、ボタンは下がったまま元に戻りません。

addEventListener('mouseup',function(){
this.className='pushed';

でもmouseupを同時に宣言することでクリックした後ボタンがまた上に戻ることができます。

人間の感覚だと、普段自分が使う分にはボタンを押しても押しっぱなしなので戻すことは考えないと思うのですが、1つ1つを指示してあげないとコンピューターは動いてくれないんですね。。

(まだこの感覚に全然慣れません!)

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-10-47-27

なんとなくサンプルコードを写していたのを最近はこうして細分化して色々勉強するようにしてます。1つ1つ調べていくととても時間がかかって面倒なんですが腑に落ちる感覚を味わえて、充実感はあります。

Javascriptも勉強することが多すぎてRubyPHPが手を出せない。。

 

 

にほんブログ村 IT技術ブログへ
にほんブログ村