JavaScript Manual

Chapter 1
JavaScript Tutorial
JavaScript is the most popular client-side scripting language.
JavaScript is the most popular and widely used client-side scripting language. Client-
side scripting refers to scripts that run within your web browser. JavaScript is
designed to add interactivity and dynamic effects to the web pages by manipulating
the content returned from a web server.
JavaScript was originally developed as LiveScript by Netscape in the mid 1990s. It

was later renamed to JavaScript in 1995, and became an ECMA standard in 1997.
Now JavaScript is the standard client-side scripting language for web-based
applications, and it is supported by virtually all web browsers available today, such as
Google Chrome, Mozilla Firefox, Apple Safari, etc.
JavaScript is an object-oriented language, and it also has some similarities in syntax
to Java programming language. But, JavaScript is not related to Java in any way.
JavaScript is officially maintained by ECMA (European Computer Manufacturers

Association) as ECMAScript. ECMAScript 6 (or ES6) is the latest major version of the
ECMAScript standard.
Tip: Our JavaScript tutorial will help you to learn the fundamentals of JavaScript
scripting language, from the basic to advanced topics step-by-step. If you're a
beginner, start with the basics and gradually move forward by learning a little bit
every day.
What You Can Do with JavaScript

There are lot more things you can do with JavaScript.
 You can modify the content of a web page by adding or removing elements.
 You can change the style and position of the elements on a web page.
 You can monitor events like mouse click, hover, etc. and react to it.
 You can perform and control transitions and animations.
 You can create alert pop-ups to display info or warning messages to the user.
 You can perform operations based on user inputs and display the results.
 You can validate user inputs before submitting it to the server.
The list does not end here, there are many other interesting things that you can do
with JavaScript. You will learn about all of them in detail in upcoming chapters.
What This Tutorial Covers
This JavaScript tutorial series covers all the fundamental programming concepts,
including data types, operators, creating and using variables, generating outputs,
structuring your code to make decisions in your programs or to loop over the same
block of code multiple times, creating and manipulating strings and arrays, defining
and calling functions, and so on.
Once you're comfortable with the basics, you'll move on to next level that explains
the idea of objects, the Document Object Model (DOM) and Browser Object Model
(BOM), as well as how to make use of the native JavaScript objects like Date, Math,
etc., and perform type conversions.
Finally, you'll explore some advanced concepts like event listeners, event
propagation, borrowing methods from other objects, hoisting behavior of JavaScript,
encoding and decoding JSON data, as well as detailed overview of new features
introduced in ECMAScript 6 (or ES6).
Tip: Every chapter in this tutorial contains lots of real-world examples that you can
try and test using an online editor. These examples will help you to better
understand the concept or topic. It also contains smart workarounds as well as useful
tips and important notes.
Chapter 2
JavaScript Getting Started

In this tutorial you will learn how to make a JavaScript powered web page.
Getting Started with JavaScript

Here, you will learn how easy it is to add interactivity to a web page using JavaScript.
But, before we begin, make sure that you have some working knowledge of HTML
and CSS.
Adding JavaScript to Your Web Pages

There are typically three ways to add JavaScript to a web page:
 Embedding the JavaScript code between a pair of <script> and </script> tag.
 Creating an external JavaScript file with the .js extension and then load it within the
page through the src attribute of the <script> tag.
 Placing the JavaScript code directly inside an HTML tag using the special tag
attributes such as onclick, onmouseover, onkeypress, onload, etc.
The following sections will describe each of these procedures in detail:
Embedding the JavaScript Code

You can embed the JavaScript code directly within your web pages by placing it
between the <script> and </script> tags. The <script> tag indicates the browser that
the contained statements are to be interpreted as executable script and not HTML.
Here's an example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedding JavaScript</title>
</head>
<body>
<script>
var greet = "Hello World!";
document.write(greet); // Prints: Hello World!
</script>
</body>
</html>
The JavaScript code in the above example will simply prints a text message on the
web page. You will learn what each of these JavaScript statements means in
upcoming chapters.
Note: The type attribute for <script> tag (i.e. <script type="text/javascript">) is no
longer required since HTML5. JavaScript is the default scripting language for HTML5.
Calling an External JavaScript File

You can also place your JavaScript code into a separate file with a .js extension, and
then call that file in your document through the src attribute of the <script> tag, like
this:
<script src="js/hello.js"></script>
This is useful if you want the same scripts available to multiple documents. It saves
you from repeating the same task over and over again, and makes your website
much easier to maintain.
Well, let's create a JavaScript file named "hello.js" and place the following code in it:
Example
Try this code »
// A function to display a message

function sayHello() {
alert("Hello World!");
}
// Call function on click of the button

document.getElementById("myBtn").onclick = sayHello;
Now, you can call this external JavaScript file within a web page using
the <script> tag, like this:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>Including External JavaScript File</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script src="js/hello.js"></script>
</body>
</html>
Note: Usually when an external JavaScript file is downloaded for first time, it is
stored in the browser's cache (just like images and style sheets), so it won't need to
be downloaded multiple times from the web server that makes the web pages load
more quickly.
Placing the JavaScript Code Inline
You can also place JavaScript code inline by inserting it directly inside the HTML tag
using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.
However, you should avoid placing large amount of JavaScript code inline as it
clutters up your HTML with JavaScript and makes your JavaScript code difficult to
maintain. Here's an example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inlining JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>
The above example will show you an alert message on click of the button element.
Tip: You should always keep the content and structure of your web page (i.e. HTML)
separate out from presentation (CSS), and behavior (JavaScript).
Positioning of Script inside HTML Document

The <script> element can be placed in the <head>, or <body> section of an HTML
document. But ideally, scripts should be placed at the end of the body section, just
before the closing </body> tag, it will make your web pages load faster, since it
prevents obstruction of initial page rendering.
Each <script> tag blocks the page rendering process until it has fully downloaded
and executed the JavaScript code, so placing them in the head section
(i.e. <head> element) of the document without any valid reason will significantly
impact your website performance.
Tip: You can place any number of <script> element in a single document. However,
they are processed in the order in which they appear in the document, from top to
bottom.
Difference Between Client-side and Server-side

Scripting
Client-side scripting languages such as JavaScript, VBScript, etc. are interpreted and
executed by the web browser, while server-side scripting languages such as PHP,
ASP, Java, Python, Ruby, etc. runs on the web server and the output sent back to the
web browser in HTML format.
Client-side scripting has many advantages over traditional server-side scripting

approach. For example, you can use JavaScript to check if the user has entered
invalid data in form fields and show notifications for input errors accordingly in real-
time before submitting the form to the web-server for final data validation and
further processing in order to prevent unnecessary network bandwidth usages and
the exploitation of server system resources.
Also, response from a server-side script is slower as compared to a client-side script,

because server-side scripts are processed on the remote computer not on the user's
local computer.
Chapter 3
JavaScript Syntax
In this tutorial you will learn how to write the JavaScript code.
Understanding the JavaScript Syntax

The syntax of JavaScript is the set of rules that define a correctly structured
JavaScript program.
A JavaScript consists of JavaScript statements that are placed within

the <script></script> HTML tags in a web page, or within the external JavaScript file
having .js extension.
The following example shows how JavaScript statements look like:
Example
Try this code »
var x = 5;
var y = 10;
var sum = x + y;
document.write(sum); // Prints variable value
You will learn what each of these statements means in upcoming chapters.
Case Sensitivity in JavaScript
JavaScript is case-sensitive. This means that variables, language keywords, function
names, and other identifiers must always be typed with a consistent capitalization of
letters.
For example, the variable myVar must be typed myVar not MyVar or myvar. Similarly, the
method name getElementById() must be typed with the exact case not
as getElementByID().
Example
Try this code »
var myVar = "Hello World!";

console.log(myVar);
console.log(MyVar);
console.log(myvar);
If you checkout the browser console by pressing the f12 key on the keyboard, you'll
see a line something like this: "Uncaught ReferenceError: MyVar is not defined".
JavaScript Comments
A comment is simply a line of text that is completely ignored by the JavaScript
interpreter. Comments are usually added with the purpose of providing extra
information pertaining to source code. It will not only help you understand your
code when you look after a period of time but also others who are working with you
on the same project.
JavaScript support single-line as well as multi-line comments. Single-line comments

