How is JavaScript realted to HTML and CSS?
JavaScript is like breathing life into something static.
Think of your favourite animated character. It used to be a basic line sketch of outlines, shapes, positions of certain body parts etc. This is the HTML where it shows the bone structure of it's shape, how it's connected and built to be one piece. Then, we have the CSS which adds extra colour, decorations, some uniqueness and personality to those characters. It may have blue hair, red outfit and wearing a huge yellow hat. At this stage, the character is not moving even though it looks beautiful and colourful. It needs something that makes them move.
JavaScript comes along and breathes in that spirit into the character. Now, the character actually moves around, sings, dances and reacts to our question and prompts. It can change their outfit colour, hide themselves behind the screen or become smaller or larger on the screen. All of these movement, action, changes can be done by JavaScript.
But JavaScript cannot exist alone because it needs something to act upon, without HTML there wouldn't be anything to change in the first place.
What is control-flow and loops?
Usually, code are executed from top to bottom, it's a one way street. This is called control-flow. However, say you're driving your car to a destination, there are many things you're doing along the way and things that happen in that journey. These can be called loops, conditionals and functions in programming.
For example, the action you're doing on the road 'driving your car' would contain multiple specific steps. One loop in programming called `while loop` makes you keep doing a certain task until that condition is no longer true.
while (the light is green) {
I'll keep my foot on the accelerator.
}
Another example may be if/else statement which is part of the conditional statements. As the word represents, conditional statements gives you different result depending on different actions. The road you're driving on will have a whole set of these conditional statements which applies to you when you're driving.
if (the person in front of you == stops) {
let go of my foot from the accelerator and probably break
} else {
keep driving the way you were (maybe you can go faster too)
}
You might take a break along the way which involves a whole different steps/things you do like eating, putting gas in etc. This can be represented via `function` which contains a whole set of activities that can contain loops and conditionals. This function can be run multiple times within your journey and it will include all the tasks.
function takingBreak () {
buy food - involves choosing, paying, eating
take a walk - get out of the car > check the map > walk around
take a selfie - find a view > take camera out > take a photo
}
Even though your goal seems simple, get to the final destination, you're completing multiple sets of tasks within that journey and we can change and control that process using different methods as discussed above.
What is DOM???
DOM stands for (document object model). It is an interface that shows how websites are structured and allows you to change these structures by manipulating these objects.
DOM is the representation of the structure of HTML and CSS in a document form. Since document is presented in objects, JavaScript will be able to read this and perform actions to change things, making the webpage more dynamic and interactive. It also shows the structure and relationship of these different elements and is what allows JavaScript and HTML to communicate and work together.
There are multiple ways to access elements in HTML using the DOM. You can use the `docucment` object to access elements that are contained within that particular document. DOM is often represented in a tree structure (called DOM tree) which is laid out in a hierarchal structure as below.
From Document Object Model (DOM)
When accessing these elements, you can use classes and IDs. For example:
document.getElementsByClassName('CLASS') //access to certain class
document.getElementById('ID') //access to certain ID
document.querySelectorAll('p') //access to ALL p lement
What is the difference between array and objects? How do we access them?
An array is a list of data types like numbers, strings (words), and objects. It looks like the below.
const picnicBasket = ['sandwich', 'juice', 'fruits', 'chips']
You can access the above items by referring to a number called 'index'. This counts the position of where the item above is within the list of objects. Another thing to note here is that the index always starts counting at 0.
pinicBasket[0] // this will output sandwich
An object is a datatype creates with key/value pairs and you can access the set of information by stating one of the item in the pair. For example:
let picnicBasketDetail = {
name: 'sandwich'
type: 'main'
stock: 20
}
You can access the specific property by using a dot notation where you can objectName.keyORvalue or using square bracket notation objectName['keyORvalue']
pinicBasketDetail.type // this will output main
picnicBasketDetail['type'] // this will also output main
Square bracket notation allows you to enter a variable in the square bracket meaning if any key/values change in the original object, this can be easily updated.
var key = 'type'
picnicBasketDetail[key] //this will output main
picnicBasketDetail.key // this will output undefined
This occurs because the dot notation is trying to directly access a property called 'key' in the object and this does not exist.
What is function and how is it useful?
Function is a series of code that allows you to do multiple tasks within and return a value. The biggest reason why function is useful is because they're reusable. Once you setup a function with certain steps to do a specific action, you can call the function again at any point and it will do that whole steps in that function. It is efficient, keeps the code clean and really maximises the capacity of what programming can do.
If you want to use a function, you'll first need to define what the function is going to be called and what it's going to do:
function thisFunction () {
WHAT IT DOES
}
Then, you'll need to actually call the function so that it does what's inside of it. To do this, you simply type out the name of the function at a location where you want the program to run.
thisFunction()