JavaScript入門メモ

以下の入門講座本にて個人的に勉強になったJavaScriptのメソッドや記法を纏めてみました。

https://www.sbcr.jp/product/4815615758/

適宜進行に応じて増やしていきます。

## 1.要素の取得
```js
document.querySelector('セレクター');

// 例
document.querySelector('#test'); // id指定
document.querySelector('.test'); // class指定
document.querySelector('h1'); //タグ指定
```
documentオブジェクト内の特定セレクター(括弧内)を持つ要素を取得する。
複数存在するセレクターの場合、最初の要素を取得する。
指定したセレクターを全て指定する場合は、`querySelectorAll('')`を用いる。

## 2.要素内のテキストの取得・書き換え
```js
document.querySelector('セレクター').textContent;

//例
// h1タグのテキストを'test'というテキストに書き換える場合
document.querySelector('h1').textContent = 'test';
```
特定セレクター内のテキストを取得する。
取得の他にも例題のようにテキストを上書きすることも出来る。

## 3.テンプレート文字列
```js
`　` // バックフォートで囲む
// 例
// コンソールログにh1内のテキストを出力する。
console.log(`h1タグのテキストは、${document.querySelector('h1').textContent}`);
```
テンプレート文字列では、文字列とJavaScriptを同時に使用出来る。
「'文字列' + JavaScript」と書かずに済むため、スムーズに書くことが出来る。
テンプレート文字列内にてJavaScriptを使用する場合は、`${}`で囲むと使用を可能になる。

## 4. 定数と変数
```js
//変数　読み・書き可能な値として保持
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」という定数上書き時に発生するエラーが表示される。
```
定数の場合、途中で値の変わる可能性がない為、教材上では主に`const`をメインとして採用されていた。
コード内で誤って値を代入するミスを未然に防げるため、`const`を積極的に使用していきたい。

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

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

// 例2
// まずは関数を設定する。
const test = () => {
  console.log('クリックしました');
};
// h1タグをクリックするイベントが発動し、先ほどの関数が呼び出される。
document.querySelector('h1').addEventListener('click', test);
```
イベントのきっかけとなるタイプは`click`の他にも`input` `keyup` `mouseup`等複数のが存在する。

## 6.スタイルの変更
```js
要素.style.cssのプロパティ値 = 値;

// 例
// h1タグのテキストカラーを#0bd(青)へ変更する。
document.querySelector('h1').style.color = '#0bd';
// 例2
// divタグの背景色を#0bd(青)へ変更する。
document.querySelector('div').style.backgroundColor = '#0bd'; 
```
CSSのプロパティ値にハイフンがある場合、ハイフンを取り除いたキャメルケースで指定する必要がある。
`background-color → backgroundColor`

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

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

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

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

## 9.クラスの付け外し
```js
要素.classList.toggle('クラス名'); 

// 例
// ボディタグに対してdarkクラスがなければ付与、あれば削除する
body.classList.toggle('dark'); 
```
ボタン等のクリックに合わせて使用しても良いかも。

## 10.文字数を数える
```js
'文字列'.length;

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

console.log('😀'.length); // 顔文字や一部漢字は正しい文字数としてカウントされない
console.log([...'😀'].length); // スプレッド演算子でも正確な文字数がカウントされない時もある

//正確な文字数を知るにはIntl.Segmenter()を用いる。
const spLength = str => [...new Intl.Segmenter('ja').segment(str)].length;
console.log(spLength('葛󠄀')); // 1
```
正確な文字数を検知する為の方法についてコメント欄にて@diywmk9さんに教えていただきました、有難うございました！
https://qiita.com/roy0201/items/47884d3cb4cb8c3c93e0#comment-222635ee303a5ff94169



---

変な所があればコメントいただければと思います。