Dynamic HTML example to change the appearance of a web page

Dynamic HTML example to change the appearance of a web page

Display one of over 16 million colours by either;

clicking on one of the samples in the grid on the left,
entering the Red Green Blue values ranging from 0 (low intensity) to 255 (high intensity),
change hue, saturation or lightness by clicking in the square on the right, or click and drag the + or the hue slider.

Red value:
Green value:
Blue value:
Hue:
Saturation:
Lightness:
Hex value:		#175740
RGB value:		4216599

With a web page there are two types of processing, server side and client side. Processing (in this context) is where data is checked against business rules or the content of the web page is altered to reflect your input. The server is the web server hosting the web site. The client is the computer you are using.

An example of server side processing is where you enter data into a form and then click on a Save or Submit button. Your input is then examined by the server and either processed or rejected. Server side processing is more secure but has the disadvantage of delays in sending information back and forth from the server.

An example of client side processing is where input is checked for missing values prior to sending to the server. The advantage of client side processing is that time is not wasted waiting for a page to reload to tell you that you have made a mistake or to see the effect of your input. The disadvantage of client side processing is that programming code and business rules are sent to the client and may be read and tampered with by the user.

By using a combination of server and client side processing the advantages of both can be achieved.

On the client side, checking inputed text is one thing, changing the web page appearance is another and for this, Dynamic HTML is used.

By either clicking on one of the samples in the grid or entering the Red Green Blue values above, the sample will change appearance and the Hex value and RGB value will be written to the page (not to a form field like the Red value).

This is also an example of how, not only text data, but visual data (colours) may be entered for storage in a database.

A computer display uses clusters of fixed size dots of red green and blue to represent over 16 million colours by using different intensities of each colour ranging from 0 to 255. With red green and blue all at 0 intensity you get black. With red green and blue all at 255 intensity you get white. This is different from printing where no added colour equals white. In printing the three colours of Cyan, Magenta and Yellow are normally used to create all the other colours. In printing a fourth colour of black is often used to save ink. In printing the intensity of each colour can not be altered but the size and spacing of each colour ink drop can be altered and therefore the proportion of each base colour gives rise to the appearance of millions of different colours.

AJAX (Asynchronous Javascript And Xml (eXtensible Markup Language))

Ajax is a group of interrelated web development techniques used for creating interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behaviour of the existing page.

Below is an example where you can type in the name of an Australian locality and the post code will be retrieved without reloading the page. This trivial example could be accomplished by several other methods but would require pre-loading the almost 16,000 Australian localities and postcodes into the page.

Locality:
State:	Postcode:

JavaScript Notice:
Either your browser does not support JavaScript or JavaScript has been disabled on your browser.
This site is interactive and requires JavaScript to pre-process your selections and transmit them to our web server.

To enable JavaScript in Microsoft Internet Explorer choose Tools from the menubar, then Internet Options, then Security. The Default level of security (medium / medium-high) enables JavaScript. In Internet Explorer 7 to 11 you may have to press the Alt key to display the menubar.

JavaScript is always enabled in Firefox unless you enter about:config in the address bar and make ill advised low level changes.

To enable JavaScript in Google Chrome, click on the 3 horizontal bars at the top right of the browser, then choose Settings, click on the Show advanced settings link at the bottom, click on the Content settings button, select Allow all sites to run JavaScript (recommended).

Your browser has identified itself as AppleWebKit 537.3. You will have to check on line for advice on enabling JavaScript.

Home Database Browser Desktop Graphing DHTML Scripting Tree Shop QCI Contact us Privacy