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:
What is JavaScript?
What can you do with it?
Where does JavaScript code run?
And the difference between JavaScript and ECMAScript?
Before we begin, an announcement. I am accepting new students to get The Complete HTML, CSS, and JavaScript eBook (Zero to Mastery). Get the remaining 10 copies available.
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:
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.
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
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.
Now, this opens up Chrome Developer Tools.
Here, select the Console tab,
This is our JavaScript console and we can write any valid JavaScript code here.
So, type this:
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.
So now, press ENTER and you can see the Hello World message on the console.
We can also write mathematical expressions here. For example,
4
Or, we can do something like this
You press ENTER, and you get an alert
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.
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.
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
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.
Now, we have this folder open. Let’s add a new file here, index.html
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.
This generates some basic HTML boiler plate.
<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>
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.
Here on this box, search for live server.
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
This will open up Chrome, or your default browser, and point it to this address, 127.0.0.1:5500/index.html
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 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>
Now, save the changes. Back in the browser, we can see this page is refreshed automatically, and we have the Hello World heading here.
Happy Coding!
Karl
