JavaScriptでJSONを読み込んでさらりと情報量あるサイトつくろうと思ったけどできなかった

JavaScriptでJSONを読み込んでさらりと情報量あるサイトつくろうと思ったけどできなかったできなかったシリーズ始まります。

rubyなどのスクリプト言語を使わず、htmlとcssとjavascriptだけである程度情報量のあるサイトができたら、さらりとサイトが作れそうでいいなぁ、github pagesだけで表示できるしいいなぁと思ったんですが、できませんでした。

というか、ちょっとややこしすぎて制限時間オーバーで諦めました。JavaScriptとか知識なさすぎます。。

代わりに、JSONを直に作成して読み込ませました。

出来上がった練習サイト

ださいコード

countries = [
  {
    "name": "Albania",
    "alternative": "Republic of Albania (official, English), Shqipëria (common, Albanian) Republika e Shqipërisë (official, Albanian)"
  },
  {
    "name": "Algeria",
    "alternative": "People's Democratic Republic of Algeria (official, English), al-Jazā’ir (common, Arabic), al Jumhuriyya al Jazaa'iriyya ad-Dīmuqrāţiyya ash Sha'biyya (official, Arabic)"
  },
  {
    "name": "Argentina",
    "alternative": "Argentine Republic (official, English), la Argentina (colloquial, Spanish), the Argentine (archaic, English), Argentine Nation (official and legally preferred, English), United Provinces of the Río de la Plata (official, English), Argentine Confederation (official, English)"
  },
  {
    "name": "Armenia",
    "alternative": "Hayastan (transliterated Armenian, original: Հայաստան)"
  },
  {
    "name": "Australia",
    "alternative": "Commonwealth of Australia (official, English), New Holland (former name, English)"
  },
  {
    "name": "Austria",
    "alternative": "Republic of Austria (official, English), Republik Österreich (official, German), Österreich (common, German)"
  }
]

element = document.getElementById("value")

dlNode = document.createElement("dl")
dlNode.className = "list-unstyled"

for country in countries
    dtNode = document.createElement("dt")
    ddNode = document.createElement("dd")
    nameNode = document.createTextNode(country["name"])
    altNode = document.createTextNode(country["alternative"])
    dlNode.appendChild(dtNode).appendChild(nameNode)
    dlNode.appendChild(ddNode).appendChild(altNode)
element.parentNode.replaceChild(dlNode,element)
}).call(this);

うーん、ださい。もっとかっこよく書けるようになりたい。それにしても、CoffeeScript便利だ。コードがシンプル。CoffeeScriptでjQueryも書けるようにしておきたい。あと、Compassも今回は殆ど使ってないけど、便利。

Github Pages使ってJavaScriptで遊んでみようと思っているんだけど、限界あるのかな。

参考

web100プロジェクト

簡単なwebサイトを100個作ることで、少しでもweb側の知識を身につけようという個人的なプロジェクトです。

Pocket
LINEで送る

You may also like...