WELCOME TO RATIO CLUB

Week 4:

Experiments in Structure

The Document Object Model

The Document Object Model, or DOM, refers to the tree-like structure of a HTML document.

DOM structure

Elements can be nested inside other Elements, creating a hierarchy.

<body>
  <div>
    <p>
      this is a paragraph of text,
      nested within a divider,
      nested inside the body.
    </p>
  </div>
</body>

Elements nested within others are called Children,
and the Elements they are nested in are called Parents.

Element Attributes

Elements can be given attributes, which hold values.

These include the style attribute for applying CSS styling,
the class attribute for grouping similar elements,
and the id attribute which is used to identify specific individual tags.

<div style="width:100px" class="box" id="box101">

These can be applied within the HTML Tag.
Certain Tags have their own unique attributes,
but other attributes are applicable to all types of Tag.

Any id attribute should be given a unique value.

DOM Manipulation

So how do we manipulate the DOM using JavaScript?

document.getElementById('uniqueId');

This will return the Element as an Object that we can store in a variable.

var el = document.getElementById('uniqueId');

Altering Attributes

We can use dot notation to alter attributes in the same way we would change any Object variable.

var el = document.getElementById('uniqueId');

el.width = 500;
el.color = "rgb(255, 200, 0)";
el.fontSize = "24pt";

Creating Elements

You can also create a new element using JavaScript

var el = document.createElement("tagType");
document.body.appendChild(el);

This creates a new element of whatever type you specify.

You must then append this to the DOM.

It is important to nest the new element in the right place.

Asynchronicity

The reason this all is possible is something that makes JavaScript special.

JavaScript allows for Asynchronous requests and callbacks.

This means that things can be done in the background whilst we continue doing what we were doing on the page.

For example, if you need to get an image from an external URL somewhere else of the internet, our JavaScript code can ask for this image and then rather than having to wait for it to be returned and loaded, our code can carry on running and then present the image when it is ready.

Requests: Server & Client

It is important to understand that when working with the internet, there is a client and a server.

The client makes a HTTP request to the server, asking for a resource.

A resource is any form of data that you may want to use. This could be a webpage, an image, or the contents of a database amongst other things.

The server then delivers a HTTP response, sending the resource back to the client.

EXERCISE

Let's manipulate some DOM!

Running A Local Server

Whenever you want to use a resource in your programme or webpage you will need to load it.

However, due to security reasons, JavaScript tries to prevent cross-origin requests that may be malicious in nature.

What this means for us is that, when writing our webpage locally on our computer, we cannot load local resources without requesting them from a local server.

To do this, we can use Node.js

Node.js

Node.js is a way of running JavaScript locally on your computer. It allows your computer to interpret JavaScript without need to use a browser.

It is a powerful tool that has a huge range of uses. With it you can build programmes to run on Raspberry Pi's in installations, twitterbots to tweet fun things, or put together an app for a mobile phone.

To run a Node.js script, we use the command line.

node nameOfFile.js

This will ask node to run the script we have written. (more on this next week)

The Command Line

The command line or terminal is a way of talking directly to your computer.

It is a quick and useful way to access certain computer applications such as Node.js

Visual Studio has an Integrated Terminal that can be accessed under "view" or by pressing ctrl + ' (mac: cmd + ' )

npm and http-server

We can also use it to run a simple HTTP Server right from our own computer.

In the same way that we have been using libraries to load prebuilt code into our webpages, Node.js uses packages.

There are packages for pretty much anything. Just try doing a google search for the name of a food along with "js" and you will almost always find a node package.

To install packages for Node.js to use, we use npm - Node Package Manager.

When installing Node.js, npm is included.

With npm we can install any node package using the command line.

npm install http-server -g

When we use the above command in the command line, it will ask npm to search for an install a package called "http-server".

Homework

Install Node.js on your computer, along with npm.

Then install the http-server package.