JAVASCRIPT

Building the Front End of a List Generator with JavaScript

In this first part of a two-part series, you will go through the process of creating the front end of a simple JavaScript application that generates dynamically list-wrapped links. The code can be copied and pasted to your favorite text editor.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

December 05, 2006

TABLE OF CONTENTS:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript-based List Generator</title>
<script language="javascript">
// display unordered list input boxes
function displayListGenerator(selObj){
// check if user has selected the 'none' option
if(selObj.value=='none'){alert('Please specify the number of 

list items to be created');return};
// remove existing 'gencontainer' DIV
if(div){div.parentNode.removeChild(div)};
// remove existing 'listcontainer' DIV
var div=document.getElementById('listcontainer');
if(div){div.parentNode.removeChild(div)};
// create general containing DIV
var div=document.createElement('div');
div.setAttribute('id','gencontainer');
div.className='elemcontainer';
// create form for list items
var form=document.createElement('form');
// generate input boxes for list items
for(var i=1;i<=selObj.value;i++){
var p=document.createElement('p');
//append label to paragraph
p.appendChild(document.createTextNode('Link value '));
//create input box for href attribute
var hrefbox=document.createElement('input');
hrefbox.setAttribute('type','text');
hrefbox.setAttribute('title','Enter value for "href" 

attribute here');
hrefbox.className='hrefbox';
// append href box to paragraph
p.appendChild(hrefbox);
// append label to paragraph
p.appendChild(document.createTextNode('Link label '));
// create input box for link label
var labelbox=document.createElement('input');
labelbox.setAttribute('type','text');
labelbox.setAttribute('title','Enter label of link 

here');
labelbox.className='labelbox';
// append label box to paragraph
p.appendChild(labelbox);
// append paragraph to form
form.appendChild(p);
}
var p=document.createElement('p');
// create 'Generate list now!' button
var button=document.createElement('input');
button.setAttribute('type','button');
button.setAttribute('value','Generate XHTML list now!');
button.className='button';
// append button to paragraph
p.appendChild(button);
// append paragraph to form
form.appendChild(p);
// append form to general DIV
div.appendChild(form);
// append general DIV to document tree
document.getElementsByTagName('body')[0].appendChild(div);
// assign 'onclick' event handler to button
button.onclick=displayList;
}
// execute script when web page is loaded
window.onload=function(){
if(document.getElementById&&document.

createElement&&document.createTextNode){
var sel=document.getElementsByTagName('form')[0].

elements[0];
if(!sel){return};
sel.onchange=function(){displayListGenerator(this)};
}
}
</script>
<style type="text/css">
body{
padding: 0;
margin: 0;
background:#fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align:center;
}
form{
display:inline;
}
textarea{
width: 595px;
}
.elemcontainer{
width: 600px;
padding: 10px;
background:#eee;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
.button{
width: 200px;
padding: 0px;
}
.labelbox,.hrefbox{
width: 200px;
}
</style>
</head>
<body>
<h1>JavaScript-based XHTML List Generator</h1>
<div class="elemcontainer">
<form>
Number of list items <select name="numitems">
<option value="none">None</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Class <input type="text" name="listclass" />
ID <input type="text" name="listid" />
</form>
</div>
</body>
</html>

Logically, after examining all the source code shown above, you’ll realize that the referenced “displayList()” JavaScript function is still undefined. However, don’t worry about this for the moment, because this function will be properly defined in the final part of the series.

If you wish to test the complete application, you can download a ZIP file containing the application’s full source code. A link to this code is also available at the beginning of this article.

Final thoughts

In this first installment of the series, I walked you through the process of creating a simple JavaScript application that generates dynamically list-wrapped links, which can be copied and pasted directly into your favorite text editor.

However, the list generating application is still incomplete, since the corresponding “displayList()” function hasn’t been defined yet. That’s the step that I’m going to take in the final part of the series, thus you have a good reason for reading it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.