HomeResourcesSoftware DevelopmentJavaScript Tutorial: Learn JavaScript from ScratchBest JavaScript Examples You Must Try in 2024: All You Need to Know

Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch

Overview

An Introduction to JavaScript: Here Is All You Need to Know

Lesson - 1

JavaScript Hello World: Here's What You Need To Know

Lesson - 2

All You Need to Know About JavaScript Arrays

Lesson - 3

Using Array Filter In JavaScript to Filter Array Elements

Lesson - 4

Everything You Need to Know About Array Reduce JavaScript

Lesson - 5

Introduction To JavaScript Loops: Do-While, For, For-In Loops

Lesson - 6

All You Need to Learn About Javascript Functions

Lesson - 7

The Best Guide on How to Implement JavaScript Closures

Lesson - 8

JavaScript “This” Keyword and How to Implement It

Lesson - 9

How to Implement JavaScript Form Validation

Lesson - 10

An Introduction Guide To JavaScript RegEx

Lesson - 11

How to Do an Email Validation in JavaScript?

Lesson - 12

All You Need to Know About JavaScript Promises

Lesson - 13

How to Implement JavaScript Async/Await

Lesson - 14

JavaScript DOM Tutorial: 2020 Edition

Lesson - 15

JavaScript Objects: Properties, Methods, and Accessors

Lesson - 16

Typeof in JavaScript: Checking Data Types Using the Typeof Operator

Lesson - 17

Callback Functions in JavaScript: Everything You Need to Know

Lesson - 18

An Introduction to Javascript Games: The Best Guide

Lesson - 19

An Easy Guide to Build a Calculator App in JavaScript

Lesson - 20

Javascript Projects: The Best Guide

Lesson - 21

Best JavaScript Examples You Must Try in 2024

Lesson - 22

What is OOP in JavaScript? How is it Implemented?

Lesson - 23

JavaScript Events

Lesson - 24

Everything You Need to Know About Let in Javascript

Lesson - 25

Trying Your Hands on Java? Here’s a Guide to Help You Add a New Line in JavaScript

Lesson - 26

Understanding Operators in JavaScript

Lesson - 27

Redirect in Javascript: A Complete Guide to Help You With the Concept

Lesson - 28

Top 80+ JavaScript Interview Questions and Answers for 2025

Lesson - 29

Tips and Tricks That You Should Know Before Going to a Coding Interview

Lesson - 30

Top 65+ JQuery Interview Questions And Answers for 2025

Lesson - 31

Your Complete Guide on the Scope of Variables in JavaScript

Lesson - 32

An Introduction to JavaScript Void 0

Lesson - 33

Understanding Why Is the Password Validation Process Important in JavaScript

Lesson - 34

Java Vs .NET: Which Is the Best Technology to Choose?

Lesson - 35

A Guide to Convert String to Int in Javascript

Lesson - 36

Best JavaScript Examples You Must Try in 2024: All You Need to Know

Lesson 22 of 36By Ravikiran A S

Last updated on Nov 26, 202478733
Best JavaScript Examples You Must Try in 2024

Table of Contents

View More

JavaScript is a text-based programming language that you can use from server-side and client-side in your .Net applications. You can use it for developing web pages with its more interactive and user-friendly benefits. You can take a simple, authentic example of JavaScript that you can use and see in the search box on the Amazon web portal. It is all the features and behavior designs developed by Javascript. JavaScript enhances the user experience of the web page by transforming it from a static page to an interactive one.

JavaScript is essentially handled and used for web-based applications. You can also use Javascript for implementing hardware controls. Here are a few use cases of JavaScript:

  • Defining interactive response and performance to web pages
  • JavaScript provides users to interact with web pages as per the below examples as per the requirements
  • Show/hide more data or user information using with the click of a button
  • Change the color of a button after hovering the mouse hovers over it
  • Slide by a carousel of images on the home webpage
  • Zooming in/zooming out feature on an image
  • Performing a timer and defining count-down on a website
  • Performing animation implementations
  • Using a drop-down interactive on menu
  • Performing audio and video on a web page

Developing web and mobile apps

  • Developers can use multiple JavaScript frameworks for developing web and mobile-based applications. 
  • JavaScript frameworks are groups of plenty of JavaScript code libraries that help developers and write the code as per certain requirements.
  • For developing front-end-based UIs here, you can include other various client technologies, such as Angular, React Native.
  • Various organizations like JavaScript code libraries practice using Node.js, a JavaScript runtime environment developed JavaScript V8 engine. 

Developing web server-based applications

You can also implement JavaScript to develop modest web servers and extend using back-end infrastructure with Node.js.

Game development

You can also use JavaScript to perform and develop browser-based games.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Example 1: JavaScript Program to Print Hello World

<html>  

<body>  

<script type="text/javascript">  

 alert("Hello World");  

</script>  

</body>  

</html>  

Output

JavaScript_Examples_1

Example 2: JavaScript Program to Find the Factorial of a Number

<!DOCTYPE html>

<html>

<head>

</head>

<body style = "text-align: center; font-size: 20px;">

<h1> Welcome to the javaScript world!! </h1>

Enter a particular number: <input id = "num">

<br><br>

<button onclick = "fact()"> Please type any Factorial number </button>

<p id = "res"></p>

<script>

function fact(){

var i, num, f;

f = 1;

num = document.getElementById("num").value;

for(i = 1; i <= num; i++)  

{

f = f * i;

}

i = i - 1;  

document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f ;

}

