MAD9014
Cross-Platform Web Development

While developing native applications for mobile devices can hold many advantages, not every application runs only on a phone, and not every application requires direct access to native device features. Students gain a strong grasp of modern JavaScript development techniques through hands-on practice using Core JavaScript for both NodeJS and Browser environments. Students use the HTML5 stack with JavaScript to access modern Web APIs and build practical web applications that can use remote data sources and be instantly updated across multiple mobile and desktop platforms. Design skills and tools are leveraged to enhance these web applications.

This course provides the opportunity for you to achieve the following outcomes:

1515X01FWO - Mobile App. Des. & Dev

This course contributes to your program by helping you achieve the following Essential Employability Skills:

When you have earned credit for this course, you will have demonstrated the ability to:

1. Employ professional web development tools such as Git, Github, and Visual Studio Code, in combination with a variety of SDKs, Toolkits, and Frameworks to create multi-page web apps, Single Page Applications, and JAMStack web apps.

• Use Git from the Command Line Interface to create and manage projects.
• Use Github to host websites and web app projects.
• Create projects and scripts with command line Git and NPM-based modules.
• Use VS Code extensions and features such as linting, code completion, built-in terminal access, and live server previews.
• Use Github to track issues and project development history, plus share work with other developers.

2. Use Core JavaScript features in NodeJS and the browser to create modern web scripts.

• Write functional programming scripts in JavaScript using built-in Array and Object methods.
• Explain the differences between different JavaScript looping statements - for, for...in, for...of, while, and do...while.
• Demonstrate different ways to solve logic problems in JavaScript with if statements, ternary statements, switch case statements, and logical short-circuiting.
• Explain the features and differences between function declarations, function expressions, IIFEs, standard functions, and arrow functions.
• Explain how different scopes are created in JavaScript and how using let, const, and var can impact the ability to access variable values.
• Select and employ appropriate JavaScript data structures for information related to a webpage.
• Demonstrate how to use built-in JavaScript methods such as map, filter, sort, push, pop, slice, and splice to manage Arrays.
• Demonstrate how to create and manage Object literals in JavaScript

3. Utilize remote web servers and APIs with HTTP requests, to provide dynamic content for web sites and web apps.

• Create XML and JSON files to hold data for use in JavaScript.
• Use the XMLHttpRequest and/or Fetch API to retrieve files from a remote API.
• Use Cookies, Headers, and QueryStrings to pass security information to a web server.
• Upload data to a web server or API using the Fetch API.
• Implement Cross-Origin Resource Sharing best practices while fetching data from a remote API.

4. Use event-driven JavaScript to write scripts that allow users to interact with the Document Object Model.

• Write scripts that dynamically add, update, or remove HTML elements based on user interactions.
• Write scripts that move HTML elements to different locations on the page following user interactions.
• Create scripts with JavaScript that run only after the HTML DOM has been parsed by the browser, or as a page is being unloaded.
• Create scripts with JavaScript that are triggered by a user filling out or submitting web forms.
• Create web page transitions and effects with scripts that are driven by events connected to CSS transitions and animations.

5. Employ HTML5 APIs to create interactive web pages that provide mobile device native-like features.

• Build a Single Page Application (SPA) that can simulate the appearance and navigation of multi-page websites.
• Create scripts that determine a user's geolocation with JavaScript from any browser.
• Create a script that uses the WebStorage API to save data locally in the browser.
• Create a script that uses the Cache API to save files in the browser.
• Use the Fetch API to download and upload text and binary files.
• Create a script that uses the History API to handle navigation including the browser back and forward buttons.

6. Use standard web programming techniques to create web sites and web apps that can run across all modern browsers.

• Use JavaScript namespaces, IIFEs, and ES Modules to organize web applications.
• Explain the differences between using the prototype syntax and the class syntax to extend objects in JavaScript.
• Demonstrate scripts in JavaScript with both an Object-Oriented approach and a functional programming approach.
• Explain the differences in JavaScript between iteration and enumeration of Object properties.

The following list provides evidence of this course's learning achievements and the outcomes they validate:

Quiz(zes)/Test(s) (10%)

Validates Outcomes:  CLO 2, CLO 6, EES 5, EES 10

Hybrid Assignment(s) (20%)

Validates Outcomes:  CLO 1, CLO 2, EES 5, EES 10

Assignment(s) (40%)

Validates Outcomes:  CLO 3, CLO 4, CLO 5, CLO 6, EES 5, EES 10

Final Project (30%)

Validates Outcomes:  CLO 1, CLO 2, CLO 3, CLO 4, CLO 5, CLO 6, EES 5, EES 10

Students who wish to apply for Prior Learning Assessment and Recognition (PLAR) need to demonstrate competency at a post-secondary level in all outlined course learning outcomes. Evidence of learning achievement for PLAR candidates includes:

• Portfolio
• Performance Test
• Project/Assignment

Grade Scheme

1515X01FWO - Mobile App. Des. & Dev