When thinking about the differences between HTML and CSS I find it most useful to think about them in terms of what their roles would be if building a house.
The first person you’re going to get to help build your house is HTML. Their job is to come along and lay-down the foundations of the house. They put up the wooden framing, section out different rooms, attach doors, insulate the place, add a roof, and so on.
Now you could save a lot on your house budget and leave it as is, but then it wouldn’t be such a nice place to live.So you decide to get another person to help design the house and give it more of that homely feel. You hire CSS.
In they come with their designers eye and start adding wallpaper that match the rugs they’ve put down. They give the house a paint job, maybe kit out your bedroom with your favourite paintings that have been in storage for years. It’s their job to make sure that your house looks and feels homely, and so that visitors talk about their experience for years to come.
Control flow in computer science is the order in which code is run. It can be changed with conditionals which interrupt the normal order of execution when certain conditions are met, such as a loop.
A loop is a sequence of instructions that is continually repeated until a certain condition is met in computer programming.
An example would be driving your car. The loop would first need to check that there is petrol in the car. It would stop running when the petrol became empty. With each iteration through the loop, as it checked there was still petrol in the car then it would burn some more petrol.
The first statement (checking petrol is in the car), is only checked once right at the start.
The second statement (petrol is still above 0), defines the condition needed to execute the third statement.
The third statement (burning some petrol), is run every time when the condition of statement two is met.
This process is looped through continually until the car runs out of petrol.
You could also nest an if…else statement within your loop if you chose too. That would check if you petrol light was on and then decide what to do.
So for each iteration through the loop it could check; if the petrol light was off, keep burning fuel and loop again. If the petrol light is on, time to get more petrol.
The DOM is a browser provided JavaScript object that allows us to view and manipulate HTML and CSS elements. It is an object that has a plethora of properties and methods built in to help us do this.
Just like a family tree only with one parent, and LOTS of children.
Let’s say you wanted to select a bunch of elements on a page (lets go with all paragraphs) and apply all the same style to them. You could do this by creating a function through the DOM.
First you would select the elements on the page with ‘document.getElementsByTagName(‘p’);’ and save that as a variable.
You could then loop through all the paragraph elements and apply the colour green to them with a for loop.
Then you could call your function and BOOM, now all the paragraphs on the page have a green style applied to them.
It could look like this;
function makeGreen() {
var element = document.getElementsByTagName('p');
for (var i = 0; i < element.length; i++) {
element[i].style.backgroundColor = 'green'; }
} ;
makeGreen();
Just for fun, say you wanted to add some nifty function to your webpage. For example, you wanted to make an image spin faster as the mouse got closer to it, and slower as it got further away. The best place to do this would be through the DOM.
Through the DOM you could select the elements you wanted to target, in this example the img element and the mouse.
With the DOM you could also say when you wanted to kick off the spinning by setting the event. In this case the event would be as the mouse moves.
After the event kicks off, you want the img and the mouse to know how far apart they are, and then depending on that result, set the spin speed of the img.
(if anyone know how to make this happen and have it not look like a DJ turntable please hit me up!).
The main difference between arrays and objects is that objects don’t track order, whereas arrays do.
What this means is that when it comes to accessing data from an array it’s generally a bit easier if you happen to know the index of the element you’re looking for. You would use bracket notation to help you find the element.
Otherwise you would have to iterate over the array to search for the element.
Example
Const names = [‘Ben’, ‘Michael’, ‘Lucy’, ‘Dries’];
To access Michael, if you knew the index you would use bracket notation.
Const secondName = names[1];
If you didn’t know you would have to iterate through and search for Michael.
Const Michael = names.find( names => name === ‘Michael’);
With objects accessing data can be easier, as there is no concept of order.
Const thing = {height: ‘large’, human:’false’, scary:’true’};
To know if thing is scary you would use dot notation.
Const thingScary = thing.scary
Quite often you may find arrays within objects or, an array of objects. In which case you may have to use a combination iterating through the array, as well as dot and bracket notation to access the element you’re looking for.
A function is a block of code designed to perform a particular task.
Functions are useful as they save us from having to continually re-type out the same code whenever we want to perform that task. Instead we can save the code as a function and call it whenever we want to perform that task.
By calling a function we are invoking all of the code within it.