JavaScript-DOM
05 April 2024
1. To describe JavaScript and its relationship to HTML and CSS.
HTML, CSS and JavaScript together is like building a house. HTML is the structrue and bricks to build the house up and CSS is decoration of the hourse, painting the wall yellow or getting the frame blue or putting a pic on the wall. JavaScript is like let the whole house function. To conncet the electricity to the switch then you can control the power system through the switch. Or getting the piples together so you have water supply and you can get water by turing the tap on and off if you finish using it. Also, with power and water, or the other function, you can change how your house looks like and its style.
2. Explain control flow and loops using an example process from everyday life.
Let's say, I am going to the gym and do some exercise and my control flow will be:
In loop 1, 2, 3, I do the same thing over and over again (manually) to achieve my outcome for the day.
3. Describe what the DOM is and an example of how you might interact with it.
DOM is document object model. And the dom itself is the underlying data structure of objects that make up the document. I'd like to split the DOM up to explain what does every letter represent. D here, let's say it represents the HTML document. O is object, which means every HTML element in the document. With this object representing element, we can use JavaScript to call methods or properties on objects to change them in HTML. M represents the tree-like model of the elements in HTML.
4. Explain the difference between accessing data from arrays and objects.
-An array is a list-like structure that consists of an ordered
collection of elements, each identified by an index or a key. If we want
to declare an array, we use '[ ]' square brackets notation in JavaScript
and if we want to access data from an array, we use their numerical
position/index in the list to access data:
let arrName = [1, 2, 3, 4, 5]
let data = arrName[1] //accessing '2' from the array data = 2;
-An object is a collection of key-value pairs that is used to store
various related data. An object is referred to as an instance of its
object type or class. Objects consist of properties which have keys and
values. Objects are declared using '{ }' curly braces notation in
JavaScript. Also, data can be accessed using either dot or
bracket notation to get its property and value.
let cat = {
name: 'Hello Kitty',
color: 'white,
}
cat.name // returns Hello Kitty
cat['name'] // returns Hello Kitty
5. Explain what functions are and why they are helpful.
A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. That was from MDN.
To put it a simple way, I would like to expain it using an life example: Let's give a daily routine like this:
-get up in the morning, cook breakfast(prepare, cook, wash your cooking utensils and the counter space), work/study;
-cook lunch(prepare, cook, wash your cooking utensils and the counter space)work/study;
-cook dinner(prepare, cook, wash your cooking utensils and the counter space) evening break
This whole routine means I waste a whole lot of my time and energy cooking and cleaning so, I decided to have this function which can help me finish the whole cooking and cleaning process, and form a new routine, see how clear and easy it is! When I need food, I just tell the function for me to do it, then I just sit and wait.