Javascript for X: Day 2

Today, 25.12.11, is the second day of the Javascript tutorial here on quadd help.

Day 2
Javascript Functions
Functions are small code of program which are called when required.

Non technical example: Sam's mother assigned him following tasks when guests come their home for Christmas celebration.

• Ask and arrange for drinks for guests.
• If any guest need anything, he would assist them.

Now, Sam can do first task that is asking for drinks, ONLY when guests come, so coming of guests is an event, which when happens then Sam will do what his mom told him to do. Second task, again, Sam can do only if any guest call him for help.
So, following interpretations are there:

• If no guest come and call Sam, HE WILL DO NOTHING.
• Either guests come and call him or not, Sam is always ready for the works assigned.

So, when, www.w3schools.com says, "A function will be executed by an event or by a call to the function.", it is absolutely correct. If some event occurs or some other program or part of the program calls the function, then only it works.

Today, we will discuss a function that is defined in head section and works only when someone clicks on the button in body section of the program. Here, one thing is noteworthy, Clicking of button is an event which calls the program that we will make. But before that lets see the syntax of declaring a function. Remember we will declare functions in the head section.

Syntax:

function functionname(var1,var2,...,varX)
{
some code
}

Explanation:
Here function is the keyword, which declares the function, so it should be written as it is. functionname is the name of the function which programmer can assign, a programmer can give any name to the function he likes but only by following the naming rules, the naming rules are same as for variables. Var1, Var2, etc. are arguments that our program will provide to function to work upon while calling. Some Code are steps which function will do on calling.

Arguments, are the input provided to function to work upon. Like if we send someone to market to buy something, and we also provide some money to them while sending. And that money is spent to produce output (that is to purchase that thing from market that we want that person to bring for us). So that money is called argument in javascript programming.

Example Code (www.w3schools.com) :

A simple program which by using functions display message Hello World, when user clicks a button in body of the browser.

Output1: Showing form button "Click Me", on which user clicks and function being called.

Output2: After user clicks on the form button, the function displays an alert dialog box with message.

Explanation:
In the head section one function named as displaymessage() is declared which takes no argument that is why its set of parenthesis '()' is empty. And it will display an Alert dialog box with message Hello World!, when it is called.
In the body section is the code which will call the 'displaymessage()' function. Remember that when this body section code call the function, then only it will perform.
And the program calls function when user click on the button 'Click Me!'.
For that a form is created with button as usual, but one portion is noteworthy - onclick = "displaymessage()" - this line can be read as, WHEN USER PERFORMS 'ONCLICK' EVENT (THAT IS CLICKING ON THE BUTTON) CALL THE DISPLAY FUNCTION. And when this event calls the function it performs its tasks assigned.

Now lets have example of functions using arguments:
Example Code:

This code is based on a simple program of adding two numbers. But thing to note is that it takes values from the body section and pass it to the head section. Here, 10 and 20 values are sent as arguments to sum function, which accepts first value (10) to its local argument, num1 and accepts second value to its other local argument, num2. And simply prints their sum on a alert dialog box after adding them.

Output1: Showing form button "Click Me", on which user clicks and function being called.

Output2: After user clicks on the form button, the function displays an alert dialog box sum of two numbers.

This tutorial is about declaring or defining and calling functions. And this will help us to read values from HTML forms (as functions are required for it), in following tutorials.


Readers can create their own examples. Please feel free to ask any doubts regarding this tutorial or about your own examples, today. Please allow 2-3 hours to answer your queries.

Now we are just a step away from controlling forms. Today we passed hard-coded values from the body section to the function, tomorrow we will see these values coming from prompt dialog box and then from forms.


Tomorrow's topic: Controlling Forms using Javascript.
Yesterday's topic: Javascript Popup Boxes

Quadd Notes for GMACPS Class X.