*Dynamic HTMLEmployee Boot camp 2007 - HyderabadSuresh B Vsureshb@maqsoftware.com Monday, July 23, 2007

*

OverviewWhat is DHTMLCSS- Cascading Style SheetsDOM-Document Object ModelScripting using DOMExamplesJavaScript FormsCross Browser Differences

*

What is DHTML?

*

What is DHTML?

*

What is DHTML?Combination of several built-in browser features in fourth generation browsers that enable a web page to be more dynamic.NOT a scripting language (like JavaScript), but a browser feature- or enhancement- that makes the browser dynamicUses a host of different technologies - JavaScript, VBScript, the Document Object Model (DOM), layers, cascading stylesheets - to create HTML that can change even after a page has been loaded into a browser

*

What is DHTML? ...It is considered to be made up ofHTMLCascading Style Sheets (CSS)Scripting languageAll three of these components are linked via Document Object Model (DOM) DOM is the interface that allows scripting languages to access the content, style, and structure of the web documents and change them dynamically

*

Tools of DHTMLHTML and XMLPartitions and Organizes the contentCSS, XSL - CSS1, CSSP, CSS2Defines the Presentation of the contentScripting - JavaScript, JScript, VBScript Adds interactivity to the pageDOM- Document Object ModelDefines what and how elements are exposed for script access

*

CSS Cascading Style Sheets

*

What is CSS?CSS is Cascading Style SheetsIt is a specification controlled by the World Wide Web Consortium (W3C).HTML controls the organization of a Web page documentCSS controls the presentation and layout of the Web page document elements

*

What is CSS? ...CSS1- visual presentation of elements CSSP - positioning of elements CSS2 -visual and audio presentation of elements. It includes attributes from CSS1 and CSS-PWhat CSS is to HTML, XSL is to XML

*

What CSS can do?With CSS you can separate form from structureControl layout (alignment, spacing, margins, colors, floating elements etc)Maintain and update many pages faster and easier

*

CSS-TerminologyCSS is declared as rules: Eg: H1 {color: green}Means that all text surrounded by the tags should be displayed in green colorA rule has two parts- H1 {color:green}

*

CSS TerminologyDeclaration has two parts: HI {color : green }In general:Element(s) { }Property1:Value1;Property2 : Value2a , Value2bEg.: H1, B {color:olive; background:yellow; font-family: arial, courier }

*

CSS-Adding styles to web pages Three waysEmbed a style sheet within HTML documentLink to an external stylesheet from the HTML documentAdd styles inline in the HTML document

*

CSS-Embed a style sheetAll stylesheet information lies at the top of the HTML code (in the head portion)Eg:

. . . Style applies to the whole document

*

CSS-Link to an external stylesheetAn externally defined stylesheet is used as a style template that can be applied to a number of pagesA text file (with ext .css) contains the stylesheet rules to be applied to a page (or set of pages)Eg. A file named mystyles.cssH1 {color: green; font-family: impact}B {color: red; font-family: courier}This file is linked to the HTML document ()In the web Page:

. . .

*

CSS-Link to an external stylesheet

*

CSS-Add styles inlineApplying stylesheets rules to particular HTML tags Eg:Adding Inline styles The style applies to only that particular tag

*

CSS- ClassesSelectively apply a style to HTML elementsyou can define different classes of style to the same element, and apply the appropriate class of style when requiredHTML The first paragraphThe second paragraphThe third paragraphStylesheetP.first { color: green }P.second { color: purple }P.third { color: gray }

*

CSS-Positioning ElementsLayering is an approach to organize pieces of content in a meaningful manner. They act as containers of contentA block of content (text, images, audio files etc) is grouped together within , or tags They are referred to as CSS LayersLayer tags carry no formatting properties of its own

*

CSS-Positioning Layers can be positioned at exact coordinates on the page using CSS-PThe format for these can be specified in two ways: Specifying the styles within the tagsSpecifying an ID to the Layers and then controlling their position and appearance using these IDs

*

CSS-Positioning CSS-P allows you to specify four types of positioning of layer Horizontal and vertical position Clipping size of the visible element within the positioned area Z-order Visibility of the positioned element

*

CSS- Positioning Horizontal and Vertical Control left and top, that are relative to the distance from the left-most, top-most corner of the document windowClipping size of the element Height and width establish the area in which the layer in positioned

*

CSS- Positioning Establishing a Z-Order Z-index is an integer; the higher its value, the closer it is to the front in the Z-ordered plane

Controlling Visibility of Elements Make any element or group of elements invisible. This enables selective display of different parts of a document when used in combination with the Document Object Model exposed to Script

*

Scope of CSS Methods

*

DOM Document Object Model

*

