Class 3

JavaScript topics covered:

Creating Functions
alert(); method
Functions no parameters
Functions with parameters
Functions that use variables as parameters
Functions that return a value
Function that calls a Functions

In previous demonstrations we have used document.write() or document.writeln(). The alert() method is a great debugging tool. The alert() method is a great way to find out what is in a variable. It pops open a box with the value you want to display. So lets take a quick look at the alert() method.

The built-in JavaScript alert() method displays a popup dialog box with an OK button. The alert() method accepts string literals and variables, or any combination of the two.
alert("this is a string"); using a string click here to see demo
alert(variable_name); using a variable click here to see demo
alert("my variable is " + variable_name); using a combination of a string and variable click here to see demo
For instance, to display "Hello World" in a pop up box:
<Script language="JavaScript">alert("Hello World");</Script>

Click here to see the example

Create a variable and display it's contents to the screen with the alert() method.
```
	<Script language="JavaScript">
	var myVar = 19
	alert(myVar);
	</Script>
```
Click here to see the example
A Function does a unit of work. Create a function that displays a horizontal rule.
```
	function printLine()
	{ 
		document.write("<hr>");
	}   
	
```
To call the function, place the function name between script tags like this:

<Script>printLine()</Script>

Click here to see the example
The function would be better if you could also change the color and line size. This can be done by passing the function parameters. Create a function and pass the line color and line size as parameters.
```
	function printColorLine(lineColor, lineSize)
	{
		document.write("<hr color=" + lineColor + " noshade size=" + lineSize + ">");
	}
	
```
This time, to call the function, we need to pass the line color and line size. To create a purple horizontal rule that is 3 pixles thick, pass "purple" as the line color and 3 as the line size.
** Note the parameters need to be passed in the correct order, line color first and line size second. **

<Script language="JavaScript">printColorLine("purple",3);</Script>

Click here to see the example
The function can also be called passing variables as the parameters. Define two variables one for line color the other for line size. Call the function passing the two variables as parameters.

<Script language="JavaScript">printColorLine(someRBG,someSize);</Script>

Click here to see the example
Functions can also return a value. Create a function that will add three numbers and return the result.
```
	function totalItems(num1, num2, num3)
	{
		var sum_numbers = num1 + num2 + num3;
		return sum_numbers;
	}
```
** Note there is no "=" between return and sum_numbers. **

Since this function is returning a value, when you call the function, you need to be able to catch the value being returned. Create a variable to hold the answer being returned from the funtion. This variable will be used to catch the answer
<Script language="JavaScript">theAnswer = totalItems(2, 4, 6);</Script>

When the function is called, it adds the three numbers passed as parameters (2,4,6), then returns the sum 12. The sum is put into the variable theAnswer. It would be the same as if we had theAnswer = 12;. Notice when numbers as passed as parameters, they do not need quotes. When quotes are used, the numbers are treated as string variables. The values are then concatinated together instead of being added together. Variables that have been assigned numbers can also be used as parameters to the function.
theAnswer = totalItems("2", "4", "6");

theAnswer = totalItems(n1, n2, n3);

Click here to see the example

Functions can also call other functions. Create a function that will print a math problem. Use the function created above to sum the total of the three numbers in the math problem.

	function mathProblem()
	{
		document.writeln(n1);
		document.writeln(n2);
		document.writeln(n3);
		document.writeln("---");
		
		var problemTotal = totalItems(n1,n2,n3);
		
		document.writeln(problemTotal);
	}

Click here to see the example

global variables vs local variables
global variables are variables that are defined outside of a function. Therefor everyone can see them. Local variables are created in a function and can only be seen by that function. When the function ends the variables are gone.
```
	//global varible
	var item = "pants";
	
	function displayItem(){
		document.write("item=" + item);
	}
	
```
In the above example the function can see the variable item, because it is a global variable.
Click here to see the example

If the function created a variable named item, the function would no longer see the global variable item. The function could set the variable to a different value and it still would not effect the global variable.
```
	//global varible
	var item = "pants";
	
	function displayItem(){
		//local variable
		var item="shirt"
		document.write("item=" + item);
	}
	
	
```
In the example above, the function displayItem() creates a variable with the same name as the global variable. So, the function displayItem() uses the local variable, sets it to the value of "shirt". This does not change the global variable item, it stays set to the value of "pants". So, the function displayItem{} only uses the local variable. Later in the body of the document you could display the variable item, and it would still have the value of "shirt".
Click here to see the example

We could change the function to accept a parameter, pass the variable item to the function. Notice when we call the function using dispalyItem(item) inside the function it becomes myStuff.
```
//global variables
var item

function displayItem(myStuff){
//local variable has same name as global variable - item 
var item = "shirt"
document.write("<br>in function displayItem, local variable item=", item);
document.write("<br>in function displayItem, variable myStuff=", myStuff);
}
.
. later in the program we call the function and pass the global variable item to the function....
.
displayItem(item);
```
Click here to see the example