JavaScript is a fairly small scripting language embedded in a web browser.
It interacts with pieces of HTML.

JavaScript has nothing to do with Java. It was originally called LiveScript
but because the name "Java" was riding high at the time. Netscape thought
that it would be cool if they somehow brought the name "Java" into things,
so they asked Sun, who said that it was fine to use the name JavaScript, in
the mutual interest of marketing.

JavaScript is "kind of" object-oriented. Even though it has objects, it
doesn't make everything into an object. You can't control everything on a
web page with JavaScript; only the things that the web browser programmers
hacked together. In general, IE has been better at this, although
Mozilla/Netscape 6 is capable of much more than older versions of Netscape.
But due to the fact that Netscape 6 doesn't have much of a user base yet,
this doesn't matter. This isn't such a bad thing, since overuse of
JavaScript leads to extremely tacky web pages.

Even though people say that it's a complex language, it's just a
trivial little language with a lot of built-in objects.

Almost portable (differences between JavaScript and IE's JScript, and
QNX Voyager; there is a standard for the core called ECMA-262)

DOM (Document Object Model) supposed to unify the interaction with
HTML, not in common use yet because a lot of people use Netscape 4. To give
you an idea of how much this has progressed, in 1998, the Flanagan book gave
the hope of "well, maybe it's coming along soon now."

Supposedly has or had a server-side version - never heard of anyone
actually using it.

Books on web pages.

So what exactly do you use JavaScript for? In general, when you want the
web page to be "active" in some way. This pertains mainly to images. The
most common form is called "mouseover" or "rollover." (example of this on
the slide). Pop-up menus are also becoming sort of popular.

There are a number of things you can do with it to avoid page reload. You
can make an image scroller out of it, as on the o--o.net site. You can
change labels with it.

You can also verify form data on it. We'll talk about forms in a bit, but
to make a long story short: If you have a form where the user type in
and/or pick something out of a menu, you can make sure that the user typed
something in that made sense before submitting the form.

JavaScript sort of looks like Java or C++. Use the <SCRIPT> tag to start
and </SCRIPT> to stop. In addition, you must put the actual JavaScript code
within <!-- and -->. Use a // for a comment right before the -->, or
Netscape gives an almost silent syntax error.

JavaScript Basic Language: Go over some terminology.
Literals are explicit values. For example, if you say "i = 5;" the 5 is a
literal. Can be a number, string, boolean value, whatever.

Identifiers label variables and functions. In "i = 5;", i is an identifier.

Semicolons are optional. If you don't put one at the end of a line, it
doesn't matter, but you might like to have them for consistency.

JavaScript has number, string, boolean, function, object (sort of),
and Null types. Of these, numbers, strings, lists, and functions are the
most useful.

Identifiers are not case sensitive. An identifer blah is not the same as BLAH.

