Code: WEB-007
Duration: 40 hours
Duration: 40 hours
Description
In this training we look at JavaScript (EcmaScript 2015+), using JavaScript for working in browsers (UI events, manipulating HTML with DOM CSS), JavaScript modules (NPM, Webpack), working with the server (HTTP protocol, REST, AJAX, Axios, WebSocket). It is also a first step towards learning Angular and React web frameworks.The training also covers subjects such as using OOP, working with JSON, and functional programming. You’ll learn in detail how to work with classes, objects, arrays, dates, immutability and asynchronicity.
Roadmap
JavaScript Language- JavaScript versions and implementations
- JavaScript application scope (browser, server side, mobile development)
- Data types: String, Number, Boolean (notions of truthy and falsy)
- Operators, operator priorities
- Declaring variables: var, const, let
- Loops: while, for, for … in, for …of
- Working with numbers and strings
- Values null and undefined: differences and use cases
- Working with the console
- Exceptions in JavaScript
JSON, objects and arrays
- JSON format, examples
- JSON.parse and stringify
- Objects, working with Object class
- Creating objects (using the literal {}, operator new, method create)
- Prototype inheritance, __proto__ reference
- Getters and Setters
- Operator in and hasOwnProperty, notion of enumerable properties
- Method toString(), calling and overriding the method
- Method valueOf(),calling and overriding the method
- Creating arrays: literals and new Array()
- Automatically changing of the array size
- Getting and setting the array length, array truncation
- Using methods join() and concat()
- Using method sort, setting the order of array sorting
- Using methods slice and splice
- Using methods push, pop, shift, unshift: creating a stack or queue
Working with date and time
- Using constructor new Date()
- Notion of computer representation of date as time elapsed since Epoch
- Using getTime() and setTime()
- Parsing the date string
- Options for creating strings in JS: using single and double quotes
- String interpolation (string in apostrophes)
- Quoting of special characters in a string
- String concatenation, upper and lower case
- Searching for a substring with indexOf() and lastIndexOf()
- Selecting a substring with substring() and substr()
- Using methods includes, endsWith, startsWith
Using JavaScript in browser: DOM Model
- Managing the browser window, document, events, and layout (CSS)
- Window object and its application
- Connecting JavaScript code to HTML page
- Sequence of scripts execution on the page
- Caching scripts, CDN servers, JavaScript force reloading
- Using references, connecting JavaScript to references
- The onload event and its use
- XSS attacks against web sites
- Working with DOM: using window, document, childNodes
- Manipulating a document using DOM: creating, deleting, moving elements
- Using getElementById(), getElementsByTagName(), getElementsByClassName() for searching elements on a page
- Using methods and properties of HTMLDocument and HTMLElement
Events in Browser
- Notion of event-driven programming
- Event handlers and listeners
- Attaching event handlers with addEventListener()
- Properties and methods of Event class
- Events bubbling and capturing
- Stopping propagation
- Window events
- Mouse and keyboard events, special properties of events
- Form Events
Working with CSS and Managing Styles
- CSS standard, main properties of CSS
- Common styles and styles of separate elements
- Cascading styles
- CSS selectors
- Changing CSS with JavaScript
- CSS box model: margin, padding, border
- Managing element visibility: visibility and display
- Positioning of elements: absolute, fixed, relative, setting top and left
- Units of measurement – px, pt, etc.
- Element overflow and managing through the overflow property
- Managing document layers: zIndex property
- Animation, moving elements
- Working with classes, setting className
- Working with visibility and transitions
- Method querySelectorAll()
Working with Modules in JavaScript, NPM, Webpack
- Reasons for using modules
- Export from module
- Import from module
- Re-export
- Working with NPM, package.json
- The node_modules folder, loading packages with NPM
- Global and local installation of packages
- Using Webpack for package assembly
- CSS and TypeScript loaders
- Configuration of webpack.config.js
- Creating a bundle, compressing
- Webpack plugins
- Using legacy modular systems – CommonJS and AMD
- Using CommonsChunkPlugin, multiple entry points
- Hot module replacement (HMR)
Classes and Inheritance in JavaScript
- Prototype inheritance, reference __proto__
- Object prototype
- Using instanceof
- Keyword class, creating classes
- Keyword super
- Using the method Object.assign()
- Using the method Object.defineProperty()
- Getters and setters
- Spread operator for working with objects and arrays
- Destructuring of array and object
Functional Programming in JavaScript
- Functions as variables
- Array arguments
- Class Function, methods call() and apply()
- Method bind(), installing this and some parameters with bind
- Closures in JavaScript
- Encapsulation of values with closures
- Creating a function through the Function constructor: constructing a string
- Arrow functions, examples of using them
- Functional manipulation with array: find, findIndex, filter
- Examples of using map/filter/reduce for data processing in an array
Immutability, Testing, MVC Pattern
- Notion of immutability, its advantages
- Mutable and immutable methods for changing objects and arrays
- Notion and benefits of Virtual DOM
- Testing immutable functions, using Jest
- Memoization, its advantages
- Common errors and recommendations for using functional programming
- MVC pattern, creating a user interface
- Overview of main libraries for interface development: Angular, React, Vue
Asynchronicity in JavaScript. Promises
- Notion and necessity of asynchronicity
- Working with setTimeout, setInterval, clearTimeout
- Callback functions
- Loss of this in using a callback function. Solutions (using bind, arrow functions, etc.)
- Notion of promises, return of Promise from asynchronous function
- Method Promise.all(), its application
- Async/await syntax, options of using, restrictions
- Handling exceptions: Promise reject, exception handling in case of asynchronous calls
Working with the server. HTTP Protocol. REST Services
- HTTP protocol
- HTTP headers and methods (GET, POST, PUT, DELETE, etc.), data transfer
- HTTP servers (overview)
- HTTP server response codes
- Using forms for data uploading
- Uploading data to server with AJAX
- REST architecture: advantages and peculiarities
- Implementation of CRUD (Create/Read/Update/Delete) with REST
- Using the fetch() function for getting and sending data
- Documenting REST services with Swagger
- Notion of HATEOAS, using it
AXIOS Library. WebSocket Protocol
- Comparison of high-level Axios library and using low-level fetch() method
- GET and POST requests in Axios
- Using async/await with Axios
- Error handling in using Axios
- Cancelling a request with Axios
- WebSocket Protocol
- Examples of using WebSocket, comparison to HTTP
Objectives
- Develop a good understanding of JavaScript capabilities
- Get a solid basis for further usage of web frameworks such as React or Angular
- Learn the language’ structure and syntax, and its object model
- Detailed review of the DOM model for HTML document as well as CSS
- Get to grips with techniques for managing DOM and CSS using JavaScript
- Learn event handling models and form creation, and get an overview of JSON and Ajax technologies, asynchronicity and working with the server
Target Audience
- Web developers
Prerequisites
- Knowledge of HTML and CSS. Experience in development in any C-like language (C, C++, Java, C#) is desirable.