begin with a double forward slash (//), followed by the comment text. Here's an
example:
Example
Try this code »
// This is my first JavaScript program

document.write("Hello World!");
Whereas, a multi-line comment begins with a slash and an asterisk (/*) and ends with
an asterisk and slash (*/). Here's an example of a multi-line comment.
Example
Try this code »
/* This is my first program

in JavaScript */
document.write("Hello World!");
Chapter 4
JavaScript Variables
In this tutorial you will learn how to create variables to store data in JavaScript.
What is Variable?
Variables are fundamental to all programming languages. Variables are used to store
data, like string of text, numbers, etc. The data or value stored in the variables can be
set, updated, and retrieved whenever needed. In general, variables are symbolic
names for values.
You can create a variable with the var keyword, whereas the assignment operator (=)
is used to assign value to a variable, like this: var varName = value;
Example
Try this code »
var name = "Peter Parker";

var age = 21;
var isMarried = false;
Tip: Always give meaningful names to your variables. Additionally, for naming the
variables that contain multiple words, camelCase is commonly used. In this
convention all world after the first should have uppercase first letters,
e.g. myLongVariableName.
In the above example we have created three variables, first one has assigned with a
string value, the second one has assigned with a number, whereas the last one
assigned with a boolean value. Variables can hold different types of data, we'll learn
about them in later chapter.
In JavaScript, variables can also be declared without having any initial values
assigned to them. This is useful for variables which are supposed to hold values like
user inputs.
Example
Try this code »
// Declaring Variable
var userName;
// Assigning value
userName = "Clark Kent";
Note: In JavaScript, if a variable has been declared, but has not been assigned a
value explicitly, is automatically assigned the value undefined.
Declaring Multiple Variables at Once

In addition, you can also declare multiple variables and set their initial values in a
single statement. Each variable are separated by commas, as demonstrated in the
following example:
Example
Try this code »
// Declaring multiple Variables

var name = "Peter Parker", age = 21, isMarried = false;
/* Longer declarations can be written to span

multiple lines to improve the readability */
var name = "Peter Parker",
age = 21,
isMarried = false;
The let and const Keywords ES6
ES6 introduces two new keywords let and const for declaring variables.
The const keyword works exactly the same as let, except that variables declared
using const keyword cannot be reassigned later in the code. Here's an example:
Example
Try this code »
// Declaring variables
let name = "Harry Potter";
let age = 11;
let isStudent = true;
// Declaring constant
const PI = 3.14;
console.log(PI); // 3.14
// Trying to reassign
PI = 10; // error
Unlike var, which declare function-scoped variables, both let and const keywords
declare variables, scoped at block-level ({}). Block scoping means that a new scope is
created between a pair of curly brackets {}. We'll discuss this in detail later,
in JavaScript ES6 features chapter.
Note: The let and const keywords are not supported in older browsers like IE10. IE11
support them partially. See the JS ES6 features chapter to know how to start using
ES6 today.
Naming Conventions for JavaScript Variables
These are the following rules for naming a JavaScript variable:
 A variable name must start with a letter, underscore (_), or dollar sign ($).
 A variable name cannot start with a number.
 A variable name can only contain alpha-numeric characters (A-z, 0-9) and
underscores.
 A variable name cannot contain spaces.
 A variable name cannot be a JavaScript keyword or a JavaScript reserved word.
Note: Variable names in JavaScript are case sensitive, it means $myvar and $myVar are
two different variables. So be careful while defining variable names.
Chapter 5
JavaScript Generating Output
In this tutorial you will learn how to generate outputs in JavaScript.
Generating Output in JavaScript

There are certain situations in which you may need to generate output from your
JavaScript code. For example, you might want to see the value of variable, or write a
message to browser console to help you debug an issue in your running JavaScript
code, and so on.
In JavaScript there are several different ways of generating output including writing
output to the browser window or browser console, displaying output in dialog boxes,
writing output into an HTML element, etc. We'll take a closer look at each of these in
the following sections.
Writing Output to Browser Console

You can easily outputs a message or writes data to the browser console using
the console.log() method. This is a simple, but very powerful method for generating
detailed output. Here's an example:
Example
Try this code »
// Printing a simple text message

console.log("Hello World!"); // Prints: Hello World!
// Printing a variable value

var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // Prints: 30
Tip: To access your web browser's console, first press F12 key on the keyboard to
open the developer tools then click on the console tab. It looks something like
the screenshot here.
Displaying Output in Alert Dialog Boxes

You can also use alert dialog boxes to display the message or output data to the
user. An alert dialog box is created using the alert() method. Here's is an example:
Example
Try this code »
// Displaying a simple text message

alert("Hello World!"); // Outputs: Hello World!
// Displaying a variable value

var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Outputs: 30
Writing Output to the Browser Window

You can use the document.write() method to write the content to the current
document only while that document is being parsed. Here's an example:
Example
Try this code »
// Printing a simple text message

document.write("Hello World!"); // Prints: Hello World!
// Printing a variable value

var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Prints: 30
If you use the document.write() method method after the page has been loaded, it will
overwrite all the existing content in that document. Check out the following example:
Example
Try this code »
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<button type="button" onclick="document.write('Hello

World!')">Click Me</button>
Inserting Output Inside an HTML Element

You can also write or insert output inside an HTML element using the
element's innerHTML property. However, before writing the output first we need
to select the element using a method such as getElementById(), as demonstrated in
the following example:
Example
Try this code »
<p id="greet"></p>
<p id="result"></p>
<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello World!";
// Writing a variable value inside an element

var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>
Chapter 6
JavaScript Data Types

In this tutorial you will learn about the data types available in JavaScript.
Data Types in JavaScript

Data types basically specify what kind of data can be stored and manipulated within
a program.
There are six basic data types in JavaScript which can be divided into three main
categories: primitive (or primary), composite (or reference), and special data types.
String, Number, and Boolean are primitive data types. Object, Array, and Function
(which are all types of objects) are composite data types. Whereas Undefined and
Null are special data types.
Primitive data types can hold only one value at a time, whereas composite data types
can hold collections of values and more complex entities. Let's discuss each one of
them in detail.
The String Data Type

The string data type is used to represent textual data (i.e. sequences of characters).
Strings are created using single or double quotes surrounding one or more
characters, as shown below:
Example
Try this code »
var a = 'Hi there!'; // using single quotes

var b = "Hi there!"; // using double quotes
You can include quotes inside the string as long as they don't match the enclosing
quotes.
Example
Try this code »
var a = "Let's have a cup of coffee."; // single quote inside

double quotes
var b = 'He said "Hello" and left.'; // double quotes inside
single quotes
var c = 'We\'ll never give up.'; // escaping single quote with
backslash
You will learn more about the strings in JavaScript strings chapter.
The Number Data Type

The number data type is used to represent positive or negative numbers with or
without decimal place, or numbers written using exponential notation e.g. 1.5e-4
(equivalent to 1.5x10-4).
Example
Try this code »
var a = 25; // integer

var b = 80.5; // floating-point number
var c = 4.25e+6; // exponential notation, same as 4.25e6 or
4250000
var d = 4.25e-6; // exponential notation, same as 0.00000425
The Number data type also includes some special values which are: Infinity, -
Infinity and NaN. Infinity represents the mathematical Infinity ∞, which is greater than
any number. Infinity is the result of dividing a nonzero number by 0, as
demonstrated below:
Example
Try this code »
alert(16 / 0); // Output: Infinity

alert(-16 / 0); // Output: -Infinity
alert(16 / -0); // Output: -Infinity
While NaN represents a special Not-a-Number value. It is a result of an invalid or an
undefined mathematical operation, like taking the square root of -1 or dividing 0 by
0, etc.
Example
Try this code »
alert("Some text" / 2); // Output: NaN

alert("Some text" / 2 + 10); // Output: NaN
alert(Math.sqrt(-1)); // Output: NaN
You will learn more about the numbers in JavaScript numbers chapter.
The Boolean Data Type

The Boolean data type can hold only two values: true or false. It is typically used to
store values like yes (true) or no (false), on (true) or off (false), etc. as demonstrated
below:
Example
Try this code »
var isReading = true; // yes, I'm reading

var isSleeping = false; // no, I'm not sleeping
Boolean values also come as a result of comparisons in a program. The following
example compares two variables and shows the result in an alert dialog box:
Example
Try this code »
var a = 2, b = 5, c = 10;
alert(b > a) // Output: true

alert(b > c) // Output: false
You will learn more about the comparisons in JavaScript if/else chapter.
The Undefined Data Type
The undefined data type can only have one value-the special value undefined. If a
variable has been declared, but has not been assigned a value, has the
value undefined.
Example
Try this code »
var a;
var b = "Hello World!"
alert(a) // Output: undefined

alert(b) // Output: Hello World!
The Null Data Type

This is another special data type that can have only one value-the null value.
A null value means that there is no value. It is not equivalent to an empty string ("")
or 0, it is simply nothing.
A variable can be explicitly emptied of its current contents by assigning it

the null value.
Example
Try this code »
var a = null;
alert(a); // Output: null
var b = "Hello World!"

alert(b); // Output: Hello World!
b = null;
alert(b) // Output: null
The Object Data Type
The object is a complex data type that allows you to store collections of data.
An object contains properties, defined as a key-value pair. A property key (name) is

always a string, but the value can be any data type, like strings, numbers, booleans,
or complex data types like arrays, function and other objects. You'll learn more about
objects in upcoming chapters.
The following example will show you the simplest way to create an object in
JavaScript.
Example
Try this code »
var emptyObject = {};

var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// For better reading

var car = {
"modal": "BMW X3",
"color": "white",
"doors": 5
}
You can omit the quotes around property name if the name is a valid JavaScript
name. That means quotes are required around "first-name" but are optional
around firstname. So the car object in the above example can also be written as:
Example
Try this code »
var car = {
modal: "BMW X3",
color: "white",
doors: 5
}
You will learn more about the objects in JavaScript objects chapter.
The Array Data Type
An array is a type of object used for storing multiple values in single variable. Each
value (also called an element) in an array has a numeric position, known as its index,
and it may contain data of any data type-numbers, strings, booleans, functions,
objects, and even other arrays. The array index starts from 0, so that the first array
element is arr[0] not arr[1].
The simplest way to create an array is by specifying the array elements as a comma-
separated list enclosed by square brackets, as shown in the example below:
Example
Try this code »
var colors = ["Red", "Yellow", "Green", "Orange"];

var cities = ["London", "Paris", "New York"];
alert(colors[0]); // Output: Red

alert(cities[2]); // Output: New York
You will learn more about the arrays in JavaScript arrays chapter.
The Function Data Type

The function is callable object that executes a block of code. Since functions are
objects, so it is possible to assign them to variables, as shown in the example below:
Example
Try this code »
var greeting = function(){

return "Hello World!";
}
// Check the type of greeting variable

alert(typeof greeting) // Output: function
alert(greeting()); // Output: Hello World!
In fact, functions can be used at any place any other value can be used. Functions
can be stored in variables, objects, and arrays. Functions can be passed as arguments
to other functions, and functions can be returned from functions. Consider the
following function:
Example
Try this code »
function createGreeting(name){
return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");

alert(result); // Output: Hello, Peter
You will learn more about the functions in JavaScript functions chapter.
The typeof Operator

The typeof operator can be used to find out what type of data a variable or operand
contains. It can be used with or without parentheses (typeof(x) or typeof x).
The typeof operator is particularly useful in the situations when you need to process
the values of different types differently, but you need to be very careful, because it
may produce unexpected result in some cases, as demonstrated in the following
example:
Example
Try this code »
// Numbers
typeof 15; // Returns: "number"
typeof 42.7; // Returns: "number"
typeof 2.5e-4; // Returns: "number"
typeof Infinity; // Returns: "number"
typeof NaN; // Returns: "number". Despite being "Not-A-Number"
// Strings
typeof ''; // Returns: "string"
typeof 'hello'; // Returns: "string"
typeof '12'; // Returns: "string". Number within quotes is typeof
string
// Booleans
typeof true; // Returns: "boolean"
typeof false; // Returns: "boolean"
// Undefined
typeof undefined; // Returns: "undefined"
typeof undeclaredVariable; // Returns: "undefined"
// Null
typeof Null; // Returns: "object"
// Objects
typeof {name: "John", age: 18}; // Returns: "object"
// Arrays
typeof [1, 2, 4]; // Returns: "object"
// Functions
typeof function(){}; // Returns: "function"
As you can clearly see in the above example when we test the null value using
the typeof operator (line no-22), it returned "object" instead of "null".
This is a long-standing bug in JavaScript, but since lots of codes on the web written
around this behavior, and thus fixing it would create a lot more problem, so idea of
fixing this issue was rejected by the committee that design and maintains JavaScript.
Chapter 7
JavaScript Operators
In this tutorial you will learn how to manipulate or perform the operations on
variables and values using the operators in JavaScript.
What are Operators in JavaScript

Operators are symbols or keywords that tell the JavaScript engine to perform some
sort of actions. For example, the addition (+) symbol is an operator that tells
JavaScript engine to add two variables or values, while the equal-to (==), greater-than
(>) or less-than (<) symbols are the operators that tells JavaScript engine to compare
two variables or values, and so on.
The following sections describe the different operators used in JavaScript.
JavaScript Arithmetic Operators

The arithmetic operators are used to perform common arithmetical operations, such
as addition, subtraction, multiplication etc. Here's a complete list of JavaScript's
arithmetic operators:
Operator Description Example Result
+ Addition $x + $y Sum of $x and $y
- Subtraction $x - $y Difference of $x and $y.
* Multiplication $x * $y Product of $x and $y.

/ Division $x / $y Quotient of $x and $y
% Modulus $x % $y Remainder of $x divided by $y
The following example will show you these arithmetic operators in action:
Example
Try this code »
var x = 10;
var y = 4;
alert(x + y); // 0utputs: 14
alert(x - y); // 0utputs: 6
alert(x * y); // 0utputs: 40
alert(x / y); // 0utputs: 2.5
alert(x % y); // 0utputs: 2
JavaScript Assignment Operators

The assignment operators are used to assign values to variables.
Operator Description Example Is The Same As
= Assign x = y x = y
+= Add and assign x += $ x = x + y
-= Subtract and assign x -= y x = x - y
*= Multiply and assign x *= y x = x * y
/= Divide and assign quotient x /= y x = x / y
%= Divide and assign modulus x %= y x = x % y

The following example will show you these assignment operators in action:
Example
Try this code »
var x; // Declaring Variable
x = 10;
alert(x); // Outputs: 10
x = 20;
x += 30;
x = 50;
x -= 20;
x = 5;
x *= 25;
x = 50;
x /= 10;
x = 100;
x %= 15;
JavaScript String Operators

There are two operators which can also used be for strings.
Operator Description Example Result
+ Concatenation str1 + str2 Concatenation of str1 and str2
+= Concatenation assignment str1 += str2 Appends the str2 to the str1

The following example will show you these string operators in action:
Example
Try this code »
var str1 = "Hello";

var str2 = " World!";
alert(str1 + str2); // Outputs: Hello World!
str1 += str2;
alert(str1); // Outputs: Hello World!
JavaScript Incrementing and Decrementing

Operators
The increment/decrement operators are used to increment/decrement a variable's
value.
Operator Name Effect
++x Pre-increment Increments x by one, then returns x
x++ Post-increment Returns x, then increments x by one
--x Pre-decrement Decrements x by one, then returns x
x-- Post-decrement Returns x, then decrements x by one
The following example will show you how increment and decrement operators
actually work:
Example
Try this code »
var x; // Declaring Variable

x = 10;
alert(++x); // Outputs: 11
x = 10;
alert(x++); // Outputs: 10
x = 10;
alert(--x); // Outputs: 9
x = 10;
alert(x--); // Outputs: 10
JavaScript Logical Operators

The logical operators are typically used to combine conditional statements.
Operator Name Example Result
&& And x && y True if both x and y are true
|| Or x || y True if either x or y is true
! Not !x True if x is not true
The following example will show you how these logical operators actually work:
Example
Try this code »
var year = 2018;
// Leap years are divisible by 400 or by 4 but not 100

if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
alert(year + " is a leap year.");
} else{
alert(year + " is not a leap year.");
}
You will learn about conditional statements in JavaScript if/else chapter.
JavaScript Comparison Operators

The comparison operators are used to compare two values in a Boolean fashion.
Operator Name Example Result
== Equal x == y True if x is equal to y
=== Identical x === y True if x is equal to y, and they are of the same type
!= Not equal x != y True if x is not equal to y
!== Not identical x !== y True if x is not equal to y, or they are not of the
same type
< Less than x < y True if x is less than y
> Greater than x > y True if x is greater than y
>= Greater than or equal to x >= y True if x is greater than or equal to y
<= Less than or equal to x <= y True if x is less than or equal to y

The following example will show you these comparison operators in action:
Example
Try this code »
var x = 25;
var y = 35;
var z = "25";
alert(x == z); // Outputs: true

alert(x === z); // Outputs: false
alert(x != y); // Outputs: true
alert(x !== z); // Outputs: true
alert(x < y); // Outputs: true
alert(x > y); // Outputs: false
alert(x <= y); // Outputs: true
alert(x >= y); // Outputs: false
Chapter 8
JavaScript Events
In this tutorial you will learn how to handle events in JavaScript.
Understanding Events and Event Handlers

An event is something that happens when user interact with the web page, such as
when he clicked a link or button, entered text into an input box or textarea, made
selection in a select box, pressed key on the keyboard, moved the mouse pointer,
submits a form, etc. In some cases, the Browser itself can trigger the events, such as
the page load and unload events.
When an event occur, you can use a JavaScript event handler (or an event listener) to
detect them and perform specific task or set of tasks. By convention, the names for
event handlers always begin with the word "on", so an event handler for the click
event is called onclick, similarly an event handler for the load event is called onload,
event handler for the blur event is called onblur, and so on.
There are several ways to assign an event handler. The simplest way is to add them
directly to the start tag of the HTML elements using the special event-handler
attributes. For example, to assign a click handler for a button element, we can
use onclick attribute, like this:
Example
Try this code »
<button type="button" onclick="alert('Hello World!')">Click

Me</button>
However, to keep the JavaScript seperate from HTML, you can set up the event
handler in an external JavaScript file or within the <script> and </script> tags, like this:
Example
Try this code »

<script>
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
Note: Since HTML attributes are case-insensitive so onclick may also be written
as onClick, OnClick or ONCLICK. But its value is case-sensitive.
In general, the events can be categorized into four main groups — mouse
events, keyboard events, form events and document/window events. There are many
other events, we will learn about them in later chapters. The following section will
give you a brief overview of the most useful events one by one along with the real
life practice examples.
Mouse Events
A mouse event is triggered when the user click some element, move the mouse
pointer over an element, etc. Here're some most important mouse events and their
event handler.
The Click Event (onclick)

The click event occurs when a user clicks on an element on a web page. Often, these
are form elements and links. You can handle a click event with an onclick event
handler.
The following example will show you an alert message when you click on the
elements.
Example
Try this code »
<button type="button" onclick="alert('You have clicked a

button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click
Me</a>
The Contextmenu Event (oncontextmenu)

The contextmenu event occurs when a user clicks the right mouse button on an
element to open a context menu. You can handle a contextmenu event with
an oncontextmenu event handler.
The following example will show an alert message when you right-click on the
elements.
Example
Try this code »
<button type="button" oncontextmenu="alert('You have right-clicked

a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a
link!');">Right Click on Me</a>
The Mouseover Event (onmouseover)

The mouseover event occurs when a user moves the mouse pointer over an element.
You can handle the mouseover event with the onmouseover event handler. The
following example will show you an alert message when you place mouse over the
elements.
Example
Try this code »
<button type="button" onmouseover="alert('You have placed mouse

pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over
a link!');">Place Mouse Over Me</a>
The Mouseout Event (onmouseout)
The mouseout event occurs when a user moves the mouse pointer outside of an
element.
You can handle the mouseout event with the onmouseout event handler. The following
example will show you an alert message when the mouseout event occurs.
Example
Try this code »
<button type="button" onmouseout="alert('You have moved out of the

button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the
link!');">Place Mouse Inside Me and Move Out</a>
Keyboard Events
A keyboard event is fired when the user press or release a key on the keyboard.
Here're some most important keyboard events and their event handler.
The Keydown Event (onkeydown)

The keydown event occurs when the user presses down a key on the keyboard.
You can handle the keydown event with the onkeydown event handler. The following
example will show you an alert message when the keydown event occurs.
Example
Try this code »
<input type="text" onkeydown="alert('You have pressed a key inside

text input!')">
<textarea onkeydown="alert('You have pressed a key inside
textarea!')"></textarea>
The Keyup Event (onkeyup)
The keyup event occurs when the user releases a key on the keyboard.
You can handle the keyup event with the onkeyup event handler. The following
example will show you an alert message when the keyup event occurs.
Example
Try this code »
<input type="text" onkeyup="alert('You have released a key inside

text input!')">
<textarea onkeyup="alert('You have released a key inside
The Keypress Event (onkeypress)

The keypress event occurs when a user presses down a key on the keyboard that has
a character value associated with it. For example, keys like Ctrl, Shift, Alt, Esc, Arrow
keys, etc. will not generate a keypress event, but will generate a keydown and keyup
event.
You can handle the keypress event with the onkeypress event handler. The following
example will show you an alert message when the keypress event occurs.
Example
Try this code »
<input type="text" onkeypress="alert('You have pressed a key inside

text input!')">
<textarea onkeypress="alert('You have pressed a key inside
Form Events
A form event is fired when a form control receive or loses focus or when the user
modify a form control value such as by typing text in a text input, select any option
in a select box etc. Here're some most important form events and their event
handler.
The Focus Event (onfocus)

The focus event occurs when the user gives focus to an element on a web page.
You can handle the focus event with the onfocus event handler. The following
example will highlight the background of text input in yellow color when it receives
the focus.
Example
Try this code »
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
Note: The value of this keyword inside an event handler refers to the element which
has the handler on it (i.e. where the event is currently being delivered).
The Blur Event (onblur)

The blur event occurs when the user takes the focus away from a form element or a
window.
You can handle the blur event with the onblur event handler. The following example
will show you an alert message when the text input element loses focus.
Example
Try this code »
<input type="text" onblur="alert('Text input loses focus!')">

<button type="button">Submit</button>
To take the focus away from a form element first click inside of it then press the tab
key on the keyboard, give focus on something else, or click outside of it.
The Change Event (onchange)

The change event occurs when a user changes the value of a form element.
You can handle the change event with the onchange event handler. The following
example will show you an alert message when you change the option in the select
box.
Example
Try this code »
<select onchange="alert('You have changed the selection!');">

<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
The Submit Event (onsubmit)

The submit event only occurs when the user submits a form on a web page.
You can handle the submit event with the onsubmit event handler. The following
example will show you an alert message while submitting the form to the server.
Example
Try this code »
<form action="action.php" method="post" onsubmit="alert('Form data

will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
Document/Window Events
Events are also triggered in situations when the page has loaded or when user resize
the browser window, etc. Here're some most important document/window events
and their event handler.
The Load Event (onload)

The load event occurs when a web page has finished loading in the web browser.
You can handle the load event with the onload event handler. The following example
will show you an alert message as soon as the page finishes loading.
Example
Try this code »
<body onload="window.alert('Page is loaded successfully!');">

<p>This is paragraph of text.</p>
</body>
The Unload Event (onunload)

The unload event occurs when a user leaves the current web page.
You can handle the unload event with the onunload event handler. The following
example will show you an alert message when you try to leave the page.
Example
Try this code »
<body onunload="alert('Are you sure you want to leave this

page?');">
<p>This is paragraph of text.</p>
</body>
The Resize Event (onresize)

The resize event occurs when a user resizes the browser window. The resize event
also occurs in situations when the browser window is minimized or maximized.
You can handle the resize event with the onresize event handler. The following
example will show you an alert message when you resize the browser window to a
new width and height.
Example
Try this code »
<p id="result"></p>
<script>
function displayWindowSize() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = displayWindowSize;
</script>
Chapter 9
JavaScript Strings
In this tutorial you will learn how to create and manipulate strings in JavaScript.
What is String in JavaScript

A string is a sequence of letters, numbers, special characters and arithmetic values or
combination of all. Strings can be created by enclosing the string literal (i.e. string
characters) either within single quotes (') or double quotes ("), as shown in the
example below:
Example
Try this code »
var myString = 'Hello World!'; // Single quoted string

var myString = "Hello World!"; // Double quoted string
You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:
Example
Try this code »
var str1 = "it's okay";

var str2 = 'He said "Goodbye"';
var str3 = "She replied 'Calm down, please'";
var str4 = 'Hi, there!"; // Syntax error - quotes must match
However, you can still use single quotes inside a single quoted strings or double
quotes inside double quoted strings by escaping the quotes with a backslash
character (\), like this:
Example
Try this code »
var str1 = 'it\'s okay';

var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'Calm down, please\'';
The backslash (\) is called an escape character, whereas the sequences \' and \" that
we've used in the example above are called escape sequences.
JavaScript Escape Sequences

Escape sequences are also useful for situations where you want to use characters
that can't be typed using a keyboard. Here are some other most commonly used
escape sequences.
 \n is replaced by the newline character

 \t is replaced by the tab character
 \r is replaced by the carriage-return character
 \b is replaced by the backspace character
 \\ is replaced by a single backslash (\)
Here's an example to clarify the how escape sequences actually works:
Example
Try this code »
var str1 = "The quick brown fox \n jumps over the lazy dog.";
document.write("<pre>" + str1 + "</pre>"); // Create line break
var str2 = "C:\Users\Downloads";

document.write(str2); // Prints C:UsersDownloads
var str3 = "C:\\Users\\Downloads";

document.write(str3); // Prints C:\Users\Downloads
Performing Operations on Strings
JavaScript provides several properties and methods to perform operations on string
values. Technically, only objects can have properties and methods. But in JavaScript
primitive data types can act like objects when you refer to them with the property
access notation (i.e. dot notation).
JavaScript making it possible by creating a temporary wrapper object for primitive

data types. This process is done automatically by the JavaScript interpreter in the
background.
Getting the Length of a String

The length property returns the length of the string, which is the number of
characters contained in the string. This includes the number of special characters as
well, such as \t or \n.
Example
Try this code »
var str1 = "This is a paragraph of text.";

document.write(str1.length); // Prints 28
var str2 = "This is a \n paragraph of text.";

document.write(str2.length); // Prints 30, because \n is only one
character
Note: Since length is a property, not a function, so don't use parentheses after it
like str.length(). Instead just write str.length, otherwise it will produce an error.
Finding a String Inside Another String
You can use the indexOf() method to find a substring or string within another string.
This method returns the index or position of the first occurrence of a specified string
within a string.
Example
Try this code »
var str = "If the facts don't fit the theory, change the facts.";
var pos = str.indexOf("facts");
alert(pos); // 0utputs: 7
Similarly, you can use the lastIndexOf() method to get the index or position of the
last occurrence of the specified string within a string, like this:
Example
Try this code »
var pos = str.lastIndexOf("facts");
alert(pos); // 0utputs: 46
Both the indexOf(), and the lastIndexOf() methods return -1 if the substring is not
found. Both methods also accept an optional integer parameter which specifies the
position within the string at which to start the search. Here's an example:
Example
Try this code »
// Searching forwards
var pos1 = str.indexOf("facts", 20);
alert(pos1); // 0utputs: 46
// Searching backwards
var pos2 = str.lastIndexOf("facts", 20);
Note: Characters in a string are indexed from left to right. The index of the first
character is 0, and the index of the last character of a string called myStr is myStr.length
- 1.
Searching for a Pattern Inside a String

You can use the search() method to search a particular piece of text or pattern inside
a string.
Like indexOf() method the search() method also returns the index of the first match,
and returns -1 if no matches were found, but unlike indexOf() method this method
can also take a regular expression as its argument to provide advanced search
capabilities.
Example
Try this code »
var str = "Color red looks brighter than color blue.";
// Case sensitive search

var pos1 = str.search("color");
// Case insensitive search using regexp

var pos2 = str.search(/color/i);
Note: The search() method does not support global searches; it ignores the g flag or
modifier (i.e. /pattern/g) of its regular expression argument.
You will learn more about regular expressions in the upcoming chapters.
Extracting a Substring from a String
You can use the slice() method to extract a part or substring from a string.
This method takes 2 parameters: start index (index at which to begin extraction), and
an optional end index (index before which to end extraction),
like str.slice(startIndex, endIndex).
The following example slices out a portion of a string from position 4 to position 15:
Example
Try this code »
var str = "The quick brown fox jumps over the lazy dog.";
var subStr = str.slice(4, 15);
document.write(subStr); // Prints: quick brown
You can also specify negative values. The negative value is treated as strLength +
startIndex, where strLength is the length of the string (i.e. str.length), for example,
if startIndex is -5 it is treated as strLength - 5. If startIndex is greater than or equal to
the length of the string, slice() method returns an empty string. Also, if
optional endIndex is not specified or omitted, the slice() method extracts to the end
of the string.
Example
Try this code »
document.write(str.slice(-28, -19)); // Prints: fox jumps
document.write(str.slice(31)); // Prints: the lazy dog.
You can also use the substring() method to extract a section of the given string
based on start and end indexes, like str.substring(startIndex, endIndex).
The substring() method is very similar to the slice() method, except few differences:
 If either argument is less than 0 or is NaN, it is treated as 0.

 If either argument is greater than str.length, it is treated as if it were str.length.
 If startIndex is greater than endIndex, then substring() will swap those two
arguments; for example, str.substring(5, 0) == str.substring(0, 5).
The following example will show you how this method actuallty works:
Example
Try this code »
document.write(str.substring(4, 15)); // Prints: quick brown
document.write(str.substring(9, 0)); // Prints: The quick
document.write(str.substring(-28, -19)); // Prints nothing
document.write(str.substring(31)); // Prints: the lazy dog.
Extracting a Fixed Number of Characters from a String

JavaScript also provide the substr() method which is similar to slice() with a subtle
difference, the second parameter specifies the number of characters to extract
instead of ending index, like str.substr(startIndex, length). If length is 0 or a negative
number, an empty string is returned. The following example demonstrates how it
works:
Example
Try this code »
document.write(str.substr(4, 15)); // Prints: quick brown fox
document.write(str.substr(-28, -19)); // Prints nothing
document.write(str.substr(-28, 9)); // Prints: fox jumps
document.write(str.substr(31)); // Prints: the lazy dog.
Replacing the Contents of a String
You can use the replace() method to replace part of a string with another string. This
method takes two parameters a regular expression to match or substring to be
replaced and a replacement string, like str.replace(regexp|substr, newSubstr) .
This replace() method returns a new string, it doesn't affect the original string that
will remain unchanged. The following example will show you how it works:
Example
Try this code »

var result = str.replace("color", "paint");
alert(result); // 0utputs: Color red looks brighter than paint
blue.
By default, the replace() method replaces only the first match, and it is case-sensitive.
To replace the substring within a string in a case-insensitive manner you can use
a regular expression (regexp) with an i modifier, as shown in the example below:
Example
Try this code »

var result = str.replace(/color/i, "paint");
alert(result); // 0utputs: paint red looks brighter than color
blue.
Similarly, to replace all the occurrences of a substring within a string in a case-

insensitive manner you can use the g modifier along with the i modifier, like this:
Example
Try this code »

var result = str.replace(/color/ig, "paint");
alert(result); // 0utputs: paint red looks brighter than paint
blue.
Converting a String to Uppercase or Lowercase
You can use the toUpperCase() method to convert a string to uppercase, like this:
Example
Try this code »
var str = "Hello World!";

var result = str.toUpperCase();
document.write(result); // Prints: HELLO WORLD!
Similarly, you can use the toLowerCase() to convert a string to lowercase, like this:
Example
Try this code »

var result = str.toLowerCase();
document.write(result); // Prints: hello world!
Concatenating Two or More Strings

You can concatenate or combine two or more strings using the + and += assignment
operators.
Example
Try this code »
var hello = "Hello";

var world = "World";
var greet = hello + " " + world;
document.write(greet); // Prints: Hello World
var wish = "Happy";

wish += " New Year";
document.write(wish); // Prints: Happy New Year
JavaScript also provides concat() method to combine strings, but it is not

recommended.
Accessing Individual Characters from a String

You can use the charAt() method to access individual character from a string,
like str.charAt(index). The index specified should be an integer
between 0 and str.length - 1. If no index is provided the first character in the string is
returned, since the default is 0.
Example
Try this code »

document.write(str.charAt()); // Prints: H
document.write(str.charAt(6)); // Prints: W
document.write(str.charAt(30)); // Prints nothing
document.write(str.charAt(str.length - 1)); // Prints: !
There is even better way to do this. Since ECMAScript 5, strings can be treated like
read-only arrays, and you can access individual characters from a string using square
brackets ([]) instead of the charAt() method, as demonstrated in the following
example:
Example
Try this code »

document.write(str[0]); // Prints: H
document.write(str[6]); // Prints: W
document.write(str[str.length - 1]); // Prints: !
document.write(str[30]); // Prints: undefined
Note: The only difference between accessing the character from a string using
the charAt() and square bracket ([]) is that if no character is
found, [] returns undefined, whereas the charAt() method returns an empty string.
Splitting a String into an Array

The split() method can be used to splits a string into an array of strings, using the
syntax str.split(separator, limit). The seperator argument specifies the string at
which each split should occur, whereas the limit arguments specifies the maximum
length of the array.
If separator argument is omitted or not found in the specified string, the entire string
is assigned to the first element of the array. The following example shows how it
works:
Example
Try this code »
var fruitsStr = "Apple, Banana, Mango, Orange, Papaya";

var fruitsArr = fruitsStr.split(", ");
document.write(fruitsArr[0]); // Prints: Apple
document.write(fruitsArr[2]); // Prints: Mango
document.write(fruitsArr[fruitsArr.length - 1]); // Prints: Papaya
// Loop through all the elements of the fruits array

for(var i in fruitsArr) {
document.write("<p>" + fruitsArr[i] + "</p>");
}
To split a string into an array of characters, specify an empty string ( "") as a
separator.
Example
Try this code »
var str = "INTERSTELLAR";

var strArr = str.split("");
document.write(strArr[0]); // Prints: I
document.write(strArr[1]); // Prints: N
document.write(strArr[strArr.length - 1]); // Prints: R
// Loop through all the elements of the characters array and print
them
for(var i in strArr) {
document.write("<br>" + strArr[i]);
}
You will learn about looping statements in detail JavaScript loops chapter.
Chapter 10
JavaScript Numbers
In this tutorial you will learn how to represent numbers in JavaScript.
Working with Numbers

JavaScript supports both integer and floating-point numbers that can be represented
in decimal, hexadecimal or octal notation. Unlike other languages, JavaScript does
not treat integer and floating-point numbers differently. All numbers in JavaScript
are represented as floating-point numbers. Here's an example demonstrating the
numbers in different formats:
Example
Try this code »
var x = 2; // integer number

var y = 3.14; // floating-point number
var z = 0xff; // hexadecimal number
Extra large numbers can be represented in exponential notation e.g. 6.02e+23 (same
as 6.02x1023).
Example
Try this code »
var x = 1.57e4; // same as 15700

var y = 4.25e+6; // same as 4.25e6 or 4250000
var z = 4.25e-6; // same as 0.00000425
Tip: The biggest safe integer in JavaScript is 9007199254740991 (2 -1),
53
whereas the
smallest safe integer is -9007199254740991 (-(253-1)).
Numbers can also be represented in hexadecimal notation (base 16). Hexadecimal

numbers are prefixed with 0x. They are commonly used to represent colors. Here's an
example:
Example
Try this code »
var x = 0xff; // same as 255

var y = 0xb4; // same as 180
var z = 0x00; // same as 0
Note: Integers can be represented in decimal, hexadecimal, and octal notation.

Floating-point numbers can be represented in decimal or exponential notation.
Operating on Numbers and Strings

As you know from the previous chapters, the + operator is used for both addition
and concatenation. So, performing mathematical operations on numbers and strings
may produce interesting results. The following example will show you what happens
when you add numbers and strings:
Example
Try this code »
var x = 10;
var y = 20;
var z = "30";
// Adding a number with a number, the result will be sum of numbers

console.log(x + y); // 30
// Adding a string with a string, the result will be string

concatenation
console.log(z + z); // '3030'
// Adding a number with a string, the result will be string
concatenation
console.log(x + z); // '1030'
// Adding a string with a number, the result will be string

concatenation
console.log(z + x); // '3010'
// Adding strings and numbers, the result will be string

concatenation
console.log("The result is: " + x + y); // 'The result is: 1020'
// Adding numbers and strings, calculation performed from left to

right
console.log(x + y + z); // 'The result is: 3030'
If you observe the above example carefully, you will find that the result of the last
operation is not just a simple string concatenation, because operators with the same
precedence are evaluated from left to right. That's why, since variables x and y both
are numbers they are added first then the result is concatenated with the variable z
which is a string, hence final result is 30 + "30" = "3030".
But, if you perform other mathematical operations like multiplication, division, or

subtraction the result will be different. JavaScript will automatically convert numeric
strings (i.e. strings containing numeric values) to numbers in all numeric operations,
as shown in the following example:
Example
Try this code »
var x = 10;
var y = 20;
var z = "30";
// Subtracting a number from a number

console.log(y - x); // 10
// Subtracting a number from a numeric string

console.log(z - x); // 20
// Multiplying a number with a numeric string

console.log(x * z); // 300
// Dividing a number with a numeric string
console.log(z / x); // 3
Moreover, if you try to multiply or divide numbers with strings that are not numeric,
it returns NaN (Not a Number). Also, if you use NaN in a mathematical operation, the
result will also be NaN.
Example
Try this code »
var x = 10;
var y = "foo";
var z = NaN;
// Subtracting a number from a non-numeric string

console.log(y - x); // NaN
// Multiplying a number with a non-numeric string

console.log(x * y); // NaN
// Dividing a number with a non-numeric string

console.log(x / y); // NaN
// Adding NaN to a number

console.log(x + z); // NaN
// Adding NaN to a string

console.log(y + z); // fooNaN
Representing Infinity
Infinity represents a number too big for JavaScript to handle. JavaScript has special
keyword Infinity and -Infinity to represent positive and negative infinity
respectively. For example, dividing by 0 returns Infinity, as demonstrated below:
Example
Try this code »
var x = 5 / 0;
console.log(x); // Infinity
var y = -5 / 0;
console.log(y); // -Infinity
Note: Infinity is a special value that represents the mathematical Infinity ∞, which is
greater than any number. The typeof operator return number for an Infinity value.
Avoiding Precision Problems

Sometimes, operations on floating-point numbers produce unexpected results, as
shown here:
Example
Try this code »
var x = 0.1 + 0.2;

console.log(x) // 0.30000000000000004
As you can see the result is 0.30000000000000004 rather than the expected 0.3. This
difference is called representation error or roundoff error. It occurs because JavaScript
and many other languages uses binary (base 2) form to represent decimal (base 10)
numbers internally. Unfortunately, most decimal fractions can't be represented
exactly in binary form, so small differences occur.
To avoid this problem you can use the solution something like this:
Example
Try this code »
var x = (0.1 * 10 + 0.2 * 10) / 10;

console.log(x) // 0.3
JavaScript round floating-point numbers to 17 digits, which is enough precision or

accuracy in most cases. Also, in JavaScript integers (numbers without fractional parts
or exponential notation) are accurate is up to 15 digits, as demonstrated in the
following example:
Example
Try this code »
var x = 999999999999999;
console.log(x); // 999999999999999
var y = 9999999999999999;
console.log(y); // 10000000000000000
Performing Operations on Numbers

JavaScript provides several properties and methods to perform operations on
number values. As you already know from the previous chapters, in JavaScript
primitive data types can act like objects when you refer to them with the property
access notation (i.e. dot notation).
In the following sections, we will look at the number methods that are most
commonly used.
Parsing Integers from Strings

The parseInt() method can be used to parse an integer from a string. This method is
particularly handy in situations when you are dealing with the values like CSS units
e.g. 50px, 12pt, etc. and you would like to extract the numeric value out of it.
If the parseInt() method encounters a character that is not numeric in the specified
base, it stops parsing and returns the integer value parsed up to that point. If the first
character cannot be converted into a number, the method will return NaN (not a
number).
Leading and trailing spaces are allowed. Here's an example:

Example
Try this code »
console.log(parseInt("3.14")); // 3
console.log(parseInt("50px")); // 50
console.log(parseInt("12pt")); // 12
console.log(parseInt("0xFF", 16)); // 255
console.log(parseInt("20 years")); // 20
console.log(parseInt("Year 2048")); // NaN
console.log(parseInt("10 12 2018")); // 10
Note: The parseInt() method truncates numbers to integer values, but it should not
be used as a substitute for Math.floor() method.
Similarly, you can use the parseFloat() method to parse floating-point number from a
string. The parseFloat() method works the same way as the parseInt() method, except
that it retrieves both integers and numbers with decimals.
Example
Try this code »
console.log(parseFloat("3.14")); // 3.14
console.log(parseFloat("50px")); // 50
console.log(parseFloat("1.6em")); // 1.6
console.log(parseFloat("124.5 lbs")); // 124.5
console.log(parseFloat("weight 124.5 lbs")); // NaN
console.log(parseFloat("6.5 acres")); // 6.5
Converting Numbers to Strings

The toString() method can be used to convert a number to its string equivalent. This
method optionally accepts an integer parameter in the range 2 through 36
specifying the base to use for representing numeric values. Here's an example:
Example
Try this code »
var x = 10;
var y = x.toString();
console.log(y); // '10'
console.log(typeof y); // string
console.log(typeof x); // number
console.log((12).toString()); // '12'
console.log((15.6).toString()); // '15.6'
console.log((6).toString(2)); // '110'
console.log((255).toString(16)); // 'ff'
Formatting Numbers in Exponential Notation

You can use the toExponential() method to format or represent a number in
exponential notation. This method optionally accepts an integer parameter
specifying the number of digits after the decimal point. Also, the returned value is a
string not a number. Here's an example:
Example
Try this code »
var x = 67.1234;
console.log(x.toExponential()); // 6.71234e+1
console.log(x.toExponential(6)); // 6.712340e+1
Note: Exponential notation is useful for representing numbers that are either very
large or very small in magnitude. For example, 62500000000 can be written as
625e+8 or 6.25e+10.
Formatting Numbers to Fixed Decimals
You can use the toFixed() method when you want to format a number with a fixed
number of digits to the right of the decimal point. The value returned by this method
is a string and it has exactly specified number of digits after the decimal point. If
the digits parameter is not specified or omitted, it is treated as 0. Here's an example:
Example
Try this code »
var x = 72.635;
console.log(x.toFixed()); // '73' (note rounding, no fractional

part)
console.log(x.toFixed(2)); // '72.64' (note rounding)
console.log(x.toFixed(1)); // '72.6'
var y = 6.25e+5;
console.log(y.toFixed(2)); // '625000.00'
var z = 1.58e-4;
console.log(z.toFixed(2)); // '0.00' (since 1.58e-4 is equal to
0.000158)
Formatting Numbers with Precision

