0% found this document useful (0 votes)

371 views

JavaScript Examples PDF

This document contains 51 JavaScript examples with source code to learn useful JavaScript. It includes examples of displaying alerts, validating user input, manipulating arrays, animations, and more. The examples have detailed comments to explain the code.

Uploaded by

edwardsjulian63

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

371 views

JavaScript Examples PDF

Uploaded by

edwardsjulian63

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 72

This PDF contains 51 JavaScript examples with source

code. Lots of very useful JavaScript examples you

should learn.

51 JavaScript
Examples

Bijaya Kumar Sahoo (Microsoft MVP) && Padmini

[Type here]
TSInfoTechnologies.com EnjoySharePoint.com SharePointSky.com

Table of Contents
About TSInfo Technologies: .......................................................................................................................... 4
About Authors:.............................................................................................................................................. 4
What is JavaScript? ....................................................................................................................................... 5
Editors For JavaScript .................................................................................................................................... 5
How to Start with JavaScript? ....................................................................................................................... 5
Example-1: Display Alert in JavaScript .......................................................................................................... 7
Display Conformation box using JavaScript: ............................................................................................. 8
Display Prompt box using JavaScript: ....................................................................................................... 9
Example-2: mouseover and mouseout in javascript................................................................................... 10
Example-3: Use onkeypress In JavaScript to Display Alerts ........................................................................ 12
Example-4: JavaScript Validation Examples ................................................................................................ 13
Textbox required validation in javascript: .............................................................................................. 13
Email validation in JavaScript: ................................................................................................................. 14
Letter Validation in JavaScript: ............................................................................................................... 15
Number Validation in JavaScript: ............................................................................................................ 16
Letter and Number Validation in JavaScript: .......................................................................................... 17
IP Address Validation in JavaScript: ........................................................................................................ 18
Example-5: Retrieve Today’s Date in JavaScript ......................................................................................... 19
Example-6: Reverse array javascript ........................................................................................................... 20
Example-7: JavaScript concate or merge two Arrays ................................................................................. 21
Example-8: Reverse String in JavaScript ..................................................................................................... 22
Example-9: JavaScript Open a page using window.open() method ........................................................... 23
Example-10: if else statement in JavaScript: .............................................................................................. 23
Example-11: Print page In JavaScript: ......................................................................................................... 24
Example-12: Insert element in array javascript .......................................................................................... 25
Example-13: get current url javascript........................................................................................................ 26
Example-14: getElementsByClassName() method in JavaScript................................................................. 27
Example-15: getElementByName() method in JavaScript .......................................................................... 27
Example-16: Disable Browser back and forward button in browser using JavaScript ............................... 28
Disable back button in browser using javascript ................................................................................ 28
Disable Forward button in browser using JavaScript:......................................................................... 29
Example-17: Disable and Enable Dropdown List using JavaScript: ............................................................. 30

TSInfo Technologies (OPC) Pvt Ltd | Flat G-04, SJR Residency, Devarabeesanahalli, Bangalore,
India, 560103 | Email: info@tsinfotechnologies.com | Mob: +91-9916854253
TSInfoTechnologies.com EnjoySharePoint.com SharePointSky.com

Disable Dropdown list using JavaScript: ................................................................................................. 30

Enable Dropdown list using JavaScript: .................................................................................................. 31
Example-18: Disable mouse right click using javascript ............................................................................. 32
Example-19: JavaScript Date Countdown Timer......................................................................................... 33
Example-20: Check box validation using JavaScript (javascript checkbox checked) .................................. 34
Example-21: get query string value in javascript ........................................................................................ 35
Example-22: JavaScript get or set radio button value ................................................................................ 36
Get radio button selected value using JavaScript: .................................................................................. 36
Set radio button value using JavaScript: ................................................................................................. 37
Example-23: JavaScript screen height......................................................................................................... 37
Example-24: auto refresh page javascript .................................................................................................. 38
Example-25: Convert Celcius Value to Faranheit Value in JavaScript ......................................................... 39
Example-26: javascript get today’s date: .................................................................................................... 40
Example-27: Scroll Down Event in JavaScript ............................................................................................. 40
Example-28: JavaScript Animation example ............................................................................................... 42
Example-29: Play and Pause video in JavaScript......................................................................................... 44
Example-30: Change background color of div javascript ............................................................................ 45
Example-31: Change the page colour in Every 5 sec in JavaScript ............................................................. 47
Example-32: Display Message every 3 second using Javascript ................................................................. 48
Example-33: JavaScript get max value in array of objects .......................................................................... 49
Example-34: Sort and Reverse an array of Objects using JavaScript .......................................................... 49
Example-35: Find index of Largest value in An Array in JavaScript ............................................................ 50
Example-36: Try and Catch in JavaScript .................................................................................................... 51
Example-37: Return Boolean value of an Integer In JavaScript .................................................................. 53
Example-38: JavaScript Check an object is an array or not ........................................................................ 54
Example-39: Print Stars in Pyramid Structure Using JavaScript.................................................................. 54
Example-40: Display Table Number in JavaScript ....................................................................................... 55
Example-41: JavaScript Display Tooltip message ....................................................................................... 57
Example-42: Reload page JavaScript .......................................................................................................... 59
Example-43: Break and Continue in JavaScript........................................................................................... 59
JavaScript Break: ..................................................................................................................................... 59
JavaScript Continue:................................................................................................................................ 61
Example-44: JavaScript Conditional Operator: ........................................................................................... 62

Example-45: Example of this KeyWord in JavaScript .................................................................................. 63

Example-46: JavaScript Validation API ........................................................................................................ 64
Example-47: JavaScript Set dropdown value on Button Click .................................................................... 65
Example-48: Display Images Based on User Selection................................................................................ 66
Example-49: JavaScript Bind Arrays Value into Dropdown list ................................................................... 67
Example-50: javascript browser detection ................................................................................................. 68
Example-51: How to sort array value using sort() method in JavaScript .................................................... 70
Conclusion: .................................................................................................................................................. 71

About TSInfo Technologies:

TSInfo Technologies is one of the top SharePoint development & outsourcing company in India founded
by two Microsoft MVPs. We have skilled certified professionals whose focus is to deliver high-quality
work. We help organizations to build intranet to collaborate more effectively.

TSInfo Technologies works in technologies like SharePoint, Office 365, Azure, PowerBI, Nintex etc.

TSInfo Technologies services includes:

SharePoint development services SharePoint consulting services

SharePoint migration services SharePoint/Office 365 support service
Microsoft Azure consulting service PowerBI consulting service
SharePoint Training Service Nintex Training Service
SharePoint/Nintex corporate training service SharePoint Apps or Add-in development
SharePoint customization/Branding service SharePoint workflow, web part development

For any kind of SharePoint project work or corporate training contact us:

info@tsinfotechnologies.com || Mob: +91-9916854253 || https://www.TSInfoTechnologies.com

Sites we worked with:

https://www.EnjoySharePoint.com || https://www.SharePointSky.com

About Authors:
Bijay Kumar Sahoo:
Bijay Kumar Sahoo is a Microsoft MVP in Office Servers and Services category specialized in SharePoint.
He has more than 11 years of experience in Microsoft technologies like SharePoint, Office 365,
SharePoint Online, Azure, PowerBI, Nintex etc. Bijay is a SharePoint consultant, trainer and founder of
TSInfo Technologies a SharePoint development company in India. Bijay also focuses on SharePoint
technical blogging and blogs in EnjoySharePoint.com and SharePointSky.com.

Padmini Podili:
Padmini is having 2+ years of experience in SharePoint Online Office 365, PowerShell etc. She is working
with TSInfo Technologies Pvt Ltd, Bangalore.

