BOM

Browser Object Model（ブラウザオブジェクトモデル）は、JavaScriptがブラウザと「対話」できるようにする仕組みです。

// ブラウザの内部ウィンドウの高さと幅
window.innerHeight;
window.innerWidth; 

// 新しいウィンドウを開く
window.open(
    'https://www.example.com',
    '',
    'width=400px; height=800px; top=200px; left=500px'
);

// 現在のページを閉じる
window.close();

// ブラウザのユーザーエージェント情報
navigator.userAgent;

// ページの履歴を操作
history.back(); // 戻る
history.forward(); // 進む

// 現在のページのURLを操作
window.location;
location.href; // 現在のURLを取得
location.href = "https://www.example.com"; // 指定したページに移動
location.reload(); // ページを再読み込み

// アラート、確認、プロンプトダイアログ
alert('メッセージ');
confirm('本当に実行しますか？');
prompt('タイトル', '初期値');

// タイマー機能
function showMessage() {
    alert('こんにちは！');
}
setTimeout(showMessage, 3000); // 3秒後に一度だけ実行

function repeatMessage() {
    alert('3秒ごとに表示');
}
function stopTimer() {
    clearInterval(intervalId);
}
var intervalId = setInterval(repeatMessage, 3000); // 3秒ごとに繰り返し実行
setTimeout(stopTimer, 9000); // 9秒後にタイマーを停止

DOM

Document Object Model（ドキュメントオブジェクトモデル）を通じて、HTMLドキュメント内のすべての要素にアクセスできます。JavaScriptはDOMを使用して動的なHTMLを生成できます。タグ、要素、ノードは基本的に同じ意味です。

DOMタグの検索

直接検索

// タグ名で要素を検索
var spanElements = document.getElementsByTagName('span'); 

// クラス名で要素を検索
var classElements = document.getElementsByClassName('c1'); 

// IDで要素を検索
var elementById = document.getElementById('d1'); 

間接検索

var parentParagraph = document.getElementById('p1');
var parentElement = parentParagraph.parentElement; // 親要素を取得

var targetDiv = document.getElementsByClassName('c1')[0];
var childElements = targetDiv.children; // 子要素のリストを取得
var firstChild = targetDiv.firstElementChild; // 最初の子要素を取得
var lastChild = targetDiv.lastElementChild; // 最後の子要素を取得
var nextSibling = targetDiv.nextElementSibling; // 次の兄弟要素を取得
var previousSibling = targetDiv.previousElementSibling; // 前の兄弟要素を取得

DOMノード操作

// 新しい要素を作成
var newImage = document.createElement('img');

// 属性を設定
newImage.src = 'image.jpg'; // 標準属性
newImage.setAttribute('data-user', 'jason'); // カスタム属性

// 要素を追加
var containerDiv = document.getElementsByClassName('c1')[0];
containerDiv.append(newImage); // 最後の子要素として追加

// 要素を挿入
var newLink = document.createElement('a');
newLink.setAttribute('href', 'https://www.example.com');
newLink.innerText = 'クリックしてね！';

var targetParagraph = document.getElementById('p1');
var containerDiv = document.getElementsByClassName('c1')[0];
containerDiv.insertBefore(newLink, targetParagraph); // 特定の要素の前に挿入

// テキストとHTMLの操作
var divContent = document.getElementsByClassName('c1')[0];
console.log(divContent.innerText); // テキストのみ
console.log(divContent.innerHTML); // テキストとHTML

divContent.innerText = '<h1>新しいタイトル</h1>'; // HTMLとして解釈されない
divContent.innerHTML = '<h1>新しいタイトル</h1>'; // HTMLとして解釈される

// ノードの削除、置換、属性の操作
parentElement.removeChild(childElement);
someElement.replaceChild(newElement, oldElement);
var attributeValue = someElement.getAttribute('data-age');
someElement.removeAttribute('data-age');

DOM要素のvalue値の取得

var inputField = document.getElementById('d1');
var inputValue = inputField.value; // 入力された値を取得

// select要素
var selectElement = document.getElementById('d2');
var selectedValue = selectElement.value; // 選択された値を取得

// file入力
var fileInput = document.getElementById('d3');
var fileName = fileInput.value; // ファイル名を取得
var fileObject = fileInput.files[0]; // ファイルオブジェクトを取得

DOMクラス属性の操作