If you want most appropriate form of a number, you can use
the toPrecision() method instead. This method returns a string representing the
number to the specified precision.
If precision is large enough to include all the digits of the integer part of number,
then the number is formatted using fixed-point notation. Otherwise, the number is
formatted using exponential notation. The precision parameter is optional. Here's an
example:
Example
Try this code »
var x = 6.235;
console.log(x.toPrecision()); // '6.235'
console.log(x.toPrecision(3)); // '6.24' (note rounding)
console.log(x.toPrecision(2)); // '6.2'
console.log(x.toPrecision(1)); // '6'
var y = 47.63;
console.log(y.toPrecision(2)); // '48' (note rounding, no
fractional part)
var z = 1234.5;
console.log(z.toPrecision(2)); // '1.2e+3'
Finding the Largest and Smallest Possible

Numbers
The Number object also has several properties associated with it.
The Number.MAX_VALUE and Number.MIN_VALUE properties of the Number object represent
the largest and smallest (closest to zero, not most negative) possible positive
numbers that JavaScript can handle. They are constants and their actual values
are 1.7976931348623157e+308, and 5e-324, respectively.
A number that falls outside of the range of possible numbers is represented by a

constant Number.POSITIVE_INFINITY or Number.NEGATIVE_INFINITY. Here's an example:
Example
Try this code »
var a = Number.MAX_VALUE;
console.log(a); // 1.7976931348623157e+308
var b = Number.MIN_VALUE;
console.log(b); // 5e-324
var x = Number.MAX_VALUE * 2;
console.log(x); // Infinity
var y = -1 * Number.MAX_VALUE * 2;
console.log(y); // -Infinity
Also, check out the JavaScript math operations chapter to learn about rounding
numbers, generating a random number, finding maximum or minimum value from a
set of numbers, etc.
Chapter 11
JavaScript If…Else Statements

