An analogy could be a building: HTML is the structure or layout of the building. CSS is the design of the building. And JavaScript is the functionality of the building.
A house...
References
freecodecamp.org | The relationship between HTML, CSS and JavaScript explained by building a city
Control flow is the order which the computer executes statements.
Code is run in order from the first line in the file to the last line, unless the computer runs across structures that change the control flow, such as conditionals, loops and functions.
An example from everyday life...Getting to the office downtown via public transport.
Steps 1-6 would be a
- Lock up and leave home.
- Walk to the bus stop.
[conditional]
Check if the bus to downtown is running.
If bus is running, wait and board the downtown bus to work.
If bus is cancelled, wait and board an alternative bus to the local train station. Once at the train station, take the downtown train.- When on the bus or train, put on headphones and listen to music.
[loop]
The morning commute playlist is pretty small. Repeat music playlist until we get off the bus or train at downtown.- Walk to the office, open the door and get ready to work.
[function]
and it gets repeated every morning if it's a weekday.
We would have a different[function]
if it's the weekend.
References
medium.com | Control Flow in JavaScript
mozilla.org | Control Flow
The DOM is an interface that allows you to link HTML and CSS with Javascript.
JavaScript
document.getElementById('cats')
References
ionos.com | Document Object Model (DOM): definition, structure and example
An array is a list of ordered data. An object represents “things” with characteristics.
Arrays[]
.JavaScript
// Basic array syntax
let array = ['0', '1', '2', '3'];
JavaScript
// Example 'dessert list' array
let dessertList = ['Creme Brulee', 'Panna Cotta', 'Chocolate Mud Cake', 'Banoffee'];
Objects
key
and a value.
.
or square brackets []
.JavaScript
// Basic object syntax
let object = {
key: 'value'
};
JavaScript
// Example 'animal' object
let animal = {
species: 'Tūī',
legs: 2,
vertebrate: true
};
References
medium.com | Objects vs. Arrays
A JavaScript function is a block of code designed to perform a particular task.
When developing an application, you often need to perform the same action in many places. To avoid repeating the same code over again, a function can be used to wrap that code so it can be reused. So functions are helpful to structure code into smaller, reusable units.
References
javascripttutorial.net | JavaScript Functions
w3schools.com | JavaScript Functions