読者です 読者をやめる 読者になる 読者になる

NO TITLE

WEBデザインとかブログ運営、社会・経済、音楽などなど

JavaScript でランキングの作成を楽にしてみた

スポンサードリンク

f:id:shiromatakumi:20151109005830j:plain

最近はJavaScriptの勉強してます

WEBデザイナーに転職してから約一ヵ月半。最近はJavaScriptの勉強をしています。

JavaScriptの勉強自体はまだ一ヵ月くらいで、まだまだペーペーです。今回は勉強もかねてJavaScriptについて書いてみようと思います。

ランキングを作るのはめんどくさい

以前このブログでランキングを作ったのですが、途中でランキングの変動があるとわざわざ下位の順位も変更しなくてはいけないのでとても面倒でした。

このようなランキングくらいならJavaScriptで作った方が楽そうだと思い、作成してみました。

今回は下のような世界のGDPランキングを作ってみます。

1位 アメリカ

2位 中国

3位 日本

4位 ドイツ

5位 イギリス

ではではHTML、CSS、JavaScriptのコードを載せます。

HTMLはこんな感じ。

お次はCSS。

ol要素はlist-style: noneにしておかないと勝手に番号ふられるので、idを指定してnoneにしてます。

では本題のJavaScript。JavaScriptを使って順位を入れていきます。

2行目でIDを取得して、3行目でli要素を取得。

5行目はランキングの項目の数だけ繰り返すようにしてます。JavaScriptでは配列は0からスタートなので、6行目はi+1してます。あと、あまりスマートなやり方ではないですが、" "でスペースを空けてます。(未熟者なので許して)

そして、8行目で項目の頭に順位を入れていきます。

 

JavaScriptを使うことによってHTMLがシンプルになるので、後でランキングの変更があっても楽に書き直せます。li要素の中身だけ変えれば、順位は自動で付与されるようになってます。

  1. アメリカ
  2. 中国
  3. 日本
  4. ドイツ
  5. イギリス
  6. フランス
  7. ブラジル

うむ、我ながら便利な物作って大満足じゃ。

 

もっと簡単なやり方ありそう・・・

正直、まだまだ勉強始めたばかりなので、コード載せるのも恥ずかしいくらいです。でも、こうやってコードを公開することで勉強しがいがあるかなと思います。

もし、もっと楽な方法とか、ここはこうやった方が良いとかあったら教えて下さい。

今後もJavaScriptとかHTML・CSSのコードも公開していきたいですね。