In this tutorial you will learn how to write the decision-making code using
if...else...else if conditional statements in JavaScript.
JavaScript Conditional Statements

Like many other programming languages, JavaScript also allows you to write code
that perform different actions based on the results of a logical or comparative test
conditions at run time. This means, you can create test conditions in the form of
expressions that evaluates to either true or false and based on these results you can
perform certain actions.
There are several conditional statements in JavaScript that you can use to make
decisions:
 The if statement
 The if...else statement
 The if...else if....else statement
 The switch...case statement
We will discuss each of these statements in detail in the coming sections.
The if Statement
The if statement is used to execute a block of code only if the specified condition
evaluates to true. This is the simplest JavaScript's conditional statements and can be
written like:
if(condition) {
// Code to be executed
}
The following example will output "Have a nice weekend!" if the current day is Friday:
Example
Try this code »
var now = new Date();

var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6
if(dayOfWeek == 5) {
alert("Have a nice weekend!");
}
The if...else Statement

You can enhance the decision making capabilities of your JavaScript program by
providing an alternative choice through adding an else statement to the if statement.
The if...else statement allows you to execute one block of code if the specified
condition is evaluates to true and another block of code if it is evaluates to false. It
can be written, like this:
if(condition) {
// Code to be executed if condition is true
} else {
// Code to be executed if condition is false
}
The JavaScript code in the following example will output "Have a nice weekend!" if
the current day is Friday, otherwise it will output the text "Have a nice day!".
Example
Try this code »

} else {
alert("Have a nice day!");
}
The if...else if...else Statement

The if...else if...else a special statement that is used to combine
multiple if...else statements.
if(condition1) {
// Code to be executed if condition1 is true
} else if(condition2) {
// Code to be executed if the condition1 is false and condition2 is true
} else {
// Code to be executed if both condition1 and condition2 are false
}
The following example will output "Have a nice weekend!" if the current day is Friday,
and "Have a nice Sunday!" if the current day is Sunday, otherwise it will output "Have
a nice day!"
Example
Try this code »

} else if(dayOfWeek == 0) {
alert("Have a nice Sunday!");
} else {
alert("Have a nice day!");
}
You will learn about the JavaScript switch-case statement in the next chapter.
The Ternary Operator
The ternary operator provides a shorthand way of writing the if...else statements. The
ternary operator is represented by the question mark (?) symbol and it takes three
operands: a condition to check, a result for true, and a result for false. Its basic syntax
is:
var result = (condition) ? value1 : value2
If the condition is evaluated to true the value1 will be returned, otherwise value2 will
be returned. To understand how this operator works, consider the following
examples:
Example
Try this code »
var userType;
var age = 21;
if(age < 18) {
userType = 'Child';
} else {
userType = 'Adult';
}
alert(userType); // Displays Adult
Using the ternary operator the same code could be written in a more compact way:
Example
Try this code »
var age = 21;

var userType = age < 18 ? 'Child' : 'Adult';
alert(userType); // Displays Adult
As you can see in the above example, since the specified condition evaluated to false
the value on the right side of the colon (:) is returned, which is the string 'Adult'.
Tip: Code written using the ternary operator can be difficult to read sometimes.
However, it provides a great way to write compact if-else statements.
Chapter 12
JavaScript Switch...Case Statements

In this tutorial you will learn how to use the switch...case statement to test or
evaluate an expression with different values in JavaScript.
Using the Switch...Case Statement

The switch..case statement is an alternative to the if...else if...else statement, which
does almost the same thing. The switch...case statement tests a variable or expression
against a series of values until it finds a match, and then executes the block of code
corresponding to that match. It's syntax is:
switch(x){
case value1:
// Code to be executed if x === value1
break;
case value2:
// Code to be executed if x === value2
break;
...
default:
// Code to be executed if x is different from all values
}
Consider the following example, which display the name of the day of the week.
Example
Try this code »
var d = new Date();

switch(d.getDay()) {
case 0:
alert("Today is Sunday.");
break;
case 1:
alert("Today is Monday.");
break;
case 2:
alert("Today is Tuesday.");
break;
case 3:
alert("Today is Wednesday.");
break;
case 4:
alert("Today is Thursday.");
break;
case 5:
alert("Today is Friday.");
break;
case 6:
alert("Today is Saturday.");
break;
default:
alert("No information available for that day.");
break;
}
The getDay() method returns the weekday as a number from 0 and 6, where 0
represents Sunday. See the JavaScript date and time chapter to learn more about
date methods.
Note: In a switch...case statement, the value of the expression or variable is

compared against the case value using the strict equality operator ( ===). That means
if x = "0", it doesn't match case 0:, because their data types are not equal.
The switch...case statement differs from the if...else statement in one important way.
The switch statement executes line by line (i.e. statement by statement) and once
JavaScript finds a case clause that evaluates to true, it's not only executes the code
corresponding to that case clause, but also executes all the subsequent case clauses
till the end of the switch block automatically.
To prevent this you must include a break statement after each case (as you can see
in the above example). The break statement tells the JavaScript interpreter to break
out of the switch...case statement block once it executes the code associated with the
first true case.
The break statement is however not required for the case or default clause, when it
appears at last in a switch statement. Although, it a good programming practice to
terminate the last case, or default clause in a switch statement with a break. It
prevents a possible programming error later if another case statement is added to
the switch statement.
The default clause is optional, which specify the actions to be performed if

no case matches the switch expression. The default clause does not have to be the
last clause to appear in a switch statement. Here's an example, where default is not
the last clause.
Example
Try this code »
var d = new Date();
default:
alert("Looking forward to the weekend.");
break;
case 6:
alert("Today is Saturday.");
break;
case 0:
alert("Today is Sunday.");
}
Multiple Cases Sharing Same Action

Each case value must be unique within a switch statement. However, different cases
don't need to have a unique action. Several cases can share the same action, as
shown here:
Example
Try this code »
var d = new Date();
case 1:
case 2:
case 3:
case 4:
case 5:
alert("It is a weekday.");
break;
case 0:
case 6:
alert("It is a weekend day.");
break;
default:
alert("Enjoy every day of your life.");
}
Chapter 13
JavaScript Arrays
In this tutorial you will learn how to create and manipulate arrays in JavaScript.
What is an Array
Arrays are complex variables that allow us to store more than one value or a group
of values under a single variable name. JavaScript arrays can store any valid value,
including strings, numbers, objects, functions, and even other arrays, thus making it
possible to create more complex data structures such as an array of objects or an
array of arrays.
Let's suppose you want to store the name of colors in your JavaScript code. Storing
the color names one by one in a variable could look something like this:
Example
Try this code »
var color1 = "Red";

var color2 = "Green";
var color3 = "Blue";
But what happens if you need to store the state or city names of a country in
variables and this time this not just three may be hundred. It is quite hard and boring
to store each of them in a separate variable. Also, using so many variables
simultaneously and keeping track of them all will be a very difficult task. And here
array comes into play. Arrays solve this problem by providing an ordered structure
for storing multiple values or a group of values.
Creating an Array
The simplest way to create an array in JavaScript is enclosing a comma-separated list
of values in square brackets ([]), as shown in the following syntax:
var myArray = [element0, element1, ..., elementN];
Array can also be created using the Array() constructor as shown in the following
syntax. However, for the sake of simplicity previous syntax is recommended.
var myArray = new Array(element0, element1, ..., elementN);
Here are some examples of arrays created using array literal syntax:
Example
Try this code »
var colors = ["Red", "Green", "Blue"];

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];
Note: An array is an ordered collection of values. Each value in an array is called an

element, and each element has a numeric position in an array, known as its index.
Accessing the Elements of an Array

Array elements can be accessed by their index using the square bracket notation. An
index is a number that represents an element's position in an array.
Array indexes are zero-based. This means that the first item of an array is stored at
index 0, not 1, the second item is stored at index 1, and so on. Array indexes start at
0 and go up to the number of elements minus 1. So, array of five elements would
have indexes from 0 to 4.
The following example will show you how to get individual array element by their
index.
Example
Try this code »
document.write(fruits[0]); // Prints: Apple

document.write(fruits[1]); // Prints: Banana
document.write(fruits[2]); // Prints: Mango
document.write(fruits[fruits.length - 1]); // Prints: Papaya
Note: In JavaScript, arrays are really just a special type of objects which has numeric
indexes as keys. The typeof operator will return "object" for arrays.
Getting the Length of an Array

The length property returns the length of an array, which is the total number of
elements contained in the array. Array length is always greater than the index of any
of its element.
Example
Try this code »

document.write(fruits.length); // Prints: 5
Looping Through Array Elements

You can use for loop to access each element of an array in sequential order, like this:
Example
Try this code »

// Iterates over array elements
for(var i = 0; i < fruits.length; i++) {
document.write(fruits[i] + "<br>"); // Print array element
}
ECMAScript 6 has introduced a simpler way to iterate over array element, which
is for-of loop. In this loop you don't have to initialize and keep track of the loop
counter variable (i).
Here's the same example rewritten using the for-of loop:
Example
Try this code »
// Iterates over array elements

for(var fruit of fruits) {
document.write(fruit + "<br>"); // Print array element
}
You can also iterate over the array elements using for-in loop, like this:
Example
Try this code »
// Loop through all the elements in the array

for(var i in fruits) {
document.write(fruits[i] + "<br>");
}
Note: The for-in loop should not be used to iterate over an array where the index
order is important. The for-in loop is optimized for iterating over object's properties,
you should better use a for loop with a numeric index or for-of loop.
Adding New Elements to an Array
To add a new element at the end of an array, simply use the push() method, like this:
Example
Try this code »

colors.push("Yellow");
document.write(colors); // Prints: Red,Green,Blue,Yellow

document.write(colors.length); // Prints: 4
Similarly, to add a new element at the beginning of an array use
the unshift() method, like this:
Example
Try this code »

colors.unshift("Yellow");
document.write(colors); // Prints: Yellow,Red,Green,Blue

You can also add multiple elements at once using the push() and unshift() methods,
like this:
Example
Try this code »

colors.push("Pink", "Voilet");
colors.unshift("Yellow", "Grey");
document.write(colors); // Prints:
Yellow,Grey,Red,Green,Blue,Pink,Voilet
Removing Elements from an Array
To remove the last element from an array you can use the pop() method. This
method returns the value that was popped out. Here's an example:
Example
Try this code »

var last = colors.pop();
document.write(last); // Prints: Blue

Similarly, you can remove the first element from an array using the shift() method.
This method also returns the value that was shifted out. Here's an example:
Example
Try this code »

var first = colors.shift();
document.write(first); // Prints: Red

Tip: The push() and pop() methods runs faster than unshift() and shift().
Because push() and pop() methods simply add and remove elements at the end of an
array therefore the elements do not move, whereas unshift() and shift() add and
remove elements at the beginning of the array that require re-indexing of whole
array.
Adding or Removing Elements at Any Position
The splice() method is a very versatile array method that allows you to add or
remove elements from any index, using the syntax arr.splice(startIndex, deleteCount,
elem1, ..., elemN).
This method takes three parameters: the first parameter is the index at which to start
splicing the array, it is required; the second parameter is the number of elements to
remove (use 0 if you don't want to remove any elements), it is optional; and the third
parameter is a set of replacement elements, it is also optional. The following example
shows how it works:
Example
Try this code »

var removed = colors.splice(0,1); // Remove the first element
document.write(colors); // Prints: Green,Blue

document.write(removed); // Prints: Red (one item array)
document.write(removed.length); // Prints: 1
removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two

items at position one
document.write(colors); // Prints: Green,Pink,Yellow,Blue
document.write(removed); // Empty array
removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two

values, remove one
document.write(colors); //Prints: Green,Purple,Voilet,Yellow,Blue
document.write(removed); // Prints: Pink (one item array)
The splice() method returns an array of the deleted elements, or an empty array if no
elements were deleted, as you can see in the above example. If the second argument
is omitted, all elements from the start to the end of the array are removed.
Unlike slice() and concat() methods, the splice() method modifies the array on
which it is called on.
Creating a String from an Array
There may be situations where you simply want to create a string by joining the
elements of an array. To do this you can use the join() method. This method takes
an optional parameter which is a separator string that is added in between each
element. If you omit the separator, then JavaScript will use comma (,) by default. The
following example shows how it works:
Example
Try this code »
document.write(colors.join()); // Prints: Red,Green,Blue

document.write(colors.join("")); // Prints: RedGreenBlue
document.write(colors.join("-")); // Prints: Red-Green-Blue
document.write(colors.join(", ")); // Prints: Red, Green, Blue
You can also convert an array to a comma-separated string using the toString(). This
method does not accept the separator parameter like join(). Here's an example:
Example
Try this code »

document.write(colors.toString()); // Prints: Red,Green,Blue
Extracting a Portion of an Array

If you want to extract out a portion of an array (i.e. subarray) but keep the original
array intact you can use the slice() method. This method takes 2 parameters: start
index (index at which to begin extraction), and an optional end index (index before
which to end extraction), like arr.slice(startIndex, endIndex). Here's an example:
Example
Try this code »

var subarr = fruits.slice(1, 3);
document.write(subarr); // Prints: Banana,Mango
If endIndex parameter is omitted, all elements to the end of the array are extracted.
You can also specify negative indexes or offsets —in that case the slice() method
extract the elements from the end of an array, rather then the begining. For example:
Example
Try this code »
document.write(fruits.slice(2)); // Prints: Mango,Orange,Papaya

document.write(fruits.slice(-2)); // Prints: Orange,Papaya
document.write(fruits.slice(2, -1)); // Prints: Mango,Orange
Merging Two or More Arrays

The concat() method can be used to merge or combine two or more arrays. This
method does not change the existing arrays, instead it returns a new array. For
example:
Example
Try this code »
var pets = ["Cat", "Dog", "Parrot"];

var wilds = ["Tiger", "Wolf", "Zebra"];
// Creating new array by combining pets and wilds arrays

var animals = pets.concat(wilds);
document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra
The concat() method can take any number of array arguments, so you can create an
array from any number of other arrays, as shown in the following example:
Example
Try this code »
var pets = ["Cat", "Dog", "Parrot"];

var wilds = ["Tiger", "Wolf", "Zebra"];
var bugs = ["Ant", "Bee"];
// Creating new array by combining pets, wilds and bugs arrays

var animals = pets.concat(wilds, bugs);
document.write(animals); // Prints:
Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee
Searching Through an Array

If you want to search an array for a specific value, you can simply use
the indexOf() and lastIndexOf(). If the value is found, both methods return an index
representing the array element. If the value is not found, -1 is returned.
The indexOf() method returns the first one found, whereas the lastIndexOf() returns
the last one found.
Example
Try this code »
document.write(fruits.indexOf("Apple")); // Prints: 0
document.write(fruits.indexOf("Banana")); // Prints: 1
document.write(fruits.indexOf("Pineapple")); // Prints: -1
Both methods also accept an optional integer parameter from index which specifies
the index within the array at which to start the search. Here's an example:
Example
Try this code »
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
// Searching forwards, starting at from- index

document.write(arr.indexOf(1, 2)); // Prints: 3
// Searching backwards, starting at from index

document.write(arr.lastIndexOf(1, 2)); // Prints: 0
You can also use includes() method to find out whether an array includes a certain
element or not. This method takes the same parameters
as indexOf() and lastIndexOf() methods, but it returns true or false instead of index
number. For example:
Example
Try this code »
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
document.write(arr.includes(1)); // Prints: true

document.write(arr.includes(6)); // Prints: false
document.write(arr.includes(1, 2)); // Prints: true
document.write(arr.includes(3, 4)); // Prints: false
If you want to search an array based on certain condition then you can use the
JavaScript find() method which is newly introduced in ES6. This method returns the
value of the first element in the array that satisfies the provided testing function.
Otherwise it return undefined.
Example
Try this code »
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
var result = arr.find(function(element) {

return element > 4;
});
document.write(result); // Prints: 5
There is one more method similar to find() is findIndex() method, which returns the
index of a found element in the array instead of its value. For example:
Example
Try this code »
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
var result = arr.findIndex(function(element) {

return element > 6;
});
document.write(result); // Prints: 8
The find() method only looks for the first element that satisfies the provided testing
function. However, if you want to find out all the matched elements you can use
the filter() method.
The filter() method creates a new array with all the elements that successfully
passes the given test. The following example will show you how this actually works:
Example
Try this code »
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7];
var result = arr.filter(function(element) {

return element > 4;
});
document.write(result); // Prints: 5,7
document.write(result.length); // Prints: 2
Chapter 14
JavaScript Sorting Arrays

