最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptオブジェクト


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

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

車は重量と色のような性質を有する、などの方法が開始と停止します:

オブジェクト プロパティ メソッド

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

すべての車は同じ性質を持っていますが、プロパティ値は、車から車に異なります。

全ての車は、同じメソッドを持っていますが、方法は異なる時間に実行されます。


JavaScriptのオブジェクト

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

このコードは単純な値割り当て(Fiat)車という名前の変数に:

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

このコードは、多くの値が割り当てられます(Fiat, 500, white)車という名前の変数に:

var car = {type:"Fiat", model:"500", color:"white"};
»それを自分で試してみてください

値のペア(名前とコロンで区切られた値):値は、 名前のように書かれています。

JavaScriptオブジェクトは、 名前付きの値のコンテナです。


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

名前:(JavaScriptオブジェクト内)の値のペアは、 プロパティと呼ばれます

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

プロパティ プロパティ値
firstName John
lastName Doe
age 50
eyeColor blue

オブジェクトメソッド

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

方法は、 関数定義などのプロパティに格納されています。

プロパティ プロパティ値
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

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


オブジェクト定義

あなたは、オブジェクトリテラルを持つJavaScriptオブジェクトを定義(および作成します):

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
»それを自分で試してみてください

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

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};
»それを自分で試してみてください

オブジェクトプロパティにアクセスします

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

objectName.propertyName

または

objectName["propertyName"]



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

あなたは、次の構文を持つオブジェクトのメソッドにアクセスします。

objectName.methodName()

name = person.fullName();
»それを自分で試してみてください

あなたがアクセスした場合fullName プロパティを 、なし()それは関数定義を返します。


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

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

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

文字列、数値、およびブールオブジェクトを避けてください。 彼らはあなたのコードを複雑にし、実行速度が遅くなります。

後でこのチュートリアルでオブジェクトの詳細を学びます。


練習で自分自身をテスト!

演習1» 演習2» 演習3»