JavaScript Tutorial

JavaScript Tutorial


JavaScript Video Tutorials | Learn JavaScript in 3 Hours | Must Watch it!

JavaScript Tutorial

Our JavaScript tutorial introduces the reader informally to the basic concepts and features of the JavaScript. We hope these JavaScript Tutorials are useful and will help you to get the best job in the industry. These JavaScript are prepared by JavaScript Professionals based on MNC Companies expectations. Stay tuned we will update New JavaScript Tutorials Frequently. If you want to learn Practical JavaScript Training then please go through this JavaScript Training in Chennai, JavaScript Training in Bangalore, and JavaScript Training in Pune.

Besant Technologies supports the students by providing JavaScript Tutorials for job placements and job purposes. JavaScript is the leading important course in the present situation because of more job openings and high salary pay. These are top JavaScript Tutorials, prepared by our institute experienced trainers.

These JavaScript tutorials are suitable for both freshers and experienced professionals at any level. These tutorials are for intermediate to somewhat advanced JavaScript professionals, but even if you are just a beginner or fresher you should be able to understand the tutorials by examples and explanations here we give.

Table of Content

  1. JavaScript Introduction
  2. JavaScript Syntax
  3. Enabling Javascript In Browser
  4. JavaScript (JS) – Placement in HTML File
  5. JavaScript Variables
  6. Javascript Operators
  7. Javascript if…else Statement
  8. JavaScript Switch Case
  9. Javascript While Loops
  10. Javascript For Loop
  11. Javascript for…in loop
  12. JavaScript loop control
  13. Javascript labels using loop control
  14. Javascript events
  15. Javascript and Cookies
  16. Page Redirection
  17. Dialogue Boxes
  18. Void Keyword
  19. Page Printing
  20. Objects Overview
  21. Javascript the Number Object
  22. Javascript the Boolean Object
  23. Javascript the String Object
  24. Javascript the Array Object
  25. Javascript the Date Object
  26. JavaScript Math Object
  27. Regular Expression
  28. Javascript Document Object Model
  29. Javascript Errors & Exceptions Handling
  30. Form validation in Javascript
  31. Animation in Javascript
  32. Java Script Multimedia
  33. Debugging in JavaScript
  34. Image Map on Java Script
  35. JavaScript – Browsers Compatibility
  36. JavaScript Built in Functions

1. JavaScript Introduction


If you’re wont to making structure, content, layout and elegance in your web content, isn’t it time to feature a bit behavior as well? of late, there’s no would like for the page to merely sit there. nice pages ought to be dynamic, interactive, and they should work together with your users in new ways in which. That’s wherever JavaScript comes in.

Let’s begin by taking a glance at however JavaScript fits into the online page ecosystem:

JavaScript is a programing language designed for web content, JavaScript enhances web content with dynamic and interactive options. it runs in consumer software package.

JavaScript 1.3 works with version 4.0 browsers.

What will a JavaScript Do?

  • JavaScript offers hypertext mark-up language designers a programming tool.
  • JavaScript will response to events.
  • Client side validate.
  • It will find the visitor’s browser
  • Produce cookies.
  • Read/write/modify hypertext mark-up language elements JavaScript word.

JavaScript programming uses specialized terminology.

Understanding JavaScript terms is prime to understanding the script.

Objects, Methods, Properties, Functions, Events, Variables, Values, Operators, Expressions.

When consumer makes the request, the hypertext mark-up language and every one scripts are downloaded into your browser and so the resultant hypertext mark-up language are displayed within the browser is termed client-side script.

2. JavaScript – Syntax


JavaScript is scripting language which can be implemented using <script>JavaScript Code </script> HTML tags in a web page.

You can write this tag <script> tags, which contains your JavaScript code, anywhere within your web page, but it is recommended to keep within the <head> tags.

While loading the web page browser identified JavaScript code inside the <script> tag.

Below is the simple syntax of JavaScript.

<script>
Your JavaScript code
</script>

The script tag contains two important attributes –

  • Language
  • Type

Language − This is required to specify which scripting language you are using and the value will be JavaScript.

Type − This required to indicate the scripting language which is getting used and need to set using this attribute.

Below is the example of above two attributes

<script language = "javascript" type = "text/javascript">
JavaScript code
</script>

Case Sensitivity

all the keywords, variables, function names, and any other identifiers must always be written in Proper case.

First Hello World JavaScript Program

<html>
<body>
<script language = "javascript" type = "text/javascript">
document.write("Hello World")
</script>
</body>
</html>

Semicolons are Optional – JavaScript can be written without semicolon if each Statement is placed in separate line so it’s optional to write.

<script language = "javascript" type = "text/javascript">
var p1 = 10
var p2 = 20
</script>

Whitespace and Line Breaks – JavaScript ignores tabs , spaces , newlines which are appear in JavaScript code. You can format your code to looks better and more readable.

Comments in JavaScript – Like others language JavaScript also supports comment which is useful for code understanding.

// This is single line comment in JavaScript
/* comment */  This multiple lines comments in JavaScript
<!--. JavaScript treats this HMTL comments as a single-line comment, just like // comment.
--> This HTML comment closing sequence not recognized by JavaScript so it should be written as //-->

Below is the example for the above comments

<script language = "javascript" type = "text/javascript">
<!-- HTML opening sequence
// Single line comment
/*
* This is a multi-line comment
*
*/
//--> HMTL closing sequence
</script>

3. Enabling Javascript In Browser


All the browser supports the JavaScript, to configure that we have to enable or disable manually. To enable the JavaScript in your browser, flow the below steps

To enable the JavaScript in Google Chrome:r

  • Step 1: Click on the menu at the top right corner in the chrome browser.
  • Step 2:  Select the settings.
  • Step 3: Click on show advanced settings at the end of the page.
  • Step 4:  open the Privacy section and then click on the Content settings button.
  • Step 5:  In JavaScript section select “Allow all sites to run JavaScript (recommended)” or “Do not allow any site to run JavaScript”.
  • Step 6:  Then close the settings window.

To enable the JavaScript in Internet Explorer

  • Step 1: Click on Tools Menu in the Internet Explorer or Click on the gear icon.
  • Step 1: Select Internet Options from the Menu bar.
  • Step 2: Then Select Security Options from the dialog box.
  • Step 3: Click on the Custom Level button to proceed further.
  • Step 4: Scroll down the page until you find scripting options.
  • Step 5: Then Click on the Enable radio button under active scripting.
  • Step 6: Finally click on the OK button to save the changes.

To enable the JavaScript in Opera

  • Step 1: Open Opera browser.
  • Step 2: Click on the Opera icon at the top left of the window.
  • Step 3: Select the settings option from the menu list.
  • Step 4: Click on the website’s item on the left window.
  • Step 5: Under JavaScript heading, you will see two options “To enable JavaScript” and “To disable JavaScript”.
  • Step 6: To enable: Select the “Allow all sites to run JavaScript” (recommended).
  • Step 7: To disable: Select the “Do not allow any site to run JavaScript”.
  • Step 8: Once you selected your option, close the settings window and restart your Opera browser.

4. JavaScript (JS) – Placement in HTML File


JS Introduction

JavaScript is a scripting or programming language that allows implementing or making pages as dynamic. JavaScript can be used in different – different ways to achieve implementations.  The script should be contained or referred by an HTML document to be interpreted by the browser. It means that a web page can generate dynamic and programs also interact with the user so it will give more performance, required validation or calculation can be done at the client-side instead of sending of doing at service end.

Below are the things to be understood to place JS in HTML file

How to put a JavaScript code into an HTML page?

JavaScript code can put anywhere in an HTML document. Below are the preferred ways to implement JavaScript in an HTML file.

  • JS in <head>..JS..</head> section
  • JS in <body>..JS..</body> section
  • JS in <body>..JS..</body> and <head>…</head> sections
  • JS in an external file and this can include in <head>..JS File..</head> section.
JS in <head>..JS..</head> section

This will be used while working on some events. So this script will run when you click on an event, below is the example for the same.

<html>
<head>
<script type = "text/javascript">
function insideHead() {
alert("Hello World")
}
</script>
</head>

<body>
<input type = "button" onclick = "insideHead()" value = "ClickHere" />
</body>
</html>
JS in <body>..JS..</body> section

If you want to run the script while loading the page to generate content or other things then JS goes in the <body> part, below is the example for the same.

<html>
<head>
</head>

<body>
<script type = "text/javascript">
document.write("Hi JS placed inside body")
</script>
<h1>This is JS place in HTML understanding</h1>
</body>
</html>
JS in <body>..JS..</body> and <head>…</head> sections

You can put above two together as well, below is the example for that.

<html>
<head>
<script type = "text/javascript">
function insideHead() {
alert("Hello World")
}
</script>
</head>

<body>
<script type = "text/javascript">
document.write("Hi JS placed inside body")
</script>
<input type = "button" onclick = "insideHead()" value = "ClickHere" />
</body>
</html>
JS in <body>..JS..</body> and <head>…</head> sections

You can include JS file also to user-defined functions in file to HTML file. This will achieve code reusability. External JS file can include using script tag and src attribute below is the example for the same.

<html>
<head>
<script type = "text/javascript" src = "externalFile.js" ></script>
</head>

<body>
<h1>External JS example</h1>
</body>
</html>

5. Javascript Variables


Anything which can very is known as variable. In javascript phenomenon it can have the the datavalue with it and it is also changeable. But the type of the data which is holding by the variable is called as the data type in javascript. Will give a brief about the datatype which can be holded by the variable

Compiler checkes the type for its compatibility on all the operations whatever it is performing. So datatypes are become very important attribute of an identifier which is common in every programming language. Which determines the values which are possible that the identifier could have and possible operations can be applied. Compiler can’t compile all the operations which having illegal operations.

In javascript , we have primitive data types and object data types. var is a keyword in javascript which used to declare the variable. you have an option to declare all the variables at once in javascript. also you need not to declare the variable datatype before you start using it. which means any values can be stored in any values. If you don’t defined the variable using var keyword, javascript will be automatically considers that the value is undefined. Number, String, Boolean, Symbol, Null, Undefined are the primitive datatypes in javascript and Array, JSON, function, object and properties are the object datatypes.

Javascript can support number datatype and only one number datatype is present in it. It can store the floating point, integer values.

String datatype supports the text data which should be within double or single quotes which starts from index 0 starting from first character we mention in the text.

Boolean is true or false type database which will be used to determine some condition is true or false.

Symbol datatype is another type which can identify unique identifer.

Null datatype which says the datatype variable is an empty value.

Undefine datatype occurs when the datatype variable is not declared with var keyword.

Variable declaration and the initialization example:

Var one = 1;  //It stores numerical value
Var two = ‘two’  //it stores string value
Var three = 3.0  //it stores decimal value
Var four = true   //it stores Boolean value
Var five = null //it stores null value

It is not advised that without var key word we should not declare the variable which accidently overwrite the existing global variable.

6. Javascript Operators


Operators are always playing a crucial role in a programming language. We perform any mathematical or any special operation in programming it helps to utilize.

JavaScript supports multiple operators like:

  • Arithmetic
  • Logical
  • Comparison
  • Assignment
  • Conditional