In this tutorial you will learn how to sort array elements in JavaScript.
Sorting an Array
Sorting is a common task when working with arrays. It would be used, for instance, if
you want to display the city or county names in alphabetical order.
The JavaScript Array object has a built-in method sort() for sorting array elements in
alphabetical order. The following example demonstrates how it works:
Example
Try this code »
var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];

var sorted = fruits.sort();
alert(fruits); // Outputs: Apple,Banana,Mango,Orange,Papaya

alert(sorted); // Outputs: Apple,Banana,Mango,Orange,Papaya
Reversing an Array
You can use the reverse() method to reverse the order of the elements of an array.
This method reverses an array in such a way that the first array element becomes the
last, and the last array element becomes the first. Here's an example:
Example
Try this code »
var counts = ["one", "two", "three", "four", "five"];

var reversed = counts.reverse();
alert(counts); // Outputs: five,four,three,two,one

alert(reversed); // Output: five,four,three,two,one
Note: The sort() and reverse() method modifies the original array and return a
reference to the same array, as you can see in the above examples.
Sorting Numeric Arrays

The sort() method may produce unexpected result when it is applied on the numeric
arrays (i.e. arrays containing numeric values). For instance:
Example
Try this code »
var numbers = [5, 20, 10, 75, 50, 100];

numbers.sort(); // Sorts numbers array
alert(numbers); // Outputs: 10,100,20,5,50,75
As you can see, the result is different from what we've expected. It happens because,
the sort() method sorts the numeric array elements by converting them to strings
(i.e. 20 becomes "20", 100 becomes "100", and so on), and since the first character of
string "20" (i.e. "2") comes after the first character of string "100" (i.e. "1"), that's why
the value 20 is sorted after the 100.
To fix this sorting problem with numeric array, you can pass a compare function, like
this:
Example
Try this code »
var numbers = [5, 20, 10, 75, 50, 100];
// Sorting an array using compare function

numbers.sort(function(a, b) {
return a - b;
});
alert(numbers); // Outputs: 5,10,20,50,75,100
As you can see, this time we've got the correct result. Let's see how it works.
When compare function is specified, array elements are sorted according to the
return value of the compare function. For example, when comparing a and b:
 If the compare function returns a value less than 0, then a comes first.
 If the compare function returns a value greater than 0, then b comes first.
 If the compare function returns 0, a and b remain unchanged with respect to each
other, but sorted with respect to all other elements.
Hence, since 5 - 20 = -15 which is less than 0, therefore 5 comes first, similarly 20 - 10
= 10 which is greater than 0, therefore 10 comes before 20, likewise 20 - 75 = -
55 which is less than 0, so 20 comes before 75, similarly 50 comes before 75, and so
on.
Finding the Maximum and Minimum Value in an

Array
You can use the apply() method in combination with the Math.max() and Math.min() to
find the maximum and minimum value inside an array, like this:
Example
Try this code »
var numbers = [3, -7, 10, 8, 15, 2];
// Defining function to find maximum value

function findMax(array) {
return Math.max.apply(null, array);
}
// Defining function to find minimum value

function findMin(array) {
return Math.min.apply(null, array);
}
alert(findMax(numbers)); // Outputs: 15
alert(findMin(numbers)); // Outputs: -7
The apply() method provides a convenient way to pass array values as arguments to
a function that accepts multiple arguments in an array-like manner, but not an array
(e.g. Math.max() and Math.min() methods here). So, the resulting
statement Math.max.apply(null, numbers) in the example above is equivalent to
the Math.max(3, -7, 10, 8, 15, 2).
Sorting an Array of Objects

The sort() method can also be used for sorting object arrays using the compare
function.
The following example will show you how to sort an array of objects by property
values:
Example
Try this code »
var persons = [
{ name: "Harry", age: 14 },
{ name: "Ethan", age: 30 },
{ name: "Peter", age: 21 },
{ name: "Clark", age: 42 },
{ name: "Alice", age: 16 }
];
// Sort by age
persons.sort(function (a, b) {
return a.age - b.age;
});
console.log(persons);
// Sort by name
persons.sort(function(a, b) {
var x = a.name.toLowerCase(); // ignore upper and lowercase
var y = b.name.toLowerCase(); // ignore upper and lowercase
if(x < y) {
return -1;
}
if(x > y) {
return 1;
}
// names must be equal
return 0;
});
console.log(persons);
Chapter 15
JavaScript Loops
In this tutorial you will learn how to repeat a series of actions using loops in
JavaScript.
Different Types of Loops in JavaScript

Loops are used to execute the same block of code again and again, as long as a
certain condition is met. The basic idea behind a loop is to automate the repetitive
tasks within a program to save the time and effort. JavaScript now supports five
different types of loops:
 while — loops through a block of code as long as the condition specified evaluates
to true.
 do…while — loops through a block of code once; then the condition is evaluated. If
the condition is true, the statement is repeated as long as the specified condition is
true.
 for — loops through a block of code until the counter reaches a specified number.
 for…in — loops through the properties of an object.
 for…of — loops over iterable objects such as arrays, strings, etc.
In the following sections, we will discuss each of these loop statements in detail.
The while Loop

This is the simplest looping statement provided by JavaScript.
The while loop loops through a block of code as long as the specified condition
evaluates to true. As soon as the condition fails, the loop is stopped. The generic
syntax of the while loop is:
while(condition) {
}
The following example defines a loop that will continue to run as long as the
variable i is less than or equal to 5. The variable i will increase by 1 each time the
loop runs:
Example
Try this code »
var i = 1;
while(i <= 5) {
document.write("<p>The number is " + i + "</p>");
i++;
}
Note: Make sure that the condition specified in your loop eventually goes false.
Otherwise, the loop will never stop iterating which is known as infinite loop. A
common mistake is to forget to increment the counter variable (variable i in our
case).
The do...while Loop

The do-while loop is a variant of the while loop, which evaluates the condition at the
end of each loop iteration. With a do-while loop the block of code executed once, and
then the condition is evaluated, if the condition is true, the statement is repeated as
long as the specified condition evaluated to is true. The generic syntax of the do-
while loop is:
do {
}
while(condition);
The JavaScript code in the following example defines a loop that starts with i=1. It will
then print the output and increase the value of variable i by 1. After that the
condition is evaluated, and the loop will continue to run as long as the variable i is
less than, or equal to 5.
Example
Try this code »
var i = 1;
do {
i++;
}
while(i <= 5);
Difference Between while and do...while Loop

The while loop differs from the do-while loop in one important way — with
a while loop, the condition to be evaluated is tested at the beginning of each loop
iteration, so if the conditional expression evaluates to false, the loop will never be
executed.
With a do-while loop, on the other hand, the loop will always be executed once even
if the conditional expression evaluates to false, because unlike the while loop, the
condition is evaluated at the end of the loop iteration rather than the beginning.
The for Loop

The for loop repeats a block of code as long as a certain condition is met. It is
typically used to execute a block of code for certain number of times. Its syntax is:
for(initialization; condition; increment) {
}
The parameters of the for loop statement have following meanings:

 initialization — it is used to initialize the counter variables, and evaluated once
unconditionally before the first execution of the body of the loop.
 condition — it is evaluated at the beginning of each iteration. If it evaluates to true,
the loop statements execute. If it evaluates to false, the execution of the loop ends.
 increment — it updates the loop counter with a new value each time the loop runs.
The following example defines a loop that starts with i=1. The loop will continued
until the value of variable i is less than or equal to 5. The variable i will increase by 1
each time the loop runs:
Example
Try this code »
for(var i=1; i<=5; i++) {

}
The for loop is particularly useful for iterating over an array. The following example
will show you how to print each item or element of the JavaScript array.
Example
Try this code »
// An array with some elements


for(var i=0; i<fruits.length; i++) {
document.write("<p>" + fruits[i] + "</p>");
}
The for...in Loop
The for-in loop is a special type of a loop that iterates over the properties of
an object, or the elements of an array. The generic syntax of the for-in loop is:
for(variable in object) {
}
The loop counter i.e. variable in the for-in loop is a string, not a number. It contains
the name of current property or the index of the current array element.
The following example will show you how to loop through all properties of a
JavaScript object.
Example
Try this code »
// An object with some properties

var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// Loop through all the properties in the object

for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
Similarly, you can loop through the elements of an array, like this:
Example
Try this code »
// An array with some elements


for(var i in fruits) {
document.write("<p>" + fruits[i] + "</p>");
}
Note: The for-in loop should not be used to iterate over an array where the index
order is important. You should better use a for loop with a numeric index.
The for...of Loop ES6
ES6 introduces a new for-of loop which allows us to iterate over arrays or other
iterable objects (e.g. strings) very easily. Also, the code inside the loop is executed for
each element of the iterable object.
The following example will show you how to loop through arrays and strings using
this loop.
Example
Try this code »
// Iterating over array

let letters = ["a", "b", "c", "d", "e", "f"];
for(let letter of letters) {

console.log(letter); // a,b,c,d,e,f
}
// Iterating over string

let greet = "Hello World!";
for(let character of greet) {

console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}
To learn about other ES6 features, please check out the JavaScript ES6
features chapter.
Note: The for...of loop doesn't work with objects because they are not iterable. If
you want to iterate over the properties of an object you can use the for-in loop.
Chapter 16
JavaScript Functions
In this tutorial you will learn how to define and call a function in JavaScript.
What is Function?
A function is a group of statements that perform specific tasks and can be kept and
maintained separately form main program. Functions provide a way to create
reusable code packages which are more portable and easier to debug. Here are
some advantages of using functions:
 Functions reduces the repetition of code within a program — Function allows

you to extract commonly used block of code into a single component. Now you can
perform the same task by calling this function wherever you want within your script
without having to copy and paste the same block of code again and again.
 Functions makes the code much easier to maintain — Since a function created
once can be used many times, so any changes made inside a function automatically
implemented at all the places without touching the several files.
 Functions makes it easier to eliminate the errors — When the program is
subdivided into functions, if any error occur you know exactly what function causing
the error and where to find it. Therefore, fixing errors becomes much easier.
The following section will show you how to define and call functions in your scripts.
Defining and Calling a Function

The declaration of a function start with the function keyword, followed by the name
of the function you want to create, followed by parentheses i.e. () and finally place
your function's code between curly brackets {}. Here's the basic syntax for declaring
a function:
function functionName() {
}
Here is a simple example of a function, that will show a hello message:
Example
Try this code »
// Defining function
alert("Hello, welcome to this website!");
}
// Calling function
sayHello(); // 0utputs: Hello, welcome to this website!
Once a function is defined it can be called (invoked) from anywhere in the document,
by typing its name followed by a set of parentheses, like sayHello() in the example
above.
Note: A function name must start with a letter or underscore character not with a
number, optionally followed by the more letters, numbers, or underscore characters.
Function names are case sensitive, just like variable names.
Adding Parameters to Functions

You can specify parameters when you define your function to accept input values at
run time. The parameters work like placeholder variables within a function; they're
replaced at run time by the values (known as argument) provided to the function at
the time of invocation.
Parameters are set on the first line of the function inside the set of parentheses, like
this:
function functionName(parameter1, parameter2, parameter3) {
}
The displaySum() function in the following example takes two numbers as
arguments, simply add them together and then display the result in the browser.
Example
Try this code »
function displaySum(num1, num2) {
var total = num1 + num2;
alert(total);
}
// Calling function
displaySum(6, 20); // 0utputs: 26
displaySum(-5, 17); // 0utputs: 12
You can define as many parameters as you like. However for each parameter you
specify, a corresponding argument needs to be passed to the function when it is
called, otherwise its value becomes undefined. Let's consider the following example:
Example
Try this code »
function showFullname(firstName, lastName) {
alert(firstName + " " + lastName);
}
// Calling function
showFullname("Clark", "Kent"); // 0utputs: Clark Kent
showFullname("John"); // 0utputs: John undefined
Default Values for Function Parameters ES6

With ES6, now you can specify default values to the function parameters. This means
that if no arguments are provided to function when it is called these default
parameters values will be used. This is one of the most awaited features in JavaScript.
Here's an example:
Example
Try this code »
function sayHello(name = 'Guest') {

alert('Hello, ' + name);
}
sayHello(); // 0utputs: Hello, Guest

sayHello('John'); // 0utputs: Hello, John
While prior to ES6, to achieve the same we had to write something like this:
Example
Try this code »
function sayHello(name) {
var name = name || 'Guest';
alert('Hello, ' + name);
}
sayHello(); // 0utputs: Hello, Guest

sayHello('John'); // 0utputs: Hello, John
To learn about other ES6 features, please check out the JavaScript ES6
features chapter.
Returning Values from a Function

A function can return a value back to the script that called the function as a result
using the return statement. The value may be of any type, including arrays and
objects.
The return statement usually placed as the last line of the function before the
closing curly bracket and ends it with a semicolon, as shown in the following
example.
Example
Try this code »
function getSum(num1, num2) {
return total;
}
// Displaying returned value

alert(getSum(6, 20)); // 0utputs: 26
alert(getSum(-5, 17)); // 0utputs: 12
A function can not return multiple values. However, you can obtain similar results by
returning an array of values, as demonstrated in the following example.
Example
Try this code »
function divideNumbers(dividend, divisor){
var quotient = dividend / divisor;
var arr = [dividend, divisor, quotient];
return arr;
}
// Store returned value in a variable

var all = divideNumbers(10, 2);
// Displaying individual values

alert(all[0]); // 0utputs: 10
Working with Function Expressions

The syntax that we've used before to create functions is called function declaration.
There is another syntax for creating a function that is called a function expression.
Example
Try this code »
// Function Declaration
function getSum(num1, num2) {
return total;
}
// Function Expression
var getSum = function(num1, num2) {
return total;
};
Once function expression has been stored in a variable, the variable can be used as a
function:
Example
Try this code »
var getSum = function(num1, num2) {

return total;
};
alert(getSum(5, 10)); // 0utputs: 15
var sum = getSum(7, 25);

alert(sum); // 0utputs: 32
Note: There is no need to put a semicolon after the closing curly bracket in a
function declaration. But function expressions, on the other hand, should always end
with a semicolon.
Tip: In JavaScript functions can be stored in variables, passed into other functions as
arguments, passed out of functions as return values, and constructed at run-time.
The syntax of the function declaration and function expression looks very similar, but
they differ in the way they are evaluated, check out the following example:
Example
Try this code »
declaration(); // Outputs: Hi, I'm a function declaration!

function declaration() {
alert("Hi, I'm a function declaration!");
}
expression(); // Uncaught TypeError: undefined is not a function

var expression = function() {
alert("Hi, I'm a function expression!");
};
As you can see in the above example, the function expression threw an exception
when it was invoked before it is defined, but the function declaration executed
successfully.
JavaScript parse declaration function before the program executes. Therefore, it

doesn't matter if the program invokes the function before it is defined because
JavaScript has hoisted the function to the top of the current scope behind the
scenes. The function expression is not evaluated until it is assigned to a variable;
therefore, it is still undefined when invoked.
ES6 has introduced even shorter syntax for writing function expression which is
called arrow function, please check out the JavaScript ES6 features chapter to learn
more about it.
Understanding the Variable Scope

However, you can declare the variables anywhere in JavaScript. But, the location of
the declaration determines the extent of a variable's availability within the JavaScript
program i.e. where the variable can be used or accessed. This accessibility is known
as variable scope.
By default, variables declared within a function have local scope that means they
cannot be viewed or manipulated from outside of that function, as shown in the
example below:
Example
Try this code »
function greetWorld() {
alert(greet);
}
greetWorld(); // Outputs: Hello World!
alert(greet); // Uncaught ReferenceError: greet is not defined
However, any variables declared in a program outside of a function has global

