jQuery Function Basic

Basically, functions are simply a block of codes that will be executed when run or called. The concept of function is almost the same for all computer programming. The main benefit of using function is that it can be reused again and again when need, without writing the same codes again.

The following jQuery example will generate a random number between 10 and 60.

<head>
<title>jQuery Function Basic</title>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.random.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {

             myTimer = setInterval(function () {

                    // Generate a random number between 10 and 60
                    // Here I used a plugin - jquery.random.js
                    var ranNum = $.randomBetween(10, 60);

                    // Display the random number on web page
                    $(".outputText").text(ranNum);   

             }, 4000);

        });
    </script>
</head>

<body>
    <h2>jQuery Function Basic</h2>
    The random number is: <span>Random Numbers...</span>
</body>
</html>

Note that all the codes are written line by line continuously inside the registered ready event :

jQuery("document").ready(function() {

    -- Continous block of codes --

});

Demo:

jQuery Example File:

Click here to download.

Now, let’s change the block of codes into a function, and call it.

<head>
<title>jQuery Function Basic 2</title>
                                                                 
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.random.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {

        // Call the function here
        putRandomNumberHere();
        
        function putRandomNumberHere() {

            myTimer = setInterval(function () {
        
                        // Generate a random number between 10 and 60
                        // Here I used a plugin - jquery.random.js
                        var ranNum = $.randomBetween(10, 60);
                   
                        // Display the random number on web page
                        $(".outputText").text(ranNum);   
        
               }, 4000);

        }

        });
    </script>
</head>

As you can see, the codes are much easier to read.

jQuery("document").ready(function() {

    // Call the function here
    functionName();
    
    function functionName() {

        -- Write the codes here --

    }

});

Demo:

jQuery Example File:

Click here to download.

When there are only a few lines of codes, it seems to have no much difference. However for a large project, the codes are much easier to manage.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>