【Javascript】 メソッド まとめ 基礎基本コード メモ

##【ゴール】
JSのメソッド、あれこれ

##【メリット】
■　javascript理解度向上

##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【コード】

####console.log
＊括弧内()出力
＊括弧内()には、変数、定数も突っ込める
＊数字は""不要

hoge.js

console.log ("hoge"); //hoge出力

console.log(2); //2出力

####①getElementById
＊idタグの値を取得

####②addEventListner
＊処理を追加

####③classList
＊括弧内()指定したクラスを追加

hoge.html

<style>
  .font-color{
    color: red;
  }
</style>

<div id="target">pppp</div>


<script>
const id = document.getElementById('taregt');　//①

id.addEventListner(click, () =>{   // ②  クリックしたら
  id.classList(font-color);       //  ③ 上述のfont-colorというクラスを追加しますよ-
});
</script>

####toggle
＊クラスがあれば排除、なければ追加

hoge.html

<style>
  .font-color{
    color: red;
  }
</style>

<div id="target">pppp</div>


<script>
const id = document.getElementById('taregt');

id.addEventListner(click, () =>{   //  クリックしたら
  id.toggle(font-color);       // 上述のfont-colorというクラスをつけたり消したり-
});
</script>

##【留意点】
＊末尾の「；」つけ忘れるべからず
＊変数、定数の違いをしっかりと理解する
＊時間かけてでもスペルミス撲滅、記述が他ファイルにまたがる為

##【合わせて読みたい】
■ 【Javascript】JS　変数　定数　違い 　一言でまとめました
https://qiita.com/tanaka-yu3/items/51b8b0630a1e4e2d52c8

■ 【JavaScript】 js　繰り返し文　for / while
https://qiita.com/tanaka-yu3/items/942d9d4838ebe14be1c2

■ 【jQuery】初心者でもよく理解できたやつ
https://qiita.com/tanaka-yu3/items/a03734b248c3f2ee8461