Rav learns to code

JavaScript - understanding its relationship with CSS and HTML

If you were to draw a comparison between how a website is built with how a physical house is built, then:

HTML would represent the fundamental structural design of the house that determines the layout of that house - this includes the number of rooms, the different types of rooms (such as the entrance, kitchen, lounge, bathroom, etc.) and the content of those rooms.

CSS is concerned with aesthetic of the building and its visual appearance of , this could be the paint, wallpaper or lighting.

JavaScript is what makes a website dynamic and, for the purpose of this analogy, a house genuinely liveable - it's the plumbing required for the water, it's the wiring that's required for electricity, and the switches that allow you turn that electricity on and off.

Control flow and loops, arrays, and objects

Control flow refers to the sequence in which a computer will execute the code in a JavaScript file. By default, the computer will begin at the top and works its way down to the last line at the end. JavaScript files can have loops or conditional statements that can affect the control flow.

Loops are a syntactical option in JavaScript that offer an efficient way of writing out tasks that need to be executed a number of times. The logic of the code requires that an action be undertaken either for a certain specified number of times or until a condition is met. When a computer encounters the loop code in a JavaScript file, this alters the control flow by causing the computer to 'loop through' that code until the specified conditions have been met.

Objects are the fundamental building block of JavaScript and are containers for named values that are referred to as "properties".

Arrays in JavaScript is a type of object that can store multiple items under a single variable name. Arrays are zero-indexed, with each value in the array being assigned a value, beginning with zero and increasing increments of 1, enabling each value to be easily and logically identified.

The Document Object Model (DOM)

Diagram: How the DOM sees an HTML document as an object

The Document Object Model (DOM), as the name suggests, is a method for representing the data in a document as an object, effectively enabling it to be manipulated by a programming interface. In the example of a basic website, the static data that is contained in both the HTML and/or CSS files can be interpreted as an object by a language (such as JavaScript) that can then manipulate that object to make changes to the original, static data, effectively rendering it (the website/data) dynamic.

Functions

Functions in JavaScript are blocks of code that take an input value and, once the function has been 'called', will execute the task and return/calculate the output. Functions are effectively a set of instructions that serve to execute a particular task or to calculate a value. The output of a function can be a string, an array, a value, an object, even a function. Functions are particularly helpful when writing code as they allow the programmer the ability to use the computational logic of the function "subprogram" to intelligently execute tasks that are repeated (as opposed to having to manually input or hard code all the different instances of which the same executable task/calculation is performed on different specific variables/inputs).