Custom Functions: jQuery

Video tutorial illustrates writing custom functions in jQuery.

Following topics are covered in the video:
Function Declaration.
Function Expression.
Passing parameters.
Returning value.
Returning nothing, etc ..

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head><title>Functions in jQuery!</title></head>
<body>
 
<span></span>
<button id="name">Software</button>
 
 
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/my_script.js" type="text/javascript"></script>
</body>
</html>

Here we have 1 span tag for display purpose and a button with an id name.

jQuery code: Passing Parameter To Function
my_script.js

1
2
3
4
5
6
7
8
9
$(document).ready( function() {
 fun1("Oracle");
});
 
 
function fun1(text){
  $("span").append(text);
  return false;
}

function is a keyword, fun1 is a function name we have given.
Once the webpage is loaded, fun1 function will be called, and Oracle is passed to it as parameter.
Inside fun1(), the span tag is selected and the passed parameter is appended to the span tag.
Since the function doesn’t return any value back, we have written return false.

jQuery code: Passing Parameter To Function And Returning Value
my_script.js

1
2
3
4
5
6
7
8
9
10
$(document).ready( function() {
 
 var d = fun1(10, 20);
 $("span").append(d);
 
});
 
function fun1(a, b){
     return(a+b);
}

Once the webpage is loaded, fun1 function will be called, and 10, 20 is passed to it as parameters.
Inside fun1(), 10 and 20 are added and the resulting value is returned back to the calling function, where in it is stored in a variable called d, where we append it to the span tag.

jQuery code: Function Expression
my_script.js

1
2
3
4
5
6
7
8
$(document).ready( function() {
  $("#name").click(software);
});
 
var software = function() {
 $("span").append("<h1>Microsoft ltd</h1>");
 return false;
}

Here, once the user clicks on the button(with an id name), the custom function software gets invoked.
Since the function here doesn’t return any value, we have written return false;

jQuery code: Function Expression with Event Binding
my_script.js

1
2
3
4
5
6
7
8
$(document).ready( function() {
  $("#name").bind('click', software);
});
 
var software = function() {
 $("span").append("<h1>Microsoft ltd</h1>");
 return false;
}

Here we bind the event click to the button and then invoke the function software.

Video Tutorial: Custom Functions: jQuery


[youtube https://www.youtube.com/watch?v=P_68D1foqXg]

YouTube Link: https://www.youtube.com/watch?v=P_68D1foqXg [Watch the Video In Full Screen.]



Main Purposes of writing a function:
Re-usability of code.
Reduce the number of lines of code.
Cleaner looking code.
We could easily trace, modify and maintain the code.

Helps in Object Oriented Programming, as the data is bind to methods.
We could write the code in such a way that, we could pass different parameters to the same function and get desired results. Hence reducing a lot of code overhead and cost of writing extra useless codes!

Return Multiple Values From Function Using Arrays In PHP

If you are a C/C++ programmer, then you know that functions can not return more than one value. To over come this, they use Call by Reference – where address of the variables is passed, hence whenever the value in the passed address changes, the value of the actual variable changes without anything being returned.

In PHP we can accomplish this with the help of arrays.

Video Tutorial: Return Multiple Values From Function Using Arrays In PHP


[youtube https://www.youtube.com/watch?v=HsX2ay702R8]

YouTube Link: https://www.youtube.com/watch?v=HsX2ay702R8 [Watch the Video In Full Screen.]


Work Flow: Logic

Step 1: Here we pass the values to the function.

Step 2: Calculation or operation takes place inside the function.

Step 3: In case there are multiple things to return, we store it inside a array variable. Ex: $result = array($add, $sub, $mul, $div);

Step 4: We return the array variable.

Step 5: Now using array index we display the individual result using echo or print statement.

Source Code: Return Multiple Values From Function Using Arrays In PHP

<html>
 <head><title>Return Multiple Values From Functions, 
                                           using Arrays: In PHP</title></head>
 <body>
 
<?php
$get_result = calc(20, 10);
 
echo "Addition: ".$get_result[0]."<br />Subtration :".$get_result[1].
"<br />Multiplication: ".$get_result[2]."
                         <br />Division: ".$get_result[3];
echo "<br /><br />";
 
print_r ($get_result);
 
?>
 
<?php
function calc($one, $two)
{
$add = $one + $two;
$sub  =  $one  -  $two;
$mul = $one * $two;
$div  =  $one  / $two;
 
$result = array($add, $sub, $mul, $div);
 
return $result;
}
?>
 
 </body>
</html>

Output:
Addition: 30
Subtration :10
Multiplication: 200
Division: 2

Array ( [0] => 30 [1] => 10 [2] => 200 [3] => 2 )

Things To Remember:

1. All PHP files must have .php file extension.

2. Concatination operator in PHP is . [DOT]

3. print_r is a function which takes array variable as its argument and displays the input array structure. Ex: print_r ($get_result);

4. Function is defined in php using the keyword function, followed by function name.

5. $ is used to declare variables in PHP.

Array Syntax In PHP:
$variable = array(arrayElements);

For Numbers: Ex: $num = array(20, 40, 50, 60, 100);
For Strings: Ex: $str = array(“Microsoft”,”Apple”,”Oracle”,”Google”);
For Character: Ex: $chr = array(‘A’,’E’,’I’,’O’,’U’);

array is a keyword for declaring/initializing arrays in PHP.