Functions in Java Script
A function is a block of code that performs a specific task. Functions are an essential part of programming as they allow developers to break down a program into smaller, more manageable pieces of code, which can be reused and called whenever necessary.
To create a function in JavaScript, you can use the function keyword followed by a name for the function and a set of parentheses that contain the parameters for the function (if any).
Example
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("Alice"); // logs "Hello, Alice!"
greet("Bob"); // logs "Hello, Bob!"
Functions can also be assigned to variables or passed as arguments to other functions.
Example
const multiply = function(a, b) {
return a * b;
}
function calculate(operation, a, b) {
return operation(a, b);
}
const result = calculate(multiply, 2, 3); // result is 6
Java Script Using in Web Designing
JavaScript functions are an essential part of web designing as they allow developers to add interactivity, functionality, and dynamic behavior to web pages.
1) Event handling: JavaScript functions can be used to handle user events such as clicks, key presses, mouse movements, and more. For example, a function can be defined to display a message when a button is clicked or to change the color of an element when the mouse hovers over it.
2) Form validation: JavaScript functions can be used to validate user input in HTML forms. For example, a function can be defined to check if a user has entered a valid email address or if a password meets certain criteria.
3) DOM manipulation: JavaScript functions can be used to manipulate the Document Object Model (DOM) of an HTML page. For example, a function can be defined to add, remove, or modify HTML elements on the page dynamically.
4) Animation: JavaScript functions can be used to create animations on a web page. For example, a function can be defined to change the position, size, or color of an element over time, creating a simple animation effect.
Lets see an Example program in Form Validation
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
form {
text-align: center;
margin-top: 50px;
font-size: 24px;
}
input[type="text"], input[type="email"] {
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
input[type="submit"] {
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.error {
color: red;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()">
<label>Name:</label><br>
<input type="text" name="name" id="name"><br>
<span id="name-error" class="error"></span><br>
<label>Email:</label><br>
<input type="email" name="email" id="email"><br>
<span id="email-error" class="error"></span><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
// get form fields
var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
// get error elements
var nameError = document.getElementById("name-error");
var emailError = document.getElementById("email-error");
// set error messages to empty strings
nameError.innerHTML = "";
emailError.innerHTML = "";
// validate name field
if (nameField.value == "") {
nameError.innerHTML = "Please enter your name";
nameField.focus();
return false;
}
// validate email field
if (emailField.value == "") {
emailError.innerHTML = "Please enter your email";
emailField.focus();
return false;
}
else if (!/\S+@\S+\.\S+/.test(emailField.value)) {
emailError.innerHTML = "Please enter a valid email";
emailField.focus();
return false;
}
return true;
}
</script>
</body>
</html>