DOM-Document Object ModelThe Document Object Model is a platform and language neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of the documentThe DOM details the characteristic properties of each element of a Web page, thereby detailing how we might manipulate these components and, in turn, manipulate the page

*

DOMDocument Object Model is not a "part" of Scripting languages. The DOM stands alone, able to be interfaced with any programming language designed to do soThe W3C DOM is the recommended standard to be exposed by each browserMicrosoft Internet Explorer and Netscape do not share the same DOM.

*

DOM Both (IE and Netscape) DOMs break down Web pages into roughly four types of componentsObjects, Properties, Events and MethodsObjects : Container which reflects a particular element of a pageobjects "contain" the properties and methods which apply to that elementExample: the submit object

*

DOM Properties: Characteristics of an object Example: the document object possesses a bgColor property which reflects the background color of the page. Using a programming language (e.g. JavaScript) you may, via this property, read or modify the background color of a page

*

DOMMethods: A method typically executes an action which acts upon the object by which it is ownedExample: AlertEvents: Used to trap actions related to its owning objectTypically, these actions are caused by the userExample: when the user clicks on a submit button

*

Netscape DOMDOM "begins" at the window object; Other objects are below the window object in the hierarchyException is the navigator object, (whose properties provide information about the browser version,) which is a peer object of window rather than a child

*

Netscape DOM

*

Microsoft DOMMicrosoft indexes an additional topic called as collections. A "collection," is an array-based objectThe observable difference between the two is the syntax. Netscape supports a treelike hierarchical syntax:document.layers['topLayer'].document.layers['subLayer'].document.layers['bottom'].leftOn the other hand, Internet Explorer exposes all HTML objects as a flat collection and lets you modify the style object: bottom.style.left

*

JavaScript Event HandlingClicking a button, moving the mouse pointer over part of the Web page, selecting some text on the pagethese actions all fire eventsDHTML author can write code to run in response to the eventThis particular piece of code is generally known as an event handler

*

JavaScript Event Handling-Mouse Eventonmouseover: Moves the mouse pointer over an element. onmouseout: Moves the mouse pointer off an element.onmousedown: Presses any of the mouse buttons. onmouseup: Releases any of the mouse buttons. onmousemove: Moves the mouse pointer within an element. onclick: Clicks the left mouse button on an element. ondblclick: Double-clicks the left mouse button on an element.

*

JavaScript Event Handling Keyboard and Text Area Eventsonkeypress: Presses and releases a key (full down-and-up cycle). If a key is held down, multiple onkeypress events are fired. onkeydown: Presses a key. Only a single event is fired, even if the key is held down. onkeyup: Releases a key onFocus: click on the field (like textbox)onBlur: click away from the fieldonChange: change value displayed in the textbox

*

JavaScript form Element Attributesid The id attribute provides a unique identifier for the form and provides for access by scripts.action The action attribute specifies what to do when the user clicks to submit the form.method The method attribute specifies how the web browser should send form values to the form processing script. Valid values include either get or post.

*

form Sample

Form objects go here.

*

Referencing the form ObjectTo reference the form object in your JavaScripts, use a path to the form name: window.document.formNameAlternatively, you can reference the form use the window.forms array: window.document.forms[index]

*

form Event HandlersonSubmit Allows us to run JavaScript commands before the browser sends form values for processing; interrupts that request if onSubmit receives a false value.

onReset Allows us to run JavaScript commands before the form resets to default values; interrupts the reset if onReset receives a false value.

*

Handling TextboxesTo read or set the value of a textbox, use a path to the textboxs value attribute: window.document.formName. textboxName.valueOpen the file called javaScriptForms_01.html

*

Form Component Event HandlersonFocus When a cursor moves to a form component.onClick When the user clicks inside or on a form component.onBlur When the user moves the cursor from a form component.onChange When the user changes the value/state of a form component.Open the file called javaScriptForms_02.html

*

Preventing Textbox ManipulationSometimes, you might want to use a textbox for output instead of input (for instance, for the results of calculations). To prevent users from manipulating textbox values, use the blur() method to prevent a cursor from setting focus: onFocus = this.blur();Open the file called javaScriptForms_01.html

*

Password FieldsPassword fields are just like textboxes; they have the same properties, methods and react to the same events.: window.document.formName. passwordFieldName.value

*

Hidden FieldsSometimes, developers will include hidden fields on a web form to send information that the user doesnt need to see. We handle such fields as if they were regular textboxes: window.document.formName. hiddenFieldName.valueOpen the file called javaScriptForms_03.html

*

Text AreasA textarea allows users to type multiple lines of text. To access a textarea object via JavaScript, use the same syntax as a textbox: window.document.formName. textAreaName.valueOpen the file called javaScriptForms_04.html

*