scope i.e. it will be available to all script, whether that script is inside a function or
outside. Here's an example:
Example
Try this code »
function greetWorld() {
alert(greet);
}
greetWorld(); // Outputs: Hello World!
alert(greet); // Outputs: Hello World!

Chapter 17
JavaScript Objects
In this tutorial you will learn how to create and use objects in JavaScript.
What is an Object?
JavaScript is an object-based language and in JavaScript almost everything is an
object or acts like an object. So, to work with JavaScript effectively and efficiently we
need to understand how objects work as well as how to create your own objects and
use them.
A JavaScript object is just a collection of named values. These named values are
usually referred to as properties of the object. If you remember from the JavaScript
arrays chapter, an array is a collection of values, where each value has an index (a
numeric key) that starts from zero and increments by one for each value. An object is
similar to an array, but the difference is that you define the keys yourself, such as
name, age, gender, and so on. In the following sections we'll learn about objects in
detail.
Creating Objects
An object can be created with curly brackets {} with an optional list of properties. A
property is a "key: value" pair, where the key (or property name) is always a string,
and value (or property value) can be any data type, like strings, numbers, Booleans or
complex data type like arrays, functions, and other objects. Additionally, properties
with functions as their values are often called methods to distinguish them from
other properties. A typical JavaScript object may look like this:
Example
Try this code »
var person = {
name: "Peter",
age: 28,
gender: "Male",
displayName: function() {
alert(this.name);
}
};
The above example creates an object called person that has three properties name, age,
and gender and one method displayName(). The displayName() method displays the
value of this.name, which resolves to person.name. This is the easiest and preferred way
to create a new object in JavaScript, which is known as object literals syntax.
The property names generally do not need to be quoted unless they are reserved
words, or if they contain spaces or special characters (anything other than letters,
numbers, and the _ and $ characters), or if they start with a number, as shown in the
following example:
Example
Try this code »
var person = {
"first name": "Peter",
"current age": 28,
gender: "Male"
};
Note: Since ECMAScript 5, reserved words can be used as object's property names
without quoting. However, you should avoid doing this for better compatibility.
Accessing Object's Properties
To access or get the value of a property, you can use the dot (.), or square bracket
([]) notation, as demonstrated in the following example:
Example
Try this code »
var book = {
"name": "Harry Potter and the Goblet of Fire",
"author": "J. K. Rowling",
"year": 2000
};
// Dot notation
document.write(book.author); // Prints: J. K. Rowling
// Bracket notation
document.write(book["year"]); // Prints: 2000
The dot notation is easier to read and write, but it cannot always be used. If the
name of the property is not valid (i.e. if it contains spaces or special characters), you
cannot use the dot notation; you'll have to use bracket notation, as shown in the
following example:
Example
Try this code »
var book = {
name: "Harry Potter and the Goblet of Fire",
author: "J. K. Rowling",
"publication date": "8 July 2000"
};
// Bracket notation
document.write(book["publication date"]); // Prints: 8 July 2000
The square bracket notation offers much more flexibility than dot notation. It also
allows you to specify property names as variables instead of just string literals, as
shown in the example below:
Example
Try this code »
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
var key = prompt("Enter any property name to get its value");

alert(person[key]); // Outputs: Peter (if enter "name")
Looping Through Object's Properties

You can iterate through the key-value pairs of an object using the for...in loop. This
loop is specially optimized for iterating over object's properties. Here's an example:
Example
Try this code »
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
// Iterating over object properties

for(var i in person) {
document.write(person[i] + "<br>"); // Prints: name, age and
gender
}
Setting Object's Properties
Similarly, you can set the new properties or update the existing one using the dot ( .)
or bracket ([]) notation, as demonstrated in the following example:
Example
Try this code »
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
// Setting a new property

person.country = "United States";
document.write(person.country); // Prints: United States
person["email"] = "peterparker@mail.com";
document.write(person.email); // Prints: peterparker@mail.com
// Updating existing property

person.age = 30;
document.write(person.age); // Prints: 30
person["name"] = "Peter Parker";

document.write(person.name); // Prints: Peter Parker
Deleting Object's Properties

The delete operator can be used to completely remove properties from an object.
Deleting is the only way to actually remove a property from an object. Setting the
property to undefined or null only changes the value of the property. It does not
remove property from the object.
Example
Try this code »
var person = {
name: "Peter",
age: 28,
gender: "Male",
alert(this.name);
}
};
// Deleting property
delete person.age;
alert(person.age); // Outputs: undefined
Note: The delete operator only removes an object property or array element. It has
no effect on variables or declared functions. However, you should
avoid delete operator for deleting an array element, as it doesn't change the array's
length, it just leaves a hole in the array.
Calling Object's Methods

You can access an object's method the same way as you would access properties—
using the dot notation or using the square bracket notation. Here's an example:
Example
Try this code »
var person = {
name: "Peter",
age: 28,
gender: "Male",
alert(this.name);
}
};
person.displayName(); // Outputs: Peter

person["displayName"](); // Outputs: Peter
Manipulating by Value vs. Reference
JavaScript objects are reference types that mean when you make copies of them,
you're really just copying the references to that object. Whereas primitive values like
strings and numbers are assigned or copied as a whole value. To better understand
all this, let's check out the following example:
Example
Try this code »
var message = "Hello World!";
var greet = message; // Assign message variable to a new variable

greet = "Hi, there!";
document.write(message); // Prints: Hello World!

document.write(greet); // Prints: Hi, there!
In the above example, we have made a copy of a variable message and changed the
value of that copy (i.e. variable greet). The two variables remain distinct and separate.
But, if we do the same thing with an object, we will get a different result, as you see
in the following example:
Example
Try this code »
var person = {
name: "Peter",
age: 28,
gender: "Male"
};
var user = person; // Assign person variable to a new variable

user.name = "Harry";
document.write(person.name); // Prints: Harry

document.write(user.name); // Prints: Harry
You can clearly see, any changes made to the variable user also change
the person variable; it happens because both variables reference the same object. So,
simply copying the object does not actually clone it but copies the reference to that
object.
Chapter 18
JavaScript DOM Nodes

In this tutorial you will learn the concept of Document Object Model, or DOM.
Understanding the Document Object Model

The Document Object Model, or DOM for short, is a platform and language
independent model to represent the HTML or XML documents. It defines the logical
structure of the documents and the way in which they can be accessed and
manipulated by an application program.
In the DOM, all parts of the document, such as elements, attributes, text, etc. are
organized in a hierarchical tree-like structure; similar to a family tree in real life that
consists of parents and children. In DOM terminology these individual parts of the
document are known as nodes.
The Document Object Model that represents HTML document is referred to as HTML
DOM. Similarly, the DOM that represents the XML document is referred to as XML
DOM.
In this chapter we'll cover the HTML DOM which provides a standard interface for
accessing and manipulating HTML documents through JavaScript. With the HTML
DOM, you can use JavaScript to build HTML documents, navigate their hierarchical
structure, and add, modify, or delete elements and attributes or their content, and so
on. Almost anything found in an HTML document can be accessed, changed,
deleted, or added using the JavaScript with the help of HTML DOM.
To understand this more clearly, let's consider the following simple HTML document:
Example
Try this code »
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Mobile OS</h1>
<ul>
<li>Android</li>
<li>iOS</li>
</ul>
</body>
</html>
The above HTML document can be represented by the following DOM tree:
The above diagram demonstrates the parent/child relationships between the nodes.
The topmost node i.e. the Document node is the root node of the DOM tree, which
has one child, the <html> element. Whereas, the <head> and <body> elements are the
child nodes of the <html> parent node.
The <head> and <body> elements are also siblings since they are at the same level.
Further, the text content inside an element is a child node of the parent element. So,
for example, "Mobile OS" is considered as a child node of the <h1> that contains it,
and so on.
Comments inside the HTML document are nodes in the DOM tree as well, even
though it doesn't affect the visual representation of the document in any way.
Comments are useful for documenting the code, however, you will rarely need to
retrieve and manipulate them.
HTML attributes such as id, class, title, style, etc. are also considered as nodes in
DOM hierarchy but they don't participate in parent/child relationships like the other
nodes do. They are accessed as properties of the element node that contains them.
Each element in an HTML document such as image, hyperlink, form, button, heading,
paragraph, etc. is represented using a JavaScript object in the DOM hierarchy, and
each object contains properties and methods to describe and manipulate these
objects. For example, the style property of the DOM elements can be used to get or
set the inline style of an element.
In the next few chapters we'll learn how to access individual elements on a web page
and manipulate them, for example, changing their style, content, etc. using the
JavaScript program.
Tip: The Document Object Model or DOM is, in fact, basically a representation of the
various components of the browser and the current Web document (HTML or XML)
that can be accessed or manipulated using a scripting language such as JavaScript.
Chapter 19
JavaScript DOM Selectors

In this tutorial you will learn how to select DOM elements in JavaScript.
Selecting DOM Elements in JavaScript

JavaScript is most commonly used to get or modify the content or value of the HTML
elements on the page, as well as to apply some effects like show, hide, animations
etc. But, before you can perform any action you need to find or select the target
HTML element.
In the following sections, you will see some of the common ways of selecting the
elements on a page and do something with them using the JavaScript.
Selecting the Topmost Elements

The topmost elements in an HTML document are available directly
as document properties. For example, the <html> element can be accessed
with document.documentElement property, whereas the <head> element can be accessed
with document.head property, and the <body> element can be accessed
with document.body property. Here's an example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Select Topmost Elements</title>
</head>
<body>
<script>
// Display lang attribute value of html element
alert(document.documentElement.getAttribute("lang")); //
Outputs: en
// Set background color of body element

document.body.style.background = "yellow";
// Display tag name of the head element's first child

alert(document.head.firstElementChild.nodeName); // Outputs:
meta
</script>
</body>
</html>
But, be careful. If document.body is used before the <body> tag (e.g. inside the <head>), it
will return null instead of the body element. Because the point at which the script is
executed, the <body> tag was not parsed by the browser, so document.body is
truly null at that point.
Let's take a look at the following example to better understand this:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Document.body Demo</title>
<script>
alert("From HEAD: " + document.body); // Outputs: null (since
<body> is not parsed yet)
</script>
</head>
<body>
<script>
alert("From BODY: " + document.body); // Outputs:
HTMLBodyElement
</script>
</body>
</html>
Selecting Elements by ID
You can select an element based on its unique ID with the getElementById() method.
This is the easiest way to find an HTML element in the DOM tree.
The following example selects and highlight an element having the ID

attribute id="mark".
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Select Element by ID</title>
</head>
<body>
<p id="mark">This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
<script>
// Selecting element with id mark
var match = document.getElementById("mark");
// Highlighting element's background

match.style.background = "yellow";
</script>
</body>
</html>
The getElementById() method will return the element as an object if the matching
element was found, or null if no matching element was found in the document.
Note: Any HTML element can have an id attribute. The value of this attribute must
be unique within a page i.e. no two elements in the same page can have the same ID.
Selecting Elements by Class Name
Similarly, you can use the getElementsByClassName() method to select all the elements
having specific class names. This method returns an array-like object of all child
elements which have all of the given class names. Let's check out the following
example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Select Elements by Class Name</title>
</head>
<body>
<p class="test">This is a paragraph of text.</p>
<div class="block test">This is another paragraph of
text.</div>
<p>This is one more paragraph of text.</p>
<script>
// Selecting elements with class test
var matches = document.getElementsByClassName("test");
// Displaying the selected elements count

document.write("Number of selected elements: " +
matches.length);
// Applying bold style to first element in selection

matches[0].style.fontWeight = "bold";
// Applying italic style to last element in selection

matches[matches.length - 1].style.fontStyle = "italic";
// Highlighting each element's background through loop

for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>
Selecting Elements by Tag Name
You can also select HTML elements by tag name using
the getElementsByTagName() method. This method also returns an array-like object of all
child elements with the given tag name.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Select Elements by Tag Name</title>
</head>
<body>
<p>This is a paragraph of text.</p>
<div class="test">This is another paragraph of text.</div>
<p>This is one more paragraph of text.</p>
<script>
// Selecting all paragraph elements
var matches = document.getElementsByTagName("p");
// Printing the number of selected paragraphs

document.write("Number of selected elements: " +
matches.length);
// Highlighting each paragraph's background through loop

for(var elem in matches) {
matches[elem].style.background = "yellow";
}
</script>
</body>
</html>
Selecting Elements with CSS Selectors
You can use the querySelectorAll() method to select elements that matches the
specified CSS selector. CSS selectors provide a very powerful and efficient way of
selecting HTML elements in a document. Please check out the CSS tutorial section to
learn more about them.
This method returns a list of all the elements that matches the specified selectors.
You can examine it just like any array, as shown in the following example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Select Elements with CSS Selectors</title>
</head>
<body>
<ul>
<li>Bread</li>
<li class="tick">Coffee</li>
<li>Pineapple Cake</li>
</ul>
<script>
// Selecting all li elements
var matches = document.querySelectorAll("ul li");
// Printing the number of selected li elements

document.write("Number of selected elements: " + matches.length
+ "<hr>")
// Printing the content of selected li elements

for(var elem of matches) {
document.write(elem.innerHTML + "<br>");
}
// Applying line through style to first li element with class

tick
matches = document.querySelectorAll("ul li.tick");
matches[0].style.textDecoration = "line-through";
</script>
</body>
</html>
Note: The querySelectorAll() method also supports CSS pseudo-classes like :first-
child, :last-child, :hover, etc. But, for CSS pseudo-elements such
as ::before, ::after, ::first-line, etc. this method always returns an empty list.
Chapter 20
JavaScript DOM Styling
In this tutorial you will learn how to style elements in JavaScript.
Styling DOM Elements in JavaScript

You can also apply style on HTML elements to change the visual presentation of
HTML documents dynamically using JavaScript. You can set almost all the styles for
the elements like, fonts, colors, margins, borders, background images, text
alignment, width and height, position, and so on.
In the following section we'll discuss the various methods of setting styles in
JavaScript.
Setting Inline Styles on Elements

Inline styles are applied directly to the specific HTML element using the style
attribute. In JavaScript the style property is used to get or set the inline style of an
element.
The following example will set the color and font properties of an element
with id="intro".
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById("intro");
// Appling styles on element

elem.style.color = "blue";
elem.style.fontSize = "18px";
elem.style.fontWeight = "bold";
</script>
</body>
</html>
Naming Conventions of CSS Properties in JavaScript

Many CSS properties, such as font-size, background-image, text-decoration, etc. contain
hyphens (-) in their names. Since, in JavaScript hyphen is a reserved operator and it is
interpreted as a minus sign, so it is not possible to write an expression,
like: elem.style.font-size
Therefore, in JavaScript, the CSS property names that contain one or more hyphens
are converted to intercapitalized style word. It is done by removing the hyphens and
capitalizing the letter immediately following each hyphen, thus the CSS
property font-size becomes the DOM property fontSize, border-left-
style becomes borderLeftStyle, and so on.
Getting Style Information from Elements

Similarly, you get the styles applied on the HTML elements using the style property.
The following example will get the style information from the element
having id="intro".
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Get Element's Style Demo</title>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a
paragraph.</p>
<script>
// Getting style information from element

alert(elem.style.color); // Outputs: red
alert(elem.style.fontSize); // Outputs: 20px
alert(elem.style.fontStyle); // Outputs nothing
</script>
</body>
</html>
The style property isn't very useful when it comes to getting style information from
the elements, because it only returns the style rules set in the element's style
attribute not those that come from elsewhere, such as style rules in the embedded
style sheets, or external style sheets.
To get the values of all CSS properties that are actually used to render an element
you can use the window.getComputedStyle() method, as shown in the following example:
Example
Try this code »
<!DOCTYPE html>
<html>
<head>
<title>JS Get Computed Style Demo</title>
<style type="text/css">
#intro {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a
paragraph.</p>
<script>
// Getting computed style information

var styles = window.getComputedStyle(elem);
alert(styles.getPropertyValue("color")); // Outputs: rgb(255,

0, 0)
alert(styles.getPropertyValue("font-size")); // Outputs: 20px
alert(styles.getPropertyValue("font-weight")); // Outputs: 700
alert(styles.getPropertyValue("font-style")); // Outputs:
italic
</script>
</body>
</html>
Tip: The value 700 for the CSS property font-weight is same as the keyword bold. The
color keyword red is same as rgb(255,0,0), which is the rgb notation of a color.
Adding CSS Classes to Elements

You can also get or set CSS classes to the HTML elements using
the className property.
Since, class is a reserved word in JavaScript, so JavaScript uses the className property
to refer the value of the HTML class attribute. The following example will show to
how to add a new class, or replace all existing classes to a <div> element
having id="info".
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Add or Replace CSS Classes Demo</title>
<style>
.highlight {
background: yellow;
}
</style>
</head>
<body>
<div id="info" class="disabled">Something very important!</div>
<script>
var elem = document.getElementById("info");
elem.className = "note"; // Add or replace all classes with

