Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to create function in javascript?

What is javascript function

A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it).

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: {}

Function Invocation

The code inside the function will execute when "something" invokes (calls) the function:

  • When an event occurs (when a user clicks a button)
  • When it is invoked (called) from JavaScript code
  • Automatically (self invoked)

    • Function Return

    When JavaScript reaches a return statement, the function will stop executing. If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement. Functions often compute a return value. The return value is "returned" back to the "caller":

    File name : index.php

    <p id="demo"></p>

    <script>
    function myFunction(a, b) {
    return a * b;
    }
    document.getElementById("demo").innerHTML = myFunction(4, 3);
    </script>

    The result in x will be: 12

    File name : index.php

    <p id="demo"></p>

    <script>
    function toCelsius(f) {
    return (5/9) * (f-32);
    }
    document.getElementById("demo").innerHTML = toCelsius(77);
    </script>

    Calling a Function

    File name : index.php

    <html>
    <head>

    <script type="text/javascript">
    function sayHello()
    {
    document.write ("Hello there!");
    }
    </script>

    </head>
    <body>
    <p>Click the following button to call the function</p>

    <form>
    <input type="button" onclick="sayHello()" value="Say Hello">
    </form>

    </body>
    </html>

    Function Parameters

    File name : index.php

    <html>
    <head>

    <script type="text/javascript">
    function sayHello(name, age)
    {
    document.write (name + " is " + age + " years old.");
    }
    </script>

    </head>
    <body>
    <p>Click the following button to call the function</p>

    <form>
    <input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
    </form>

    <p>Use different parameters inside the function and then try...</p>
    </body>
    </html>

    The return Statement

    File name : index.php

    <html>
    <head>

    <script type="text/javascript">
    function concatenate(first, last)
    {
    var full;
    full = first + last;
    return full;
    }

    function secondFunction()
    {
    var result;
    result = concatenate('Zara', 'Ali');
    document.write (result );
    }
    </script>

    </head>

    <body>
    <p>Click the following button to call the function</p>

    <form>
    <input type="button" onclick="secondFunction()" value="Call Function">
    </form>

    <p>Use different parameters inside the function and then try...</p>

    </body>
    </html>

    Function Expressions

    File name : index.php

    When you simply state a function with function keyword , optional parameters and body of code, it’s a function declaration.

    Put that declaration in a JavaScript expression (like in an assignment or arithmetic expression), it becomes a function expression.

    // Function declaration
    function function_name() {};
    // Function expression
    var function_name = function() {};

    Defining and Calling a Function

    File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>JavaScript Define and Call a Function</title>
    </head>
    <body>
    <script>
    // Defining function
    function sayHello() {
    document.write("Hello, welcome to this website!");
    }

    // Calling function
    sayHello(); // Prints: Hello, welcome to this website!
    </script>
    </body>
    </html>

    Returning Values from a Function

    File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>JavaScript Return a Value from a Function</title>
    </head>
    <body>
    <script>
    // Defining function
    function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
    }

    // Displaying returned value
    document.write(getSum(6, 20) + "<br>"); // Prints: 26
    document.write(getSum(-5, 17)); // Prints: 12
    </script>
    </body>
    </html>





    Previous Next


    Trending Tutorials


    PHP

    PHP

    100+ Tutorials
    oops

    PHP OOPs

    80+ Tutorial
    Codeigniter

    Codeigniter

    100+ Tutorial
    Laravel

    Laravel

    100+ Tutorials
    Node.js

    NODE.JS

    100+ Tutorials
    Javascript

    Javascript

    100+ Tutorials


    Review & Rating

    0.0 / 5

    0 Review

    5
    (0)

    4
    (0)

    3
    (0)

    2
    (0)

    1
    (0)

    Write Review Here


    Most Popular Tutorials

     Important Link