К содержанию

Prime JavaScript tutorial

A simple JavaScript tutorial for beginners with a taskbook and problem solving examples.

Basics

JavaScript introduction for beginners

Running JavaScript

JavaScript first program

Let's analyze the program code

Next examples

JavaScript files inclusion

Multiple files with JavaScript scripts

Script tag nuanses in JavaScript

Caching of JavaScript files in the browser

Strict mode in JavaScript

JavaScript Comments

JavaScript variables

Using of variables

Declaring of multiple variables in JavaScript

Variable value changes

Multiple let for single variable

Math operations on numbers in JavaScript

Mathematical operations on variables in JavaScript

Math operations precedence in JavaScript

Equal priority of mathematical operations in JavaScript

Grouping parentheses in JavaScript

Fractions in JavaScript

Negative numbers in JavaScript

Plus sign before numbers in JavaScript

Division remainder in JavaScript

Exponentiation in JavaScript

Exponentiation precedence

Strings in JavaScript

String concatenation in JavaScript

String length in JavaScript

Template strings in JavaScript

Multiline strings

Special values in JavaScript

Undefined value

Null value

True and false values

NaN value

Infinity, -Infinity values in JavaScript

Working with console in JavaScript

Data type in the console in JavaScript

Errors in the JavaScript console

Constants in JavaScript

Automatic type conversion

Conversion to number in JavaScript

Short number convertion in JavaScript

Conversion incorrect numbers in JavaScript

Numbers extraction in JavaScript

Conversion to string in JavaScript

Applying transformations to strings in JavaScript

Boolean type conversion in JavaScript

Conversion to boolean type in JavaScript

Retrieving the characters of a string in JavaScript

String immutability in JavaScript

Last string character in JavaScript

Strings containing digits in JavaScript

Accessing the digits of a number in JavaScript

Operations to change a variable in JavaScript

Shorthand operations in JavaScript

Increment and decrement operations in JavaScript

Prefix and postfix type in JavaScript

Inaccurate calculations in JavaScript

Prompt function in JavaScript

Prompt types problem in JavaScript

Writing text to a document in JavaScript

Search for errors in the code

Practical usage of operations in JavaScript

Practical usage of formulas in JavaScript

Arrays

Arrays in JavaScript

Accessing Array Elements in JavaScript

Array length in JavaScript

Changing an array elements in JavaScript

Rewriting array elements in JavaScript

Increment and decrement array elements in JavaScript

Adding elements to array by keys JavaScript

Sparse arrays in JavaScript

Adding elements using "push" in JavaScript

Array keys in variables in JavaScript

Delete operator in arrays in JavaScript

Finding mistakes in code with arrays in JavaScript

Objects

Objects in JavaScript

Output of an entire object in JavaScript

Strings as object keys in JavaScript

Object properties in JavaScript

Object key restrictions in JavaScript

Changing object elements in JavaScript

Adding elements to objects in JavaScript

Object disorder in JavaScript

Array of object keys in JavaScript

Object length in JavaScript

Object keys in variables in JavaScript

Error accessing element by key in JavaScript

Error accessing object property in JavaScript

Computed properties in JavaScript

in operator in JavaScript

delete operator in JavaScript

Object typification in JavaScript

Arrays as objects in JavaScript

Distinguishing arrays from objects in JavaScript

Objects and primitives in JavaScript

Passing objects by reference in JavaScript

Objects and arrays as constants in JavaScript

Programming style through constants in JavaScript

Finding errors in code with objects in JavaScript

Conditions

if-else construct in JavaScript

Greater than and less than operators in JavaScript

Checking for equality in JavaScript

Checking for inequality in JavaScript

Variables comparison in JavaScript

String equality in JavaScript

Strings and numbers equality in JavaScript

Equality in value and type in JavaScript

Inequality in value and type in JavaScript

Logical AND in JavaScript

Logical OR in JavaScript

Precedence of logical operators in JavaScript

Combining conditions in JavaScript

Inverting logical expressions in JavaScript

Conditions with boolean values in JavaScript

Comparing values with a boolean type in JavaScript

Shorthand checking for true in JavaScript

Shorthand checking for false in JavaScript

General shorthand checking in JavaScript

Complex conditions in shortened form in JavaScript

Optionality of else construct in JavaScript

Optionality of curly braces in JavaScript

Problem with optionality of curly braces in if-else

else if construct in JavaScript

Nested if-else constructs in JavaScript

switch-case construct in JavaScript

Optionality of break in switch-case construct in JavaScript

Ternary operator in JavaScript

Logical operations in JavaScript

confirm function in JavaScript

Variable scope of if-else in JavaScript

Nuances of variable scope in if-else constructs in JavaScript

Checking parts of hour with if-else in JavaScript

Checking the length of strings and arrays in JavaScript

