この記事の内容について
フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。
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(置き換える要素);