History of the Internet & 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 & grouping: BR,  , P, H1...H6, HR, DIV, SPAN, PRE, BLOCKQUOTE text styles: B, I, TT, BIG, SMALL, SUB, SUP lists: OL, UL, LI, DL, DT, DD hyperlinks: A, attributes (HREF, TARGET, NAME) images: IMG, attributes (SRC, ALT) 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) FRAME, attributes (SRC, NAME) cascading style sheets inline: STYLE attribute, property:value pairs document: STYLE tags, subclasses of elements, pseudo-elements external: LINK tag 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 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, expressions and control statements (similar to C++) loosely typed variables, no declarations, 3 data types (string, number, boolean) functions predefined: document.write, prompt, parseFloat, Math.sqrt, Math.random, ... user-defined: similar to C++, but no return type & no parameter types local variables with var; load library file with SRC attribute classes String class: e.g., word = new String("foo"); or word = "foo"; property: length; methods: charAt, substring, toUpperCase, indexOf, ... Array class: e.g., items = new Array(3); or items = [33, "foo", 15]; property: length; methods: [], sort, reverse, slice, push, pop, ... Date class: e.g., today = new Date(); methods: getYear, getMonth, ..., getMilliseconds browser-defined objects document: document.write(...), document.URL, document.lastModified navigator: navigator.appName, navigator.appVersion user-defined classes: awkward notation, no data hiding capabilities event-driven programs serial vs. event-driven execution HTML forms: button, text box, text area properties: name, type, value, ...; methods: blur, focus, ... event handlers: e.g., onfocus, onchange, onclick, ... techniques: form validation, output to window/frame, timeouts, cookies