できなかったシリーズ始まります。
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で遊んでみようと思っているんだけど、限界あるのかな。
参考
- DOMの基本を学ぼう（7）：JavaScriptでHTMLをダイナミックに書き換える 後編 (1/3) - ＠IT
- CoffeeScript
- CoffeeScriptでjQuery使うときのメモ | webOpixel
- CoffeeScriptのFor文 - Shut the fuck up and write some code
- JavaScript - jQuery で JSON ファイルを読み込む - Qiita
- 新JavaScript例文辞典
web100プロジェクト
簡単なwebサイトを100個作ることで、少しでもweb側の知識を身につけようという個人的なプロジェクトです。