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