Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
90 views

Best JavaScript Examples You Must Try in 2024

Uploaded by

kaushal.mdb85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
90 views

Best JavaScript Examples You Must Try in 2024

Uploaded by

kaushal.mdb85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Best JavaScript Examples You Must Try in 2024

simplilearn.com/tutorials/javascript-tutorial/javascript-examples

Ravikiran A S December 29, 2021

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.

1/13
Game development

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

Want a Top Software Development Job? Start Here!

Full Stack Development-MEANExplore Program

Most Popular Examples of JavaScript

Example 1: JavaScript Program to Print Hello World


<html>

<body>

<script type="text/javascript">

alert("Hello World");

</script>

</body>

</html>

Output

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

<!DOCTYPE html>

2/13
<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

3/13
Want a Top Software Development Job? Start Here!

Full Stack Development-MEANExplore Program

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)

4/13
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;

5/13
}

</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

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>

6/13
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

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>

7/13
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

Example 7: Line-Breaks Pop-Up Message


<!DOCTYPE html>

<html>

<body>

<h2>JavaScript</h2>

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

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

</body>

</html>

Output

Want a Top Software Development Job? Start Here!

Full Stack Development-MEANExplore Program

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>

9/13
</html>

Output

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

Example 10: JS Number Methods Using tostring()

10/13
<!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

Example 11

<!DOCTYPE html>

<html>

11/13
<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

Earn upto 25 CEUs from Caltech CTME and get a score a new job with an average
annual package of 9-10 L after completing the PGP in Full Stack Web Development.
Enroll 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 Post

12/13
Graduate Program in Full Stack Web Development 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 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 pow…

View More

13/13

You might also like