Javascript Tutorial 1: Introduction & Variables

Poorna Prasad April 16, 2026

Course Transition

You have mastered HTML (the skeleton) and CSS (the skin and layout). However, a website built only with HTML and CSS is just a digital poster. It cannot calculate math, it cannot fetch data from a database, and it cannot remember user inputs. To give your website a Brain, you must learn JavaScript.

Step 1: How to Link JavaScript

Just like CSS, JavaScript is an entirely different programming language from HTML. You must tell the browser where your JavaScript code begins and ends using the <script> tag.

There are two primary ways to write JavaScript in a web project:

1. Internal JavaScript

You write the code directly inside your HTML file. Professional developers place the <script> tag at the very bottom of the <body> tag. This ensures the HTML and CSS load first, so the user isn't staring at a blank screen while the logic loads.

<body>
  <h1>My Website</h1>

  <!-- Place JS right before the closing body tag -->
  <script>
    // Your JavaScript code goes here
    alert("Welcome to the site!");
  </script>
</body>

2. External JavaScript (The Professional Standard)

For large applications, you write your code in a separate file (e.g., app.js) and link it to your HTML file. This keeps your code organized and clean.

<body>
  <h1>My Website</h1>

  <!-- Linking an external JS file -->
  <script src="app.js"></script>
</body>

Step 2: The Console (Your Best Friend)

When you write CSS and make a mistake, you can see it instantly because a box turns the wrong color. When you write JavaScript and make a mathematical mistake, nothing happens on the screen. The code just fails silently.

To see what your JavaScript is doing behind the scenes, you must use the Developer Console. You can open it in any browser by right-clicking the page, selecting "Inspect", and clicking the "Console" tab.

We use the console.log() command to print messages, variables, and errors directly to this hidden developer screen.

The JavaScript:

// This will not show up on the actual webpage.
// It will only show up in the Developer Console.
console.log("System initialized successfully.");
console.log(100 + 50);

The Output (What you see in the Developer Console):

> System initialized successfully.
> 150

Step 3: Variables (Storing Memory)

A variable is simply a container that holds data. Think of it like a labeled box. You put information inside the box, and whenever you need that information later, you just call the label on the box.

In modern JavaScript (ES6), there are two primary ways to declare a variable: let and const.

1. Using "let" (Data that changes)

Use let when you know the value inside the box will change later in the program (like a user's score in a video game).

// 1. Declare the variable and assign a value
let playerScore = 0;
console.log(playerScore); // Outputs: 0

// 2. Update the value later (Do not write 'let' again!)
playerScore = 10;
console.log(playerScore); // Outputs: 10

2. Using "const" (Data that is locked)

Use const (Constant) when the value should never change (like a user's date of birth or a mathematical formula). If you try to change a const variable, your program will crash and throw an error. This protects your code from accidental bugs.

const gravity = 9.81;
console.log(gravity); // Outputs: 9.81

// This next line will cause a FATAL ERROR and stop the script:
gravity = 10; // TypeError: Assignment to constant variable.
What about "var"? You will see var used in older tutorials. It is the legacy way of declaring variables from before 2015. Do not use it. It has scoping bugs that cause massive headaches. Always use let or const.

Step 4: Basic Data Types

JavaScript needs to know what *kind* of data is inside your variables so it knows how to handle it. The three most common primitive data types are Strings, Numbers, and Booleans.

  • String: Text data. It must be wrapped in quotes (single ' ' or double " ").
  • Number: Mathematical data. It is written completely naked, without quotes. Can be whole numbers or decimals.
  • Boolean: A strict logic switch. It can only be exactly true or false (no quotes).

The JavaScript:

// String
let username = "JohnDoe99";

// Number
let age = 24;

// Boolean
let isLoggedIn = true;
The String vs Number Trap:
If you write let x = 10 + 10; the console will output 20.
If you write let x = "10" + "10"; the console will output "1010". Because you used quotes, JavaScript treats them as words, not math, and simply glues the two words together!

Final Quiz: Test Your JavaScript Logic

Click the buttons below to verify your knowledge.

1. What is the correct way to output data to the developer tools for debugging purposes?
2. You are building an e-commerce checkout. You need a variable to store the final total price of the cart. Which keyword should you use to declare it?
3. Look at this code: `let systemStatus = false;`. What data type is this variable holding?
Poorna Prasad

Posted by Poorna Prasad

"Share knowledge for a better world"

Post a Comment

0 Comments