Checking the characters of a string in JavaScript

Checking the digits of a number in JavaScript

Checking the division remainder in JavaScript

Search for errors in the with conditions in JavaScript

Practical usage of if-else conditions in JavaScript

Loops

Introduction to loops in JavaScript

for loop in JavaScript

Iterating over an array with a for-of loop in JavaScript

Iterating over an object with a for-in loop in JavaScript

while loop in JavaScript

for loop for arrays in JavaScript

Conditions in loops in JavaScript

Accumulation of numbers in loops in JavaScript

Accumulation of array elements in loops in JavaScript

Formation of string through loops in JavaScript

Digits of a number when iterating through a loop in JavaScript

Optional Parentheses in JavaScript Loops

The Problem with Optional Parentheses in Loops in JavaScript

break statement in JavaScript

continue statement in JavaScript

Nested loops in JavaScript

Scope in loops in JavaScript

Nested loops and scope in JavaScript

Filling an array in JavaScript

Changing an array in a loop in JavaScript

Filling Objects via Loop in JavaScript

Changing objects with a loop in JavaScript

Working with flags in JavaScript

Coding tips for loops in JavaScript

Code debugging tips on the example for loops in JavaScript

Finding errors in code with loops in JavaScript

Loops practice in JavaScript

Multidimensionality

Multidimensional arrays in JavaScript

Three-dimensional array in JavaScript

Arbitrary arrays in JavaScript

Iterating over multidimensional arrays in JavaScript

Iterating through the ordinary for in JavaScript

Filling multidimensional arrays in JavaScript

Issues of filling multidimensional arrays in JavaScript

Filling multidimensional arrays in order in JavaScript

Multidimensional objects in JavaScript

Iterating over multidimensional objects in JavaScript

Multidimensional Structures in JavaScript

Iterating over multidimensional structures in JavaScript

Array of objects in JavaScript

Keys from Variables in JavaScript Multidimensional Structures

Adding elements to multidimensional arrays in JavaScript

Adding elements to multidimensional objects in JavaScript

Standard methods

Pow and sqrt in JavaScript

Rounding functions in JavaScript

Finding the maximum and minimum number in JavaScript

Random in JavaScript

Abs in JavaScript

Character case in JavaScript

String Slicing in JavaScript

String searching in JavaScript

String replacing in JavaScript

Splitting Strings in JavaScript

Border elements in JavaScript

Array cutting in JavaScript

Array searching in JavaScript

An array of object keys in JavaScript

Finding errors in code with standard methods in JavaScript

User-defined functions

Basics of working with user-defined functions in JavaScript

Function parameters in JavaScript

Multiple function parameters in JavaScript

Variable as function parameter in JavaScript

Optional parameters in JavaScript

return statement in JavaScript

Sequential function calls in JavaScript

Subtle point of return in JavaScript

return and loop in JavaScript

Usage of return in loops in JavaScript

Working methods with return in JavaScript

Flags in JavaScript functions

Logical statements without if in functions in JavaScript

Tips for creating functions in JavaScript

Finding errors in code with functions in JavaScript

Practice on JavaScript functions

Function variables

Global variables in JavaScript functions

Local variables in JavaScript functions

Same variables name in JavaScript functions

Changing global variables in JavaScript

Global variables and function parameters in JavaScript

Variable and parameter names coincidence in JavaScript

Parameter-object in JavaScript

Types of Function Declarations

The source code of function and its result in JavaScript

Function as variable in JavaScript

Writing a function to another variable in JavaScript

Assigning functions to variables in JavaScript

Function and variable same name in JavaScript

Function expression and Function declaration in JavaScript

Difference between declarations

Semicolon for declaring functions in JavaScript

Nuances of Function Expressions in JavaScript

Function has name, but is Function Expression in JavaScript

Named function expressions in JavaScript

How to check the type of a function in JavaScript

Left expression of function in JavaScript

Right expression of function in JavaScript

An array with anonymous functions in JavaScript

Object with anonymous functions in JavaScript

Application of anonymous functions object in JavaScrip

Nested functions

Passing functions as parameters in JavaScript

Named functions-parameters in JavaScript

Parameters of passed functions in JavaScript

Pass a number as a parameter in JavaScript

Applying of passing functions as parameters in JavaScript

Nested functions in JavaScript

Scope of nested functions in JavaScript

Parameters of outer function in JavaScript

Parameters of outer and inner functions in JavaScript

Same name parameters in JavaScript

Function returning a function in JavaScript

Any nesting level in JavaScript

Parameters of returning functions in JavaScript

Callback functions in JavaScript

Callbacks nuances in JavaScript

Arrow functions in JavaScript

Arrow functions application in JavaScript

Closures

Outer variables access in JavaScript

Lexical environment of functions in JavaScript

Functions lexical environment applying in JavaScript

