アイテムの価格と在庫を表示する

HTMLに出力する

  1. HOME
  2. オブジェクト

在庫表示

商品 値段 在庫数

HTMLソースコード

<td id="title"></td>
<td id="price"></td>
<td id="stock"></td>

JavaScriptのソースコードと概要

var jsbook = { title: "JavaScript学習帳", price: 1700, stock: 8 };
document.getElementById("title").textContent = jsbook.title;
document.getElementById("price").textContent = jsbook.price + "円";
document.getElementById("stock").textContent = jsbook.stock;

オブジェクトの作成"1個以上のプロパティ"

var 変数名 = {プロパティ名:データ,……,……};
データをひとまとめにし、1つの変数として扱えるデータというのは配列と同じです。ただし、オブジェクトにはインデックス番号はありません。

オブジェクトからプロパティデータ読み取り

オブジェクト名.プロパティ名
　　または
オブジェクト名["プロパティ名"]

オブジェクトからプロパティデータ書き換え

オブジェクト名.プロパティ名 = 新しいデータ;
　　または
オブジェクト名["プロパティ名"] = 新しいデータ;

for…in文

今回のソースコードには使用してませんが、オブジェクト専用の繰り返し文です。
for(var プロパティを保存しておく変数 in オブジェクト名) {
処理内容
}
これは、オブジェクトのプロパティを全て読み取ることだけを目的とした、専用の繰り返し文です。
プロパティを保存しておく変数は一般的に『ｐ』にします。
プロパティに保存されているデータを読み取りたいときは
オブジェクト名[p]とします。
※オブジェクト名.ｐは使えない
for…in文の中では[]を使う方法のみです。

配列との違い

for…in文を使うとオブジェクトのプロパティを全て読み取れますが、場合によっては登録した順に出てこない事がある。
配列はインデックス番号がついているので、順序が崩れることはない！