Enhancing Web Interactivity: User Input, DOM Manipulation, and JavaScript Events

Interactive Web Media IDIA 619 Spring 2013 Bridget M. Blodgett

Topics Extending our work with user input Adding elements to the DOM Understanding Functions Handling User Input Exercise

User Input HTML forms are the most basic type of interaction available through a webpage Just like any other HTML code they can be manipulated using JavaScript The trick to dealing with these interactions is to get JavaScript to process some event handling Events could be simple interactions (clicks, hovers) or complex (timed events)

Planning Once we have a placeholder for HTML we can set up JavaScript to check for any events that occur and then make changes based upon the response By giving our items unique IDs we can reference them in the DOM quickly Once we have pulled our event we can create some custom code in a function to do stuff based upon the event

Properties Many variables have special properties that we can make use of to alter our pages button.onclick and window.onload are two examples of these properties What are some other built in properties for buttons in JavaScript?

Getting Submitted Info Just like checking for a button click you can pull the information submitted in a form by looking for the value property How should you handle empty form submissions? What about form submissions that contain malicious information?

Making New Elements Getting new elements to appear on the page is a two step process: modifying the DOM, adding the element to the page document.createElement( x ); <newElement>.innerHTML = <pulledInfo>; We can then search for our new element s parent and append the new element to it: <elementname>.appendChild(<newElement>);

Web Storage What do you think the storage code at the end of the chapter does?

Exercise Create an HTML page and JavaScript script that include a form with three input fields. The relationship of the value of the fields is: the second field is twice the value of the first field the third field is the square of the first field If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields.