この記事の内容について

　フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
　私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。

JavaScript 基礎編

JavaScript 応用編

モダンなJavaScriptの機能

ブラウザオブジェクト

アラートを表示する「alert('文字列');」

alert('アラートです');

確認ダイアログを表示する「confirm('文字列');」

ユーザーが「OK」と「キャンセル」のどちらを選択したのか、boolean型のtrueかfalseの戻り値で受け取ることができる。

選択式ダイアログを表示する

const result = confirm('本当に消去してもよいですか？');
if (result) {
    console.log('削除しました');
} else {
    console.log('キャンセルしました');
}

指定した数秒後に実行する「setTimeout(関数, ミリ秒数)」

　指定する秒数の単位はミリ秒なので、1秒後なら(1000)と指定し、5秒後なら(5000)と指定する。setTimeout()に渡す関数は関数の名前でなくてはならない。
例：delayTask → OK!! / delayTask() → ダメ

1秒後に関数を実行する

function delayTask() {
    console.log('1秒後に実行する');
}

setTimeout(delayTask, 1000);

また、無名の関数を直接記述することも可能

無名の関数を直接記述するパターン

setTimeout(function () {
  alert('1秒後に実行する');
}, 1000);

setTimeout(() => {
  alert('5秒後に実行する');
}, 5000);

タイマーをキャンセルする「clearTimeout()」

　setTimeout()を実行すると数値が返ってくる。これはsetTimeout()で作成されたタイマーを識別できるIDであり、このIDを使うことで未来に実行するタイマーをキャンセルできる。

タイマーをキャンセルする

function delayTask() {
    console.log('1秒後に実行する');
}

const timeId = setTimeout(delayTask, 5000);
clearTimeout(timeId);

これで、5秒後にdelayTask関数を実行する予定をキャンセルできる。

指定した秒数ごとに繰り返し実行する「setInterval(関数, ミリ秒数)」

setInterval()を設定すると、基本的にブラウザが閉じるまで処理が続く。

1秒ごとに繰り返し関数を実行する

function delayTask() {
    console.log('1秒ごとに繰り返し実行される');
}

setInterval(delayTask, 1000);

止めたい場合はclearInterval()を使う。使い方はclearTimeout()と同様でタイマーのIDを渡す。

繰り返し処理を停止する

function delayTask() {
    console.log('1秒ごとに繰り返し実行される');
}

const timerId = setInterval(delayTask, 1000);
clearInterval(timerId);

ウインドウを開く「open(URL, ウインドウ名の指定, オプション)」

ウインドウを開く

open('https://example.com', 'window name', 'width=400, height=250');

ウインドウを閉じる「close()」

close()で閉じられるのはopen()で開いたものに限定される。

ウインドウを閉じる

// まず新しいウインドウを開く
const newWindow = open('https://example.com');

// 開いた後、close()を実行すると閉じる
newWindow.close();

ドキュメントオブジェクト(DOM)

特定の要素を探す

引数のCSSセレクタに一致する最初の要素を返す。

document.querySelector(CSSセレクタ);

すべての特定要素を探す

戻り値はNodeListと呼ばれる特殊な配列型式のデータとなる。

document.querySelectorAll(CSSセレクタ);

要素のテキストを変更する

要素.textContent = '変更したいテキスト';

要素の属性を変更する

要素.属性名 = '変更したい値';

CSSスタイルを変更する

要素.style.CSSプロパティ名 = '値';

クラスを削除する

要素.classList.remove('削除するクラス名');

クラスを追加する

要素.classList.add('追加するクラス名');

それ以外のClassListオブジェクトのメソッド

指定クラスがあれば削除し、なければ追加する

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

指定のクラスを置換する

要素.classList.replace('対象クラス名','置換クラス名');

指定のクラスが要素に指定されているか確認する

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

要素を作成する

document.createElement('タグの名前');

要素の追加

要素を先頭に追加する

親要素.prepend(追加する要素);

要素を末尾に追加する

親要素.append(追加する要素);

指定要素の前に要素を追加する

指定要素.before(追加する要素);

指定要素の後ろに要素を追加する

指定要素.after(追加する要素);

要素を削除する

削除したい要素.remove();

要素を置換する

置き換えたい要素.replaceWith(置き換える要素);

JavaScript 基礎編 (ブラウザオブジェクト / DOM)