Closures in JavaScript

Counter using closure in JavaScript

Nuance local variable of counter in JavaScript

Nuance global variable of counter in JavaScript

IIFE

Immediately invoked function call in JavaScript

Assignment function to a variable in JavaScript

Application function of in-place call in JavaScript

Parentheses in IIFE in JavaScript

Immediately invoked function call parameters in JavaScript

Multiple calling in IIFE in JavaScript

Pitfalls in IIFE in JavaScript

Semicolon for safety in IIFE

Closures and IIFE in JavaScript

Recursion

Working with recursion in JavaScript

Example with a parameter with recursion in JavaScript

Sum of array elements with recursion in JavaScript

Recursion and multidimensional structures in JavaScript

Sum of array elements with recursion in JavaScript

Manipulations with elements in JavaScript

Iteration methods

map method to iterate over an array in JavaScript

forEach method to iterate over an array in JavaScript

filter method to filter an array in JavaScript

every method to check an array in JavaScript

some method to check an array in JavaScript

Array Folding in JavaScript

Array Folding in JavaScript

Spread operator

Spread operator in JavaScript

More advanced examples

Extreme array values via spread in JavaScript

Spread operator and array merging in JavaScript

Spread operator for strings in JavaScript

Spread operator and numbers in JavaScript

Rest operator

rest operator in JavaScript

A function that finds the sum of numbers using the rest and spread operators in JavaScript

A function that merges arrays into two-dimensional array in JavaScript

Function that merges arrays into one in JavaScript

Destructuring

Array destructuring in JavaScript

Destructuring an array from a function in JavaScript

Skipping array elements during destructuring in JavaScript

Extra values during destructuring an array in JavaScript

Remaining part of an array when destructuring in JavaScript

Default values when destructuring an array in JavaScript

Default functions when destructuring an array in JavaScript

Variable declaration when destructuring an array in JavaScript

Object destructuring in JavaScript

Variable names when destructuring objects in JavaScript

Default values when destructuring objects in JavaScript

Variables and default values in JavaScript

Declaring variables when destructuring objects in JavaScript

Function parameters destructuring in JavaScript

Objects in function parameters destructuring in JavaScript

Time

Working with the Date object in JavaScript

Date formats in JavaScript

Changing a date format in JavaScript

Getting the day of the week in JavaScript

Printing parts of a date with words in JavaScript

Setting the time in the Date object in JavaScript

Getting time in timestamp format in JavaScript

Difference between dates in timestamp format in JavaScript

Difference between objects with date in JavaScript

Automatic date adjustment in JavaScript

Finding the last day of the month in JavaScript

Leap year determination in JavaScript

Date validation in JavaScript

Getting day of the current year in JavaScript

Day of the current month

Day of next or previous year

Day of next or previous month

Difference of points in time

Point in time of day

Beginning of the day in JavaScript

End of the day in JavaScript

Loop check of time in JavaScript

Practice for getting moments of time in JavaScript

String comparison of dates in JavaScript

Comparison of date without year in JavaScript

Date falling into the interval

Comparing objects with dates in JavaScript

Introduction to the DOM

DOM Basics in JavaScript

DOM elements in JavaScript

Getting the DOM element in JavaScript

Advanced selectors of the DOM element in JavaScript

Attaching handlers to elements in JavaScript

Named event handlers in JavaScript

Single handler for multiple elements in JavaScript

Multiple handlers for one event in JavaScript

Handlers for different events in JavaScript

Working with element text in JavaScript

Working with HTML code of element in JavaScript

Tag attributes as properties in JavaScript

Working with text fields in JavaScript

Text fields focus in JavaScript

Exceptions when working with attributes in JavaScript

Methods and properties chaining in JavaScript

Advantages and disadvantages of chains in JavaScript

this object in JavaScript

this object advantage in JavaScript

Getting a group of elements in JavaScript

Adding handlers in a loop in JavaScript

Adding anonymous handlers in a loop in JavaScript

Unbinding events in JavaScript

Unbinding event handlers in a loop in JavaScript

Unbinding anonymous functions in JavaScript

DOM Coding Tips in JavaScript

Finding errors in code with DOM in JavaScript

Working out the studied material for work with the DOM

Attributes

Getting of attributes in JavaScript

Setting of attributes in JavaScript

Removing of attributes in JavaScript

Attributes checking in JavaScript

Custom attributes in JavaScript

Hyphenated names of attributes in JavaScript

Accessing to attributes via methods in JavaScript

Working with array of CSS classes in JavaScript

Adding of CSS classes in JavaScript

Removing of CSS classes in JavaScript

Checking of CSS classes in JavaScript

Toggling of CSS classes in JavaScript

Stylization

Styling elements using the style attribute in JavaScript

Hyphenated properties in JavaScript

Styling elements exception in JavaScript

