JavaScript 〜🍎dotinstall ①〜

以前、神サイトProgateさまと並行して学習していた、dotinstallさんの力を借りました。（他に、自力で様々なサイトを見ましたが、なにぶん、初心者なのでね、まぁぶっちゃけ、よく分からんかったのでね、顔馴染みの店に戻ってきた感じです(￣▽￣;)）

ドットインストール

今回の基礎コースは全11回。うち、今回の内容。
🍎JavaScriptを使ってみよう
　JavaScriptの概要
　学習の進め方
🍎ひな形となるファイルを作ろう 
　index.htmlの作成
　ブラウザでの表示
🍎クリックイベントを設定しよう 
　use strict
　要素の取得
　clickイベントの設定
🍎コードを詳しく見ていこう 
　getElementById()
　addEventListener()
　アロー関数
🍎エラーメッセージを読み解こう 
　デベロッパーツールの見方
　エラーメッセージの読み方


【🍎ひな形となるファイルを作ろう】
　dotinstall さんはvisual studio code推奨なので、VS（ビダルサスーンみたい…）コードでHTMLファイルを作り、ブラウザで表示してみました。

【🍎クリックイベントを設定しよう】
🌸script
　→htmlの全要素を読み込んでから操作したいため、bodyを閉じる直前に書く。
　→⚠️「 ' use strict '  ; 」
　　　　ブラウザが、厳格に、エラーチェック！！をしてくれる。

🌸要素の取得　id = "target"
　→JavaScriptで要素を指定する際に使用。
　→targetに対する処理
　　⚠️document . getElementById ('target')　←target要素の取得。
　　⚠️addEventListener('click' , () =>{} );　←targetがクリックされたら、次の処理をしてね♪という指令。

🌸clickイベントの設定　target要素の背景色を変える🐸
　→document . getElementById ('target')を再度指定。
　→「.style.background = 'pink';」　←⚠️「 . 」と「 ' ' 」が必要！

【🍎コードを詳しく見ていこう】
🌸getElementById()　
　document ＝　文書全体のこと。
　→documentに . （ドット）でつなげて getElementById(id名) とする。
　→指定した id を持つ要素を文書全体から取得してね😉💕、という意味になる。

🌸addEventListener()　
　→click、dblclick等の「イベント」に対する処理をが書ける。
　→⚠️処理指定の「 ' ' 」、忘れないようにしなきゃ…

🌸アロー関数
　→関数処理の終了＝字下げ。

【🍎エラーメッセージを読み解こう】 
🌸(chrome)デベロッパーツールの見方
　→consoleを確認
　
🌸エラーメッセージの読み方

【まとめ】
Progateで少々基礎をしていたおかげで、ガシガシコーディングしていくdotinstallさんの学習も抵抗は少なく取り組めました。このお2人にはそれぞれに強い強みがあるので、上手くお付き合いできたらと思います❤️（二股⁈）