JS Fundamental

What you need to know about Javascript

If you are not in the tech world, you might have heard of the term “programming language”. So, what exactly is a programming language?

A programming language is a system of notation for writing computer programs. Most programming languages are text-based formal languages, but they may also be graphical. They are a kind of computer language. - Wikipedia

Javascript is one of the programming languages that allows you to implement complex features on web pages. Unlike Java, an object-based programming language that has the ability to run on a virtual machine and therefore can be run on any devices, Javascript is an object-oriented programming language that is more commonly used in web applications like browsers. That said, Javascript needs an interpreter to run and has to be embedded in the HTML of a web browser. It is a complementary language, which means you also need to know and understand HTML and CSS and how these work together with Javascript.

Think about a human, Javascript can be analogized as the brain, HTML as the body and CSS as clothing. While HTML provides the foundation, and content structure to a web page, CSS controls the styling and appearance of how these elements in the HTML should look, Javascript makes the page more alive and interactive by adding logics, interactivity and functionality to it. And just as a brain, Javascript interacts with HTML and CSS. It can change the HTML structure, or apply CSS styles dynamically, create animations, forms, etc based on user’s input or other events. The three layers build on top of one another nicely. Together, they form a powerful trio that enables the creation of dynamic and engaging web experiences.

Now lets talk about control flow and loops.

The control flow is the order in which the computer executes statements in a script. Code is run in order from the first line in the file to the last line, unless the computer runs across the (extremely frequent) structures that change the control flow, such as conditionals and loops. A loop is a sequence of instructions that is repeated until a certain condition is met.

Let say you have a fixed timetable which you follow everyday. This lists all the tasks you do since you wake up until you go to bed. The control flow is the order in which you do these tasks in your timetable. In these tasks, there might be one that you will have to repeatedly do a sequences of smaller tasks until a certain condition is met. For example, when you cook dinner, you will need to cut vegetables, boil them, and then cut meat, fry them, and then again cut your fruit for dessert, etc until your meal is ready. This is an example of a loop. Until your dinner is ready, your cooking is not finished. You will need to repeat cutting, boiling (frying), plating, again and again.

Now lets look at an example of a for loop in action. Say you have an array variable names[] with 10 people’s name, and you want to log these onto the console. You could do it as below:

console.log(names[0]); console.log(names[1]); ... console.log(names[9]);

This is where loops come in handy. Instead of logging them out one by one manually, you could write this instead:

for(let i = 0; i < names.length; i++){ console.log(names[i]); }

Next, lets talk about DOM.

The Document Object Model, generally abbreviated to DOM, is the way through which JavaScript interacts with content within a website. Consider this HTML code:

<body> <h1> Javascript Café </h1> <div class="container"> <p id="whiteCoffee"></p> <p>Some more text here!</p> </div> <script src="cafe.js"></script> </body>

To interact with the above HTML, inside the file cafe.js, we can write Javascript code to manipulate the DOM. For example this line of code

document.getElementById('whiteCoffee').innerHTML = 'White Coffee: ' + products.whiteCoffee.stock

will change the innerHTML (in this case just text) of whiteCoffe to “White Coffee: 5” (whiteCoffee.stock = 5). We can also change the class of an element, add/remove, log something out onto the console, even define and perform function depends on user input with Javascript.

In the previous example, we console.log the value of each elements in array names[]. So what exactly is an array?

An array is an ordered collection of values of any datatype, where each values is assigned a numeric index, start with 0 (e.g: first element is names[0] not names[1].

An object, on the other hand, is an unordered collection of key-value pairs, where each value is associated with a unique key.

Array

Accessing elements: You can access array elements using their numeric index enclosed in square brackets ([]).
Iteration: Arrays are iterable, allowing you to loop through their elements using loops like for or array iteration methods like forEach, map, filter, etc.

Object

Accessing properties: You can access object properties using dot notation (objectName.propertyName) or square bracket notation (objectName['propertyName']). Dynamic property access: With objects, you can also access properties dynamically using a variable as the property name within square brackets.
Iteration: Objects are not directly iterable using traditional looping constructs like for or array iteration methods. However, you can iterate over an object's keys or values using Object.keys(objectName), Object.values(objectName), or Object.entries(objectName) and then apply a loop or iteration method to the resulting array.

We talked about how we could use Javascript to manipulate the DOM, including define and perform functions.

So, what are functions?

Functions are one of the fundamental building blocks in Javascript. A function is a block of reusable code that performs a specific task or calculate a value. For a procedure/set of statements to qualify as a function, it should take some input and return some output after performing the tasks defined inside the block. For example, the following code defines a function name plusTwo:

function plusTwo(num1,num2){ return num1+num2; }

The function takes 2 parameters called num1 and num2, then return the specific value (num1+num2). So, why are they so important? Well, functions can be helpful in many ways when it comes to programming, as they enable programmers to break down or decompose a problem into smaller chunks, each of which performs a particular task.

Code reusability: Instead of writing the same code repeatedly, you can encapsulate it in a function and call the function whenever needed. This promotes modularity, efficiency, and maintainability of your code.
Abstraction: Once a function is created, the details of how it works can almost be forgotten about. In this way the detail is abstracted, allowing the programmer to focus on the bigger picture. By calling a function with specific inputs and receiving an output, you can work with the result without needing to know the intricate details of how the function accomplishes its task.
Event Handling: JavaScript functions are commonly used to handle events in web development. By associating a function with an event listener, you can specify the code to be executed when a particular event occurs, such as a button click, form submission, or keyboard interaction.
Readability: a clean set of code goes a long way in making it easy to maintain and follow.

And the list goes on. There are so many more reason on how functions are vital for programming. Overall, without functions, programs would have loads of duplicate code, wouldn't flow in a logical order, and would have no separation of utility. That would be a nightmare for managing, testing, and debugging.