An analogy to describe JavaScript and its relationship to HTML and CSS.

The relationship that Javascript has with HTML and CSS is like the structure of the leave.

An **HTML file** Contains the structure of the leave itself. It is kind of like the structure of the leave.

A **CSS file**  contains the styling of the leave. It allows you to change colors, positioning and more. It is kind of like the leave varied from margin, shape, blade, tip, color and even petiole size.

A **JavaScript file** Determines the dynamic and interactive elements on the leave. It determines what happens when season changed, what happen when bug and insect bite the leave, and how it react when using spray and environment factor changed.

The DOM

DOM is a document object module document that refers to the HTML document. HTML and CSS are two of the fundamental languages found almost everywhere on the web. The Document Object Model provides the means to interact with objects in an HTML document. When a web page is loaded, the browser creates Document Object Model of the page. It's a "tree" of objects, with JS objects representing the head, body, title, paragraphs, etc. as image illustrated below:

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

1. JavaScript can change all the HTML elements in the page
2. JavaScript can change all the HTML attributes in the page
3. JavaScript can change all the CSS styles in the page
4. JavaScript can remove existing HTML elements and attributes
5. JavaScript can add new HTML elements and attributes
6. JavaScript can react to all existing HTML events in the page
7. JavaScript can create new HTML events in the page

Control flow and loops, arrays, and objects: what are they?

objects:

In JavaScript, an object is a standalone entity, with properties and type. ”Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.”

const vegetable = {type:"lettuce", color:"green",size:”small”};

array:

An array is a special variable, which can hold more than one value:

const vegetables = ["broccoli", "lettuce", "cucumber"];

loop:

Loops can execute a block of code a number of times.
including: for loop, do/while loop, for…in, for …of loop

text += cucumber[0] + "
"; text += cucumber[1] + "
"; text += cucumber[2] + "
"; text += cucumber[3] + "
"; text += cucumber[4] + "
"; text += cucumber[5] + "
";

loop it with:

for (let i = 0; i < cucumber.length; i++) { text += cucumber[i] + "
"; }

Explain control flow and loops using an example process from everyday life

JavaScript is executed how your computer runs code from top to bottom., line by line. But Control flow allow our program to make decisions about what code is executed and when it is executed.
"conditional statement" to checks to see if a certain condition is either true or false**
**If condition is true then run code A, if it's false then run code B.**
**while loops allow us to perform repetitive tasks with less code.**

From my understanding, it is like when you making decision about dinner. From the top, when think about if you are hungry, you facing two answer. When it is yes, you went next question: what to eat. when the answers is no, you stop thinking about food. Again, think about what to eat will have many answer to the question and each answer you decided you move to the next path till you processed to actually having the food or not(true or false). That path of thinking is like control flow. when you tired of making that decision over and over again, you can add an conditional(what you like and what you prefer on a raining day) so when it is raining you answer is soup. and it's been raining 365 days, you can loop the same decision making path and get the same outcome.(soup!)

Explain the difference between accessing data from arrays and objects.

As previously explained what object and array is. The main difference is : an array is a special type of variable where it represents a list of things while the objects represent a ‘thing’, with each of the values state the propertiesof ‘the thing’.
object:

var object ={key: “value”}

Properties in objects can be accessed, added, changed, and removed by using either **dot**  or **bracket** notation. object.key or object[’key’] all return the value.
array:
Arrays use zero-based indexing, so the first item in an array has an index of 0, the second item an index of 1, and so on.*

const vegetables = ["broccoli", "lettuce", "cucumber"]; vegetables[2]; // returns 'cucumber’

Explain what functions are and why they are helpful

What is a function?

A function is like a reusable recipe that the same set of actions over and over again on a set of ingredients. For example, think the function as making the sandwich. The ingredients are  parameters. when we have all the ingredients needed, we run the function and return the sandwich.

function makeSandwich(meat, vegetable, bread)
{
let sandwich = meat + vegetable + bread;
return sandwich;
}

but sometime we want chicken sandwich, sometime we want beef sandwich. and vegetable will change base on the price(for my case:p) here we introducing arguments where we have variables, so we set the variables:

let meat =’chiken’
let vegetable = ‘tomato’
let bread = ‘grain’

So we get sandwich. but with chicken this time.

let chickenSandwich = makeSandwich(meat, vegetable, bread)
chickenSandwich = chickentomatograin

Why they are helpful?

They are helpful when you need formalise a certain way of 'cooking' things just like recipe.Some of the function return the value, where in my example, it return sandwich. That means that they give you a new value that you can then use throughout your script. Other functions change a value that already exists in your script, where you turning the existing ingredients to a product after running the function(chicken sandwich) and you can do it over and over again if you want.