damonholden/javascript-info-progress-tracker

JavaScript.info Progress Tracker

The JavaScript language

An introduction

• An Introduction to JavaScript

• Manuals and specifications

• Code editors

• Developer console

JavaScript Fundamentals

• Hello, world!

  • tasks:
  • Show an alert
  • Show an alert with an external script

• Code structure

• The modern mode, "use strict"

• Variables

  • tasks:
  • Working with variables
  • Giving the right name
  • Uppercase const?

• Data types

  • tasks:
  • String quotes

• Interaction: alert, prompt, confirm

  • tasks:
  • A simple page

• Type Conversions

• Basic operators, maths

  • tasks:
  • The postfix and prefix forms
  • Assignment result
  • Type conversions
  • Fix the addition

• Comparisons

  • tasks:
  • Comparisons

• Conditional branching: if, '?'

  • tasks:
  • if (a string with zero)
  • The name of JavaScript
  • Show the sign
  • Rewrite 'if' into '?'
  • Rewrite 'if..else' into '?'

• Logical operators

  • tasks:
  • What's the result of OR?
  • What's the result of OR'ed alerts?
  • What is the result of AND?
  • What is the result of AND'ed alerts?
  • The result of OR AND OR
  • Check the range between
  • Check the range outside
  • A question about "if"
  • Check the login

• Nullish coalescing operator '??'

• Loops: while and for

  • tasks:
  • Last loop value
  • Which values does the while loop show?
  • Which values get shown by the "for" loop?
  • Output even numbers in the loop
  • Replace "for" with "while"
  • Repeat until the input is correct
  • Output prime numbers

• The "switch" statement

  • tasks:
  • Rewrite the "switch" into an "if"
  • Rewrite "if" into "switch"

• Functions

  • tasks:
  • Is "else" required?
  • Rewrite the function using '?' or '||'
  • Function min(a, b)
  • Function pow(x,n)

• Function expressions

• Arrow functions, the basics

  • tasks:
  • Rewrite with arrow functions

• JavaScript specials

Code quality

• Debugging in the browser

• Coding Style

  • tasks:
  • Bad style

• Comments

• Ninja code

• Automated testing with Mocha

  • tasks:
  • What's wrong in the test?

• Polyfills and transpilers

Objects: the basics

• Objects

  • tasks:
  • Hello, object
  • Check for emptiness
  • Sum object properties
  • Multiply numeric property values by 2

• Object references and copying

• Garbage collection

• Object methods, "this"

  • tasks:
  • Using "this" in object literal
  • Create a calculator
  • Chaining

• Constructor, operator "new"

  • tasks:
  • Two functions - one object
  • Create new Calculator
  • Create new Accumulator

• Optional chaining '?.'

• Symbol type

• Object to primitive conversion

Data types

• Methods of primitives

  • tasks:
  • Can I add a string property?

• Numbers

  • tasks:
  • Sum numbers from the visitor
  • Why 6.35.toFixed(1) == 6.3?
  • Repeat until the input is a number
  • An occasional infinite loop
  • A random number from min to max
  • A random integer from min to max

• Strings

  • tasks:
  • Uppercase the first character
  • Check for spam
  • Truncate the text
  • Extract the money

• Arrays

  • tasks:
  • Is array copied?
  • Array operations.
  • Calling in an array context
  • Sum input numbers
  • A maximal subarray

• Array methods

  • tasks:
  • Translate border-left-width to borderLeftWidth
  • Filter range
  • Filter range "in place"
  • Sort in decreasing order
  • Copy and sort array
  • Create an extendable calculator
  • Map to names
  • Map to objects
  • Sort users by age
  • Shuffle an array
  • Get average age
  • Filter unique array members
  • Create keyed object from array

• Iterables

• Map and Set

  • tasks:
  • Filter unique array members
  • Filter anagrams
  • Iterable keys

• WeakMap and WeakSet

  • tasks:
  • Store "unread" flags
  • Store read dates

• Object.keys, values, entries

  • tasks:
  • Sum the properties
  • Count properties

• Destructuring assignment

  • tasks:
  • Destructuring assignment
  • The maximal salary

• Date and time

  • tasks:
  • Create a date
  • Show a weekday
  • European weekday
  • Which day of month was many days ago?
  • Last day of month?
  • How many seconds have passed today?
  • How many seconds till tomorrow?
  • Format the relative date

• JSON methods, toJSON

  • tasks:
  • Turn the object into JSON and back
  • Exclude backreferences

