When developing JavaScript applications, you script many blocks of code. In many cases, the blocks of code scripted for a particular JavaScript application can be used for many other similar JavaScript applications. Instead of rewriting the same code block for every new JavaScript application, you can use functions. Functions eliminate the need to rewrite a particular code and provide you with a code block that can be replaced for the same for every new JavaScript application. In cases when problems are complicated, confusing, and time-consuming, functions can be used to break down the complex problem into small sections of workable functions.
Functions can be used to write modular codes, and these features are compatible with JavaScript, meaning they can be exploited to achieve specific results in JavaScript. You can also explore and create your functions for personalized problems.
Basics of a Function
Before diving deep into the topic, let us understand the basics of it. How can you define a function in JavaScript? Any ideas? It is recommended to define the function by calling the respective function by its predefined keyword and then following it with a function name unique to that particular function. Also, functions consist of parameters, and it is up to you to define them or leave them untouched. Then attach a statement block to the defined function by enclosing the block in curly braces.
Following is the syntax used for defining a function in JavaScript code:
<script type = "text/javascript">
<!--
function functionname(list of parameters) {
statement(s) that are attached to the above function
}
//-->
</script>Following is an example of a JavaScript code using the function:
<script type = "text/javascript">
<!--
function firstattempt() {
alert("This is my first attempt.");
}
//-->
</script>Steps to call a function
Follow the sample code to understand the method to call a function:
<html>
<head>
<script type = "text/javascript">
function firstattempt() {
document.write ("This is my first attempt.");
}
</script>
</head>
<body>
<p>Use the provided button for calling the function</p>
<form>
<input type = "button" onclick = "firstattempt()" value = "Attempt Number">
</form>
</body>
</html>The output for the program is:
Use the provided button to call the function
Button display of name Attempt Number on clicking it will open to the text “This is my first attempt.”.
Parameters of a Function
Functions are equipped with different attributes to enhance the user experience further. These parameters are included in the function and can be manipulated to achieve the desired output. Multiple parameters can be passed in a function, separated using the comma “,”.
Following is an example of a JavaScript code using the function with parameters:
<html>
<head>
<script type = "text/javascript">
function firstattempt(number, count) {
document.write (number + " : total, " + count + " : temporary ");
}
</script>
</head>
<body>
<p>Use the provided button for calling the function</p>
<form>
<input type = "button" onclick = "firstattempt(10, 5)" value = "Attempt Number">
</form>
</body>
</html>The output for the program is:
Use the provided button to call the function
Button display of name Attempt Number on clicking it will open to the text 10: total, 5: Temporary
Understanding the return Statement
Return statements can be used if you want to return a value from a function, and the return statement must be the last one among the entire written statements.
Following is an example of a JavaScript code using a return statement:
<html>
<head>
<script type = "text/javascript">
function firstattempt(firsthalf, secondhalf) {
var full;
totalattempts = firsthalf + secondhalf;
return totalattempts;
}
function final() {
var output;
output= concatenate(4, 6);
document.write (output);
}
</script>
</head>
<body>
<p>Use the provided button for calling the function</p>
<form>
<input type = "button" onclick = "final()" value = "Final">
</form>
</body>
</html>The output for the program is:
Use the provided button to call the function
Button display of name Final on clicking it will open to the text 4, 6.