<style>
    .c1 {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
    .c2 {
        background-color: green;
    }
    .c3 {
        background-color: red;
    }
</style>
<div class="c1 c2 c3"></div>

var targetDiv = document.getElementsByTagName('div')[0];
console.log(targetDiv.classList); // 含まれるクラスのリスト

targetDiv.classList.remove('c3'); // クラスを削除
targetDiv.classList.add('c3'); // クラスを追加
console.log(targetDiv.classList.contains('c3')); // クラスの有無を確認
targetDiv.classList.toggle('c3'); // あれば削除し、なければ追加

DOMスタイルの操作

<p>テキストのサンプル</p>

var paragraphElement = document.getElementsByTagName('p')[0];
paragraphElement.style.color = 'red'; // フォントカラーを設定
paragraphElement.style.backgroundColor = 'blue'; // 背景色を設定（キャメルケースを使用）

JavaScriptイベント

イベントとは

特定の条件が満たされたときに自動的に実行される動作や応答のことをイベントと呼びます。

イベントバインディングの2つの方法

方法1: インライン属性（非推奨）

<button onclick="handleClick()">クリック</button>
<script>
    function handleClick() {
        alert('クリックされました！');
    }
</script>

方法2: プロパティ設定（推奨）

window.onload = function() {
    var buttonElement = document.getElementById('d1');
    buttonElement.onclick = function() {
        alert('クリックされました！');
    };
};

イベントの例

スイッチライトの例

<style>
    .light {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: green;
    }
    .dark {
        background-color: red;
    }
</style>
<div class="light"></div>
<button>色を切り替え</button>
<script>
    var buttonElement = document.getElementsByTagName('button')[0];
    var lightElement = document.getElementsByTagName('div')[0];

    buttonElement.onclick = function() {
        lightElement.classList.toggle('dark');
    };
</script>

入力フィールドのフォーカスの例

<input type="text" placeholder="ここをクリック" value="初期値" id="d1">
<script>
    var inputField = document.getElementById('d1');
    inputField.onfocus = function() {
        this.value = ''; // フォーカス時に値をクリア
    };
    inputField.onblur = function() {
        this.value = 'フォーカスが外れました'; // フォーカスが外れた時に値を設定
    };
</script>

現在の時刻の表示

<input type="text" id="timeDisplay">
<button id="startBtn">開始</button>
<button id="stopBtn">停止</button>
<script>
    function displayCurrentTime() {
        var now = new Date();
        var timeString = now.toLocaleString();
        var displayElement = document.getElementById('timeDisplay');
        displayElement.value = timeString;
    }

    var startButton = document.getElementById('startBtn');
    var stopButton = document.getElementById('stopBtn');
    var timerId = null;

    startButton.onclick = function() {
        if (!timerId) {
            timerId = setInterval(displayCurrentTime, 1000);
        }
    };

    stopButton.onclick = function() {
        clearInterval(timerId);
        timerId = null;
    };
</script>

都道府県連動の例

<select id="provinceSelect">
    <option value="">-- 都道府県を選択 --</option>
</select>
<select id="citySelect"></select>
<script>
    var provinceSelect = document.getElementById('provinceSelect');
    var citySelect = document.getElementById('citySelect');

    var locationData = {
        "北海道": ["札幌市", "函館市", "旭川市"],
        "東京都": ["千代田区", "中央区", "港区"],
        "大阪府": ["大阪市", "堺市", "堺区"]
    };

    // 都道府県のオプションを生成
    for (var prefecture in locationData) {
        var option = document.createElement('option');
        option.textContent = prefecture;
        option.value = prefecture;
        provinceSelect.appendChild(option);
    }

    // 都道府県の選択に応じて市を更新
    provinceSelect.onchange = function() {
        var selectedPrefecture = this.value;
        citySelect.innerHTML = ''; // 市のリストをクリア

        if (selectedPrefecture) {
            var cities = locationData[selectedPrefecture];
            for (var i = 0; i < cities.length; i++) {
                var cityOption = document.createElement('option');
                cityOption.textContent = cities[i];
                cityOption.value = cities[i];
                citySelect.appendChild(cityOption);
            }
        }
    };
</script>

jQuery

概要

jQueryは、JavaScriptの操作をカプセル化したライブラリです。データベース操作をカプセル化したORMのようなものです。チェーン操作をサポートしており、コードをより簡潔にします。また、ブラウザの互換性も良好です。

jQueryの構文構造

jQueryの基本的な構文は、セレクタを選択し、アクションを実行する形式です：`$('selector').action()`

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// 原生JavaScriptとjQueryのコード比較
var paragraph = document.getElementsByTagName('p')[0];
paragraph.style.color = 'blue';

$('p').css('color', 'red');

// jQueryオブジェクトとDOMオブジェクト
var jQueryObject = $('#d1'); // jQueryオブジェクト
var domObject = jQueryObject[0]; // DOMオブジェクトに変換

jQueryセレクタ

// 基本セレクタ
$('span'); // 要素セレクタ
$('.c1'); // クラスセレクタ
$('#d1'); // IDセレクタ
$('div.c1'); // 特定のクラスを持つdiv
$('div#d1'); // 特定のIDを持つdiv
$('#d1, span'); // 複数のセレクタを組み合わせ

// 階層セレクタ
$('div span'); // 子孫セレクタ
$('div > span'); // 子セレクタ