Javascript DOM

Javascript analogy and relationship with HTML and CSS

HTML: Skeleton, providing the structure and layout of the website, similar to how the skeleton provides the structure and support for the human body.
CSS: Skin and clothing, adding design elements like color and layout, similar to how skin and clothing add to the appearance and presentation of a person.
JS: Muscles, neural systems and organs, providing interactive functionality and behavior, similar to how muscles and organs control movement and behavior in the human body.

These three languages work together to create a complete and functional website, similar to how all the different parts of the human body work together to create a functional and dynamic organism.

Control flow & Loops

A common daily process that can explain control flow and loops might be 'making breakfast'.
Control flow refers to the order in which the different steps of a process are executed. In the process of making breakfast, the control flow might be as follows:

1. Wake up in the morning
2. Decide what to make for breakfast
3. Grab ingredients
4. Prepare and cook breakfast
5. Eat breakfast

Control flow in this example refers to the order where these steps are executed.
You can't eat breakfast until you decide what to make or you gather ingredients, so the control flow indicates that these steps must be done accordingly in a specific order.

A loop, on the other hand, is a way to repeat a certain step or set of steps multiple times.
For example, you might need to make two cups of coffee everytime you have a breakfast in every morning.
Then you might have to repeat making two cups of coffee in a same way twice.
In this example, the loop is used to repeat the step of making coffee until the desired number is reached.

What is DOM and how to interact with it?

What is DOM?

The document object model created by the browser when a web page is loaded.

After loading the HTML document, the web browser interprets the content and displays it on the screen which is also called as rendering process.

In the process of interpretation, the browser structures html elements in a tree form. This is called a document object (DOM:Document Object Model), and eventually the browser renders web contents on the screen based on this DOM.

Tree type: The topmost tag is the html tag. HTML codes are in the form of one tag containing another tag. A tree-like hierarchical structure in which elements are contained within other elements. html is the parent of the body, and body is the parent of the divs.


Roles of DOM

Followings things you need to generate dynamic HTML via DOM
• change HTML elements.
• Change HTML attributes.
• Change CSS styles.
• Remove existing HTML elements and attributes.
• Add new HTML elements and attributes.
• Generate HTML events on the page.


HTML DOM Method

DOM methods are actions that can be performed on HTML elements.
DOM properties are values ​​of HTML elements that can be set or marked.


How to interact with DOM?

DOM (Document Object Model) allows developers to access and manipulate the elements of a webpage, such as text, images, and forms.

There are several ways to interact with DOM however, in this example, I am going to use Javascript to interact with DOM.

This snippet of codes selects an element with an id of 'my-element', puts a string 'Hello, World!' to the element, adds a css class called 'highlighted' to the element then attaches function to show an alert when clicked.

Accessing data from arrays and objects

In JavaScript, you can access arrays and objects using the variable or property name followed by the index or key of the element you want to access.
An example of how you might access elements in an array.

The index of an element in an array starts at 0, so animals_array[0] will access the first element of the array, "tiger".

An example of how you might access elements in an object:

The keys "name", "age", and "location" can be used to access the corresponding values in the object in this example.

For Reference (Useful built-in Javascript methods for accessing, manipulating date from arrays and objects)

For Arrays:

.push(): adds an element to the end of an array
.pop(): removes the last element from an array
.shift(): removes the first element from an array
.unshift(): adds an element to the beginning of an array
.slice(): returns a new array with a selected range of elements from an array
.splice(): adds or removes elements from an array at a specific position
.forEach(): iterates over an array and applies a callback function to each element
.map(): creates a new array with the results of calling a provided function on every element in the calling array
.filter(): creates a new array with all elements that pass the test implemented by the provided function

For Object:

Object.keys(): returns an array of a given object's own property names, in the same order as we get with a normal loop.
Object.values(): returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop.
Object.entries(): returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop.
Object.assign(): copies the values of all enumerable own properties from one or more source objects to a target object and returns the target object.

What is functions and why are they helpful?

What is function?

A function is an independent block of code designed to perform a specific function. You can call it whenever you need it and use it repeatedly.

Characteristics of JavaScript functions

- A function is a Function object.
- A function is also a data type. Therefore, it is possible to assign a function to a variable or designate a property.
- By default, functions return undefined. To return another value, the function must have a return statement specifying the return value.
- They can be defined nested within other functions.

Why function is needed?

- Reusability: When the same operation needs to be repeated in many places, it is convenient to make it into a function and call it whenever necessary.
- Readability: You can infer what function it performs just by looking at its name.
- Modularization: Convenient for maintenance or when bugs occur.

In this example, if you create a function called sayHello, you can call it whenever necessary to greet multiple people.