What Are The Uses of JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2024-05-27 02:17:00

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](https://karlgusta.gumroad.com/l/eofdr/680bkf4). 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4dkl4vdn9jsb01ss0ps.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xba86l7cy438mj5nem8t.png 'JavaScript engineer 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcxnhpxz3sghwud5mzra.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zavlertaxdnfkhoombcn.png 'Chrome home page right clicking')

Now, this opens up Chrome Developer Tools.

![Elements tab on Chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kedej2v0l3wsa4a9qdnr.png 'Elements tab on Chrome')

Here, select the Console tab, 

![Console tab on Chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn99xt3lxlb5wz2xg6f4.png 'Console tab on Chrome')

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

So, type this:

```javascript
console.log('Hello World');
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qksv2j1e20vejw7ieafh.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lohgv3ci7pv8poa3bmpu.png 'Hello World on Google Chrome Console')

We can also write mathematical expressions here. For example, 

```js
2+2
4
```

![Mathematical expressions on Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe5caxh9n1hmat2rrddh.png 'Mathematical expressions on Console')


Or, we can do something like this

```js
alert('yo')
```

![Alert shown on Google Chrome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2519adpanrkl6w3kun43.png 'Alert shown on Google Chrome page')


You press ENTER, and you get an alert

![An alert when you press Enter on Google Chrome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05pn7uek8qetqac2ynhl.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynmljqknz38bb2r1ye1s.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ldwrluougd8mqgkolym.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9n7ifie0hctj6j9otxk.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uweeb42mgduxkvq47564.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf8s8qv497ryaygvkk1b.png 'Added the index.html 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra99qhv800u65m5s7g9g.png 'Typing an exclamation mark on Visual Studio Code')

This generates some basic HTML boiler plate.

```html
<!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>
```

![The code on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohhuwbw6vxsgx58uw269.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbn30ncwwd3l7lmsvn79.png 'The extensions tab on Visual Studio Code')

Here on this box, search for `live server`.

![Searching live server on Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e4hnxyl8x0ojx6u5ph9.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3lyma2wiye5q7342r5t.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sueq957g4pmqndnzidzo.png '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>`

```html
<!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>
```

![The Hello World Heading One on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgrvupfszjippskxgnek.png '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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8976s3dvd32640u42ny.png 'Hello World on Google Chrome page')

Happy Coding!
Karl