JavaScript

Feeding a cat

We've learned how to integrate text and graphical objects into our page and we also know how to publish it. So far, we might as well just create a plot elsewhere and publish it as an image. But wouldn't it be much better, if the user could interact with the data? To do that, we need to learn a little scripting, and, again, HTML provides a scripting environment. Everything between <script> and </script> within the body will be interpreted as JavaScript code. Since the code we write in the HTML file is executed sequentially, we need to make sure that whenever we refer to an element on the page, this element already exists. An easy way to ensure this is to include scripts just before the end of the body element. Just like we did with styles, we can outsource our code into a separate file with the extension '.js'.

So, let's go back to using the cat image for now. We want the cat to acknowledge that we click on it. First we need to create our interaction.js file and link to it in the HTML body.

<script src="interaction.js"></script>

We need to introduce the script to the HTML element, using these basic steps:

• Set up a link between HTML and the script by giving the HTML element we want to interact with a unique ID.
• Retrieving the element and assigning it to a variable in the script that we can work with.
• Detect the action we are interested in, i.e. button click using an event listener.
• Do things.

The ID is an attribute we can set for the image:

<div class='image'>
    <img id="cat" src="img/cat.jpg">
</div>

Using 'getElementByIl', we can grab the element from the document (a magical object representing the entire page) and work with it in the JavaScript file.

var cat_image = document.getElementById('cat');

Now we want to detect if someone clicks on the cat image. Event listeners help us by constantly checking if someone performs a certain action. The second argument determines what we want to happen. In our case, we want to execute a function called 'meow', that we haven't written yet.

var cat_image = document.getElementById('cat');
cat_image.addEventListener("click", meow);

Our event listener takes two arguments: the type of event and what we want it to do. We want to execute a function called meow(), which will open a pop-up window. We can use the JavaScript function alert().

function meow() {
    alert("Meow!");
};

If we want to execute a sequence of functions, we can also create something that's called inline function, that is only defined in the scope of this specific callback. Within this function, we can call meow(), but also othe functions, like sleep() (which doesn't exist, yet).

var cat_image = document.getElementById('cat');
cat_image.addEventListener("click", function() {
    meow(); 
    sleep();
});

Obviously, we can also drop the meow() function, if we don't want to use it ever again:

var cat_image = document.getElementById('cat');
cat_image.addEventListener("click", function() {
    alert("Meow!"); 
    sleep();
});

The next step to having a fully interactive page is to change HTML elements using JavaScript.

We've created a button in the HTML file:

<button id='feed_button'>
    FOOD!
</button>

This is what we all should be up to by now:

var cat_image = document.getElementById('cat');
var feed_button = document.getElementById('feed_button');

feed_button.addEventListener("click", feed);
function feed() {
    alert("OMNOMNOM!");
};

The goal now is to make the cat put on a little bit of weight when we feed it. Again, we have to link to both the cat element and the food button so that both files know what we're talking about.

We're setting the width by stringing a few words together: 'cat_image.style.width'. We can think of 'cat_image' as having an attribute called 'style', which in turn has an attribute called 'width'. Let's add a couple of grams. We have to retrieve the current object width. Our 'cat_image' object also has a attribute called 'offsetWidth'. This will give us the current width as a number (as opposed to the string '200px'). Google is your friend here. Use it to find out these handy functions. Lastly we have to append the new value with 'px'.

var cat_image = document.getElementById('cat');
var feed_button = document.getElementById('feed_button');

feed_button.addEventListener("click", feed);
function feed() {
    cat_image.style.width = (cat_image.offsetWidth + 30.0) + 'px';
};

We could also pass an argument into the function by writing it in the brackets. We might, for example, want the user to be able to decide the meal size the cat eats.

We can also return a value and assign it to a variable (just like we do with any function we used so far, e.g. var element = document.getElementById("someID");):

var new_width = feed(10);

function feed(mealsize) {
        cat_image.style.width = (cat_image.offsetWidth + parseInt(mealsize)) + 'px';
        return cat_image.style.width;
};

In JavaScript there are two main data types: strings (text, everything in quotes) and numbers. It's important to remember that you can't do maths with strings or append numbers together.

For example: 5+5 = 10 but '5'+'5' = '55'

If one of the arguments is a string, the other one gets converted, too: 5 + '5' = '55'

We've also just used that, when we concatenated (cat_image.offsetWidth + 30.0) + 'px'.

By the end of this lesson, your page should look something like this: