Javascript Example
What is JavaScript?
JavaScript is a highly versatile programming language. It provides the capability to add interactivity to static web pages, which are designed with HTML and CSS. It also provides the capability to use dynamic styles, dynamic removal or addition of HTML elements, and so much more. For instance, when a user attempts to submit an empty form and receives an error message, it is JavaScript that provides the capability.
JavaScript is the language of web browsers. When we write JavaScript code, the browser runs it. But if we want to use JavaScript outside the browser environment, we need Node.js, which is the runtime environment of JavaScript. This enables the development of server-side applications.
JavaScript can therefore be utilized to make the front-end of web applications interactive while also being able to make it possible to develop servers to manage back-end tasks with Node.js. This JavaScript tutorial provides in-depth information about the language.
JavaScript is primarily utilized for web-based applications, but it can be utilized for hardware control implementations as well. Some of the applications of JavaScript are listed below:
Making web pages interactive and improving performance on web pages.
- Making web pages interactive for users with varied functionalities, such as: Displaying or hiding extra information or user information by a click on a button.
- Altering the color of a button when the mouse hovers over it.
- Creating a sliding gallery of images on the home page.
- Creating zoom-in and zoom-out functionality for images.
- Running timers and countdowns on a web page.
- Adding animations.
- Utilizing interactive drop-down menus.
- Playing audio and video content on a web page.
Development of web and mobile applications
Developers have the freedom of using different JavaScript frameworks to create web and mobile applications. The frameworks consist of numerous JavaScript code libraries that enable developers to code based on specific specifications. Some client technologies for developing the front-end user interface are Angular and React Native. The majority of organizations use JavaScript code libraries, particularly Node.js, which is a JavaScript runtime environment that is built on the JavaScript V8 engine.
Development of web server applications:
JavaScript can be utilized to create basic web servers and can be supplemented with back-end infrastructure by using Node.js.
Game development
JavaScript can be utilized to create and design games that run in web browsers.
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>
<html>
<head>
</head>
<body style = "text-align: center; font-size: 20px;">
<h2> Welcome to the JavaScript </h2>
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
Example 3: JavaScript Program to Format the Date With Expected Output
//mm-dd-yyyy, mm/dd/yyyy or dd-mm-yyyy, dd/mm/yyyy
var 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
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
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
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
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
How are you?')">Please Try for line-breaks Example</button>
</body>
</html>
Output
Conclusion
In conclusion, JavaScript stands out as a flexible programming language that plays a crucial role in contemporary web development. It allows developers to build dynamic and interactive user interfaces by utilizing features such as DOM manipulation, user input handling, and executing code right in the web browser.