JavaScript Tutorial

JavaScript Getting Started : Your First “Hello World” Tutorial

4 min read

Think of building a modern webpage like building a brand-new house. HTML (HyperText Markup Language) is the raw structure—the foundation, walls, and roof. CSS (Cascading Style Sheets) is the interior design—the paint colors, the carpets, and the stylish furniture. But a house with just walls and paint is pretty boring; you can’t do anything in it.

That is what is JavaScript used for: it is the electricity and the plumbing. It’s the hidden wiring that turns on the lights when you flip a switch, the thermostat that regulates the temperature, and the automatic garage door.

In technical terms, JavaScript (JS) is a high-level, interpreted programming language that adds interactivity, dynamic behavior, and complex logic to web pages. While HTML structures the content and CSS styles it, JavaScript makes the webpage think and react to users. If you are wondering how to start learning JavaScript, the absolute best way is not by reading endless theory, but by rolling up your sleeves and typing actual code into a tool you already have: your web browser.

The Gateway to JavaScript: console.log()

To write our very first line of code, we will use a built-in browser tool called the Developer Console. This is a sandbox where developers test code on the fly. In JavaScript, the most fundamental way to communicate with this console is using a built-in command called console.log().

Syntax

console.log(message);
Code language: JavaScript (javascript)

Parameters:

  • message: This is the data you want to display in the console. It can be a line of text (a string), a number, a mathematical equation, or even complex data structures. You can also pass multiple messages separated by commas.

Return Value:

  • console.log() returns undefined. Its sole purpose is to perform an action (printing text to the screen), not to calculate and return a value for later use in your code.

Practical Examples

Let’s look at how to use this command in the real world. To try these yourself, open your web browser (like Chrome or Edge), right-click anywhere on the page, select Inspect, and click the Console tab.

Example 1: The Classic “Hello World”

Every programmer’s journey begins with a simple tradition: making the computer say hello. This is your very first javascript hello world console command. We wrap our text in quotation marks so JavaScript knows it’s a “string” of text, not a command.

// Telling the browser to print a welcoming message
console.log("Hello, World!");
Code language: JavaScript (javascript)

Output:

// Output: Hello, World!
Code language: JSON / JSON with Comments (json)

Example 2: JavaScript as a Calculator

JavaScript isn’t just for displaying text; it is a powerful computational engine. You can pass mathematical expressions directly into the console, and JavaScript will evaluate them before logging the result. Notice that we do not use quotation marks for numbers or math.

// Calculating the total cost of 5 items priced at $20 each
console.log(5 * 20);
Code language: JavaScript (javascript)

Output:

// Output: 100
Code language: JSON / JSON with Comments (json)

Example 3: Storing and Logging Data

In real applications, you rarely log raw text. Instead, you store information inside containers called variables and then log those containers to see what’s inside. Here, we use the let keyword to create a variable.

// Storing a user's name in a variable, then greeting them
let username = "Alex";
console.log("Welcome back, " + username);
Code language: JavaScript (javascript)

Output:

// Output: Welcome back, Alex
Code language: JSON / JSON with Comments (json)

Pro Tips & Common Pitfalls

  • Pitfall – The Missing Quotes: Beginners often type console.log(Hello);. Without quotation marks, JavaScript thinks Hello is a variable you created earlier. If it can’t find it, it will throw a nasty ReferenceError. Always use quotes for raw text!
  • Pitfall – Case Sensitivity: JavaScript is strictly case-sensitive. Typing Console.log() (with a capital C) or console.Log() will immediately break your code. Always stick to lowercase for this command.
  • Pro Tip – The Time Machine: When typing in the browser console, press the Up Arrow key on your keyboard. This brings back the last line of code you typed, saving you from re-typing things if you make a tiny typo.

You have just written and executed your very first lines of real JavaScript directly in the browser! You created a message, performed math, and even used a variable. However, if you hit the “Refresh” button on your browser right now, all your hard work in the console will vanish.

The console is an incredible tool for testing and debugging, but it is purely temporary. To build a real, functional web application, your JavaScript needs a permanent home so it runs automatically every time a user visits your website. Do we write this code directly inside our HTML file? Do we create a separate file for it? To make your interactive code stick around permanently, let’s move on to the next crucial step: understanding exactly JS Where To Put.

Leave a Comment