Friday, October 31, 2014

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>).

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.

OperationOperator
++
--
×*
÷/
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

Thursday, October 23, 2014

Lesson 3: HTML Form

One of the best thing about HTML is its simplicity and plain text format so it is viewable on any system. Not all files are viewable in all systems. Try to open a newest Microsoft Office doc on an old machine you are not likely able to. HTML isn't the only plain text language that describes a document. Some of these are quite difficult to work with. For example, see the Rich Text Format for Microsof Word, or see the math formatter Latex.

We haven't finish covering some common tags. Let's talk about the <title>, <p>, <pre>, <sup>,<sub> tag, and literals such as a hard space &nbsp;. See, the & has special meaning. You can do the © logo, or even Greek letter such as π. See here for a reference.

Now, we can continue with our <form>, the single most important addition of HTML I think. Without it all you see are formatted text with links.

I am tired of the javascript:alert(); so does the internet community. It is now to be used only occasionally for testing purpose only.

Enter the <div> tag, which simply denotes a block (a division) on your webpage you can give it a name and interact with it.

Last Name:
First name:

Now we are doing event-driven programming as opposed to traditional top-down approach like a recipe.

Next I am going to show you the function, which is like the most important concept of programming (and mathematics).

Let's rewrite the onclick above to use a function. Some programming language distinguish between procedure (subroutine) and function, and javascript just use the function.

Let's change that form above and create our own addition calculator.

Enter a:
Enter b:
Besides text box we can do radio buttons, checkboxes and more. Another form:
So are you:
Male
Female
What type of vehicle do you have (if any)?
I have a bike
I have a car

Choose your favorite flavor

You can type a lot of things in this box (even drag the lower-right corner):

You will need a form action to use the submit button (and processing form is out of our scope, sorry), but we can look at method=GET

Friday, October 17, 2014

Lesson 2 - More HTML and javascripts

A long time ago I learned all my HTML through the NCSA tutorial (in one afternoon). NCSA are the ones who made the first browser: Netscape.

Those are the original HTML, it has evolved quite a bit.

This link is a very good tutorial: http://www.w3schools.com/html/default.asp.

Personal Computers has evolved quite a bit, old machines are truly personal. There is no internet, no network. Not even hard disk, you bring your floppy disks with you. Even older computers don't even have disks but TAPES instead. This is the first computer I ever worked with:

That machine has just black and white text.. it has the BASIC programming language built in. Machines back then are all like that until DOS comes in...

Also, you hear things like "Megs" "Gigs", "bits", "bytes", we can talk about these terms too.

Last week we talked about C:, and I talked about old machines do not even have a hard disk, but 2 floppy disks. This is the kind of machine (Tandy 1000) that I used when I was in high school.

While we are here, we can talk about the <img> tag. We can talk about <title> tag too.

We can talk about font color. font size, font type such as this monospaced text and things like superscript and subscript, so you can write H2O and 52=25.

Now let's talk the most powerful tag: the <a> link tag.

Get to know your browser, you can view-source.

Now you can do a simple web page with several links... how about in a list.

My frequently visited sites:

Now we can talk about some HTML things how about input boxes and buttons?

Last Name:
First name: