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.デモ
最初の画面
ボタンを押すと・・・
4.参考
- 作者: 株式会社シフトブレイン
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2013/11/27
- メディア: 大型本
- この商品を含むブログ (2件) を見る
タイトルを「最高」にしただけあって、本当に丁寧に書かれている。
執筆陣の「最高の教科書にしてやろう」という強い情熱を感じる。