##【ゴール】
JSのメソッド、あれこれ
##【メリット】
■ javascript理解度向上
##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7
##【コード】
####console.log
*括弧内()出力
*括弧内()には、変数、定数も突っ込める
*数字は""不要
console.log ("hoge"); //hoge出力
console.log(2); //2出力
####①getElementById
*idタグの値を取得
####②addEventListner
*処理を追加
####③classList
*括弧内()指定したクラスを追加
<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
*クラスがあれば排除、なければ追加
<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