09.15.txt Notes for 09/15/05, CISC103
NOTE TO SELF: link to http://www.ecl.udel.edu/~acm from Conrad's web site.
Association for Computing Machinery,
Student Chapter gen. interest meeting:
7:30PM next wed Gore 104
(1) Review of "Scripts"
We saw last time that we can nest a script element inside the body element
of an html page.
That script element can use a for loop to fill in the detail
of a table of values, e.g. decimal to binary conversion.
Here's another example: celsius to farenheit conversion.
Here, instead of incrementing by 1 each time by using i++
we use tempC+=10 to increase temp by 10 each time. Also,
we start at -10 and go all the way to 40.
JavaScript Celsius to Farenheit Table
Celsius
Farenheit
Note that the + sign in the line:
is "concatenation", which is a fancy word for "stick together".
Both of the following have the same effect on the web page:
Version 1:
document.write("
");
In version 1, the + sign is not addition (like 2 + 3 = 5)
but instead is "concatentation".
The way you know it is concatenation is by the
"type of the operands".
If write document.write( 2 + 3); I will get "5" in the output,
because the "operands" of the + operator are both numbers.
But, if I write document.write ("2" + "3"); I will get "23" in the output,
because the type of both operands is a "string". (A thing in quotes).
The following will be the result of doing
document.write("2" + "3");
23
The following will be the result of doing
document.write(2 + 3);
5
The + is called a "binary operator" because it
has two operands. The left operand in the case of
2 + 3
is the two, and the right operand is the 5.
If the type of either operand is a string,
we do string concatenation. If the type of
both operands is numeric, we do regular addition.
In addition to binary operators, we have unary operators.
Unary operators take only one operand.
For example:
i++;
The ++ is an operator that has only one operand,
namely the variable i.
tempF = 1.8 * tempC + 32; // convert the temperature
The right operand of * is tempC
The left operand of * is 1.8
The right operand of + is 32
but the left operand of + is NOT tempC.
It is the "result" of (1.8 * tempC).
(2) Showing the power of scripts: a simple change can make
a big difference.
First, lets change one thing in our script.
We'll add a variable called "step". "step" will
be the value that gets added to the celsius temperature
each time through the loop.
In the previous example, the step was 10. We'll make
a variable for step, so we can change it to 5 or 2
or whatever we like.
I'm only showing here the changed part of the script:
var step = 5;
for (tempC = -10; tempC <= 40; tempC+=step)
[Show here what happens when you change the value to 10
or to 2. Especially note what happens for the celsius
temperature of 26 when you change the value to 2... though
it might not happen on every machine... ]
[Also show what happens if you change the variable
tempC to tempc... in both Firefox and Internet Explorer.]
A link for "script debugging" in Internet Explorer:
http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
Short version:
To debug scripts in IE, go to "Tools/Internet Options/Advanced"
and then, under "Browsing", uncheck where it says: "Disable Script Debugging"
@@@ NOTE TO SELF: Did not cover #3... only showed the page.
(3) User interaction
With the previous example, we (the web designer/programmer) had to
change the script to get the page to change.
What we would prefer is for the user to be able to interact with the
page directly.
We'll need to get there in small understandable steps.
Let's look first at a more modest page:
javascriptCelsiusToFaren.html
This page allows us to enter values for the celsius temperature
and then calculate the value for the farenheit temperature.
We see a few new HTML elements: form and input.
We see the following nesting:
We see that we can next a table inside a form element, and
an input element inside a table cell ("td") element. Note that
the input element is a "self-closing tag".
Take a look now at the attributes of the form and input elements:
form
attribute: name
There are other attributes but we'll only mention "name" for now.
Name is obvious.. it gives the form a name. We'll need to refer
to this form elsewhere in our HTML code and our JavaScript code, so
we give it a name so we can "call it something". There can be more
than one form in an HTML file, so we need to able to give the forms
names.
input
attributes: name type size maxlength and onclick
There are other attributes, but these are enough for the time being.
The name attribute works just like the name attribute for the form.
We'll mention the other attributes as we go along.
We also see something else new: defining a JavaScript function definition.
Inside the script element is
function calculate()
{
document.temperatureForm.tempF.value =
1.8 * document.temperatureForm.tempC.value + 32;
}
A function is some JavaScript that is not executed immediately.
We define it as something we'll "call on later". It's like
a recipe. You don't eat the recipe... you use the recipe later
to make something to eat. If you buy a cake you can only eat it
once. But if you buy a cake recipe, you can use that recipe over
and over again to make lots of cakes.
We see that the function definition is followed by one JavaScript
statement, that initializes the value of the tempC input box to 0.
We then see a "function call" or a "function invocation":
calculate();
When the name of the function appears by itself, it is a
command to the JavaScript interpreter in the Web Browser to
"just do it!", that is, to "bake the cake!".
Inside the function definition, we see what the function does;
it sets the value of the tempF input box to the corresponding
value of whatever is in the tempC box.
We also see that the onchange element of the tempC input box
also contains a function call to calculate(); Whenever you
change the tempC input box, that function gets called.
We can see that by temporarily putting the following code
inside the function definition for calculate().
function calculate()
{
alert("Function calculate is being called!!!!");
document.temperatureForm.tempF.value =
1.8 * document.temperatureForm.tempC.value + 32;
}
Then, every time the function gets called, the alert box will
appear. That will get really annoying, so we'll take it out
after we demonstrate this...
(Also note that when I write calculate(), I put a set of parentheses
after it to let you, the reader, know that it is a function.)
Over time, we'll see how to combine the two web pages we saw today...
i.e. to have a form where you can enter the start, end, and step
values for the for loop that produces our Celsius to Farenheit
conversion table.
Another mystery is that crazy "26". Why did we get 78.80000000000001
instead of 78.8? We'll unravel that one two. To do so, we'll have
to look again at how numbers are stored in binary. We'll try to
understand the theory, and also the practical things we can do to make
sure that numbers like 78.80000000000001 don't make our web pages look
goofy, or worse, cause something to break.
But for now, let's turn our attention instead back to CSS.
(4) Using CSS (Cascading Style Sheets) to make web pages that are
both attractive and maintainable.
In the early days, when Netscape and Internet Explorer first came on the
scene, the way people made web pages look nice was with the tag:
Phill's Web Page
My Teaching
CISC103
CISC105
CISC181
CISC181h
My Research
Stream Control Transport Protocol (SCTP)
Reliable Server Pooling (RSerPool)
My Service
CIS Dept. Undergrad Committee
Advisor, Student ACM Chapter
The problem is that this is a lot of work to maintain. If I want to change a font, I have to do a search and replace on every heading.
The solution to this is the style sheet:
[Show how to do it with a style sheet here].
[Then look again at the Web pages for the course calendar. Show
how we might convert the not so pretty CISC103 course calendar into
one that looks prettier.. more like the CISC105 and CISC181 course
calendars.]