ITP 301
Interactive Web Development
Spring 2014
David Tang
What is an interactive web page?
- Examples:
- instant form validation feedback
- slideshows / animations
- popups / modals
- autocomplete searches
- image cropping
- Based on events and actions
- clicks, mouseovers, key presses, etc
Syllabus
See syllabus
Browser Technologies
HTML
CSS
JavaScript
Document Object Model (DOM)
- The hierarchy of HTML objects that make up your web page
- Your HTML is parsed by the browser and creates the DOM
- Your HTML source (view source) is NOT the DOM. However it is used to create the DOM when the page loads.
- JavaScript can manipulate the DOM
- Remove HTML objects
- Change style properties
- Listen for events
- Query the DOM for particular elements
In JavaScript almost everything is an object. Objects have properties (attributes) and behaviors.
<ul id="nav" class="left">...</ul>
window
document
<div>...</div>
<a href="http://itp.usc.edu">ITP</a>
Chrome Developer Tools
- Great for debugging
- You can see the DOM at any point when a web page is open
- You can view the DOM using Chrome Dev Tools -> Elements panel
ITP 301
By David Tang
