JavaScript 基礎 備忘録

const price = 100;

// リテラル
console.log('このリンゴは ' + price + ' 円です。')

// テンプレートリテラル
console.log(`このリンゴは ${price} 円です。`)

const color = prompt('Color');

switch (color) {
  case 'red':
    console.log('Stop');
    break;
  case 'green':
    console.log('Go'); 
    break;
  case 'yellow':
    console.log('Slow Down'); 
    break;
  default:
    console.log('Wrong Answer');
    break;
}

// whileよりも前にdoがまず実行され、doの実行後にwhileの条件を満たさなければ処理が終了する。
do {
  number = prompt('number?');
  console.log(number);
} while (number > 10);

// 関数宣言
function double(num) {
  return num * 2;
}

// 関数式
const double = function (num) {
  return num * 2;
};

// アロー関数式
const double = (num) => {
  return num * 2;
};

// アロー関数式
// 引数が一つのとき
const double = (num) => num * 2;

// エラーにならない
const scores = [30, 20, 10];
scores[0] = 10;
console.log(scores);

// エラーにならない
let scores = [30, 20, 10];
scores[0] = 10;
console.log(scores);

// エラーになる
const scores = [30, 20, 10];
scores = 10;
console.log(scores);

// エラーにならない
let scores = [30, 20, 10];
scores = 10;
console.log(scores);

// 末尾追加
push()

// 末尾削除
pop()

// 先頭追加
unshift()

// 先頭削除
shift()

// 基本の形
scores.forEach()

// ()の中にアロー関数の右辺を入れる
// foreachはforと違って、breakを使った途中で処理を終わらせることはできない
// indexは元の配列に明示されていなくても、仮引数の最後の値として渡すことができる
scores.forEach((score, index) => {
  console.log(index, score);
});

// 基本の形 'キー': 値
const scores = {'math': 80, 'english': 90}

// キーが命名規則に則っていれば、' 'は削除可能
const scores = {math: 80, english: 90}

// 基本の形
scores['math']

// キーが命名規則に則っていれば、このようにも書ける
scores.math

// 追加
scores.['science'] = 92;
scores.science = 92;

// 削除
delete scores['science'];
delete scores.science;

// オブジェクトを配列に変換して、キーと値を取得
// entriesという配列に、別の複数の配列が入っている状態
const entries = Object.entries(scores);

// forEachとアロー関数を使って出力
entries.forEach((prop) => {
  console.log(`${prop[0]} : ${prop[1]}`)
})

// spliceで配列の要素の途中で削除と追加 
// splice(変化が開始するインデックス, 削除する要素の数, 追加する要素)
// 削除
// 代入される値は一つでも配列扱い 
scores.splice(1, 1)

// 追加
scores.splice(1, 0, 72, 75)

// join
// 配列の要素を繋ぐ文字・文字列を指定する
const scores = [80, 90, 40, 20];
console.log(scores.join('|'));

// split
// 文字列から配列を作る
const names = 'taro,jiro,hanako';
console.log(names.split(','));

// foreachとmap
// foreach
const numbers = [3, 4, 5];
const editedNumbers = [];
numbers.forEach((number) => {
  editedNumbers.push(number * 2);
});

// map
const numbers = [3, 4, 5];
const editedNumbers = numbers.map((number) => {
  return number * 2;
});

// filter
const filteredNumbers = numbers.filter((number) => {
  return number > 3;
});

// 分割代入
// numbersを元に新しく配列ができるわけではなく、const一つ一つに値を代入している
const [first, second, third] = numbers;

// 値を入れ替える
[goal, start] = [start, goal];

// レスト構文
// restとなるものは配列の最後でないといけない
const [first, second, ...others] = numbers;

// スプレッド構文
const addNumbers = [6, 7];
const numbers = [3, 4, ...addNumbers];

const scores = {
  taro: 90,
  jiro: 85,
  saburo: 80,
};

// 分割代入
const { taro, jiro, saburo } = scores;

// レスト構文
const { taro, ...others } = scores;

// スプレッド構文
const moreScores = {
  shiro: 75,
};

const scores = {
  taro: 90,
  jiro: 85,
  saburo: 80,
  ...moreScores,
};

// 値を代入した際の挙動
// 数値や文字列と違い、配列やオブジェクトは中身ではなく指す場所のみコピーする
// 中身を丸ごと別の変数に代入すると処理が膨大になるため、中身は同じで指す場所のみコピーする
const nums = [1, 2, 3];
const numsBackup = nums;
nums[0] = 5;
console.log(nums); // 5, 2, 3
console.log(numsBackup); // 5, 2, 3