What is JavaScript?
JavaScript is a lightweight object-based scripting programing language. Basically to add the functionality
in HTML code javascript is used. Because of the JavaScript, web pages become more interactive with the
user. Mostly JavaScript use for game development and mobile application development. The JavaScript
make the HTML form dynamic. The JavaScript is used to create client-side dynamic pages.

We can run JavaScript with the help of any browser. We can use Javascript code in the HTML file using
the Script tag. When we run the HTML code in the browser then the javascript also run. The main
advantage of JavaScript scripting language is all browser like IE, Chrome, Mozilla, Opera etc supports
JavaScript. JavaScript runs on any operating system like Windows, Linux, mac anything.

Editors For JavaScript

Before knowing, how to start with JavaScript, we have to know what the available editors for JavaScript
are. Some of the recommend editors for JavaScript are:

 Notepad
 Notepad++
 Sublime Text
 Visual Studio Code
 Atom
 BBEdit
 Komodo Edit
 Emacs etc.

How to Start with JavaScript?

Before start writing your first JavaScript code, Few things you should remember on how to start with
JavaScript.

We need to put JavaScript code inside <script> and </script> tags.

Example:

alert("Welcome to Top 51 JavaScript Examples You Should Learn");

</script>

We can put any number of scripts inside an HTML document, either in the <body> or <head> section of
the HTML page or in both tags.

<!DOCTYPE html>

<html>

<head>

