XML Processing with DOM
Reference
Standard
- DOM level 3 Core reference http://www.w3.org/TR/DOM-Level-3-Core/core.html .
- DOM level 3 Events reference http://www.w3.org/TR/DOM-Level-3-Events/ .
- All DOM specs: http://www.w3.org/DOM/DOMTR
Tools
- Firebug, firefox DOM Inspector
- Chrome developer tools
- Opera dragon fly
- IE8 developer tools
Practice
Before trying your hand at these exercises, read the course and the examples at http://www.infoiasi.ro/~busaco/teach/courses/web/web-film.html#s9. Note that all the exercises below should be implemented using standard DOM API manipulation, even if in the specific context there are alternative ways.
Also, think of implementing these exercises in the context of your own project, where they match purpose (or proposed feature can be slightly adjusted to fit).
Multiple file upload
Starting from the example in fileupload.zip and using only standard DOM API, implement the "Upload another file" functionality, which should add a new fileupload form input to the attachments form. For this, follow the next steps:
- analyzing the DOM API specification, write down the functions which you should call and on which objects in which order, to get the job done;
- fill in the onAddFileInputClick function with these calls.
Collapsible comments (revisited)
Implement the show/hide comment functionality of the collapsible comments exercise in lab 2, using javascript and DOM events (and DOM manipulation).
Validated forms
Implement a registration form whose fields are validated when the user leaves the inputs, e.g. the user enters the username field, they type something and then hit tab to advance to the next field. If the entered username does not match the validation criteria, the field will be colored and a message will be displayed next to it specifying the error. Example of validation criteria are: username longer than a number of characters (usually 6), password which contains digits & special characters, non-void telephone number, etc.
Decorated search
Implement a search form which displays "Insert your search text here" (or other friendly message) when it is not used. When the user enters the input (clicking or tabb-ing into it) -- the input gets the focus -- the friendly text is deleted and the user is allowed to type his search, or if there is already a typed text inside, the text will be selected. When the user leaves the input, if they haven't inserted anything, the text of the search input is restored to the friendly message, if they have inserted something, the inserted text is preserved.
Save guard
Implement a form with a text area and a 'save' button for which, if the user makes changes to the text area without hitting the save button and wants to leave the page, a message will be displayed warning the user about potential loss of changes and not actually leave the page until the user confirms.
Tags suggestions *
Implement a tags input form which displays a suggestion panel under the input, which presents the matching tags as the user types. The list of all tags to match user input with will be taken from a hardcoded fixed list (see next labs about how to fill it in with data from the server). If the user hits arrow down, they should be able to navigate through the suggestions list and hit enter to select one.
Imported reviews
Implement the import function for the review application, from the format proposed at the exported reviews exercise from lab 6. It should receive an XML file storing the exported reviews, process it and extract the data to store in the application format (RDBMS or other).
A variation of this exercise is an import from any other XML format into application data, in the context of your chosen project.