JavaScript Functions

1. What is a function?

A function is a block of code, which can be reused.
In JavaScript a function can be declared as below.

function sum(a,b)
{
  var c=a+b;
  return c;
}

A function always return a value. If no return statement it will return undefined.

2. Invoking the function.

You can invoke the above function as below.

var result=sum(1,2);

3. Parameters in functions.

The above sum function take 2 arguments, we can define functions without arguments.
If you forget to pass a parameter, JavaScript will assign undefined to that parameter.

ex: if you call sum(1);,which will return NaN. Because c will be calculated as var c= 1 + undefined
you can pass any number of parameters to the sum function as.
sum(1,2,3,4) but the result will be 3, because JavaScript will took only first 2 parameters

4. Arguments array

A JavaScript function stores all the passed parameters in an internal arguments array.

function args()
{
  return arguments;
}

now call args(1,2,3,true,undefined);
will return [1,2,3,true,undefined]

5. A JavaScript function that can be used to sum n numbers.

function sum_n_numbers()
{
  var i, result=0;

  var count=arguments.length;
  
  for(i=0;i<count;i++)
  {
    result+=arguments[i];
  }

  return result;  

}

6. Predefined functions in JavaScript.

parseInt()
parseFloat()
isNaN()
isFinite()
encodeURI()
decodeURI()
encodeURIComponent()
decodeURIComponent()
eval() – take string input and execute JavaScript

7. Variable scope in JavaScript.

JavaScript uses function scope than block scope.
A variable declared inside function will be accessible throughout the function.
A variable declared inside a if block is also accessible throughout the function.
Global variables are declared outside the function.
If a variable is declared inside a function without the var keyword , it will automatically go to the global scope.(not recommended)

8. Function Expression

JavaScript functions can be assigned to variables.

var func= function sum(a,b){};
var result= func(a,b);

In JavaScript functions are treated as data, which can be assigned to other variables.
So JavaScript functions are special kind of data which contain code and can be executed.

9. Anonymous Functions

These are functions without names. They can be passed to another functions or can be executed immediately.

function(a)
{
  return a;
}

10. Passing functions to another functions

function add(a,b)
{
  return a()+b();
}

function one(a)
{
  return a;
}

function two(b)
{
  return b;
}

add(one(1),two(2));

add(function(){return 1;},function(){ return 2;});

11. Self-invoking Functions.

These functions are executed immediately after it is defined.

(
 function()
  {
    alert('hai');
  }
)()

These functions can take parameters too

(
 function(a)
  {
    alert(a);
  }
)('vivek')

12. Inner Functions

JavaScript supports inner functions, these are normally private.

function sum(a,b)
{
  function calculate(a,b)
  {
    retun a+b;
  }

  return calculate(a,b);
}

13. A function can return another function.

function hai()
{
  return function(){ alert('hai');};
}

14. JavaScript functions can be called before it is declared.

alert(func());
function func()
{
  return "hai";
}

File upload with ASP.NET MVC and Jquery Form Plugin.

In this post, i will show you how to upload a file without a full postback using Jquery Form Plugin.
Jquery form plugin use ajax to upload the file. This technique will be more helpful when you need to upload file from a modal partial view.

Refer these scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

Create a file input and a submit button.

@using (Html.BeginForm("Save", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
}

Now create some div’s for progress bar and status

<div class="progress">
    <div class="bar"></div>
    <div class="percent">0%</div>
</div>
<div id="status"></div>

Now include this script in your view

<script>
    (function () {

        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');

        $('form').ajaxForm({
            beforeSend: function () {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            success: function () {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function (xhr) {
                status.html(xhr.responseText);
            }
        });

    })();
</script>

Now write a save method in your controller

[HttpPost]
 public ActionResult Save(HttpPostedFileBase myfile)
      {
         return RedirectToAction("Index");
      }