Course Objectives
- To give a deep knowledge of JavaScript language corresponding to a good intermediate/advanced (middle+) developer position;
- Learn to make browser interfaces;
- Prepare you to learn React, Vue, Angular or other frameworks if your goal is to create complex applications.
Class program
The program can be further adapted to the questions and learning pace of the group.
Meeting
The first meeting is traditionally an assembly. At it we get acquainted, check in, discuss organizational issues, interaction with the instructor, how to learn on the course.
Language basics, development and debugging tools
By the first session, you have watched the introductory video course and already know the basics of JavaScript. Together we walk through the important features of JavaScript, pay attention to the nuances and special features of the language, and make sure we understand them.
We look at functions, closures in JavaScript, and more.
We familiarize ourselves with the JavaScript development and debugging tools we’ll use and explore further.
Objects and Arrays, Testing Basics
You are already familiar with objects and arrays. In this session, we’ll explore their features in JavaScript.
Arrays: an overview of methods, features and nuances of use.
Functions with a variable number of arguments.
Object as a collection: passing by reference, iteration, copying, property flags.
Set/Map: scope of use, differences from Object.
Destructuring objects and arrays.
We are also learning how automated testing is organized with Jest. For now, the basics, so that the tests attached to the homework are understandable. Later we will study testing in more depth.
Object-oriented programming, introduction to DOM.
We assume you already have experience with OOP, so we focus on the features of JavaScript.
Object methods, dynamic context this.
Context loss, passing context to a function and binding it.
Function constructors.
Prototype inheritance, prototype property.
Classes, their internal structure.
Introduction to DOM and component architecture.
DOM – document object model, basic methods.
Introduction to component architecture of a web page.
Example of creating a graphical component “diagram”, code organization.
DOM-model in details.
Deeper study of the DOM-model of the document and methods of working with it. They are needed to display buttons, menus and other components, as well as dynamically change them.
JavaScript modules, their features compared to “ordinary” scripts.
The process of loading the page, the order of execution of modules and scripts.
Events
We study the interaction with the visitor with the help of events:
Setting up event handlers.
Properties of events.
Immersion and surfacing.
Design technique “delegation” to work with a large number of elements, simplify complex interfaces.
Design technique “behavior” for adding functionality using HTML attributes.
Architecture, linking components using their events.
Creating “tooltip” and “calendar with date range selection” components for a project.
Asynchronous code: Promise, async/await, fetch
Learn the necessary language tools for server-side communication and other asynchronous operations.
Event loop: browser internals, setTimeout(…, 0), macro tasks.
Promise, their advantages over colbacks.
Promise chaining.
Promise functions.
Micro-tasks and macro-tasks.
Async/Await
Error handling.
Fetch API, requests to the server (basics).
Interaction with server
Forms, Fetch for POST requests:
Creating and submitting forms, dynamic forms, validation.
DOM properties and methods for forms.
POST requests to the server, encoding, data exchange in JSON format.
Uploading images.
Testing JavaScript applications.
You’ve seen the tests we’ve written many times in previous lessons. Now you have enough knowledge to write them yourself.
TDD/BDD development.
Types of testing: unit testing, integration testing, and E2E testing.
Jasmine/Jest API. “Spy, mock and stub.
E2E testing tools: puppeteer, cypress.
Single page web applications, routing.
Creating SPA applications that work without page reloads.
History API in browser.
Dynamic module loading.
Architecture: router for page navigation.
Building the project with Webpack.
Earlier we made different components for the project. Now let’s put them together and prepare them for publishing on a “live” server.
Webpack configuration, examples of building.
Loaders, connecting and building CSS.
Important plugins: HtmlWebpackPlugin, DefinePlugin, CopyWebpackPlugin and several others.
Polyfills to make the build work in older browsers.
Additional topics, answers to questions.
Questions on topics that were not included in the main course program.
Frameworks: React, Angular, others, where to go next.
Course project