Written by: rJTutorial Team | Last Updated:

Getting Started With JavaScript

JavaScript is the heartbeat of the modern web. Originally designed to make web pages "come alive," it has evolved into a powerhouse language capable of building everything from mobile apps to complex server-side systems. Whether you want to build the next Facebook or just add a simple popup to your website, JavaScript is the tool you need to master.

What is ECMAScript?

  • The Standard: ECMAScript (often abbreviated as ES) is the official specification that defines what JavaScript is. Think of ECMAScript as the rulebook and JavaScript as the language we speak based on those rules.
  • Consistency: This standard ensures that JavaScript code behaves consistently across different browsers like Chrome, Firefox, and Safari.
  • Evolution: The language is constantly evolving through versions, starting from ES1 in 1997 to the modern yearly updates we see today.
Developer Tip: When you hear developers talking about "Modern JavaScript," they are usually referring to features introduced in ES6 (2015) and later. Mastering these newer features will make your code much cleaner and more efficient.

ECMAScript Versions:

JavaScript has undergone significant transformations over the years to keep up with the demands of modern software development:

  • ECMAScript 1 (ES1): The foundation, released in 1997.
  • ECMAScript 2015 (ES6): This was the biggest update in the language's history. It introduced critical features like classes, arrow functions, and "let/const" for variable declarations, changing how we write JS forever.
  • Latest Versions (ES2022+): Nowadays, the standards body (TC39) releases smaller, yearly updates. Recent versions have added features like "Top-level await" and "Optional Chaining," making the language even more robust.
Best Practice: Always stay updated with the latest ECMAScript features, but remember to use tools like Babel if you need to support very old browsers (like Internet Explorer), as they may not understand modern syntax.

Ways to Run JavaScript

1. Using the Console Tab of Web Browsers

You don't need to install anything to start coding in JavaScript. Every modern browser has a built-in environment called the Console.

  • Open your browser (Chrome or Edge are recommended for their excellent dev tools).
  • Right-click anywhere on a page and select "Inspect", then click the Console tab. Alternatively, use F12 or Cmd+Option+J (Mac).
  • Type console.log("Hello World!"); and press Enter. You'll see the browser execute your code instantly.
Common Mistake: Beginners often forget that the Console is for testing and debugging. Code written here isn't saved. Once you refresh the page, your code disappears!

2. Using Node.js

JavaScript isn't just for browsers anymore. Node.js allows you to run JavaScript directly on your computer's operating system, which is how backend servers and development tools are built.

  • Download and install Node.js from the official website.
  • Open a text editor like Visual Studio Code and create a file named app.js.
  • Inside the file, write: console.log("Running from Node!");
  • Open your terminal or command prompt, navigate to the folder where your file is saved, and type: node app.js.

3. By Creating Web Pages

This is the most common way to use JavaScript. You link a JavaScript file to an HTML document so they can work together to create an interactive experience.

  • Create a project folder and add an HTML file (e.g., index.html).
  • Add the standard HTML boilerplate code:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My JS Project</title>
</head>
<body>
  <h1>Check the Console!</h1>
  <!-- The script tag links your logic to your structure -->
  <script src="main.js"></script>
</body>
</html>
  • Create a file named main.js in the same folder and add: alert("The script is linked!");
  • Open index.html in your browser to see the result.
Watch Out: Usually, it's best to place your <script> tag at the bottom of the <body>. This ensures that the HTML elements are loaded before the JavaScript tries to interact with them, preventing "null" errors.

What is JavaScript?

  • Lightweight & Fast: JavaScript is an interpreted or "Just-In-Time" compiled language, meaning it executes quickly without needing a long compilation process.
  • The "Action" Layer: If HTML is the skeleton and CSS is the skin, JavaScript is the muscle. It handles user clicks, fetches data from APIs, and updates the screen without reloading.
  • Object-Oriented: It follows a prototype-based object-oriented model, which allows for powerful code reuse.
  • Ubiquitous: With the rise of Node.js, JS is now "Full Stack," meaning you can use the same language for both the frontend (client) and the backend (server).

ECMAScript Versions

To recap, keeping track of versions helps you understand the compatibility of the code you write:

  • ES1 (1997): The birth of the standard.
  • ES6 / ES2015: The revolution—introduced let, const, Arrow Functions, and Promises.
  • ES2022 (latest/recent): Added .at() method for arrays and class fields.
Common Mistake: Don't get overwhelmed by version numbers. Most of the code you write will be a mix of ES6 and the latest yearly features. Browsers handle the heavy lifting of understanding these versions for you.

JavaScript Frameworks

Once you master the fundamentals of "Vanilla JavaScript" (plain JS), you will likely use frameworks to build complex applications faster.

  • Frontend (User Interface):
    • React: A library by Meta used for building component-based UIs.
    • Vue: Known for its gentle learning curve and excellent documentation.
    • Angular: A comprehensive framework by Google for large-scale enterprise apps.
  • Backend (Server-Side):
    • Express: The most popular, minimalist web framework for Node.js.
    • Next.js: A powerful framework for building SEO-friendly, production-ready React apps.
Best Practice: Learn the core language (Vanilla JavaScript) thoroughly before jumping into frameworks like React or Vue. Understanding how the "engine" works will make learning the frameworks much easier.

In this tutorial, we will delve into JavaScript in-depth, covering its fundamentals and advanced concepts. Stay tuned for an exciting journey into the world of JavaScript!