Here is some brief description about each operator:

Arithmetic Operator

It seems to perform mathematical operations like Addition, subtraction, multiplication, division, and module.

Example:

x+y , x-y,x*y, x/y,x%y

Logical Operator

It seems to check the logical condition, check  whether the condition is true or false.. Like &&(and),||(Or),!(Logical not)

Example:

x&&y ==0, x||y!=0

Comparison Operator

It supports the following comparison operators:

Like equal(==) ,not equal(!=), greater than (>),less than(<)

Example:

(x==y), x!=y, x>y, x<y

Assignment Operator

It is also known, equal operator.

Like +=, -=,*=,/=,%= etc.

Example:

x+=y, x-=y, x*=y

Conditional Operator

Conditional operator(?:) : Conditional operator uses (?:) for true or false, it executes two or more statements.

7. Javascript if…else Statement


IF Else Statement always uses to make the decision of program and handle all the correct actions.

JavaScript uses a if-else conditional statement which performs different actions.

If Statement:

It always uses to make decisions and execute statements conditionally.

Syntax:

If(condition)
{
//statement;
}

If else Statement

It is the next step of if statement, it allows JavaScript to control the condition.

Syntax:

If(condition)
{
//Statement
}
else
{
//Statement
}

If Else If statement:

It allows JavaScript to make the correct decision out of several conditions.

Syntax:

If (expresson 1)
{
//Statements
}
Else if
{
//Statements
}
Else
{
//Statements
}

8. Javascript Switch Case


Switch case is always been used to execute expression or condition along with variable specification.

Switch case is converting the specific data into cases:

For instance:

Switch(Condition/Expression)

{
Case 1:
//Provide statement;
Case 2:
//Provide statement;
Case 3:
//Provide statement;
Default:
//Statement
}

Rather it gets the case, however, it does not find the case-control move on to default it will always be true except all the cases.

Example:

<script type=”text/javascript”>
var class=’First’;
switch(class)
{
Case ‘First’:document.write(“First class”);
Break;
Case ‘Second’:document.write(“Second class”);
Break;
Case ‘Third’:document.write(“Third class”);
Break;
Default: document.write(“unknown class”);
}
</script>

9. Javascript While Loops


For loop is the most import concept in each and every programming language. It always contains loop initialization, test statement, iteration statement.

For loop is been used to initialize or traversing the data along with a condition. Either defined increment or decrement operator at the end of conditions…

Example:

Var a;
For(a=0; a<10; a++)
{
Document.write(a);
}

Syntax:

For(initialization; test statement; iteration)

Example:

For(i=0; i<=10; i++)
Program of For Loop:
<script type=”text/javascript”>
var couter=0;
for(counter=0; counter<=10; counter++)
{
Document.write(“Current count:”+counter);
}
</script>

10. Javascript For Loop


While loop is always execute the statement or code repeatedly. It always returns true if a condition is true. Instead of If statement, We can get enhance if, which is called while loop. It never works without condition or expression. Providing some condition it will easily work to get the proper outcome.

Example 1:

Var counter=0;
While(Counter<10)
{
Document.write(Counter);
Counter++;
}

Syntax:

While(expression)
{
//statement()
}

Example 2:

<script type=”text/javascript”>
var counter=0;
while(counter<10)
{
Document.write(“Current Count:”+counter+”<br/>”);
}
</script>

11. Javascript for…in loop


For..in is used to loop over the properties of an object. The set of code inside the loop will be executed for each property of an object.

Syntax:

For(variable in Object)
{
//code here
}

Example 1:

var address = {city:"Chennai", state:"Tamil nadu", country:"India"};
var text = "";
var x;
for (x in address) {
text += address[x] + "<br>";
}
Console.log(text);

Output:

Chennai

Tamil Nadu

India

We can’t use the for..in statement to loop array values but index order is important. Below example demonstrate the reason for that.

Example 2:

var arraylist = [];
arraylist [5] = "Hello";
console.log("for...of:");
var count = 0;
for (var item of arraylist) {
console.log(count + ":", item);
count++;
}
console.log("for...in:");
count = 0;
for (var item in arraylist) {
console.log(count + ":", item);
count++;
}

Output

for…of:

0: undefined

1: undefined

2: undefined

3: undefined

4: undefined

5: Hello

for…in:

0: 5

For..of loop properly worked on with index value. But for..in.can’t do that.

12. JavaScript loop control


Loop control statements deviates a loop from its normal flow. All the loop control statements are attached to some condition inside the loop.We can achieve that in two ways.

They are:

  1. Break statement
  2. Continue statement

Break statement

Break statement is used to break the loop on some condition.

For Statement

Syntax:

For(initialization;condition;Increment/decrement)
{
If(condition)
{
Break;
}
Statements;
}

While Statement

Syntax:

Initialization;
While(condition)
{
If(condition)
{
Break;
}
Statements;
Increment/decrement;
}

Example:

<script>
for(var i=0;i<20;i++)
{
if(i==5)
{
break;
}
console.log(i);
document.write(i+"<br>");
}
</script>

Output:

0

1

2

3

4

The loop should print from 1-20.But inside loop we have given a condition that if value of  I equals to 5, then break out of loop. It will break the loop when its reach 5.

Continue statement

It is used to skip an iteration of a loop.

For Statement

Syntax:

For(initialization;condition;Increment/decrement)
{
If(condition)
{
Continue;
}
Statements;
}

While Statement

Syntax:

Initialization;
While(condition)
{
If(condition)
{
Continue;
}
Statements;
Increment/decrement;
}

Example:

for(var i=0;i<10;i++)
{
if(i%2==0)
{
continue;
}
console.log(i);
document.write(i+"<br>");
}

Output:

1
3
5
7
9

In above code when i value becomes an even number , continue forces the loop to skip without further executing any instructions inside the for loop in that current iteration.

13. Javascript labels using loop control


The break statement , without a label reference used to escape from loop or switch statement. With label reference it can be jump out any code block.

Syntax:

Label:

Statement;

For break

Break Label;

For continue

Continue Label;

Example:

var fruitlist = ["apple", "orange", "grapes", "banana"];
var text = "";
list: {
text += fruitlist[0] + "<br>";
text += fruitlist[1] + "<br>";
break list;
text += fruitlist[2] + "<br>";
text += fruitlist[3] + "<br>";
}
document.write(text+"<br>");

Output:

apple

orange

A code block is a block of code between { and }.

Javascript Functions

A Function is a set of instruction or code that is used to perform a particular task. It is will execute the code when it is called or invoked.

There are two types Functions:

  • Predefined functions
  • User-defined functions
Predefined functions

It is build-in function in javascript that are readily available for use.

Example 1:

  • Math.sin(x) – It is used to find the sin value of x .
  • Math .Sqrt(x) – It is used to returns square root of a number.
  • Math .pow(x,y) – It is used to find the power value x of y.

Example 2:

document.write(“Square root of 25 is: “+Math.sqrt(25)+”<br>”);

document.write(“Power of 5 of 3 is: “+Math.pow(5,3));

Output:

Square root of 25 is: 5

Power of 5 of 3 is: 125

User-defined functions

There are three stages for functions:

  • Function declaration
  • Function definition
  • Function call or invoke

Syntax

Function functionname(Parameter1,Parameter2 …)

{
//Set of code here
}

Function Types

There are three types of function is available in javascript.They are:

  • Named function
  • Anonymous function
  • Immediately invoked function
Named function

Named function that are defined in code with name. We can call or invoke that function using that name.

Example:

//Function definition
function welcome()
{
document.write("Welcome to Javascript");
}
welcome();//Function calling

Output:

Welcome to Javascript

Function with parameter

Parameters are used when defining a function.It may have any number of parameters. Whereas in arguments are he values the function receives from each parameter when function is called or invoked.

function addition(num1,num2)//this is parameter
{
document.write("Addition value is: "+(num1+num2));
}
addition(45,67);//Here it is called as arguments

Output:

Addition value is: 112

Function with return type

Every function is javascript will return undefined unless it specified. We can return any value from function through return keyword.

Example:

function square(num)
{
return num*num;
}
document.write("Square value is: "+square(25));

Output:

Square value is: 625

Anonymous function

It is one of the function without name. We can call the function with variable name.

Example:

var square= function (num)
{
return num*num;
}
document.write("Square value is: "+square(25));
Immediately invoked functionImmediately invoked function>

It is immediately invoked by browser as soon as found. It is automatically invoked by browser without any call.

Example:

(function()
{
document.write("This is Immediate called function.");
})();

Output

This is Immediate called function.

14. Javascript events


Events are states of change on html controls. We can execute the javascript code when an something changes occurred in html controls occurs. It may does by user or browser.

Example of Events

  • HTML page finished loading
  • When click on the button
  • When mouseover the content or HTML Controls.

When particular events occur we can execute the javascript code.HTML event handler attributes available for HTML tags

Syntax:

<tagname event=”JS  call”>

Example:

<input type=”button” onclick=”Welcome();”>

When button is clicked, It will call the javascript welcome function.

Common events

  • Onclick – It will fire when click event happen.
  • Onsubmit – It will fire when submit event happen
  • OnMouseOver- When over the content
  • Onload – When HTML page finished the loading
  • Onmouseout – When mouse out the controls.
  • Onchange – when input value was changed.
  • Onkeydown – when Keyboard key pressed

Example:

<html>
<body>
<script type = "text/javascript">
function addition(num1,num2)//this is parameter
{
document.write("Addition value is: "+(num1+num2));
}
</script>
<input type="button" onclick="addition(56,78);" value="Addition">
</body>
</html>

Output:

When click the Addition button it will shows:

Addition value is: 134

15. Javascript and Cookies


Cookies are small amount of data or plain text  files that is stored in a browser.  Cookie are user information of web page.

  • Create the cookie
  • Read the stored cookie value
  • Modify the cookie value
  • Delete the cookie

Cookies are stored in a name value pair.

Username=”David”

Create the cookie:

Javascript cookies are created by document.cookie property.

document.cookie =” fname =David”
document.cookie =” lname =Selandar”

Read the stored cookie value

We  Can get all storied value in cookie of the browser as:

document.cookie

It will how all cookie value as name vale pair.  Output will be

fname= David; lname= Selandar

Modify the cookie value

We can modify the cookie value same way as create like:

document.cookie =” fname =Martin”

document.cookie =” lname =Walton”

Delete the cookie

We can delete the cookie through value as empty and expiry date as a past value

document.cookie = ” fname =; expires=Wed, 01 Jan 1940 00:00:00 UTC; path=/;”;

16. Page Redirection


There square measure a few of the way to direct to a different webpage with JavaScript.

  • If the domain owner not interested about name then change to new name. In such a situation, owner might be  want to direct all guests to the new domain. Here you’ll be able to maintain your recent domain however place one page domain with a page domain redirection specified all of your recent domain guests can return to your new domain.
  • If domain owner create multiple pages depends on the versions of browsers based on the various countries , then replace of of using page redirection use client-side page domain redirection to land site users on the suitable page.
  • The page which is used for search it is already indexed. But whereas moving to a different domain,owner wouldn’t feel to lose your guests by through coming  search engines. So owner can use client-side page domain redirection. But detain mind this could not done make fool the programmer, it may lead your website to urge illegal.

