Window

1. Document frames[] Location History Navigator Window forms[] hash Plugins[] images[] host Mime Type[] anchors[] hostname language links[] href embeds[] pathname applets[] port childNodes[] protocol styleSheets[] search cookie

2. Window Document frames[] Location History Navigator • the HTML document • Ancestor (parent) for all elements contained on an HTML page • window.document or just document

3. .getElementById() • getElementById(”html_id_name”); • what id=”” HTML tag attribute exist for! • Only ONE tag per ID! • THE way to “connect” with the HTML tags

4. .getElementsByName() • var a= document.getElementsByName("h2"); • returns array of ALL of that tag, in order. • You have to loop over results to find the ones you want to use. • Many people too lazy to use it.

5. getElementsByClassName • document.getElementsByClassName("myclass"); • returns array of all Tags with the given class name • case sensitive • only ONE (1) class name allowed • again, you loop over the results

6. Your Next BEST Friend? • getElementsBySelector() • CSS style searching of the document • NON-STANDARD - its being debated • Browser Console only: $("css selectors"); • Prototype library adds it • jQuery library has popular similar version $()

7. Window Document frames[] Location History Navigator forms[] • document.forms[] array contains all of an HTML document’s forms • Allows validation before submission to CGI script on server • Minimizes Web traffic • Simplifies CGI / Server Page script • DO NOT USE EXCEPT IN SPECIAL CASES!

8. Referencing form elements • Each Form object contains an elements[] array • form’s elements: input, select, button, etc. • document.forms[1].elements[2]; • Problem: any HTML form tag changes reorders the array!! • DO NOT USE EXCEPT IN SPECIAL CASES!

9. Form name attribute • 1990s JavaScript to reference the item (e.g., form, element, etc.) • If multiple form elements share the same name, JavaScript creates an array out of those elements • document.demo.ageGroup[1].value • <form name="demo" | <input name="ageGroup"

10. Form HTML Attributes • onsubmit=”” • Executes when a form is submitted to a CGI script using a submit or an image input tag • onsubmit="return false;" STOPS submission! • onreset=”” • executes when a reset button is selected on a form

11. Form Methods • FORM object contains two methods: • submit( ) • Used to submit a form without the use of a submit button • reset( ) • Used to clear a form without the use of a reset <input> tag

13. Form Elements[] • Form “elements” are the form tags in the form • Form tags (input,select,etc) have these Object Properties: • name = name attribute from the tag (<input name=””...) • value = string of whatever the input value is • checked = true/false used on checkboxes/radios • disabled = true/false control if user can use it • type = what type of input it is • form = parent form object (handy to get access to the form object when you only have a input obj)

14. Form Element Tags Attributes • these are HTML attributes: • onblur=”” • onfocus=”” • onclick=””

15. Form Element methods • focus() - select the field (puts cursor in the field, like as if the user clicked on it) • blur() - deselects the input field • click() - for radio buttons, it lets you click the button by javascript • handleevent() - lets you trigger an event as if it happened, (onclick, onfocus, onblur)

16. Window Document frames[] Location History Navigator styleSheets[] • Modern Standardized Browsers (DOM2) • HTMLElement object (DOM class for a tag) • some_tag.style.color=”red”; • in MS IE < 7: • style object is combined into tags • if(some_tag.style){standard}else{MSIE}

17. CSS Properties • Each CSS property has a property in the style object • ALL tags have a style object (or a merged one like in IE) • xxxxx.style.color= ”red”; • xxxxx.style.width= “10px”;

19. Use .className • Generally, style should not be used! • Bad for same reasons inline CSS is bad • .className // .class does not work; sorry. • .getAttribute(”class”); //HTML "class" attribute • .setAttribute(”class”, “css…”); • Exception: Calculated values: movement, sizing

20. Reading • if( x.style.display == “none”){...} • direct property checking could produce undefined in browsers that don't support it--- avoid doing math with undefined values • if( x.style["display"] == "none") {...} • also works

21. Work arounds • if( obj.style ){ /*standard*/ } else {/*MS IE or older*/} • Easier methods: • make your own function which does the check and assigns the value… ex: setStyle( prop, val ) • Just tell MSIE people to get out of hell

22. Style Sheets • The document.stylesheets[] array can be altered • its possible to change order, remove or add stylesheets to the array • website THEMES can be changed WITHOUT any work on the server-side! • You can store the user’s theme and set the theme on each page using document.cookie!

23. Finding properties • Firebug / or other Object Inspector • most stuff is CSS properties • naming convention differences make it easy • If you know the names of properties • You know what to look up in a reference

24. Window Document frames[] Location History Navigator • JavaScript treats each frame as an independent window • Each frame has its own Window object • The parent window object, has an array: frame[] which contains all frames in that window (which are also window objects) • Communications between frames is somewhat limited for security as well

25. Referring to Frames and Windows • Includes a frames[] array that contains all the frames in a window • frames[0], frames[1], etc. • Parent property • Used to refer to a frame within the same frameset • parent.frames[0], parent.frames[1], etc.

26. Window Document frames[] Location History Navigator • Allows you to change to a new web page from within JavaScript code – see redirection example #1 • Contains several properties and methods for working with the URL of the document currently open in a Web browser window

27. http://www.metrostate.edu/search?name=john&dept=ics • http = protocol • www = hostname (servername) • metrostate.edu = domain name • search = path to file on the server • ?name=john&dept=ics = search/query of the file on the server

30. Redirection Method #1 • function redirect( ) { //set new location • window.location= "http://www.zawa.asn.au/"; • } • <body onLoad=”setTimeout(‘redirect();’, 5000)”>

31. Redirection Method #2 • <head> • <META HTTP-EQUIV="Refresh" CONTENT=“5;URL=http://devguru.com"> • </head> • <body> You will be redirected to the devguru web site in five seconds. • </body>

32. Window Document frames[] Location History Navigator • Array of URLs the browser has visited during current session • Not technically an Array object • window.history.back(); • window.history.forward(); • window.history.go( “url” );

33. History go( ) method • history.go(-2); • history.go(‘home.weasel.com');

34. Window • The Navigator Object • Used to obtain information about the current web browser • Typically used to identify browser • top level object, same level • Named navigator, because Netscape came up with it and named it Document frames[] Location History Navigator

36. d= document; • with (navigator) { • d.writeln("Browser codename: " + appCodeName); • d.writeln("Browser name: " + appName); • d.writeln("Browser version: " + appVersion); • d.writeln("Operating platform: " + platform); • d.writeln("User agent: " + userAgent); • }

37. Browser code name: Mozilla • Web browser name: Microsoft Internet Explorer • Web browser version: 4.0 (compatible; MSIE 5.5; Windows 98; Compaq; Hotbar 3.0) • Operating platform: Win32 • User agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Compaq; Hotbar 3.0)

38. Accessing related HTML Elements in DOM2 • All “tags” are HTMLElement Objects • parentNode = parent tag this one is inside • firstChild = 1st tag inside this tag • nextSibling = next tag at the same level • previousSibling = …