読者です 読者をやめる 読者になる 読者になる

ボクココ

サービス開発を成功させるまでの歩み

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

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


さて今回からはオブジェクト等の話に入ります。そもそもオブジェクトってのは色々な値(プロパティ)と機能(メソッド)が詰まったものってイメージです。そんなことは当たり前ですよねw
ハッシュはキーとそれに対応した値の対が集まったデータ構造のことです。配列の添え字が文字列、シンボルでもOKバージョンみたいなやつです。
最後の連想配列。これには色々種類があるらしいのですが、ほっとんどハッシュしか使われていないそうなので連想配列=ハッシュと考えてよい風潮になっているらしいです。
なんと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メソッドを呼び出してるってことです。
これはつい先日知って、少し感動しましたw


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

document.getElementById('show').style='display:block;';
showのスタイル属性を見えるようにしていますが、これも実際はJavaScriptからスタイルシートをいじってしまっているので、分離ができていないことになります。
今回はどのようにJavaScriptCSSを分離しているのか。そこも注目しながらコードを見てくれるとやった甲斐があります!wそれではまずはソースコード
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

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