Show tasks

The JavaScript language

• An introduction
  • An Introduction to JavaScript
  • Manuals and specifications
  • Code editors
  • Developer console
• JavaScript Fundamentals
  • Hello, world!
    • Show an alert
    • Show an alert with an external script
  • Code structure
  • The modern mode, "use strict"
  • Variables
    • Working with variables
    • Giving the right name
    • Uppercase const?
  • Data types
    • String quotes
  • Interaction: alert, prompt, confirm
    • A simple page
  • Type Conversions
  • Basic operators, maths
    • The postfix and prefix forms
    • Assignment result
    • Type conversions
    • Fix the addition
  • Comparisons
    • Comparisons
  • Conditional branching: if, '?'
    • if (a string with zero)
    • The name of JavaScript
    • Show the sign
    • Rewrite 'if' into '?'
    • Rewrite 'if..else' into '?'
  • Logical operators
    • 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
    • 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
    • Rewrite the "switch" into an "if"
    • Rewrite "if" into "switch"
  • Functions
    • Is "else" required?
    • Rewrite the function using '?' or '||'
    • Function min(a, b)
    • Function pow(x,n)
  • Function expressions
  • Arrow functions, the basics
    • Rewrite with arrow functions
  • JavaScript specials
• Code quality
  • Debugging in the browser
  • Coding Style
    • Bad style
  • Comments
  • Ninja code
  • Automated testing with Mocha
    • What's wrong in the test?
  • Polyfills and transpilers
• Objects: the basics
  • Objects
    • Hello, object
    • Check for emptiness
    • Sum object properties
    • Multiply numeric property values by 2
  • Object references and copying
  • Garbage collection
  • Object methods, "this"
    • Using "this" in object literal
    • Create a calculator
    • Chaining
  • Constructor, operator "new"
    • Two functions – one object
    • Create new Calculator
    • Create new Accumulator
  • Optional chaining '?.'
  • Symbol type
  • Object to primitive conversion
• Data types
  • Methods of primitives
    • Can I add a string property?
  • Numbers
    • 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
    • Uppercase the first character
    • Check for spam
    • Truncate the text
    • Extract the money
  • Arrays
    • Is array copied?
    • Array operations.
    • Calling in an array context
    • Sum input numbers
    • A maximal subarray
  • Array methods
    • 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
    • Filter unique array members
    • Filter anagrams
    • Iterable keys
  • WeakMap and WeakSet
    • Store "unread" flags
    • Store read dates
  • Object.keys, values, entries
    • Sum the properties
    • Count properties
  • Destructuring assignment
    • Destructuring assignment
    • The maximal salary
  • Date and time
    • 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
    • Turn the object into JSON and back
    • Exclude backreferences
• Advanced working with functions
  • Recursion and stack
    • 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
    • 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
    • Set and decrease for counter
    • Sum with an arbitrary amount of brackets
  • The "new Function" syntax
  • Scheduling: setTimeout and setInterval
    • Output every second
    • What will setTimeout show?
  • Decorators and forwarding, call/apply
    • Spy decorator
    • Delaying decorator
    • Debounce decorator
    • Throttle decorator
  • Function binding
    • 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
    • Working with prototype
    • Searching algorithm
    • Where does it write?
    • Why are both hamsters full?
  • F.prototype
    • Changing "prototype"
    • Create an object with the same constructor
  • Native prototypes
    • Add method "f.defer(ms)" to functions
    • Add the decorating "defer()" to functions
  • Prototype methods, objects without __proto__
    • Add toString to the dictionary
    • The difference between calls
• Classes
  • Class basic syntax
    • Rewrite to class
  • Class inheritance
    • Error creating an instance
    • Extended clock
  • Static properties and methods
    • Class extends Object?
  • Private and protected properties and methods
  • Extending built-in classes
  • Class checking: "instanceof"
    • Strange instanceof
  • Mixins
• Error handling
  • Error handling, "try...catch"
    • Finally or just the code?
  • Custom errors, extending Error
    • Inherit from SyntaxError
• Promises, async/await
  • Introduction: callbacks
  • Promise
    • Re-resolve a promise?
    • Delay with a promise
    • Animated circle with promise
  • Promises chaining
    • Promise: then versus catch
  • Error handling with promises
    • Error in setTimeout
  • Promise API
  • Promisification
  • Microtasks
  • Async/await
    • Rewrite using async/await
    • Rewrite "rethrow" with async/await
    • Call async from non-async
