Javascript in XML File - Essay Example

JavaScript and XML Table of Contents Introduction 3 Textboxes vs. Dropdown 4 Design 5 Flowchart 6 The HTML and JavaScript 8 The XML 14 Sample Run 18 References 21 Introduction An organization’s IT department maintains details of its devices which includes the device’s ID number, its description, the location it was bought from, its manufacturer and the year it was purchased. These details are stored within well-structured tags of an XML file. Under the ‘root’ tag is the ‘records’ tag, within which the‘record’ tag stores data related to a device. JavaScript can be used to parse the XML file through referring to the tags. The details stored in the XML file and the details provided by a user are linked through JavaScript. JavaScript is used to extract information from both sources and match. According to the criteria specified by a user, data for a device stored in the XML file can be retrieved.The criterion includes the id, location, manufacturer and year of purchase. The user can provide these criteria through input elements of a webpage i.e. through textboxes and dropdown lists. In case of textbox the user types the specific detail, while in case of a dropdown, the user selects from the available options. Figure 1 Retrieve Search Criterion using Dropdown Menu Figure 2 Retrieve Search Criterion using Textbox Every textbox and dropdown element has an id through which it can be accessed. So after selecting or typing in the search detail, once the user clicks the ‘submit’ button, the value typed or selected by the user can be retrieved through JavaScript by referring to the respective id. The value extracted is then compared with the corresponding detail associated to every device listed in the XML file by parsing the respective tags. All devices matching with the provided criterion are then listed. Textboxes vs. Dropdown There are several issues related to the use of textboxes as the input method for extracting the search criterion from the user. With textboxes, as the detail has to be typed in by the user there is room for spelling mistakes. In case of misspelled input, the search does not provide correct match results. (a) Correct Spellings as per database (b) Incorrect Spellings as per database Figure 3 Search Results for Correct and Incorrect Spellings in Text Boxes Secondly it could be that a particular detail provided by the user does not exist in the database e.g. the user types detail for manufacturer as Nvidia whereas Nvidia does not exist in the database. Therefore, with textboxes the user has no idea of the options he/she has while providing search criterion. With the use of dropdown lists, these issues can be overcome. Since the data for a particular search criterion is listed in the list to choose from, there is no room for spelling mistakes. Furthermore, the option selected is always present in the database. In fact the dropdown list can be dynamically populated by referring to a particular tag of the XML database file. Any new item added to the database also becomes visible as option in the list. Design The program is designed such that it presents a user with three options to choose from. A user can select one of the following options: List all resources displaying the manufacturer and year purchased Display details of description, manufacturer and year purchased for a given id List all the devices of a particular description from a particular manufacturer. Once the user selects an option, the respective page is opened wherein the user provides the search criterion and clicks the ‘submit’ button. The script runs when the button is clicked and extracts the data from textbox and matches it with the corresponding data in database. In case of a match, the information is displayed on the page. For the second option listed on the homepage, the user is also provided with the option of achieving the particular search results through use of dropdown menus instead of textboxes. When the page loads, the dropdown list is populated dynamically from the device id’s listed in the xml file.There is no button to start the script. The script is executed as soon as the user selects an id. Flowchart The general flow for the design mentioned above is shown in Figure below. The HTML and JavaScript Code Home.html Welcome functionopenPage(pagename){ window.open(pagename,"_self"); }

Select an Option From the Menu:

List all resources displaying the manufacturer and year purchased
Display details of description, manufacturer and year purchased for a given id (textbox/dropdown)
List all the devices of a particular description from a particular manufacturer
Page1.html Resource Listing functionloadXmlDoc(file){ try { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try { xmlDoc = document.implementation.createDocument("","",null); } catch(e){alert(e.message)} } try { xmlDoc.async = false; xmlDoc.load(file); return (xmlDoc); } catch(e){alert(e.message)} return(null); } functionlistDetails(){ varxmlFile = loadXmlDoc("db.xml"); varcountRec = xmlFile.getElementsByTagName("Record").length; if (countRec> 0){ document.getElementById("target").innerHTML = IDDescriptionLocationManufacturerYear of Purchase; for(i=0; i Read More