select ListsJavaScript sees the options of a select list as a zero-indexed array.select lists come in two flavors one that restricts the user to one option and the other that allows multiple options. JavaScript handles each differently

*

Single Option select ListsTo return a value from a single option select list, we would use the selectedIndex property of the select object: window.document.formName.select[select.selectedIndex].valueOpen the file called javaScriptForms_06.html

*

Multiple Option select ListsTo return multiple values from a multiple option select list, we would use the selected property of the select object and a for loop: window.document.formName.select[forLoopCounterValue].selectedOpen the file called javaScriptForms_05.html

*

Handling radio ButtonsProgrammers use radio buttons to restrict a users choice to a single item from among a set of multiple choices.In a single set of buttons, each radio button shares its name with others in the same set. On the JavaScript side, this lends itself very well to using an array

*

Handling radio ButtonsWe can use the checked attribute of the radio object, in conjunction with a for loop to see which radio the user checked and report its value.Although radio buttons in the same set share the same name, their values can be different.Open the file called javaScriptForms_07.html

*

Handling checkboxescheckboxes are similar to radio buttons (they can share the same name), but users can choose more than one. We can handle checkboxes in a similar manner: using a for loop along with an if statement to check for the checked attribute and then report the value.Open the file called javaScriptForms_08.html

*

Forms - SummaryThe tag uses the action and method attributes to deliver data from a form to a processing script on a server.We can use event handlers like onSubmit and onReset to read form values in JavaScript.We can use the value attribute to read values from textboxes, password fields, hidden fields and text areas.We can use for loops, along with if structures to determine the values of items in a set, like items from select objects, radio buttons or checkboxes.

*

Cross Browser differencesIn Netscape, JavaScript would reference to document. "layer_name".document.images ["image_name"]. In Internet Explorer, JavaScript reference to document.all."style_name".style.In Netscape, a positional object's X coordinate is called left and its Y coordinate is called top. document."layer_name".left document."layer_name".top

*

Cross Browser Differences Checking for BrowsersWe have to check which browser someone is using By using a browser sniffer:This uses Navigator object and tests the userAgent and/or appName properties for specific browser and verstion patternsBy using DOM switch:Tests for presence of an object such as layers (in Navigator) and all (in IE)

*

Coding for browser differencesCoding DirectlyIf DHTML is simple and limited, the best solution could be to code for the differences directly within the script. Using EvalPass a string to Eval, and the function parses the string and issues whatever command is contained within the string. For example the following are equivalent:alert("hello world"); eval('alert("hello world")'); This is handy when the command and parameters aren't known at design time, but at run time, such as with browser detection.

*

*JavaScript for both Browsers

function check() { if (ns4) { // do something in Netscape Navigator 4.0 } if (ie4) { // do something in Internet Explorer 4.0 } }

*

Death of DHTML Birth of AJAXWith these more modern techniques and the support of the DOM in modern browsers, where does that leave DHTML?Actually, the DOM is just a more formalised version of DHTML, but without the pain involved in writing browser-specific code.The Next Generation: AJAX Asynchronous JavaScript + XMLXHTML, CSS and DOM, along with XML and XSLT and asynchronous data retrieval using XMLHttpRequest. The glue biding these technologies together? JavaScriptWhos using it?Google Maps is a great example Works like Flash.

*

Useful Links, Tools and Resourceshttp://developer-test.mozilla.org/docs/Core_JavaScript_1.5_Guidehttp://developer-test.mozilla.org/docs/Core_JavaScript_1.5_Referencehttp://www.w3.org/DOM/http://www.w3schools.com/js/http://www.w3schools.com/dom/http://brainjar.com/dhtml/eventshttp://www.bobbyvandersluis.com/articles/goodpractices.phphttp://www.quirksmode.orghttp://www.scottandrew.com/weblog/jsjunk#eventshttp://www.sitepoint.com/blog-view.php?blogid=5http://www.alistapart.com/topics/dom/http://simon.incutio.com/categories/dhtml/http://chrispederick.com/work/firefox/webdeveloper/http://www.mozilla.org/projects/inspector/https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=216http://www.crockford.com/javascript/lint.htmlhttp://www.adaptivepath.com/publications/essays/archives/000385.php

*

Conclusion - OverviewDHTML HTML, CSS, Scripting and DOMCSS To control format or appearance of documentsThree ways to apply CSSPositioningDOM - details the characteristic properties of each element of a Web pageCross Browser Differences

*

ConclusionDHTML can make your browser dynamic and interactiveContent and design can be separated using Style sheetsUniformity of the site can be maintained using Style sheets.Validation of inputs given by the user can be done at the client side, without connection to the serverDrop down menus can be used to put a lot of information on the site

**XHTML used for ContentCSS used for PresentationJavaScript used for Interaction