JavaScript online course. Professional development of web interfaces - free course from HTML Academy, training 9 weeks, date October 15, 2023.

Section 1 Introduction to JavaScript
Let's look at how the course works, what tools you'll need, and how to set them up. Let's look at what the JavaScript language is, including the ECMAScript specification and the browser.

How does the course work? Organizational matters.

Scheme of work on the course.
Review of projects.
Quality criteria.

JavaScript language

ECMAScript Specification.
What does the browser give JavaScript?

JavaScript Basics.

Basic syntax: parentheses, curly braces, operators, reserved words, comments.
The basic building blocks are variables and functions.
Primitives and complex data types.

Tools.

Code editors.
Linters.
Development server.

Section 2 Basic JavaScript Features
Let's start studying the basic constructs of JavaScript, especially functions. Let's look at the nuances of declaring variables. Let's get acquainted with the developer tools.

Variables.

Visibility areas.

Conditional statements.

Ternary operator.
Multiple choice operator switch.

Cycles.

Cast.

Functions.

Arrow functions.
Default function parameters.

rest-parameters.

Hoisting of variables and functions.

Introduction to DevTools (developer tools).

Section 3 Objects and Arrays
Section without live

You will become familiar with complex data types: arrays and objects. Learn to create and manage them.

Complex data types.

Arrays.

Basic array methods.

Objects.

Callbacks (callback functions).

Section 4 Built-in Objects and Functions
Let's look at the objects and functions that exist in the JavaScript language itself. Let's touch on the execution context of this. Let's run and debug the code in the developer tools console.

Destructuring.

spread syntax.

Built-in objects and their methods.

String.
Number.
Boolean.
Date.
Math.

Operator new.

JavaScript built-in functions.

Function context.

The keyword is this.
Loss of environment.

DevTools. Using the Console.

Section 5 Code Organization
Let's look at the concept of scopes. Let's discuss the DRY principle (don't repeat yourself) and how to use it to write less code and still get more done. Let's learn what modules are and how to “break” code on them; What is an entry point?

Visibility areas.

Global scope of window.
Closures

Modularity.

Code reuse, DRY principle.
The concept of a module.
Point of entry.
ECMAScript modules, import and export syntax.

DevTools: debugging code using Sources.

Section 6 DOM and Events
Section without live

You will become familiar with the Document Object Model. Document Object Model or DOM). Consider how to describe reactions to user actions: text input, clicking on certain elements, scrolling, etc.

DOM tree.

document is the root of everything.
DOM tree structure.
Search for elements on a page.
Managing element attributes.

Templates and data.

Events on the page.

Event handlers.

Section 7 DOM Manipulation
Let's try to create, delete, move and manipulate DOM elements. Using templates, we will draw the data created earlier.

DOM tree management.

Managing DOM element attributes.
Moving elements in the DOM tree.

Approaches to creating DOM elements.

Creating DOM objects.
Markup management: append, prepend, insertAdjacentHTML, innerHTML, textContent.

Templating.

String templating (template strings).
Special tag

Section 8 Working with Events
We will handle user interaction so that the page responds to text input into forms, clicking on certain elements, scrolling, etc. Let's look at how to make this interaction accessible.

Events.

Event object, event management: preventDefault and stopPropagation.
Event phases and delegation.
Keyboard events and accessibility.

Event Loop.

Form validation.

Pristine is a form validation library.

Validation using regular expressions.

DevTools: Elements (inspector) capabilities for working with the DOM and events.

Section 9 External APIs and Third Party Libraries
Let’s look at how not to “write your own bike,” but to reuse someone else’s experience and code. Let's get acquainted with the concept of a software interface. Application Programming Interface or API), consider the API of third-party JavaScript libraries and the JavaScript API of map services. Let's take a quick look at the APIs that the browser provides to developers.

Concept of API.

Map services and their JavaScript API.

OpenStreetMap.
Leaflet.

Third party libraries.

Why are libraries needed?
How to connect to a project.
noUiSlider.

Browser API overview.

Section 10 Network
Section without live

You will look at the HTTP protocol and the JSON data format on your own. Consider how the user's interaction with the site changes when using the network, and what can go wrong.

HTTP protocol and data formats.

JSON.

Exception Handling.

try...catch.

Tools for working with network requests.

Section 11 Asynchrony. Networking
Let's look at the concept of asynchrony and how to achieve it using promises. Promise, promise). Let's get acquainted with technologies that allow you to make requests to the server from a browser. Let's look at how to handle errors in practice when working with the network if something goes wrong.

Asynchrony.

setTimeout and setInterval.
Promise.

Working with the network.

fetch to contact the server.
Handling errors in requests.

DevTools: working with network requests in the Network.

First week of defense
Completion of work on the project and preparation for the final defense.

Section 12 Feedback and Optimization
We optimize work with data and events on our website. We implement clear and user-friendly interface feedback.

Advanced work with arrays.

Sorting.
Filtration.

Performance optimizations.

Dropping frames - throttling.
Elimination of bounce - debounce.

File API.

URL.createObjectURL().
FileReader.

Second week of defense
The first assessment of the project by the reviewing mentor according to quality criteria.

Third week of defense
Improving the project based on the comments of the reviewing mentor and submitting it for a second assessment.

Section 13 Final
Let's summarize the course, and then discuss the features of JavaScript that you may have to encounter at work. The concept of legacy code and what to do with it, with the code. Let's take a quick look at the advanced front-end developer tools so you can understand where to go next.

Special JavaScript.

Strict mode 'use strict'.
Optional semicolons.

Legacy code.

jQuery.
var and functional scope.
XMLHttpRequest.

Constructor functions.

Prototypes.

Advanced tools.

Webpack.

Transpilers and polyfills.

Babel.

Fourth week of defense
Making final edits and receiving a final grade.