JavaScript URL Redirection

you can use several ways to airt an online page to a different one. Almost all methods are related to window. Placed object, it is a attribute of the Window object. It are often accustomed get this URL address (web address) and to airt the browser to a replacement page.

.href = "https://www.besanttechnologies.com/";
.replace("https://www.besanttechnologies.com/");

Example 1:

<html>
<head>
<script type = "text/javascript">
<!--
function Redirect() {
window.location = "https://www.besanttechnologies.com";
}         //-->
</script>
</head>

<body>
<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type = "button" value = "Redirect Me" onclick = "Redirect();" />
</form>
</body>
</html>

Example 2:

The following example shows how to redirect your site with setTimeout() function

<html>
<head>
<scripttype="text/javascript">
<!--functionRedirect()
{window.location="https://www.besanttechnologies.com";}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()',10000);//-->
</script>
</head> 
<body>
</body>
</html>

Example 3:

The following example shows how to redirect your site visitors onto a different page based on their browsers.

<html>
<head>
<scripttype="text/javascript">
<!--varbrowsername=navigator.appName;
if(browsername=="Netscape")
{window.location="http://www.location.com/ns.htm";}
elseif(browsername=="Microsoft Internet Explorer")
{window.location="http://www.location.com/ie.htm";}
else
{window.location="http://www.location.com/other.htm";}//-->
</script>
</head>
<body>
</body>
</html>

17. Dialogue Boxes


This boxes are often accustomed alert  and raise  or to urge confirmation on any predefined input or to user defined input. this are going to discuss every panel one by one.

Aleart Box

It is used in the website for  show the message of warning  to the user that they have wrong  entered the value other than else  what is the  required to filled  that place. an alert box can we still to be used as a user friendly messages. Alert box provides just one button “OK” to pick out and proceed.

Example :

<html>
<head>
<script type = "text/javascript">
function Warn() {
alert ("welocmebesant technologies");
document.write ("This is a warning message!");
}
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form></body></html>

Output:

Alert Box

Alert Box Output

Confirmation Dialog Box

A make sure box is commonly used ,if the user  wish  to verify or settle for one thing. When a make sure pops up  of box, user can have to be compelled to confirm either “OK” or “Cancel” to move further.  user confirm on the OK button, the window functionality confirm()  return true. if user confirms  on the Cancel button, then it will returns false and it show null.

<html>
<head>
<script type = "text/javascript">
<!--
functiongetConfirmation() {
varretVal = confirm("Do you want to continue ?");
if(retVal == true ) {
document.write ("stubdent  wants to continue!");
return true;
               } else {
document.write ("stubdent does not want to continue!");
return false;
               }
            }
         //-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>

Output:

Confirmation Box

Prompt Dialog Box

A prompter’s box is usually used if you would like the user want  to input a worth before getting into a page. When prompter’s  pops up  box, the user can ought to confirm either “OK” or “Cancel” to proceed when getting into Associate in Nursing input worth. If  user confirms the OK button, the window method it will return the entered data from the text box. If  user confirms the Cancel button, the window method it will returns null.

Example:

<html>
<head>
<script type = "text/javascript">
<!--
functiongetValue() {
varretVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>

Output:

Prompt Dialog Box

18. Void Keyword


void is a vital keyword in JavaScript which might be used as a single operator that seems before its single quantity, which can be of any sort. This operator specifies associate degree expression to be evaluated while not returning a price.

Syntax:

The syntax of void can be either of the following two −

<head>
<script type = "text/javascript">
<!--voidfunc()javascript:voidfunc()or:void(func())javascript:void(func())      //-->
</script>
</head>

Example 1:

Here the expression alert (‘Warning!!!’) is evaluated but it is not loaded back into the current document −

<html>
<head>
<scripttype="text/javascript"><!--//-->
</script>
</head>
<body>
<p>
Click the following, This won't react at all...
</p>
<ahref="javascript:void(alert('Warning!!!'))">Click me!
</a>
</body>
</html>

Output:

Example :

<html>
<head>
<scripttype="text/javascript"><!--//-->
</script>
</head> 

<body>
<p>Click the following, This won't react at all...</p>
<ahref="javascript:void(0)">Click me!</a>
</body>
</html>

Example :

<html>
<head>
<scripttype="text/javascript">
<!--functiongetValue(){vara,b,c;   a =void( b=5, c =7);
document.write('a = '+ a +' b = '+ b +' c = '+ c );}//-->
</script>
</head> 

<body>
<p>Click the following to see the result:</p>
<form>
<inputtype="button"value="Click Me"onclick="getValue();"/>
</form>
</body> 
</html>

Output:

void keyword output

19. Page Printing


Page print in JavaScript may be a straightforward code in JavaScript wont to print the content of the net pages.

  • The print() is the output method ,it is used prints the data one the current window.
  • It is basically opens Print output dialog box which is used to let you select the between different printing options.

Syntax:

window.print()

Parameters – No parameters required

Returns – This function do not return anything

Example :

<!DOCTYPE html>
<html>
<head>                                   
<script type="text/javascript">            
</script>            
</head>            
<body>                        
<h2>HI Besant Technologies USER'S</h2>           
<form>                      
<input type="button" value="Print" onclick="window.print()" />          
</form>          
</body>
<html>

Output:

page printing output

 

Page Printing

20. Objects Overview


It is a OOP based programming language. A programing language is known as object-oriented, it is having  four basic capabilities to developers

  • Encapsulation : Is a mechanism to bind methods and data in one unit.
  • Aggregation : Having the strong relations in between objects.
  • Inheritance : Reusing the old properties for new class.
  • Polymorphism : Single functions multiple developments.

Object Properties

Any of the abstract information sorts, like another object. Object properties area unit sometimes variables that area unit used internally within the object’s strategies, however may also be globally visible variables that area unit used throughout the page.

syntax:

objectName.objectProperty = propertyValue;

Example:

varstr = document.title;

Object Methods

There is alittle distinction between a operate ANd a way – at a operate may be a predefined unit of statements and a way is hooked up to it and can be called by the keyword is this.

Methods area unit helpful for all from displaying the data of the thing to the screen to playing complicated mathematical functionalities  on a bunch of native parameters  and properties.

Example:

Following may be a easy example to indicate the way to use the method  write() of document object to wrote down any data on the document.

documentcustom.write("This is test");
Non Pre-Defined Objects

All non pre-defined objects and  in-built objects are descendants to an object known as Object.

New Operator

It is employed to make object  is instance . To do an object, it  is followed the builder technique.

In the following illustration of an example, the builder strategies are Date(),Array(), and Object().

It is  in- built JavaScript functions.

var newemployee =new_Object();
var newbooks =new_Array(,"Java","Perl","C++",);
var newday =new_Date("January 20, 1947");

The Constructor of an Object()

A builder may be a perform that makes Associate of an object initializes . it is gives a special builder perform referred to as Object() to make the item. The come back price to an Object() builder is appointed to the variable.

Try the following example; it demonstrates how to create an Object.

Example 1:

<html>
<head>
<title>
User-defined objects
</title>
<scripttype="text/javascript">
var book =newObject();
// Create the objectbook.subject="Technology";
// Assign properties to the objectbook.author="Besant";
</script>
</head> 
<body>
<scripttype="text/javascript">
document.write("Book name is : "+book.subject+"<br>");
document.write("Book author is : "+book.author+"<br>");</script>
</body>
</html>

Output:

Book name is : TechnologyBook author is :Besant

Example 2:

This example demonstrates how to create an object with a User-Defined Function. Here this keyword is used to refer to the object that has been passed to a function.

<html>
<head>
<title>User-defined objects</title>
<scripttype="text/javascript">
function book(title, author)
{this.title= title;this.author= author;}
</script>
</head> 
<body>
<scripttype="text/javascript">
varmyBook=new book("Technology","Besant");
document.write("Book title is : "+myBook.title+"<br>");
document.write("Book author is : "+myBook.author+"<br>");
</script>
</body>
</html>

Output:

Book title is : TechnologyBook author is :Besant

Defining Methods for an Object

The previous examples demonstrate however the creator creates the item and assigns properties. But we want to complete the definition of Associate in Nursing object by distribution ways thereto.

Example:

Try the following example; it shows how to add a function along with an object.

<html>
<head>
<title>User-defined objects</title>
<scripttype="text/javascript">
// Define a function which will work as a methodfunctionaddPrice(amount)
{this.price= amount;}
function book(title, author)
{this.title= title;this.author= author;this.addPrice=addPrice;
// Assign that method as property.}
</script>
</head> 

<body>
<scripttype="text/javascript">
varmyBook=new book("Technology","Besant");
myBook.addPrice(100); 
document.write("Book title is : "+myBook.title+"<br>");
document.write("Book author is : "+myBook.author+"<br>");
document.write("Book price is : "+myBook.price+"<br>");
</script>
</body>
</html>

Output

Book title is : Technology

Book author is :Besant

Book price is : 100

JavaScript Native Objects

It  has several in-built or native objects. This objects area unit accessible anyplace in your code and can work an equivalent approach in  browser running in any software system.

21. Javascript The Number Object


The Number object states the numerical date, i.e. integers or floating numbers. We don’t have to care about Number objects because the browser internally responsible for the conversion between number literals to instances of number class.

Syntax:

var testVar = new Number(number);

here, number should be numerical value, if any non-numerical argument, then it can not be converted into a number, and it returns Not-a-Number(NaN).

Properties of Number

1. MAX_VALUE The maximum possible value of a number 1.7976931348623157E+308

2. MIN_VALUE The minimum possible value of a number 5E-324

3. NaN Not a number

4. NEGATIVE_INFINITY Less than MIN_VALUE

5. POSITIVE_INFINITY Greater than MAX_VALUE

6. prototype Prototype is the static Number object property, The usage of Prototype to assign new properties as well as methods to Number object in the current document.

7. constructor Default this it the Number object. It will returns the function that created this object’s instance.

Number Methods

isFinite(): To check the value is the finite number or not.

isInteger(): To check value is the integer or not.

parseFloat(): To make conversion of given string into the floating point number.

parseInt(): To make conversion of given string into an integer number.

ToExponential(): Returns exponential notation of the number.

toFixed(): Fixed a number with a specific number of digits after the decimal of the number.

toPrecision(): By using this we can defines total number digits including digits from both ends left and right of the decimal to display.

toString(): Returns string representation of the given number.

22. Javascript The Boolean Object


The Boolean object have 2 values only i.e. “true” or “false”. If argument left blank or have undefined, Empty string “”, or like these values, so initially object will have false value.

Syntax:

var testVar = new Boolean(value);

Properties of Boolean

1. prototype Prototype to assign new properties as well as methods to Boolean object.

2. constructor Returns reference of Boolean function that created Boolean object.

Boolean Methods

toSource(): Provide the calling source of Boolean object as in the string.

toString(): Use to convert Boolean object into String.

valueOf(): Returns the primitive value of the Boolean object.

23. Javascript The String Object


The String object helps to store more than one character in the single variable as the series of the characters.

Syntax:
var testVar = new String(string);

Properties of String

1. prototype Prototype to assign new properties as well as methods to an object.
2. constructor Returns reference of String function that created object.
3. length Gives the length of the string.

String Methods

charAt(): To get an index.

charCodeAt() To get the Unicode value of a character.

concat(): Combine of two or more strings.

indexOf(): Helps to find the position of a character value in the given string.

LastIndexOf(): Search from the last of the string and give index of it.

search(): Helps to search within the string and give index of it.

match(): Search for the expression in the string and give that as an output.

replace(): Helps to replace some part of the string at particular index.

substr(): To get the part of the string using in index value and length of the string.

substring(): Get part of the string based on index.

slice(): Get part of the string based on +ve as well as -ve index of the string.

toLowerCase(): To change the string from upper case to lowercase. 13.toLocaleLowerCase() To change the string

from upper case to: lowercase based on the host system.

ToUpperCase(): To change the string from lower case to uppercase

toLocaleUpperCase(): To change the string from lower case to uppercase based on the host system.

toString(): Helps to get the string refers to the object.

valueOf(): Give the primitive value of string.

24. Javascript The Arrays Object


The Array object can store more than one value (which should same in data type) in a single variable. Array is fixed size collection of values, it used to store collection of data.

Syntax:

var testVar = new Array(“value1”, “value2”, “value3”);

Example:

var human = [ “hair”, “nose”, “face”];

Properties of Array

1. prototype Prototype to assign new properties as well as methods to an object.
2. constructor Returns reference of Array function that created Array object.
3. index Represents index which is starts with 0.
4. input For regular expression matches.
5. length Number of elements in the Array.

Array Methods

concat(): Combine two or more arrays into the new array.

copywithin(): Copy the array itself for the given elements.

every(): To checks if all the elements of particular array have validate conditions as per the function or not which is provided to it.

fill() : Helps to fill elements to an new array.

filter(): Filter the array based on the passing arguments.

find(): Helps to find the element based on a condition specified to it.

findIndex(): Return the index of the element.

forEach(): Loop through the elements of an array one by one.

includes(): To find particular element is represent in an array or not. 10.indexOf() Helps to search the array for specific element and return index of it in first match.

join(): Combine the element of the array and returns the string. 12.lastIndexOf() Same as indexOf() but starts from the last element of the array.

map(): Helps to call the function for elements and give the new array.

pop(): Delete the last element of the array.

push() Add element or elements at the last element of the array.

reverse(): Reverse the array elements.

shift(): It delete and give the first element.

slice(): Based on index it cuts the array into new array. 19.sort() Helps to sort the array into specific sorting.

splice(): It helps in adding or removing the elements from the array.

unshift(): To add elements at the starting of array.

25. Javascript The Date Object


Date Objects:

The Date object helps to get day, month and year. We can use different constructors to create Date object, as shown in syntax below.

Syntax:

new Date( ) new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])