Styling with CSS classes in JavaScript

Advantage of styling with CSS classes in JavaScript

Styling application in JavaScript

Searching

Finding descendants of elements in JavaScript

Finding parents of elements in JavaScript

Search for all parents of elements in JavaScript

Search for siblings of elements in JavaScript

Getting of element by id in JavaScript

Getting of element by tag name in JavaScript

Getting of element by class name in JavaScript

Search for elements inside another element in JavaScript

Nodes

Working with nodes in JavaScript

Loop iteration of nodes in JavaScript

Node name in JavaScript

Node type in JavaScript

Node text in JavaScript

Forms

Working with textarea in JavaScript

disabled attribute in JavaScript

Working with checkboxes in JavaScript

Alternating attributes without values

Working with radio buttons in JavaScript

change event in JavaScript

input event in JavaScript

focus and blur methods in JavaScript

Dropdown lists

Working with dropdown lists in JavaScript

Value attribute of dropdown lists in JavaScript

Changing the selected list item in JavaScript

The number of the selected dropdown list item

Getting dropdown list items in JavaScript

Advanced method of getting dropdown list items in JavaScript

Working with dropdown list items in JavaScript

Selecting a list item in JavaScript

Getting the selected option in JavaScript

Event object

Event object basics in JavaScript

Event coordinates in JavaScript

Event type in the Event object in JavaScript

Event element in an Event object in JavaScript

Getting pressed keys in JavaScript

Modifier key tracking in JavaScript

Canceling default action in JavaScript

Event bubbling in JavaScript

Getting the target element when an event is bubbling in JavaScript

Stopping event bubbling in JavaScript

Multiple handlers on an element in JavaScript

Immediate termination of bubbling in JavaScript

Usage of stopping event bubbling in JavaScript

Events capturing in JavaScript

Attaching handlers to new elements in JavaScript

Event delegation in JavaScript

Universal event delegation in JavaScript

Context

Context basics in JavaScript

Unbound function context in JavaScript

Context loss in JavaScript

Solving the context problem in JavaScript

Context with variable in JavaScript

Context with passing parameter in JavaScript

Context with arrow function in JavaScript

Binding a context via the call method in JavaScript

Call method with parameters in JavaScript

Binding a context via the apply method in JavaScript

Binding a context via the bind method in JavaScript

Timers

SetInterval function basics in JavaScript

Counter using setInterval function in JavaScript

Stopping a timer in JavaScript

Button for starting a timer in JavaScript

Multiple pressing of the button for starting a timer in JavaScript

Buttons to start and stop a timer in JavaScript

Practice on timers and working with the DOM in JavaScript

Timers and context loss in JavaScript

Practice on timers and working with the DOM in JavaScript

Delay before execution in JavaScript

Timer start in JavaScript

Element manipulation

Creating and inserting elements in JavaScript

Binding events on insertion of elements

Creating elements in a loop in JavaScript

Attaching handlers in a loop in JavaScript

Removing elements in JavaScript

Insertion of elements before or after in JavaScript

Insert elements before JavaScript elements

Adjacent insertion of elements in JavaScript

Adjacent tag insertion in JavaScript

Cloning elements in JavaScript

Checking elements in JavaScript

Practicum

Creating elements from an array in JavaScript

Practice on creating ul lists in JavaScript

Creating HTML tables in JavaScript

Sequential populating an HTML table

Creating an HTML table from an array in JavaScript

Creating an HTML table from an array of objects

Adding rows and columns to an HTML table

Modifying HTML table cells in JavaScript

Self-removal of new elements in JavaScript

Link to remove an element in JavaScript

Creating links to remove elements in JavaScript

Editing a single element in JavaScript

Hiding text while editing an element in JavaScript

Editing in a group of elements in JavaScript

Simultaneous editing and removal of elements

Element styling in JavaScript

Buttons to hide and show an element in JavaScript

Many elements with show buttons in JavaScript

Element activation in JavaScript

Alternation of activation styles in JavaScript

Practice on changing elements in JavaScript

Functions an the DOM

Functions for working with a DOM element in JavaScript

Functions for working with a group of DOM elements

Passing a callback to work with the DOM in JavaScript

Passing an index number to a callback in JavaScript

Passing a DOM element as a function parameter

Passing a group of DOM elements as function parameters

Function for creating HTML tables in JavaScript

Returning a table from a function in JavaScript

Function to create a table from an array

Modules via closures

Variables conflicts in JavaScript

Modules using closures in JavaScript

Practical usage

Passing parameters to a module via closures in JavaScript

Passing a parent element to module via closures in JavaScript

Passing module settings via closures in JavaScript

Default parameters

Exporting variables and functions in modules via closures in JavaScript

Exporting an Object in Modules via Closures in JavaScript

Libraries via closures in JavaScript