JavaScript is a versatile programming language primarily used for creating dynamic and interactive content on websites. It's commonly employed for tasks such as validating form data, creating animations, updating web page content without reloading the page (AJAX), and much more. It's supported by all major web browsers and has become an essential tool for web development.
Here's a simple example to illustrate JavaScript:
html<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
// JavaScript code starts here
function greet() {
// This function displays a greeting message
var name = document.getElementById("name").value; // Get the value entered in the input field
var message = "Hello, " + name + "!"; // Create a greeting message
document.getElementById("output").textContent = message; // Display the message in the output paragraph
}
</script>
</head>
<body>
<h2>JavaScript Example</h2>
<label for="name">Enter your name:</label>
<input type="text" id="name">
<button onclick="greet()">Greet</button> <!-- When this button is clicked, the greet function is called -->
<p id="output"></p> <!-- This paragraph will display the greeting message -->
</body>
</html>In this example:
- We have an HTML document with a text input field (<input>) for the user to enter their name, a button (<button>) labeled "Greet," and an empty paragraph (<p>) that will display the greeting message.
- Inside the <script> tag, we define a JavaScript function called greet(). This function retrieves the value entered in the input field, constructs a greeting message by concatenating the name with "Hello, " and sets the content of the output paragraph to this message.
- When the user clicks the "Greet" button, the greet() function is called, triggering the display of the greeting message.
This example demonstrates how JavaScript can interact with HTML elements to create dynamic behavior on a web page.
2. Example
In this example:
We have an HTML document with two input fields, one for weight in kilograms (<input type="number" id="weight">) and another for height in meters (<input type="number" id="height">).
There's a button labeled "Calculate BMI," and a paragraph (<p>) with an empty placeholder (<p id="result"></p>) to display the calculated BMI.
Inside the <script> tag, we define a JavaScript function called calculateBMI(). This function retrieves the values entered in the weight and height input fields, calculates the BMI using the formula weight / (height * height), and then displays the result in the output paragraph.
When the user clicks the "Calculate BMI" button, the calculateBMI() function is called, triggering the calculation and display of the BMI result.
This example demonstrates how JavaScript can be used for interactive calculations, enhancing the functionality of a web page.
html<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
// JavaScript code starts here
function calculateBMI() {
// This function calculates BMI and displays the result
var weight = parseFloat(document.getElementById("weight").value); // Get weight input
var height = parseFloat(document.getElementById("height").value); // Get height input
var bmi = weight / (height * height); // Calculate BMI
document.getElementById("result").textContent = "Your BMI is: " + bmi.toFixed(2); // Display BMI result
}
</script>
</head>
<body>
<h2>BMI Calculator</h2>
<label for="weight">Enter your weight (kg):</label>
<input type="number" id="weight">
<br>
<label for="height">Enter your height (m):</label>
<input type="number" id="height">
<br>
<button onclick="calculateBMI()">Calculate BMI</button> <!-- When this button is clicked, the calculateBMI function is called -->
<p id="result"></p> <!-- This paragraph will display the calculated BMI -->
</body>
</html>
