JavaScriptのオブジェクトと変数


スポンサーリンク

1.オブジェクトと変数の基礎知識

・オブジェクトとは、データ名と値をセットにして格納するための入れ物
・オブジェクトには関数を格納することも可能。その場合は「メソッド」と呼ばれる。
・関数以外のデータの場合はプロパティと呼ばれる

{
	データ名:値1,
	データ名:値2,
	データ名:値3
}

・変数とは、1つのデータを格納するための入れ物

・変数にはオブジェクトを格納することも可能

・オブジェクト内のデータを取り出す方法は、

var 変数名 = {
	データ名: データ,
	データ名: データ,
}

となっているオブジェクトに対して、

変数名.データ名

でOK。
もう一つは、

変数名['データ名']

でも取得可能。

2.実際使ってみる

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
	$('#change').on('click',function() {
		console.log("changing!");
		$('#target').css({
			'font-size': '50px',
			'background-color': '#ae5e9b',
			'color': '#ebc000'
		})
	})
});

</script>
</head>
<body>
<button id="change">チェーンジ!!</button>
<div id="target">
<p>ここの部分の色や文字の大きさを変えてみましょう。</p>
</div>
</body>
</html>

このコードでは、CSSプロパティの値を、css()メソッドの引数として渡す際にオブジェクトを利用している。
で、これと全く同じ処理が、JavaScriptを以下のように書き換えても実装できる。
このvar cssDataが変数。

$(function() {
	var cssData = {
		'font-size': '50px',
		'background-color': '#ae5e9b',
		'color': '#ebc000'		
	}

	$('#change').on('click',function() {
		console.log("changing!");
		$('#target').css(cssData);
	})
});

3.デモ

最初の画面
f:id:sho322:20140119174356j:plain
ボタンを押すと・・・
f:id:sho322:20140119174404j:plain

4.参考

jQuery最高の教科書

jQuery最高の教科書

jQuery最高の教科書の第3章。
タイトルを「最高」にしただけあって、本当に丁寧に書かれている。
執筆陣の「最高の教科書にしてやろう」という強い情熱を感じる。