Properties of Date

1. prototype Prototype to assign new properties as well as methods to an object.
2. constructor Returns reference of function that created object.

Date Methods

getDate(): Gives the date between 1 and 31.

getDay(): Gives Day value between 0 and 6.

getFullYears(): Gives the Year value.

getHours(): Gives the value between 0 and 23.

getMilliseconds(): Gives the integer value between 0 and 999.

getMinutes(): Gives the integer value between 0 and 59.

getMonth(): Gives the integer value between 0 and 11.

getSeconds(): Gives the integer value between 0 and 60.

getUTCDate(): Gives the integer value between 1 and 31 based on universal time.

getUTCDay(): Gives the integer value between 0 and 6 on universal time.

GetUTCFullYears():Gives the integer value of the year based on universal time.

getUTCHours(): Gives the integer value between 0 and 23 based on universal time.

getUTCMinutes(): Gives the integer value between 0 and 59 based on universal time.

getUTCMonth(): Gives the integer value between 0 and 11 based on universal time.

getUTCSeconds(): Gives the integer value between 0 and 60 based on universal time.

setDate(): Sets day for the specific date based on the local time.

setDay(): Sets week day based on local time.

setFullYears(): Sets the year value for the specified date based on local time.

setHours(): Sets the hour value for the specified date based on local time.

setMilliseconds(): Sets the milliseconds value for the specified date based on local time.

setMinutes(): Sets the minutes value for the specified date based on local time.

setMonth(): Sets the month value for the specified date based on local time.

setSeconds(): Sets the seconds value for the specified date based on local time.

setUTCDate(): Sets the day value for the specified date based on universal time.

setUTCDay(): Sets the day of the week based on universal time.

setUTCFullYears(): Sets the year for the specified date based on universal time.

setUTCHours(): Sets the hour for the specified date based on universal time.

setUTCMilliseconds(): Sets the milliseconds for the specified date based on universal time.

setUTCMinutes(): Sets the minutes for the specified date based on universal time.

setUTCMonth(): Sets the month for the specified date based on universal time.

setUTCSeconds(): Sets the seconds for the specified date based on universal time.

toDateString(): Gives the date part of a Date object.

ToISOString(): Gives the date in ISO format string.

toJSON(): Gives the Date object for JSON serialization.

toString(): Convert date into the string.

toTimeString(): Gives the time part of a Date object.

toUTCString(): Converts date in the form of string by UTC time zone.

valueOf(): Gives the primitive value of the Date object.

26. JavaScript Math Object


Allows you to perform mathematical tasks on numbers. It supports numbers, fractions, units, strings, constants.

Does symbolic computation. (i.e: Symbol(Symbol.toStringTag): “Math”)

Available in both Command Line Interface(CLI) & User Interface (UI) with a large set of built-in functions and constants. And also runs in all kind of JavaScript engine

All properties and methods of Math are static(i.e: can’t modify).

“Math” is a Object available with “window” object in browser and in with “global” object in CL.

In the following sections, we will have a few examples to demonstrate the usage of the methods associated with Math.

Constants

Examples:

Euler’s constant (e)

Math.E; // 2.71828

Natural logarithm of 2

Math.LN2; // 0.69314

Math.LOG2E

Math.LOG2E; // 1.44269

Ratio of the circumference of a circle to its diameter

Math.PI; // 3.14159

Methods

Examples:

Numerical Functions

Returns the absolute value of x.

Math.abs(‘-1’); // 1

Math.abs(5.999);  // 5.99

Returns the value of x to the power of y

Math.pow(8, 2); // returns 64

Returns the smallest integer greater than or equal to a number

Math.ceil(.95); // 1

Math.ceil(7.004); // 8

Math.ceil(-0.95); // -0

Returns x rounded to the nearest integer

Math.round( 70.49); //  70

Math.round( 80.5);  //  81

ath.round(-30.5);  // -30

Trigonometric functions (Return angles as radiants)

Math.acos(-2);  // NaN

Math.acos(-1);  // 3.141592653589793

Math.acos(0);   // 1.570796326794896

To convert radians to degrees, divide by (Math.PI / 180) * Math.asin(0.5); // 0.009138522593601258

Note: The Math.asin() method returns a numeric value between – π/2  and  π/2  radians for x between -1 and 1.

27. Regular Expression


An regular expression is a string, which is the combination (or) sequence of characters. It is widly used as a search pattern on strings operations like; find, find & replace. In morden browsers, Javascript provides a standard constructor function “RegExp” to support regular expression.

Syntax:

x = new RegExp(<string>, <options>) - Constructor representation
y = /<string>/<options> - Literal representation

Note: For same input both x & y will give same regular expression.

Available options:

g – Uses for global search

i – Uses for case-insensitive search

m – Uses for mulitline search

Example 1: /Regular Expression/gi.test(<string>)
Example 2: /[xyz]/ (or) /[0-9]/ (or) /[a-zA-Z]/     
Search any one character from the string
Example 3: /[^xyz]/ (or) /[^0-9]/ (or) /[^a-zA-Z]/
Search any one character from the string that is not present inside the brackets
Example 4: /[p|q]/     
Search any alternate character from the string
Example 5: /\s/
Search for a space in the string and returns the 1st match
Example 6: /\w+/            
Search for multiple words in the string and returns those in an array
Search Includes (_, 0-9, A-Z, a-a )
Example 7: /^.{4}$/
Search for string that contains only 4 characters.

Methods:

test() – search the pattern for a match in the string and return true if the pattern found or else returns false.

exec() – search the pattern for a match in the string and return the first search value.

28. Javascript Document Object Model


DOM – Document Object Model; Represents a element Object tree

DOM is nothing but a Object or a platform that provides access to update the content & structure and view(i.e: style)of the document. There are 3 types of DOM available. And those are:

  • Core DOM – Standard Object representation for all types of DOM. (i.e: Base for other DOM)
  • XML DOM – Standard Object representation for all types of XML Document
  •  HTML DOM – Standard Object representation for all types of HTML Document

XML DOM & HTML DOM are the standard Object representation/Model and Interface for XML & HTML.

When a document loads into browser then browser parses the XML/HTML program and converts the elements into Objects.

The attributes of each element will act as a property in that Object. And the events will bind to the Objects so that directly developer can execute those methods. After parsing the whole DOM, each and every wrapper elements formed as NodeList and added into HTMLNodeList. As the HTMLNodeList connected to Javascript so it is for the developer to perform some action like: element addition, element removal, element update, attribute update, style change.

29. Javascript Errors & Exceptions Handling


You will get Errors in Javascript may be because of our mistakes, an unexpected user input, an erroneous server response and etc. Usually current execution block of the script will dies (stops the execution) in case of any error and prints in the console.

Type Of Errors

Bellow are the Errors present in Javascript.

  • EvalError : The error has occurred in the eval() function.
  • RangeError : A numbers are “out of range” has occurred
  • ReferenceError : Because of an illegal reference
  • SyntaxError : Occurred when a statement violates the syntax of the language
  • TypeError  : Occurred when incompatible types are operating together. (i.e: 1..toUpperCase())
  • URIError : Occurred when encodeURI() has problems

Apart from this you can create a custom error with a message. Ex: throw new Error(‘My Custom Message’)

How to handle these erros?

try..catch that allows to “catch” errors and, handles that error scenario by doing some reasonable like logging info or routing to some different view.

Syntax:

try {
// Block of code to try
}
catch(err) {
//Block of code to handle errors
}
finally {
// Block of code to be executed regardless of the try / catch result
}

How it works?

  • First the code in try{…} block will execute.
  • If there is any error occurred then the control of execution goes to catch(err){…} block leaving the try{…} block scope.
  • The “err” variable in “catch” block will be holding all the information related to the error occured in “try” block.
  • Atlast irrespective of any success or failure or error scenarios finally{…} block will execute. This is for clean up activity.

Example 1:

const x = 5
try {
console.log(y) // y is not defined, so throws an error i.e: ReferenceError
} catch (error) {
console.error(error) // will log the error with the error stack
} finally {
console.log(x) // will always get executed
}

Example 2:

Promise.resolve("Success Response")
.then(res => {
console.log(res) // Success Response
throw new Error('something went wrong')
})
.catch(err => {
console.error(err) 
// we will see the error message (i.e: something went wrong) here.
resolvedFunction("resolved value at error handler") 
// we handled the error and we decided to resolve the error with some value
})

