If there’s a statistic that sheds light on the impact and importance of JavaScript in web development, it’s that [98.3% of all websites employ it as a client-side programming language](https://blog.gitnux.com/javascript-statistics/).

\
With such a high rate of adoption, JavaScript as a programming language is here to stay. This should be clear enough. In fact, we can safely conclude that for this reason, [72% of all organizations look for JavaScript developers](https://blog.gitnux.com/programming-languages-statistics/) to meet such demand.

\
 ![Between the HTML script tags... ](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-7vl3s4a.jpeg)

\
But what does JavaScript do?

\
Before we decipher this, let’s distinguish between static and dynamic web pages, that has led to the rise of JavaScript in the first place.

# Static vs. Dynamic Web Pages

We live in the age of the ‘social Web’, where user-generated content and interactivity holds sway. Unlike Web1, which involved reading static pages of content but didn’t allow much interaction, Web2 provides output based on specific user input.

\
For example, look at the default web page for the Fedora distribution. Is any interactivity possible?

\
 ![](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-4s91ps9.jpeg)

\
Clearly not. It contains mostly read-only information that will be the same, no matter who accesses this page.

\
In fact, no matter how many times you load <https://getfedora.org/en/>, you’ll find that the image and the content remains the same on the page.

\
In stark contrast, a dynamic web page generates unique content for every user, with YouTube being an excellent example in this respect. As you might already know, YouTube remembers all your prior searches and the videos that you viewed.

\
Based on this, every YouTube user finds a personalized set of recommended videos as soon as this web application is opened for use.

\
 ![](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-g0a1pzv.jpeg)

\
Simply put, whenever a user loads the hyperlink <https://www.youtube.com/>, they see a whole list of videos in the common YouTube layout that has been curated specifically for their needs.

\
Now, if you can spot the difference between the two, this is due to the difference that JavaScript makes, as it is responsible for modifying web page behavior in conjunction with HTML and CSS.

# JavaScript: The Third Building Block of the World Wide Web

As mentioned in the previous blog post, there are three building blocks that make up the World Wide Web, where HTML and CSS make up the first two.

\
JavaScript, known to control the behavior of web pages and handle user interactivity, is the third technology that completes this trio that has been used to build the World Wide Web.

\
Since this language is used for mobile and web applications as well as game development, it has become very popular and which can be evidenced by a thriving developer community and several thousands APIs available for use.

\
 ![How does an API work?](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-pgk3s0l.png)

\
When it comes to the characteristics of a programming language, JavaScript is a dynamically and weakly typed language that can be added in a HTML document between the <script> insert js code here <script/> tags. Of course, you can add the JS code directly between these tags. Or even put your code in a .js file and add that filename between the script tags too.

\
Let’s look at a simple example of JavaScript functionality that is interactive in nature:

\
 ![From Static to Dynamic Pages using JavaScript](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-3ie1p5i.jpeg)

\
If you add this code to a html file and view it in any browser, you should find that a button labeled “Click here” is displayed, as shown below:

\
 ![Interactivity using the onclick event in JavaScript](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-qjc1p5d.jpeg)

\
Upon doing so, an alert box that reads “Success” loads after 2 seconds. Here’s the output:

\
 ![Alert Box displaying "Success"](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-2cd1p7o.jpeg)

\
As simple as this example is, you wouldn’t be able to do such things using only HTML and CSS since these two technologies help with building static pages. This is exactly how JavaScript makes a difference.

\
Now, if you’re interested in learning more about JavaScript, what basic topics do you cover, in terms of syntax? Let’s find out, shall we?

# Learning JavaScript: 7 Core Concepts to Consider

Before we begin, while JavaScript and Java might not seem different, both these languages are and have been designed for very different purposes. Please do not confuse between the two.

\
Now, for this section, we look at 7 core concepts of JavaScript that beginners should learn:

## #1: Variables & Data Types

Since variables are the simplest way to hold and change state, let’s begin with how to declare and initialize variables in JavaScript. Both the ‘let’ and ‘var’ keywords help you with this, as shown below:

\
 ![x and y are variables of integer data type ](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-r693se6.jpeg)

\
Upon obtaining the output in the console, we should get 4. Of course, the variable x and y can hold strings and floating point numbers along with integers. Other data types include BigInts, boolean, null and objects too.

## #2: Control Flow

There are four types of control flow namely selection, iteration, procedural abstraction and recursion.

\
Among the four, selection is the simplest and which is implemented using an if-else statement, as shown below:

\
 ![if-else statement to decide if y is of bool type true or not](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-qja3ss2.jpeg)

\
As you can tell, the output of this JavaScript code snippet will be the statement enclosed in the “if” statement, as shown below:

\
 ![Output of JavaScript if-else statement](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-3ob3soa.jpeg)

\
You can learn more about iteration, procedure abstraction and recursion by examining for and while loops, function calls and recursive functions in JavaScript.

## #3: Functions

By definition, a function is written so that it performs one task and is reusable by making simple function calls, much like the last statement in the code snippet below:

\
 ![Simple function in JavaScript](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-s9c3sri.jpeg)

\
As you can see, the console output displays the following message:

\
 ![Function output in console](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-gxd3s2b.jpeg)

\
You can call this function as many times as you want, if you want that message displayed. This would not be possible if the code for this task wasn’t enclosed within a function.

\
## #4: Arrays

Data structures such as arrays come in handy when you have several variables to declare and initialize. Let’s say you had to search for a particular name from 250 university graduate students.

\
So, instead of using 250 variables for all names, you could add all names to an array that serves much like a list, as shown below:

\
 ![JavaScript array](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-l3e3sx7.jpeg)

\
You can access each of the names using indices but that’s a discussion for another day.

## #5: Objects

If variables contain a single data point, arrays can hold several. On the other hand, objects can hold a set of data points that have a semantic relation with each other. As shown below, the student object contains data belonging to both student name and course that make sense in the real world.

\
 ![JavaScript student object](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-vmf3swf.jpeg)

\
In other programming languages, we refer to a JavaScript object as a hashmap or dictionary, where this data structure consists of a key-value pair.

## #6: Error Handling

No matter how good you are as a programmer, making mistakes is part and parcel of development. This holds true for code in JavaScript just as it is in other languages too. So, in order to deal with such instances, using a try-catch block of code should do the trick.

\
 ![Using the try-catch code blocks for error handling](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-clg3s0s.jpeg)

\
Without the try-catch error handling construct, we would not be able to locate this Reference Error, which occurs when an incorrect reference to y has taken place.

## #7: Asynchronous Programming

By definition, asynchronous programming involves the concurrent execution of functions rather than in the sequential manner in which code is executed.

\
 ![Both the setTimeout and console.log operating are occurring asynchronously...](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-11h3s5z.jpeg)

\
As you can see from the output below, the second console.log command is executed while the setTimeout function is running. After this, we get the output from the displayTimeOutMsg function.

\
 ![Output from asynchronous programming](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-khi3stk.jpeg)

\
What we can gather from such an example is that while the displayTimeOutMsg function is running, the second console.log command is also executed in parallel. If execution was sequential, then the displayTimeOutMsg output would have appeared before the output of the second console.log command.

## A Note on Frontend JavaScript Frameworks

Nothing in front-end development would be the same without the JavaScript frameworks that remain popular among developers. Some of these options include React, Vue and Angular while others such as Svelte and Ember are used.

\
 ![Popular JavaScript frameworks](https://cdn.hackernoon.com/images/kw3QJxcqVgfN1ahfqsw2FRBwNcD3-7vj3sj3.png)

\
Not only is it faster to build UI elements using pre-written templates and scripts but they are easier to edit, test and update. With reliable code structure and a massive number of features available to developers on these frameworks, starting a web development project from scratch is a thing of the past.

## ***📌*** How will learning JavaScript help with Web3 development?

Even if web2 and web3 development differ in many aspects, there’s one where the tools and frameworks used are almost the same. We’re talking about front-end development that deals with web page user interfaces. In other words, what the user sees and works with.

\
Speaking of which, learning how to use HTML and CSS in conjunction with JavaScript should make these pages dynamic and interactive. In other words, making the user experience just as rich and engaging in web3 as it has been in web2 for years now.

\
That said, we’re building a developer-centric metaverse for you to learn, earn and get hired.

\
## **Sign up to join the Lumos Metaverse Whitelist for exclusive access:**

[https://forms.lumoslabs.co/whitelist?embedable=true](https://forms.lumoslabs.co/whitelist?embedable=true)

\


The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Come join the Lumos Metaverse Web3 Developer Whitelist!

Read My Stories

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

Master JavaScript: A Beginner’s Guide to Building Dynamic, Interactive Web Pages

Too Long; Didn't Read

People Mentioned

@dansierrasam79

Credibility

RELATED STORIES