JavaScript 〜オブジェクト、ハッシュ、連想配列の基本〜

今回からナント！　実行例もついてきます。　はてなダイアリーだとスクリプトが使えないから外部のリンクを張るって形になります。

さて今回からはオブジェクト等の話に入ります。そもそもオブジェクトってのは色々な値（プロパティ）と機能（メソッド）が詰まったものってイメージです。そんなことは当たり前ですよねｗ
ハッシュはキーとそれに対応した値の対が集まったデータ構造のことです。配列の添え字が文字列、シンボルでもＯＫバージョンみたいなやつです。
最後の連想配列。これには色々種類があるらしいのですが、ほっとんどハッシュしか使われていないそうなので連想配列＝ハッシュと考えてよい風潮になっているらしいです。
なんとJavaScriptではこれらが全く同じ機能になっています。Rubyではオブジェクトの種類の中にハッシュクラスがありましたが、JavaScriptではオブジェクト＝ハッシュ（連想配列）です。

書き方を見ていきましょう。



var obj = {x:100 , y: 'property' , f:myFunc}

obj['x']     //->100　　−①

obj.x        //->100　　−②
obj.y        //->'property'

obj.myFunc() //->定義した関数の実行

オブジェクトの参照には2種類の方法があります。Ruby等のハッシュでは、①の書き方でしたね。これはすぐパッと来ると思います。
ですが！JavaScriptでは大抵は②の書き方をします。今までもこういう書き方はたくさん出てきましたよね。例えばdocument.write()はdocumentオブジェクトの中のwriteメソッドを呼び出してるってことです。
これはつい先日知って、少し感動しましたｗ

今日は基本的にこれを確認するJavaScriptを書きました。ですがあと１つおまけとして追加している部分があります。
それが、前回にも書いたHTMLとJavascript,CSSの分離のお話です。みなさんはこういうコードを書いてしまってはいないでしょうか？



document.getElementById('show').style='display:block;';

showのスタイル属性を見えるようにしていますが、これも実際はJavaScriptからスタイルシートをいじってしまっているので、分離ができていないことになります。
今回はどのようにJavaScriptとCSSを分離しているのか。そこも注目しながらコードを見てくれるとやった甲斐があります！ｗそれではまずはソースコード
HTML



<?xml version="1.0" encoding="windows-31j" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-31j" />

<script type="text/javascript" src="object.js"></script>

<link rel="stylesheet" href="object.css" type="text/css"></link>

<title>JavaScriptオブジェクト基本</title>

</head>

<body>

	<input type="button" id="obj_btn" value="オブジェクトの確認"></input>

	<div id="show"></div>

</body>

</html>

JavaScript



//ロードした瞬間にこの関数を呼び出す

window.onload=function(){

	myObjFunc();

}
function myObjFunc(){

	document.getElementById('obj_btn').onclick=function(){

		var obj = {x:'property',y:8,func:method};

		divTag=document.getElementById('show');

		divTag.innerHTML+="obj['x']="+obj['x']+'<br/>';

		divTag.innerHTML+='obj.x='+obj.x+'<br/>';

		obj.func();

	};

}
var flag=true;

function method(){

	if(flag){

		document.getElementById('show').className='style1';

		flag=false;

	}else{

		document.getElementById('show').className='style2';

		flag=true;

	}

}

css



@CHARSET "windows-31j";
.style1{

	font-size:xx-large;

	font-color:red;

}
.style2{

	font-size:small;

	font-color:blue;

}

そして今回からの特典！　実行結果をアップロードしました。以下参照
http://www.sw.it.aoyama.ac.jp/2009/Mashup/homma/js_study/obj_basic/object.html

以上です。お疲れさまでした！今日は基本的なデータアクセスだけでしたが、次回からはこれをどんどん利用していきますのでしっかり理解しておいてください！

ボクココ

個人開発に関するテックブログ

JavaScript 〜オブジェクト、ハッシュ、連想配列の基本〜