Comments: Even though manuals say C++ (// blah) and C (/* blah */) styles are
supported, the C style doesn't work all the time.

Control flow is top to bottom, as you'd expect from any programming
languages. One important note is that if you have several script segments,
they're all treated as one. For example, if you have

 <SCRIPT LANGUAGE=JavaScript> <!--
   blah blah;
 // --></SCRIPT>

   some stuff<p>

 <SCRIPT LANGUAGE=JavaScript> <!--
   more blah blah;
 // --></SCRIPT>

this is almost the same as

 <SCRIPT LANGUAGE=JavaScript> <!--
   blah blah;
   document.writeln("some stuff<p>");
   more blah blah;
 // --></SCRIPT>

So you can use variable locations from a previous segment (but not from
another document, of course).

All variables and state are wiped clean every time a new page loads. This
is not only a security precaution, but it prevents other web pages from
messing with the way yours looks (to a certain degree).

Functions are defined like this:

function foo(bar, baz) {
    var junk;
    ..
    junk = do_stuff(bar, baz);
    ..
    return junk;
}

In case you were wondering about nested functions, JavaScript 1.2 actually
supports them. However, there is something seriously wrong with your head
if you want to use them for any other purpose than being annoying.

Functions also double as object constructors.

function schmoo(stuff, junk) {
    this.foo = stuff;
    this.bar = junk;
}

var n = new schmoo("this is", "ridiculous");

It seems almost as (if not more) silly to use objects in JavaScript.

Flow Control:
if-else and switch are exactly as in C (see slide).
for, while, do/while as in C. Additional for/in (see slide).

To get JavaScript to actually do anything, you have to talk to a bunch of
objects, most of which are built-in and have a fixed structure. JavaScript
calls them classes anyway. They have properties and methods, like C++.
(Go over the Document class and document object).

Even though there is a DOM, it's practically useless for HTML due to the
Netscape 4 issue, which will only go away when someone puts out a better
browser for Unix. You may ask, why does anyone care about Netscape 4 users
under Unix? Well, guess who actually runs the machines that make the web go
around..

Events:
An event is a fancy name for when anything happens on the web browser. That
can be mouse movement, clicking, resizing the window, anything. JavaScript
is the most useful when it handles events. You have to embed them in anchor
(<A>) tags - they don't work anywhere else, so watch out. You'll probably
make the mistake of putting them in an <IMG> tag. Here's an example:

 <a href="foo.html" onMouseOver="do_stuff(parms); return true;">
 blah
 </a>

Every time someone mouses over "blah", the web browser runs
do_stuff(parms).

Image Rollover/Mouseover:
Most people use JavaScript for mouseover. Start out with two images, one
"active," the other not. Tag the non-active image with a name.
Then you put an anchor tag around it, with an event handler for mouseOver
and mouseOut. The event handlers simply switch the image; if it's a
mouseOver, use the "active" image.

For the moment, images must be GIF or JPEG for this to work. PNG doesn't
work with Netscape 4. This ought to give you an idea of how half-assed
the JavaScript implementation is..

(Image Rollover examples)

(Assignment 2:)

Next part of lecture: Forms. All slides.

Graphics:
---------
As I mentioned repeatedly in the first lecture, graphics are essentially
how the web got popular, in that anyone could put pictures up on a web
page with little effort. However, that doesn't mean that people who put
graphics on their web pages know anything about them. So I'm going to try
to cover that now.

There are two types of computer graphics.

Vector graphics: where you specify the figure using points and objects. You
say, "I want a line here" or "I want a 20cm-diameter circle centered here."
(Illustrate this on the board). Vector graphics produce the best results,
especially for printers. Macromedia Flash is a vector graphics format.

Raster (bitmap) graphics: A picture is a matrix of pixels, each pixel is
one dot on the screen that you can make any color you like. Put enough
pixels together and you have a coherent picture (Illustrate this on board).
Raster graphics is the only reasonable way to represent photographs, and
therefore, vector graphic formats often include raster graphic features.
It's not particularly good at line art. It is also the dominant graphics
type on the web. GIF, JPEG, and PNG are all raster graphics formats.

File formats:
GIF, JPEG, or PNG, which one do I choose? The issue of bitmap file formats
is complicated, but it's not any more or less confusing than it was ten
years ago.

GIF stands for Graphic Interchange Format, and Compuserve developed it in
the 80s to make it easier for their users to exchange and distribute
pictures. It's not the most capable format. It only has up to eight bits
per pixel, which means that you can't display more than 256 colors. You pick
these colors out of a much larger palette. This already makes it unsuitable
for photographs. Adding to the trouble is that the format doesn't compress
photographs terribly well. GIF has a transparency feature, allowing you to
mark one color as transparent, and, of course, animation, which is (without
exception) annoying on web pages.

There's another trouble with GIF, and that's the patent issue. For years,
Unisys, the owners of the LZW compression used in GIF, didn't care about
people using it. Then they decided that they were going to charge a $1 fee
for certain commercial licensees. This caused a huge flap and plenty of
people got mad, leading to PNG format's rise. We'll get to that in a sec.

Because photographs in GIF format (and others) are big and don't really look
all that hot due to the color problems, a bunch of people got together and
formed the Joint Photographic Experts Group, or JPEG. JPEG isn't a
particular format, but rather a collection of formats and techniques that
has become standard.

JPEG has no trouble with large palettes and it does an impressive job at
compressing photographs. That's where the sticky issue is. JPEG uses lossy
compression, meaning that certain information about some pixels is thrown
away or modified slightly in order to make the whole picture smaller. You
can set the level of compression - a file that is closer to the original
picture representation is larger than a better-compressed file.
Furthermore, once you put a file into JPEG format, you cannot go back to
the original file from the JPEG file alone. For this reason, if you are
semi-serious about scanning in photographs and printing them out, you should
save your pictures in TIFF or PNG format, burn them to CDROM or something,
then convert the images to JPEG format. If you print out an image, you
should use the original.

Because of the lossy compression, JPEG does a particularly bad job at
images where there are few colors, but large blocks of them - like graphic
displays of text. GIF and PNG format simply blow JPEG out of the water
here. An example:

(Show web page)

PNG stands for Portable Network Graphic, and not only does it support more
than 256 colors and is free from patents, but it generally does a better
job at compression than GIF format. It has an wide range of features but
is still not in widespread use. Furthermore, in some versions of
Netscape 4, mouseover-type javascript interaction doesn't completely work
with it.

Adobe is trying to push SVG (Standard Vector Graphics) for the web to make
up for the deficiencies of the bitmap formats. So far, it really hasn't
gone too far. Web browsers don't really support it too well (they use
plugins). If the next generation of web browsers comes along and actually
work (and support SVG), we might start to see more of it.

Anti-aliasing:
Why do some graphics look "jaggy" and rough and others seem smooth? It's
because of a standard and simple trick known as anti-aliasing, which gives
a display (or printer) the appearance of having more resolution that it
actually does. The idea is this: if you have, say, a diagonal border,
you'll have a jagged line of pixels which represent it. However, you can
fake half-pixels by adding mix-color pixels in the spaces around the jagged
lines.

(Show example on board, show it on screen)

A few notes on anti-aliasing:
 - It relies on the idea that, after a certain point, you really don't
   notice individual pixels much. If you make an image larger (as we have
   on the web page), anti-aliased pictures can look really horrible.
 - There are standard algorithms for doing it. Tools like Photoshop,
   The Gimp, pbmplus, and so on can do it for you.
 - If you start out with a vector graphic format to begin with, you get the
   best results (like when you type text in with Photoshop, or when you
   convert an Illustrator image).
 - It increases image size, though usually not by much. Try to limit palette.
 - You can manually tweak individual pixels with Photoshop or Gimp if
   something doesn't look "quite right." Though you sort of have to know
   what you're doing.

Graphics Tools:
Adobe Illustrator is more or less the de facto standard vector graphics
program. Macromedia Freehand is an alternative.

Adobe Photoshop and The Gimp. Photoshop is an image manipulation program
and it does its work pretty well. However, gimp tries to provide a
free-source alternative to Photoshop - and it's pretty good. We have gimp
installed here.

pbmplus is a command-line toolkit. It consists of about a million little
commands, like pnmscale and ppmquant. It can convert between formats and
it's fast - plus you can manipulate images in batch mode. Most of the
graphics on o--o.net have been touched by pbmplus in some way. For example,
the thumbnail pictures on the photographs are generated automatically with
one script from the originals - no messing about with point and click
repetition.

Questions on graphics.