ネットワークエンジニアで高きを目指せ(サイバージャヤ、マレーシア)

世界を股にかけて転職する男(マレーシア<ー>ベトナム)

現在の課金状態

ドットインストール:月1000円

Progate:月980円

AWS:0.53USD/Month

Paiza:月1078円:7月1日までに解約すること!

Amazon Unlimited:解約(月1000円)

ドットインストールで学ぶアロー関数(クリック編)

 

以前やったドットインストールの初めてのJavascriptの復習をした。

いつもただ打ち込んでるだけなので理解を深める上で皆様に紹介したい。

https://dotinstall.com/lessons/basic_javascript_v4/50604

JSコードは以下の通りです。

"use strict";
document.getElementById('target').addEventListener('click',()=>{
document.getElementById('target').style.background = 'pink';
document.getElementById('target').style.backRadius = '50%';
});

 

太字で書かれている部分が要するに('target')と呼ばれるIDにクリック('click',()した場合=>以下のイベントを発生させるよというプログラミングです。

 

では('target')とは何かというと、HTMLでサイトを編集する際、ページをdivタグによってbodyを二つに分け、その二つ目にtargetという名前のidを私がつけてあげました。ぶっちゃけ、('target')じゃなくて(’getterrobo')とかいう名前にしてもきちんと動いてくれます。

<body>
<div class="box" id="target"></div>
</body>

ドットインストールをやってわかったのですが、どうもjsで動かしてやりたい奴にはIDをつけて、それを指定してコーディングしていくようです。

で、=>以下にイベントの内容を置いていくわけですが、 誰をどうするのかというと、document全体にあるId('target')のstlye(background)の色をピンクに変えるという内容です。別にあのpinkはgreenに変えても動きます。きちんと緑になります。

document.getElementById('target').style.background = 'pink'

 

ちなみに=>で、作る関数の事をアロー関数というらしいです。

 

あと、もうひとつの構文で丸に変えるという内容です。

document.getElementById('target').style.backRadius = '50%';

実際以下の■を押してみてください。きっと○に変わるはずです。

 
 
 

読者登録をしていただけると大変助かります。

 
 本サイトが参考になったらクリックをお願いします。

  にほんブログ村 にほんブログ村へ