More JavaScript (The Running Man Coursework)

As the title suggests this week we continued on JavaScript in More detail and ended it with a task that would require animation.

The DOM

One important thing we talked about was the Document Object Model (in short DOM), which is a technique which allows you to access anything in the HTML document through the JavaScript to change around, add new or delete HTML elements.

To retrieve elements from the HTML using the DOM. The first one is the document.getElementById(ID) which was used in the previous week to get single elements with the Id provided and the document.getElementsByTagName(name) with which you get an array of elements with that name, and then you can access each of the elements by array counter.

There are many methods used in the DOM such as nextSibling, previousSibling, parentNode and childNodes used to get elements without going back to the array.  Once you access the node you want you can get or edit its properties such as the Type, Name and Value of the specific Node. Apart from properties you can also add and change attributes of these nodes.

Cookies

Another important thing in JavaScript is cookies.  Cookies are used to store information on the client side of the webpage. You can only access the information you store on the client machine, so you can’t access cookies created by another site. These cookies contain a name, a value, expiration date and the path that can access it.

To create the cookie you create use the document.cookie = method to assign the name, value and exp date to a cookie. You can always create a function to get this information from the HTML.

Framework

In this week we also talked about some JavaScript frameworks which are Libraries that simply HTML event handling, animation etc... These frameworks give developers the ability to rapidly develop websites by providing libraries so that the developer does not need to re-create already invented code (Re-inventing the wheel).

TASK

This week’s task was to make a simple animation of a running man using 6 images along with some additional features and animation.  To start this off I created 6 simple images of the positions that a man does while running. Then I started working on the JavaScript and HTML by creating a couple of buttons, Run and Stop.  Then I started creating the JavaScript to animate the pictures one after another to simulate a running man, this was done using by assigning each picture to an array and a variable which will hold the delay of how much the JavaScript will wait before showing the next picture. Also a couple more variables where created, one of which to hold the counter of which picture to show and the other to set the method created for the animation.

To make the man run in the animation when the button Run is clicked, a small method will run to create some validations and  calls the marathon() method with a setInterval() which means it will call that method every time the interval is passed. In the marathon method an IF statement will check if the counter of the animation is in the last picture of the animation. If it is it will reset it to 0 and then show the picture, is not it will increment the counter and show the picture connected to that counter. This method keeps on going unless stopped since it uses the setInterval() mentioned before.

There is a small validation in place so that when the Run button is clicked more than once the method does not run on itself making the animation go crazy.

Next the animation to throw something at the man was created. I decided to make a the animation of a rock being thrown to the runner and hitting him making him fall down and him getting back up and continue running.

Again I created an array with all the pictures of the animation as before, this time when the user will click the throw rock button another small method will be called and  it will clear the interval of the running man so that there won’t be 2 animations going on at the same time and start the throwrock() method. Also validation is done so that the animation would not occur if the runner is stopped and also the validation so that if the button is clicked more than once is done here also.

Although an IF statement is used to show this animation, the method here is slightly different to the running man sequence since this animation has to be done only one whenever the user clicks the throw rock button and then resume back to the running as the running man animation but when it reaches the last picture (when the man got up) instead of starting this sequence again it will call the start running animation.

This was done with the IF statement first checking if the counter is holding the number bigger than the last picture of the animation. If not it will show it and increment the counter and then using a setTimeout() method recalls the same method to re-check the counter. If the counter is now bigger than the last animation the script will reset the counter and start the marathon method again with the delay.

The last feature for now was to make the man run faster or slower. This was easily done by having the delay variable decreased if the user pressed faster and increased if the user pressed slower. Also what had to be done so that the animation takes the effect of the new delay was to stop it and restart it whenever either button was pressed.

That’s it for this week, next week I’ll add 1 last feature to the running man of my own. Also next week in another post, there will be an introduction to XML.