DOC PREVIEW
Princeton COS 333 - DOM: Document Object Model

This preview shows page 1-2-3-4-5 out of 15 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 15 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 15 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 15 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 15 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 15 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 15 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

DOM: Document Object Model • browser presents an object interface – accessible from Javascript • window object has methods, properties, events – alert(msg), prompt(msg), open(url), ... – size, position, history, status bar, ... – onload, onunload, ... – window.document: the document displayed • document object holds page or frame contents – elements stored in a tree tags, attributes, text, ... – each element is accessible through the DOM – through functions called from Javascript • element properties can be accessed & changed • elements can be added or removed • page is "reflowed" (smart redraw) when anything changesBasic events on forms <head> <script> function setfocus() { document.srch.q.focus(); } </script> </head> <body onload='setfocus();'> <H1>Basic events on forms</H1> <form name=srch action="http://www.google.com/search?q="+srch.q.value> <input type=text size=25 id=q name=q value="" onmouseover='setfocus()'> <input type=button value="Google" name=but onclick='window.location="http://www.google.com/search?q="+srch.q.value'> <input type=button value="Wikipedia" name=but onclick='window.location="http://en.wikipedia.com/wiki/"+srch.q.value'> <input type=reset onclick='srch.q.value=""' > </form>More examples... • in a form: <form> <input type=button value="Hit me" onClick='alert("Ouch! That hurt.")'> <P> <input type=text name=url size=40 value="http://"> <input type=button value="open" onClick='window.open(url.value)'> <P> <input type=text name=url2 size=40 value="http://"> <input type=button value="load" onClick='window.location=url2.value'> <P> <input type=button value="color it " onClick='document.bgColor=color.value'> <input type=text name=color value='type a color'> <input type=button value='make it white' onClick='document.bgColor="white"'> </form> • in a tag <body onUnload='alert("bugging out")'> • on an image <img src="smiley.jpg" onMouseover='src="frowny.gif"' onMouseout='src="smiley.jpg"'> • etc.CSS: Cascading Style Sheets • a language describing how to display (X)HTML documents • separates structure (HTML) from presentation (CSS) • style properties can be set by declarations – for individual elements, or all elements of a type, or with a particular name • can control color, alignment, border, margins, padding, … <style type="text/css" media="all"> body { background: #fff; color: #000; } pre { font-weight: bold; background-color: #ffffcc; } a:hover { color: #00f; font-weight: bold; background-color: yellow; } </style> • style properties can be queried and set by Javascript <body id="body"> <script> var b = document.getElementById("body") b.style.backgroundColor='lightyellow' b.style.fontFamily='Verdana'; b.style.fontSize='14px' b.style.color='blue' </script>CSS syntax • optional-selector { property : value; property : value; … }!• selectors: – HTML tags like h1, p, div, … – .classname (all elements with that classname) – #idname (all elements with that idname) – :pseudo-class (all elements of that pseudo-class, like hover) h1 { text-align: center; font-weight: bold; color: #00f }! h2, h3 { margin:0 0 14px; padding-bottom:5px; color:#666; }! .big { font-size: 200%; }!• styles can be defined inline or (better) from a file: <link rel="stylesheet" href="mystyle.css">!• can be defined in <style> ... </style> tag • can be set in a style="..." attribute in an element tag <p class=big style="color:red">!More CSS examples (with thanks to notes by Austin Walker '13) • select all <div> elements div { text-align: left; }!• select all elements with id princeton #princeton { color:#FF9933; font-size: 200%; }!• select all elements with class yale .yale { color:#AA0000; font-size: 50%; }!• select all <P> elements with class harvard p.harvard { color: 0000AA; font-size: 10%; }!Dynamic CSS • style properties can be set dynamically – color, alignment, border, margins, padding, ... – for individual elements, or all elements of a type – can be queried and set by Javascript <script> window.onload = function() { var p = document.getElementsByTagName("P"); for (var i = 0; i < p.length; i++) { p[i].onmouseover = function() { this.style.backgroundColor = "yellow"; }; p[i].onmouseout = function() { this.style.backgroundColor = "white"; }; } } </script>CSS dynamic positioning • DOM elements have "style" attributes for positioning – a separate component of CSS – provides direct control of where elements are placed on page – elements can overlap other elements on separate layers • basis for animation, drag & drop • often controlled by Javascript <img src="dog.jpg" id="dog" onClick='hit()' style="position:absolute; left:100px; top:60px" > var dog = document.getElementById("dog") dog.style.left = 300 * Math.random() + "px" dog.style.top = 300 * Math.random() + "px"Other HTML stuff • specialized markups – SVG (scalable vector graphics) – Canvas Tags (scriptable graphics) – HTML5 (next version, to help replace Flash, Silverlight, etc.) • XUL (XML user interface language) – built from CSS, Javascript, DOM – analogous extension mechanisms in Chrome and Safari – portable definition of common widgets like buttons • browser plug-ins and extensions – Firebug – Greasemonkey • ...XMLHttpRequest ("XHR") • interactions between client and server are usually synchronous – there can be significant delay – page has to be completely redrawn • XMLHttpRequest provides asynchronous communication with server – often no visible delay – page does not have to be completely redrawn • first widespread use in Google Suggest, Maps, Gmail (Feb 2005) – "The real importance of Google's map and satellite program, however, is not its impressive exterior but the novel technology, known as Ajax, that lies beneath." (James Fallows, NY Times, 4/17/05) • Ajax: Asynchronous Javascript + XML (shorthand/marketing/buzzword term coined 2/05) – (X)HTML + CSS for


View Full Document

Princeton COS 333 - DOM: Document Object Model

Download DOM: Document Object Model
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view DOM: Document Object Model and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view DOM: Document Object Model 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?