【JavaScript】addEventListener と 連想配列 の使用例
どうも！LSSです！！
昨日の記事、
「なるほど、こうなるんだ」ってだけの話でしたが、いただいたコメントの中に、
各数字をクリックして別の答えが出るのは難しいんですよね？たぶん。
と仕掛けに興味を持っていただいたものがありましたので、少し手を加えて「応用しやすい形」のものを作ってみました！
連想配列で文字列を好き勝手に扱ってみます
朝
昼
夜
コード
<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>
この「朝」「昼」「夜」の部分を、「クリックするところに表示する言葉」に書き換える事ができます。
サンプルでは３つですが、同じ要領でc4とかc5とか増やす事もできます^^
次に、
rensou={c1:'おはよう！',c2:'こんにちは！',c3:'こんばんは！'};
の紫色の文字部分が、「クリックに対応して下に出てくる言葉」になります。
c4とかc5とか増やした場合、ここも同じ要領で増やしておきます。
また、増やした場合は
c1.addEventListener('click',clk,false);
c2.addEventListener('click',clk,false);
c3.addEventListener('click',clk,false);
の部分も増やしておく必要があります。
（各行２文字めの数字が違うだけなので、行コピペして数字を4とか5とかにします。）
以上、コピペ改変用の解説でした^^
連想配列について
なにげに初めて、「連想配列」というものを使ってみました。
「配列変数」はこれまで数えきれないほど使ってきましたが、配列変数って、
a=['zero','one','two'];
alert(a[1]);
と書くと、oneがダイアログで出る、みたいなもので、
a[1]
の1の部分が「配列変数に複数セットしたデータのうちのどれを取り出すか」を示すキー（これを「添え字」といいます）になっていました。
これに対し、「連想配列」は「添え字が連番の数値ではなく、文字列をキーにする事ができる」という特徴があります。
rensou={c1:'おはよう！',c2:'こんにちは！',c3:'こんばんは！'};
のように、全体を { と } で囲み、
{キー:値,キー:値,キー:値,キー:値};
のように並べます。
キーは文字列ですが、'（アポストロフィ）で囲んだりはせず、値のところは文字列にする場合は '（アポストロフィ）で囲む、というあたりがちょっとクセモノですねｗ
値を呼び出す時は、例えばサンプルのように
rensou={c1:'おはよう！',c2:'こんにちは！',c3:'こんばんは！'};
とセットしたなら、
rensou['c1']
とする事で、キー「c1」に呼応する「おはよう！」という文字列が取り出される事になります。
（呼び出す時にはアポストロフィで囲む、というのがますますクセモノですが、セットする時だけアポストロフィ不要、というのが特殊なんだと思います。）
今回のサンプルで言うと、呼び出す部分は
rensou[e.srcElement.id];
としています。
idが「c1」である要素をクリックした時、e.srcElement.id は'c1'という文字列になるので
rensou['c1'];
を呼び出したのと同じ事になるんですね。
あとがき
さて、これブログで活用できるんでしょうか？ｗ
そこは読んでくださっている皆さんにお任せします^^
ところで、元々このaddEventListenerでイベント発生元を調べようとしたのは「パラレル迷路」というJavaScript迷路ゲームを作ろうとしていた時でした。
システムはほぼ完成していて、肝心の「迷路」を作ろうとしている段階です。
「３種類の迷路（パラレルワールドとして存在）があって、一歩歩くごとに別世界の迷路に切り替わる（壁と通過可能部分が変わる）」というものですが…わけわからんものが出来上がるかもですｗｗｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
おお！これだと例えばC1を選んだあなたは…とかも出来ちゃうのでしょうか…！
あなたは食いしん坊です！
とか！( ﾟДﾟ)