【初心者向けシリーズ】javascript(DOM)のそもそも論備忘録

どうもこんにちは。
舌の裏に口内炎ができてしまって辛い日々を過ごしている私です。

本日はjavascriptとは何たるやをざっくりまとめてみることにしました。
変わらず身内共有ようなのでごっちゃごちゃな内容かもしれませんがご容赦ください。

また、今回この記事で語るjavascriptとは、フロントの動きを作る"DOM"という小さな小さな視野の話になるので「あ？これjsやないやないか！」とかいうのは一切受け付けませんご容赦ください。

jsは３つのステップで動きを作る

js(javascript)は、フロントエンドで動きを作る際基本的には３ステップを経て動くようになります。
３つとはざっくり『探す・発火・動く』です。
動きの”きっかけになるもの”と、それによって”動くなり煮るなり焼くなりするもの”を探し、きっかけになるものに爆弾を設置し、爆破のタイミングで動かす。。。ざっくりそんな感じです（自分でもわけわかんなくなった）
この３つの感覚をしっかりつかむと、jsと大親友になれると思うので、うざいとは言わずに一旦向き合ってみてください！！！

1.探す

jsで動きを作るときには、まずclassやidの付与されたhtmlタグを探します。
探すタグはこのあと出てくるイベント発火用のものと、イベント発火時に何かをするためのものを探しておきます。

<div id="sample01">こんにちは</div>
<div class="sample02">こんばんは</div>

var sample01 = document.getElementById('sample01');
var sample02 = document.getElementsByClassName('sample02');

console.log(sample01);
==><div id="sample01">こんにちは</div>

console.log(sample02[0]);//classは自動的に配列処理されるので数字ふってあげようね
==><div class="sample02">こんばんは</div>

##2.発火（イベント）
初心者はここで大体「お？イベントとはなんぞ？」となりますね。
イベントっていうのは、jsで何かをしたい時の”きっかけ”のことを指します。
例えば
「何かにクリックした時」
「ページがスクロールした時」
それを起こす記述自体を"イベントハンドラ"と呼びます。

jsのイベントハンドラにはたくさんのものがありますが、今回は”クリック”というイベントを例にしてサンプルコードを書いていきます。
２パターンありますが、どちらもどちらも同じ動きをします。(厳密にはちょっと違うかも？)
また、このイベントが発火することによってsample()という動作が詰まった宝箱がぱっくり開きます。

htmlに書く場合

<div id="btn" onclick="sample()">ぼたん</div>

jsに書く場合

<div id="btn">ぼたん</div>

var btn = document.getElementById('btn');

btn.addEventListener('click',sample,false);

##3.動く
上の記述でイベントは設定できました。
先ほど書いたイベントが発火することにより、今回解説するsample（）という宝箱が発動します。
DOMは主にここの処理が肝になります。
いろんなやりかた種類があって、ここでは紹介しきれないので
(ざっくり知りたい方はこの記事みてね)
javascript備忘録

今回は「イベントが発火したときにsample02のテキストが変わる」
というものをサンプルコードにします。

function sample() {
sample02[0].innerHTML = 'さようなら';
}

console.log('samle02[0]');
==> <div class="sample02">さようなら</div>

#　まとめ
私が食わず嫌いで苦労したjsをできるだけ多くの人に楽しんで使ってもらいたくてまとめました。
理系ではないので計算式の嵐のようなjsの使い方などは全くわからないけど、デザインベースのものやちょっとした条件分岐なら正直誰でもできるようになると思います！一緒にがんばろ〜〜〜〜〜！