Javascript Fundamentals

The Almighty 3: HTML, CSS & Javascript.

Websites are made up of these 3 components and are referred to as a “Functional Web Interface”.

Back in the day before HTML5 you would have your basic website that only consisted of HTML and CSS. It had context and style, nothing fancy; no animations and no functionality to control the behaviors of the elements. Not until 1995 when Brendan Eich created Javascript in 1995. Fast forward to the present day, all websites consist of the "Almighty 3" because together they create a visual interactive website.

Analogy: A Building

• HTML (Structural)
  The structure of the building itself. It lays out the foundation, builds out the frame and gives us the layout where certain elements and bits will go.


• CSS (Presentational)
  The interior and exterior decoration of the building, the colors, patterns, materials are all styled by CSS.


• Javascript (Behavioral)
  The workings/ functions of the building i.e electricals

Control Flow & Loops

Control flow is the order in which it completes tasks, from top to bottom like a recipe. You would always add the ingredients in from top to bottom just like the instructions. This only changes what the control flow does when it hits a statement (e.g. a function) that changes it. Looping elements is a time saver - it would come into play when you have to complete a repititive task.

The DOM

DOM means Document Object Model and it defines the hierarchical structure of documents and the way a document is accessed and manipulated. It is a programming interface that allows us to create, change, or remove HTML elements from the document. We can also add events to these elements to make our page more dynamic.

To view the “DOM” we can either command + shift + i or right click on the page or line we are wanting to view and click “inspect”. Here we can see the “almighty 3” and not only can we interact/manipulate the elements we can also use this to view bugs that may come up.

Arrays & Objects

• Arrays are a list of data that are stored within a variable name and in sequence. The list is presented in square brackets and holds text or numbers i.e [‘banana’] or [‘23’]. You can have as many items in your array/list. Always remember that we count the first item as 0, second 1, third 2


• Objects are also stored inside a variable and are a list of data that stores values but uses curly brackets {} and consists of “Key & Values” .
  They will be written as name: "DarthVader" , realName: "Anakin Skywalker".
  To access them you would need to use the dot notation. So if the object name is superHero and I have the name stored inside the object. I would access this by: name.realName. The return would be "Anakin Skywalker".

Functions

A function is used to define a block of code that will perform an action. A function takes an input and produces an output. A function can be called to be actioned over and over again.