The Javascript DOM
The differences between HTML and CSS
Html and css are different in many ways. When building a website you want to start with the html. You write all your text and add all your images in the html file, then when you are ready, you create a css file and you link it to the html, then you can style everything individually.
For example, if you want to change the colour of the text that you created in html, using css you can do just that. Without css, the html will be very ugly but it will still be functional. You cannot create functional content in css so you need the html for the css to live. It’s kind of like a symbiotic relationship.
In case you didn’t get any of that, here's an analogy to describe them further:
HTML is like a body, it has no clothes but it has hair and eyes and hands that all work, but the problem is this body looks homeless without clothes and no one wants to talk to or even look at them because they are naked. So when this person decides they wanna look cool and get some clothes (the clothes are css), then they can be happy and everyone will want to talk to them because they look cool.
Moral of the story: HTML is a naked website (it looks so ugly). CSS adds pretty to your site so people will enjoy coming to it.
The DOM :
Document = your html document
Object = Anything you put into the html ( all the tags - <html>, <head>, <img>,etc)
Model = how you layout all your objects (tags) in your document
For an html you usually put the <html> tag first, then inside of the html tag, you might put the <head> and <body> tag.
In a DOM (document object model) It would look like this:
If we wanted to add a title inside the head tag which said something like "my blog", the dom would now look like this:
(the text = "my blog")
And if we wanted to add a paragraph inside the body tag which said something like “happy boi”, the dom tree would now look like this:
Why do we actually need the DOM?
Knowing the dom is especially useful in javascript. Using the DOM we can manipulate and edit elements on our page. In order to edit
& manipulate them, we must be able to navigate the DOM in order to find them first. You can also use the console.log function to get info about your page using the DOM.
Functions
A function is a command we use in javascript when we want the webpage to perform a certain task or to make a calculation.
They are executed either when a button is clicked, when the code tells it to start, or automatically started by itself.
Functions are necessary because with them we can perform tedious tasks like writing multiple lines of code, without actually writing multiple lines of code. This results in the code being more tidy and easy to analyze, which is especially important when working with others.
Accessing data from Arrays vs Objects.
Arrays can contain multiple values of random things. When you want to access specific data within the array you can use the index number to help you.
Objects consist of data that is familiar to us. An object could be a person or a thing, and just like in real life, that person or object would have properties that make it what it is. Objects contain 2 types of data: fields and methods. If our object was a person, the fields would contain data about the person's height, age, ethnicity, and things that let us know about it. The methods would contain things that this person can do like running, eating, breathing, etc. When you want to access specific data within an object you just need to use the objects name in order to find it.
Control Flow and Loops
When we want a task executed, Java will use Control Flow - it will go through the code in order from the first to the last line. Using loops we can control the default flow so that instead of it going in order from top to bottom, it can repeat the task, or we can change it to go in a different order when something doesn't go right.
Say if you’re wanting to get to your friends house, you would:
Get in the car, put on seatbelt & drive to friends house
And bam you're there. But wait! what if you don’t have enough petrol in your car to get there or it suddenly breaks down?
Well the computer is like a baby, it doesn't know what to do in this situation because it's never been told. So in order to tell it what to do you need to use a loop.
If fuel is low > Go to petrol station