30. Form validation in Javascript


We can validate our client side forms logic with Javascript Form Validation and it prevents sending malicious/unaccepted data to server from client. If any web page accepts user information/inputs, then that information need to be checked because may be the data entered is inappropriate for our server. If web page handles client side validation for user inputs then the data processing will be faster in server.

Form Validation includes 2 types of functions. i.e: Basic Form validation & Form Data validation

  • Basic Form validation: All the required fields need to be filled.
  • Form Data validation: Entered data should be appropriate as per acception

Example:

<html>
<body>
<header></header>
<main>
<form name="formForValidation" onsubmit="return validate();">
<table>
<tr>
<td>Full Name: </td>
<td>
<input name="name" type="text" />
</td>
</tr>
<tr>
<td>Username: </td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</main>
<footer>
<script>
function validate() {
let isValidated = true;
// Basic Form Validation
document.querySelectorAll('input[name]').forEach(node => {
if (!node.value) {
isValidated = false;
});
/*** Form Data Validation
* 1. check valid email id
* 2. check valid alphanumeric password with minlength = 8
*/const emailRegEx = /^(([^<>()[\]\\.,;:\s@\"]+
(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+
[a-zA-Z]{2,}))$/;
const email = document.formForValidation.email.value;
if (!(email && emailRegEx.test(email))) {
isValidated = false;
}
const alphanumeric = /^([a-zA-Z0-9 _-]+)$/;
const password = document.formForValidation.password.value;
if (!(password && alphanumeric.test(password) && password.length > 7)) {
isValidated = false;
}
console.log(`Form Validation: ${isValidated}`);
return isValidated;
}
</script>
</footer>
</body>
</html>

31. Animation in Javascript


Animation it means do something make it happens moving . something like text or images in the browser.

  • Can you make animation in javascript by using three important functions like setTimeout(), setInterval(),clearTimeout().
  • In javascript make animations with DOM elements. Using DOM element move from right to left like this.
  • You can make it DOM object using position on the screen.

Type of Animation in Javascript

Manual Animation

Using the DOM object get the value of the element of the HTML tag in the page by using getdocumentElementByID() method.

Automated Animation

Using setTimeout(),setInterval(),ClearTimeout() using those functions do the automated animation.

Animation in Javascript

  • SetTimeout(function, duration)

This function calls the function after duration miiliseconds now.

  • SetInterval(function,duration)

This function call the function after every duration milliseconds.

  • clearTimeout(settimeout variable)

This function clears any timer set by settimeout function.

Animation in Javascript

To set any object in the screen as following syntax

object.style.left = distance in pixels or points.

Example:

object.style.left = “20px”;

object .style.top = “20px”;

Manual Animation

Manual Testing

OutPut:

file:///F:/javascript-animation/manual-animation.html

Manual Testing Output

Automatic Automation

Automatic Animation

OutPut:

file:///F:/javascript-animation/auto-animation.html

Automatic Animation Output

Mouse Operation

Mouse Operation

Output:

file:///F:/javascript-animation/mouse-animation.html

Mouse Operation Output

32. Java Script Multimedia


The JavaScript navigator object incorporates a scamp object called plugins. This object is an exhibit, with one passage for each module introduced on the browser.

The plugins is supported by Firefox, Mozilla and Netscape only

JavaScript multimedia can be used to include any movies and music etc., You can play back control for any video players.Using <video> tag to include video in html pages. Multimedia in javascript having navigator object includes child object is called plug-ins.Using plug-ins to include multimedia in an html pages like  Adobe Flash Player. Using the  above plug-ins you can play any video files or audio files.

Here list some plugins installed in your browser

Javascript Multimedia

Multimedia Table

Checking for Plug-Ins and Controlling Multimedia

Every enty having following types of possessions

  • Name
  • File Name
  • Description
  • Mime type

Multimedia supports video or audio formats. Video formats like MPEG,AVI,WMV,Flash,MP4. Audio formats like MP3,MP4,WMA,WAV. You can add video or audio using plug-ins.

<video src=“rabbit320.webm” controls>
</video>

plugins cheacking and controlling multimedia
Output:

Multimedia Output

33. Debugging in JavaScript


An oversight in a program or a content is alluded to as a bug. The way toward finding and fixing bugs is called troubleshooting and is a typical piece of the advancement procedure. This segment spreads devices and strategies that can assist you with troubleshooting undertakings..

Error Message in Internet Explorer

The most essential approach to find blunders is by turning on mistake data in your program. Of course, Internet Explorer demonstrates a mistake symbol in the status bar when a blunder happens on the page. error message in internet explorer Double tapping this symbol takes you to a discourse box appearing about the particular blunder that happened. Enable the option, select Tools -Internet Options -Advanced tab. After click on Display a Notification About Every Script Error. Error Notification

Error Notifications:

Mistake notices that appear on Console or through Internet Explorer exchange boxes are the aftereffect of both sentence structure and runtime blunders. These mistake notice incorporate the line number at which the blunder happened. On the off chance that you are utilizing Firefox, at that point you can tap on the mistake accessible in the blunder reassure to go to the definite line in the content having mistake.

Way to debug the Scrip:
Use java Script Validator

One approach to check your JavaScript code for weird bugs is to run it through a program that checks it to ensure it is substantial and that it pursues the official linguistic structure principles of the language. These projects are called approving parsers or only validators for short, and regularly accompany business HTML and JavaScript editors. Javascript Validator

Use Java Script Debugger

A debugger is an application that places all parts of content execution under the control of the software engineer. Debuggers give fine-grained power over the condition of the content through an interface that enables you to analyze and set qualities just as control the progression of execution. When a content has been stacked into a debugger, it very well may be run one line at any given moment or taught to stop at certain breakpoints. When execution is stopped, the software engineer can analyze the condition of the content and its factors so as to decide whether something is wrong. You can likewise watch factors for changes in their qualities. Javascript Debugger

34. Image Map on Java Script


Image map in JavaScript is an image already on that a web page it gives different connects to explore to other web pages or a few segments of a similar web page. we can say those different connections as hotspots. We can use any shape such as Polygon, Square and React angle. On the off chance that we need to make a rectangular image map, at that point you need two distinctive coordinates, for example, upper right and base left. On the off chance that you need to make a roundabout image map, at that point you need focus co-ordinate. In the event that we need to make a polygon image map, at that point you need diverse number of co-ordinates. What’s more, last, on the off chance that weneed to make a pentagon shape image map, at that point you need five co-ordinates. Use MAP component to characterize image maps. Each image map has a one of a kind name. Consequently, the name property is required in the MAP component. wecan add usemap credit to the IMG component to relate an image map with an image. Imagemap Imagemap Output

35. JavaScript – Browsers Compatibility


When we are Developing any web pages or using JavaScript code it’s very important to know which browser and version of the browser our web page is running because we need to handle the code in such a way that it should be compatible across all the browser.

Example:

includes() method in JavaScript determines whether an array contains certain value in its entries, it will return true or false based on the value passed.

Internet  Explorer Browser does not support this method we will get an exception “includes() function undefined” for this we need to use an alternative solution indexOf().

Here comes the browser compatibly issue we need to handle this kind of issues so that it does not break our functionality.

We have built-in object “navigator” in JavaScript to get the information about the browser where your web page is running.

Navigator Properties

There are several Navigator Properties that you can use in when you create when pages

  • appCodeName

This object variable returns string which contains the code name of the browser.

Example: Mozilla for Chrome and Microsoft Internet Explorer for Internet Explorer.

  • appVersion

This object variable returns string which contains the information like such as its language and                   compatibility

  • language

This object variable returns string which contains the language that is used by the browser

Example:”en-us”

  • mimTypes

This object variable returns Array which contains the  MIME Type supported by the browser.

Example:”en-us”

  • platform

This object variable returns string which contains the information about which platform the browser complied
Example: “Win32”

  • plugins

This object variable returns Array which contains the information about all the plugins installed in the browser

Example: “Win32”

  • userAgent

This object variable returns string which contains the information like such as its language and                   compatibility.

Navigator Methods

  • javaEnabled()

This Function Returns Boolean value check whether java is enabled in browser.

  • plugins.refresh()

This Function Returns Array of plugins which is newly installed and with older plugins too in the         browser

  • preference(name,value)
  • taintEnabled()

This Function Returns Boolean value check whether tainting is enabled in browser.

Example:

<html>
<body>
<script>
var SampleArr = [‘Besant-BTM’,’Besant-HSR’];
var browser = navigator.userAgent;
var ie = (browser.indexOf(‘MSIE’) !=  -1);
var browserVersion = navigation.appVersion;
var chrome = (browser.indexOf(‘Mozilla’) !=  -1);
/*checking browser and handling code based on the browser compatibily*/
If(!Ie){
If(SampleArr.includes(‘Besant-BTM’)){
Document.write(‘Other than IE Browser’);
}
}else{
If(SampleArr.indexOf(‘Besant-BTM’) > -1){
Document.write(‘ IE Browser’);
}
}
Document.write(‘ <br> Browser Version </br>:’+ browserVersion);
</script>
</body>
</html>

Output :

Other than IE Browser

Browser Version </br>: 5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like  Gecko) Chrome/74.0.3729.169 Safari/537.36

36. JavaScript Built-in Functions


Number Methods

Constructor() : It is a blueprint for creating and initializing for an object created.

Example:

<body>
<script type = "text/javascript">
var example = new example ( 99.23);
document.write("example.constructor() is : " + example.constructor);
</script>
</body>

toExponential() : It is a method that is used for representing a string or a number in the Exponential format.

Example:

<body>
<script type = "text/javascript">
var num = 94.822;
var example = example.toExponential();
document.write("num.toExponential() is : " + val );
</script>
</body>

The expected output for the above example is 94.822e+1

toFixed() : This is method of freezing the digits that has to be appeared towards the right side of the decimal number.

Example:

<body>
<script type = "text/javascript">
var example = 986.023;
document.write("example.toFixed() is : " + example.toFixed());
document.write("example.toFixed(6) is : " + example.toFixed(6));
</script>
</body>

In the above example the expected output is

986
023000

toLocaleString() : It is a method that is used to convert number into a String format.

Example:

<body>
<script type = "text/javascript">
var example = new Number(843.18299);
document.write(example.toLocaleString());
</script>
</body>

Expected output

843.18299

toPrecision() : It is a method that signifies the total number of digits to be displayed irrespective of the decimal digits.

Example:

<body>
<script type = "text/javascript">
var example = new Number(9.4822456);
document.write("example.toPrecision(4) is " + example.toPrecision());
document.write("example.toPrecision(1) is " + example.toPrecision(1));
</script>
</body>

Expected output is

482
9

toString() : It is a method of representing a value that is given in the string format that uses radix( It is an integer that ranges from 2 – 36 indicating base the use of representing numeric values) as an first argument.

Example :

<body>
<script type = "text/javascript">
example = new exampleber(15);
document.write("example.toString() is " + example.toString());
document.write("example.toString(2) is " + example.toString(2));
document.write("example.toString(4) is " + example.toString(4));
</script>
</body>

Expected output is

99

1100011

1203

valueOf() :

This method represents the primitive value of specified integer number.

Example:

<body>
<script type = "text/javascript">
var example = new exampleber(94.822);
document.write("example.valueOf() is " + example.valueOf());
</script>
</body>

Expected output is

822

Boolean Methods

toSource() : It is a method that returns a string which contains the source code of the object.

Example :

<script type="text/javascript">
function employee(name ,jobtitle ,born)
{
this.name=name;
this.jobtitle=jobtitle;
this.born=born;
}
var employe =new employee("MSP","Developer",1996);
document.write(employe.toSource());
</script>

Expected Output is

({name:"MSP", jobtitle:"Developer", born:1996})

toString() : This is method that returns either ‘true’ or ‘false’ depending of the value that has passed from source.

Example :

<body>
<script type = "text/javascript">
var bool = new Boolean(true);
document.write( "bool.toString is : " + bool.toString() );
</script>
</body>

Expected ouput is

true

valueOf() : This is a method that returns a number representing the primitive value specified.

Example :

<script type="text/javascript">
var example=0/0;
document.write("Output : " + example.valueOf());
</script>

Expected Output

“NaN”

String Methods

charAt() : This method in javascript is used to specify the position of the Character or Alphabet in an string by passing the Index.

Example :

<body>
<script type = "text/javascript">
var position = new positioning( "I am coding" );
document.writeln("position.charAt(2) is:" + position.charAt(1));
document.writeln("position.charAt(6) is:" + position.charAt(3));
</script>
</body>

Expected output is

charAt(2) is: a
charAt(6) is: o

charCodeAt() : This method returns the number that has a Unicode value of a character at the given index.

Example:

<body>
<script type = "text/javascript">
var str = new String( "my name is Software" );
document.write("str.charCodeAt(0) is:" + str.charCodeAt(0));
document.write("<br />str.charCodeAt(4) is:" + str.charCodeAt(1));
document.write("<br />str.charCodeAt(11) is:" + str.charCodeAt(11));
</script>
</body>

Expected output is

charCodeAt(0) is:109
charCodeAt(4) is:97
charCodeAt(11) is:83

concat() : This method combines two string and merge it as a single string.

Example:

<body>
<script type = "text/javascript">
var str1 = new String( "Hello" );
var str2 = new String( "Prashanth Reddy" );
var str3 = str1.concat( str2 );
document.write("Concatenated String :" + str3);
</script>
</body>

Expected output is

“Concatenated String  : Hello Prashanth Reddy”

indexOf() : This method returns the index of the string that we are searching for and returns the index of the string and -1 if the string that is being searched is not found.

Example:

<body>
<script type = "text/javascript">
var str1 = new String( "Puttagunta Vijaywada" );
var index = str1.indexOf( "Vijaywada" );
document.write("indexOf found String :" + index );
document.write("<br />");
var index = str1.indexOf( "gun" );
document.write("indexOf found String :" + index );
</script>
</body>

Expected Output is

indexOf found String :11
indexOf found String :5

lastIndexOf() : This method returns the index of the last occurance of the String that is being searched.

Example :

<body>
<script type = "text/javascript">
var str1 = new String( "health is wealth and health determines everything" );
var index = str1.lastIndexOf( "health" );
document.write("lastIndexOf found String :" + index );
</script>
</body>

Expected Output is

“lastIndexOf found health : 21”

localeCompare() : In this method we compare any two elements and returns a positive number if the reference string is greater than the compare string and negative number if the reference string is smaller than the compare string and zero if the compare and reference strings are equivalent..

Return Value :

0 – If both the strings are equal

-1 – If the reference string has been sorted before the another string

1 – If the reference string has been sorted after the another string.

Example :

a = 'n'.localeCompare('z');
document.write('a returns '+a);

Expected Ouput

a returns -1

This method can also be used for sorting the elements.

<body>
<script>
var elements = [ 'prashanth', 'chintu', 'mohan', 'akhil' ];
a = elements.sort((a, b) => a.localeCompare(b));
document.write(a)
</script>
</body>

Expected Output is

Akhil, chintu, mohan, prashanth.

length() :

Date Methods

Date() : This method returns the current date and time

Example :

<body>
<script type = "text/javascript">
var date = Date();
document.write("Current Date and Time is : " + date);
</script>
</body>

Expected output is

“Current Date and Time is : Sun Jun 09 2019 19:43:01 GMT+0530 (India Standard Time)”

getDate() : This method returns the current Day of the month of the system.

Example :

<body>
<script type = "text/javascript">
var date = new Date();
document.write("Date is : " + date.getDate() );
</script>
</body>

Expected Output is

“Date is : 09”

getFullYear() : This method returns the current year of the system or any Year(if specified explicitly).

Example :

<body>
<script type = "text/javascript">
var dt = new Date("July 19, 1996 19:15:00");
document.write("year is: " + dt.getFullYear() );
</script>
</body>

Expected output is

“Year is : 1996”

getHours() : This method returns the hour of the current system or the hours that are specified according the current system.

Example :

<body>
<script type = "text/javascript">
var date = new Date();
document.write("Hours: " + date.getHours() );
</script>
</body>

Expected Output is

“Hours : 19”

getMilliseconds() : This method returns the milli seconds of the current system.

Example :

<body>
<script type = "text/javascript">
var date = new Date( );
document.write("Milliseconds : " + date.getMilliseconds() );
</script>
</body>

Expected output is

“125”

getMinutes() : This method returns the minutes of the current system.

Example :

 <body>
<script type = "text/javascript">
var date = new Date( );
document.write("Minutes : " + date.getMilliseconds() );
</script>
</body>

Expected output is

“Minutes : 10”

getMonth() : This method returns the current month of the system or the month that is specified according to the current local system format.

Example :

<body>
<script type = "text/javascript">
var date = new Date( );
document.write("Month : " + date.getMonth() );
</script>
</body>

Expected output is

“Month : 06”

getSeconds() : This method returns the current seconds of the system or the seconds that is specified according to the current local system.

Example :

<body>
<script type = "text/javascript">
var date = new Date( );
document.write("Seconds : " + date.getSeconds() );
</script>
</body>

Expected output is

“Seconds : 20”

getTime() : This method returns the numeric value of the current time of the system or the numeric value of the current Time that is specified according to the system.

Example :

<body>
<script type = "text/javascript">
var date = new Date( );
document.write("Time : " + date.getTime() );
</script>
</body>

Expected output is

“Time : 1560092090667”

getTimezoneOffset() : This methods returns uses Greenwich Mean Time(GMT) and returns the time-zone offset in minutes for the current locale.

Example :

<body>
<script type = "text/javascript">
var date = new Date();
var offsetTimeZone = dt.getTimezoneOffset();
document.write("offsetTimeZone : " + offsetTimeZone);
</script>
</body>

Expected output is

“offsetTimeZone : -330”

getUTCDate() : This method returns the integer of the current Date according to the Universal time.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "January 13, 1997 23:15:20" );
document.write("UTC Date is : " + date.getUTCDate() );
</script>
</body>

Expected Output is

“UTC Date is :9”

getUTCDay() : This method returns integer value(days of the week) ranging from 0 – 6 i.e, which indicates 0 for Sunday, 1 for Monday and so on.

Example :

<body>

<script type = "text/javascript">
var date = new Date( "July 19, 1996 23:15:20" );
document.write("UTC Day : " + date.getUTCDay() );
</script>
</body>

Expected Output is

“UTC Day is :5”.

getUTCFullYear() : This method returns the Year that is entered in the local system date format according to the universal time.

Example :

<body>
<script type = "text/javascript">
var dt = new Date( "June 9, 2019 23:15:20" );
document.write("UTC Full Year : " + dt.getUTCFullYear() );
</script>
</body>

Expected output is

“UTC Full Year : 2019”

getUTCHours() : This method returns an integer in the range 0 – 23 by the date given with respect to the Universal time.

Example :

<body>
<script type = "text/javascript">
var date = new Date();
document.write("UTC Hours : " + date.getUTCHours() );
</script>
</body>

Expected Output is

“UTC Hours : 15”

getUTCMilliseconds() : This method returns the integer which ranges from 0 – 999 date given with respect to the universal time.

Example :

 <body>
<script type = "text/javascript">
var date = new Date();
document.write("UTC Milli seconds : " + date.getUTCMilliseconds() );
</script>
</body>

Expected Output is

“923”

getUTCMinutes() : This method returns the integer which ranges from 0 – 59 date given with respect to the universal time.

Example :

<body>
<script type = "text/javascript">
var date = new Date();
document.write("UTC Minutes : " + date.getUTCMinutes() );
</script>
</body>

Expected output is

“UTC Minutes : 34”

getUTCMonth() : This method returns an integer ranging from 0 – 11 as per the date entered in the system, where 0 indicates January, 1 indicates February and so on..

Example :

<body>
<script type = "text/javascript">
var date = new Date();
document.write("UTC Month : " + date.getUTCMonth() );
</script>
</body>

Expected Output is

“UTC Month : 5”

getUTCSeconds() : This method returns the integer from 0 – 59 as per the date given by the system according to the Universal time.

Example :

<body>
<script type = "text/javascript">
var date = new Date();
document.write("UTC Seconds : " + date.getUTCSeconds());
</script>
</body>

Expected Output is

“45”

getYear() : This method returns the current year in the specified date as per the universal time. The value that will be returned by the getYear() will be Current Year that is being given minus 1900.

Example :

<body>
<script type = "text/javascript">
var date = new Date();
document.write("get Depricated Year : " + date.getYear() );
</script>
</body>

Expected Output is

“get Depricated Year : 119”

setDate() : This method allows the user to set the date dynamically for a particular month according to the local time.

Example:

<body>
<script type = "text/javascript">
var date = new Date( "Aug 15, 2019 22:30:00" );
date.setDate( 24 );
document.write( date );
</script>
</body>

Expected Output is

“Mon Aug 19 2019 23:30:00 GMT+0530 (India Standard Time)”.

setFullYear() : This method allows to set full year that has been received from the system.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Aug 28, 2019 23:30:00" );
date.setFullYear( 1947 );
document.write( date );
</script>
</body>

Expected Output is

“Mon Aug 28 1947 23:30:00 GMT+0530 (India Standard Time)”.

setHours() : This method allows to set hours dynamically received from the local system.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Jan 13, 1997 23:30:00" );
date.setHours( 02 );
document.write( date );
</script>
</body>

Expected output is

Thu Jan 13, 1997 02:30:00 GMT+0530 (India Standard Time)

setMilliseconds() : This method is used to set milli seconds for a particular date with respect to local time.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Aug 28, 2008 23:30:00" );
date.setMilliseconds( 1010 );
document.write( date );
</script>
</body>

Expected output is

“Thu Aug 28 2008 23:30:01 GMT+0530 (India Standard Time)”

setMinutes() : This method is used to set Minutes for a particular date dynamically.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Jul 19, 1997 23:30:00" );
date.setMinutes( 45 );
document.write( date );
</script>
</body>

Expected output is

“Thu Jul 19, 1997 23:45:00 GMT+0530 (India Standard Time)”

setMonth() : This method is used to set Month for a particular date dynamically.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Aug 15, 2019 23:30:00" );
date.setMonth( 11 );
document.write( date );
</script>
</body>

Expected Output is

“Fri Dec 15 2019 23:30:00 GMT+0530 (India Standard Time)”

setSeconds() : This method is used to set the seconds for the date received from the system.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "May 07, 1999 23:30:00" );
date.setSeconds( 80 );
document.write( date );
</script>
</body>

