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:
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:
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