X Tutup
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
Dangerous Promise.all
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
X Tutup