// 配列やオブジェクトをコピーする際はスプレッド構文を使う
// 元をキーや値を元の変数からコピーして、別の変数に入れるイメージ
const nums = [1, 2, 3];
const numsBackup = [...nums];
nums[0] = 5;
console.log(nums); // 5, 2, 3
console.log(numsBackup); // 1, 2, 3

// 2つはどちらも同じ動き
document.querySelector('button').addEventListener('click', () => {
  if (document.querySelector('p').classList.contains('pink-bg') === false) {
    document.querySelector('p').classList.add('pink-bg');
  } else {
    document.querySelector('p').classList.remove('pink-bg');
  }
});

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('p').classList.toggle('pink-bg');
});

// 複数の要素をまとめて処理
document.querySelectorAll('li').forEach((li) => {
  li.textContent = 'changed';
});

// querySelector()の中にidやclassを指定する以外にも、以下の方法でも要素を取得できる
// ただし、これらはforEach()が使えないので、今ではquerySelectorを使うのが一般的
getElementById();
// tagはdivやpなど<>の中に含まれる要素を選択する。
getElementTagName();
getElementByClassName();

// appendChild(Nodeツリーの最後に追加)とinsertBefore(Nodeツリーの途中に追加)
const listElement = document.createElement('li');
listElement.textContent = 'kim';

// appendChild：親Node.appendChild(追加Node)
document.querySelector('ul').appendChild(listElement);

// insertBefore：親Node.insertBefore(追加Node,参照Node)
document.querySelector('ul').insertBefore(listElement, document.querySelector('#second'));

// 確認のモーダル
if (confirm('sure?')) === true {
  処理
}

// inputやドロップダウンリストの中の値はtextContentではなく、valueで取得する
document.querySelector('input').value = '';

document.querySelector('section').value = '';

// ラジオボタンは複数の要素に共通した属性で複数の値を一度に取得し、forEachで処理する。
// html
<input type="radio" name="color" value="red" /> Red
<input type="radio" name="color" value="blue" /> Blue
<input type="radio" name="color" value="yellow" /> Yellow

document.querySelectorAll('input').forEach((radio) => {
  if (radio.checked === true) {
    alert(radio.value);
  }
});

// チェックボックス
// html
<input type="checkbox" value="red" /> Red
<input type="checkbox" value="blue" /> Blue
<input type="checkbox" value="yellow" /> Yellow

const colors = [];
document.querySelectorAll('input').forEach((checkbox) => {
  if (checkbox.checked === true) {
    colors.push(checkbox.value);
  }
});
alert(colors.join(','));

// inputの要素を取得して表示
document.querySelector('input').addEventListener('input', () => {
  const pElement = document.querySelector('p');
  const inputElement = document.querySelector('input');

  pElement.textContent = inputElement.value.length;
});

// focusとblur
document.querySelector('input').addEventListener('focus', () => {
  document.querySelector('p').textContent = 'English Only';
});

document.querySelector('input').addEventListener('blur', () => {
  document.querySelector('p').textContent = '';
});

// ページを開いた状態でフォーカスが当たっているようにする
document.querySelector('input').focus();

// keydown
// ファイル全体にイベントを設置したい場合はquerySelectorは省略可。
// eはブラウザが返してくれる値でeventの頭文字。別にeでなくてもよい。
document.addEventListener('keydown', (e) => {
  document.querySelector('p').textContent = e.key;
});

// mousemove
document.addEventListener('mousemove', (e) => {
  document.querySelector('p').textContent = `X: ${e.clientX} Y: ${e.clientY}`;
});

// submit
document.querySelector('form').addEventListener('submit', (e) => {
  // submitイベントは本来別ページに飛ぶことを想定しているので、ページが自動でリロードされてしまう。
  // リロードされるとinputの要素が消えてしまう。
  // e.preventDefault()で本来の挙動（リロード）を防ぎ、要素が消えないようにする。
  e.preventDefault();
  document.querySelector('p').textContent = document.querySelector('input').value;
});

// html
<img src='dog.png'>

document.querySelector(img).src = 'cat.png';

//html
<p class='pink-bg'>

// 以下のどちらかでクラスを追加
document.querySelector('p').className('red-border' 'pink-bg')

document.querySelector('p').classList.add('red-border')

document.querySelector('button').addEventListener('click', () => {
  // これだと元のcssを上書きしてしまう
  // document.querySelector('p').style = 'font-size: 40px';

  // javascriptはキャメルケースでfontSizeとする
  document.querySelector('p').style.fontSize = '40px';
});