JavaScript functions are fundamental to the language and are used to encapsulate blocks of code for reuse, modularity, and better organization. Functions in JavaScript can be defined in several ways, and they can be embedded within HTML to enhance the interactivity of web pages. This guide will explain the syntax and usage of JavaScript functions in HTML, complete with examples.
Basic JavaScript Function Syntax
A function in JavaScript is defined using the function keyword, followed by a name, a set of parentheses (), and a block of code enclosed in curly braces {}. The general syntax is:
// code to be executed
}
functionName: The name of the function.
parameters: A comma-separated list of parameters the function accepts.
code to be executed: The block of code that runs when the function is called.
Example
function greet(name) {
alert("Hello, " + name + "!");
}
In this example, the greet function takes one parameter, name, and displays an alert with a greeting message.
Including JavaScript in HTML
JavaScript can be included in HTML in two main ways: inline and external.
Inline JavaScript
Inline JavaScript is written within the <script> tags directly inside the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Function Example</title>
</head>
<body>
<button onclick="greet('Alice')">Greet</button>
<script>
function greet(name) {
alert("Hello, " + name + "!");
}
</script>
</body>
</html>
In this example, the greet function is defined inside the <script> tags within the HTML file. The function is called when the button is clicked, displaying an alert with the message "Hello, Alice!".
External JavaScript
External JavaScript is written in a separate .js file and linked to the HTML file using the <script> tag with the src attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Function Example</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="greet('Alice')">Greet</button>
</body>
</html>
<script>
function greet(name) {
alert("Hello, " + name + "!");
}
</script>
In this example, the greet function is defined in the script.js file, and the HTML file includes this script using the <script src="script.js"></script> tag.
Types of Functions
JavaScript supports various types of functions including named functions, anonymous functions, arrow functions, and immediately invoked function expressions (IIFE).
Named Functions
These are functions with a specified name, like the examples above.
Anonymous Functions
Anonymous functions do not have a name and are often used as arguments to other functions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anonymous Function Example</title>
</head>
<body>
<button onclick="(function(name) { alert('Hello, ' + name + '!'); })('Bob')">Greet</button>
</body>
</html>
Here, an anonymous function is defined and immediately called when the button is clicked.
Arrow Functions
Arrow functions provide a shorter syntax and lexically bind the this value.
const greet = (name) => {
alert("Hello, " + name + "!");
};
Arrow functions are especially useful for concise function expressions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Arrow Function Example</title>
<script>
const greet = (name) => {
alert("Hello, " + name + "!");
};
</script>
</head>
<body>
<button onclick="greet('Charlie')">Greet</button>
</body>
</html>
Event Handlers
JavaScript functions can be used to handle events like clicks, form submissions, and more. Event handlers can be assigned in HTML using attributes like onclick, onmouseover, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Handler Example</title>
<script>
function handleClick() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="handleClick()">Click Me</button>
</body>
</html>
Returning Values from Functions
Functions can return values using the return keyword. The returned value can be used by the code that calls the function.
function add(a, b) {
return a + b;
}
let result = add(5, 3);
alert(result); // Outputs: 8
Function Scope and Hoisting
Variables declared inside a function are local to that function and cannot be accessed outside. This is known as function scope. JavaScript also hoists function declarations, meaning you can call a function before it is defined in the code.
console.log(square(5)); // Outputs: 25
function square(num) {
return num * num;
}
Practice Excercise Practice now