JavaScript for Beginners: Introduction, History, How It Works, and How to Run It

JavaScript is one of the most widely used programming languages in web development today. If you have already learned the basics of HTML and CSS, learning JavaScript is the next crucial step toward building interactive websites and real-world web applications.

While HTML gives a webpage its structure and CSS makes it look attractive, JavaScript adds behavior and functionality.

In this beginner-friendly guide, we will explore what JavaScript is, why it was created, how it works, where it runs, and exactly how to write and execute your first JavaScript program.

1. What Is JavaScript?

JavaScript is a versatile programming language widely used to make websites interactive and dynamic. It allows web developers to respond to user actions, update webpage content in real-time, validate forms, and communicate with web servers.

Let's understand this with a simple web development example. Imagine you have a button on a webpage:

<button>Click Me</button>

• HTML creates the button.
• CSS styles the button to look good.
• JavaScript defines what happens when someone clicks it.

For example, JavaScript can show a pop-up message when the button is clicked:

<button onclick="alert('Hello from Pie Coding Schools!')">Click Me</button>

When the user clicks the button, an interactive message appears.

Remember this web dev trio:

• HTML = Structure
• CSS = Design
• JavaScript = Behavior

What can JavaScript be used for?

• Respond to button clicks and other user interactions.
• Show, hide, or dynamically update webpage elements.
• Validate user input in forms.
• Create interactive menus, carousels, and sliders.
• Fetch real-time data from APIs.
• Build both frontend and backend applications.

2. Why Is JavaScript Called a Scripting Language?

A script is essentially a set of instructions used to perform a specific task within a particular environment.

For example:

console.log("Hello World");

This single instruction tells the JavaScript environment to log the message "Hello World" to the developer console.

JavaScript is commonly referred to as a scripting language because it was initially designed to run inside a host environment—such as a web browser—where it could control webpage behavior without needing to be compiled first.

However, modern JavaScript is a fully-fledged programming language. It supports complex programming concepts like variables, functions, objects, conditionals, and loops. Today, JavaScript is a powerful programming language that is widely used for scripting, especially in web and software development.

3. A Short History of JavaScript

JavaScript was created in 1995 by Brendan Eich while he was working at Netscape Communications. It was originally developed in just 10 days to add simple interactivity to webpages, which were largely static at the time.

During its early development, the language went through a few different names:

1. Mocha
2. LiveScript
3. JavaScript

SEO Tip / FAQ: Is Java the same as JavaScript? No. Despite the similar naming, Java and JavaScript are two completely different programming languages. They feature different designs, syntax, and developer ecosystems.

4. What Is ECMAScript?

As JavaScript became wildly popular, it became important to establish a standardized set of rules defining how the language should behave across all platforms.

ECMAScript is the official language specification that defines the core rules and features of JavaScript. It helps ensure that different JavaScript engines implement the language consistently.

For example, when developers use a modern feature like the let keyword, the ECMAScript specification dictates exactly how it should function under the hood.

A simple way to understand it:

• ECMAScript: The standard or rulebook.
• JavaScript: The actual language implemented according to that standard, along with extra features provided by the environment (like web APIs).

5. What Is a JavaScript Engine?

A JavaScript engine is a specialized piece of software that processes and executes JavaScript code.

When you write:

console.log("Hello World");

A JavaScript engine parses this code, interprets it, and executes it on your machine.

Different web browsers use different JavaScript engines to run your code efficiently:

Modern JavaScript engines use advanced techniques like Just-In-Time (JIT) compilation and optimization to execute code at lightning speeds.

6. How Does JavaScript Work in a Browser?

Web browsers come equipped with a built-in JavaScript engine designed to execute the JavaScript code included in a webpage.

When a browser loads an HTML document containing JavaScript, the following happens:

1. Browser: Loads the webpage.
2. JavaScript Engine: Processes and executes the JS code.
3. Webpage Behavior: The page responds to user actions and updates dynamically.

In a browser, JavaScript can interact with the DOM (Document Object Model), which represents the webpage as a hierarchical structure of objects. This allows JavaScript to read, modify, or delete HTML elements dynamically.

7. What Is console.log()?

console.log() is a built-in function used to log information to the developer console. It is incredibly useful for learning JavaScript, testing small snippets of code, and debugging issues.

Example Code:

