Relationship between JS, HTML and CSS
Imagine building a house. You need to build the structure, the fundament first. But how sad looking would this house be without any design, color, nice layout, etc.? The relationship between HTML and CSS is quite similar really. To build the structure (the skeleton) of a website we use HTML. With HTML, we write the content of the page. Without CSS, our page would pretty much look like a Word document. With CSS, we apply all the fancy styles to our page. These two combined create beautifully looking and user friendly websites. Back to our house example, let's say you want to build in some interactivity, some automatisation like self closing blinds, temperature control system, etc. In web development, that's where JavaScript comes into the picture.
Control flow and loops
Control flow is the order in which the computer executes statements (lines of codes) in a script. Let's say we want to cook some pancakes. Our control flow could look like this:
- get all the ingredients ready
- if we have the ingredients, put them in a bowl (conditional statement: if...)
- if we're out of something, go buy it (conditional statement: else...)
- make the dough
- take a bit of dough and cook it. Repeat until we're out of dough (loop)
I really want some pancakes now!
Accessing data from arrays and objects
First we need to know what they are:
Array
An array is a list of items. We can recognise an array by its square brackets [ ]. If we want to get access to what's in the array, we need to know how to target each item. Let's say we want to get 'spaghetti bolognese' (because who wouldn't??). We have to do it like this:
favFoods[1]
Why not favFoods[2]? Confusing right! We just have to remember that arrays are zero-indexed, so the first element of an array is at index 0. It's just the way it is.
Objects
An object is an unordered collection of key-value pairs. Each key-value pair is called a property. It uses curly brackets { }. If we want to access a property of an object, we use the dot notation (.). Let's say we want to get the firstName property:
person.firstName
So in this example it would return us 'Daniela'.
Functions
A function is a block of code designed to perform a particular task. As a first step, you have to declare the function by using the function keyword. Then give it a descriptive name followed by brackets ( )
Now we have declared it but it won't do anything unless we "call" the function:
greet()
So first, we need to declare (create) the function, and then we call it.
Why are functions helpful?
We use functions to break a complex problem into smaller chunks. That way our program is easier to read and understandable. We can also reuse functions and don't have to repeat our code. We can execute it as many times as we want. A rule of programming is to "never repeat yourself, never write the same thing twice".
The DOM
HTML provides the structure, CSS provides the appearance/styling, JS deals with interactivity. The "glue" that holds HTML, CSS and JS together is called the Document Object Model (DOM).
The DOM is the way through which JavaScript interacts with content within a website. You can think of it like a tree, or even better, like a family tree. But instead of family members, we have objects (called nodes). The "master" of the family, the original ancestor, is the "window object". It's all that we can see on the screen. Inside the window object, is the "document object". This represents our page.
We need JS to access these elements and do all kinds of things to them. With JS we can modify an existing element, we can delete them or can add new ones, to name a few options.
So if we want to access the HTML elements, we can use the following:
- getElementsByTagName
- getElementsByClassName
- getElementById
- document.querySelector()
- document.querySelectorAll()
Once we select the elements we want, we can let them do stuff, like behave in a different way, change to another color, switch old text with new text. We call these events. We can add an Event Listener to our selected element:
There are many many more Event Listeners but the "click" is probably one of the most used one.