ページ遷移とデータ表示を実装する

このレッスンでは、jQuery Mobileを使って、 モバイルウェブアプリケーションのページ遷移と それに伴うデータ表示を実装する方法について学びます。 現在開いているサンプルはIndex.htmlというhtmlです。 ここはメインページで、コースの一覧が表示されています。 各項目をクリックすると、 先ほどとは別のdiv要素を取得し、表示されます。 現在表示されているdivのidは、 index.htmlのハッシュとして表示されています。 このdivはitemPanelと言う名前で、 選択したコースの詳細を示しています。 このページでは「コースid」が「1」であるコースの詳細を示しています。 詳細とは、コース名、id、そしてコースの期間、 認定を受け入れられるかどうかのフラグです。 ここでは、表示しているコースを削除することもできます。 右上の削除ボタンを使います。 メインページに戻り、左上の「新しいコースを作成」ボタンをクリックすることで、 新しいコースを作成できます。 例えば、COBOLのコースを作ってみましょう。 期間は1日で認定は無し。保存します。 一覧にCOBOLのコースが追加されました。 このレッスンでは、 この一連の動きの背後で動いているコードについて解説して行きます。 htmlをエディタで開いてみると、 2つのJavaScriptファイルがリンクされていることが分かります。 1つ目はdata.jsです。 これは、ローカルストレージにデータを読み書きするためのスクリプトです。 このレッスンで解説するのは、2つ目のuibehavior.jsです。 これはすべてのイベント処理、 ユーザーインターフェイス上のイベントを管理するためのものです。 実際のコードを見ていきましょう。 uibehavior.jsを開きます。 まず第一に、 現在表示しているコースのidを格納するためのグローバル変数を作成します。 次に、少し下にスクロールし、 初期化時に実行されるコードを見てみましょう。 $(document).readyで始まるこのコードは、 jQueryにおいて、ウェブページの読み込みが完了した後に この中身にあるコードが実行されるためのイベントです。 ここではloadCourseFromDataという関数を実行しています。…