// Client side Javascript by Sandeep Desai (http://www.thedesai.net) // all global variables are stored in window object // DOM Level 0 W3C standard /* window +- self, window, parent, top properties +- navigator +- frames[] +- location +- history +- screen +- document +- anchors[] +- links[] +- images[] +- applets[] +- embeds[] +- forms[] +-- array of HTML objects (Button, CheckBox, FileUpload (Hidden, Password, Radio, Reset, Select, Submit, Text, TextArea) Select has options[] object */ // use Javascript snippets anywhere in HTML // // // type tag may not work with all browsers // // Specify in that we use only JavaScript language in this HTML // // When writing // tell Browser that code does not add any content // May improve performance while rendering page // // include javascript by // Javascript in URLs, with the URL below Javascript code is executed // and the output of the last statement is dispalyed if not output returned // current document is not modified // Javascript in URL is useful in places where we don't have events // can be use in href of hyperlink or form // javascript: var now = new Date(); "" + now; // javascript:alert("hello world!'); // open in new window void required so that the return value of window.open not used // javascript:window.open("about:blank");void 0; // Javascript code executed as HTML is parsed and displayed // do not refer to HTML elements that have not been defined // HTML cannot be dispalyed until script has finished executing // event handlers can be invoked before the entire document is displayed // as browser may display partial document while the rest of the document is being downloaded // hence define all functions in the the // check for object existence before manipulation e.g if (parent.frames[1] == null) return; or use try catch // alternatively use the onload event which is called when document fully loaded // // Window and vairable lifetime // when new document is loaded windows object is reset to defaults // if multiple windows or frames code can refer to other windows // window object is valid as long as top-level window is open /**************** Common events *********/ // onclick() used by buttons and tags if onClick() returns false do browser does nothing // onmousedown(), onmouseup() onmouseover(), onmouseout() // onchange() support by ,

triggered when user changes value
// onsubmit() onreset() triggered when the <form> is submitted or reset

// onselect() // form multiple choice select ??

// onload() called after HTML document and images fully loaded
// onunload()

// Window object properties and methods
// closed:
// defaultStatus, status : text on status line of browser
// document: HTML document
// frames[]: array of window objects that represent the frames if any
// history: users browsing history
//     back() forward() don't use go()
// location: reference to URL of document, setting property causes browser to load new document
//    search property has string after ? 
// name: name of the window
// navigator: information about web browser
//      appName: name of Web browser
//      appVersion: browser version number IE 4 to 6 return 4.0
//      userAgent: string sent in USER-AGENT-HTTP header
//      appCodeName: code name of browser Netscape and IE both return Mozilla
//      platform: hardware platform 
//      reload() replace()
// opener a reference to the window object that opened this one
// parent if current window frame, reference to frame of the window that contains it
// screen
//        width,height
//        availWidth, availHeight actual dispaly widht and height available
//        colorDepth; base 2 log  for 256 colors returns 8
// self same as window property
// top if current window is frame reference to window object of top level window
// window self referential property

// alert(),confirm(),prompt() simple modal message box, displays plain text
// close()
// focus(), blur()
// moveBy(), moveTo() move window
// open() 
// print() same as selecting print menu
// resizeBy(), resizeTo()
// scrollBy(), scrollTo() can use document.anchors[] x and y property to scroll to
// setInterval(), clearInterval() schedule or cancel a function to be repeatedly invoked with a specified delay between invocations
// setTimeout(), clearTimeOut() schedule or cancel a function to be invoked once after a specified number of milliseconds

// alert("foo\n\bar");
// if confirm("Do you want to ??") {} else {}
//n = prompt("Enter your name");

// suppress JavaScript error message display makes it difficult to debug problems
// self.onerror = function() { return true; }

// open new window with no menu, toolbaroptional 3rd param
// 4th param is boolean wether to add to browser history 
//var ww = window.open("javascript:<h1>hello</h1>;", "smallwin", "width=200,height=150,status=yes,resizable=yes");
//ww.moveTo(600,600);
//ww.close();

// will redirect to cnn.com as page is being loaded
//location="http://cnn.com";
// if user has old browser redirect
// if (parseInt(navigator.appVersion) < 4) location = "staticPage.html"

