JavaScript Awesome client side scripting technology

[ this, arg1, arg2 ];

}

</script>

Most common way, unfortunately, global function calls

When we are learning JavaScript we learn how to define functions using the syntax used in the example above. We learn that it’s also very easy to call that function — all we need to do is:

makeArray(‘one’, ‘two’);

// => [ window, ‘one’, ‘two’ ]

Wait a minute. What’s that window object doing there? Why is it the value of this? If you haven’t stopped to think about it, please stay with me here.

In JavaScript, and I’m not talking specifically about the browser here, there’s a default/global object. It’s as if every code that we write which seems to be just “loose” inside your script (i.e. outside of any object declaration) is actually being written in the context of that global object. In our case, that makeArrayfunction isn’t just a loose “global” function, it’s a method of the global object. Bringing ourselves back to the browser, the global object is mapped to the window object in this environment. Let’s prove that.

alert( typeof window.methodThatDoesntExist );

// => undefined

alert( typeof window.makeArray);

// => function

What all this means is that calling makeArray like we did before is the same as calling as follows.

window.makeArray(‘one’, ‘two’);

// => [ window, ‘one’, ‘two’ ]

I say it’s unfortunate that this is the most common way because it leads us to declare our functions globally by default. And we all know that global members are not exactly the best practice in software programming. This is especially true in JavaScript. Avoid globals in JavaScript, you won’t regret it.

JavaScript function invocation rule #1 In a function called directly without an explicit owner object, like myFunction(), causes the value of this to be the default object (window in the browser).

Method call

Let’s now create a small object and use the makeArray function as one of its methods. We will declare the object using the literal notation. Let’s also call this method.

//creating the object

var arrayMaker = {

someProperty: ‘some value here’,

make: makeArray

};

//invoke the make() method

arrayMaker.make(‘one’, ‘two’);

// => [ arrayMaker, ‘one’, ‘two’ ]

// alternative syntax, using square brackets

arrayMaker[‘make’](‘one’, ‘two’);

// => [ arrayMaker, ‘one’, ‘two’ ]

See the difference here? The value of this became the object itself. You may be wondering why isn’t it still window since that’s how the original function had been defined. Well, that’s just the way functions are passed around in JavaScript. Function is a standard data type in JavaScript, an object indeed; you can pass them around and copy them. It’s as if the entire function with argument list and body was copied and assigned to make in arrayMaker. It’s just like defining arrayMaker like this:

var arrayMaker = {

someProperty: ‘some value here’,

make: function (arg1, arg2) {

return [ this, arg1, arg2 ];

}

};

JavaScript function invocation rule #2 In a function called using the method invocation syntax, like obj.myFunction() or obj[‘myFunction’](), causes the value of this to be obj.

This is a major source of bugs in event handling code. Look at these examples.

<input type=”button” value=”Button 1″ id=”btn1″ />

<input type=”button” value=”Button 2″ id=”btn2″ />

<input type=”button” value=”Button 3″ id=”btn3″ onclick=”buttonClicked();”/>

<script type=”text/javascript”>

function buttonClicked(){

var text = (this === window) ? ‘window’ : this.id;

alert( text );

}

var button1 = document.getElementById(‘btn1′);

var button2 = document.getElementById(‘btn2′);

button1.onclick = buttonClicked;

button2.onclick = function(){ buttonClicked(); };

</script>

Clicking the first button will display “btn1″ because it’s a method invocation and this will be assigned the owner object (the button input element.) Clicking the second button will display “window” becausebuttonClicked is being called directly (i.e. not like obj.buttonClicked().) This is the same thing that happens when we assign the event handler directly in the element’s tag, as we have done for the third button. Clicking the third button does the same of the second button.

That’s another advantage of using a library like jQuery. When defining event handlers in jQuery, the library will take care of overriding the value of this and make sure it contains a reference to the element that was the source of the event.

//using jQuery

$(‘#btn1′).click( function() {

alert( this.id ); // jQuery ensures ‘this’ will be the button

});

3.How javascript function return value?

===>JavaScript provides for passing one value back to the code that called it after everything in the function that needs to run has finished running.

JavaScript passes a value from a function back to the code that called it by using the return statement. The value to be returned is specified in the return. That value can be a constant value, a variable, or even a calculation where the result of the calculation will be returned.

return 3;
return xyz;
return true;
return x / y + 27;

You can include multiple return statements into your function each of which returns a different value. In addition to returning the specified value the return statement also acts as an instruction to exit from the function at that point. Any code that follows the return statement will not be run.

function num(x, y) {
if (x !== y) {return false;}
if (x < 5) {return 5;}
return x;
}

The above function shows how you control which return statement is run by using if statements.

The value that is returned from a call to a function is the value of that function call. For example with that function we can set a variable to the value that is returned using the following code (which would set result to 5).

var result = num(3,3);

The difference between functions and other variables is that the function has to be run in order to determine its value. When you need to access that value in multiple places in your code, it is more efficient to run the function once and assign the value returned to a variable. That variable is used in the rest of the calculations.

Alert()

The alert function displays information in a dialog box. You can use this to display error messages. It is particularly useful when used with form validation.

Structure:

alert(“Put what you want in the alert box here”)