Hello! In my previous tech blog, I mentioned how Javascript is like the electrician when you're building a house.
The electrician wires up your house so that the lights turn on when you push a button.
Well today i'll be trying to explain how Javascript works with HTML and CSS in abit more depth.
First of all, we have three separate files. The .html, .css, and the .js files.
But how do they talk to each other? Within the HTML file, there are links to whatever .css and .js files that it uses.
Your web browser reads these links and creates a DOM; a Document Object Model, and applies the styling from the CSS file and runs the code in the Javascript file.
The DOM translates the html file so that it's elements are represented in a way that can be read by the Javascript code - as objects and nodes with a tree-like structure
This tree-like structure acts like a map for objects so that the Javascript file knows where to find things.
For example, lets say the DOM is a forest and we want to reference a specific leaf on a tree.
It's kind of hard to point out which leaf you're referring to... so we have to describe it like this:
"It's the 2nd leaf on the 4th branch of tree number 3."
We'd denote that in javascript kinda like this: 'tree3.branch4.leaf2'
So now that you kinda know how Javascript references things. Lets talk about how the Javascript code runs.
The order in which the code is read and executed is called the 'Control Flow'.
It's usually from top to bottom until it reaches special instrucions like a loop, function or conditional statement;
in which case can be like a 'pick your own adventure' book, where you jump and skip pages as directed.
But lets say we have a robot chef. And we want to tell it how to make some hearty soup.
So lets write some Javascript code. It'll be like the instructions on a recipe that we'll give to our robot chef.
First we need some ingredients. Each ingredient will be an 'Object', and we'll put it into an array called 'vegetables'.
An array is basically a container for objects. But it can also contain more arrays; like a box inside a box.
vegetables=["Potato","Onion","Carrot","Capsicum"]
Then we need to teach our robot chef to chop. Below is an function we can write to 'teach' our robot how to chop things:
function chop(thing){
result = "Chopped " + thing
console.log(result)
}
Now that it knows how to chop things, we can give it the following command to chop a "Potato":
This will return "Chopped Potato" in our console.
But lets say we wanna chop all the vegetables in our list. Instead of giving an instruction to chop for each vegetable,
We can create a loop:
This loop will execute the chop function for each item in the vegetable list. It will return in our console:
"Chopped Potato"
"Chopped Onion"
"Chopped Carrot"
"Chopped Capsicum"
We can then throw that loop into another function and maybe add some meat and do the same:
Now we have a single function/command we can tell our robot chef to prepare soup.
It'll chop all the meat in the meats container(array), veges in the vegetables container(array) and cook and boil everything.
When we run prepareSoup() we'll get:
"Chopped Potato"
"Chopped Onion"
"Chopped Carrot"
"Chopped Capsicum"
"Chopped Beef"
"Chopped Pork"
"Cooked and boiled Everything"
"Soup is Ready!"