[Javascript] Javascript での連想配列の利用

このページのタグ:[Javascript] [連想配列]
Javascriptで連想配列を利用するコードを紹介します。

概要

Javascriptで連想配列を利用する場合は、Arrayオブジェクトを作成後
配列名[(キー名)] = (値)
で代入することにより、指定したキー名の連想配列を作成できます。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    var data = new Array();

    function init() {
      data["URL"] = "http://www.ipentec.com";
      data["SiteName"] = "iPentec";
      data["Since"] = "2000/01/25"
      data["mail"] = "info@ipentec.com"
    }

    function GetSiteName() {
      document.getElementById("output").innerText = data["SiteName"]
    }
  </script>
	<meta charset="utf-8" />
</head>
<body onload="init();">
  <input type="button" value="Button" onclick="GetSiteName();"/><br/>

  サイト名 : <span id="output"></span>
</body>
</html>

解説


    var data = new Array();
最初に上記コードでdata配列を作成します。
続いて、ページ表示時のinit()で以下のコードを実行します。

    function init() {
      data["URL"] = "http://www.ipentec.com";
      data["SiteName"] = "iPentec";
      data["Since"] = "2000/01/25"
      data["mail"] = "info@ipentec.com"
    }
URL, SiteName, Since, mail のキー名で連想配列を作成しそれぞれに値を代入します。


  function GetSiteName() {
    document.getElementById("output").innerText = data["SiteName"]
  }
Buttonクリック時には上記のコードを実行します。連想配列のdataの"SiteName"キーの値を取得し、画面に表示します。

実行結果

上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。


[Button]をクリックします。data連想配列のキー名"SiteName"の値が画面に表示されます。

参考

GetSiteName()関数で、取得するキー名を"URL"にした場合は、data連想配列のキー名"SiteName"の値が画面に表示されます。

  function GetSiteName() {
    document.getElementById("output").innerText = data["URL"]
  }

登録日 :2015-12-18    最終更新日 :2015-12-19
このページのタグ:[Javascript] [連想配列]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)