【ゴール】

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