function demoFunction() {

alert("JavaScript Examples")

</script>

</head>

<body>

<h2>Demo JavaScript Examples</h2>

<button type="button" id="btnDemo" onclick="myFunction()">Download It Now</button>

<h2>Welcome to Top 51 JavaScript Examples You Should Learn PDF</h2>

<button type="button" id="btnSubmit" onclick="myFunction()">Download It Now</button>

function myFunction() {

alert("JavaScript Examples PDF Download")

</script>

</body>

</html>

We can also store JavaScript code in an external .js file and call that file inside our HTML Code. We
should not write all JavaScript code inside the HTML file.

We can store below script code inside a .js file like (51JavaScriptExamples.js)

function showAlert() {

alert (Welcome to 51 JavaScript examples tutorial);

And in the HTML file we can call like below:

<!DOCTYPE html>

<html>

<body>

<h2>51 JavaScript Examples</h2>

<button type="button" onclick="showAlert()">Show Alert Box</button>

</body>

</html>

Now we will see the 51 JavaScript Examples.

Example-1: Display Alert in JavaScript

In the below example, We can show an alert in JavaScript.

<!DOCTYPE html>

<html>

<body>

<h2>Top 51 JavaScript Example: Display alert in javascript</h2>

<h2>Give Your Details</h2>

First name:<br>

<input type="text" id="txtFirstName" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname" id="txtLastName">

<br>

<button onclick="showAlert()" id=btnSubmit>Submit</button>

function showAlert() {

alert("Created Account");

</script>

</body>

</html>

The output: We can see in the output one alert message is coming and telling that “Created Account”

Display Conformation box using JavaScript:

In the Conformation Box, one box will appear and ask for conformation like “OK” and “Cancel” option.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Top 51 JavaScript Example: Display Confirmation Box using JavaScript</h2>

<button onclick="showConformationMessage()" id=btnClick>Click here to check your account is created

or not </button>

function showConformationMessage(){

var name = confirm("Are you want to use the account");

if (name == true){

alert(" Account created sucessfully");

else{

alert("sorry,try again Your account is not created");

</script>

</body>

</html>

Output:

Output is showing a conformation box which is asking for “Are you want to use the account”. We can
click on “Ok” or “Cancel”

Display Prompt box using JavaScript:

Prompt box in JavaScript allows user to input in a textbox. Here we will see how we can show a prompt
box using JavaScript.

<!DOCTYPE html>

<html>

<body>

<h2>Top 51 JavaScript Examples: Display Prompted box using JavaScript</h2>

<button onclick="showPromptBox()">Click here to see prompt box</button>

function showPromptBox() {

var text;

var username = prompt("Please enter your username", "");

if (username == null || username == "") {

text = "User cancelled the prompt.";

} else {

text = "Hello !" + username + "Welcome to your SharePoint site";

document.getElementById("pId").innerHTML =text;

</script>

</body>

</html>

Output:

When click on ok we can able to see below output.

Example-2: mouseover and mouseout in javascript

This example shows how we can use onmouseover javascript functionality as well as onmouseout in
javascript. Below is an example, where user mouse over an image, it will display the large picture.

<!DOCTYPE html>

<html>

<body>

<p>The large picture will display when mouse pointer over the image and when mouse pointer is moved
out of picture</p>

function largePictureOnMouseOver(p) {

p.style.height = "64px";

p.style.width = "64px";

function smallPictureOnMouseOut(p) {

p.style.height = "32px";

p.style.width = "32px";

</script>

</body>

</html>

Similarly in the below JavaScript example, we can use onmouseout which will display larger picture
when user remove mouse pointer from a picture.

<!DOCTYPE html>

<html>

<body>

<p>The small picture will display when mouse pointer over the image and when mouse pointer is moved
out of picture, large picture is displaying</p>

function largePictureOnMouseOver(p) {

p.style.height = "64px";

p.style.width = "64px";

function smallPictureOnMouseOut(p) {

p.style.height = "32px";

p.style.width = "32px";

</script>

</body>

</html>

Example-3: Use onkeypress In JavaScript to Display Alerts

By using JavaScript, we can display alert box when user press on the text box.

<!DOCTYPE html>

<html>

<body>

<p><b>OnKeyDown JavaScript Example<b></p>

<input type="text" id="txtKey"onkeydown="onKeyDown()">

function onKeyDown() {

alert("You press the down arrow key in the text box");

</script>

</body>

</html>

Example-4: JavaScript Validation Examples

We can validate input controls using JavaScript easily. Below are few JavaScript validation examples.

Textbox required validation in javascript:

By using JavaScript, we can validate for empty value in textboxes. Whenever an user tries to submit a
form without entering a value in the textbox, it will display mandatory field validation messages in an
alert box.

<html>

<body>

function textBoxValidation()

if(document.getElementById('txtBox').value.trim()== "")

alert('Textbox should not be blank');

txtBox.focus();

return false;

alert("Your name submitted sucessfully")

return true;

</script>

<form>

Name:<input type='text' id='txtBox'/> <input type='button' onclick="textBoxValidation()"id="btnSubmit"

value='Submit' />

</form>

</body>

</html>

Email validation in JavaScript:

The below JavaScript code validates a textbox for a correct email id. Whatever user enters if not a
proper email id then it will display a message in the alert box.

<html>

<h2>51 example of JavaScript</h2>

<body>

function emailValidation()

var emailIdValue= /^(([^<>()[\]\\.,;:\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,}))$/;

if(document.getElementById('txtEmail').value.match(emailIdValue))

alert("Email Validation sucessfully");

return true;

else

alert("This email is invalid, give a proper email id");

txtEmail.focus();

return false;

</script>

<form>

Enter the E-mail Address value: <input type='text' id='txtEmail'/>

<input type='button' onclick="emailValidation()" id="btnSubmit" value='Submit' />

</form>

</body>

</html>

Letter Validation in JavaScript:

There will be some scenarios where you want users to enter only letters like (A-Z or a-z), We can do
letter only validations using JavaScript.

<html>

<body>

function letterValidation()

var letterValue = /^[a-zA-Z]+$/;

if(document.getElementById('txtletter').value.match(letterValue))

alert("Yes you enter letters only.");

return true;

else

alert('Enter only Letters like A-Z or a-z');

txtletter.focus();

return false;

</script>

<form>

Please Letters Only: <input type='text' id='txtletter'/>

<input type='button' id="btnSubmit" onclick="letterValidation()" value='Submit' />

</form>

</body>

</html>

Number Validation in JavaScript:

Sometimes, you may get business requirement where you need to allows users to enter only numbers,
we can do JavaScript number validation very easily.

<html>

<body>

function onlyNumberValidation()

var numbers = /^[0-9]+$/;

if(document.getElementById('txtletter').value.match(letterAndNumberValue))

alert("Yes you enter numbers only.");

return true;

else

alert('Only numbers are allowed');

txtletter.focus();

return false;

</script>

<form>

Enter Value: <input type='text' id='txtletter'/>

<input type='button' id="btnSubmit" onclick="onlyNumberValidation()" value='Submit' />

</form>

</body>

</html>

Letter and Number Validation in JavaScript:

Sometimes, you may get business requirement where you need to allows users to enter either letter and
numbers, we can validate letters and numbers by using JavaScript very easily.

<html>

<body>

function letterAndNumberValidation()

var letterAndNumberValue = /^[0-9a-zA-Z]+$/;

if(document.getElementById('txtletter').value.match(letterAndNumberValue))

alert("Yes you enter letters or numbers only.");

return true;

else

alert('Only letters and numbers allowed');

txtletter.focus();

return false;

</script>

<form>

Enter Value: <input type='text' id='txtletter'/>

<input type='button' id="btnSubmit" onclick="letterAndNumberValidation()" value='Submit' />

</form>

</body>

</html>

IP Address Validation in JavaScript:

We can validate IP Address using JavaScript easily.

<html>

<body>

function ipAddressValidation()

var ipAddressPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-

9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

if(document.getElementById('txtletter').value.match(ipAddressPattern))

alert("Yes you enter corrent IP address.");

return true;

else

alert('IP Address Validation Failed');

txtletter.focus();

return false;

</script>

<form>

Enter Value: <input type='text' id='txtletter'/>

<input type='button' id="btnSubmit" onclick="ipAddressValidation()" value='Submit' />

</form>

</body>

</html>

Example-5: Retrieve Today’s Date in JavaScript

We can retrieve current date, current month, current year, current time from Date using JavaScript.

<!DOCTYPE html>

<html>

<body>

<p>getDate() method is used for display today's date in JavaScript</p>

var date = new Date();

document.getElementById("currentDateDate").innerHTML ="Current Date using JavaScript:

"+date.getDate();

document.getElementById("currentMonth").innerHTML ="Current Month using JavaScript:

"+(date.getMonth()+1);

document.getElementById("currentYear").innerHTML ="Current Year using JavaScript:

"+date.getFullYear();

document.getElementById("currentFullDate").innerHTML ="Current Full Date using JavaScript:

"+date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();

document.getElementById("currentTime").innerHTML ="Current Time using JavaScript:

"+date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

</script>

</body>

</html>

Once you run code, you can see the output like below:

Current Date using JavaScript: 23

Current Month using JavaScript: 9

Current Month using JavaScript: 2018

Current Full Date using JavaScript: 2018-9-23

Current Time using JavaScript: 20:58:59

Example-6: Reverse array javascript

We use arrays in JavaScript to store multiple values. We can easily reverse an array using JavaScript by
using reverse() method.

<!DOCTYPE html>

<html>

<body>

<p>Reverse Array JavaScript Example:</p>

<button onclick="reverseArrayValue()" id="btnClick">Click</button>

var season = ["Summer", "Winter", "Monsoon","Spring"];

document.getElementById("pId").innerHTML = season;

function reverseArrayValue() {

season.reverse();

document.getElementById("pId").innerHTML = season;

</script>

</body>

</html>

We can able to see how the code is helpful to change the sequence of season.

Example-7: JavaScript concate or merge two Arrays

Now we will see how we can concate or merge two arrays in JavaScript by using the concat() method.

Here I have two arrays like:

var twoDay= [“Sunday”, “Monday”];

var fiveDay= [“Tuesday”, “Wednsday”,”Thursday”, “Friday”,”Saturday”];

Below is the JavaScript code which will concat both the arrays.

<!DOCTYPE html>

<html>

<body>

<p>We will see after clicking the button how two array will join</p>

<button onclick="concateTwoArray()" id="btnClick">Click</button>

function concateTwoArray() {

var twoDay= ["Sunday", "Monday"];

var fiveDay= ["Tuesday", "Wednsday","Thursday", "Friday","Saturday"];

var totalDay = twoDay.concat(fiveDay);

document.getElementById("pId").innerHTML = totalDay ;

</script>

</body>

</html>

Example-8: Reverse String in JavaScript

We can reverse a string in JavaScript by using below script.

<!DOCTYPE html>

<html>

<body>

<p>Reverse String in JavaScript</p>

Main String: "Bijay Kumar";

var reverseString=reverseStringMethod("Bijay Kumar");

document.getElementById("reverseText").innerHTML = "Reverse String: "+reverseString ;

function reverseStringMethod(str) {

var result = "";

for (var i = str.length - 1; i >= 0; i--) {

result += str.charAt(i);

return result;

</script>

</body>

</html>

The result will appear like below:

Example-9: JavaScript Open a page using window.open() method

We can open a new web page using window.open() method in JavaScript. Below code will open
https://www.tsinfotechnologies.com in a new window.

<!DOCTYPE html>

<html>

<body>

<p>In this example we can able to see how the winow.open method is used to open a new window page
in JavaScript </p>

<button onclick="openNewWindow()" id="btnClick">Click</button>

function openNewWindow() {

window.open("https://www.tsinfotechnologies.com/");

</script>

</body>

</html>

Example-10: if else statement in JavaScript:

We can use if/else statement to executes a block of code if a specified condition is true. If the condition
is false, another block of code can be executed.

<!DOCTYPE html>

<html>

<body>

<p>In this code we will check particular year is a leap year or not</p>

var daysInFebruary=29;

if( daysInFebruary==29 ){

document.write("This year is a leapYear");

else

document.write("This is not a leapyear");

</script>

</body>

</html>

Example-11: Print page In JavaScript:

We can print a page using window.print() method in JavaScript. Here once the user clicks on the button,
Print setup page will appear.

<!DOCTYPE html>

<html>

<body>

<p><b>Here we will check how print method is work while clicking on button click<b></p>

<button onclick="PrintPage()" id="btnClick">Click it</button>

function PrintPage() {

window.print();

</script>

</body>

</html>

Example-12: Insert element in array javascript

This JavaScript example, we will see how we can insert an element into an array in JavaScript. We can
use the Push method to insert an element to an array in JavaScript.

<!DOCTYPE html>

<html>

<body>

<p>In this code we will see how to push an element to array</p>

<button onclick="pushElementToArray()" id="btnClick">Click</button>

var days = ["Sunday", "Monday", "Tuesday", "Wednsday"];

document.getElementById("pId").innerHTML = days;

function pushElementToArray() {

days.push("Saturday");

document.getElementById("pId").innerHTML = days;

</script>

</body>

</html>

Example-13: get current url javascript

We can get currrent url using JavaScript by using the window.location.href attribute easily. You can see
in the below JavaScript examples it display’s the current URL.

<!DOCTYPE html>

<html>

<body>

<p>This widow.location() method will display currently which page you are opening.</p>

document.getElementById("pId").innerHTML ="The full URL of this page is:<br>" +

window.location.href;

</script>

</body>

</html>

Example-14: getElementsByClassName() method in JavaScript

This example we will see how we can use getElementsByClassName() method in JavaScript. In an alert
box, we are displaying the value from a class div.

<!DOCTYPE html>

<html>

<body>

<div class="myclass">The value is presented inside the class</div>

<button onclick="RetriveByClassName()" id="btnClick">Click</button>

function RetriveByClassName() {

var x = document.getElementsByClassName("myclass");

alert(x[0].innerHTML);

</script>

</body>

</html>

Example-15: getElementByName() method in JavaScript

We can use getElementByName() method to retrieve HTML element uisng name attribute. Here I am
trying to check a checkbox based on the name attribute which we retrieve getElementByName()
method.

<!DOCTYPE html>

<html>

<body>

<p>How to check a checkbox using getElementByName() method in JavaScript</p>

Tiger: <input name="forestAnimal" type="checkbox" value="Tiger">

Cow: <input name="domesticAnimal" type="checkbox" value="Cow">

<button onclick="retriveElementByName()" id="btnClick">Click</button>

function retriveElementByName(){

var animalName = document.getElementsByName("domesticAnimal");

var i;

for (i = 0; i < animalName.length; i++) {

if (animalName[i].type == "checkbox") {

animalName[i].checked = true;

</script>

</body>

</html>

Example-16: Disable Browser back and forward button in browser using

JavaScript
By using JavaScript, we can easily disable browser back and forward button. We can use
window.history.back() and window.history.forward() methods to disable browser back and forward
button respectively.

Disable back button in browser using javascript

By using window.history.back() JavaScript method, we can disable browser back button in JavaScript.

<!DOCTYPE html>

<html>

<body>

<p>Disable browser back button using JavaScript</p>

<button onclick="disableBackButton()" id="btnBack">Back</button>

function disableBackButton() {

window.history.back();

</script>

</body>

</html>

Disable Forward button in browser using JavaScript:

By using window.history.forward() we will be able to disable forward button in browser using JavaScript.

<html>

<head>

<p>Disable browser forward button using JavaScript window.history.forward() method</p>

function disableTheForwardButton() {

window.history.forward()

</script>

</head>

<body>

<input type="button" value="Forward" onclick="disableTheForwardButton()" id="btnForward">

</body>

</html>

Example-17: Disable and Enable Dropdown List using JavaScript:

We can easily enable or disable dropdown list using JavaScript by using disabled property.

Disable Dropdown list using JavaScript:

Below is the JavaScript code which we can use to disable dropdown list.

<!DOCTYPE html>

<html>

<body>

<form>

</select>

</form>

<p>Click the button to disable the dropdown list.</p>

<button onclick="disableDropDown()" id="btnClick>Click</button>

function disableDropDown() {

document.getElementById("selectAnimal").disabled = true;

</script>

</body>

</html>

Enable Dropdown list using JavaScript:

Below is the JavaScript code which we can use to enable dropdown list. We can enable dropdown list by
simply setting disabled property to false.

<!DOCTYPE html>

<html>

<body>

<form>

</select>

</form>

<p>Click the button to enable the dropdown list.</p>

<button onclick="enableDropDown()" id="btnClick>Click</button>

function enableDropDown() {

document.getElementById("selectAnimal").disabled = false;

</script>

</body>

</html>

Example-18: Disable mouse right click using javascript

Below is the PowerShell script, by using which we can disable mouse right click using JavaScript.

<html>

<body >

<p>In this Example we can able to see how to disable mouse right click in JavaScript.</p>

if (document.layers) {

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown = function() {

return false;

};

else {

document.onmouseup = function(x) {

if (x != null && x.type == “mouseup”) {

if (x.which == 2 || x.which == 3) {

return false;

};

document.oncontextmenu = function() {

return false;

};

</script>

Example-19: JavaScript Date Countdown Timer

We can display a javascript date countdown timer using javascript easily. Below is a timer example in
JavaScript.

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

var expiredDate = new Date("Jan 5, 2020 15:37:29").getTime();

var t = setInterval(function() {

var nowdate = new Date().getTime();

var timePeriod = expiredDate - nowdate;

var days = Math.floor(timePeriod/ (1000 * 60 * 60 * 24));

var hours = Math.floor((timePeriod % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((timePeriod % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((timePeriod % (1000 * 60)) / 1000);

document.getElementById("pId").innerHTML = days + "d " + hours + "h "

+ minutes + "m " + seconds + "s ";

if (timePeriod < 0)

clearInterval(t);

document.getElementById("pId").innerHTML = "EXPIRED";

1000);

</script>

</body>

</html>

Once you run the code you can see the results like below:

Example-20: Check box validation using JavaScript (javascript checkbox

checked)
This example shows how to check checkbox is checked or not in javascript. For this example, on a button
click we are displaying if a check box is checked or not.

<!DOCTYPE html>

<html>

<body>

Checkbox: <input type="checkbox" id="chkBox">

<p>JavaScript check box validation example</p>

<button onclick="showCheckBoxAlert()" id="btnClick">Click</button>

function showCheckBoxAlert() {

var x = document.getElementById("chkBox");

if(!x.checked)

alert('Check box is unchecked');

return false;

else

alert('Check box is checked');

return false;

</script>

</body>

</html>

If user does not check the check box, it will display an alert message.

Example-21: get query string value in javascript

By using JavaScript we can retrieve query string values from a URL. Or we can get url parameter value by
name using javascript.

Here my url
is:https://onlysharepoint2013.sharepoint.com/sites/Raju/tsinfo/SitePages/51JsExample.aspx?PageView
=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage

VisibilityContext=”WSSWebPartPage”

In the output we can able to see: “WSSWebPartPage”

<html>

<body>

<button onclick="GetParameterValues('MyID')" id="btnClick">Click me</button>

function GetParameterValues(param) {

var url = window.location.href.slice(window.location.href.indexOf("?") + 1).split("&");

for (var i = 0; i < url.length; i++) {

var urlparam = url[i].split("=");

if (urlparam[0] == param) {

return urlparam[1];

alert(urlparam[1]);

</script>

</body>

</html>

Example-22: JavaScript get or set radio button value

We can get radio button value easily using JavaScript.

Get radio button selected value using JavaScript:

We can easily Get radio button selected value using JavaScript.

<!DOCTYPE html>

<html>

<body>

<p>Retrieve Get radio button selected value using JavaScript</p>

<p>Select the gender:</p>

<input type="radio" name="Gender" onclick="myFunction(this)" value="Male">Male<br>

<input type="radio" name="Gender" onclick="myFunction(this)" value="Female">Female<br>

function myFunction(Gender) {

alert(Gender.value);

</script>

</body>

</html>

Set radio button value using JavaScript:

We can set radio button value using JavaScript by using JavaScript code.

<!DOCTYPE html>

<html>

<body>

<p>Set radio button value using JavaScript</p>

Married: <input type="radio" id="radiomarried">

Unmarried: <input type="radio" id="radioUnmarried">

<p>Click the "Try it" button to check the radio button.</p>

<button onclick="selectTheMariedButton()">Click if you are maried</button>

<button onclick="selectTheUnmariedButton()">Click if you are not maried</button>

function selectTheMariedButton() {

var x = document.getElementById("radiomarried");

x.checked = true;

alert("Married is selected");

function selectTheUnmariedButton() {

var y = document.getElementById("radioUnmarried");

y.checked = true;

alert("Unmarried is selected");

</script>

</body>

</html>

Example-23: JavaScript screen height

We can easily get screen height using JavaScript.

<!DOCTYPE html>

<html>

<body>

<h2>51 Top JavaScript Example</h2>

<p>When clicking on button it is showing the Screen height</p>

<button onclick="showScreenHeight()" id="btnClick">Click</button>

function showScreenHeight() {

var totalHeight = "Total Height: " + screen.height + "px";

document.getElementById("pId").innerHTML =totalHeight;

</script>

</body>

</html>

You can see the see the result like below:

Example-24: auto refresh page javascript

Now we can see how we can auto refresh page using JavaScript.

<html>

<head>

<p>auto refresh page javascript</p>

function AutoRefresh( t ) {

setTimeout("location.reload(true);", t);

</script>

</head>

</body>

</html>

Example-25: Convert Celcius Value to Faranheit Value in JavaScript

We see how we can convert celcius value to farahheit value in JavaScript.

<!DOCTYPE html>

<html>

<body>

<p>51 Top JavaScript Examples: Convert celcius to faranheit value</p>

<p>Celcius Value:<input id="txtCelcius" onkeyup="convert('C')"> </p>

<p>Farenhit Value:<input id="txtFahrenhit" onkeyup="convert('F')"> </p>

function convert(degree) {

var p;

if (degree == "C") {

p = document.getElementById("txtCelcius").value * 9 / 5 + 32;

document.getElementById("txtFahrenhit").value = Math.round(p);

} else {

p = (document.getElementById("txtFahrenhit").value -32) * 5 / 9;

document.getElementById("txtCelcius").value = Math.round(p);

</script>

</body>

</html>

Example-26: javascript get today’s date:

We can retrieve today’s date using JavaScript.

<!DOCTYPE html>

<html>

<body>

<h2>51 Top JavaScript Example:Showing Todays date and time</h2>

<p>Todays date is:</p>

var date = new Date();

document.getElementById("pId").innerHTML = date;

</script>

</body>

</html>

Example-27: Scroll Down Event in JavaScript

This JavaScript examples shows how can we use scroll down event in JavaScript.

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

width: 200px;

height: 100px;

overflow: scroll;

</style>

</head>

<body>

<p>This example is showing how scroll down event will work</p>

<div onscroll="scrollDownEvent()">TSInfo Technologies, one of the leading SharePoint Offshore

SharePoint development company based out in Bangalore, India. We focus on SharePoint development,
migration, support and training. May be it is web part development, workflow development or Add-in
development, our SharePoint expert team will help you to deliver the project successfully. Our team has
done few migration projects successfully, be it from MOSS 2007 -> SharePoint 2010 -> SharePoint 2013 -
> SharePoint 2013, or migrating from SharePoint On-premises to SharePoint Online Office 365, we can
deliver it succesfully. Are you looking out for an IT outsourcing partner?</div>

<p>Scrolled <span id="pSpan">0</span> times.</p>

var x = 0;

function scrollDownEvent() {

document.getElementById("pSpan").innerHTML = x += 1;

</script>

</body>

</html>

Example-28: JavaScript Animation example

Below is an example of JavaScript animation.

<!DOCTYPE html>

<html>

<style>

#myBigContainer {

width: 600px;

height: 500px;

position: relative;

background: pink;

#mySmallContainer {

width: 100px;

height: 50px;

position: absolute;

background-color: black;

</style>

<body>

<p>

<button onclick=" javaScriptAniminationForMove()">Try this</button>

</p>

</div>

function javaScriptAniminationForMove() {

var element = document.getElementById("mySmallContainer");

var p = 0;

var idValue = setInterval(frame, 30);

function frame() {

if (p == 500) {

clearInterval(idValue);

else

p++;

element.style.top = p+ 'px';

element.style.left = p + 'px';

</script>

</body>

</html>

Example-29: Play and Pause video in JavaScript

We can easily play video and pause video file in javascript.

<!DOCTYPE html>

<html>

<body>

<h2>51 Top JavaScript Example: Play and stop a video using JavaScript</h2>

<p>When we click on Play button the video will play and when click on stop button the video will
stop</p>

<button onclick="playVideo()" id="btnPlay()" type="button">Play The Video</button>

<button onclick="stopVideo()"id="btnStop" type="button">Stop The Video</button><br>

<video id="waterFallVid" width="320" height="250">

</video>

var video = document.getElementById("waterFallVid");

function playVideo()

video.play();

function stopVideo()

video.pause();

</script>

</body>

</html>

You can see below example, by clicking on a button video is playing and in another button click video we
are pausing the video using JavaScript.

Example-30: Change background color of div javascript

Below JavaScipt we can change background color of div like below:

<!DOCTYPE html>

<html>

<head>

<style>

#divId{

width: 300px;

height: 300px;

background-color:blue;

color: white;

</style>

</head>

<body>

<p>When Click on Button click the background colour will change.</p>

<button onclick="changeBackgroundColour()" id="btnClick">Click it</button>

Top 51 JavaScript examples.

</div>

function changeBackgroundColour() {

document.getElementById("divId").style.backgroundColor = "red";

</script>

</body>

</html>

Example-31: Change the page colour in Every 5 sec in JavaScript

We can easily change page color in regular intervals ( every 5 second ) in JavaScript.

<p>In this example we can able to see in every 5 second the page colour is changing using
JavaScript</p>

<style>

#fullScreenId {

position: relative;

height: 100%;

width: 100%;

</style>

<body>

var div = document.getElementById("fullScreenId");

function getRandomColorInEach5Sec() {

var letters = '0123456789ABCDEF';

var randomColor = '#';

for (var i = 0; i < 6; i++ ) {

randomColor += letters[Math.floor(Math.random() * 16)];

return randomColor;

function chnageTheFullScreenColour(){

div.style.backgroundColor= getRandomColorInEach5Sec();

setInterval(chnageTheFullScreenColour,1000);

</script>

</body>

</head>

</html>

Example-32: Display Message every 3 second using Javascript

By using JavaScript we can display message in regular intervals using JavaScript like below:

<!DOCTYPE html>

<html>

<body>

<p>After Click on button after 3 second we can able to see the text</p>

<button onclick="setTimeout(displayTextIn3SecondAfterClickOnButton, 3000);">Click On It</button>

function displayTextIn3SecondAfterClickOnButton() {

document.getElementById("pId").innerHTML = document.write("Enjoy Top 51 JavaScript Example");

</script>

</body>

</html>

Example-33: JavaScript get max value in array of objects

In JavaScript, we can easily get max number in an array of objects. Below is the code which will give the
max number in the array.

<!DOCTYPE html>

<html>

<body>

<p>By using Math.max.apply method we can find out the maximum array value</p>

<p>The maximum aray value is:</p>

var marks = [40, 95, 70, 45, 75, 55];

document.getElementById("pId").innerHTML = maximumArayValue(marks);

function maximumArayValue(array) {

return Math.max.apply(null, array);

</script>

</body>

</html>

Example-34: Sort and Reverse an array of Objects using JavaScript

Below JavaScript examples, it shows how to sort and reverse an array of objects in JavaScript by using
the sort() and reverse() method.

<!DOCTYPE html>

<html>

<body>

<p>The reverse() method reverses the elements in an array.</p>

<p>By combining sort() and reverse() you can sort an array in descending order.</p>

<button onclick=”sortAndReverseArrayValue()”>Click</button>

var banksOfIndis =
[“CentralBankOfIndia”,”AndhraBank”,”BankOfBaroda”,”CanaraBank”,”AllhabadBank”];

document.getElementById(“pId”).innerHTML = banksOfIndis;

function sortAndReverseArrayValue() {

banksOfIndis.sort();

banksOfIndis.reverse();

document.getElementById(“pId”).innerHTML = banksOfIndis;

</script>

</body>

</html>

Example-35: Find index of Largest value in An Array in JavaScript

This JavaScript example explains how to find index of largest value in an array in JavaScript.

<!DOCTYPE html>

<html>

<body>

<p>In this example we can able to check the index value of largest array value</p>

var marks = [30, 100, 50, 90, 40];

function IndexValueOfALargestArrayValue(array){

var startingValue = 1;

var maximumValue = 0;

for(startingValue; startingValue < array.length; startingValue++){

if(array[maximumValue] < array[startingValue]){

maximumValue = startingValue;

return maximumValue;

document.write("The largest Number Index value is:" +IndexValueOfALargestArrayValue(marks));

</script>

</body>

</html>

Example-36: Try and Catch in JavaScript

This JavaScript example explains how to use try and catch in JavaScript. Try catch block is necessary for
catching errors in JavaScript code.

<html>

<body>

var x;

try {

x = y + 1;

document.write(x);

catch(err) {

document.write(err);

</script>

</body>

</html>

[code]

[caption id="attachment_5373" align="aligncenter" width="512"] try catch javascript best

practices[/caption]

Example-37: Return Boolean value of an Integer In JavaScript

This JavaScript example shows how we can return boolean value of an integer express in JavaScript.

[code]

<!DOCTYPE html>

<html>

<body>

<p>Click on the buton to check the boolean value of 100/10<p>

<button onclick="boleanValueOfANumber()" id="btnClick">Click</button>

function boleanValueOfANumber()

var x = 100;

var y=10;

var booleanValue=Boolean(100/10);

document.write(booleanValue);

</script>

</body>

</html>

We can able to see in the output is "true".

Example-37: Return Boolean value of an Integer In JavaScript

This JavaScript example shows how we can return boolean value of an integer express in JavaScript.

<!DOCTYPE html>

<html>

<body>

<p>Click on the buton to check the boolean value of 100/10<p>

<button onclick="boleanValueOfANumber()" id="btnClick">Click</button>

function boleanValueOfANumber()

var x = 100;

var y=10;

var booleanValue=Boolean(100/10);

document.write(booleanValue);

</script>

</body>

</html>

We can able to see in the output is “true”.

Example-38: JavaScript Check an object is an array or not

We can check an object is an array or not in JavaScript by using the isArray() method. The isArray()
method output will display true or false value.

<!DOCTYPE html>

<html>

<body>

<p>Click the button to check if "fruits" is an array.</p>

<button onclick="checkArrayValueOrNot()" id="btnClick">Click </button>

function checkArrayValueOrNot() {

var states =["Maharashtra","Tamil Nadu","Uttar Pradesh","West Bengal","Delhi"];

var x = document.getElementById("demo");

x.innerHTML = Array.isArray(states);

</script>

</body>

</html>

Example-39: Print Stars in Pyramid Structure Using JavaScript

The javascript example explains how to print stars in pyramid structure in javascript.

<html>

<head>

<p>51 Top JavaScript Example: Print start in PyramidStructure using JavaScript</p>

<body>

<button onclick="printStarInPyramidStructure()" id="btnClick">Click me</button>

function printStarInPyramidStructure()

var rows=5;

for(var i=1;i<=rows;i++)

for(var j=1;j<=i;j++)

document.write(" * ");

document.write("<br/>");

</script>

</body>

</head>

</html>

Example-40: Display Table Number in JavaScript

We can display table number in JavaScript.

<html>

<head>

</head>

<body style="text-align: center;">

<p><input type="text" id="txtNumber" placeholder="Enter number"/></p>

<p><input type="button" value="Print Table" onclick='displayNumberInTable()'/>

function displayNumberInTable(){

var n = Number(document.getElementById('txtNumber').value);

for(var i=1; i<=10; i++){

var table= document.getElementById('tableId');

table.innerHTML += (n*i) + "<br/>"

</script>

</body>

</html>

Example-41: JavaScript Display Tooltip message

We can display tooltip messages on mouse over in JavaScript. Below is the JavaScript code which will
display tooltip message in JavaScript.

<html>

<head>

<style>

.name{

float:center;

margin:100px;

border:0.5px solid black;

.tooltip{

position:fixed;

margin:5px;

width:200px;

height:50px;

border:1px solid black;

display:none;

</style>

</head>

<body>

<div class = "name" onmouseover="show(tooltipFirstName)" onmouseout="hide(tooltipFirstName)">

FirstName:

<div class = "tooltip" id= "tooltipFirstName">

Give a Valid Name

</div>

<div class = "name" onmouseover="show(tooltipQualification)"

onmouseout="hide(tooltipQualification)">

Qualification:

<div class = "tooltip" id= "tooltipQualification">

Enter your Qualification

</div>

<div class = "name" onmouseover="show(tooltipAdress)" onmouseout="hide(tooltipAdress)">

Permanenet Adress:

<div class = "tooltip" id= "tooltipAdress">

Give Your proper Permanenet address

</div>

function show (element) {

element.style.display="block";

function hide (element) {

element.style.display="";

</script>

</body>

Example-42: Reload page JavaScript

Reload is nothing but a method is used to reload the current document. Below is the JavaScript code
which will reload a page on button click. Once you click on the button, it will reload the page.

<!DOCTYPE html>

<html>

<body>

<h2>Top 51 JavaScript Example</h2>

<p>This code is reload the page again</p>

<button onclick="ReloadThepage()" id="btnClick">Click Here To Reload The Page</button>

function ReloadThepage() {

location.reload();

</script>

</body>

</html>

Example-43: Break and Continue in JavaScript

This javascript exampl, you will see how to use break and continue in JavaScript.

JavaScript Break:
This javascript example explains how to use break keyword.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button onclick="breakStatementExample()" id="btnClick">Click</button>

function breakStatementExample()

var x;

for ( x=0; x<=15; x++) {

if(x==10)

break;

if (x === 0)

document.write(x +" "+ "is"+" " + "an" + " " + "even number"+ "<br>");

else if (x % 2 === 0) {

document.write(x + " "+ "is"+ " " + "an" + " " + "even number"+ "<br>");

else {

document.write(x + " "+ "is"+ " " + "a" + " " + "odd number"+ "<br>" );

</script>

</body>

</html>

JavaScript Continue:
This javascript example explains how you can use Continue keyword.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button onclick="breakStatementExample()" id="btnClick">Click</button>

function breakStatementExample()

var x;

for ( x=0; x<=15; x++) {

if (x === 10) {

continue;

if (x === 0)

document.write(x +" "+ "is"+" " + "an" + " " + "even number"+ "<br>");

else if (x % 2 === 0) {

document.write(x + " "+ "is"+ " " + "an" + " " + "even number"+ "<br>");

else {

document.write(x + " "+ "is"+ " " + "a" + " " + "odd number"+ "<br>" );

</script>

</body>

</html>

Example-44: JavaScript Conditional Operator:

This javascript example explains how to use conditional operator. This particular example user will enter
his or her age and by using conditional operation it will check if the user's age more than 18 years or not.
If user's age is greater than 18 years then we will show an alert message that "Eligibel for blood
donation" else "Not eligibel for blod donation".

<!DOCTYPE html>

<html>

<body>

<p>This example will display eligible for blod donation or not, Enter age in the text box</p>

<input id="txtage" />

<button onclick="exampleOfTernaryOpearator()" id="btnClick">Submit</button>

function exampleOfTernaryOpearator() {

var minimumAge, donateable;

minimumAge = Number(document.getElementById("txtage").value);

if (isNaN(minimumAge)) {

donateable = "Input should be an integer value";

} else {

donateable= (minimumAge >18) ? "Eligibel for blood donation" : "Not eligibel for blod donation";

document.getElementById("pId").innerHTML =donateable;

</script>

</body>

</html>

Example-45: Example of this KeyWord in JavaScript

This javascript example shows how we can use this keyword inside javascript functions.

<!DOCTYPE html>

<html>

<body>

// Create an object:

var MobilePhone= {

brandName: "Samsung",

modelNumber: 35566,

size:6,

fullName : function() {

return this.brandName +" "+"mobilephone"+ " " +"model number"+" "+ this.modelNumber;

};

// Display data from the object:

document.getElementById("pId").innerHTML = MobilePhone.fullName();

</script>

</body>

</html>

Example-46: JavaScript Validation API

This javascript example explains how we can use JavaScript validations API.

<!DOCTYPE html>

<html>

<body>

<p>51 JavaScript Examples: Form Validation</p>

<p>Price of SharePoint Book:</p>

<input id="txtNumber" type="number" min="200" max="500" required>

<button onclick="formValidation()" id="btnClick">Click</button>

<p>Price of SharePoint book must be in between 200 to 500</p>

function formValidation() {

var inputValue = document.getElementById("txtNumber");

if (!inputValue.checkValidity()) {

document.getElementById("pId").innerHTML = inputValue.validationMessage;

else

document.getElementById("pId").innerHTML = "Input is valid";

</script>

</body>

</html>

Example-47: JavaScript Set dropdown value on Button Click

This JavaScript example explains how we can set dropdown value on button click. Here I have a
dropdown list which has some values and on one button click I will set a particular value using
JavaScript.

<!DOCTYPE html>

<html>

<body>

Select your favorite fruit:

<option value="Karnataka">Karnataka</option>

<option value="Uttarpradesh">Uttarpradesh</option>

<option value="Andhrapradesh">Andhrapradesh</option>

</select>

<button type="button" onclick="setTheDropdownValue()" id="btnClick">Click</button>

function setTheDropdownValue() {

document.getElementById("strongStateInIndia").value = "Karnataka";

</script>

</body>

</html>

Example-48: Display Images Based on User Selection

This javascript example explains, how to display images based on user selection using JavaScript. Here I
have uploaded two images and asked users to enter a number (1-2). Based on user's selection it will
display the image.

<html>

<head>

<body>

<p>Top 51 JavaScript Example:Pick a number and as per the number automatically image is
displaying</p>

var waveImage=new
Array("https://onlysharepoint2013.sharepoint.com/sites/Raju/tsinfo/SiteAssets/leavespic.jpg",
"https://onlysharepoint2013.sharepoint.com/sites/Raju/tsinfo/SiteAssets/waterfallFromTop.jpg");

var n = prompt("Pick a number 1 or 2");

n--;

document.images["wave"].src = waveImage[n];

</script>

</body>

</html>

Example-49: JavaScript Bind Arrays Value into Dropdown list

This javascript examples explain how to bind a dropdown list from an array in JavaScript. Here I have a
country array whose values we are binding into a dropdownlist.

<html >

<head>

<p>51 Top JavaScript Example: Bind dropdown list from an array</p>

</head>

<body>

<input type="button" id="btnCountry" value="Populate the country name"

onclick="populateCountryList()" />

</select>

function populateCountryList() {

var country = [

{ Name: "India" },

{Name: "China" },

{ Name: "USA" },

{ Name: "Australia" }

];

var ddlCountry = document.getElementById("ddlCountry");

for (var i = 0; i < country.length; i++) {

var option = document.createElement("OPTION");

option.innerHTML = country[i].Name;

ddlCountry.options.add(option);

</script>

Example-50: javascript browser detection

This javascript example explains how to detect browser name in javascript. On a button click we are
checking here which browser user is using, in javascript.

<!DOCTYPE html>

<html>

<body>

<p>Get browser name using JavaScript</p>

<button onclick="getBrowserName()">Get Browser Name</button>

function getBrowserName() {

if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )

alert('Opera');

else if(navigator.userAgent.indexOf("Chrome") != -1 )

alert('Google Chrome');

else if(navigator.userAgent.indexOf("Safari") != -1)

alert('Safari');

else if(navigator.userAgent.indexOf("Firefox") != -1 )

alert('Mozilla Firefox');

else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ))

alert('Internet Explorer');

else

alert('Other');

</script>

</body>

</html>

Example-51: How to sort array value using sort() method in JavaScript

We can easily sort array javascript, below is the code to sort an array values using JavaScript sort()
method.

<!DOCTYPE html>

<html>

<body>

<p>sort array value in alphabatical order</p>

<p>Click on button click we can see our short array value</p>

<button onclick="banksNameInAlphabaticalOrder()" id="btnClick">Click</button>

var banksOfIndis =
["CentralBankOfIndia","AndhraBank","BankOfBaroda","CanaraBank","AllhabadBank"];

function banksNameInAlphabaticalOrder() {

banksOfIndis.sort();

document.getElementById("pId").innerHTML = banksOfIndis;

</script>

</body>

</html>

The above code will sort an array of objects in alphabetical order.

Conclusion:
This javascript tutorial explains about 51 useful javascript examples which will be helpful to professional
who wants to learn JavaScript from basics to advances level.

TSInfo Technologies (OPC) Pvt Ltd | Flat G-04, SJR Residency, Devarabeesanahalli, Bangalore,
India, 560103 | Email: info@tsinfotechnologies.com | Mob: +91-9916854253

Namaste React
No ratings yet
Namaste React
117 pages
Complete A Z Javascript Notes 1682741974
No ratings yet
Complete A Z Javascript Notes 1682741974
85 pages
Javascript Interview Questions and Answers
No ratings yet
Javascript Interview Questions and Answers
20 pages
AJAX: Creating Web Pages With A Synchronous Javascript and XML
100% (2)
AJAX: Creating Web Pages With A Synchronous Javascript and XML
408 pages
Wsu Css Cheat Sheet Gdocs
No ratings yet
Wsu Css Cheat Sheet Gdocs
34 pages
JavaScript Quick Quiz
No ratings yet
JavaScript Quick Quiz
19 pages
CSS3 Interview Questions and Answers
No ratings yet
CSS3 Interview Questions and Answers
2 pages
Inline CSS:: CSS: Cascading Style Sheet
No ratings yet
Inline CSS:: CSS: Cascading Style Sheet
44 pages
JavaScript Tutorial
No ratings yet
JavaScript Tutorial
366 pages
Java-Control Flow Statements
No ratings yet
Java-Control Flow Statements
69 pages
5 JavaScript Coding Exercises 2
No ratings yet
5 JavaScript Coding Exercises 2
7 pages
10 Steps To Learn Your Next Programming Language
100% (2)
10 Steps To Learn Your Next Programming Language
16 pages
Static Web Site Cheat Sheets
100% (1)
Static Web Site Cheat Sheets
31 pages
Javascript Exercises
No ratings yet
Javascript Exercises
2 pages
Top 40 Javascript Interview Questions and Answers
No ratings yet
Top 40 Javascript Interview Questions and Answers
12 pages
JavaScript Tutotial Point PDF
No ratings yet
JavaScript Tutotial Point PDF
14 pages
MOO Programming Cheat Sheet
No ratings yet
MOO Programming Cheat Sheet
9 pages
HTML CSS Project
100% (1)
HTML CSS Project
3 pages
Web Designing Tutorial Syllabus
No ratings yet
Web Designing Tutorial Syllabus
6 pages
WPT Mock
No ratings yet
WPT Mock
6 pages
Top 50 UI Developer Interview Questions and Answers UPDATED TCS Cognizant PDF
No ratings yet
Top 50 UI Developer Interview Questions and Answers UPDATED TCS Cognizant PDF
8 pages
CSS Interview Questions: Click Here
No ratings yet
CSS Interview Questions: Click Here
25 pages
10 JavaScript Coding Exercises
No ratings yet
10 JavaScript Coding Exercises
11 pages
HTML Cheat Sheet
No ratings yet
HTML Cheat Sheet
2 pages
Unit Ii: Advanced Concepts in HTML
No ratings yet
Unit Ii: Advanced Concepts in HTML
26 pages
Javascript Dom PDF
No ratings yet
Javascript Dom PDF
30 pages
200+ Exercices With Solutions
No ratings yet
200+ Exercices With Solutions
147 pages
DSA Roadmap Sheet
No ratings yet
DSA Roadmap Sheet
4 pages
For HR Rounds, They Will Test Your Analytical Skills and How You Approach Towards A
No ratings yet
For HR Rounds, They Will Test Your Analytical Skills and How You Approach Towards A
3 pages
Lara Java Course Content
No ratings yet
Lara Java Course Content
29 pages
Full Stack Development Bootcamp: 11 Months - Online
No ratings yet
Full Stack Development Bootcamp: 11 Months - Online
12 pages
HTML Vs XML
No ratings yet
HTML Vs XML
9 pages
Deepti_patel (1)
No ratings yet
Deepti_patel (1)
2 pages
HTML Css Notes
No ratings yet
HTML Css Notes
7 pages
JavaScript For Loop
No ratings yet
JavaScript For Loop
6 pages
Css Interview Questions
No ratings yet
Css Interview Questions
7 pages
Web Design With HTML-CSS-JavaScript - 0
No ratings yet
Web Design With HTML-CSS-JavaScript - 0
5 pages
Latest JavaScript Interview Questions and Answers PDF - CodeProject2019
No ratings yet
Latest JavaScript Interview Questions and Answers PDF - CodeProject2019
7 pages
65 JavaScript Interview Questions and Answers - The ULTIMATE List (PDF Download) - Web Code Geeks - 2016
No ratings yet
65 JavaScript Interview Questions and Answers - The ULTIMATE List (PDF Download) - Web Code Geeks - 2016
22 pages
HTML Interview Questions and Answers
No ratings yet
HTML Interview Questions and Answers
56 pages
Ajax Interview Questions and Answers Set
No ratings yet
Ajax Interview Questions and Answers Set
15 pages
Pgdca 2 Sem PDF
No ratings yet
Pgdca 2 Sem PDF
11 pages
Untitled
No ratings yet
Untitled
12 pages
TCS NQT Recruitment Process 2025 - Detailed Syllabus & Previous Year Question - OnlineStudy4U
No ratings yet
TCS NQT Recruitment Process 2025 - Detailed Syllabus & Previous Year Question - OnlineStudy4U
8 pages
JavaScript Syllabus
No ratings yet
JavaScript Syllabus
3 pages
Javascript - Javascript Tutorial: Javascript Tutorials Is One of The Best Quick Reference To The Javascript. in This
100% (1)
Javascript - Javascript Tutorial: Javascript Tutorials Is One of The Best Quick Reference To The Javascript. in This
39 pages
JAVA SCRIPT SUDHAKAR SHARMA(1)
0% (1)
JAVA SCRIPT SUDHAKAR SHARMA(1)
111 pages
JavaScript Array Methods - Shiksha Online
No ratings yet
JavaScript Array Methods - Shiksha Online
10 pages
OOP Javascript
No ratings yet
OOP Javascript
8 pages
Client Side Scripting - 6thecture
No ratings yet
Client Side Scripting - 6thecture
101 pages
Tables and Links in HTML: A. Multiple Choice Questions
No ratings yet
Tables and Links in HTML: A. Multiple Choice Questions
6 pages
How To Crack at Top Products Company
No ratings yet
How To Crack at Top Products Company
14 pages
Topalian Calculation Suite by Christopher Topalian
No ratings yet
Topalian Calculation Suite by Christopher Topalian
70 pages
Experiment No. # 1: Page Source
No ratings yet
Experiment No. # 1: Page Source
32 pages
HTML Quiz Questions and Answers - QualityPoint Technologies
No ratings yet
HTML Quiz Questions and Answers - QualityPoint Technologies
15 pages
ChatGPT for Business: Strategies for Success
From Everand
ChatGPT for Business: Strategies for Success
Matthew C. Smith
1/5 (1)
JavaScript Examples PDF Free Download 51 Examples
No ratings yet
JavaScript Examples PDF Free Download 51 Examples
54 pages
Gray Hat Hacking the Ethical Hacker's
From Everand
Gray Hat Hacking the Ethical Hacker's
Çağatay Şanlı
5/5 (1)
A To Z of Internet: Everything You Wanted to Know
From Everand
A To Z of Internet: Everything You Wanted to Know
Bittu Kumar
No ratings yet
Best JavaScript Examples You Must Try in 2024
No ratings yet
Best JavaScript Examples You Must Try in 2024
13 pages
Hierarchical clustering
No ratings yet
Hierarchical clustering
23 pages
Toughbook CF c1 f9 s9 Reference Manual
No ratings yet
Toughbook CF c1 f9 s9 Reference Manual
205 pages
CXL Ann
No ratings yet
CXL Ann
17 pages
Disaster Recovery in Cloud Computing Systems
No ratings yet
Disaster Recovery in Cloud Computing Systems
9 pages
WASSCE WAEC Computer Studies Syllabus
No ratings yet
WASSCE WAEC Computer Studies Syllabus
30 pages
euskalhack_2024_coop
No ratings yet
euskalhack_2024_coop
35 pages
8 LRT Tesorio
No ratings yet
8 LRT Tesorio
6 pages
Visual Communication Desing: First Grade
No ratings yet
Visual Communication Desing: First Grade
4 pages
Learning Ethical Hacking From Scratch Training Course _ Udemy
No ratings yet
Learning Ethical Hacking From Scratch Training Course _ Udemy
14 pages
Prolog programming for artificial intelligence 4ed. Edition Ivan Bratko 2024 Scribd Download
100% (6)
Prolog programming for artificial intelligence 4ed. Edition Ivan Bratko 2024 Scribd Download
51 pages
SAP HANA on IBM Power Level 1 Quiz_ Attempt review
No ratings yet
SAP HANA on IBM Power Level 1 Quiz_ Attempt review
14 pages
RESTful API Design OCTO Quick Reference Card 2.2
No ratings yet
RESTful API Design OCTO Quick Reference Card 2.2
4 pages
Tool Selector V2
No ratings yet
Tool Selector V2
1 page
Hide Columns or Rows in Excel (In Easy Steps)
No ratings yet
Hide Columns or Rows in Excel (In Easy Steps)
11 pages
Iq-Signal Measurement & Conversion: Iqwizard
No ratings yet
Iq-Signal Measurement & Conversion: Iqwizard
28 pages
Parallel Computing Unsteady Heat Equation 1D With Mpi: Ipung Pramono
No ratings yet
Parallel Computing Unsteady Heat Equation 1D With Mpi: Ipung Pramono
15 pages
Data Science Lecture 2 Four Dimensions
No ratings yet
Data Science Lecture 2 Four Dimensions
25 pages
ADAPT ABI Brochure
No ratings yet
ADAPT ABI Brochure
1 page
C4.5 Decision Tree Solution With Calculations
No ratings yet
C4.5 Decision Tree Solution With Calculations
4 pages
Department of Electronics & Communication Engineering: Academic Year: 2023-2024 Assignment - 3
No ratings yet
Department of Electronics & Communication Engineering: Academic Year: 2023-2024 Assignment - 3
2 pages
viewNitPdf_4721919
No ratings yet
viewNitPdf_4721919
12 pages
LR Continue On Error
No ratings yet
LR Continue On Error
2 pages
IBM SPSS Statistics Data File Driver Guide
No ratings yet
IBM SPSS Statistics Data File Driver Guide
34 pages
An FPGA-Based Reconfigurable CNN Accelerator For YOLO
No ratings yet
An FPGA-Based Reconfigurable CNN Accelerator For YOLO
5 pages
Extraction of Cropland Field Parcels With High Resolution Remote Sensing Using Multi-Task Learning
No ratings yet
Extraction of Cropland Field Parcels With High Resolution Remote Sensing Using Multi-Task Learning
24 pages
Aruba Central SESION 1
100% (1)
Aruba Central SESION 1
17 pages
Tamils and Technology Unit-5 Question Bank
No ratings yet
Tamils and Technology Unit-5 Question Bank
17 pages
Pronto Release - Notes - 670 - 6
No ratings yet
Pronto Release - Notes - 670 - 6
82 pages
20200829044506incorporating Quotes Worksheet
No ratings yet
20200829044506incorporating Quotes Worksheet
3 pages
Laptop Care and Use Procedures and Guidelines
No ratings yet
Laptop Care and Use Procedures and Guidelines
8 pages