20200721 授業のメモ 今日はオブジェクト・JSON・演算子
☆オブジェクトについて
配列と違って部屋に名前は付けられるがlengthが使えない。
{}が使われるのが特徴
オブジェクトを作る＝オブジェクトリテラル
var 変数名＝｛プロパティ1：値1、プロパティ2：値2、・・・｝
・配列リテラル：[]
・オブジェクトリテラル：{部屋の名前：値,・・・}
var player1 = {
name: "田中",
job: "勇者",
maxLife: 1000,←プロパティ
life: 1000,
};
オブジェクト内にある箱（変数）をプロパティと呼ぶ
console.log("１回目の出力");
console.log(player1);
console.log(player1.name);
console.log(player1.life);
オブジェクト内のプロパティを参照する場合は「変数名.プロパティ名」
「.」は「の中にある」という扱い。
※ミスしやすい操作
var→ {}の中は,でつなぐ
console→ ();でつなぐ→()の中は.でつなぐ。
☆JSON形式データの作成
配列オブジェクトは組合わせることができる。
配列管理とオブジェクト管理の融合体
下記の場合、
一次元目の人数管理は配列管理、二次元目のキャラクター情報はオブジェクト管理。
※配列管理・・・length使用可
※オブジェクト管理・・・length使用不可
var party = [
{name: '田中', job: '勇者', maxLife: 1000, life: 1000}, //0番地
{name: '佐藤', job: '僧侶', maxLife: 400, life: 200}, //1番地
];
console.log('１回目の出力');
console.log(party);
console.log(party.length);
console.log('２回目の出力');
console.log(party[0]);
console.log(party[0].name);
console.log(party[0].life);
・画像の表示の仕方
JSファイルの設定
var enemy = {
name: 'バラモス',
life: 3500,
aliveImg: 'img/e_01.gif'
};
aliveImgで使用する画像を設定することができる。
document.getElementById('example3').setAttribute('src', enemy.aliveImg);
→.setAttribute('src', ～.aliveImg);でブラウザに画像を表示される
* 問６
* キャラクターのライフを「400」に変更してブラウザに表示すること
*/
player.life = 400;←変更する場合はこの記述だけでよい
document.getElementById('answer6').innerHTML = player.life;
console.log(player.life,);
* 最後のキャラクターのライフをブラウザに表示する
*/
document.getElementById('answer6').innerHTML = playlist[playlist.length - 1].life;
→playlist[playlist.length - 1]という表現の仕方をすること
<!------------------------------------------------------------------------------>
数値を置き換えて表示させる方法
var playlist = [
{ name: "ライアン", job: "戦士", life: 600, aliveImg: 'img/p_01.gif', },
{ name: "クリフト", job: "僧侶", life: 400, aliveImg: 'img/p_02.gif', },
{ name: "アリーナ", job: "格闘家", life: "500", aliveImg: 'img/p_03.gif', },
];
/**
* 問８
* 表示キャラクターを決める変数playerNumを宣言して
* キャラクター情報を表示すること
* 変数playerNumの数値を変更してキャラクター情報が変わることを確認すること
*/
var playerNum = 0;
console.log(playlist[playerNum]);
document.getElementById('answer8-1').innerHTML = playerNum;
document.getElementById('answer8-2').innerHTML = playlist[playerNum].name;
document.getElementById('answer8-3').innerHTML = playlist[playerNum].job;
document.getElementById('answer8-4').innerHTML = playlist[playerNum].life;
document.getElementById('answer8-5').setAttribute('src', playlist[playerNum].aliveImg);
☆演算子
データ型
変数はデータ型の何かに必ず所属している。
データ型の種類
strings '' ""で囲まれた値
boolean trueまたはfalse
null 参照型の値が存在しない
object オブジェクト（配列を含む）
function 関数
typeof 変数名→変数名を調べることができる演算子
使い方
var x;
console.log('１回目の出力');
console.log(x);
console.log(typeof x);
→コンソールではundefinedと表示される。
x = 'メッセージ';
console.log('２回目の出力');
console.log(x);
console.log(typeof x);
→コンソールではStringと表示される
x = [100, 200];
console.log('５回目の出力');
console.log(x);
console.log(typeof x);
→コンソールではobjectと表示される
x = {
name: '田中',
age: 20,
};
console.log('６回目の出力');
console.log(x);
console.log(typeof x);
→コンソールではfunctionと表示される。
※NULLがでるパターン（4パターン）
取得するはずのオブジェクトがなかった
undifined変数宣言後に値を入れていない
エラーメッセージで表示されるundifined
変数が定義されていない。
