Matthew J. O'Brien - Blog

Javascript Fundamentals


20 September 2022

JS, HTML & CSS:

Imagine that you wanted a new car, but you wanted a special car, a one off all of your own design. What might you need to do to get what you want? Well you'd need a team of planners, designers and builders to get the job done. In a similar way you need a team to build web programs, a team of coding languages, which work together to give you what you want.

Blueprints

HTML is the planning phase, the components needed, the structure, the blueprints

Mechanic

CSS is the design phase of the project, design of components, styling the interior and exterior, choosing the colours.

Car

JS is the working model, starting the engine, putting the car in gear, putting your foot on the accelerator, going 0-100 in 3.0s flat. It's dynamic and interactive. The working model and the user experience.



Flow & Loops:

When you accalerate you move through the gears in sequential order in a similar way to how a computer runs code from top to bottom. This is control flow. The computer runs the code from the first to the last line of code in the execution flow of of the program.

Gears

Within control flow many tasks are performed. Loops are one type of such task. A loop repeats actions one or any number of times as required depending upon the provided conditions. Different mechanisms determine the start and end points. When accalerating we start at first gear, move through second, third, fourth, fifth, sixth. Then our loop ends until the loop is called on again. There are many types of loops, but for now we are going to concentrate on only the "for" loop


Loop

The DOM:

When building a car there is a head honcho who runs the show, this is DOM. The Document Object Model (DOM) is the overarching document that combines everything together and allows program languages to interact. The DOM is like a family tree with the DOM at the head of the family and all its relations beneath it. The DOM provides JS, HTML & CSS a place to come together and interact.


Boss Family-tree

Objects & Arrays:

Objects can be used to store a collection of data rather than a single value or be anything that can be defined by a set of charatcteristics. A car is an object with many characteristics e.g. doors, pedals, paintjob etc. In objects characteristics are known as properties, which consist of keys and values.

Objects

Arrays can be used to store a list of values and are especially useful when wanting to create oredered lists where items can be accessed by their numerical position in a list. Arrays use zero indexing, which means the first item in an array starts at zero, the second item is 1, the third 2 and so on. Both objects and arrays are whats called mutable, which means their values can be changed.


Arrays

Functions:

Functions allow you to define a block of code, name it and execute it as many times as required to get the desired result. A function can contain one or many parameters, which can be of any data type.

Functions