JavaScript Tutorial

JavaScript Getting Started : Your First “Hello World” Tutorial

10 min read

JavaScript Getting Started

Think of building a modern website like constructing a state-of-the-art smart home.

HTML (HyperText Markup Language) provides the foundation, the drywall, and the structural framing. It tells the house where the rooms and doors belong. CSS (Cascading Style Sheets) is the interior designer. It chooses the paint colors, the elegant lighting fixtures, and the stylish flooring.

But a house with just structure and paint is lifeless. It’s static. This is where JavaScript (JS) enters the picture. JavaScript is the electricity, the plumbing, and the smart home automation system. It is what makes the garage door open when you press a button, what turns the lights on when you walk into a room, and what adjusts the thermostat based on the weather outside. Without JavaScript, the web is just a collection of static posters. With it, the web becomes a living, breathing, interactive experience.

The Core Concept: What is JavaScript Used For?

If you are wondering exactly what is javascript used for, the answer is: almost everything that happens on a webpage. JavaScript is a high-level, dynamic, interpreted programming language primarily designed to add interactivity to websites.

When you click a “Like” button and it instantly turns blue without reloading the page, that’s JavaScript. When you type in a password and a tiny message warns you that it needs a special character, that’s JavaScript. It is used for form validation, creating complex 2D/3D animations, fetching data from remote servers in the background, and even building fully-fledged web applications (like Gmail or Spotify) that feel like native desktop software.

Under the Hood: The JavaScript Engine

It is tempting to think of JavaScript as magic, but there is a highly complex mechanical process happening right inside your browser. Your computer’s processor does not natively understand JavaScript; it only understands machine code (1s and 0s).

To bridge this gap, every modern web browser comes equipped with a JavaScript Engine. The most famous of these is Google’s V8 Engine (used in Chrome and Edge). When your browser encounters JavaScript, the engine goes to work:

  1. Parsing: It reads your code text and converts it into a structured map called an Abstract Syntax Tree (AST).
  2. Compilation (JIT): Unlike older languages that compile all code before running, modern JS engines use Just-In-Time (JIT) compilation. The engine translates your JavaScript into machine code at the exact moment it is about to be executed, allowing it to start running immediately while optimizing the code in the background.
  3. Execution: The machine code is fed to your computer’s CPU, and the actions you programmed—like showing a popup or calculating a number—actually happen on the screen.

How to Start Learning JavaScript Today

The most beautiful thing about JavaScript is its accessibility. If you want to learn C++ or Java, you have to download massive compilers, set up environment variables, and configure IDEs (Integrated Development Environments).

If you are wondering how to start learning javascript, you already have everything you need right in front of you. Your web browser is your development environment. Every modern browser has a hidden sandbox built into it called the Developer Console. It allows you to write, execute, and test JavaScript code directly on the webpage you are currently viewing.

Syntax: The Window to the Code

To write our very first line of code, we will use a built-in JavaScript command designed specifically for developers: console.log(). This command tells the browser to print (or “log”) information directly into the Developer Console.

Here is the precise syntax:

console.log(data_1, data_2, ..., data_n);
Code language: JavaScript (javascript)

Parameters

  • data_1 ... data_n: The console.log() method can accept an infinite number of arguments (parameters) separated by commas. These can be of any data type: text (strings), numbers, complex objects, or even mathematical equations.

Return Value

  • undefined: When the console.log() function finishes executing, it prints your data to the screen, but the function itself does not hand a usable value back to the rest of your program. In JavaScript terms, it returns undefined.

Practical Examples: Mastering the Console

Let’s dive into writing code. To follow along, open your browser’s Developer Tools. On Windows/Linux, press Ctrl + Shift + J (Chrome) or F12. On a Mac, press Cmd + Option + J. A panel will slide open. Look for the tab labeled Console.

Example 1: The Classic “Hello World”

The Logic: In programming tradition, the very first thing you teach a new language to do is say hello. To do this, we need to pass a sequence of characters to our console.log method. In JavaScript, a sequence of text is called a String. To tell the JavaScript engine that we are dealing with a text String and not a piece of system code, we must wrap our text in quotation marks (either single ' ' or double " ").

Let’s execute a standard javascript hello world console command.

The Code:

// We wrap our text in quotes to define it as a String data type.
// The semicolon at the end tells the engine "this instruction is finished."
console.log("Hello, World!");
Code language: JavaScript (javascript)

The Expected Output:

Hello, World!
<- undefined

(Note: You will see undefined appear below your text. As discussed in our syntax section, this is simply the engine letting you know the console.log function finished without returning a programmatic value. It is completely normal.)

Example 2: Passing Multiple Arguments and Math Operations

The Logic: JavaScript is incredibly flexible. The console.log() command isn’t just for static text; it can evaluate mathematical expressions on the fly and accept multiple separate pieces of data at once.

In this example, we will pass three distinct arguments separated by commas. First, a text string describing what we are doing. Second, a mathematical addition. Third, a mathematical multiplication. The JavaScript engine is smart enough to perform the math before logging the final answer to the screen.