Advanced working with functions

• Recursion and stack

  • tasks:
  • Sum all numbers till the given one
  • Calculate factorial
  • Fibonacci numbers
  • Output a single-linked list
  • Output a single-linked list in the reverse order

• Rest parameters and spread syntax

• Variable scope, closure

  • tasks:
  • Does a function pickup latest changes?
  • Which variables are available?
  • Are counters independent?
  • Counter object
  • Function in if
  • Sum with closures
  • Is variable visible?
  • Filter through function
  • Sort by field
  • Army of functions

• The old "var"

• Global object

• Function object, NFE

  • tasks:
  • Set and decrease for counter
  • Sum with an arbitrary amount of brackets

• The "new Function" syntax

• Scheduling: setTimeout and setInterval

  • tasks:
  • Output every second
  • What will setTimeout show?

• Decorators and forwarding, call/apply

  • tasks:
  • Spy decorator
  • Delaying decorator
  • Debounce decorator
  • Throttle decorator

• Function binding

  • tasks:
  • Bound function as a method
  • Second bind
  • Function property after bind
  • Fix a function that loses "this"
  • Partial application for login

• Arrow functions revisited

Object properties configuration

• Property flags and descriptors

• Property getters and setters

Prototypes, inheritance

• Prototypal inheritance

  • tasks:
  • Working with prototype
  • Searching algorithm
  • Where does it write?
  • Why are both hamsters full?

• F.prototype

  • tasks:
  • Changing "prototype"
  • Create an object with the same constructor

• Native prototypes

  • tasks:
  • Add method "f.defer(ms)" to functions
  • Add the decorating "defer()" to functions

• Prototype methods, objects without proto

  • tasks:
  • Add toString to the dictionary
  • The difference between calls

Classes

• Class basic syntax

  • tasks:
  • Rewrite to class

• Class inheritance

  • tasks:
  • Error creating an instance
  • Extended clock

• Static properties and methods

  • tasks:
  • Class extends Object?

• Private and protected properties and methods

• Extending built-in classes

• Class checking: "instanceof"

  • tasks:
  • Strange instanceof

• Mixins

Error handling

• Error handling, "try...catch"

  • tasks:
  • Finally or just the code?

• Custom errors, extending Error

  • tasks:
  • Inherit from SyntaxError

Promises, async/await

• Introduction: callbacks

• Promise

  • tasks:
  • Re-resolve a promise?
  • Delay with a promise
  • Animated circle with promise

• Promises chaining

  • tasks:
  • Promise: then versus catch

• Error handling with promises

  • tasks:
  • Error in setTimeout

• Promise API

• Promisification

• Microtasks

• Async/await

  • tasks:
  • Rewrite using async/await
  • Rewrite "rethrow" with async/await
  • Call async from non-async

Generators, advanced iteration

• Generators

  • tasks:
  • Pseudo-random generator

• Async iteration and generators

Modules

• Modules, introduction

• Export and Import

• Dynamic imports

Miscellaneous

• Proxy and Reflect

  • tasks:
  • Error on reading non-existent property
  • Accessing array[-1]
  • Observable

• Eval: run a code string

  • tasks:
  • Eval-calculator

• Currying

• Reference Type

  • tasks:
  • Syntax check
  • Explain the value of "this"

• BigInt

• Unicode, String internals

Browser: Document, Events, Interfaces

Document

• Browser environment, specs

• DOM tree

• Walking the DOM

  • tasks:
  • DOM children
  • The sibling question
  • Select all diagonal cells

• Searching: getElement*, querySelector*

  • tasks:
  • Search for elements

• Node properties: type, tag and contents

  • tasks:
  • Count descendants
  • What's in the nodeType?
  • Tag in comment
  • Where's the "document" in the hierarchy?

• Attributes and properties

  • tasks:
  • Get the attribute
  • Make external links orange

• Modifying the document

  • tasks:
  • createTextNode vs innerHTML vs textContent
  • Clear the element
  • Why does "aaa" remain?
  • Create a list
  • Create a tree from the object
  • Show descendants in a tree
  • Create a calendar
  • Colored clock with setInterval
  • Insert the HTML in the list
  • Sort the table

• Styles and classes

  • tasks:
  • Create a notification

• Element size and scrolling

  • tasks:
  • What's the scroll from the bottom?
  • What is the scrollbar width?
  • Place the ball in the field center
  • The difference: CSS width versus clientWidth

• Window sizes and scrolling

