DSW-Unit -Front End Design

Summary

JavaScript Syntax and Semantics. JQuery, Bootstrap. UI design principles.

Topics

• JavaScript Syntax and Semantics
• TDD in JavaScript via Mocha/Chai
• JavaScript debugging via console.log, window.alert, and browser console tools
• DOM concepts
• JQuery
• AJAX
• Javascript JSON methods (JSON.parse() and JSON.stringify())
• JavaScript Closures
• Immediately Invoked Function Expressions (IFFEs)
• Bootstrap and alternatives
• UI design principles
• Single Page vs. Multiple Page Apps
• Brief overview of Client vs. Server side JavaScript
• Brief overview of single-page app frameworks (e.g. Angular.js)

Learning Objectives

• Student will be able to write simple functions in JavaScript
• Student will be able to use console.log and window.alert to do simple debugging in JavaScript
• Student will be able to do simple TDD with functions in JavaScript
• Student will be able to identify what the letters DOM stand for (Document Object Model)
• Student will be able to explain the significance of the DOM to client side and server side web development
• Student will be able to explain the relationship between JavaScript and JQuery
• Student will be able to explain what JQuery is used for
• Student will be able to write JavaScript code that uses JQuery to perform simple animations, transitions, and effect on a basic web page
• Student will be able to write JavaScript code that manipulates JSON objects
• Student will be able to write JavaScript code (using JQuery) to peform AJAX requests
• Student will be able to explain the difference between a multi-page web app and a single-page web app design, both from user perspectives, and implementation perspective.
• Student will be able to demonstrate how to turn a simple multiple page app into a single page app using JQuery

UC a-g application information

Summary

In this unit, the student will focus on the design of the user interface and user experience of a web applicatoin. This unit also covers a more in-depth look at the JavaScript programming language, and typical client-side users of JavaScript for implementing user interfaces, including AJAX requests, and client-side JSON processing.

Key Assignment

The culminating assignment for this unit requires the student to reimplement a portion of a previous version of an application that had multiple pages, but with a single-page design using AJAX, with attention to the design and usability aspects of the application. The student will also be asked to explain their user interface choices in both written form and through a demonstration with an oral explanation. Completion of this assignment demonstrates that the student has understood how the same problem can be solved in two different ways, and that the student has understood the basic concepts of the client and server roles in web system development. The student will also be assessed on the basis of their ability to articulate principles of good user interface design, and put those principles into practice.

Activities