sit in a circle and chat happily

JavaScript 3日目

投稿日:2021-12-06
更新日:2022-03-24
js

第4章:オブジェクト

配列=グループや同カテゴリーに関する複数の情報を管理する
オブジェクト=ある「モノ」に関する複数の情報を管理する

オブジェクトの使い方

コンソールの表示結果がおかしい時は

コンソールの出力内容が「Object」と表示されている場合は
コンソールを再読み込みする
ページ読み込み完了後にコンソールを表示すると起きる。(Arrayの時と一緒)

※これはプログラム実行後の最終的なオブジェクト情報。
 コンソール出力時点のオブジェクト情報ではないので注意。

オブジェクトとは

名前をつけた箱(プロパティ)に複数の値を保存してまとめた集合体のこと。
配列は0から始まる連番の部屋に値を入れましたが、オブジェクトは保存する値に関する名前を付けた箱(プロパティ)に値を入れておくことができる。

オブジェクトは主に
ある物事に関する複数のデータをまとめて管理する際に使用される。
なお、オブジェクトは配列で利用できた「length」を利用できない。

オブジェクトを作る:オブジェクトリテラル

var 変数 ={プロパティ名1:値1, プロパティ名2:値2, …}
var player1 = {
  name: "田中",
  job: "勇者",
  maxLife: 1000,
  life: 1000,
};

オブジェクトを作成する場合は上記のように「{}(中カッコ)」の中に「プロパティ名: 値」を記述していく。2つ目以降の阿智は「,(カンマ)」で区切りながら記述する。
今後「プロパティ名:値」が追加されることを見越して、最後の値の後に「,(カンマ)」を入れておくといい。

「{}(中カッコ)」内の記述をインデント(行頭にタブや半角スペースで余白を入れる)して1行1データで記述すると見やすいため、よく上のような書き方をする。

プロパティ名は識別子の命名規則に則っていれば自由(2章:「変数」参照)

作成したオブジェクトは変数に代入して利用する。配列の時と同様に変数内直接値を管理せず、アドレス先にある広い場所(実際はメモリ領域)に値を管理。

オブジェクト内の値を使用(参照)する

変数名.プロパティ名

オブジェクト内の値を変更する:代入

値の入っているオブジェクトのプロパティにさらに値を代入するとプロパティの値を変更することができる。

◆おさらい問題

var enemy = {
  name: 'バラモス',
  life: 3500,
  aliveImg: 'img/e_01.gif'
};
// 敵の名前を表示
document.getElementById('example1').innerHTML = enemy.name;
// 敵のライフを表示
document.getElementById('example2').innerHTML = enemy.life;
// 敵の画像を表示
document.getElementById('example3').src = enemy.aliveImg;
バラモス気持ち悪い…

画像を表示する場合には

<document.getElementById('HTML内のid名').src = enemy.aliveImg;>
var player = {
  name: 'アリーナ',
  job: '姫',
  life: 600,
  aliveImg: 'img/p_03.gif',
};

document.getElementById('answer6').innerHTML
  = player.name + ' (' + player.job + ') HP : ' + player.life;
アリーナちゃんかわいい

カテゴリー