Skip to main content

JavaScript for Everyone

There are 4 main questions when you first start learning JavaScript.

  1. What is JavaScript?
  2. What you can do with JavaScript?
  3. Where does JavaScript code run?
  4. What’s the difference between JavaScript & ECMAScript?

Let’s answer these questions one by one.

First, what is JavaScript?

What is JavaScript?

JavaScript is one of the popular programming languages. Traditionally, it was used only to build user interactivity in the browser. Now, these days it can run almost anywhere, not just browsers.

You can build browser, mobile, desktop, and server apps with JavaScript. World’s well-known companies like Netflix, Walmart, etc. are building their applications around JavaScript.

As JavaScript can run almost anywhere, if you know JavaScript, you can work as a frontend, backend, or full-stack developer.

Now let’s learn what you can do with JavaScript.

What can you do with JavaScript?

JavaScript, often regarded as the Swiss army knife of web development, offers many possibilities beyond just website interactivity.

One interesting use case is creating browser extensions that enhance user experience by adding custom functionality to popular browsers like Chrome and Firefox. This opens up endless possibilities for developers to tailor their browsing experience to their needs.

Furthermore, JavaScript can be leveraged to build dynamic and interactive data visualizations that bring complex datasets to life more intuitively and engagingly. With libraries such as D3.js and Chart.js, developers can create visually stunning charts, graphs, and dashboards that not only present information in a digestible format but also allow users to interact with the data in meaningful ways.

In addition to these applications, JavaScript can also be used for creating mobile apps through frameworks like React Native or Ionic. Also, you can build command line tools, games, networking apps, and much more.

By utilizing this versatile language, developers can extend their skills beyond web development and dive into the world of mobile app development, reaching a wider audience across different platforms.

Now, let’s learn where JavaScript code runs.

Where does JavaScript code run?

The versatility of JavaScript lies in its ability to run on multiple platforms. When a user visits a website, the browser acts as an interpreter for the JavaScript code, executing it directly on the client side. This way you can make your web pages interactive and can perform real-time actions based on user interaction such as a button click.

Moreover, with the rise of server-side JavaScript frameworks like Node.js, JavaScript can also be executed on servers. This enables developers to write full-stack applications using only one programming language, streamlining the development process and making it easier to share code between the client and server sides.

In essence, JavaScript code runs wherever there is an environment that can interpret and execute it – whether it’s in a web browser, server, or even mobile applications through platforms like React Native.

In short, these days you can run JavaScript anywhere!

Now, let’s learn the difference between JavaScript and ECMAScript.

What’s the difference between JavaScript and ECMAScript?

JavaScript and ECMAScript are often used interchangeably, but there are subtle differences between the two.

While JavaScript refers to the high-level programming language. ECMAScript is a standard specification for scripting languages.

In essence, JavaScript is an implementation of the ECMAScript standard.

One key distinction is that ECMAScript lays out rules and guidelines that programming languages like JavaScript must follow to be considered compliant. This allows different implementations of ECMAScript (such as JavaScript in browsers or Node.js on servers) to maintain consistency in their functionality.

Understanding this difference can help developers ensure cross-compatibility across various platforms and environments when working with JavaScript frameworks or libraries.

Alright! now that you are familiar with JavaScript, it’s time to set up a development environment to write and run JavaScript.

How to set up a JavaScript development environment?

To start, install Node.js, a popular runtime that allows you to run JavaScript on the server side. You can download and install Node.js here. Install the latest stable version for this course.

Next, choose a code editor that suits your preferences such as Visual Studio Code or Sublime Text. These editors offer features like syntax highlighting and auto-completion that can enhance your coding experience. In this course, we’ll be using VS Code as it’s a lightweight, free, and cross-platform code editor.

Now, let’s create a folder anywhere and name it anything. For example, I have created a folder named js-for-beginners at this location C:\Samples\js-for-beginners

Open this folder in VS Code and create an index.html file in it.

Add this boilerplate code to your index.html file.

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

Tip: Type the exclamation symbol (!) in VS Code and press the tab to add this boilerplate code.

This code will act as the host of our website code. This is where we’ll plug our JS code in and execute it inside the browser. Later in this course, you’ll see how to run JS code inside the Node.js environment.

Now, install go to the Extensions tab in VS Code and install the Live Server extension as shown in the image below.

Once you have installed the Live Server extension, right-click on the index.html file and select the “Open with Live Server” option. This will open the index.html file in your default browser.

The Live Server apply the changes to your website as soon as you save the page, therefore, it provides a better development experience.

Now that your development environment is ready, let’s start writing some code.

Executing JavaScript in Browser.

In this course, we’ll be executing JS code inside the browser environment. JS code that executes in browser lives in HTML files.

In our case, we’ll host our JS code inside the index.html file.

Now, there are 2 places inside the page where JS code can live.

  1. Inside the Head tag of the page.
  2. Just before the closing Body tag.

Let’s figure out what’s the difference.

Placing JavaScript code inside the head tag versus the body tag can have a significant impact on how your website functions.

When JavaScript is placed inside the head tag, it is loaded first before any content on the page. This can lead to rendering delays if the script is large or takes a long time to execute and hence makes a bad user experience.

On the other hand, placing JavaScript code inside the body tag allows for a faster initial page load time as all HTML content will be rendered first before executing any scripts. This can provide a better user experience as users will see content displayed on their screens more quickly.

Additionally, putting JavaScript at the end of the body tag ensures that it does not block other elements from loading, which can optimize website speed and performance.

The best practice is to place the JS code at the end of the Body tag. Because this way, all the HTML is renderd first and the users can see the content right away.

Also, most of the time JS code acts on the elements of the page, so it make sense to let those elements rendered first and then let the JS code to execute. Otherwise, you may encounter werid behavor.

In some exceptional scenarios you may need add some scripts inside your head tag, for example, when plugging in the third-party libraries.

Try to keep your JS code at the end of the Body tag.

Now, let’s write first line of the JS code.

Add a script tag with console.log statement before the closing body tag as shown in the code below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS for Beginners</title>
  </head>
  <body>
    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

Now, what is a statement in JS?

A statement is a piece of code that expresses an action to be carried out.

For example, in the above statement we are saying that log a message (Hello world) inside the browser console.

Once, you save changes, you can open the dev tools of your browser and can go to Console tab to see the Hello world message as shown in the image below.

Tip: you can open the dev tools by pressing CTRL + SHIFT + I on windows and CMD + SHIFT + I on MacOS.

Let’s discussion some details of the code we have written.

console.log('Hello world');

The console is an object. Objects in JS are complex structures that hold data and behaviour. You’ll learn about these in details in this course.

Console is built in JS object. The log is the method we are calling on this object i.e. it’s one of the behaviors of the Console object.

As an input to the log method, we are passing a string inside signle quotes. A string is a data type that represents a sequence of characters.

The behaviour of the log method is to print the provided string to the console. Hence, in this case it’s printing the “Hello World” in the console.

Aslo, note that the statement is terminated with semi-colon (;) symbol. Every line in JS is terminated using this symbol. Otherwise the JS parser will not be able to distinguish between multiple separate lines.