Expected Output is

“Thu May 07, 1999 23:31:20 GMT+0530 (India Standard Time)”.

setTime() : This method is used to reset the date by setting the time which is represented by the milliseconds e from January 1, 1970, 00:00:00 UTC.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Jul 19, 2019 23:30:00" );
date.setTime( 5000000 );
document.write( date );
</script>
</body>

Expected output is

“Thu Jan 01 1970 06:53:20 GMT+0530 (India Standard Time)”

setUTCDate() : This method is used to set date dynamically that is received from the local system.

Example:

<body>
<script type = "text/javascript">
var date = new Date( "Dec 18, 1996 23:30:00" );
date.setUTCDate( 20 );
document.write( date );
</script>
</body>

Expected Output is

“Fri Dec 20, 1996  23:30:00 GMT+0530 (India Standard Time)”

setUTCFullYear() : This method allows the user to set the full year dynamically according to the universal time.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Dec 31, 1995  23:30:00" );
date.setUTCFullYear( 2006 );
document.write( date );
</script>
</body>

Expected Output is

“Mon Dec 31, 2006 23:30:00 GMT+0530 (India Standard Time)”

setUTCHours() : This method is used to set the Hour dynamically with respect to the date received from the local system.

Example :

<body>
<script type = "text/javascript">
var dt = new Date( "Aug 19, 2017 23:30:00" );
dt.setUTCHours( 15 );
document.write( dt );
</script>
</body>

