My Adsense

Friday, November 11, 2011

Javascript Basics : Part 2 (Functions)


Suppose I want to change the button color when it is clicked. And to do this task, I don’t want to send the page to the server. So, what should I do?
Well, HTML DOM has given us some events to work with. We will use one the events, Click event and put some code on its event.
The below code will change the button color if clicked on that.


Now, if we want to add another button and apply same functionality with the click, the code will like below


But if you look closely, we are repeating the code. This is the worst smell of the code smells. So, we should create a method and call that method from the click event.

So, how do we create a function in Javascript? Its easy. As we did before, we must add the ‘script’ tag first. Inside of this tag, we will write the function. In javascript, we must write the word ‘function’ before the name of the function. For example:
function MyFunctionName() {
}

Then we will call that function from the event. So, if we refactor the above html code, we will get the below

    function ChangeColor() {
        document.bgColor = "#ffaaff";
    }

Total Code:



Please note that, we can write the functions anywhere in the page inside of html tag. But it is good practice to put the function inside of the head tag.
We can pass parameter in javascript functions. In our above example, we can pass the color code from the button tag to the function. The calling part should be like this:

onclick="ChangeColor('#ffaaff')"

The function definition will be:

    function ChangeColor(color) {
        document.bgColor = color;
    }

Total code:



We can also return from a javascript function. But unlike C# and other common languages, Javascript function don’t have any return type with its definition. We will just return the result at the end of the method.
Now, according to our above scenario, we can get our required color using another function instead of passing the color code from the button tag.

So, we will have two functions. One will check and return the color code and the other function will be called from the button tag.

function GetColor() {
        if (document.bgColor.toString() == "#ffaaff") {
            return "#ffffff";
        }
else if (document.bgColor.toString() == "#ffffff") {
            return "#ffaaff";
        }
        return "#ffffff";
    }

    function ChangeColor() {
        document.bgColor = GetColor();
    } 

Total code:


Quick Test 
 If we want to display square of a number, we will add script the calling part in the 'body' tag and return the square from a Javascript function. I hope you can do it. If you can't just let me know. 

I will try to post about the events in my next blog post. 

Wednesday, November 9, 2011

Javascript Basics : Part 1 (Hello world)

Now a days, the most basic thing a web application developer must know is Javascript. So, what is javascript? Yes..you probably know Javascript is nothing to do with Java. Javascript is totally different with Java. In syntax, in semantic, in usage, in all aspects. So, Javascript is a scripting language which runs in browser. The browser software executes the script line by line, from top to bottom, and display you the output.

Now what you can guess, Javascript must be embedded in a HTML file and when the HTML codes are rendered/executed, Javascript codes get executed with those. If you want to let your browser know that you are writing a Javascript code, you must add some extra tags/codes with the statements. For example:

What you can see, at the above code, by the ‘document.write’ method, we are writing some text in the browser. But we need to add the 'script' tag having the type as javascript with it.
If the browser executes this line of code, we can view ‘Javascript is very easy’  text on the browser.
So, the total html code should be

To do this by yourself, follow the below steps:

1. Open notepad
2. Copy and paste the above html code (with Javascript)
3. Save the file as ‘FirstPage.html’
4. Close the file
5. Double click on your just created ‘Firstpage.html’ file
6. You should see the below output







Ok. so we made something which is running. Its amazing when we get something running.
In next post, we will talk about the javascript functions.