CSC 551: Web Programming
Fall 2001
Midterm Review
Overview
history of the Internet & the Web
static vs. dynamic pages
client-side vs. server-side programming
HyperText Markup Language (HTML)
tags vs. elements
structural elements
HTML, HEAD, BODY
text layout and grouping
BR, P, , H1...H6, HR, CENTER, DIV, SPAN, PRE, BLOCKQUOTE
text styles
B, I, TT, BIG, SMALL, SUB, SUP, FONT, STYLE attribute
lists
OL, UL, LI, DL, DT, DD
hyperlinks
A attributes: HREF, TARGET, NAME
setting link colors: LINK, ALINK, VLINK
images
IMG attributes: SRC, ALT, HEIGHT, WIDTH, HSPACE, VSPACE, ALIGN
tables
TABLE attributes: BORDER, FRAME, RULES, WIDTH, CELLSPACING, CELLPADDING
TR/TD/TH attributes: ALIGN, VALIGN, COLSPAN, ROWSPAN, BGCOLOR
CAPTION
frames
FRAMESET attributes: ROWS, COLS, FRAMEBORDER, SCROLLING
FRAME attributes: SRC, NAME
can specify link to open in frame using TARGET (_blank, _top, ...)
style sheets
(1) can add STYLE attribute to a single element
(2) can place style defs in STYLE tags in HEAD to affect entire page
(3) can place style defs in separate file, LINK into many pages
Internet & Web Protocols
networking 7-layer model
Internet Protocol (IP): network layer
connectionless & unreliable, handles packet routing info
IP addresses, domain name servers, routers
Transmission Control Protocol (TCP): transport layer
provides virtual circuit, handles packet breakup and reassembly
ports, sequence & acknowledgement numbers to ensure delivery
HyperText Transfer Protocol (HTTP): application layer
HTTP/1.0 connectionless, HTTP/1.1 persistent connection (til timeout)
GET request
request headers: User-Agent, Authorization, If-Modified-Since
response headers: status code, Date, Last-modified, Content-type, ...
caching works through If-Modifed-Since, status code headers
cookies work through Cookie, Set-Cookie headers
other requests: HEAD, POST, PUT, DELETE
Client-side Programming with JavaScript
client-side execution, scripting vs. programming
code embedded in SCRIPT tags, output displayed in page
variables are loosely typed, don't have to declare
data types: string, number, boolean
operators, expressions, control statements similar to C++
predefined functions
Math.sqrt, Math.max, Math.round, Math.random, ...
document.write, prompt, parseFloat, alert
user-defined functions
similar to C++, but no return type, no parameter types
can specify local variables with var
can be stored in library file, loaded with SCRIPT SRC
String class: e.g., word = new String("foo"); or word = "foo";
properties include: length
methods include: charAt, substring, toUpperCase, indexOf
Array class: e.g., items = new Array(3); or items = [33, "foo", 15];
properties include: length
methods include: [], sort, reverse, slice, push, pop
Date class: e.g., today = new Date();
methods include: getYear, getMonth, ..., getMilliseconds, toString
browser-defined objects
document: document.write(...), document.URL, document.lastModified
navigator: navigator.appName, navigator.appVersion, navigator.plugins
user-defined classes
define as a function with associated data and functions (using this.)
awkward notation, no data hiding capabilities
event-driven programs
serial vs. event-driven execution
OnLoad & OnUnload events
hyperlink and image events handlers: OnClick, OnMouseOver, OnMouseOut