オブジェクトの概要
オブジェクトとは、値や変数、関数をまとめて1つのグループにしたもので、名前（キー）と値（バリュー）が対になったものです。
名前（キー）と値（バリュー）をペアで定義し、このペアをプロパティと呼びます。複数のプロパティをカンマで区切りましょう。
オブジェクトの作成
オブジェクトは、中括弧 {} で囲んで作成し、その中にキーと値のペアを定義します。
プロパティ名と値は : で区切り、各プロパティは , で区切ります。
var オブジェクト名 = {
プロパティ名1: 値1,
プロパティ名2: 値2,
…
}プロパティ
プロパティは、オブジェクトに関連付けられたデータや値を格納するためのものです。
プロパティの値には、文字列、数値、Boolean値(true、false)、配列、オブジェクト、関数など、あらゆるデータ型を格納できます。
var student = {
name : '電ビ太郎', // プロパティ
age : 18, // プロパティ
grade : 1, // プロパティ
class : 'ITビジネス科' // プロパティ
}プロパティのアクセス・呼び出し方
オブジェクトのプロパティにアクセスする方法は、ドット記法 と ブラケット記法 の2つがあります。
オブジェクト名.プロパティ名 // ドット表記
オブジェクト名['プロパティ名'] // ブラケット表記var student = {
name : '電ビ太郎', // プロパティ
age : 18, // プロパティ
grade : 1, // プロパティ
class : 'ITビジネス科' // プロパティ
}
console.log(student.name); // '電ビ太郎' と表示される
console.log(student['name']); // '電ビ太郎' と表示されるプロパティの追加・更新
プロパティを追加したり、既存のプロパティを更新したりするには、ドット記法またはブラケット記法で新しい値を代入します。
オブジェクト名.プロパティ名 = 値;
オブジェクト名['プロパティ名'] = 値;プロパティの削除
オブジェクトのプロパティを削除するには、delete 演算子を使います。
delete オブジェクト名.プロパティ名;
delete オブジェクト名['プロパティ名'];メソッド
オブジェクトに関数が設定されている場合、メソッドと呼びます。
オブジェクトは、データを格納するプロパティと機能を持つメソッド（関数）で構成されます。
var student = {
name : '電ビ太郎', // プロパティ
age : 18, // プロパティ
grade : 1, // プロパティ
class : 'ITビジネス科', // プロパティ
introduce: function(){ // メソッド
console.log('私は' + student.class + student.grade + '年の' + student.name + 'です。');
}
}
student.introduce();メソッドの呼び出し方
メソッドを呼び出す際には、オブジェクト名に続けてドット記法またはブラケット記法を使ってメソッドを呼び出します。
オブジェクト名.メソッド名(引数) // ドット表記
オブジェクト名['メソッド名'](引数) // ブラケット表記組み込みオブジェクト
オブジェクトの中には、JavaScriptが初めから用意しているものがあります。
windowオブジェクト
windowオブジェクトは、ブラウザの画面全体を表す特別なオブジェクトです。
主なプロパティやメソッド
console.log( window.location.href ); // 現在のページのURLを取得する
window.open(’https://rendan.jp’); // 新しいウィンドウでウェブサイトを開く
window.scrollTo(0, document.body.scrollHeight); // ページの一番下までスクロールする
console.log( window.innerWidth ); // ウィンドウの幅を取得する
console.log( window.innerHeight ); // ウィンドウの高さを取得する
console.log( window.navigator.userAgent ); // ユーザーエージェント（ブラウザやOSの情報）を取得するwindowの省略
window オブジェクトは、ブラウザの画面全体を指す特別なオブジェクトです。
実際にJavaScriptを書くとき、この window オブジェクトはほとんどの場合、自動で使われるので、わざわざ書かなくてもいいことが多いです。
window.alert(’Hello!’); // 本来の書き方
alert(’Hello!’); // 省略して書ける
window.console.log(’Hello!’); // 本来の書き方
console.log(’Hello!’); // 省略して書ける
console.log( window.location.href ); // 本来の書き方
console.log( location.href ); // 省略して書けるMathオブジェクト
Mathオブジェクトは、数学的な計算を行うために便利なメソッドや定数を集めたオブジェクトです。
Mathオブジェクトは、windowオブジェクトの一部ですが、window.Mathと書かなくても、Mathだけで直接使うことができます。
主なプロパティやメソッド
console.log( Math.PI ); // 3.141592653589793
console.log( Math.round(4.7) ); // 四捨五入
console.log( Math.round(4.4) ); // 四捨五入
console.log( Math.ceil(9.1) ); // 切り上げ
console.log( Math.floor(9.9) ); // 切り捨て
console.log( Math.random() ); // 0から1未満のランダムな数の生成
console.log( Math.floor(Math.random() * 10) + 1 ); // 1から10までのランダムな整数を生成（上記の応用）
console.log( Math.max(10,20,30) ); // 最大値の取得
console.log( Math.min(10,20,30) ); // 最小値の取得Dateオブジェクト
Date オブジェクトは、日付や時刻を扱うためのオブジェクトです。
現在の日付や時刻を取得したり、特定の日付や時刻を設定したり、日付間の差分を計算したりすることができます。
Dateオブジェクトも、windowオブジェクトの一部ですが、window.Dateと書かなくても、Dateだけで直接使うことができます。
カウントダウンタイマーや特定の曜日にメッセージを表示、リマインダー機能を作る時などに使用します。
主なプロパティやメソッド
var now = new Date();
console.log( now.getFullYear() ); // 年
console.log( now.getMonth() + 1 ); // 月
console.log( now.getDate() ); // 日
console.log( now.getDay() ); // 曜日
console.log( now.getHours() ); // 時間
console.log( now.getMinutes() ); // 分
console.log( now.getSeconds() ); // 秒new
JavaScriptのnewは、新しいオブジェクトを作るための魔法のようなものです。
これを使うと、特定の「テンプレート」から、新しいオブジェクトを簡単に作り出すことができます。
Dateオブジェクトでnewを使う理由は、新しい日時オブジェクトを作成し、その日時に対する操作や計算を行うためです。
もしnewを使わなければ、単にDate関数を呼び出すだけになり、オブジェクトを作成するのではなく、単に文字列として現在の日時が返されるだけになります。
DOM操作
DOMとは
DOM（Document Object Model）とは、ウェブページの構造をプログラムで操作できるようにする仕組みです。
DOMはHTMLを「オブジェクト」として扱い、その内容（テキスト、画像、リンクなど）や構造（要素の入れ子関係など）をJavaScriptで操作できるようにします。たとえば、テキストを変更したり、新しい要素を追加したり、スタイルを変更したりすることができます。
要素へのアクセス（取得）
まずはHTML要素をアクセスして取得します。
その後要素に対して処理を行います。
getElementById メソッド
指定したIDを持つ要素を取得します。
IDはページ内で一意であるため、このメソッドは単一の要素を返します。
var element = document.getElementById('myId');getElementsByClassName メソッド
指定したクラス名を持つすべての要素を取得します。
Classはページ内に複数存在するので、HTMLCollection（特殊な配列）を返します。
var elements = document.getElementsByClassName('myClass');getElementsByTagName メソッド
指定したタグ名を持つすべての要素を取得します。
タグはページ内に複数存在するので、HTMLCollection（特殊な配列）を返します。
var element = document.getElementsByTagName('div');★ querySelector メソッド
指定したCSSセレクタに一致する最初の要素を取得します。
セレクタは、ID、クラス、タグ名、属性、あるいはこれらを組み合わせたものを使用できます。
var element = document.querySelector('.myClass');★ querySelectorAll メソッド
指定したCSSセレクタに一致するすべての要素を取得します。
セレクタは複数存在するので、NodeList（特殊な配列）を返します。
var elements = document.querySelectorAll('.myClass');要素のスタイル変更
JavaScriptでは、HTML要素のスタイルを変更することができます。
これには、要素の style プロパティを使ってCSSプロパティにアクセスします。
CSSでは background-color ですが、JavaScriptでは backgroundColor というキャメルケースで指定します。
var element = document.querySelector('.myClass');
element.style.border = '2px solid red';
element.style.backgroundColor = 'blue';
element.style.color = 'white';
element.style.fontSize = '20px';キャメルケース
キャメルケース（CamelCase）は、単語をスペースやアンダースコアで区切らず、2語目以降の単語の最初の文字を大文字にして単語を区切る命名規則です。
キャメルケースは、特にプログラミングにおいて変数名や関数名、プロパティ名に使用されることが多く、可読性を向上させるために用いられます。
例）getUserName,userAge,totalPrice
テキストの書き換え
HTML要素のテキスト内容を変更するには、innerHTML プロパティを使います。
innerHTMLはHTMLタグを含めたコンテンツの変更が可能です。
var element = document.querySelector('.myClass');
element.innerHTML = '<strong>新しいテキスト</strong>';クラスの制御
要素にクラスを追加したり、削除したり、置き換えたりすることは、CSSスタイルや特定の操作に非常に便利です。
これには、classList プロパティを使用します。
クラスを追加する
classList.add() は、指定したクラスを要素に追加します。
var element = document.querySelector('.myClass');
element.classList.add('active');クラスを削除する
classList.remove() は、指定したクラスを要素から削除します。
var element = document.querySelector('.myClass');
element.classList.remove('active');クラスがなければ追加・あれば削除（トグル）
classList.toggle() は、クラスが存在すれば削除し、存在しなければ追加します。
var element = document.querySelector('.myClass');
element.classList.toggle('active');特定のクラスがあるか確認
classList.contains() は、クラスが存在するかどうかをチェックします。
var element = document.querySelector('.myClass');
if (element.classList.contains('active')) {
console.log('要素に active クラスがあります');
}属性の制御
HTML要素の属性を操作することで、例えば画像のsrc属性を変更したり、リンクのhref属性を動的に設定することができます。
属性を設定する
setAttribute() を使うと、任意の属性を指定した値に設定できます。ここでは src 属性を変更しています。
var image = document.querySelector('.myImage');
image.setAttribute('src', 'new-image.jpg');属性を取得する
getAttribute() を使うと、指定された属性の値を取得できます。
var image = document.querySelector('.myImage');
let src = image.getAttribute('href');属性を削除する
removeAttribute() を使うと、指定された属性を削除します。ここでは、alt 属性が削除されます。
var image = document.querySelector('.myImage');
image.removeAttribute('alt');