1. JavaScript (Part 2) CS 183 4/13/2010

2. JavaScript (Part 2) Will cover: ◦ For.. In ◦ Events ◦ Try.. Catch, Throw ◦ Objects

3. For … In Statement Allows to loop through ◦ elements of an array ◦ properties of an object for (variable in object){ code goes here }

4. Example var currentCat; var cats = new Array(); cats[0] = ”Maine Coone"; cats[1] = ”Siam"; cats[2] = ”Persian"; for (currentCat in cats){ document.write(cats[currentCat] + " "); }

5. More about Events Objects in web pages are organized in a hierarchy ◦ Some objects have “events” ◦ Events: Things that happen, user actions ◦ Can be detected by JavaScript -> event handler We already used onload event to detect when a user enters a page HTML elements have associated events ◦ Example: button -> onclick event Example events: ◦ A keystroke ◦ User submits an HTML form ◦ Web page loading ◦ Mouse click ◦ Selecting or leaving an input field …

6. Example Events onLoad, onUnload onFocus, onChange, and onBlur onSubmit onMouseOver, onMouseOut

7. Try – Catch Statement Avoid ‘debug’ message to come up in browsers based on runtime errors try { // some code here } catch (error) { // handle error here } “Throw” also supported (to create an exception)

8. Objects Objects (from OOP) ◦ Properties  Define the characteristics of an object  E.g., color, length, height, width ◦ Methods  Actions that can be performed on an object  E.g., confirm, write, open, close ◦ Naming Objects  Hierarchical organization  Use objectName.propertyName to refer to a property of an object  Use objectName.methodName() to refer to a method ◦ Use constructor (new) for initialization  var today = new Date();

9. Built-In Objects Math – supports math calculations Date – date/time info String – basic String manipulation Examples: ◦ Math abs(), log(), pow(), round(), sqrt(), … ◦ num = Math.round(3.14) ◦ Date  var now = new Date();  Year = now.getFullYear(); ◦ String  var name= “hans”;  var printString = name.bold();  var numChars = name.length;

10. Important Objects Document ◦ Represents the Web page loaded in the browser ◦ Methods: write(), open(), close() ◦ Properties: bgColor, fgColor, linkColor, vlinkColor, title, lastModified ◦ Example:  document.fgColor=“blue” Window ◦ Use for open or close browser windows ◦ Methods: alert(), confirm(), prompt(), open(), close() ◦ Properties: toolbar, menubar, scrollbars,resizable, status,location,directories, … ◦ Example:  window.open(“mywindow.html”, “mywindow”, “height=100, width=150”);

12. Cascading Stylesheets (CSS) (X)HTML ◦ No separation between content and presentation (e.g., FONT tag) ◦ Example:  This is text Assign formatting for  Font, size, color  Background color, images, distances  Frames, pixel-level precise manipulation of elements  Control print version Use CSS to define format and layout for HTML, XHTML, and XML elements