JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptオブジェクト


実際のオブジェクト、プロパティ、およびメソッド

実生活では、車はオブジェクトです。

車には、重量や色などのプロパティと、開始や停止などの方法があります。

物体 プロパティ メソッド

car.name =フィアット

car.model = 500

car.weight = 850kg

car.color =白

car.start()

car.drive()

car.brake()

car.stop()

すべての車は同じプロパティを持っていますが、プロパティは車ごとに異なります。

すべての車の方法は同じですが、方法は 異なる時間に実行されます。


JavaScriptオブジェクト

JavaScript変数はデータ値のコンテナーであることはすでに学習しました。

このコードは、 carという名前の変数に単純な値(Fiat)を割り当てます。

let car = "Fiat";

オブジェクトも変数です。ただし、オブジェクトには多くの値を含めることができます。

このコードは、 carという名前の変数に多くの値(フィアット、500、白)を 割り当てます。

const car = {type:"Fiat", model:"500", color:"white"};

値は、name:valueのペア(コロンで区切られた名前と値)として書き込まれます。

constキーワードを使用してオブジェクトを宣言するのが一般的な方法です。

オブジェクトでのconstの使用の詳細については、「 JSConst」の章を参照してください



オブジェクト定義

オブジェクトリテラルを使用してJavaScriptオブジェクトを定義(および作成)します。

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

スペースと改行は重要ではありません。オブジェクト定義は複数行にまたがることができます。

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

オブジェクトのプロパティ

JavaScriptオブジェクトname:valuesペアはプロパティと呼ばれます:

財産 プロパティ値
ファーストネーム ジョン
苗字 Doe
50
目の色 青い

オブジェクトプロパティへのアクセス

オブジェクトのプロパティには、次の2つの方法でアクセスできます。

objectName.propertyName

また

objectName["propertyName"]

例1

person.lastName;

例2

person["lastName"];

JavaScriptオブジェクトは、プロパティと呼ばれる名前付きの値のコンテナです。


オブジェクトメソッド

オブジェクトはメソッドを持つこともできます。

メソッドは、オブジェクトに対して実行できるアクションです。

メソッドは、関数定義としてプロパティに格納されます。

財産 プロパティ値
ファーストネーム ジョン
苗字 Doe
50
目の色 青い
フルネーム function(){return this.firstName + "" + this.lastName;}

メソッドは、プロパティとして保存される関数です。


const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

このキーワード_

関数定義では、関数thisの「所有者」を指します。

上記の例でthisは、は関数を「所有する」 personオブジェクトfullNameです。

つまり、はこのオブジェクトのプロパティをthis.firstName意味しますfirstName

JS thisKeywordthisでキーワードの詳細をお読みください


オブジェクトメソッドへのアクセス

次の構文でオブジェクトメソッドにアクセスします。

objectName.methodName()

name = person.fullName();

()括弧なしでメソッドにアクセスすると、関数定義が返されます。

name = person.fullName;

文字列、数値、ブール値をオブジェクトとして宣言しないでください。

JavaScript変数がキーワード " new"で宣言されると、変数はオブジェクトとして作成されます。

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

String、、NumberおよびBooleanオブジェクトは避けてください。コードが複雑になり、実行速度が低下します。

オブジェクトについては、このチュートリアルの後半で詳しく学習します。


エクササイズで自分をテストする

エクササイズ:

"John"オブジェクトから情報を抽出してアラートを出しpersonます。

const person = {
  firstName: "John",
  lastName: "Doe"
};

alert();