• Generators, advanced iteration
  • Generators
    • Pseudo-random generator
  • Async iteration and generators
• Modules
  • Modules, introduction
  • Export and Import
  • Dynamic imports
• Miscellaneous
  • Proxy and Reflect
    • Error on reading non-existent property
    • Accessing array[-1]
    • Observable
  • Eval: run a code string
    • Eval-calculator
  • Currying
  • Reference Type
    • Syntax check
    • Explain the value of "this"
  • BigInt
  • Unicode, String internals
  • WeakRef and FinalizationRegistry

Browser: Document, Events, Interfaces

• Document
  • Browser environment, specs
  • DOM tree
  • Walking the DOM
    • DOM children
    • The sibling question
    • Select all diagonal cells
  • Searching: getElement*, querySelector*
    • Search for elements
  • Node properties: type, tag and contents
    • Count descendants
    • What's in the nodeType?
    • Tag in comment
    • Where's the "document" in the hierarchy?
  • Attributes and properties
    • Get the attribute
    • Make external links orange
  • Modifying the document
    • 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
    • Create a notification
  • Element size and scrolling
    • 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
    • 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
    • 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
    • Hide messages with delegation
    • Tree menu
    • Sortable table
    • Tooltip behavior
  • Browser default actions
    • Why "return false" doesn't work?
    • Catch links in the element
    • Image gallery
  • Dispatching custom events
• UI Events
  • Mouse events
    • Selectable list
  • Moving the mouse: mouseover/out, mouseenter/leave
    • Improved tooltip behavior
    • "Smart" tooltip
  • Drag'n'Drop with mouse events
    • Slider
    • Drag superheroes around the field
  • Pointer events
  • Keyboard: keydown and keyup
    • Extended hotkeys
  • Scrolling
    • Endless page
    • Up/down button
    • Load visible images
• Forms, controls
  • Form properties and methods
    • Add an option to select
  • Focusing: focus/blur
    • Editable div
    • Edit TD on click
    • Keyboard-driven mouse
  • Events: change, input, cut, copy, paste
    • Deposit calculator
  • Forms: event and method submit
    • Modal form
• Document and resource loading
  • Page: DOMContentLoaded, load, beforeunload, unload
  • Scripts: async, defer
  • Resource loading: onload and onerror
    • Load images with a callback
• Miscellaneous
  • Mutation observer
  • Selection and Range
  • Event loop: microtasks and macrotasks
    • 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
    • Concatenate typed arrays
  • TextDecoder and TextEncoder
  • Blob
  • File and FileReader
• Network requests
  • Fetch
    • Fetch users from GitHub
  • FormData
  • Fetch: Download progress
  • Fetch: Abort
  • Fetch: Cross-Origin Requests
    • 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
    • Autosave a form field
  • IndexedDB
• Animation
  • Bezier curve
  • CSS-animations
    • Animate a plane (CSS)
    • Animate the flying plane (CSS)
    • Animated circle
    • Animated circle with callback
  • JavaScript animations
    • Animate the bouncing ball
    • Animate the ball bouncing to the right
• Web components
  • From the orbital height
  • Custom elements
    • 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 $
    • Regexp ^$
  • Multiline mode of anchors ^ $, flag "m"
  • Word boundary: \b
    • Find the time
  • Escaping, special characters
  • Sets and ranges [...]
    • Java[^script]
    • Find the time as hh:mm or hh-mm
  • Quantifiers +, *, ? and {n}
    • How to find an ellipsis "..." ?
    • Regexp for HTML colors
  • Greedy and lazy quantifiers
    • A match for /d+? d+?/
    • Find HTML comments
    • Find HTML tags
  • Capturing groups
    • 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) |
    • Find programming languages
    • Find bbtag pairs
    • Find quoted strings
    • Find the full tag
  • Lookahead and lookbehind
    • Find non-negative integers
    • Insert After Head
  • Catastrophic backtracking
  • Sticky flag "y", searching at position
  • Methods of RegExp and String

• © 2007—2024  Ilya Kantor
• about the project
• contact us
• terms of usage
• privacy policy