【jQueryアプリ開発】疑似的なデータベース検索システムを制作してJavaScriptの理解を深める

JavaScript、jQuery、HTML、CSSの基礎の学習を終えた人が設計書を元にwebアプリケーションLittleDBを作成する

Ratings 0.00 / 5.00
【jQueryアプリ開発】疑似的なデータベース検索システムを制作してJavaScriptの理解を深める

What You Will Learn!

  • jQueryアプリ開発を学べる
  • 設計書とアクティビティ図とシーケンス図を読み取りアプリ作成を学べる
  • JavaScript(jQuery)だけでテキストファイルから文字列検索の実装を学べる
  • アルゴリズムを学べる
  • reduceメソッド、forEachメソッド等のES6(ES2015)の実際の使用例が学べる
  • ajax関数を使った非同期通信を学べる

Description

jQueryを使用してJavaScriptだけで、疑似的なデータベース検索システム「LittleDB」を制作する。

※phpもmysql等のDBも使用しない。


★プログラムの規模

LittleDB.jsのステップ数:1287


本講座は設計書を元に、webアプリケーションを作成する。

JavaScriptで複数のテキストファイルに記載されたJSON文字列からsearch文字列と一致する文字列を検索して取得し、Webサイト上にテーブルで表示させる。


システム設計書、アクティビティ図(activity_diagram)、シーケンス図(sequence_diagram)、

状態遷移図(state_diagram)を見ながらコーディングを行っていく。

$.ajaxメソッドで非同期通信を行ってテキストファイルの情報を取得する。

ES6(ES2015)のforEachメソッド、mapメソッド、reduceメソッド、filterメソッド、unshiftメソッドを本講座で作るWebアプリケーションでは使用します。

正規表現による文字列の操作も行う。

ややこしい処理やアルゴリズムは設計書とアクティビティ図(activity diagram)、シーケンス図(sequence diagram)、状態遷移図(state diagram)を見ながら解説を行います。

主にアクティビティ図を見ながら解説を進めます。


※画面デザインはCSSで行います。しかし、本講座ではCSSの解説はしません。


同梱物

プログラム一式

LittleDB システム設計書.pdf

アクティビティ図(activity_diagram)

シーケンス図(sequence_diagram)

状態遷移図(state_diagram)
テキストデータの定義


Who Should Attend!

  • JavaScript、jQuery、HTML、CSSの基礎的な学習を終えて実践的な勉強をしたい人向け
  • システム設計書、アクティビティ図、シーケンス図を読みながらコーディングをしたい人向け
  • PlantUMLでアクティビティ図やシーケンズ図に興味のある方

TAKE THIS COURSE

Tags

  • JavaScript

Subscribers

8

Lectures

24

TAKE THIS COURSE



Related Courses