Expected output is

“Sat Aug 19 2017 20:30:00 GMT+0530 (India Standard Time)”.

setUTCMilliseconds() : This method allows the user to set the milliseconds in the specified date with respect to universal format.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Jul 19, 2001 23:30:00" );
date.setUTCMilliseconds( 1100 );
document.write( date );
</script>
</body>

Expected Output is

“Thu Jul 19, 2001 23:30:01 GMT+0530 (India Standard Time)”

setUTCMinutes() : This method allows the user to set the minutes in the specified date with respect to universal format.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Aug 28, 2008 13:30:00" );
date.setUTCMinutes( 65 );
document.write( date );
</script>
</body>

Expected output is

“Thu Aug 28 2008 14:35:00 GMT+0530 (India Standard Time)”

setUTCMonth() : This method allows the user to set the month in the specified date with respect to universal format.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Aug 28, 2008 13:30:00" );
date.setUTCMonth( 2 );
document.write( date );
</script>
</body>

Expected output is

“Fri Mar 28 2008 13:30:00 GMT+0530 (India Standard Time)”

toDateString() : This method allows the user to set the year in the specified date with respect to universal format.

Example :

<body>
<script type = "text/javascript">
var date = new Date( "Jan 1, 1999 13:30:00" );
date.setYear( 2000 );
document.write( date );
</script>
</body>

Expected output is

“Fri Jan 1, 2000 13:30:00 GMT+0530 (India Standard Time)”

setYear() : This method returns the date that is received in human readable form.

Example :

<body>
<script type = "text/javascript">
var date = new Date(1993, 6, 28, 14, 39, 7);
document.write( "Formated Date : " + date.toDateString() );
</script>
</body>

Expected output is

“Formated Date : Wed Jul 28 1993”

toLocaleDateString() : This method is used to convert a date to a string by returning only Date received.

Example :

<body>
<script type = "text/javascript">
var date = new Date(1993, 7, 28, 14, 39, 7);
document.write( "Formated Date : " +date.toLocaleDateString());
</script>
</body>

Expected Output is

“Formated Date : 7/28/1993”

toLocaleString() : This method converts a date to a String format using the system’s local time zone(Date format varies from region to region i.e India à 10-6-2019 , US à 6/10/2019).

Example :

<body>
<script type = "text/javascript">
var date = new Date(2012, 6, 10, 14, 39, 7);
document.write( "Formated Date : " + date.toLocaleString());
</script>
</body>

Expected Output is

Formatted Date : 6/10/2012, 2:39:07 PM

toLocaleTimeString() : This method converts the time into String format displaying the current time of the system.

Example :

