ADDING FUNCTIONS TO WEBSITE

ADDING FUNCTIONS TO WEBSITE

JavaScript Basics Dynamic HTML (DHTML) uses HTML, CSS and scripts (commonly Javascript) to provide interactive features on your web pages. The following sections will discuss the dynamic features of JavaScript in some detail, but before you can use these more advanced features it is important to ensure you understand the basics of the language such as: How to declare variables How to assign values to variables How to use constants How to declare and call functions How to write JavaScript expressions How to use operators and the maths functions How to use string functions How to use conditional and loop statements You will then be able to build on this basic knowledge to create dynamic web applications.

DHTML Basics Dynamic HTML (DHTML) uses HTML, CSS and scripts (commonly Javascript) to provide interactive features on your web pages. These features allow you to alter the content or position of HTML elements, based on user input or perhaps a timer. The main problem facing web developers who wish to use DHTML is browser compatibility. Using the W3C standards will reduce the compatibility problems but this won't solve all the problems. One technique used by developers is to test for the type of browser being used and provide alternative DHTML pages depending on the browser. To determine the browser type you can: Detect the browser using the navigator object Detect the browser at runtime

Detect the browser using the Navigator object The Document Object Model (DOM) does provide an aide to this dilemma, in the form of the Navigator object, a property of the Window object. Using the properties of the Navigator object, in theory at least, one can determine the client browser make, version, operating system, etc. Unfortunately the properties are not always implemented consistently, even by the same browser manufacturer. The standard approach of browser detection has been to convert the useragent or appname properties to lower or upper case and then perform a sub search for a known such as 'netscape' or 'msie'.

The Navigator Object The following table returns the properties from your current browser.

Attribute useragent: appname: appversion: appminorversio n: Result Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.107 Safari/535.1 Netscape 5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.107 Safari/535.1 undefined browserlangua ge: undefined systemlanguag e: undefined userlanguage: undefined cookieenabled: true platform: cpuclass: javaenabled: Win32 undefined true

Detect the browser at runtime Using features that are browser specific, makes it possible to detect the browser at runtime. For example only IE browsers recognise the element referencing scheme in the following code: document.allyou can use the fact this is IE specific code to determine what type of browser is being used to view the web page.

Once the browser type and functionality is known, a decision can be made at runtime, perhaps to redirect site content to subdirectories supporting the nominated browser. This requires extra work, time and consequently money! Some development houses may consider this to be a good PR exercise.

Colour Basics Colours can be specified in HTML pages by using a colour name or by using numbers. Perhaps the most common and versatile technique is to use a numeric value which consists of three two-digit hexadecimal numbers. Each pair describes the intensity of the corresponding colour. The first pair refers to red, the second pair to green and the third pair to blue. For example, the colour value #FF0000 is red because the red number is set to its highest value, FF (or 255 in decimal form). Note the use of the hash symbol '#'.

The Document Object Model The Document Object Model (DOM) is an interface that allows programmers to manipulate XML or HTML documents. Document Objects include the objects that can be described by HTML tags (such as tables and forms) as well as other objects for manipulating windows and performing other programming tasks. An object can be described by the properties, methods and events which can be applied to it.

A DHTML compatible browser views all the HTML elements (such as tags, forms, text etc.) as scriptable. The colour, position, visibility etc. of the HTML elements can be altered using a scripting language. In the browsers view of the HTML page, these elements are organised into a hierarchal structure, allowing the programmer to access these elements by navigating the hierarchy.

As explained previously one of the difficulties with the Document Object Model is programming for browser compatibility. The W3C specification for the Document Object Model is unfortunately different from the Microsoft IE 4 DOM. The W3C specification for the DOM is the standard to follow to achieve maximum browser compatibility. Unfortunately it won't guarantee it, especially with fourth generation browsers such as Netscape 4 and Microsoft IE 4. This discussion focusses on the W3C DOM and the IE proprietary model (referred to in this resource as the IE DOM). All examples indicate the model used. There may be some examples that you are unable to view, with your browser. You should try each example and take note of the browser compatibility issues.

Event Handlers Event handlers provide a mechanism to generate dynamic events in web pages. For example: Change text when a user clicks a mouse button Change one image with another when the mouse cursor moves over an image Display a menu when a document is loaded

Event Binding To execute some action (eg change the background colour of a button) as a result of some event (eg a mouse click) it is necessary to associate or bind an event handler to a page element (eg a button). There are a number of ways to go about this. You can: Embed the event handler within the element Assign an event handler to an object's event handling property Bind an event handler to the object via the script tag

Text ranges provide a mechanism for manipulating text on a page. You specify what text you want to manipulate (the text range). There are many differences between the IE and W3C DOM. In this section the discussion is confined to the IE DOM implementation. The examples are based on code from http://msdn.microsoft.com. To select the text in the entire body of the page, use the following code: somevariable = document.body.createtextrange () Once you have selected the text range you can manipulate it in some way, for example, delete or modify it. To refer to the actual text in the body of the document, type: somevariable.text

Dynamic Positioning Dynamic positioning of page elements relies on the CSS positioning attributes. With dynamic positioning you can specify: Where on the page you want your elements to reside Make them visible or remove their visibility Move the elements based on user action or a time-based event

To create a positionable element you use the position attribute within a CSS style rule. For example, to make a div element positionable you could use the following code: <div id="pdiv" style="position:absolute; left:50px; top:50px"> The inline style is used to make it easier to understand the code, but you could of course use cascading style sheets or the style tag to define the style of the div. The value of the position attribute can be: absolute fixed relative static inherit

With absolute positioning the element is positioned in relation to the elements container. The top left hand corner of the elements container is the position 0,0. With relative positioning the element is positioned relative to where it would normally have resided.

Attribute top right bottom left visibility z-index clip Description the element's position from the top edge of its context the element's position from the right edge of its context the element's position from the bottom edge of its context the element's position from the left edge of its context states whether an element is visible or not the stacking order of the element the viewable area of an element (absolute position only) overflow how overflow content is handled (eg clipped, made scrollable)