note class
elem.className += " highlight"; // Add a new class highlight
</script>
</body>
</html>
There is even better way to work with CSS classes. You can use the classList property
to get, set or remove CSS classes easily from an element. This property is supported
in all major browsers except Internet Explorer prior to version 10. Here's an example:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS classList Demo</title>
<style>
.highlight {
background: yellow;
}
</style>
</head>
<body>
<div id="info" class="disabled">Something very important!</div>
<script>
var elem = document.getElementById("info");
elem.classList.add("hide"); // Add a new class

elem.classList.add("note", "highlight"); // Add multiple
classes
elem.classList.remove("hide"); // Remove a class
elem.classList.remove("disabled", "note"); // Remove multiple
classes
elem.classList.toggle("visible"); // If class exists remove it,
if not add it
// Determine if class exist

if(elem.classList.contains("highlight")) {
alert("The specified class exists on the element.");
}
</script>
</body>
</html>
Chapter 21
JavaScript DOM Get Set Attributes

In this tutorial you will learn how to get, set and remove attributes from HTML
elements in JavaScript.
Working with Attributes

The attributes are special words used inside the start tag of an HTML element to
control the tag's behavior or provides additional information about the tag.
JavaScript provides several methods for adding, removing or changing an HTML

element's attribute. In the following sections we will learn about these methods in
detail.
Getting Element's Attribute Value

The getAttribute() method is used to get the current value of a attribute on the
element.
If the specified attribute does not exist on the element, it will return null. Here's an
example:
Example
Try this code »
<a href="https://www.google.com/" target="_blank"

id="myLink">Google</a>
<script>
// Selecting the element by ID attribute
var link = document.getElementById("myLink");
// Getting the attributes values
var href = link.getAttribute("href");
alert(href); // Outputs: https://www.google.com/
var target = link.getAttribute("target");

alert(target); // Outputs: _blank
</script>
JavaScript provides several different ways to select elements on a page. Please check
out the JavaScript DOM selectors chapter to learn more about them.
Setting Attributes on Elements

The setAttribute() method is used to set an attribute on the specified element.
If the attribute already exists on the element, the value is updated; otherwise a new
attribute is added with the specified name and value. The JavaScript code in the
following example will add a class and a disabled attribute to the <button> element.
Example
Try this code »
<script>
// Selecting the element
var btn = document.getElementById("myBtn");
// Setting new attributes

btn.setAttribute("class", "click-btn");
btn.setAttribute("disabled", "");
</script>
Similarly, you can use the setAttribute() method to update or change the value of an
existing attribute on an HTML element. The JavaScript code in the following example
will update the value of the existing href attribute of an anchor (<a>) element.
Example
Try this code »
<a href="#" id="myLink">Tutorial Republic</a>
<script>
// Changing the href attribute value

link.setAttribute("href", "https://www.tutorialrepublic.com");
</script>
Removing Attributes from Elements

The removeAttribute() method is used to remove an attribute from the specified
element.
The JavaScript code in the following example will remove the href attribute from an
anchor element.
Example
Try this code »
<a href="https://www.google.com/" id="myLink">Google</a>
<script>
// Removing the href attribute

link.removeAttribute("href");
</script>
Chapter 22
JavaScript DOM Manipulation

In this tutorial you will learn how to manipulate elements in JavaScript.
Manipulating DOM Elements in JavaScript

Now that you've learnt how to select and style HTML DOM elements. In this chapter
we will learn how to add or remove DOM elements dynamically, get their contents,
and so on.
Adding New Elements to DOM

You can explicitly create new element in an HTML document, using
the document.createElement() method. This method creates a new element, but it
doesn't add it to the DOM; you'll have to do that in a separate step, as shown in the
following example:
Example
Try this code »
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Creating a new div element
var newDiv = document.createElement("div");
// Creating a text node

var newContent = document.createTextNode("Hi, how are you doing?");
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
// Adding the newly created element and its content into the DOM
var currentDiv = document.getElementById("main");
document.body.appendChild(newDiv, currentDiv);
</script>
The appendChild() method adds the new element at the end of any other children of a
specified parent node. However, if you want to add the new element at the
beginning of any other children you can use the insertBefore() method, as shown in
example below:
Example
Try this code »
<div id="main">
</div>
<script>
// Creating a new div element
var newDiv = document.createElement("div");
// Creating a text node

var newContent = document.createTextNode("Hi, how are you doing?");
// Adding the text node to the newly created div

newDiv.appendChild(newContent);
// Adding the newly created element and its content into the DOM
var currentDiv = document.getElementById("main");
document.body.insertBefore(newDiv, currentDiv);
</script>
Getting or Setting HTML Contents to DOM

You can also get or set the contents of the HTML elements easily with
the innerHTML property. This property sets or gets the HTML markup contained within
the element i.e. content between its opening and closing tags. Checkout the
following example to see how it works:
Example
Try this code »
<div id="main">
</div>
<script>
// Getting inner HTML conents
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
// Setting inner HTML contents

var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em>
paragraph.</p>";
</script>
As you can see how easily you can insert new elements into DOM using
the innerHTML property, but there is one problem, the innerHTML property replaces all
existing content of an element. So if you want to insert the HTML into the document
without replacing the existing contents of an element, you can use
the insertAdjacentHTML() method.
This method accepts two parameters: the position in which to insert and the HTML
text to insert. The position must be one of the following
values: "beforebegin", "afterbegin", "beforeend", and "afterend". This method is
supported in all major browsers.
The following example shows the visualization of position names and how it works.
Example
Try this code »


<div id="main">


</div>

<script>
// Selecting target element
var mainDiv = document.getElementById("main");
// Inserting HTML just before the element itself, as a previous

sibling
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph
one.</p>');
// Inserting HTML just inside the element, before its first child
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph
two.</p>');
// Inserting HTML just inside the element, after its last child
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph
three.</p>');
// Inserting HTML just after the element itself, as a next sibling

mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph
four.</p>');
</script>
Note: The beforebegin and afterend positions work only if the node is in the DOM tree
and has a parent element. Also, when inserting HTML into a page, be careful not to
use user input that hasn't been escaped, to prevent XSS attacks.
Removing Existing Elements from DOM

Similarly, you can use the removeChild() method to remove a child node from the
DOM. This method also returns the removed node. Here's an example:
Example
Try this code »
<div id="main">
</div>
<script>
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>
It is also possible to remove the child element without exactly knowing the parent
element. Simply find the child element and use the parentNode property to find its
parent element. This property returns the parent of the specified node in the DOM
tree. Here's an example:
Example
Try this code »
<div id="main">
</div>
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>
Replacing Existing Elements in DOM

You can also replace an element in HTML DOM with another using
the replaceChild() method. This method accepts two parameters: the node to insert
and the node to be replaced. It has the syntax like parentNode.replaceChild(newChild,
oldChild);. Here's an example:
Example
Try this code »
<div id="main">
</div>
<script>
var parentElem = document.getElementById("main");
var oldPara = document.getElementById("hint");
// Creating new elememt

