Lesson 4: Lists, Table, and more about functions

So last week we talked about HTML forms, and we will revisit it later to build the function plotter later.

We talked about radio button and just wanted to show you some old car radio pic like this one.

So you pick one out of many choices with a radio button. This is good for a handful of choices... If you have a longer list (such as choosing a state out of 50 states), you are better off with a combo box (or the <select>).

Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming

Notice that there are value for each entry and a display name and they can be different.

Let's talk about lists. You can do a un-ordered list <ul> with bullets.

The 3 primary colors are

• red
• green
• blue

You can do ordered list, without numbering things yourself. My shopping list for making fried rice

1. ham
2. egg
3. green onion

Next, we are going to talk about tables. Often we have the need to line up things, and HTML is hard to do that without the table. Yes, you can use <pre> tag such as the following but it isn't so pretty?

Shrimp Fried Rice    $7.50
Egg Foo Young        $5.00

Here is a table, built with <table> then 2 rows, built with <tr> then table data with <td>

Shrimp Fried Rice	$7.50
Egg Foo Young	$5.00

Yes you can add width to control width. You can add background color, and alignment. You can also turn on border. You can add cellpadding and cellspacing too.

You can also do column span and row span.

Column span example:

Lunch
Shrimp Fried Rice	$7.50
Egg Foo Young	$5.00

Row span example:

First Name:	Vivian Chan
Telephone:	312 333 4444
	312 333 5555

Here is one other tag you need to know: <!-- comments --> Things in there don't get displayed, but useful to store notes. In javascript, comments are made by a single line // or wrapped with /* */.

Ok, I am going to turn attention to javascript function. Javascript can do math operations.

Operation	Operator
+	+
-	-
×	*
÷	/

Quiz: how did I do that × and ÷ above?

The '+' can be used to put text together. Some language is harder to do text adding(such as C).

One way to see a function is a list of instructions that you can "call" when you need. It takes one or more parameters and can return a value (or none). Functions are good for breaking down tasks into sub-tasks.. or do some operation then give you 1 value. Functions can have their own local variables. BTW, a semicolon is not required end of each statement but I think it is good idea to do that.

var b=1;
function add3(n) {
  return n+3;
}

//see http://mathworld.wolfram.com/Paraboloid.html
function paraboloid(x,y) {
  var b=2;
  alert("paraboloid b="+b);
  return b*(x*x+y*y);
}
// if you call this many times, for example, x=-5 to 5, y=-5 to 5 and get a z value then plot it you will get a graph like in the link above.
// how you show 3D objects to 2D will require some more-advanced math here I hope you will eventually get to.. in college.

//  another example of function
function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}


alert(add3(7));  // shows 10
alert(add3(1)+add3(2));  // shows 9

alert(toCelsius(212));  // shows 100

alert("b="+b);  // shows 1
var z = paraboloid(0,0);
alert("b="+b);   // will it be changed to 2?

Rather than alert, chrome and firefug can use console.log