Show tasks

The JavaScript language

• An introduction
  • An Introduction to JavaScript
  • 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
  • Type Conversions
    • Type conversions
  • Operators
    • The postfix and prefix forms
    • Assignment result
  • Comparisons
    • Comparisons
  • Interaction: alert, prompt, confirm
    • A simple page
  • Conditional operators: if, '?'
    • if (a string with zero)
    • The name of JavaScript
    • Show the sign
    • Check the login
    • 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"
  • Loops: while and for
    • Last loop value
    • Which values shows the while?
    • 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 and arrows
    • Rewrite with arrow functions
  • JavaScript specials
• Code quality
  • Debugging in Chrome
  • Coding style
    • Bad style
  • Comments
  • Ninja code
  • Automated testing with mocha
    • What's wrong in the test?
  • Polyfills
• Objects: the basics
  • Objects
    • Hello, object
    • Check for emptiness
    • Constant objects?
    • Sum object properties
    • Multiply numeric properties by 2
  • Garbage collection
  • Symbol type
  • Object methods, "this"
    • Syntax check
    • Explain the value of "this"
    • Using "this" in object literal
    • Create a calculator
    • Chaining
  • Object to primitive conversion
  • Constructor, operator "new"
    • Two functions – one object
    • Create new Calculator
    • Create new Accumulator
• 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
    • Uppercast 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
    • Create an extendable calculator
    • A maximal subarray
  • Array methods
    • Translate border-left-width to borderLeftWidth
    • Filter range
    • Filter range "in place"
    • Sort in the reverse order
    • Copy and sort array
    • Map to names
    • Map to objects
    • Sort objects
    • Shuffle an array
    • Get average age
    • Filter unique array members
  • Iterables
  • Map, Set, WeakMap and WeakSet
    • Filter unique array members
    • Filter anagrams
    • Iterable keys
    • 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 has 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 operator
  • Closure
    • Are counters independent?
    • Counter object
    • Function in if
    • Sum with closures
    • 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
    • Rewrite setTimeout with setInterval
    • 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
    • Ask losing this
  • Currying and partials
    • Partial application for login
  • Arrow functions revisited
• Objects, classes, inheritance
  • Property flags and descriptors
  • Property getters and setters
  • Prototypal inheritance
    • Working with prototype
    • Searching algorithm
    • Where it writes?
    • Why two hamsters are 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
  • Methods for prototypes
    • Add toString to the dictionary
    • The difference beteeen calls
  • Class patterns
    • An error in the inheritance
    • Rewrite to prototypes
  • Classes
    • Rewrite to class
  • Class inheritance, super
    • Error creating an instance
    • Extended clock
    • Class extends Object?
  • Class checking: "instanceof"
    • Strange instanceof
  • Mixins
• Error handling
  • Error handling, "try..catch"
    • Finally or just the code?
  • Custom errors, extending Error
    • Inherit from SyntaxError

Browser: Document, Events, Interfaces

• Document
  • Browser environment, specs
  • DOM tree
  • Walking the DOM
    • DOM children
    • The sibling question
    • Select all diagonal cells
  • Searching: getElement* and querySelector*
    • Search for elements
    • Count descendants
  • Node properties: type, tag and contents
    • 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 into Events
  • Introduction to browser events
    • Hide on click
    • Hide self
    • Which handlers run?
    • Move the ball across the field
    • Create a menu 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
• Events in details
  • Mouse events basics
    • Selectable list
  • Moving: mouseover/out, mouseenter/leave
    • Improved tooltip behavior
    • "Smart" tooltip
  • Drag'n'Drop with mouse events
    • Slider
    • Drag superheroes around the field
  • Keyboard: keydown and keyup
    • Extended hotkeys
  • Scrolling
    • Endless page
    • Up/down button
    • Load visible images
  • Page lifecycle: DOMContentLoaded, load, beforeunload, unload
  • Resource loading: onload and onerror
    • Load images with a callback
• 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
  • Form submission: event and method submit
    • Modal form

Additional articles

• Animation
  • Bezier curve
  • CSS-animations
    • Animate a plane (CSS)
    • Animate the flying plane (CSS)
    • Animated circle
  • JavaScript animations
    • Animate the bouncing ball
    • Animate the ball bouncing to the left
• Frames and windows
  • Popups and window methods
  • Cross-window communication
  • The clickjacking attack
• Regular expressions
  • Patterns and flags
  • Methods of RegExp and String
  • Character classes
    • Find the time
  • Escaping, special characters
  • Sets and ranges [...]
    • Java[^script]
    • Find the time as hh:mm or hh-mm
  • The unicode flag
  • 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
    • Find color in the format #abc or #abcdef
    • Find positive numbers
    • Find all numbers
    • Parse an expression
  • Backreferences: \n and $n
  • Alternation (OR) |
    • Find programming languages
    • Find bbtag pairs
    • Find quoted strings
    • Find the full tag
  • String start ^ and finish $
    • Regexp ^$
    • Check MAC-address
  • Multiline mode, flag "m"
  • Lookahead (in progress)
  • Infinite backtracking problem
• Promises, async/await
  • Introduction: callbacks
    • Animated circle with callback
  • Promise
    • Re-resolve a promise?
    • Delay with a promise
    • Animated circle with promise
  • Promises chaining
    • Promise: then versus catch
    • Error in setTimeout
  • Promise API
    • Fault-tolerant Promise.all
    • Fault-tolerant fetch with JSON
  • Async/await
    • Rewrite using async/await
    • Rewrite "rethrow" async/await

• © 2007—2018  Ilya Kantor
• contact us
• about the project
• RU / EN

• powered by node.js & open source