はじめに。

前回より少しだけパワーアップして小数にも対応したWebブラウザ上で実行する電卓アプリを作りましょう。必要なのはブラウザとテキストエディタ、そしてほんの少しのやる気です。あ、やる気はたくさんあってもいいです。

ブラウザはSafariやChromeなどのWebKit系のものか、Firefoxがお勧めです。InternetExpolorでも構いませんが、Consoleオブジェクトに対応していないバージョンだとデバッグがやり辛かったり、またHTMLやCSSでの表示に難があったりします。今回はお勧めするブラウザの中のどれかを使ってください。動作確認すらしていません……。

テキストエディタは本当にお好みのものを使っていただいて構いませんが、JavaScriptに対応しているものを選ぶといいです。予約語をハイライトしてくれたり、自動的にインデントしてくれたりします。今どきはVimを使うとモテるらしいですが、残念ながら私はEmacsを使う事が多いです。

SampleCalcを構成するファイル

SampleCalcを構成するファイルを見てみましょう。配布したファイルには他にも幾つか含まれていますが、基本的に必要なのは以下のファイルです。

• index.html

  SampleCalcの見た目を構成するファイル。HTMLとCSSで記述され、これをブラウザで開く事によって電卓アプリを実行できます。

• js/jquery.js

  JavaScriptライブラリjQueryの本体ファイル。SampleCalcではDOMやイベントの操作をjQueryを用いる事で楽をしています。

• js/sampleCalc.js

  SampleCalcの処理を定義しているファイル。JavaScriptで記述しています。index.htmlより呼び出されて実行されます。何かと便利なので別のファイルにして読み込む形を取っていますが、同じファイル内に記述する事もできます。今回はこのファイルを皆さんに編集していただきます。

• css/design.css

  SampleCalcの見た目を定義しているファイル。ボタンの形や色などのスタイルをCSSを用いて記述しています。こちらも何かと便利なので別のファイルにしてindex.htmlから読み込んで適用しています。

Note

態とらしく含まれている他のファイルは、余裕がある時にでも覗いていただけると何かしら発見があるかもしれません。けど、ないかもしれません。

Note

SampleCalcのソースはGitHub上で公開しています。履歴を辿ると迷走ぶりも伺えます……。