webdev basics

JAVASCRIPT: FROM ZERO TO HERO

Last updated on

JavaScript: Part 1 - The Foundation

Welcome to the start of your JavaScript journey! This first part is all about building a strong foundation. We’ll learn the “atoms” of the language—the basic syntax, how to store data, and how to make decisions.

By the end of this section, you’ll be able to write and understand simple, logical JavaScript programs.

Module 1: Getting Started

Let’s begin. First, we’ll learn what JavaScript is and how to add it to a webpage.

1.1 What is JavaScript?

Think of a website as a house:

  • HTML is the structure (the walls, roof, and doors).
  • CSS is the style (the paint color, furniture, and layout).
  • JavaScript (JS) is the action (the doorbell, the light switches, the garage door).

JS is the programming language that makes websites interactive.

1.2 How to Add JavaScript to Your Page

You have two main ways.

1. Internal Script (Inside your HTML) You can write JS directly in your HTML file using <script> tags. This is okay for small tests.

<!DOCTYPE html>
<html>
<body>
  <h1>My First Page</h1>
  <script>
    // JavaScript code goes here
    console.log("Hello from inside the HTML!");
  </script>
</body>
</html>

2. External Script (Best Practice) This is the recommended way. You create a separate file (e.g., script.js) and link it. This keeps your code clean.

index.html

<!DOCTYPE html>
<html>
<body>
  <h1>My First Page</h1>
  <script src="script.js"></script>
</body>
</html>

script.js

// All your JavaScript code goes in this file
console.log("Hello from the external file!");

1.3 Your First Tool: The Developer Console

How do we see our console.log messages? In the browser’s developer console!

  • How to Open: Press F12 (or Ctrl+Shift+I / Cmd+Opt+I) in your browser (Chrome, Firefox, Edge) and click the “Console” tab.
  • console.log() is your best friend. You will use it all the time to check values, debug code, and see if things are working.

1.4 Comments

Comments are notes for yourself or other developers. The browser ignores them.

// This is a single-line comment.

/*
  This is a
  multi-line
  comment.
*/

Module 2: Core Building Blocks

Now let’s learn the basic “grammar” of JavaScript.

2.1 Variables: Storing Data

Think of a variable as a labeled box where you can store information. We create variables using three keywords: const, let, and var.

  • const: Use this when the value will not change. (Constant)
  • let: Use this when the value might change later.
  • var: The old way. Avoid using var—it has confusing behaviors.

Rule of thumb: Always use const unless you know you need to change the value, then use let.

const myName = "Owais"; // A string value that won't change
let score = 0;       // A number value that can change
score = 10;            // This is fine, it's a 'let'

console.log(myName); // Prints: Owais
console.log(score);  // Prints: 10

2.2 Data Types

Your “boxes” can hold different types of data:

  • String: Text, always in quotes. const greeting = "Hello, world!";
  • Number: Any number, with or without decimals. const age = 20; const pi = 3.14;
  • Boolean: A simple true or false value. const isLearning = true;
  • Null: Intentionally “nothing.” let user = null;
  • Undefined: A variable that has been declared but not given a value. let city; // value is undefined

2.3 Operators

Operators are symbols that perform actions.

  • Assignment: = (assigns a value)
  • Arithmetic: + (add), - (subtract), * (multiply), / (divide), % (remainder) let result = 10 + 5; // result is 15
  • Comparison: === (strict equals), !== (strict not-equals), > (greater than), < (less than) console.log(10 === "10"); // Prints: false (highly recommended) console.log(10 == "10"); // Prints: true (avoid this, it's 'loose' equals)
  • Logical: && (AND), || (OR), ! (NOT) if (age > 18 && isLearning) { ... }

Module 3: Logic and Control Flow

Now we’ll teach our code how to “think” and make decisions.

3.1 Conditional Statements: if / else

This is how you make your code run (or not run) based on a condition.

let temp = 15;

if (temp > 25) {
  console.log("It's a hot day!");
} else if (temp > 15) {
  console.log("It's a pleasant day."); // This will run
} else {
  console.log("It's cold!");
}

3.2 Functions: Reusable Code Blocks

A function is a reusable “recipe” or block of code that you can “call” (run) whenever you need it.

// 1. DECLARING the function (building the recipe)
// 'name' is a 'parameter' (an input)
function greet(name) {
  console.log("Hello, " + name + "! Welcome.");
}

// 2. CALLING the function (using the recipe)
greet("Mohd");   // Prints: Hello, Mohd! Welcome.
greet("Khabib"); // Prints: Hello, Khabib! Welcome.

Functions can also return a value (an output):

function add(num1, num2) {
  let sum = num1 + num2;
  return sum; // Send the value back
}

let mySum = add(5, 10);
console.log(mySum); // Prints: 15

Module 4: Data Structures (The Containers)

What if you need to store multiple values? You use data structures.

4.1 Arrays: Ordered Lists

An Array is a single variable that holds a list of items. It’s an ordered “shelf” for your data.

// Arrays use square brackets []
const fruits = ["Apple", "Banana", "Mango"];

To get items from an array, you use their index. Important: Arrays are zero-based, meaning the first item is at index 0.

console.log(fruits[0]); // Prints: Apple
console.log(fruits[2]); // Prints: Mango

// Get the total number of items
console.log(fruits.length); // Prints: 3

4.2 Objects: Key-Value Pairs

An Object is a collection of related properties. Think of it as a “profile card” or a dictionary.

// Objects use curly braces {}
const user = {
  firstName: "Mohd",
  lastName: "Owais",
  age: 20,
  isStudent: true
};

To get data from an object, you use dot notation.

console.log(user.firstName); // Prints: Mohd
console.log(user.age);       // Prints: 20

// You can also add new properties
user.email = "owais@example.com";

Module 5: Loops (Repeating Yourself)

Loops save you from writing the same code over and over.

5.1 The for Loop

The most common loop. It runs a block of code a specific number of times. It has three parts:

  1. Initialize: let i = 0; (Start a counter)
  2. Condition: i < 5; (Keep looping as long as this is true)
  3. Increment: i++ (Add 1 to the counter after each loop)
for (let i = 0; i < 5; i++) {
  console.log("The count is: " + i);
}
// This will print:
// The count is: 0
// The count is: 1
// The count is: 2
// The count is: 3
// The count is: 4

5.2 Looping Over Arrays

The for loop is perfect for going through an array, item by item.

const fruits = ["Apple", "Banana", "Mango"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// This will print:
// Apple
// Banana
// Mango

5.3 The for...of Loop (The Modern Way)

This is a much cleaner, more modern syntax for looping over arrays.

const fruits = ["Apple", "Banana", "Mango"];

for (const fruit of fruits) {
  console.log(fruit);
}
// This will print:
// Apple
// Banana
// Mango

Part 1 Complete!

Congratulations! You’ve just learned the core fundamentals of JavaScript. You now know how to:

  • Add JS to a page
  • Store data in variables
  • Use different data types
  • Make decisions with if/else
  • Write reusable functions
  • Store lists in Arrays and Objects
  • Repeat code with Loops

You now have the basic building blocks to create real programs. In Part 2, we’ll use these skills to start interacting with the HTML page, which is where the real fun begins!