• Coordinates

  • tasks:
  • Find window coordinates of the field
  • Show a note near the element
  • Show a note near the element (absolute)
  • Position the note inside (absolute)

Introduction to Events

• Introduction to browser events

  • tasks:
  • Hide on click
  • Hide self
  • Which handlers run?
  • Move the ball across the field
  • Create a sliding menu
  • Add a closing button
  • Carousel

• Bubbling and capturing

• Event delegation

  • tasks:
  • Hide messages with delegation
  • Tree menu
  • Sortable table
  • Tooltip behavior

• Browser default actions

  • tasks:
  • Why "return false" doesn't work?
  • Catch links in the element
  • Image gallery

• Dispatching custom events

UI Events

• Mouse events

  • tasks:
  • Selectable list

• Moving the mouse: mouseover/out, mouseenter/leave

  • tasks:
  • Improved tooltip behavior
  • "Smart" tooltip

• Drag'n'Drop with mouse events

  • tasks:
  • Slider
  • Drag superheroes around the field

• Pointer events

• Keyboard: keydown and keyup

  • tasks:
  • Extended hotkeys

• Scrolling

  • tasks:
  • Endless page
  • Up/down button
  • Load visible images

Forms, controls

• Form properties and methods

  • tasks:
  • Add an option to select

• Focusing: focus/blur

  • tasks:
  • Editable div
  • Edit TD on click
  • Keyboard-driven mouse

• Events: change, input, cut, copy, paste

  • tasks:
  • Deposit calculator

• Forms: event and method submit

  • tasks:
  • Modal form

Document and resource loading

• Page: DOMContentLoaded, load, beforeunload, unload

• Scripts: async, defer

• Resource loading: onload and onerror

  • tasks:
  • Load images with a callback

Miscellaneous

• Mutation observer

• Selection and Range

• Event loop: microtasks and macrotasks

  • tasks:
  • What will be the output of this code?

Additional articles

Frames and windows

• Popups and window methods

• Cross-window communication

• The clickjacking attack

Binary data, files

• ArrayBuffer, binary arrays

  • tasks:
  • Concatenate typed arrays

• TextDecoder and TextEncoder

• Blob

• File and FileReader

Network requests

• Fetch

  • tasks:
  • Fetch users from GitHub

• FormData

• Fetch: Download progress

• Fetch: Abort

• Fetch: Cross-Origin Requests

  • tasks:
  • Why do we need Origin?

• Fetch API

• URL objects

• XMLHttpRequest

• Resumable file upload

• Long polling

• WebSocket

• Server Sent Events

Storing data in the browser

• Cookies, document.cookie

• LocalStorage, sessionStorage

  • tasks:
  • Autosave a form field

• IndexedDB

Animation

• Bezier curve

• CSS-animations

  • tasks:
  • Animate a plane (CSS)
  • Animate the flying plane (CSS)
  • Animated circle
  • Animated circle with callback

• JavaScript animations

  • tasks:
  • Animate the bouncing ball
  • Animate the ball bouncing to the right

Web components

• From the orbital height

• Custom elements

  • tasks:
  • Live timer element

• Shadow DOM

• Template element

• Shadow DOM slots, composition

• Shadow DOM styling

• Shadow DOM and events

Regular expressions

• Patterns and flags

• Character classes

• Unicode: flag "u" and class \p{...}

• Anchors: string start ^ and end $

  • tasks:
  • Regexp ^$

• Multiline mode of anchors ^ $, flag "m"

• Word boundary: \b

  • tasks:
  • Find the time

• Escaping, special characters

• Sets and ranges [...]

  • tasks:
  • Java[^script]
  • Find the time as hh:mm or hh-mm

• Quantifiers +, *, ? and {n}

  • tasks:
  • How to find an ellipsis "..." ?
  • Regexp for HTML colors

• Greedy and lazy quantifiers

  • tasks:
  • A match for /d+? d+?/
  • Find HTML comments
  • Find HTML tags

• Capturing groups

  • tasks:
  • Check MAC-address
  • Find color in the format #abc or #abcdef
  • Find all numbers
  • Parse an expression

• Backreferences in pattern: \N and \k<name>

• Alternation (OR) |

  • tasks:
  • Find programming languages
  • Find bbtag pairs
  • Find quoted strings
  • Find the full tag

• Lookahead and lookbehind

  • tasks:
  • Find non-negative integers
  • Insert After Head

• Catastrophic backtracking

• Sticky flag "y", searching at position

• Methods of RegExp and String