Learn Javascript

[hot_pastrami]

Ok, on to Functions. If you want to create a function, you use the function keyword. Like with var, the function keyword is then followed by the function name. Then, you include a list of arguments in parethases (we'll get to this in a bit), and then the block of code which will execute when a call is made to this function.

Here's a simple example, using some code from a previous example:

function changeBackgroundColor () {
   var prompt = "Click OK to change the background to red.\nClick Cancel to make it blue.";

   if (confirm(prompt)) {
      document.bgColor = "red";
   }
   else {
      alert("We'll make it blue then.");
      document.bgColor = "blue";
   }
}

If you paste this into the Javascript Tester, nothing will happen, because though we define the function, we never make a call to it, so it doesn't execute. Try adding this to the bottom:

changeBackgroundColor();

Now it'll execute. If you added that line twice, you'd go through the dialogs twice.

Now let's modify it to accept arguments. When we create the function with the function keyword, if we define arguments in the parenthases, then we can pass information to the function for it to work with. Here's an example:

function changeBackgroundColor (prompt, newColor) {

   if (confirm(prompt)) {
      document.bgColor = newColor;
   }
}

When we do this, the variables prompt and newColor are created inside the function when it is called, and those variables contain the values that were passed into the function. So when we call the above function, it would look something like this:

var colorPrompt = "Click OK to change the background color.\nClick Cancel to leave it unchanged.";
var color = "purple";

changeBackgroundColor(prompt, color);

...or, just like this:

changeBackgroundColor ("Do you want to change the background color?", "green");

Say we want the function to do something useful, and hand the results back to us... we use the return keyword to send the value back to whatever called the function:

function addTwoNumbers (first, second) {
   var sum = parseInt(first) + parseInt(second);
   return sum;
}

(The function parseInt() causes Javascript to treat a value like a number rather than like a string, but we'll get to that later). So, we could call the above function like this:

var someNumber = prompt("Enter any number");
var anotherNumber = prompt("Enter any other number");
var myTotal = addTwoNumbers(someNumber, anotherNumber);

alert(myTotal);

We can return a string, a number... any kind of data.

Suppose the user leaves the entry fields blank when they run this script. The prompt() function would return an empty string (""), and the call to addTwoNumbers() would fail, because there are no numbers to add. If we wanted to be cautious in our programming, and make sure the user didn't provide an empty string, we can test for that in the function, and provide an error if necessary:

function addTwoNumbers (first, second) {
   if (first == "") {
      alert("You didn't provide the first number");
      return 0;
   }
   if (second == "") {
      alert("You didn't provide the second number");
      return 0;
   }
   var sum = parseInt(first) + parseInt(second);
   return sum;
}

Suppose someone calls our addTwoNumbers() function without sending any arguments... When no value is sent for an argument, the function gives that variable the special value undefined. Many programming languages call this value null.

More later...