JavaScript and HTML5 Develop Web Applications

This lesson provides an introduction to the course.

Lessons:

• About this course

• Course Road Map

• Audience

• Lab:

• Prerequisites

• Using NetBeans 8 to create and edit files

• Course Objectives

• Create and modify web applications

• Self-Introduction

• Run your application inside a browser

• Web Applications

• Debug with NetBeans or browser tools

This lesson discusses the basics of creating web applications.

Lessons:

• Create web applications by using NetBeans

• Lab:

• Run HTML pages and analyse them by using the browser’s tools

• Creating HTML5 web Applications with NetBeans 8

• Separate CSS and JavaScript content from HTML pages

• Separating JS and CSS resources

• Run web applications by using NetBeans

• Creating a navigational HTML5 application

This lesson discusses the basics of JavaScript.

Lessons:

• Write JavaScript to:

• Write JavaScript arrays to store data

• Declare variables

• Define JavaScript objects as a key-value store

• Create an object

• Access the properties of an object by using get and set

• Create and call a function

• Lab:

• Create and iterate arrays

• Passing JavaScript tests in JSConsole with Jasmine

This lesson describes the techniques involved in combining HTML5 and JavaScript in web applications.

Lessons:

• Create HTML5 documents

• Manipulate HTML5 elements through DOM

• Create HTML5 forms to request information and process it

• Lab:

• Validate HTML5 form input

• Writing JavaScript code to modify document elements

• Write JavaScript functions for HTML5 events

This lesson describes the use of JavaScript functions and objects.

Lessons:

• Validate user input with JavaScript and regular expressions

• Lab:

• Handle multiple values with JavaScript collections

• Creating a meal-divider application

• Manipulate dates with the JavaScript date API

• Calculating the total based on age

This lesson describes the use of JSON (JavaScript Object Notation) within web application development.

Lessons:

• Convert objects to JSON strings

• Lab:

• Parse JSON strings into JavaScript objects

• Saving user input by using JSON and LocalStorage

• Store objects by using the JSON API, cookies and local storage

• Restoring saved data when a page loads

This lesson describes how to apply styling and formatting to a web application by using CSS.

Lessons:

• Apply CSS styles to HTML documents

• Use JavaScript to add and remove styles from elements

• Use CSS3 features to add dynamic styles to elements with events

• Lab:

• Use media queries and media data to adapt styles to different screens

• Styling elements with CSS3

This lesson covers advanced JavaScript topics and techniques.

Lessons:

• Define functions as value types

• Lab:

• Create closures and explain the variable scope

• Creating a new application with a canvas and painting a circle with a button

• Write JavaScript functions as modules

• Using intervals to paint random circles on the canvas

• Create drag-and-drop interactions with JavaScript

• Implementing drag-and drop to paint stickers on the canvas

• Create JavaScript timers and delays to create animations in HTML

• Implementing mouse gestures to paint on the canvas with the mouse

• Use HTML5 canvas object to draw on pages

This lesson describes how to develop web applications with asynchronous JavaScript and XML. Lessons:

• Use AJAX with JavaScript to request data from an Application Server

• Use WebSocket to create real-time client/server interactions

• Use AJAX to consume restful web services

• Identify the required backend technologies for REST and WebSocket with Java EE7

• Use AJAX calls to create “server push” interactions

• Lab:

• Identify alternatives to AJAX used in legacy code

• Creating a new single page application with navigation by using REST calls to get dynamic data

• Creating a tic-tac-toe game client with WebSocket

This lesson describes how to implement jQuery within your web application.

Lessons:

• Add jQuery and jQuery UI libraries to your projects

• Use selectors and DOM manipulators to handle documents

• Handle events with jQuery

• Animate elements and apply effects in the document

• Handle AJAX server responses