JavaScript Web Application Development

• Embed your JavaScript code in a web application
• Master the global window object and basic APIs
• Use the document API to manipulate the structure of a web page
• React dynamically to events
• Use forms
• Use the main APIs (ajax, server-sent events, web sockets) for communication with a backend
• Persist data locally in a web browser
• Improve user experience by running code in the background

• Developers, integrators, software architects, technical project managers

• Basic knowledge of HTML
• Have taken the course ‘JavaScript: language fundamentals’ or have equivalent knowledge

1 Introduction to web development with JavaScript

• Where and how to integrate JavaScript code
• Scripts and Modules
• APIs for Web application: programming model, event loop and events.

Workshops:

• Case studies: JavaScript code integration

2 First APIs

• The global window object and its main properties
• Location interface
• History interface
• Navigator interface

Workshops:

• Get information about the current browsing context
• Navigation management

3 Interact document

• The Document interface, the DOM tree and other notable interfaces
• Create, access, modify, delete elements of the DOM tree
• Editing attributes and styles
• Points of attention regarding performance
• Virtual DOMs

Workshops:

• Dynamic manipulation of the DOM

4 Event management

• Principles of event management: EventTarget and Event interfaces
• The phases of the events: capture, bubble,…
• Event management via addEventListener or on-event handlers.
• Managing the object ‘this’
• Main events associated with HTML elements.

Workshops:

• Management of the main web events: mouse, keyboard,…
• Drag and drop implementation

5 Form management

• Access the elements of a form
• Form events
• Validate a form

Workshops:

• Dynamic forms

6 Communicate with a backend

• Comparison of different possible strategies
• JSON format
• RESTFul API: consumption via XMLHttpRequest and Fetch
• Server-sent events: react to push events server
• Web sockets: two-way communication with a backend

Workshops:

• RESTFul API consumption via XMLHttpRequest and Fetch
• Implementation of an SSE client
• Implementation of a web sockets client

7 Persistence and data query

• Overview of data management technologies in a browser
• Cookies: APIs, disk space management, privacy and security
• WebStorage: APIs, disk space management, privacy and security
• IndexedDB: APIs, disk space management, privacy and security

Workshops:

• Cookies management
• Using web storage
• Using IndexedDB

8 Running scripts in the background

• Introduction to web workers
• Infrastructure
• APIs accessible from web workers

Workshops:

• Creation of web workers for calculation tasks and web I/O