var newPara = document.createElement("p");
var newContent = document.createTextNode("This is a new
paragraph.");
newPara.appendChild(newContent);
// Replacing old paragraph with newly created paragraph

parentElem.replaceChild(newPara, oldPara);
</script>
Chapter 23
JavaScript DOM Navigation

In this tutorial you will learn how to navigate between DOM nodes in JavaScript.
Navigating Between DOM Nodes

In the previous chapters you've learnt how to select individual elements on a web
page. But there are many occasions where you need to access a child, parent or
ancestor element. See the JavaScript DOM nodes chapter to understand the logical
relationships between the nodes in a DOM tree.
DOM node provides several properties and methods that allow you to navigate or
traverse through the tree structure of the DOM and make changes very easily. In the
following section we will learn how to navigate up, down, and sideways in the DOM
tree using JavaScript.
Accessing the Child Nodes

You can use the firstChild and lastChild properties of the DOM node to access the
first and last direct child node of a node, respectively. If the node doesn't have any
child element, it returns null.
Example
Try this code »
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
console.log(main.firstChild.nodeName); // Prints: #text
var hint = document.getElementById("hint");

console.log(hint.firstChild.nodeName); // Prints: SPAN
</script>
Note: The nodeName is a read-only property that returns the name of the current node
as a string. For example, it returns the tag name for element node, #text for text
node, #comment for comment node, #document for document node, and so on.
If you notice the above example, the nodeName of the first-child node of the main DIV
element returns #text instead of H1. Because, whitespace such as spaces, tabs,
newlines, etc. are valid characters and they form #text nodes and become a part of
the DOM tree. Therefore, since the <div> tag contains a newline before the <h1> tag,
so it will create a #text node.
To avoid the issue with firstChild and lastChild returning #text or #comment nodes,
you could alternatively use the firstElementChild and lastElementChild properties to
return only the first and last element node, respectively. But, it will not work in IE 9
and earlier.
Example
Try this code »
<div id="main">
</div>
<script>
alert(main.firstElementChild.nodeName); // Outputs: H1
main.firstElementChild.style.color = "red";

alert(hint.firstElementChild.nodeName); // Outputs: SPAN
hint.firstElementChild.style.color = "blue";
</script>
Similarly, you can use the childNodes property to access all child nodes of a given
element, where the first child node is assigned index 0. Here's an example:
Example
Try this code »
<div id="main">
</div>
<script>
// First check that the element has child nodes

if(main.hasChildNodes()) {
var nodes = main.childNodes;
// Loop through node list and display node name

for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>
The childNodes returns all child nodes, including non-element nodes like text and
comment nodes. To get a collection of only elements, use children property instead.
Example
Try this code »
<div id="main">
</div>
<script>
// First check that the element has child nodes

if(main.hasChildNodes()) {
var nodes = main.children;
// Loop through node list and display node name

for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>
Accessing the Parent Nodes

You can use the parentNode property to access the parent of the specified node in the
DOM tree.
The parentNode will always return null for document node, since it doesn't have a
parent.
Example
Try this code »
<div id="main">
</div>
<script>
alert(hint.parentNode.nodeName); // Outputs: DIV
alert(document.documentElement.parentNode.nodeName); // Outputs:
#document
alert(document.parentNode); // Outputs: null
</script>
Tip: The topmost DOM tree nodes can be accessed directly as document properties.
For example, the <html> element can be accessed
with document.documentElement property, whereas the <head> element can be accessed
with document.head property, and the <body> element can be accessed
with document.body property.
However, if you want to get only element nodes you can use the parentElement, like
this:
Example
Try this code »
<div id="main">
</div>
<script>
alert(hint.parentNode.nodeName); // Outputs: DIV
hint.parentNode.style.backgroundColor = "yellow";
</script>
Accessing the Sibling Nodes

You can use the previousSibling and nextSibling properties to access the previous and
next node in the DOM tree, respectively. Here's an example:
Example
Try this code »
<div id="main">
<p id="hint"><span>This is some text.</span></p><hr>
</div>
<script>
var title = document.getElementById("title");
alert(title.previousSibling.nodeName); // Outputs: #text

alert(hint.nextSibling.nodeName); // Outputs: HR
</script>
Alternatively, you can use the previousElementSibling and nextElementSibling to get the
previous and next sibling element skipping any whitespace text nodes. All these
properties returns null if there is no such sibling. Here's an example:
Example
Try this code »
<div id="main">
</div>
<script>
alert(hint.previousElementSibling.nodeName); // Outputs: H1
alert(hint.previousElementSibling.textContent); // Outputs: My
Heading
var title = document.getElementById("title");

alert(title.nextElementSibling.nodeName); // Outputs: P
alert(title.nextElementSibling.textContent); // Outputs: This is
some text.
</script>
The textContent property represents the text content of a node and all of its
descendants. See the JavaScript DOM manipulation chapter to learn more about it.
Types of DOM Nodes

The DOM tree is consists of different types of nodes, such as elements, text,
comments, etc.
Every node has a nodeType property that you can use to find out what type of node
you are dealing with. The following table lists the most important node types:
Constant Value Description
ELEMENT_NODE 1 An element node such as <p> or <img>.
TEXT_NODE 3 The actual text of element.
COMMENT_NODE 8 A comment node i.e. 

DOCUMENT_NODE 9 A document node i.e. the parent of <html> element.
DOCUMENT_TYPE_NODE 10 A document type node e.g. <!DOCTYPE html> for HTML5

documents.
Chapter 24
JavaScript Window
In this tutorial you will learn about the JavaScript window object.
The Window Object

The window object represents a window containing a DOM document. A window can
be the main window, a frame set or individual frame, or even a new window created
with JavaScript.
If you remember from the preceding chapters we've used the alert() method in our
scripts to show popup messages. This is a method of the window object.
In the next few chapters we will see a number of new methods and properties of
the window object that enables us to do things such as prompt user for information,
confirm user's action, open new windows, etc. which lets you to add more
interactivity to your web pages.
Calculating Width and Height of the Window

The window object provides the innerWidth and innerHeight property to find out the
width and height of the browser window viewport (in pixels) including the horizontal
and vertical scrollbar, if rendered. Here's is an example that displays the current size
of the window on button click:
Example
Try this code »
<script>
function windowSize(){
var w = window.innerWidth;
var h = window.innerHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Get Window

Size</button>
However, if you want to find out the width and height of the window excluding the
scrollbars you can use the clientWidth and clientHeight property of any DOM element
(like a div), as follow:
Example
Try this code »
<script>
function windowSize(){
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
alert("Width: " + w + ", " + "Height: " + h);
}
</script>
<button type="button" onclick="windowSize();">Get Window

Size</button>
Note: The document.documentElement object represents the root element of the

document, which is the <html> element, whereas the document.body object represents
the <body> element. Both are supported in all major browsers.
Chapter 25
JavaScript Window Screen

In this tutorial you will learn about the JavaScript window screen object.
The Screen Object

The window.screen object contains information about the user's screen such as
resolution (i.e. width and height of the screen), color depth, pixel depth, etc.
Since window object is at the top of the scope chain, so properties of

the window.screen object can be accessed without specifying the window. prefix, for
example window.screen.width can be written as screen.width. The following section will
show you how to get information of the user's display using the screen object
property of the window object.
Getting Width and Height of the Screen

You can use the screen.width and screen.height property obtains the width and height
of the user's screen in pixels. The following example will display your screen
resolution on button click:
Example
Try this code »
<script>
function getResolution() {
alert("Your screen is: " + screen.width + "x" + screen.height);
}
</script>
<button type="button" onclick="getResolution();">Get
Resolution</button>
Getting Available Width and Height of the

Screen
The screen.availWidth and screen.availHeight property can be used to get the width
and height available to the browser for its use on user's screen, in pixels.
The screen's available width and height is equal to screen's actual width and height
minus width and height of interface features like the taskbar in Windows. Here's an
example:
Example
Try this code »
<script>
function getAvailSize() {
alert("Available Screen Width: " + screen.availWidth + ",
Height: " + screen.availHeight);
}
</script>
<button type="button" onclick="getAvailSize();">Get Available

Size</button>
Getting Screen Color Depth

You can use the screen.colorDepth property to get the color depth of the user's
screen. Color depth is the number of bits used to represent the color of a single
pixel.
Color depth indicates how many colors a device screen is capable to produce. For
example, screen with color depth of 8 can produce 256 colors (28).
Currently, most devices has screen with color depth of 24 or 32. In simple words
more bits produce more color variations, like 24 bits can produce 224 = 16,777,216
color variations (true colors), whereas 32 bits can produce 232 = 4,294,967,296 color
variations (deep colors).
Example
Try this code »
<script>
function getColorDepth() {
alert("Your screen color depth is: " + screen.colorDepth);
}
</script>
<button type="button" onclick="getColorDepth();">Get Color

Depth</button>
Tip: As of now virtually every computer and phone display uses 24-bit color depth.
24 bits almost always uses 8 bits of each of R, G, B. Whereas in case of 32-bit color
depth, 24 bits are used for the color, and the remaining 8 bits are used for
transparency.
Getting Screen Pixel Depth

You can get the pixel depth of the screen using the screen.pixelDepth property. Pixel
depth is the number of bits used per pixel by the system display hardware.
For modern devices, color depth and pixel depth are equal. Here's an example:
Example
Try this code »
<script>
function getPixelDepth() {
alert("Your screen pixel depth is: " + screen.pixelDepth);
}
</script>
<button type="button" onclick="getPixelDepth();">Get Pixel
Depth</button>
Chapter 26
JavaScript Window Location

In this tutorial you will learn about the JavaScript window location object.
The Location Object

The location property of a window (i.e. window.location) is a reference to a Location
object; it represents the current URL of the document being displayed in that
window.
Since window object is at the top of the scope chain, so properties of

the window.location object can be accessed without window. prefix, for
example window.location.href can be written as location.href. The following section
will show you how to get the URL of page as well as hostname, protocol, etc. using
the location object property of the window object.
Getting the Current Page URL

You can use the window.location.href property to get the entire URL of the current
page.
The following example will display the complete URL of the page on button click:
Example
Try this code »
<script>
function getURL() {
alert("The URL of this page is: " + window.location.href);
}
</script>
<button type="button" onclick="getURL();">Get Page URL</button>
Getting Different Part of a URL

Similarly, you can use other properties of the location object such
as protocol, hostname, port, pathname, search, etc. to obtain different part of the URL.
Try out the following example to see how to use the location property of a window.
Example
Try this code »
// Prints complete URL

document.write(window.location.href);
// Prints protocol like http: or https:

document.write(window.location.protocol);
// Prints hostname with port like localhost or localhost:3000

document.write(window.location.host);
// Prints hostname like localhost or www.example.com

document.write(window.location.hostname);
// Prints port number like 3000

document.write(window.location.port);
// Prints pathname like /products/search.php

document.write(window.location.pathname);
// Prints query string like ?q=ipad

document.write(window.location.search);
// Prints fragment identifier like #featured

document.write(window.location.hash);
Note: When you visit a website, you're always connecting to a specific port (e.g.
http://localhost:3000). However, most browsers will simply not display the default
port numbers, for example, 80 for HTTP and 443 for HTTPS.
Loading New Documents
You can use the assign() method of the location object i.e. window.location.assign() to
load another resource from a URL provided as parameter, for example:
Example
Try this code »
<script>
function loadHomePage() {
window.location.assign("https://www.tutorialrepublic.com");
}
</script>
<button type="button" onclick="loadHomePage();">Load Home

Page</button>
You can also use the replace() method to load new document which is almost the
same as assign(). The difference is that it doesn't create an entry in the browser's
history, meaning the user won't be able to use the back button to navigate to it.
Here's an example:
Example
Try this code »
<script>
function loadHomePage(){
window.location.replace("https://www.tutorialrepublic.com");
}
</script>

Page</button>
Alternatively, you can use the window.location.href property to load new document in
the window. It produce the same effect as using assign() method. Here's is an
example:
Example
Try this code »
<script>
function loadHomePage() {
window.location.href = "https://www.tutorialrepublic.com";
}
</script>

Page</button>
Reloading the Page Dynamically

The reload() method can be used to reload the current page dynamically.
You can optionally specify a Boolean parameter true or false. If the parameter is true,
the method will force the browser to reload the page from the server. If it is false or
not specified, the browser may reload the page from its cache. Here's an example:
Example
Try this code »
<script>
function forceReload() {
window.location.reload(true);
}
</script>
<button type="button" onclick="forceReload();">Reload Page</button>
Note: The result of calling reload() method is different from clicking browser's
Reload/Refresh button. The reload() method clears form control values that
otherwise might be retained after clicking the Reload/Refresh button in some
browsers.
Chapter 27
JavaScript Window History

In this tutorial you will learn about the JavaScript window history object.
The History Object

The history property of the Window object refers to the History object. It contains
the browser session history, a list of all the pages visited in the current frame or
window.
Since Window is a global object and it is at the top of the scope chain, so properties
of the Window object i.e. window.history can be accessed without window. prefix, for
example window.history.length can be written as history.length.
The following section will show you how to get the information of user's browsing
history. However, for security reasons scripts are not allowed to access the stored
URLs.
Getting the Number of Pages Visited

The window.history.length property can be used to get the number of pages in the
session history of the browser for the current window. It also includes the currently
loaded page.
You can use this property to find out how many pages a user has visited during the
current browser session, as demonstrated in the following example:
Example
Try this code »
<script>
function getViews() {
alert("You've accessed " + history.length + " web pages in this
session.");
}
</script>
<button type="button" onclick="getViews();">Get Views

Count</button>
Going Back to the Previous Page

You can use the back() method of the History object i.e. history.back() to go back to
the previous page in session history. It is same as clicking the browser's back button.
Example
Try this code »
<script>
function goBack() {
window.history.back();
}
</script>
<button type="button" onclick="goBack();">Go Back</button>

If your browser back button is active then clicking this Go Back link takes you one
step back.
Going Forward to the Next Page
You can use the forward() method of the History object i.e. history.forward() to go
forward to the next page in session history. It is same as clicking the browser's
forward button.
Example
Try this code »
<script>
function goForward() {
window.history.forward();
}
</script>
<button type="button" onclick="goForward();">Go Forward</button>
If your browser forward button is active then clicking this Go Forward link takes you
one step forward.
Going to a Specific Page

You can also load specific page from the session history using the go() method of the
History object i.e. history.go(). This method takes an integer as a parameter. A
negative integer moves backward in the history, and a positive integer moves
forward in the history.
Example
Try this code »
window.history.go(-2); // Go back two pages

window.history.go(-1); // Go back one page
window.history.go(0); // Reload the current page
window.history.go(1); // Go forward one page
window.history.go(2); // Go forward two pages
Tip: If you attempt to access the page that does not exist in the window's history
then the methods back(), forward() and go() will simply do nothing.
Chapter 28
JavaScript Window Navigator
In this tutorial you will learn about the JavaScript window navigator object.
The Navigator Object

The navigator property of a window (i.e. window.navigator) is a reference to a
Navigator object; it is a read-only property which contains information about the
user's browser.
Since Window is a global object and it is at the top of the scope chain, so properties
of the Window object such as window.navigator can be accessed without window. prefix,
for example window.navigator.language can be written as navigator.language.
The following section will show you how to get various information about user's
browser.
Detect Whether the Browser is Online or Offline

You can use the navigator.onLine property to detect whether the browser (or,
application) is online or offline. This property returns a Boolean value true meaning
online, or false meaning offline.
Example
Try this code »
<script>
function checkConnectionStatus() {
if(navigator.onLine) {
alert("Application is online.");
} else {
alert("Application is offline.");
}
}
</script>
<button type="button" onclick="checkConnectionStatus();">Check
Connection Status</button>
Browser fires online and offline events when a connection is establish or lost. You can
attach handler functions to these events in order to customize your application for
online and offline scenarios.
Let's take a look at the following JavaScript code to see how this works:
Example
Try this code »
<script>
function goOnline() {
// Action to be performed when your application goes online
alert("And we're back!");
}
function goOffline() {
// Action to be performed when your application goes offline
alert("Hey, it looks like you're offline.");
}
// Attaching event handler for the online event

window.addEventListener("online", goOnline);
// Attaching event handler for the offline event

window.addEventListener("offline", goOffline);
</script>
<p>Toggle your internet connection on/off to see how it works.</p>
The goOffline() function in the above example will be called automatically by the
browser whenever the connection goes offline, whereas the goOnline() function will
be called automatically by the browser when the connection status changes to
online.
Check Whether Cookies Are Enabled or Not
You can use the navigator.cookieEnabled to check whether cookies are enabled in the
user's browser or not. This property returns a Boolean value true if cookies are
enabled, or false if it isn't.
Example
Try this code »
<script>
function checkCookieEnabled() {
if(navigator.cookieEnabled) {
alert("Cookies are enabled in your browser.");
} else {
alert("Cookies are disabled in your browser.");
}
}
</script>
<button type="button" onclick="checkCookieEnabled();">Check If

Cookies are Enabled</button>
Tip: You should use the navigator.cookieEnabled property to determine whether the
cookies are enabled or not before creating or using cookies in your JavaScript code.
Detecting the Browser Language

You can use the navigator.language property to detect the language of the browser UI.
This property returns a string representing the language, e.g. "en", "en-US", etc.
Example
Try this code »
<script>
function checkLanguage() {
alert("Your browser's UI language is: " + navigator.language);
}
</script>
<button type="button" onclick="checkLanguage();">Check

Language</button>
Getting Browser Name and Version Information

The Navigator object has five main properties that provide name and version
information about the user's browser. The following list provides a brief overview of
these properties:
 appName — Returns the name of the browser. It always returns "Netscape", in any
browser.
 appVersion — Returns the version number and other information about the browser.
 appCodeName — Returns the code name of the browser. It returns "Mozilla", for all
browser.
 userAgent — Returns the user agent string for the current browser. This property
typically contains all the information in both appName and appVersion.
 platform — Returns the platform on which browser is running (e.g. "Win32", "WebTV
OS", etc.)
As you can see from the above descriptions, the value returned by these properties
are misleading and unreliable, so don't use them to determine the user's browser
type and version.
Example
Try this code »
<script>
function getBrowserInformation() {
var info = "\n App Name: " + navigator.appName;
info += "\n App Version: " + navigator.appVersion;
info += "\n App Code Name: " + navigator.appCodeName;
info += "\n User Agent: " + navigator.userAgent;
info += "\n Platform: " + navigator.platform;
alert("Here're the information related to your browser: " +
info);
}
</script>
<button type="button" onclick="getBrowserInformation();">Get

Browser Information</button>
Check Whether the Browser is Java Enabled or

Not
You can use the method javaEnabled() to check whether the current browser is Java-
enabled or not.
This method simply indicates whether the preference that controls Java is on or off, it
does not reveal whether the browser offers Java support or Java is installed on the
user's system or not.
Example
Try this code »
<script>
function checkJavaEnabled() {
if(navigator.javaEnabled()) {
alert("Your browser is Java enabled.");
} else {
alert("Your browser is not Java enabled.");
}
}
</script>
<button type="button" onclick="checkJavaEnabled();">Check If Java

is Enabled</button>
Chapter 29
JavaScript Dialog Boxes

In this tutorial you will learn how to create dialog boxes in the JavaScript.
Creating Dialog Boxes

In JavaScript you can create dialog boxes or popups to interact with the user. You
can either use them to notify a user or to receive some kind of user input before
proceeding.
You can create three different types of dialog boxes alert, confirm, and prompt boxes.
The appearance of these dialog boxes is determined by the operating system and/or
browser settings, they cannot be modified with the CSS. Also, dialog boxes are
modal windows; when a dialog box is displayed the code execution stops, and
resumes only after it has been dismissed.
In the following section we will discuss each of these dialog boxes in detail.
Creating Alert Dialog Boxes

An alert dialog box is the most simple dialog box. It enables you to display a short
message to the user. It also includes OK button, and the user has to click this OK
button to continue.
You can create alert dialog boxes with the alert() method. You've already seen a lot
of alert examples in the previous chapters. Let's take a look at one more example:
Example
Try this code »
var message = "Hi there! Click OK to continue.";
alert(message);
/* The following line won't execute until you dismiss previous

alert */
alert("This is another alert box.");
Creating Confirm Dialog Boxes

A confirm dialog box allows user to confirm or cancel an action. A confirm dialog
looks similar to an alert dialog but it includes a Cancel button along with the OK
button.
You can create confirm dialog boxes with the confirm() method. This method simply
returns a Boolean value (true or false) depending on whether the user clicks OK or
Cancel button. That's why its result is often assigned to a variable when it is used.
The following example will print some text in the browser depending on which
button is clicked.
Example
Try this code »
var result = confirm("Are you sure?");
if(result) {
document.write("You clicked OK button!");
} else {
document.write("You clicked Cancel button!");
}
Creating Prompt Dialog Box
The prompt dialog box is used to prompt the user to enter information. A prompt
dialog box includes a text input field, an OK and a Cancel button.
You can create prompt dialog boxes with the prompt() method. This method returns
the text entered in the input field when the user clicks the OK button, and null if user
clicks the Cancel button. If the user clicks OK button without entering any text, an
empty string is returned. For this reason, its result is usually assigned to a variable
when it is used.
The following example will print the value entered by you when you click the OK
button.
Example
Try this code »
var name = prompt("What's your name?");
if(name.length > 0 && name != "null") {

document.write("Hi, " + name);
} else {
document.write("Anonymous!");
}
The value returned by the prompt() method is always a string. This means if the user
enters 10 in the input field, the string "10" is returned instead of the number 10.
Therefore, if you want to use the returned value as a number you must covert it
or cast to Number, like this: var age = Number(prompt("What's your age?"));
Tip: To display line breaks inside the dialog boxes, use newline character or line feed
(\n); a backslash followed by the character n.
Chapter 30
JavaScript Timers
In this tutorial you will learn about timer functions in JavaScript.
Working with Timers

A timer is a function that enables us to execute a function at a particular time.
Using timers you can delay the execution of code so that it does not get done at the
exact moment an event is triggered or the page is loaded. For example, you can use
timers to change the advertisement banners on your website at regular intervals, or
display a real-time clock, etc. There are two timer functions in
JavaScript: setTimeout() and setInterval().
The following section will show you how to create timers to delay code execution as
well as how to perform one or more actions repeatedly using these functions in
JavaScript.
Executing Code After a Delay

The setTimeout() function is used to execute a function or specified piece of code just
once after a certain period of time. Its basic syntax
is setTimeout(function, milliseconds).
This function accepts two parameters: a function, which is the function to execute,
and an optional delay parameter, which is the number of milliseconds representing
the amount of time to wait before executing the function (1 second = 1000
milliseconds). Let's see how it works:
Example
Try this code »
<script>
function myFunction() {
alert('Hello World!');
}
</script>
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>
The above example will display an alert message after 2 seconds on click of the
button.
Note: If the delay parameter is omitted or not specified, a value of 0 is used, that
means the specified function is executed "immediately", or, as soon as possible.
Executing Code at Regular Intervals

Similarly, you can use the setInterval() function to execute a function or specified
piece of code repeatedly at fixed time intervals. Its basic syntax
is setInterval(function, milliseconds).
This function also accepts two parameters: a function, which is the function to
execute, and interval, which is the number of milliseconds representing the amount
of time to wait before executing the function (1 second = 1000 milliseconds). Here's
an example:
Example
Try this code »
<script>
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML =
d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
<p>The current time on your computer is: <span

id="clock"></span></p>
The above example will execute the showTime() function repeatedly after 1 second.
This function retrieves the current time on your computer and displays it in the
browser.
Stopping Code Execution or Cancelling a Timer

Both setTimeout() and setInterval() method return an unique ID (a positive integer
value, called timer identifier) which identifies the timer created by the these methods.
This ID can be used to disable or clear the timer and stop the execution of code
beforehand. Clearing a timer can be done using two
functions: clearTimeout() and clearInterval().
The setTimeout() function takes a single parameter, an ID, and clear

a setTimeout() timer associated with that ID, as demonstrated in the following
example:
Example
Try this code »
<script>
var timeoutID;
function delayedAlert() {
timeoutID = setTimeout(showAlert, 2000);
}
function showAlert() {
alert('This is a JavaScript alert box.');
}
function clearAlert() {
clearTimeout(timeoutID);
}
</script>
<button onclick="delayedAlert();">Show Alert After Two

Seconds</button>
<button onclick="clearAlert();">Cancel Alert Before It

Display</button>
Similarly, the clearInterval() method is used to clear or disable a setInterval() timer.
Example
Try this code »
<script>
var intervalID;
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML =
d.toLocaleTimeString();
}
function stopClock() {
clearInterval(intervalID);
}
var intervalID = setInterval(showTime, 1000);

</script>
<p>The current time on your computer is: <span

id="clock"></span></p>
<button onclick="stopClock();">Stop Clock</button>
Note: You can technically use clearTimeout() and clearInterval() interchangeably.

However, for clarity and code maintainability you should avoid doing so.

JavaScript Manual

Uploaded by

Copyright:

Available Formats

You might also like

JavaScript Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Manual

Uploaded by

Copyright:

Available Formats

Chapter 1

JavaScript was originally developed as LiveScript by Netscape in the mid 1990s. It

JavaScript is officially maintained by ECMA (European Computer Manufacturers

What You Can Do with JavaScript

JavaScript Getting Started

Getting Started with JavaScript

Adding JavaScript to Your Web Pages

The following sections will describe each of these procedures in detail:

Embedding the JavaScript Code

Calling an External JavaScript File

// A function to display a message

// Call function on click of the button

Positioning of Script inside HTML Document

Difference Between Client-side and Server-side

Client-side scripting has many advantages over traditional server-side scripting

Also, response from a server-side script is slower as compared to a client-side script,

Understanding the JavaScript Syntax

A JavaScript consists of JavaScript statements that are placed within

The following example shows how JavaScript statements look like:

var myVar = "Hello World!";

JavaScript support single-line as well as multi-line comments. Single-line comments

// This is my first JavaScript program

/* This is my first program

var name = "Peter Parker";

Declaring Multiple Variables at Once

// Declaring multiple Variables

/* Longer declarations can be written to span

Generating Output in JavaScript

Writing Output to Browser Console

// Printing a simple text message

// Printing a variable value

Displaying Output in Alert Dialog Boxes

// Displaying a simple text message

// Displaying a variable value

Writing Output to the Browser Window

// Printing a simple text message

// Printing a variable value

<button type="button" onclick="document.write('Hello

Inserting Output Inside an HTML Element

// Writing a variable value inside an element

JavaScript Data Types

Data Types in JavaScript

The String Data Type

var a = 'Hi there!'; // using single quotes

var a = "Let's have a cup of coffee."; // single quote inside

The Number Data Type

var a = 25; // integer

alert(16 / 0); // Output: Infinity

alert("Some text" / 2); // Output: NaN

The Boolean Data Type

var isReading = true; // yes, I'm reading

alert(b > a) // Output: true

alert(a) // Output: undefined

The Null Data Type

A variable can be explicitly emptied of its current contents by assigning it

var b = "Hello World!"

An object contains properties, defined as a key-value pair. A property key (name) is

var emptyObject = {};

= Multiply and assign x = y x = x * y