Creating Web Page Components with Javascript

How Use Javascript Create Web Site Elements Programmatically

Nov 1, 2009 Mark Alexander Bain

Web pages are usually created manually by adding HTML tags in a text file. However, the programmer can dynamically create a whole web page completely in Javascript code.

Most web pages are, of course, built by using HTML (HyperText Markup Language) tags. These enable the web site designer to add various components (such as tables, forms, input boxes and images) to a web page. The web site developer may also add functionality to the web page by writing Javascript code. However, it is also possible to create the whole web page completely dynamically using only Javascript to create the components rather than adding them by hand. The programmer can:

  • use Javascript to add components to a web page
  • assign functions to the components dynamically
  • programmatically change the functions assigned to a component

The starting point is, therefore, a blank web page:

<body id="body"></body>

The important part is then to write the code that will create the web page elements.

Adding Components to a Web Page with Javascript

Before a programmer can add a component to a web page they must first create that component:

<script language=javascript>
var ip1 = document.createElement ("input");

This would define an input box element, although at the moment it would be invisible and would have no id associated with it. The id is required so that functionality can associated with the component. However, that's easily added by using the code:

ip1.setAttribute ("id", "ip1");

This will set the input box's id to be "ip1", but it will still be invisible at this point. The programmer makes it visible by using:

body.appendChild (ip1);

If the web page was to be viewed at this point, remembering to end the script with:

</script>

then an input box would appear in the top left of the document.

Positioning Components on a Web Page with Javascript

The position of the web page element can be altered by using the Javascript code to manipulate the component's style properties:

ip1.style.position = "absolute";
ip1.style.left = 150;
ip1.style.top = 20;

Now the input box will not be at the top left of the documents, but will appear 150 pixels to the right and 20 down.

Assigning Functions to Components on a Web Page with Javascript

If a programmer is going to assign functions to a component they will, rather obviously, first need to write those functions, for example:

function highlight() {
this.style.backgroundColor = "yellow";
}
function unhighlight () {
this.style.backgroundColor = "white";
}

These functions can then be assigned by the programmer to any of the element events:

ip1.onmouseover = highlight;
ip1.onmouseout = unhighlight;

If this is saved to the web page and that is viewed by a user, then they will see an input box that lights up when ever they move their mouse pointer over the box, and will return to white when they move the mouse pointer away. They programmer can then go on to add further elements and format them purely using Javascript.

The copyright of the article Creating Web Page Components with Javascript in Computer Programming is owned by Mark Alexander Bain. Permission to republish Creating Web Page Components with Javascript in print or online must be granted by the author in writing.
Creating Web Page Components with Javascript, Mark Alexander Bain Creating Web Page Components with Javascript
   
What do you think about this article?
NOTE: Because you are not a Suite101 member, your comment will be moderated before it is viewable.
post your comment
What is 5+6?