A Comprehensive Guide to Learning Modern JavaScript
Gain the Latest and greatest in Javascript with our Modern Javascript Tutorial!
We cover everything from the basics to advanced topics, all explained in simple terms.
Get up-to-date on your coding skills today!
- Welcome to JavaScript Roadmap
- Browser: Document, Events, Interfaces
- Advance Topics
JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g. complex animations, clickable buttons, popup menus etc). it is used by programmers across the world to create dynamic and interactive web content.
This Tutorial designed to help you to understand every aspect of the JavaScript programming language, quickly and efficiently. Here we learn JavaScript, We concentrate on the language itself here, with the minimum of environment-specific notes.
Introduction:
JavaScript is a lightweight, cross-platform, and interpreted compiled programming language which is also known as the scripting language for webpages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client side developments as well as Server side developments.
The developer console is a practical tool that recognize tracing of scripts in the production system. Developer tools permit us to see errors, run commands, examine variables, and much more. You can also use option (Shift + CTRL + J) on Windows.
A code editor is the place where programmers spend most of their time.
There are many options, for instance:
- Visual Studio Code
- Sublime Text
- Notepad++
JavaScript Fundamentals:
A basic JavaScript program is determine to print Hello world as an output.
We will use these three ways to print ‘Hello, World!’.
- console.log(‘Hello, World!’);
- alert(‘Hello, World!’);
- document.write(‘Hello, World!’);
Variables are containers for storing data (values).
There are 3 ways to declare a JavaScript variable:
- Using var
- Using let
- Using const
JavaScript variables can hold different data types: numbers, strings, objects and more:
- Primitives/ Value Types
- String
- Number
- Boolean
- Null
- Undefined
- Reference Types
- Object
- Date
- Array
There are three browser-specific functions to interact with visitors: alert, prompt, and confirm.
The alert shows a message. The prompt shows a message asking the user to input text. It returns the text or, if Cancel button or Esc is clicked, null. The confirm shows a message and waits for the user to press “OK” or “Cancel”. It returns true for OK and false for Cancel or Esc.
- alert(“Hello”);
- result = prompt(title, [default]);
- result = confirm(question);
Template Literals use back-ticks (` `) rather than the quotes (” “) to define a string:
- let text = `Hello World!`;
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Arithmetic Operator is used to performing mathematical operations such as addition, subtraction, multiplication, division, modulus, etc.
| Operator | Description |
|---|---|
| + | Addition |
| – | Subtraction |
| * | Multiplication |
| ** | Exponentiation |
| / | Division |
| % | Modulus (Remainder) |
| ++ | Increment |
| — | Decrement |
The assignment (=) operator is used to assign a value to a variable. The assignment operation evaluates to the assigned value.
| Operator | Example | Same As |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x – y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| **= | x **= y | x = x ** y |
Logic operators are used to find the logic between variables in JavaScript.There are three logical operators in JavaScript: || (OR), && (AND), ! (NOT) operators.
| Operator | Description |
|---|---|
| && | logical and |
| || | logical or |
| ! | logical not |
A comparison operator compares its operands and returns a logical value based on whether the comparison is true. The operands can be numerical, string, logical, or object values.
| Operator | Description |
|---|---|
| == | equal to |
| === | equal value and equal type |
| != | not equal |
| !== | not equal value or not equal type |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| ? | ternary operator |
It returns the type of a variable.
| Operator | Description |
|---|---|
| typeof | Returns the type of a variable |
| instanceof | Returns true if an object is an instance of an object type |
Bit operators work on 32 bits numbers.
Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
| Operator | Description | Example |
|---|---|---|
| & | Bitwise AND | (10==20 & 20==33) = false |
| | | Bitwise OR | (10==20 | 20==33) = false |
| ^ | Bitwise XOR | (10==20 ^ 20==33) = false |
| ~ | Bitwise NOT | (~10) = -10 |
| << | Bitwise Left Shift | (10<<2) = 40 |
| >> | Bitwise Right Shift | (10>>2) = 2 |
| >>> | Bitwise Right Shift with Zero | (10>>>2) = 2 |
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when “something” invokes it (calls it).
A JavaScript function does not perform any checking on parameter values (arguments).
The return statement ends function execution and specifies a value to be returned to the function caller.
let x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}
JavaScript comments can be used to explain JavaScript code, and to make it more readable.
JavaScript comments can also be used to prevent execution, when testing alternative code.
There are two types of comments in JavaScript.
- Single-line Comment
- Multi-line Comment
Data types:
let lname = “technology”;
All JavaScript numbers are stored as decimal numbers (floating point).
In JavaScript, numbers are primitive data types.
Bigint values represent numeric values which are too large to be represented by the number primitive.
let x = BigInt(“123456789012345678901234567890”);
The Javascript standard defines true and false values as a unique data type called a Javascript boolean.
The undefined property indicates that a variable has not been assigned a value, or not declared at all.
let car; // Value is undefined, type is undefined
‘Null’ is a keyword in JavaScript that signifies ‘no value’ or nonexistence of any value.
let number = null;
The JavaScript ES6 introduced a new primitive data type called symbol. Symbols are immutable (cannot be changed) and are unique.
JavaScript objects are written with curly braces {}.
Object properties are written as name:value pairs, separated by commas.
const person = {firstName:“iqra”, lastName:“technology”, course:“javascript”};
JavaScript array is an object that represents a collection of similar type of elements.
const array_name = [item1, item2, …];
Objects: the basics:
The name:values pairs in JavaScript objects are called properties:
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Access object properties in two ways:
- person.lastName;
- person[“lastName”];
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
In JavaScript, the this keyword refers to an object.
Which object depends on how this is being invoked (used or called).
Array Methods:
The JavaScript method toString() converts an array to a string of (comma separated) array values.i.e.
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
document.getElementById(“demo”).innerHTML = Courses.toString();
Output:
Javascript,SQL,HTML,CSS
The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator:
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
document.getElementById(“demo”).innerHTML = Courses.join(” * “);
Output:
Javascript * SQL * HTML * CSS
The pop() method removes the last element from an array:
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
document.getElementById(“demo”).innerHTML = Courses.pop();
Output:
Javascript,SQL,HTML
The sort() method sorts the items of an array in a specific order (ascending or descending).i.e.
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
Courses.sort();
Output:
CSS,HTML,Javascript,SQL
The reverse() method reverses the elements in an array.i.e.
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
Courses.reverse();
Output:
SQL,Javascript,HTML,CSS,
The push() method adds a new element to an array (at the end):i.e.
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
document.getElementById(“demo”).innerHTML = Courses;
Courses.push(“C#”);
Output:
Javascript,SQL,HTML,CSS,C#
The shift() method removes the first array element and “shifts” all other elements to a lower index.i.e.
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
document.getElementById(“demo”).innerHTML =Courses.shift();
Output:
SQL,HTML,CSS
The unshift() method adds a new element to an array (at the beginning), and “unshifts” older elements:
i.e.
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
document.getElementById(“demo”).innerHTML =Courses.unshift(“C#”);
Output:
C#,SQL,HTML,CSS
length is a property of arrays in JavaScript that returns or sets the number of elements in a given array.
i.e.
const Courses=[“Javascript”,”HTML”,”SQL”];
console.log(Courses.length);
Output:
3
The forEach() method executes a provided function for each array element.i.e.
const numbers = [45, 4, 9, 16, 25];
let txt = “”;
numbers.forEach(myFunction);
document.getElementById(“demo”).innerHTML = txt;
function myFunction(value, index, array) {
txt += value + “<br>”;
}
Array elements can be deleted using the JavaScript operator delete.
i.e.
const Courses= [“Javascript”, “SQL”, “HTML”, “CSS”];
delete Courses[0];
document.getElementById(“demo”).innerHTML =
“The first Course is: ” + Courses[0];
Output:
The first Course is: undefined.
The concat() method creates a new array by merging (concatenating) existing arrays:
The concat() method does not change the existing arrays. It always returns a new array.
i.e.
const Course1= [“Javascript”, “HTML”];
const Course2= [“SQL”, “C#”];
const AllCourses= Course1.concat(Course2);
The splice() method can be used to add new items to an array:
i.e
const Courses= [“Javascript”, “HTML”, “CSS”];
const result=Courses.splice(2,0,“SQL”)
document.write(Courses);
Output:
Javascript,HTML,SQL,CSS
The slice() method slices out a piece of an array into a new array.
Strings and Numbers:
Strings are used for storing text/characters. For example, “Hello World” is a string of characters.i.e.
let answer1 = “It’s alright”;
let answer2 = “He is called ‘Johnny'”;
let answer3 = ‘He is called “Johnny”‘;
String methods help you to work with strings.
- length
- slice()
- replace()
- split()
The JavaScript string search() method is used to search the regular expression in the given string. This method returns -1, if match is not found.
- String indexOf()
- String lastIndexOf()
Template Literals use back-ticks (“) rather than quotes(“”,’’) to define a string.
With template literals, you can use both single and double quotes inside a string.
Template literals allow multiline strings.
Template literals provide an easy way to interpolate variables and expressions into strings. This method is called string interpolation.i.e.
let firstName = “Mudassir”;
let lastName = “Shaikh”;
let text = `Welcome ${firstName}, ${lastName}!`;
Output:
Welcome Mudassir Shaikh
Number methods help you work with numbers.
The toString() Method: The toString() method returns a number as a string.i.e.
let x = 123;
x.toString();
(123).toString();
(100 + 23).toString();
Classes:
Class is a keyword used in object-oriented programming to define a blueprint or a template for creating objects that have similar attributes and methods. Its basic syntax involves using the keyword “class” followed by the name of the class and a colon, and then indenting the class body to define its attributes and methods.
class Animal
{ constructor(name, sound)
{ this.name = name; this.sound = sound; } makeSound()
{ console.log(`${this.name} says ${this.sound}`);
} } const cat = new Animal(‘Cat’, ‘Meow’); cat.makeSound()
Output
Cat says Meow
Class inheritance is a mechanism in object-oriented programming that allows a new class (called a subclass or derived class) to be based on an existing class (called a superclass or base class), inheriting its attributes and methods.
lass Animal {
constructor(name, sound) {
this.name = name;
this.sound = sound;
}
makeSound() {
console.log(`${this.name} says ${this.sound}`);
}
}
class Cat extends Animal {
constructor(name) {
super(name, ‘Meow’);
}
}
class Dog extends Animal {
constructor(name) {
super(name, ‘Woof’);
}
}
const cat = new Cat(‘Kitty’);
cat.makeSound();
output
Kitty says Meow
Static properties and methods are class-level variables and functions in object-oriented programming that belong to the class itself rather than to any instance of the class, and can be accessed directly using the class name without the need for object instantiation.
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getArea() {
return this.width * this.height;
}
}
const rect = new Rectangle(5, 3);
console.log(rect.getArea());
Output 15
Extending built-in classes used is the ability in object-oriented programming to add new methods or properties to existing built-in classes, such as String, Array, or Object, in order to customize their behavior to suit specific needs.
class MyString extends String
{ shout()
{ return this.toUpperCase() + ‘!’; } } const myStr = new MyString(‘hello’); console.log(myStr.shout());
Output
hello
console.log(myStr.length);
Output
5
console.log(myStr instanceof String);
Output
true
“instanceof” is an operator in object-oriented programming used to check whether an object belongs to a specific class or a subclass, returning a boolean value of true or false accordingly..
- Private and protected properties and methods
Error handling:
- Error handling, "try...catch"
- Custom errors, extending Error
Object properties configuration:
- Property flags and descriptors
- Property getters and setters
Promises, async/await:
- Introduction: callbacks
- Promise
- Promises chaining
- Error handling with promises
- Promisification
- Promise API
- Async/await
- Microtasks
Generators, advanced iteration:
- Generators
- Async iteration and generators
Modules:
- Modules, introduction
- Export and Import
- Dynamic imports
Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.
Document:
- Browser environment, specs
- DOM tree
- Walking the DOM
- Styles and classes
- Attributes and properties
- Modifying the document
- Searching: getElement*, querySelector*
- Element size and scrolling
- Window sizes and scrolling
- Coordinates
- Node properties: type, tag and contents
Introduction to Events:
- Introduction to browser events
- Bubbling and capturing
- Event delegation
- Browser default actions
- Dispatching custom events
UI Events:
- Mouse events
- Pointer events
- Scrolling
- Keyboard: keydown and keyup
- Drag'n'Drop with mouse events
- Moving the mouse: mouseover/out, mouseenter/leave
Forms, controls:
- Form properties and methods
- Events: change, input, cut, copy, paste
- Focusing: focus/blur
- Forms: event and method submit
Document and resource loading:
- Page: DOMContentLoaded, load, beforeunload, unload
- Resource loading: onload and onerror
- Scripts: async, defer
Miscellaneous:
- Selection and Range
- Event loop: microtasks and macrotasks
- Mutation observer
List of extra topics that assume you’ve covered the first two parts of tutorial. There is no clear hierarchy here, you can read articles in the order you want.
Frames and windows:
- Popups and window methods
- Cross-window communication
Binary data, files:
- ArrayBuffer, binary arrays
- File and FileReader
- TextDecoder and TextEncoder
Network requests:
- Fetch
- FormData
- Fetch: Abort
- Fetch: Download progress
- Fetch API
- Fetch: Cross-Origin Requests
- XMLHttpRequest
- Resumable file upload
- WebSocket
- Server Sent Events
- Resumable file upload
Storing data in the browser:
- Cookies, document.cookie
- IndexedDB
- LocalStorage, sessionStorage
Animation:
- CSS-animations
- JavaScript animations
- Bezier curve
Web components:
- Template element
- Custom elements
- Shadow DOM
- Shadow DOM slots, composition
- Shadow DOM styling
- Shadow DOM and events
Regular expressions:
- Character classes
- Patterns and flags
- Word boundary: \b
- Methods of RegExp and String
- Unicode: flag "u" and class \p{...}
- Anchors: string start ^ and end $
- Multiline mode of anchors ^ $, flag "m"
- Patterns and flags
- Sets and ranges [...]
- Quantifiers +, *, ? and {n}
- Alternation (OR) |
- Sticky flag "y", searching at position
