CS 215 Web Oriented Programming Review Dr. Orland Hoeber orland CS 215 Web Oriented Programming Review Dr. Orland Hoeber orland.hoeber@uregina.ca http://www.cs.uregina.ca/~hoeber/cs215/

Topic 1: The Internet and the Web The Internet vs. the Web Internet technologies protocols IP addressing domain names The Web web servers and web browsers client-server architecture URLs MIME HTTP

Topic 2: Interface Design & Sketching Usability requirements and goals Design principles grid-based organization hierarchical navigation consistency subtlety when drawing attention Sketching and storyboarding Usability

Topic 3: HTML/XHTML/HTML5 Difference between HTML, XHTML, and HTML5 benefits/drawbacks of XHTML why use HTML5 with XHTML rules? Basic HTML5 document structure (doctype, html, head, body) core tags lists tables forms new HTML5 organizational tags XHTML rules

Topic 4: CSS Relationship between CSS and HTML CSS details different levels (inline, document level, and external) selectors (simple, universal, class, generic, id, contextual, pseudo-class) general form of a property-value specification what can be manipulated; how to manipulate it box model (borders, margins, padding) positioning conflict resolution rules

Topic 5: JavaScript Fundamentals Fundamental JavaScript embedding JavaScript in HTML documents when is it executed? basic syntax rules for coercion and explicit type conversions objects arrays functions constructors regular expressions

Topic 6: JavaScript & HTML Documents Client-side JavaScript important objects (window, document) DOM element access methods (address, name, id) event handling difference between DOM 0 and DOM 2 events event handlers and handler registration DOM 2 event model event propagation (capturing, target mode, and bubbling phases) event object

Topic 7: JavaScript & Dynamic Documents Dynamic HTML changing CSS information changing HTML content (forms, other tags) traversing the DOM and changing elements capturing mouse events basic animation using setTimeout and setInterval drag and drop dynamic event registration

Sample Question Add to a simple web page a mouse event logger with the following requirements: the log is stored in a placeholder <div> that is position to the right of the page toggle the visibility of the log when the user clicks on the <h1> tag on the page whenever the user clicks on any html element on the page, the click event is added to the log, with the id of the object that was clicked and the position of the mouse