JavaScript for Interactive Web Applications


Fabian Schubert

SoSe 2018

Institute for Theoretical Physics
Goethe University Frankfurt/Main

Using JavaScript to set up a simple interactive simulation

In the next slides, we will go through the process of creating the following simple interactive application:

This includes:

The structure of our HTML code

One of the most used HTML tags used to structure, style and modify certain parts of a web page is the <div> tag (short for division). By default, a div tag is not "visible", but entails other elements visible in the page.

We start by inserting a div that will hold all elements of our interactive application:

Note that we alreade gave it an id, allowing us to reference the element later on

All other elements of the application should go inside this div tage. these are:

In total, the tree structure of our application looks like this:

The basic structure of our application is set up, however, it does not quite have the look we were going for:

To fix this we will use a little bit of CSS to adjust the appearance.

Styling with CSS

The first thing we need to do is to create a CSS file and link it in our webpage:

The first thing we would like to do is to adjust the width, height and position of our container. For this purpose, we add the following lines to our CSS file:

Now, our application looks like this:

We proceed by adding style properties for the other elements:

resulting in the following appearance:

In the next section we will start writing the actual JavaScript code.

Making the ball move across the screen.

The core of our simulation is a function that is repetitively called at a fixed frequency, updating the simulation and the ball on the screen.

JavaScript has a built-in function named setInterval(function,interval) that can do just that: it calls a function at a given rate, given in millisec. by the interval parameter.

Furthermore, we need to link actions to events caused by the user clicking the buttons or using the slider

The JavaScript file looks like this:

The final HTML file: