JavaScript Vs. HTML & CSS
HTML represents the content and page structure. CSS styles the content affecting things like positioning, colour, size etc.
Javascript adds Hollywood Effects, bells & whistles like animations, audio, interactive elements, transitions via scripts.
Javascript has a much steeper learning curve than HTML & CSS.
Control Flow
& Loops
Control Flow statements determine the order in which the program processes the code.
When making toast, we would :
- Get bread
- Put bread in toaster
- Remove bread from toaster
- Add spreads
- Eat
Statements like "if...else" are conditional and only actioned when a certain criteria has been met.
So if we don't check the bread for mold we could get food poisoning or else we could check the remaining bread slices to see if they're okay.
Loops maintain repetition until a condition is met.
So, if you happen to have a whole house of guests and you were on toast duty, your job would only be complete when everyone has had enough toast to eat.
Accessing Data Arrays
vs. Object Literals
Data Arrays are a fixed position (0-based index) of ordered elements that sit between square brackets and accessed by calling out a specific element from the array.
Eg. thisArray[4] would call the fifth item from thisArray.
Object Literals stores relative data.
Eg. The object "phone" could have data pertaining to:
- manufacturer
- model
- date of manufacture
- available storage space
- colour
This data is then accessed via dot notation,
Eg.phone.manufacturer
Or by bracket notation,
Eg.phone["available storage space"].
Functions
Functions are a block of code designed to perform a specific task. They contain parameters in curved brackets and the code to be executed in curly brackets.
The major advantage of using functions is that it allows you to define the code once, and then use it as many times it's required - which is not only a timesaver, but adheres to the acronym of DRY - Don't Repeat Yourself.