console.log("Hello World");
console.log("I am learning JavaScript at Pie Coding Schools");
console.log(100);

Output in the console:

Hello World
I am learning JavaScript at Pie Coding Schools
100

Note: console.log() outputs information strictly to the developer console; it does not automatically display text on the user-facing webpage.

8. How to Run JavaScript: 3 Simple Methods

There are a few different ways to run JavaScript. As a beginner, you should start by running it directly in your web browser, and later learn to execute it with Node.js.

Method 1: Using JavaScript inside HTML

You can write JavaScript directly inside a <script> tag within an HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First JavaScript</title>
</head>
<body>
    <h1>Welcome to JavaScript</h1>

    <script>
        console.log("Hello World from inline script");
    </script>
</body>
</html>

Save the file as index.html and open it in your browser. Right-click the page, click Inspect, and navigate to the Console tab to see your output.

Method 2: Using an External JavaScript File (Recommended)

Just as CSS is often written in a separate .css file, JavaScript is typically stored in a separate .js file.

Create two files in a folder:

my-first-project/
├── index.html
└── script.js

In index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External JavaScript Example</title>
</head>
<body>
    <h1>Hello World</h1>
    
    <!-- Link your external JS file here -->
    <script src="script.js"></script>
</body>
</html>

In script.js:

console.log("JavaScript is successfully connected!");

Why use an external JavaScript file?

• Keeps your HTML clean and semantic.
• Makes your code much easier to read and maintain.
• Allows the same script to be reused across multiple HTML pages.

Method 3: Using Node.js

JavaScript can also run entirely outside of a web browser using a runtime environment called Node.js.

To run JS via Node.js:

1. Download and install Node.js from the official website.
2. Open your terminal or command prompt.
3. Create a file named app.js:

   console.log("Hello from Node.js!");
   

4. Run the file using the command: node app.js

9. What Is Node.js?

Node.js is a powerful JavaScript runtime environment that allows your code to run outside the confines of a web browser.

Important distinction: Node.js is not a programming language. JavaScript is the language, while Node.js is merely the environment executing it.

Node.js empowers developers to use JavaScript for:

• Backend development (Servers)
• Building robust APIs
• Command-line tools
• Automation scripts

10. Browser JavaScript vs Node.js

While both environments execute JavaScript, they provide access to different built-in tools (APIs).

11. What Is the Difference Between VS Code and Node.js?

Beginners sometimes confuse tools when starting out.

• Visual Studio Code (VS Code): A powerful text editor used to write, organize, and format your code. It does not run the code itself.
• Node.js: The runtime environment that actually executes your JavaScript code outside the browser.

12. Where Is JavaScript Used Today?

JavaScript's ecosystem has exploded. It is used across nearly every facet of modern software development:

• Frontend Development: Frameworks like React, Vue, and Angular.
• Backend Development: Frameworks like Express.js running on Node.js.
• Mobile Development: Apps built with React Native.
• Desktop Applications: Apps built using Electron (like Slack or Discord).

13. Your First JavaScript Practical Challenge

Let's put theory into practice!

1. Create a folder named javascript-class-1.
2. Inside it, create index.html and script.js.
3. Link the script to your HTML file.
4. In script.js, write the following code:

console.log("Hello World");
console.log("My name is [Your Name]");
console.log("I am learning JavaScript at Pie Coding Schools");

5. Open index.html in your browser and check the Developer Console.

Challenge: Try logging out your college name and why you want to learn JavaScript!

14. Key Takeaways

• JavaScript makes webpages interactive and dynamic.
• HTML = Structure, CSS = Design, JavaScript = Behavior.
• ECMAScript is the standard; JavaScript is the implementation.
• You can run JS in the browser or via Node.js on your machine.

15. Frequently Asked Questions (FAQ)

Is JavaScript the same as Java? No. They are entirely separate programming languages with different use cases.

Do I need Node.js to run JavaScript? No. You can start running JavaScript immediately inside your web browser. Node.js is only needed if you want to run JS outside a browser.

What should I learn after this introduction? Next, you should focus on JavaScript fundamentals: variables, data types, operators, conditionals (if/else), and loops.

Continue Learning with Pie Coding Schools

This is just the first step in your JavaScript journey. Learn the fundamentals, practice writing small programs daily, and gradually build real-world projects.

Learn. Code. Grow.

Follow @piecodingschools | piecodingschools.com