Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】addEventListener と 連想配列 の使用例

 どうも!LSSです!!

 

 昨日の記事、

「なるほど、こうなるんだ」ってだけの話でしたが、いただいたコメントの中に、

 

 

なる(id:narutabi)

おお!これだと例えばC1を選んだあなたは…とかも出来ちゃうのでしょうか…!
あなたは食いしん坊です!
とか!( ゚Д゚)

 

421miyako(id:m421miyako)

各数字をクリックして別の答えが出るのは難しいんですよね?たぶん。

 

 

と仕掛けに興味を持っていただいたものがありましたので、少し手を加えて「応用しやすい形」のものを作ってみました!

 

  

連想配列で文字列を好き勝手に扱ってみます

 

 

 

コード

<div id="c1">朝</div>
<div id="c2">昼</div>
<div id="c3">夜</div>
<div id="gamen"> </div>
<script>// <![CDATA[
rensou={c1:'おはよう!',c2:'こんにちは!',c3:'こんばんは!'};
c1.addEventListener('click',clk,false);
c2.addEventListener('click',clk,false);
c3.addEventListener('click',clk,false);
function clk(e){
gamen.innerHTML=rensou[e.srcElement.id];
}
// ]]></script>

 

 

改変について

 <div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>

 

この「朝」「昼」「夜」の部分を、「クリックするところに表示する言葉」に書き換える事ができます。

サンプルでは3つですが、同じ要領でc4とかc5とか増やす事もできます^^

 

次に、

rensou={c1:'おはよう!',c2:'こんにちは!',c3:'こんばんは!'};

紫色の文字部分が、「クリックに対応して下に出てくる言葉」になります。

c4とかc5とか増やした場合、ここも同じ要領で増やしておきます。

 

また、増やした場合は

c1.addEventListener('click',clk,false);
c2.addEventListener('click',clk,false);
c3.addEventListener('click',clk,false);

の部分も増やしておく必要があります。

(各行2文字めの数字が違うだけなので、行コピペして数字を4とか5とかにします。)

 

以上、コピペ改変用の解説でした^^

 

 

連想配列について

なにげに初めて、「連想配列」というものを使ってみました。

 

「配列変数」はこれまで数えきれないほど使ってきましたが、配列変数って、

a=['zero','one','two'];
alert(a[1]);

と書くと、oneがダイアログで出る、みたいなもので、
a[1]
1の部分が「配列変数に複数セットしたデータのうちのどれを取り出すか」を示すキー(これを「添え字」といいます)になっていました。

 

これに対し、「連想配列」は「添え字が連番の数値ではなく、文字列をキーにする事ができる」という特徴があります。

 

rensou={c1:'おはよう!',c2:'こんにちは!',c3:'こんばんは!'};

のように、全体を { と } で囲み、

{キー:,キー:,キー:,キー:};

のように並べます。

キーは文字列ですが、'アポストロフィ)で囲んだりはせず、値のところは文字列にする場合は 'アポストロフィ)で囲む、というあたりがちょっとクセモノですねw

 

値を呼び出す時は、例えばサンプルのように

rensou={c1:'おはよう!',c2:'こんにちは!',c3:'こんばんは!'};

とセットしたなら、

rensou['c1']

とする事で、キー「c1」に呼応する「おはよう!」という文字列が取り出される事になります。
(呼び出す時にはアポストロフィで囲む、というのがますますクセモノですが、セットする時だけアポストロフィ不要、というのが特殊なんだと思います。)

 

今回のサンプルで言うと、呼び出す部分は
rensou[e.srcElement.id];
としています。

idが「c1」である要素をクリックした時、e.srcElement.id'c1'という文字列になるので
rensou['c1'];

を呼び出したのと同じ事になるんですね。

 

 

あとがき

さて、これブログで活用できるんでしょうか?w

そこは読んでくださっている皆さんにお任せします^^

 

ところで、元々このaddEventListenerでイベント発生元を調べようとしたのは「パラレル迷路」というJavaScript迷路ゲームを作ろうとしていた時でした。

システムはほぼ完成していて、肝心の「迷路」を作ろうとしている段階です。

「3種類の迷路(パラレルワールドとして存在)があって、一歩歩くごとに別世界の迷路に切り替わる(壁と通過可能部分が変わる)」というものですが…わけわからんものが出来上がるかもですwww

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^