Document Object Model

Describe what the DOM is and an example of how you might interact with it

DOM is referred to as document object model. It is what holds the CSS, HTML and JavaScript together like a glue. DOM is an object representation; the objects we learn in JavaScript. Dom is a representation of the entire HTML. It is a programming intersection that represents the structure of a web page in a way that programming languages like JavaScript can understand and manipulate. Everything that makes up the DOM is more collectively known as nodes.



Each rectangle above are known as nodes. The most top node is where the tree begins and it's called the root node. In this case, the diagram shows the root is the whole HTML document.
The nodes on the next level connecting them with the root node are the "children' of the root node. That's because they are the first things within the document.
Just like that, the document node is called the "parent" of the html node. The children of html are head and body.
The body node has its own children nodes which are h1, p and div tags.

Interacting with Dom

The way we can interact with DOM is for example adding an Event Listener to an Element. We can add an event listener using the method addEventListener Here's an example: The DOM is a compelling way to manipulate and interact with web pages and fundamental tool for web developers.



The DOM is a compelling way to manipulate and interact with web pages and fundamental tool for web developers.

Analogy

Let's say the html is like a house; it's there. It exists. It's the structure. The CSS is the styling; the painting and interior decoration. And JavaScript is like doors, the windows, the wiring within the house that gives the house a function.

How does HTML, CSS and JavaScript work together?

In web development; the three complement each other just as a structure, style and functionality all like in a house. The way they combine is that HTML creates the structure, setting up the content and layout. CSS adds the style and design making sure what we're seeing is appealing. And JavaScript opens up the functionality enabling interactions, animations etc. Without HTML, there's no structure; without CSS, there's no style and without JavaScript there's no interactivity. These combine to create a complete and user friendly experience.

Control Flow and Loops from an everyday example

Using an example of making pancakes Control Flow:
1. Mix the pancake batter
2. Heat a pan over medium heat
3. Pour the batter onto the pan
4. while the pancake batter is not cooked, wait 2 minutes and then flip it over
5. Check the pancake is cooked
6. Serve the pancakes while it's hot

Loops:
•Flip the pancake if it's not cooked
•Repeat until the pancake is cooked

Explain the difference between accessing data from arrays and objects

Accessing data from arrays:
Arrays holds values in a linear, indexed way. Each element is assigned a unique index which usually starts from the number 0; which allows you to access and manipulate its value.



In this example colors[0] approaches the first element of the array ('red') and colors[1]= 'yellow' changes the value of the second element.

Accessing data from objects:
Objects hold values as a key-value pair. Each key; the property name is unique and outline a specific value. In this example below, person.name approaches the value

What are functions and how are they helpful?

Functions are one of the fundamental building blocks in JavaScript. They are basically set of statements that performs a task or calculates a value. Functions are helpful because we can reuse it. It can be called multiple times from different parts of a program. Also helps us to avoid repeating and duplicating code and saves us time. Functions also helps us with debugging; isolatating errors, making it easier for us to identify and fix the problems.

Key characteristics of functions are:

Name: this is a unique identifier for function
Arguments: also known as parameters; this inputs passed to the function
Return Value: This is the output of the function
Body: the code inside the function that performs the task.