cs 183 4/13/2010 - university of california, santa cruz 183 4/13/2010 will cover: for .. in events...
TRANSCRIPT
CS 183 4/13/2010
Will cover: ◦ For .. In ◦ Events ◦ Try .. Catch, Throw ◦ Objects
Allows to loop through ◦ elements of an array ◦ properties of an object
for (variable in object){ code goes here }
<html> <body>
<script type="text/javascript"> var currentCat; var cats = new Array(); cats[0] = ”Maine Coone"; cats[1] = ”Siam"; cats[2] = ”Persian";
for (currentCat in cats){ document.write(cats[currentCat] + "<br>"); } </script>
</body> </html>
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 …
onLoad, onUnload onFocus, onChange, and onBlur onSubmit onMouseOver, onMouseOut
<form method=“post” action=“readInput.php” onsubmit=“return validateForm()”>
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)
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();
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;
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”);
(X)HTML ◦ No separation between content and presentation
(e.g., FONT tag) ◦ Example:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"> <strong>This is text</strong></font>
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