DEV Community

Cover image for What Are The Uses of JavaScript
Karl Esi
Karl Esi

Posted on

What Are The Uses of JavaScript

JavaScript is one of the core technologies of the web, alongside HTML which is a markup language and is used to structure web page content, and CSS which is used to style that content.

So, JavaScript is what brings life to the front-end or the user interface of a website or a web app. It allows us to make web pages dynamic.

Not only that, but it can also be used on the server-side to do things like interact with databases and work with the files system. This is with the help of the Node.js runtime.

So, JavaScript is a high-level interpreted programming language, used to create interactive and dynamic website experiences.

When I say interpreted, what I mean is that it is executed line by line rather than being compiled into machine code first. So, the code is first executed on the fly making the scripting language, hence the name JavaScript.

I am going to answer the following four commonly asked questions in this introduction.

The questions are:

  1. What is JavaScript?
  2. What can you do with it?
  3. Where does JavaScript code run?
  4. And the difference between JavaScript and ECMAScript?

Before we begin, an announcement. I am accepting new students to join The 2 Hour Web Developer Course. Join before enrollment closes.

So, let's start with the first question.

What is JavaScript

JavaScript is one of the most popular and widely used programming languages in the world right now. It is growing faster than any other programming language and big companies like Netflix, Walmart, and PayPal build entire applications around JavaScript.

And here is the average salary of a JavaScript developer in the United States. That is $72,000 per year according to glassdoor.com.

So, it is a great opportunity to get a good job out of learning JavaScript. You can work as a front-end developer, a back-end developer or a full stack developer who knows both the front end and the back end.

Now the second question.

What can you do with JavaScript

For a long time, JavaScript was only used in browsers to build interactive web pages. Some developers refer to JavaScript as a toy language. But those days are gone because of huge community support and investments by large companies like Facebook and Google.

This days, you can build full-blown web or mobile apps, as well as real time networking applications like chat and video streaming services, command-line tools, or even games. Here is an example:

A JavaScript game

The third question.

Where does JavaScript code run?

JavaScript was designed to run only in browsers so every browsers has what we call a JavaScript engine that can execute JavaScript code.

JavaScript engine that execute JavaScript code

For example, the JavaScript engines in Firefox and Chrome are SpiderMonkey and V8.

In 2009, a very clever engineer called Ryan Dahl took the open-source JavaScript engine in Chrome and embedded it inside a C++ program. He called that program, node.

Node is a C++ program that includes Google's V8 JavaScript engine. Now with this, we can run JavaScript code out of a browser. So, we can pass our JavaScript code to node for execution. This means, with JavaScript, we can build the backend for our web and mobile applications.

So, in a nutshell, JavaScript code can be run inside of a browser, or in node. Browsers and node provide a runtime environment for our JavaScript code.

Finally, the last question.

What is the difference between JavaScript and ECMAScript

Difference between ECMAScript and JavaScript

Well, ECMAScript is just a specification. JavaScript is a programming language that conforms to this specification. So, we have this organization called ECMA which is responsible for defining standards. They take care of this ECMAScript specification.

The first version of ECMAScript was released in 1997. Then starting from 2015, ECMA has been working on annual releases of a new specification.

So, in 2015, they released ES2015/2016 which is also called ECMA Script version 6 or ES6 for short.

This specification defined many new features for JavaScript.

Alright! Enough theory, let's see JavaScript in action.

So, every browser has a JavaScript engine and we can easily write JavaScript code here without any additional tools. Of course, this is not how we build real-world applications, but this is just for a quick demo.

So, open up Chrome, right click on an empty area, and go to inspect.

Chrome home page right clicking

Now, this opens up Chrome Developer Tools.

Elements tab on Chrome

Here, select the Console tab,

Console tab on Chrome

This is our JavaScript console and we can write any valid JavaScript code here.

So, type this:

console.log('Hello World');
Enter fullscreen mode Exit fullscreen mode

Now, as we go through out the course, you are going to understand exactly what all this means. For now, don't worry about it.

Console.log on Google Chrome Homepage

So now, press ENTER and you can see the Hello World message on the console.

Hello World on Google Chrome Console

We can also write mathematical expressions here. For example,

2+2
4
Enter fullscreen mode Exit fullscreen mode

Mathematical expressions on Console

Or, we can do something like this

alert('yo')
Enter fullscreen mode Exit fullscreen mode

Alert shown on Google Chrome page

You press ENTER, and you get an alert

An alert when you press Enter on Google Chrome page

In the next section, I am going to talk about how to set up your environment for writing JavaScript code.

Setting Up the Environment for Writing JavaScript code

In order to write JavaScript code, you need a code editor. There are various code editors out there, including:

  • Visual Studio Code(VS Code)
  • Sublime Text
  • Atom and so on.

Out of this, my favorite is Visual Studio Code, that you can download from code.visualstudio.com.

The URL of Visual Studio

It is a very simple, light-weight, cross-platform, and powerful editor.

So, if you don't have Visual Studio Code on your machine, go ahead and download it.

The other thing I want you to install is Node.

The URL of Node on Google Chrome

You can download node from nodejs.org

Now, technically, you don't need Node to execute JavaScript. Because, as I explained before, you can execute JavaScript code, inside of a browser, or in Node. But, it is good to have Node on your machine, because we use that to install third-party libraries.

Also, later in this section, I am going to show you a preview of Node.

So, stop reading now and install Visual Studio as well as Node. Once you are done, come back and continue reading.

Now, I want you to create a new folder. Call the folder js-basics

JS Basics folder on the Computer

The name really doesn't matter. We just want to have a folder, for writing all the code in this course. Now, drag and drop this folder into Visual Studio Code.

Visual Studio Code Welcome Page

Now, we have this folder open. Let's add a new file here, index.html

Added the index.html folder on Visual Studio Code

You don't really need to know HTML in order to take this course, but if you want to be a Frontend developer, you should know your HTML well.

Now, in this file, I need you to type an ! exclamation and then press TAB.

Typing an exclamation mark on Visual Studio Code

This generates some basic HTML boiler plate.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-   scale=1.0">
        <title>Document</title>
    </head>
    <body>

    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The code on Visual Studio Code

We don't really care about any of this code here. We are going to use this as a host for our JavaScript code.

We are going to see that in the next lecture.

So, save the changes, open the extensions tab, here.

The extensions tab on Visual Studio Code

Here on this box, search for live server.

Searching live server on Visual Studio Code

So, live server, is a very light-weight web server that we are going to use to serve our web application.

So, install this, then we are going to restart our Visual Studio Code.

When you are done, go to the explorer tab, right click index.html, and select open with Live Server

Right clicking index.html and selecting open with Live Server on Visual Studio Code

This will open up Chrome, or your default browser, and point it to this address, 127.0.0.1:5500/index.html

The address on Google Chrome

That is where, our web application is served from.

Currently, we have an empty page. Now, to make sure that everything is working properly, let's go back to Visual Studio Code.

Here in the body section, let's add an <h1>

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-   scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The Hello World Heading One on VS Code

Now, save the changes. Back in the browser, we can see this page is refreshed automatically, and we have the Hello World heading here.

Hello World on Google Chrome page

Happy Coding!
Karl

Top comments (2)

Collapse
 
wearypossum4770 profile image
Stephen Smith

This article is well written. Good job.

Collapse
 
thekarlesi profile image
Karl Esi

Thank you.