クロピグログ

職業訓練で学んだことまとめ

【JavaScript授業三日目】オブジェクト、演算子

オブジェクト

●オブジェクトとは

・配列と一緒で、複数の値を管理する

・配列との違いは、箱に名前を付けることができる

・「length」が存在しない

・配列と使い分けるポイントは「length」を使わず、箱を名前で管理したいとき

 

配列リテラル:[ , ・・・ ]

オブジェクトリテラル:{ 部屋の名前, ・・・ }

 

var player1 = {
  name: "田中", "name": "田中",←これでもOK(どっちも許されてる)
  job: "勇者",
  maxLife: 1000,
  life: 1000,
};

 プレイヤーに関する複数の情報をオブジェクトで管理

f:id:chromiumpig:20200721103214p:plain

・オブジェクト内にある箱(変数)を「プロパティ」と呼ぶ

 

console.log("1回目の出力");
console.log(player1);
console.log(player1.name);
console.log(player1.life);

・オブジェクト内のプロパティを参照する場合は「変数名 .(ドット) プロパティ」

※「.」は「の中にある」という扱い

 

player1.life = player1.life - 200;

・右辺でも左辺関係なく、プロパティ使える

 

player1.job = "賢者";
console.log(player1.job);
//別解(上と同じになる)
console.log(player1.job = "賢者");
 
console.logの()内に処理を書くことができる
ただしコンソール表示は確認の意味合いが強いので
軽い計算などの処理に留めることが多い

 

var party = [
  {name: '田中'job: '勇者'maxLife: 1000life: 1000}, //0番地
  {name: '佐藤'job: '僧侶'maxLife: 400life: 200},   //1番地
];

・配列とオブジェクトは組み合わせ可能

 

f:id:chromiumpig:20200721113952p:plain

1次元目・・・配列:人数管理

2次元目・・・オブジェクト:キャラクター情報管理

 

●あるあるミス↓

var party = {
  {name: '田中'job: '勇者'maxLife: 1000life: 1000},
  {name: '佐藤'job: '僧侶'maxLife: 400life: 200},
};

オブジェクトは、部屋の名前が必要なのでもしこうするなら↓

var party = {
  player1:{name:'田中', job:'勇者', maxLife:1000, life:1000}, 
  player2:{name:'佐藤', job:'僧侶', maxLife:400, life:200}, 
};

 

document.getElementById('imgのID名').setAttribute('src'player.aliveImg);

document.getElementById('imgのID名')

↑ID名でHTML要素を取得:今回はimg要素

setAttribute("変更する属性名", 変更する属性値)

↑対象要素の属性値を変更する処理

setAttribute('src', player.aliveImg);

↑対象要素のsrc属性を対象に変更、オブジェクト内の画像パスに変更

 

●「length」もプロパティ ※配列も特殊なプロパティ

 

 

演算

データ型とは

・基本型:変数を直接入れる値

□文字型、数値型、真偽型、未定義型、Null型

・参照型:アドレス経由の値

□オブジェクト型、関数型

 

「0」と「null」と「undefined」の違い

トイレットペーパーで例えると

「0」:トイレットペーパーの紙がなくなった状態

「null」:トイレットペーパーの芯が設置されていない状態

「undefined」:そもそもトイレットペーパー掛けるところがない状態

※JSの「undefined」エラー時は、芯が設置されていない状態に近い

 

var x;
console.log(x);

・Undefined型

 

x = 'メッセージ';
console.log(x);

・String型

 

x = 20;
console.log(x);

・Number型

 

x = true;
console.log(x);

・Boolean型

 

x = [100200];
console.log(x);

・Object型

 

x = {
  name: '田中',
  age: 20,
};
console.log(x);

・Object型

 

x = document.getElementById('message1'); 
↑HTML側に「message1」のIDない
console.log(x);

・Null型

 

プラウザによって型の表示がかわる!クロムは「Null型」を「Object型」とみる

 

null:取得するはずのオブジェクトがなかった

undefined:変数宣言後値を入れてない

エラーメッセージで表示されるundefined:変数が定義されていない