Week3: More Javascript

Introduction
The document object model(DOM) represents the interaction of objects in an html, xhtml or XML files. Using JavaScript one can access the DOM dynamically once the page is loaded. It helps developers extract pieces of data that can be used in order to carry out a process & it can also be used to validate user input. The possibilities are endless since the file can be manipulated as if you are editing it directly in a text editor.


DOM JavaScript Commands
Here's a list of commonly used commands to access the DOM of an xhtml element:

• document.cookie - Access the cookie
• document.getElementById("id") - Get a node object using its ID
• document.getElementById("id").innerHtml - Get the html of a node object using its ID
• document.URL - Get the full URL of the browser
• document.getElementsByTagName("input") - Retrieves all node objects with tag type specified.
• document.getElementById("frm1").submit() - Submit a Form object
• document.getElementById("id").style - Manipulate an element's style

DOM Traversing

Traversing the DOM means navigating the DOM & finding specific nodes. The DOM api gives us the node properties that we can use to retrieve any node we want. In order to navigate through a DOM one can use these api commands:

• Node.childNodes - Directly access the nodes of a single element. Gives you an array of nodes which one can loop throgh.
• Node.firstChild - Get the first child of a single node.
• Node.lastChild - Same as above but instead returns the last node.
• Node.parentNode - Gives you the enclosing node of this current node.
• Node.nextSibling - Retrieves the next node on the same level of this DOM element.
• Node.previousSibling - Same as above but gets the previous node.

Frameworks
In order to releive you from a lot of stress, there have been alot of development for javascript frameworks lately that would facilitate your life. Top rated javascript frameworks:Jquery,MooTools,Dojo,ExtJs, GWT(Google Web Toolkit), YUI. All are good frameworks but in my opinion Jquery is the best because it allows you to do lots with less coding. You could also find alot of ready made plugins for you and its really well documented. Jquery also comes with a UI library which helps you make transitions and animations in your web pages with not more than 5 lines of code.

Task - Coursework
The task this week was to develop a small animation using html, css & javascript which will also serve as the coursework of this sector. The objectives are to animate a man walking whilst the users have the command of slowing/agilitating the animation & throwing an object to the animation. Apart from that we were also asked to integrate something of our own. My feature was to enable the user to change the direction the man is walking, so the man in my animation can either go to the left or to the right. 

It was quite an easy task to develop but still, a bit time consuming without using any frameworks. The basic concept of the animation is to change one image constantly on the webpage to simulate such an animation and in my case change the css left/right position since the man also walks through the x-axis. A function then takes care of the movement and the speed using a timer.

The first problem I had was with the images, the sequence wasn't smooth since the character seems to be moving in vain (like walking on a treadmill or doing a moonwalk). I tried increasing the pace at which the character moves at every iteration but since in the images, small paces are made, this couldn't be made either. 
Another problem which I encountered is when I opened the document in Internet Explorer, here's a list of problems that occurred when the application was opened with Internet Explorer:

• Main Controls where not positioned correctly which indicates a CSS problem.
• The character wouldn't do any more animation after a few paces which indicates a JavaScript flaw.