HTML5 API入門

データの追加と削除を実装する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQuery Mobileを使って、モバイルWebアプリケーションにおけるデータの追加と削除を実装する方法について学びます。
講師:
04:31

字幕

このレッスンでは jQuery Mobile を使って モバイルWebアプリケーションにおける このレッスンでは jQuery Mobileを使って モバイル Web アプリケーションにおける データの追加と削除を 実装する方法について学びます 現在開いているサンプルは index.html という html です ここはメインページで コースの一覧が表示されています 各項目をクリックすると 先程とは別の div 要素を取得し表示されます 現在表示されている div の ID は itemPanel として index.html の ハッシュとして表示されています この div は itemPanel という名前で 選択したコースの詳細を表示します このページではコース ID が 1 である コースの詳細を表示しています 詳細とは コース名 ID 期間 そして 認定を受けられるかどうかのフラグです ここでは表示しているコースを 削除する事も出来ます メインページに戻り左上の 「新しいコースを作成」 ボタン をクリックする事で 新しいコースを作成してみましょう ここでは COBOL の コースを作ってみます 期間は1日で 認定は No のまま 保存します 新しく COBOL が追加されました HTML をエディターで開いてみると その中で JavaScript が 二つリンクされています 一つ目は data.js で これはローカルストレージに コースのデータを読み書きする為のものです このレッスンで解説するのは二つ目の uibehavior.js です これは全てのイベント処理 ユーザーインターフェース上の イベントを管理するものです それでは実際のコードを見ていきましょう uibehavior.js を開きます コースを作成したり削除したりする為の 二つの関数を見ていきましょう 「新しいコースを作成」 ボタンを クリックすると 少し下にある createNewCourse 関数 この関数が呼び出されます この関数が呼び出されるイベントは 更にその下 110 行目に定義されています ここでは newCourseForm という フォームが送信されると createNewCourse 関数が 呼び出される という定義になっています この newCourseForm を 先程の HTML で確認すると 88 行目に該当のフォームが ある事が分かります このフォームの下部には submit ボタンがあります つまりこのフォームで入力したコースを 作成する為にこのフォームを送信する という流れになります 送信される内容は コース名 長さ 認定を受けられるかどうかの値です そしてそれを配列内に格納し ローカルストレージに保存する為 JavaScript では createNewCourse 関数の中で data.js に定義されている addCourse 関数に渡しています この関数を実行する事で 渡されたデータを元に ローカルストレージへの保存が行われます そして同様に data.js に定義されている loadCoursesFromData 関数を 呼び出すと コース一覧への表示が行われます ユーザーがコースを削除するボタンを クリックした時に呼び出される removeSelectedCourse 関数については この関数の中で単純に 選択されたコースを削除し 同じ様にコース一覧の再表示を 行っています このレッスンでは jQuery Mobile を使って モバイル Web アプリケーションにおける データの追加と削除を実装する 方法について学びました

HTML5 API入門

HTML5は今やインタラクティブコンテンツを作るうえでかかせないものです。このコースでは膨大なHTML5の仕様の中からWebアプリケーションを作成するうえで便利な機能を紹介していきます。コミュニケーション系APIの使い方のほか、Web WorkersやWebSocket、モバイル用アプリの制作で使うjQuery Mobileなどについても解説します。

3時間19分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年03月03日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。