<body>
<script type = "text/javascript">
var date = new Date(1993, 6, 28, 14, 39, 7);
document.write( "Formated Date : date.toLocaleTimeString());
</script>
</body>

Expected Output is

Formated Date : 10:56:07 AM

toSource() : This method returns the String which contains the source code of the object.

Example :

<body>
<script type = "text/javascript">
var date = new Date(1993, 6, 28, 14, 39, 7);
document.write( "Formated Date : " + date.toSource() );
</script>
</body>

Expected Output is

Formated Date : (new Date(743850547000))

toString() : This method converts the current Date and Time object and returns a String format.

Example :

<body>
<script type = "text/javascript">
var dateobject = new Date(1993, 6, 28, 14, 39, 7);
stringobj = dateobject.toString();
document.write( "String received is  : " + stringobj );
</script>
</body>

Expected Output is

String received is : Wed Jul 28 1993 14:39:07 GMT+0530 (India Standard Time)

toTimeString() : This method returns only the time part of the entire date object in human readable form.

Example :

 <body>
<script type = "text/javascript">
var dateobject = new Date(2019, 7, 19, 14, 39, 7);
document.write( ‘Time received is ’+dateobject.toTimeString());
</script>
</body>

Expected output is

Time received is 14:39:07 GMT+0530 (India Standard Time)

toUTCString() : This method accepts the date and returns in the form of the String using the Universal Time Convention(UTC).

Example :

<body>
<script type = "text/javascript">
var date = new Date(2019,12, 18, 14, 39, 7);
document.write( date.toUTCString() );
</script>
</body>

Expected Output is

Wed, 28 Jul 1993 09:09:07 GMT

valueOf() : This method uses the primitive value of the Date object received and returns the number of milliseconds since from 01 Jan 1970.

Example :

<body>
<script type = "text/javascript">
var dateobject = new Date(2019, 4, 28, 14, 39, 7);
document.write( dateobject.valueOf() );
</script>
</body>

Expected output is

743850547000

Math Properties

 E \ : This property is an Euler’s constant and the base of natural algorithms which is approximately equal to 718281828459045.

Example :

<body>
<script type = "text/javascript">
var property_value = Math.E
document.write("Property Value is :" + property_value);
</script>
</body>

Expected Output is

Property Value is :2.718281828459045

LN2() : This property returns the logarithmic value of 2.

Example :

<body>
<script type = "text/javascript">
var Logarthamic value = Math.LN2
document.write("Logarthamic value is : " + Logarthamic value);
</script>
</body>

Expected output is

Logarthamic value is : 0.6931471805599453

LN10() : This property returns the logarithmic value of 10.

Example :

<body>
<script type = "text/javascript">
var Logarthamic value = Math.LN2
document.write("Logarthamic value is : " + Logarthamic value);
</script>
</body>

Expected output is

Logarthamic value is : 0.6931471805599453

LOG2E() : This property returns the logarithmic value of E to the base 2.

Example :

<body>
<script type = "text/javascript">
var Logarthamic value = Math.LOG2E
document.write("Logarthamic value is : " + Logarthamic value);
</script>
</body>

Expected output is

Logarthamic value is : 1.4426950408889633

LOG10E() : This property returns the logarithmic value of E to the base 10.

Example :

<body>
<script type = "text/javascript">
var Logarthamic value = Math.LOG2E
document.write("Logarthamic value is : " + Logarthamic value);
</script>
</body>

Expected output is

Logarthamic value is : 0.4342944819032518

PI : Pi is a ratio of the circumference of a circle to its diameter.

Example :

<body>
<script type = "text/javascript">
var Pi_value = Math.PI
document.write("PI value is : " + Pi_value);
</script>
</body>

Expected output is

PI value is : 3.141592653589793

SQRT1_2 : This property returns the square root of 1 over 2 i.e Sqrt(1/2).

Example :

<body>
<script type = "text/javascript">
var Pi_value = Math.SQRT1_2
document.write("Square root  of 1/2 is : " + Pi_value);
</script>
</body>

Expected output is

Square root  of 1/2 is : 0.7071067811865476

SQRT2 : This property returns the square root of 2.

Example :

<body>
<script type = "text/javascript">
var Pi_value = Math.SQRT2
document.write("Square root  of 2 is : " + Pi_value);
</script>
</body>

Expected output is

Square root  of 2 is : 1.4142135623730951

Math Methods

Abs : This method returns the absolute value of a number.

Example :

<body>
<script type = "text/javascript">
var value = Math.abs(-99);
document.write("absolute value is: " + value );
var value = Math.abs(null);
document.write (“absolute value is: " + value );
var value = Math.abs("msp");
document.write("absolute value is  : " + value );
</script>
</body>

Expected output is

absolute value is : 99
absolute value is : 0
absolute value is : NaN

Acos : This method returns an numeric constant -1 to 1 if the value given is in the range and NaN if it is outside the range.

Example :

<body>
<script type = "text/javascript">
var value = Math.acos(null);
document.write("acos value is : " + value );
var value = Math.acos(30);
document.write("acos value is  : " + value );
var value = Math.acos("string");
document.write("acos value is  : " + value );
</script>
</body>

Expected output is

acos value is : 1.5707963267948966
acos value is : NaN
acos value is : NaN

asin() : This method returns numeric constant ranging from –pi/2 to pi/2 i.e (1.5707963267948966, -1.5707963267948966) and NaN if the value is out of range.

Example :

<body>
<script type = "text/javascript">
var value = Math.abs(null);
document.write("asin value is: " + value );
var value = Math.abs(-1);
document.write (“asin value is: " + value );
var value = Math.abs("msp");
document.write("asin value is  : " + value );
</script>
</body>

Expected output is

asin value is : 0
asin value is : -1.5707963267948966
asin value is : NaN

atan() : This method returns numeric constant ranging from –pi/2 to pi/2 i.e (1.5707963267948966, -1.5707963267948966).

Example :

<body>
<script type = "text/javascript">
var value = Math.abs(0.5);
document.write("asin value is: " + value );
var value = Math.abs(30);
document.write (“asin value is: " + value );
var value = Math.abs("msp");
document.write("asin value is  : " + value );
</script>
</body>

Expected output is

asin value is : 0.4636476090008061
asin value is : 1.5374753309166493
asin value is : NaN

atan2 : This method returns numeric constant ranging from –pi/2 to pi/2 i.e (1.5707963267948966, -1.5707963267948966) which represents the angle theta of two different points(a,b).

Example :

<body>
<script type = "text/javascript">
var value = Math.atan2(90,15);
document.write("atanw value is : " + value );
var value = Math.atan2(15,90);
document.write("atan2 value is : " + value );
var value = Math.atan2(+Infinity, -Infinity);
document.write("atan2 value is : " + value );
</script>
</body>

Expected Output is

Theta value is : 1.4056476493802699
Theta value is : 0.16514867741462683
Theta value is : 2.356194490192345

ceil() : This method returns uses the decimal number and returns the greater number which is near or equal to a number.

Example :

<body>
<script type = "text/javascript">
var value = Math.ceil(90,15);
document.write("Theta value is : " + value );
var value = Math.ceil(15,90);
document.write("Theta value is : " + value );
var value = Math.ceil(+Infinity, -Infinity);
document.write("Theta value is : " + value );
</script>
</body>

cos() : This method returns the cosine value of a number which returns a numeric value constant between -1 to 1.

Example :

<body>
<script type = "text/javascript">
var value = Math.cos(90);
document.write("cosine value is : " + value );
var value = Math.cos(30);
document.write("cosine value is : " + value );
var value = Math.cos(-1);
document.write("cosine value is : " + value );
</script>
</body>

Expected Output is

cosine value is : -0.4480736161291702
cosine value is : 0.15425144988758405
cosine value is :  0.5403023058681398

exp() : This method is a Euler’s constant where x is an argument and E is the Euler’s constant.

Example :

<body>
<script type = "text/javascript">
var value = Math.exp(1);
document.write("Euler's value is : " + value );
var value = Math.exp(0.5);
document.write("Euler's value is : " + value );
var value = Math.exp(30);
document.write("Euler's value is : " + value );
</script>
</body>

Expected Output is

Euler's value is : 2.718281828459045
Euler's value is : 1.6487212707001282
Euler's value is :  10686474581524.482

floor() : This method accepts the decimal number and returns the smaller whole number integer value.

Example :

<body>
<script type = "text/javascript">
var value = Math.floor(10.3);
document.write("floor value is : " + value );
var value = Math.floor(99.9);
document.write("floor value is : " + value );
var value = Math.floor(-2.9);
document.write('floor value is : " + value );
</script>
</body>

Expected output is

floor value is : 10
floor value is : 99
floor value is : -3

log() : This method returns the logarithmic value of the a Number. However if the number entered is negative it returns the value received is Not a Number(NaN).

Example :

<body>
<script type = "text/javascript">
var value = Math.log(10);
document.write("log value is : " + value );
var value = Math.log(0);
document.write("log value is : " + value );
var value = Math.log(-1);
document.write('log value is : " + value );
</script>
</body>

Expected output is

log value is : 2.302585092994046
log value is : -Infinity
log value is : NaN

max() : This method finds the largest of the numbers given, and returns the larger number.

Example :

<body>
<script type = "text/javascript">
var value = Math.max(10,30,99);
document.write("maximum value is : " + value );
var value = Math.max(1,0,-45);
document.write("maximum value is : " + value );
var value = Math.max(-1, -54);
document.write('maximum value is : " + value );
</script>
</body>

Expected output is

maximum value is : 99
maximum value is : 1
maximum value is : -1

min() : This method finds the minimum number that has been found from a given set of numbers.

Example :

<body>
<script type = "text/javascript">
var value = Math.min(10,30,99);
document.write("minimum value is : " + value );
var value = Math.min(1,0,-45);
document.write("minimum value is : " + value );
var value = Math.min(-1, -54);
document.write('minimum value is : " + value );
</script>
</body>

Expected output is

minimum value is : 10
minimum value is : -45
minimum value is : -54

pow() : This method accepts 2 parameters as input and returns single parameter as an output, where the first parameter is the base value and the second value is exponential.

Example :

<body>
<script type = "text/javascript">
var value = Math.pow(5,2);
document.write("Exponential value is : " + value );
var value = Math.pow(10,5);
document.write("Exponential value is : " + value );
var value = Math.pow(-1,4);
document.write('Exponential value is : " + value );
</script>
</body>

Expected output is

Exponential value is : 25
Exponential value is : 100000
Exponential value is : 1

random() : This method returns an decimal number which is in between 0 and 1.

Example :

<body>
<script type = "text/javascript">
var value = Math.random();
document.write("Random  value is : " + value );
var value = Math.random();
document.write("Random  value is : " + value );
var value = Math.random();
document.write('Random  value is : " + value );
</script>
</body>

Expected output is

Random  value is : 0.9465327861165829
Random  value is : 0.03171426575854275
Random  value is : 0.576043078064751

round() : This method accepts the decimal number and returns the nearest whole number which is an Integer.

Example :

<body>
<script type = "text/javascript">
var value = Math.round(0.8);
document.write("round  value is : " + value );
var value = Math.round(99.1);
document.write("round  value is : " + value );
var value = Math.round(-19.4);
document.write('round  value is : " + value );
</script>
</body>

Expected output is

round  value is : 1
round  value is : 99
round  value is : --19

sin() : This method accepts a decimal/whole number and returns the sine value of a number.

Example :

<body>
<script type = "text/javascript">
var value = Math.sin(90);
document.write("sin  value is : " + value );
var value = Math.sin(0.5);
document.write("sin  value is : " + value );
var value = Math.sin(Math.PI/2);
document.write('sin  value is : " + value );
</script>
</body>

Expected output is

sin  value is : 0.8939966636005578
sin  value is : 0.479425538604203
sin  value is : 1

sqrt() : This method returns the square root of a number if the given number is positive or else the value returned is NaN.

Example :

<body>
<script type = "text/javascript">
var value = Math.sqrt(900);
document.write("Square root of a number is : " + value );
var value = Math.sqrt(0.5);
document.write("Square root of a number is : " + value );
var value = Math.sqrt(-4);
document.write('Square root of a number is : " + value );
</script>
</body>

Expected output is

Square root of a number is : 30
Square root of a number is : 0.7071067811865476
Square root of a number is : NaN

tan() : This method returns the tangent of a number that has been received which is numeric value.

Example :

<body>
<script type = "text/javascript">
var value = Math.tan(90);
document.write("Tan value is is : " + value );
var value = Math.tan(-30);
document.write("Tan value is is : " + value );
var value = Math.tan(45);
document.write('Tan value is is : " + value );
</script>
</body>

Expected output is

Tan value is is : -1.995200412208242
Tan value is is : 6.405331196646276
Tan value is is : 1.6197751905438615

toSource() : This method returns the string ‘Math’ and it is not compatible with all the browsers.
Example :

<body>
<script type = "text/javascript">
var value = Math.toSource( );
document.write("math value is : " +  value );
</script>
</body>

Expected Output is

math value is : Math

Besant Technologies – Chennai & Bangalore Branch Locations

Besant Technologies - Velachery Branch
Plot No. 119, No.8, 11th Main road, Vijaya nagar,
Velachery, Chennai - 600 042
Tamil Nadu, India
Landmark - Reliance Digital Opposite Street
+91-996 252 8294 / 996 252 8293

Besant Technologies - Tambaram Branch
No.2A, 1st Floor, Duraisami Reddy Street,
West Tambaram, Chennai - 600 045
Tamil Nadu, India
Landmark - Near By Passport Seva
+91-970 725 0260

Besant Technologies - OMR Branch
No. 5/318, 2nd Floor, Sri Sowdeswari Nagar,
OMR, Okkiyam Thoraipakkam, Chennai - 600 097
Tamil Nadu, India
Landmark - Behind Okkiyampet Bus Stop,
+91-887 038 4333

Besant Technologies - Porur Branch
No. 180/84, 1st Floor, Karnataka Bank Building
Trunk Road, Porur,
Chennai - 600 116
Tamilnadu, India
Land Mark: Opposite to Gopalakrishna Theatre
+91-755 022 6990

Besant Technologies - Anna Nagar Branch
Plot No:1371, 28th street kambar colony,
I Block, Anna Nagar ,
Chennai - 600 040
Tamil Nadu, India
Landmark - Behind Reliance Fresh
+91-938 404 0493

Besant Technologies - T.Nagar Branch
Old No:146/2- New No: 48,
Habibullah Road,T.Nagar,
Chennai - 600 017
Tamil Nadu, India
Landmark - Opposite to SGS Sabha
+91-984 025 8377

Besant Technologies - Thiruvanmiyur Branch
22/67, 1st Floor,
North mada street, Kamaraj Nagar
Thiruvanmiyur, Chennai 600041
Tamil Nadu, India
Landmark - Above Thiruvanmiyur ICICI Bank
+91-938 404 0493

Besant Technologies - Siruseri Branch
No. 4/76, Ambedkar Street,
OMR Road, Egatoor, Navallur,
Siruseri, Chennai 600130
Tamil Nadu, India
Landmark - Near Navallur Toll Gate, Next to Yamaha Showroom
+91-7338 810 550

Besant Technologies - Maraimalai Nagar Branch
No.37, Ground Floor,
Thiruvalluvar Salai,
Maraimalai Nagar,Chennai 603209
Tamil Nadu, India
Landmark - Near to Maraimalai Nagar Arch
+91-979 123 7373

Besant Technologies - BTM Layout Branch
No 2, Ground floor,
29th Main Road, Kuvempu Nagar,BTM Layout 2nd Coming from Silkboard, take left at AXA company signal,
Stage, Bangalore - 560 076
Karnataka, India
Landmark - Next to OI Play School
+91-762 494 1772 / 74

Besant Technologies - Marathahalli Branch
No. 43/2, 2nd Floor, VMR Arcade,
Varthur Main Road, Silver Springs Layout,
Munnekollal, Marathahalli, Bengaluru - 560037
Karnataka, India
Landmark - Near Kundalahalli Gate Signal
+91-910 812 6341

Besant Technologies - Rajaji Nagar Branch
No. 309/43, JRS Ecstasy, First Floor,
59th Cross, 3rd Block, Bashyam Circle,
Rajaji Nagar, Bangalore - 560 010
Karnataka, India
Landmark - Near Bashyam Circle
+91- 734 916 0004

Besant Technologies - Jaya Nagar Branch
No. 2nd Floor,1575,11th Main Road,
4th T-Block, Pattabhirama Nagar, Jaya Nagar,
Bangalore-560041
karnataka, India
Land Mark: Opposite to Shanthi Nursing Home
+91-733 783 7626

Besant Technologies - Kalyan Nagar Branch
No.513, 4th Cross Rd
2nd Block, HRBR Layout, Kalyan Nagar,
Bangalore-560043
karnataka, India
Land Mark: Opposite to kalayan nagar Axis Bank
+91-938 404 0495

Besant Technologies - Electronic City Branch
No. 7, 3rd Floor, Ganga Enclave,
Neeladri Road, Karuna Nagar, Doddathoguru Village,
Electronics City Phase 1, Electronic City,
Bangalore - 560100, karnataka, India
Land Mark: Adjacent to HDFC Bank and State Bank Of India
+91-782 392 2180

Besant Technologies - Indira Nagar Branch
No.54, 1st Floor,
5th Main kodihalli,
Bengaluru, Karnataka 560008, India
Landmark: Behind Leela Palace Hotel,
+91-910 812 6339

Besant Technologies - HSR Layout Branch
Plot No. 2799 & 2800, 27th Main,
1st Sector, HSR Layout,
Bengaluru, Karnataka 560102, India
+91-733 783 7626

Besant Technologies - Hebbal Branch
No.29, 2nd Floor, SN Complex,
14th Main Road, E-Block Extention, Sahakara Nagar,
Bengaluru, Karnataka -560092, India
+91-938 404 0496