Andrew's Blog
JavaScript
Upload Date: 19th September 2020
The Browser Trio: HTML, CSS and JS
So far we have discussed two of the three main languages that formulate the modern day web experience. They were HTML (Hyper Text Mark-up Language) and CSS (Cascading Style Sheet. The final of the three the langeuage that is being introduced in this blog is JavaScript (JS).
If the functions of each of those languages for websites were to be described in the simpliest form:
- HTML deals with what you READ.
- CSS deals with what you SEE.
- JavaScript deals with what you DO.
To add further details about Java Script, it is a language that helps the webpage become more interactive for the users. It allows actions/inactions (such as clicks or key-presses) to trigger certain events such as change in website presentation, execution of a calculation or an appearance of a new menu.
Control Flow
Just as we read a book from left to right, from top to bottom, there is a direction and an order in which the browser reads the JavaScript code. This is called the Control Flow. While it seems it should be a straight forward process, after all we just compared it to simply reading a book, the fact that JavaScript is designed to be interactive makes it a little more complicated process.
As a whole, the JavaScript's Control Flow will dictate that the codes should be read line-by-line, from top to bottom. Again, just as if reading a book. However when it comes to functions or number operations, it reads the codes very close to that of a BEDMAS. Meaning it reads what's in the bracket first, then multiplication/division and then addition/subtraction.Quite often, programers will need to maniuplate the direction of the flow. In a situation when a decision needs to be made for one outcome or another, we can use the conditionals such as the if statement. We can use pseudo-code to represent a situation where we can use an if statement, such as when when comming accross a trafic light:
- if (trafic light is red) {
- stopCar;
- } else if (trafic light yellow) {
- slow down;
- } else {
- drive on; }
In other occasions, we may want to repeat something a multiple times until a certain condition is met using a loop. For example, we can use cooking a steak as an example of how a while loop can be applied.
- while (steak == raw) {
- continue cooking;
Document Object Model
Or DOM for short, it is a JavaScript representation of a browser document, namely HTML. The browser creates the DOM so that JavaScript can refer to the HTML and interact with it, without actually changing the content of the HTML itsself.
DOM is represented as what is often called a "DOM tree" (see below). Just as JavaScript can interact with "Objects" and assign properties and values, each of the elements/tags in an HTML document is represented as objects that JavaScript can change or add value to. These objects are modeled into a hierarchical model that reflect the parent-child relationship of different elements in the HTML document.
Document Object Model
We can interact with DOM as if we were to interact with different elements within the DOM using Query Selectors, referencing them via tags, IDs or classes.
Array & Objects
Arrays in JavaScript are varaibles that cotain a list of values, for example, like a list of things to bring to a picnic. For example:
- var picnicList = [
- 'Picnic Basket', //0th index
- 'Water Bottle',//1st index
- 'Blanket',//2nd index
- 'Parasol' ]//3rd index
- 'Blanket',//2nd index
Above example shows the array picnicList with 4 different data elements within the array. Each of those element can be accessed by calling upon their indices. Index for any arrays start with 0, not 1. Which means the first item 'Picnic Basket' will have index of 0, and the second item in the array will have index of 1.
Each of the element can be accessed by naming the array name (e.g. picnicList), followed by the index number in a squared bracket. For example:
- picnicList[0] //will retrieve Picnic Basket
- picnicList[1] //will retrieve Water Bottle
- picnicList[2] //will retrieve Blanket
- picnicList[3] //will retrieve parasol
Objects in JavaScripts are similar to "things". These objects or "things" can have different "characteristics" called properties. For example, an object can be a "car" with properties of blue color, sedan form-factor, make of Honda, model of Civic etc. Each of the object's characteristics consists of key and value. In code, they can be described as follows:
- var car = {
- color: 'Blue',
- formFactor: 'Sedan',
- make: 'Honda',
- model: 'Civic',
- previousOwners: ['John', 'Kate','Samuel', 'Kim']
For objects, each of the properties and it's values can be acessed by the following naming the object name (e.g. Car) followed by a dot and the property key. For example:
- car.color //will retrieve 'Blue'.
- car.formFactor //will retrieve 'Sedan'.
- car.previousOwners //will retrieve ['John', 'Kate','Samuel', 'Kim'].
- car.previousOwners[1] //will retrieve 'Kate'.
Same can be achieved by using the square bracket notations and quotation marks instead of a dot. Eg:
- car['color'] //will retrieve 'Blue'.
- car['previousOwners'][1] //will retrieve 'Kate'.
From the above examples you can also see that you can also nest an array within an Object. Each of the elements in the "Car" objects can also be referenced by using inicies, just as you would on a any normal array.
Functions
Functions are similar to variable, but they hold an "instruction on what to do" rather than a simple data value. For example:
- function barrelRoll (plane) {spin the plane 360 degrees while flight}
- function multiply (a, b) {return a * b}
Variable themselves can hold a function as their value. For example:
- var z = multiply
- var k = function (a) {a*3}
Declaring a function by itself doesn't do anything, just as how declaring variable itself doesn't do anything either. To call a function, you can invoke by naming the function, followed by self closing brackets. For example:
- function sum (a,b) {return a + b} //does nothing by itself.
- sum(1,2) //will return answer to 1 + 2, which is 3'.
Just like variables, functions can store complicated operations and computations, and easily be called upon by its name without having to write down all over again. It allows for easier and cleaner codes with less room for bugs or mistakes.