DOMContentLoadedイベントは、HTMLが完全に読み込まれ、解析されたときに発生します。スタイルシートや画像などの外部リソースの読み込みを待つ必要はありません。

document.addEventListener('DOMContentLoaded', function() { // ページ読み込み後に実行したい処理をここに書きます console.log('DOM fully loaded and parsed'); });

loadイベントは、ページ全体（スタイルシートや画像などの外部リソースを含む）が完全に読み込まれたときに発生します。

window.addEventListener('load', function() { // ページ全体が読み込まれた後に実行したい処理をここに書きます console.log('Page fully loaded'); });

名前付き関数を使用する場合

function onDOMContentLoaded() { // ページ読み込み後に実行したい処理をここに書きます console.log('DOM fully loaded and parsed'); } document.addEventListener('DOMContentLoaded', onDOMContentLoaded);

function onPageLoad() { // ページ全体が読み込まれた後に実行したい処理をここに書きます console.log('Page fully loaded'); } window.addEventListener('load', onPageLoad);

setInterval()関数は、指定した間隔（ミリ秒）ごとに特定の関数を実行するタイマーを設定します。この関数は一意のIDを返し、このIDは後でclearInterval()関数に渡してタイマーを停止するために使用します。

// 1秒ごとにメッセージを表示するタイマーを設定
var intervalID = setInterval(function() {
    console.log("1秒経過しました");
}, 1000);

// 5秒後にタイマーを停止
setTimeout(function() {
    clearInterval(intervalID);
    console.log("タイマーを停止しました");
}, 5000);

このコードは、1秒ごとに"1秒経過しました"というメッセージを表示するタイマーを設定します。そして、5秒後にそのタイマーを停止します。その結果、"1秒経過しました"というメッセージは5回表示され、その後"タイマーを停止しました"と表示されます。

setTimeout()関数は、指定した時間（ミリ秒）が経過した後に特定の関数を一度だけ実行するタイマーを設定します。この関数も一意のIDを返し、このIDはclearTimeout()関数に渡してタイマーを停止するために使用します。

// 5秒後にメッセージを表示するタイマーを設定
var timeoutID = setTimeout(function() {
    console.log("5秒経過しました");
}, 5000);

// タイマーをすぐに停止
clearTimeout(timeoutID);

このコードは、5秒後に"5秒経過しました"というメッセージを表示するタイマーを設定します。しかし、その直後にclearTimeout()関数が呼び出されるため、メッセージは表示されません。

setTimeout関数の中で自身を再度呼び出すことで、setInterval関数と同様の動作を実現することができます。

ただし、setTimeoutを再帰的に使用すると、setIntervalとはいくつかの重要な違いがあります：

動的な遅延: setIntervalは一定の間隔で関数を実行しますが、再帰的なsetTimeoutでは各呼び出しで遅延時間を動的に変更することが可能です。
エラーハンドリング: setIntervalはエラーが発生しても次の呼び出しをスケジュールしますが、setTimeoutではエラーが発生すると次の呼び出しがスケジュールされません。
呼び出しのオーバーラップ防止: setIntervalは指定した間隔で関数を呼び出しますが、前の呼び出しが終了する前に次の呼び出しが開始される可能性があります。一方、再帰的なsetTimeoutでは前の呼び出しが終了してから次の呼び出しをスケジュールするため、この問題は発生しません。

以上のような理由から、特定の状況ではsetIntervalの代わりに再帰的なsetTimeoutを使用することが推奨されます。

let interval = 1000;
setTimeout(function main(){
・・・
・・・
・・・
interval = 1000 - Date.now() % 1000;
  setTimeout(main, interval);
}, interval);

このコードは、関数mainをほぼ正確に1秒ごとに実行するように設定されています。

ここでのポイントは、setTimeout(main, interval)が呼び出されるタイミングです。Date.now() % 1000は現在のミリ秒を1000で割った余りを返します。つまり、現在の秒の中で経過したミリ秒数を返します。これを1000から引くと、次の秒（つまり次の1000ミリ秒）までの残り時間が得られます。

したがって、interval = 1000 - Date.now() % 1000;は、次の秒までの残り時間を計算します。そして、その残り時間だけ待ってからmain関数を再度呼び出します。

この結果、main関数はほぼ正確に1秒ごと（つまり、時計の秒針が動くごと）に実行されます。

ただし、JavaScriptのタイマー関数は完全に正確ではないため、実際の間隔は1秒よりわずかに長くなる可能性があります。これは、JavaScriptがシングルスレッドで動作し、他のタスクが実行中の場合にはタイマーのコールバックが遅延するためです。

最初の一回をすぐに実行したい場合は、関数を一度手動で呼び出してからsetIntervalを設定する

function myFunction() {
  // ここに実行したいコードを書く
}

// 最初の一回をすぐに実行
myFunction();

// その後、指定した間隔で実行を続ける
setInterval(myFunction, 1000); // 1000ミリ秒（1秒）ごとにmyFunctionを実行

setIntervalの戻り値を一つ（最後に実行されたもの）しか保持していないため、setIntervalを連続使用すると、clearIntervalが効かなくなる。

setInterval前に必ずclearIntervalをコールし、前回作ったタイマーを止めるようにする。その後setIntervalで新たなタイマーを作る。setTimeoutの場合はその前にclearTimeoutする。

<script>
function secondsToHms(d) {
    d = Number(d);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);

    var hDisplay = h > 0 ? h + "時間" : "";
    var mDisplay = m > 0 ? m + "分" : "";
    var sDisplay = s > 0 ? s + "秒" : "";
    return hDisplay + mDisplay + sDisplay;
}
</script>

<script>
const globalVar = "変数の値が変更されない";
let globalVar = "変数の値が変更される可能性がある";

let globalVar2;

function myFunction() {
    globalVar2 = "関数内で得られた変数をグローバル変数とする";
}
</script>

※ let、const キーワードを使用して宣言されたグローバル変数は、windowオブジェクトのプロパティとはなりません。

直接的にはできないが、オブジェクトのプロパティを使用して同様のことを行うことができる。

let obj = {};
for (let i = 0; i < 10; i++) {
    obj['key' + i] = i;
}

objという名前の空のオブジェクトを作成し、ループ内でkey0からkey9までのプロパティを動的に追加しています。各プロパティの値は、そのキーの末尾の数字と同じです。つまり、key0の値は0、key1の値は1、というようになります。
このオブジェクトのプロパティは、以下のようにアクセスできます：

console.log(obj.key0);  // 0
console.log(obj.key1);  // 1
// ...
console.log(obj.key9);  // 9

または、

console.log(obj['key0']);  // 0
console.log(obj['key1']);  // 1
// ...
console.log(obj['key9']);  // 9

これらの方法を使用すれば、JavaScriptでkey0=0、key1=1、…といった動的な変数を作成することができます。ただし、これらの"変数"は実際にはobjオブジェクトのプロパティであることを覚えておいてください。このため、objオブジェクトを介さないとアクセスできません。

// コンテンツを取得する関数
function fetchContent() {
// ここでサーバーから新たなコンテンツを非同期で取得します。
// この例では、具体的な取得方法は省略しています。
}

// スクロールイベントのリスナーを設定
window.onscroll = function() {
// ユーザーがページの一番下までスクロールしたかどうかをチェック
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// ページの一番下までスクロールしたら、新たなコンテンツを取得
fetchContent();
}
};

JavaScriptのinnerHTMLプロパティは、改行を含む文字列を正しく解釈できません。しかし、代わりにテンプレートリテラルを使用することで、複数行の文字列を作成することができます。テンプレートリテラルはバッククォート（`）で囲まれた文字列で、改行や式の埋め込みが可能です。

target.innerHTML = `
<?php
echo '<select name="cat_select">';
foreach($select_data as $key => $value) {
echo '<option value="'.$key.'">'.$value[0].' ('.$value[1].')</option>';
}
echo '</select>';
?>
`;

var color = "rgb(255, 0, 0)";
var colors = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

colors = ["rgb(255, 0, 0)", "255", "0", "0"]

・\d+：\dは数字を表すメタ文字で、+は直前の文字が1回以上繰り返すことを表します。したがって、\d+は1つ以上の数字（0から9まで）の連続したシーケンスを表します。
・,：カンマを表します。
・\s*：\sは空白文字（スペース、タブ、改行など）を表すメタ文字で、*は直前の文字が0回以上繰り返すことを表します。したがって、\s*は0つ以上の空白文字の連繰り返しを表します。

したがって、全体として、この正規表現は「1つ以上の数字、カンマ、0つ以上の空白文字、1つ以上の数字、カンマ、0つ以上の空白文字、1つ以上の数字」というパターンを表します。

この正規表現は、RGB形式の色値（例：rgb(255, 0, 0)）を解析するのに使用されます。この正規表現を使用すると、RGB値の各成分（赤、緑、青）を個別に抽出することができます。この正規表現は、JavaScriptのmatch関数と一緒に使用され、RGB値の各成分を抽出するための配列を返します。この配列の各要素は、正規表現の各キャプチャグループ（丸括弧で囲まれた部分）に対応します。

除算代入演算子 (/=) は変数を右オペランドの値で除算し、結果をその変数に代入します。

let a = 3;

a /= 2;
console.log(a);
// Expected output: 1.5

a /= 0;
console.log(a);
// Expected output: Infinity

a /= 'hello';
console.log(a);
// Expected output: NaN

代入演算子
+= 左辺の値に右辺の値を加算したものを代入 x = 3; x += 2 ➡︎ 5
-= 左辺の値から右辺の値を減算したものを代入 x = 3; x -= 2 ➡︎ 1
*= 左辺の値に右辺の値を乗算したものを代入 x = 3; x *= 2 ➡︎ 6
/= 左辺の値を右辺の値で除算したものを代入 x = 3; x /= 2 ➡︎ 1.5

配列やオブジェクトを展開するために使用されます。

例えば、rgbが[r, g, b]という配列である場合、...rgbはr, g, bという個々の要素に展開されます。これは関数の引数として配列の要素を個々に渡すために便利です。

以下に具体的な例を示します：

let rgb = [123, 45, 67];

function printColors(r, g, b) {
console.log(`Red: ${r}, Green: ${g}, Blue: ${b}`);
}

// スプレッド構文を使用して配列の要素を関数の引数として渡す
printColors(...rgb); // "Red: 123, Green: 45, Blue: 67"と出力されます

この例では、printColors関数は3つの引数r, g, bを取ります。...rgbを使用することで、rgb配列の各要素がそれぞれの引数に対応するように関数に渡されます。

このように、スプレッド構文は配列やオブジェクトの要素を個々に操作する必要がある場合に非常に便利です。