==============================
はじめに。
==============================

`前回 <http://reiare.net/blog/2011/10/23/javascript-workshop-1/>`_ より少しだけパワーアップして小数にも対応した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 <https://github.com/tactactad/SampleCalc>`_ 上で公開しています。履歴を辿ると迷走ぶりも伺えます……。