DEV Community

Abdul Fadiga
Abdul Fadiga

Posted on

JavaScript 101: The Logic of the Web

#javascript #webdev #beginners #learning

Part 1: The Philosophy & History

1. The "Big Three" Analogy

Before writing code, establish where JavaScript fits in. Use the Human Body Metaphor:

  • HTML (The Skeleton): It gives the structure. Without it, you’re a puddle. But a skeleton can't move or look good.
  • CSS (The Skin & Clothing): It makes the skeleton look beautiful. But a mannequin looks beautiful and still does nothing.
  • JavaScript (The Nervous System/Brain): It senses the environment (clicks, scrolls) and tells the body to react. It brings the page to life.

2. The History (The "10-Day Miracle")

  • The Year: 1995. The web was static (just text and images).
  • The Creator: Brendan Eich, working at Netscape.
  • The Constraint: Management wanted a language for their browser, and they wanted it fast. Eich wrote the prototype in just 10 days.
    • Teacher Note: Explain that because it was rushed, JS has some "weird" quirks. We love it, but it isn't perfect.
  • The Name Scandal:
    • It was originally called Mocha, then LiveScript.
    • At the time, the language Java was the cool kid on the block.
    • Marketing renamed it JavaScript to trick people into thinking it was related to Java.
    • The Truth: Java and JavaScript are as related as Car and Carpet. (Ham and Hamster). They are totally different.

3. Why JavaScript Won

Why do we learn this and not Python or C++ for the browser?

  • Monopoly: It is the only programming language that runs natively inside a web browser.
  • EcmaScript (ES): This is the "rulebook." JavaScript is the language, ES is the standard.
    • We use ES6+ (Modern JS). It’s cleaner, safer, and easier than the old stuff.

Part 2: The Setup (The Developer Environment)

1. The Console (The Cockpit)

Open a browser (Chrome) on the projector.

  • Concept: The web page is for the user. The Console is for the developer. It is where the code speaks back to us.
  • Action: Right Click -> Inspect -> Console.
  • Action: Type alert('Hello Class') in the console to show immediate gratification.

2. Linking the File

  • Concept: Separation of Concerns. Just like we don't write CSS inside HTML tags anymore, we don't write JS inside HTML.
  • The Location Matters:
    • Put <script src="main.js"></script> at the very bottom of the <body> tag.
    • Why? HTML loads top-to-bottom. If the script is at the top, the logic might try to find a button that hasn't been drawn on the screen yet. Draw the skeleton first, then attach the brain.

Part 3: Variables (The Containers)

The Mental Model: "Moving Boxes"

Imagine your computer's memory is a giant warehouse. You need to store data (a user's name, a score, a price). You can't just throw it on the floor; you need a box.

1. Declaring Variables

To create a box, we need a special keyword.

  • let (The Open Box):
    • You create the box and put an item in it. Later, you can take that item out and put a different one in.
    • Use case: A score in a game (starts at 0, changes to 10).
  • const (The Glass Vault):
    • You put an item in, and the box is sealed forever. You can see it, use it, but you cannot replace it.
    • Use case: My birthday, the value of Pi, the URL of the website.
  • var (The Old, Leaky Box):
    • Pre-2015. It has weird rules about where it exists (scoping).
    • Rule: Don't use it. But recognize it if you see it in old tutorials.

Code Example: 

let score = 0;
console.log(score); // Output: 0

score = 10; // We changed the value!
console.log(score); // Output: 10

const myName = "John";
// myName = "Mike"; // ERROR! The browser will scream in red text.
Enter fullscreen mode Exit fullscreen mode

Part 4: Data Types (The Shape of Data)

The Concept: Dynamic Typing

In some languages, you have to tell the box exactly what fits (e.g., "This box is ONLY for shoes"). JavaScript is Dynamic. It figures out what's inside the box automatically.

1. Strings (Text)

  • Rule: Must be surrounded by quotes.
  • Analogy: If I write name (no quotes), JS thinks it's a variable name. If I write "name" (quotes), JS knows it's the actual word "name".
  • Types: Single ' ', Double " ", Backticks ` `.

2. Numbers (Math)

  • Rule: No quotes.
  • Warning: "10" is a string (text). 10 is a number.
  • Math: You can do +, -, *, /.

3. Booleans (The Light Switch)

  • Values: true or false.
  • Usage: Used for logic. isUserLoggedIn, isDarkModeOn.
  • Note: Not "true" (string), just true (keyword).

Part 5: Operators & The "Plus" Confusion

The Concept: Context Matters

The + symbol is polite. It tries to help based on who is asking.

  1. Math Mode: Number + Number
    • 10 + 10 = 20
  2. Concatenation (Glue) Mode: String + String
    • "Hello" + "World" = "HelloWorld"
  3. The Danger Zone (Coercion): String + Number
    • "10" + 10 = "1010"
    • Teacher Explanation: JS says, "Oh, you have text and a number? You probably want to write them next to each other as a sentence." This is a common bug!

Template Literals (Modern JS)

Instead of using + to glue things, use Backticks `.

let user = "Alice";
let age = 25;

// The Old Way (Painful)
let message = "Hi " + user + ", you are " + age + " years old.";

// The Modern Way (Interpolation)
let properMessage = `Hi ${user}, you are ${age} years old.`;
Enter fullscreen mode Exit fullscreen mode

Part 6: Practical Exercises

Instructions: Do not copy-paste. Type these out to build muscle memory.

Exercise 1: The Variable Swap

Goal: Understand reassignment.

  1. Create a variable a with value 10.
  2. Create a variable b with value 20.
  3. Log them.
  4. Write code to swap the values so a becomes 20 and b becomes 10.
  5. Hint: You might need a third variable (an empty temporary box) to hold one value while you move the other.

Solution:

let a = 10;
let b = 20;
let temp;

temp = a; // Save 10 into temp
a = b;    // a is now 20
b = temp; // b is now 10 (from temp)
Enter fullscreen mode Exit fullscreen mode

Exercise 2: The Tip Calculator

Goal: Practice Math and Data Types.

  1. Create a const for foodCost (e.g., 100).
  2. Create a const for taxLevel (e.g., 0.1 for 10%).
  3. Create a let for totalBill.
  4. Math: Calculate foodCost + (foodCost * taxLevel).
  5. Use a Template Literal to log: "Your total bill is $110".

Solution:

const foodCost = 50;
const taxLevel = 0.2; // 20%
let totalBill = foodCost + (foodCost * taxLevel);

console.log(`Your total bill is $${totalBill}`);
Enter fullscreen mode Exit fullscreen mode

Part 7: Final QA & Homework

Homework: "The Age in Dog Years"

  1. Store your age in a variable.
  2. Calculate your age in dog years (Multiply your age by 7).
  3. Store the result in a new variable.
  4. Console log: "I am [HumanAge] years old, but in dog years I am [DogAge]!"

Concept Check Questions (Ask the class):

  1. Why do we put script tags at the bottom? (To let HTML load first).
  2. What happens if I try to change a const variable? (Error).
  3. What is the difference between 10 and "10"? (Number vs String).

Top comments (1)

Collapse
 
harsh2644 profile image
Harsh •

Great analogy with the human body! 👏 I've been teaching JavaScript to beginners for a while, and this skeleton-skin-nervous system comparison really clicks. The '10-Day Miracle' history part is fascinating - didn't know Brendan Eich created it that fast! Would love to see Part 2 soon.