Javascript | WHG training resources
Description: You don't need to install javascript - you have it already in your browser. To have a go at using

Skip to main content

# Javascript

You don't need to install javascript - you have it already in your browser. To have a go at using it, all you need is an html file to wrap it in that your browser can understand. Something like this:

    <!DOCTYPE html>
    <html>
    <head>
      <script>
        // Your code goes here.
        console.log( "This is my code!" ) ;
      </script>
    </head>
    <body>
      <h1>A webpage</h1>
    </body>
    </html>

(Try creating a new file called `test.html` with the above contents and opening it in your browser.)

This is a standard structur of an HTML document, with the `DOCTYPE`, `html`, `head`, and `body` elements. Visible elements (like `h1` above) are put inside the `body`, and javascript code and other things can go inside `head` or `body`.

If you run the above you might be underwhelmed - you won't see the message being printed anywhere. To see it you need to turn on the javascript console. This is done by enabling the 'developer tools' which you can do in the browser preferences. Once this is on, you can go to the `Develop` -> `Show Javascript console` and you should see your message.

Javascript is interesting to write because

- it's right there in your browser
- it's pretty fast and flexible.
- It is great at manipulating stuff on webpages (and there are rich APIs for this, collectively known as HTML5).
- and it has a bunch of interesting features (for example prototypal inheritance) that make it a bit different to other languages.

It's also very well documented - see the MDN docs for example.

For example, here's an HTML page that uses javascript to draw a rectangle in an svg element on the screen:

    <!DOCTYPE html>
    <html>
    <head>
      <script>
        // "Run this function once the page has loaded"
        window.addEventListener( "load", function() {
          console.log( "Starting my drawing!" ) ;
          // create an svg element to draw in
          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute( 'width', 220 ) ;
          svg.setAttribute( 'height', 120 ) ;

          // Add a border so we can see it
          svg.setAttribute( 'style', 'border: 5px solid black; border-radius: 15px;' ) ;

          // Create a rectangle
          let rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect");
          rectangle.setAttribute( 'x', 10 ) ;
          rectangle.setAttribute( 'y', 10 ) ;
          rectangle.setAttribute( 'width', 200 ) ;
          rectangle.setAttribute( 'height', 100 ) ;
          rectangle.setAttribute( 'fill', "grey" ) ;

          // Add the rectangle to the svg
          svg.appendChild( rectangle ) ;

          // Add the svg to the document
          document.body.appendChild( svg ) ;

          console.log( "Finished my drawing!  Added element was", svg ) ;
        }) ;
      </script>
    </head>
    <body>
      <h1>A rectangle</h1>
    </body>
    </html>

Save this in a file (say `test.html`) and open it in your browser. You should see a reassuringly solid rectangle.

## Understanding the code​

In fact there's a lot going on here - we have written in five different languages at once. There is:

- HTML which provides the overall structure of the document.

- Javascript: which the main bit of code is written in.

- DOM or *document object model. Most of the javascript code is interacting with the browser through the DOM (i.e. all those calls to create elements and so on). That's the javascript API to talk to the browser.

- CSS: We gave the `svg` element a 'style' attribute to give it a thick visible border. The syntax of that value is `CSS` ("Cascading style sheets"), another language that is all about visual appearance of elements.

- SVG: Finally, the draw itself is in a flavour of XML known as Scalable Vector Graphics (SVG). That is a language all to itself.

Despite all this complexity, once you get your head around this combination of HTML, javascript, CSS, SVG and other HTML5 features, it is a really powerful way of building interactive visualisations. For example, here's a version that draws a circle instead, but moves it every time you click:

    <!DOCTYPE html>
    <html>
    <head>
      <script>
        window.addEventListener( "load", function() {
          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute( 'width', 500 ) ;
          svg.setAttribute( 'height', 500 ) ;
          svg.setAttribute( 'style', 'border: 5px solid black; border-radius: 15px;' ) ;

          let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          circle.setAttribute( 'cx', 250 ) ;
          circle.setAttribute( 'cy', 250 ) ;
          circle.setAttribute( 'r', 20 ) ;
          circle.setAttribute( 'fill', "grey" ) ;
          svg.appendChild( circle ) ;

          document.body.appendChild( svg ) ;

          circle.addEventListener( 'click', function() {
               let x = parseInt(circle.getAttribute( 'x' )) ;
               circle.setAttribute( 'x', x+10 ) ;
          }) ;

        }) ;
      </script>
    </head>
    <body>
      <h1>A moving target</h1>
    </body>
    </html>

Run this in your browser and 'inspect element' to see the document structure. What happens to it when you click the circle?