All about JavaScript – Part II – Logical Concepts and Basics

I hope you have gone through Part – I. If not, please have a look.

What all can JavaScript do ?

JavaScript basically exists for 4 types of Functionalities :-
1) Document Manipulations
2) Normal Business Logic
3) Document Events
4) Asynchronous Tasks

Let us pick each one, one by one :-

1) Document Manipulations

This allows us to modify the Page Elements, as in, We can add, modify or remove WebPage Elements. Let’s see with an example :-

Let us assume we have a ‘div’ element, with an id ‘myElement’, and you want to update the content inside the tag

A simple JavaScript statement to do this would be :-

So, the new ‘div’ looks something like :-

I would be sharing all different ways in which DOM Elements can be modified, in a separate post.

2) Normal Business Logic

This is like any other programming language. You got loops, conditional blocks, methods (functions), variables etc. If you have ever done programming, this is it. There are a few other things to be taken care for JavaScript, some concepts applicable only to JavaScript. These include :-

a) Prototyping
b) Concept of Functions as Objects.
c) JavaScript Object Notation (JSON).
d) The JavaScript Event Loop.
e) Usage of ‘var’, ‘let’, global and local variables, their scope.

Again, separate post for that.

3) Document Events

Because JavaScript was meant for User Interaction, it is supposed to react to User Events. These events include :-
a) Mouse clicks, like ‘Right Click’, ‘Left Click’, ‘Mouse Key Up’, ‘Mouse Key Down’ etc.
b) Keyboard events, like ‘Key Press’, ‘Key Up’, ‘Key Down’, ‘Combination of keys, like Ctrl+C’ etc.
c) Page Scroll Events, that is, when somebody scrolls through the page.

The idea is simple – “Do ‘something’ when ‘this’ event happens”. This ‘something’ can any of the 4 kinds of functionalities defined here.

4) Asynchronous Tasks

A few philosophical one-liners to get started here :-

You will not get what you want, when you want it.
There’s always a time for everything.
Nobody gets anything, before their time.

Same applies in Real World Applications too!

Let us take an example :-

I want to show the RealTime Price, of a stock on the WebPage, say code XYADI. Now, I have an API that takes the code, and returns the price. The problem is, sometimes, it can take up to 30 seconds to respond.

Now, remember, that JavaScript is single-threaded. There is only ever going to be one thread! If JavaScript gave a Blocking implementation for API calls, our pages would freeze from time to time, and User Experience will go down the drain. So, what to do ?

Meet ‘Asynchronous Tasks’, and its driver, ‘Callbacks’. A Callback is just a method, which can be passed between methods, and can be executed when required. For eg:

We can pass this method between methods, as arguments, like below :-

The output is : “Hello World! with Thor”

Note, that ‘myCallback’ has been passed as an argument to myMethod, and inside myMethod, called as someCallback. So, we are simply treating a method like any other variable. And hence, A method in JavaScript, is an object.

Coming back to Asynchronous Tasks, the idea is pretty simple, and very intelligent!

Recall, that JavaScript runs in a single-threaded environment. Means, there is only one thread! And we cannot block this thread for any I/O Operation, i.e., an API call. So, the concept of an Event Loop was implemented.
There is ‘one thread’, which ‘loops’ through this ‘Event Queue’, ‘Popping’ tasks from the queue, and ‘Executing them’. Every code that needs to be executed, has to be added to this queue. So, as soon as an API call is made, and its response received, a ‘Callback’, which knows how to handle this response, is added to the Queue, and gets executed when its turn comes. This means that the callback might not be executed as soon as API response is received, but the overall implementation becomes extremely efficient!

These are the 4 kinds of functionality given by JavaScript, in a nutshell. In future posts, I will get into the Programming Concepts of JavaScript. Stay Tuned!

All about JavaScript – Part I – Logical Concepts and Basics

So, I thought I could, at least, try and make ‘Learning Javascript’ a little easier, by providing my point of view of it. This is first part of the series. And, I will get straight to the concepts.

JavaScript is one of the 3 primary languages, used for front-end development (other two are HTML and CSS).

Why did JavaScript come into existence ?

WebPages are traditionally meant to be interactive to a User. Simply put, a User will submit a Request, or will perform an Action, and the Page will get updated accordingly. The User will again perform an Action, and the Page will be updated again.

Before JavaScript, this ‘update’ happened at the Server. This means, that a User performed an Action, a Request was sent to the Server. The Server would generate another Page accordingly, and send back to the User.

But this had a few fundamental problems :-
1) Every Request was sent to the Server and hence the process was very slow for the User.
2) If a User made a mistake, this meant, he/she had to repeat the whole process again. Not a very good User Experience. Even if the Server handled this, the process, again, was very slow, and sometimes, pretty irritating.
3) Because only Server was capable of ‘changing’ the page, all overhead was at Server-level. So, even if a small part of the whole page needed to be updated, the whole page still needed to be generated by the Server. Hence, not a very Flexible and Scalable Product, and wastage of Server Resources.

So, we created JavaScript.

The idea was simple, move page updates, which really didn’t need Server interaction, or limited update to the page, to be moved to the Browsers. This would mean faster WebPages, and less load on Servers. A win-win for all.

Some important pointers about JavaScript are :-

1) JavaScript is single-threaded
This means, that, there is always going to be a single main thread for executing any JavaScript on page. That has changed after the introduction of Web Workers, but more on that later.

2) Because JavaScript is single threaded, it works using Event Loop and Message Queue
All “Executable Code” is added to the message queue, and gets executed when its turn comes. Again, more on this in later parts.

Let us explore the powers of JavaScript in Part – II.