JavaScript入門メモ

document.querySelector('セレクター');

// 例
document.querySelector('#test'); // id指定
document.querySelector('.test'); // class指定
document.querySelector('h1'); //タグ指定

document.querySelector('セレクター').textContent;

//例
// h1タグのテキストを'test'というテキストに書き換える場合
document.querySelector('h1').textContent = 'test';

`　` // バックフォートで囲む
// 例
// コンソールログにh1内のテキストを出力する。
console.log(`h1タグのテキストは、${document.querySelector('h1').textContent}`);

//変数　読み・書き可能な値として保持
let 変数名 = 代入したい値;

//定数　読み取り専用(上書き不可)の値として保持
const 定数名 = 代入したい値;

// 例1 変数
let a = 'testA'; // 変数aへ'testA'という文字列を代入する
a = 12345;       // 変数aへ12345という数値を代入する
console.log(b);  // 最後に代入した12345という数値が出力される

// 例2 定数
const b = 'testB'; // 定数bへ'testB'という文字列を代入する
b = 12345;         // 定数bへ12345という数値を代入する
console.log(b);    // 「TypeError: Assignment to constant variable」という定数上書き時に発生するエラーが表示される。

要素.addEventListener('イベントのタイプ', () => {}); // 無記名関数による記法
要素.addEventListener('イベントのタイプ', 関数);     // 関数を用いた記法

// 例1
// h1タグをクリックした際、コンソールへの出力するイベントが発動する
document.querySelector('h1').addEventListener('click', () => {
  console.log('クリックしました');
});

// 例2
// まずは関数を設定する。
const test = () => {
  console.log('クリックしました');
};
// h1タグをクリックした際、先ほどの関数が呼び出されイベントとして発動する
document.querySelector('h1').addEventListener('click', test);

要素.style.cssのプロパティ値 = 値;

// 例
// h1タグのテキストカラーを#0bd(青)へ変更する。
document.querySelector('h1').style.color = '#0bd';
// 例2
// divタグの背景色を#0bd(青)へ変更する。
document.querySelector('div').style.backgroundColor = '#0bd'; 

要素.classList.add('クラス名');
要素.classList.add('クラス名','クラス名'); // 複数のクラスを付与する場合

// 例
// pタグへtestクラスを付与する
p.classList.add('test');

要素.classList.remove('クラス名');
要素.classList.remove('クラス名','クラス名'); // 複数のクラスを削除する場合

// 例
// pタグにあるtestクラスを削除する
p.classList.remove('test');

要素.classList.toggle('クラス名'); 

// 例
// ボディタグに対してdarkクラスがなければ付与、あれば削除する
body.classList.toggle('dark'); 

'文字列'.length;

//例
// h1タグの文字数を出力する。
console.log(document.querySelector('h1').textContent.length);

console.log('😀'.length); // 顔文字や一部漢字は正しい文字数としてカウントされない
console.log([...'😀'].length); // 対応策としてスプレッド演算子で正しい文字数に出来る