The Code:

// We pass three distinct arguments to the log function.
// Notice that mathematical numbers DO NOT need quotation marks.
console.log("My Math Results:", 150 + 50, 10 * 5);
Code language: JavaScript (javascript)

The Expected Output:

My Math Results: 200 50
Code language: JavaScript (javascript)

Example 3: Interacting With the DOM (Live Page Manipulation)

The Logic: Logging text is great, but JavaScript’s true power lies in its ability to manipulate the webpage itself. The browser creates an invisible, structural map of the current webpage called the DOM (Document Object Model). JavaScript can talk to this DOM.

In this example, we will use a built-in object called document (which represents the entire webpage). We will drill down into its body property, access its style settings, and specifically target the backgroundColor. By assigning a new value to this property, we can instantly change the look of the webpage we are currently viewing—no refreshing required!

The Code:

// We are accessing the browser's Document Object Model.
// We target the body, then the styles, then the background color.
// We assign (=) the string "tomato" to change the color.
document.body.style.backgroundColor = "tomato";

// We then log a confirmation message to the console
console.log("The background color has been successfully updated!");
Code language: JavaScript (javascript)

The Expected Output:

// The physical background of your web browser will instantly turn a reddish-orange (tomato) color.
The background color has been successfully updated!
Code language: PHP (php)

Example 4: Advanced Edge Cases — Formatting and Data Tables

The Logic: As you dive deeper into JavaScript, you will deal with complex data structures like Arrays (lists of items) and Objects (collections of properties, like a digital ID card). Logging these out with standard text can be messy and hard to read.

The console has hidden superpowers. Instead of console.log, we can use console.table() to automatically format complex data into a beautiful, readable grid. Furthermore, we can actually inject CSS directly into our console logs using the %c substitution string. When the engine sees %c, it applies the CSS rules provided in the next argument to the text. This is an advanced technique used by massive tech companies (if you open the console on Facebook, you will see a massive, styled warning using this exact technique).

The Code:

// Advanced Edge Case 1: Logging a data table
// We are defining an Array (marked by square brackets [ ])
// Inside the array are Objects (marked by curly braces { })
let users = [
    { name: "Alice", role: "Admin", active: true },
    { name: "Bob", role: "Editor", active: false },
    { name: "Charlie", role: "Viewer", active: true }
];

// Display the complex data as a neat table
console.table(users);

// Advanced Edge Case 2: Styling the console output using %c
// The first argument contains %c before the text. 
// The second argument contains pure CSS styling rules.
console.log(
    "%c STOP! THIS IS A RESTRICTED AREA.", 
    "color: red; font-size: 24px; font-weight: bold; background-color: yellow; padding: 10px;"
);
Code language: JavaScript (javascript)

The Expected Output:

// Output 1: A beautifully formatted visual grid with columns for (index), name, role, and active status.

// Output 2: A massive, bold, red text on a yellow background warning the user, rendering exactly like styled HTML.
Code language: PHP (php)

Pro Tips & Common Pitfalls

As a beginner, the console is your best friend, but it can also be a source of immense frustration if you fall into common traps. Keep these expert insights in mind as you experiment.

Common Pitfall: The ReferenceError (Missing Quotes) If you type console.log(Hello); instead of console.log("Hello");, the console will flash a frightening red ReferenceError: Hello is not defined. Why? Because without quotation marks, JavaScript assumes Hello is a variable (a container holding data) that you created earlier. Because you didn’t create a variable named Hello, the engine panics. Always wrap your raw text in quotes!

Pro Tip: Preserving the Log History By default, if you refresh the page, the browser completely wipes the console clean. If you are trying to track down a bug that happens right before a page reloads, this is a nightmare. Click the “Gear” icon in your DevTools console settings and check “Preserve log”. This forces the browser to keep your console history intact even across page reloads.

Pro Tip: Memory Leaks in Production While console.log() is incredible for learning and debugging, never leave console.log statements inside your final, public-facing website code. When you log massive arrays or complex data objects, the browser’s JavaScript engine is forced to keep that data stored in its active memory so it can display it in the console. If you leave thousands of logs running in the background, it can cause a “memory leak,” slowing down the user’s computer and severely degrading the performance of your website.

Beyond the Ephemeral Sandbox

You have just successfully written your first JavaScript commands, mathematically calculated values, and even directly manipulated the color of a live webpage. You’ve harnessed the power of the V8 engine right from your keyboard.

However, you might have noticed a glaring issue. If you used Example 3 to turn your webpage’s background to a tomato color, try hitting the “Refresh” button on your browser right now.

The color vanishes. The console clears. Everything you wrote is gone.

The Developer Console is a temporary scratchpad. It is a sandbox where code lives and dies in a single session. To build a real website or web application, your JavaScript needs a permanent home. It needs to be carefully woven into your HTML files so that it executes automatically every time a user visits your site, no matter where they are in the world.

How do we take our code out of this temporary console and permanently integrate it into a real-world web project? That is exactly what we will master in the next step. Let’s move from the sandbox to the server.

Leave a Comment