フォントビューアWebアプリを制作（その７）

では、script.coffeeを作成します。
index.htmlをダウンロード完了直後にグリフ一覧を作成させたいので、
以下のようにします。

$ ->
  displayGlyphs()

displayGlyphs()は、グリフ一覧を表示させるための関数です。
まずは、グリフ一覧の一行目を表示するコードを書いてみます。

displayGlyphs = () ->
  html = "<table>\n<tr>"
  for i in [0..15]
    html += "<th>#{i}</th>"
  html += "</tr>\n</table>"

  $("#glyphs").html(html)

coffee-script.jsを使った場合は、関数は先に定義する必要があるので、
以下のようにします。

displayGlyphs = () ->
  html = "<table>\n<tr>"
  for i in [0..15]
    html += "<th>#{i.toString(16).toUpperCase()}</th>"
  html += "</tr>\n</table>"

  $("#glyphs").html(html)

$ -> 
  displayGlyphs()

この段階でグリフ一覧を見てみます。
その前に、index.htmlの<section id="glyphs">のタグ内のtableタグを取り払っておきます。

ブラウザで見てみると、こんな感じになりました。

（つづく）

タグ：webアプリ JavaScript CoffeeScript jQuery