</script>

</body>

</html>

Output

JavaScript_Examples_2.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Example 3 JavaScript Program to Format the Date With Expected Output 

mm-dd-yyyy, mm/dd/yyyy or dd-mm-yyyy, dd/mm/yyyyvar today = new Date();

var dd = today.getDate();

var mm = today.getMonth()+1; 

var yyyy = today.getFullYear();

if(dd<10) 

{

    dd='0'+dd;

} 

if(mm<10) 

{

    mm='0'+mm;

} 

today = mm+'-'+dd+'-'+yyyy;

console.log(today);

today = mm+'/'+dd+'/'+yyyy;

console.log(today);

today = dd+'-'+mm+'-'+yyyy;

console.log(today);

today = dd+'/'+mm+'/'+yyyy;

console.log(today);

Output

11-10-2021

11/10/2021

10-11-2021

10/11/2021

Example 4: JS Form Program Example

<!DOCTYPE html>

<html>

<head>

<script>

function validateForm() {

  let x = document.forms["myForm"]["fname"].value;

  if (x == "") {

    alert("Please enter your Name");

    return false;

  }

}

</script>

</head>

<body>

<h2>JavaScript Test Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">

  Enter Name: <input type="text" name="fname">

  <input type="submit" value="Submit">

</form>

</body>

</html>

Output

JavaScript_Examples_4

Example 5: POPUP Message Program Using Event

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Confirm Box</h2>

<button onclick="myFunction()">Please Try it</button>

<p id="Test Confirm Box"></p>

<script>

function myFunction() {

  var txt;

  if (confirm("Please Press a button!")) {

    txt = "You pressed Button!";

  } else {

    txt = "You pressed Cancel Button!";

  }

  document.getElementById("Test Confirm Box").innerHTML = txt;

}

</script>

</body>

</html>

Output

JavaScript_Examples_5

Example 6: Display Alert for Prompt Message Program

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Prompt Example</h2>

<button onclick="myFunction()">Please Try for Prompt message</button>

<p id="Prompt Example"></p>

<script>

function myFunction() {

  let text;

  let user = prompt("Please enter your name:", "Your First Name");

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

    text = "User cancelled the prompt.";

  } else {

    text = "Hello " + person + "! How are you?";

  }

  document.getElementById("Prompt Example").innerHTML = text;

}

</script>

</body>

</html>

Output

JavaScript_Examples_6.

Example 7: Line-Breaks Pop-Up Message

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript</h2>

<p>Line-breaks Example in a popup box.</p>

<button onclick="alert('Hello\nHow are you?')">Please Try for line-breaks Example</button>

</body>

</html>

Output

JavaScript_Examples_7

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Example 8: JS Screen Program Using Javascript

<!DOCTYPE html>

<html>

<body>

<p id="ScreenColorDepth"></p>

<script>

document.getElementById("ScreenColorDepth").innerHTML = 

"Screen color depth is " + screen.colorDepth;

</script>

</body>

</html>

Output

JavaScript_Examples_8.

Example 9: JavaScript Timer

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Timing Sample</h2>

<p>Click on "Try it". Wait 5 seconds, and the page will alert "Hello How are you!!".</p>

<button onclick="setTimeout(myFunction, 5000);">Try it</button>

<script>

function myFunction() {

  alert('Hello How are you!!');

}

</script>

</body>

</html>

Output

JavaScript_Examples_9

Example 10: JS Number Methods Using tostring()

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript List Number of Methods</h2>

<p>The toString() function converts a number to a string.</p>

<p id="demo"></p>

<script>

let x = 125;

document.getElementById("demo").innerHTML =

  x.toString() + "<br>" +

   (125).toString() + "<br>" +

   (100 + 25).toString();

</script>

</body>

</html>

Output

JavaScript_Examples_10

Example 11

<!DOCTYPE html>

<html>

<body>

<h2>HTML JS OUTPUT</h2>

<p>1st Paragraph.</p>

<p id="HTMLJSOUTPUT"></p>

<script>

document.getElementById("HTMLJSOUTPUT").innerHTML = 7 + 7;

</script>

</body>

</html>

Output

JavaScript_Examples_11

Become job-ready and get complete job assistance by opting for the decade's hottest career option. Score your dream job in no time by enrolling in our Full Stack Java Developer Job Guarantee Program Today!

Conclusion

Hope this article helped you understand JavaScript Examples. In this article, we explored the concept of Javascript code structure with the different ways of declaration techniques along with its benefits, which will be helpful to developers from Java and .net backgrounds, application architectures, and other learners looking for information on JavaScript events.

If you are looking to upgrade your skill set, you can sign up on our SkillUp platform, a Simplilearn initiative that offers numerous free online courses to help with the basics of multiple programming languages, including JavaScript. You can also opt for our Java Certification Training in which you'll learn modern coding techniques with bootcamp-level intensity and gain all you need to be a full-stack technologist.

Have any questions for us? Let us know in the comments section and our experts will get back to you as soon as possible.

About the Author

Ravikiran A SRavikiran A S

Ravikiran A S works with Simplilearn as a Research Analyst. He an enthusiastic geek always in the hunt to learn the latest technologies. He is proficient with Java Programming Language, Big Data, and powerful Big Data Frameworks like Apache Hadoop and Apache Spark.

View More
  • Acknowledgement
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.