/***************** document object ***************/
// Level 0 Document Object Model
// methods
// close()
// open() erase existing document start a new document
//   can optionally set mime type as first argument (may not work properly)
// write() append text to existing document, don't call from event handlers
// writeln() 
// properties
// alinkColor, linkColor, vlinkColor: (deprecated use CSS) color of hyperlinks
//    linkColor unvisited, vlinkColor visited, alinkColor when user clicks on link
// anchors[] has all <a>  properties name property onclick event 
// applets[]
// bgColor, fgColor (deprecated use CSS) set as #RRGGBB in hex or as red,blue etc
// cookie  // cookie = "user=foo;date=...;path=..;domain=...;secure=...";
//            secure means send over HTTPS only
// domain webservers in same domain to communicate
// forms[] <form> elements properties: action, encoding, method, target
//      elements[]
//        name type selected value (read/write) options[].value
//        onclick onchange onfocus onblur
//          in event handler this.form is reference to form
//      onsubmit event called only when user clicks on submit button,
//      onreset event
//      submit() reset() called anywhere e.g from an event handler
//      document.forms[].elements[1] or if name attribute for form and element
//        reference as document.address.zipcode
//      if radio button each button in array document.object.radiobutton[] 
//      radio and checkbox have checked (read/write) property
//           newer browsers support onchange event all browser support onclick
//      for select and options element you can truncate options and add option
//          e.g document.address.country.options.length = 0; // remove all
//              document.address.country.options[10] = null; // remove 10th
//              var antartica = new Option("Antartica", "antartica", flase, false);
//                             // text, value, defaultSelected, selected
//              document.address.country.options[10] = antartica; // add
// images[]  <img> elements has src (read/write), 
//              width,height,border,hspace,vspace read/write properties 
//           complete property true when image loaded
//           onload event handler
// lastModifed: date when document last modified
// links[] : list of hypertext links has href read/write property
//              onclick, onmouseover, onmouseout event
// location: deprecated synonym for URL
// referer:  URL of document contating the link that brought browser to current document
              if any
// title: <title>
// URL: the URL from which the document was loaded

// <form name="foo"></form>
// document.forms[0] or documents.f1 or document.forms["f1"]

// document.links[0].onmouseover = function() { status= "URL"; }

// ******************* document methods ********************
// getElementByTagName("table")[0] // return first table
// appendChild() removeChild()
// createElement("b") // create a <b> element
// nodeType property for type of node
// parentNode property
// setAttribute("id", "foo");

// technique for image roll over when user passes mouse over link
// <a href="help.html" 
//      onmouseover="documennt.helpimage.src="help_rollover.gif';"
//      onmouseout="documennt.helpimage.src="help.gif';"
//   <img name="helpimage" src="help.gif" border="0">
//</a>

// Cache images
// var a = new Image(); a.src = "foo.gif";

// var il = 0;
// function countImages() { if (++il == 10) { /* all images load */ } }
// a.onload = countImages; // onload event handler

//***************** HTMLElement ****************
id,style,title,lang,dir,className

//***************************************************'
// Cookies can be created and accessed in JavaScript
//**************************************************

//***************************************************
// DOM standard designed for HTML and XML
//
// Common Node object types
//  ELEMENT_NODE, TEXT_NODE, DOCUMENT_NODE, COMMENT_NODE, 
//  DOCUMENT_FRAGMENT_NODE, ATTRIBUTE_NODE

//*********************** DOM support ************************

// feature name, version
// HTML 1.0 Level Core and HTML interfaces // IE returns true for this only
// CSS 2.0 CSS Styules
// XML, COre, Views, SytelSheets, CSS2, Events, UIEvents, MouseEvents, HTMLEvents, MutationEvents, Range, Traversal

if (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature("html", "1.0")) {
   // document has Leve 1 core and HTML interfaces
}

//******************** CSS and document ************

// document.styleSheets[0].cssRules[0]; // to access style sheets
// can do styleSheets.insertRule() and deleteRule()
// can also do getProperty(), setProperty() and removeProperty()
// getPropertyCSSValue()
// Acutal CSS propertty is font-family since - is illegal in Javascript
// renamed to fontFamily
document.element.style.fontFamily="sans-serif";
// document.element.style.left=123; // is incorrect
document.element.style.left="123px"; // is correct

//******************* events **********************
IE does not suport DOM Level 2 events

// onabort -> image loading interrupted
// onblur -> element loses focus
// onchange -> focus and value changed
// onclick -> mouse press and release
// ondblclick
// onerror -> page loading error
// onfocus -> element gains input focus
// onkeydown -> return false to cancel
// onkeypress -> return false to cancel
// onkeyup -> key released
// onload -> document load completed
// onmousedown, onmousemove, onmouseout, onmouseup
// onmouseover -> users moved mouse over element
// onreset -> form reset
// onresize -> window resize
// onselect -> Text selected
// onsumbit -> form submit
// onunload -> document or frameset unloaded

// document.foo1.onmouseover = eh; // eh is function
// document.foo2.onmouseover = eh; // eh is function
// use this to in eh to refer to element properties
// can call document.form1.onsubmit() explicitly
// <div onclick="alert('clicked')"/>

// button.onclick = myobj.mymethod; // this in mymethod will be button and not myobj
// correct ???? button.onclick = function() { myobj.method(); }