⚡

JavaScript Basic

2 weeks Intermediate

Clicking a button changes text. Creating interactions.

Overview

What is this?

JavaScript adds behavior and interactivity to web pages.

Why is it important?

Transforms static pages into web apps.

What you'll learn
  • Variables and data types
  • Functions
  • DOM manipulation
  • Events

Detailed Explanation

Variables (const, let)

Containers for data. const cannot be reassigned; let can. var is no longer recommended.

Examples:
  • const name = 'John';
  • let count = 0;
Tips:
  • Use const by default. Use let only when you need to reassign.
Common mistakes:
  • Trying to reassign a const variable causes an error

Conditionals (if & ternary)

Create 'if this, do that' logic. For simple splits, the ternary operator (condition ? true : false) is handy.

Examples:
  • if (age >= 18) { console.log('Adult'); }
  • const result = score >= 60 ? 'Pass' : 'Fail';
Tips:
  • Use === instead of == for strict equality (checks both value and type)
Common mistakes:
  • Using = (assignment) instead of === (comparison) like if (a = 1)

Loops (for loop)

Repeat the same operation multiple times. Often used to process arrays.

Examples:
  • for (let i = 0; i < 5; i++) {\n console.log(i);\n}
Tips:
  • map or forEach are often better for array iterations
Common mistakes:
  • Creating an infinite loop that crashes the browser

Functions and Arrow Functions

Blocks of code. Recently, the shorter `() => {}` syntax (arrow function) is very popular.

Examples:
  • function greet() { return 'Hello'; }
  • const double = (x) => x * 2;
Tips:
  • Single-line arrow functions can omit the return keyword and curly braces
Common mistakes:
  • Adding {} but forgetting the return keyword, resulting in 'undefined'

String Manipulation (Template Literals)

You can use + to combine strings, but wrapping in backticks (`) lets you embed variables directly.

Examples:
  • const msg = `Hello, ${name}`;
Tips:
  • Backticks are usually found near the top left of the keyboard
Common mistakes:
  • Using single quotes ' ' means ${name} won't be replaced

Arrays & Array Methods (map, filter)

Group multiple values. map transforms every item, filter creates a new array with items that match a condition.

Examples:
  • const arr = [1, 2, 3];
  • const doubled = arr.map(n => n * 2);
Tips:
  • These methods do not modify the original array (non-destructive)
Common mistakes:
  • Forgetting that array indexes start at 0, not 1

Practical Steps

  1. 1
    Hello, Developer Console 2 mins

    Open the console and let's run some math directly in the browser.

    • Write a console.log statement inside a <script> tag
    • Check the 'Console' tab in DevTools
    <script>
console.log('Calculating...');
console.log(100 + 50 * 2);
</script>
  2. 2
    Variables and Math 3 mins

    Store prices, calculate tax, and output the result.

    • Declare a 'price' variable using const
    • Calculate 'tax' using let or const
    • Log the final total
    <script>
const price = 1000;
const taxRate = 0.1;
const total = price + (price * taxRate);

console.log(`The total price is $${total}`);
</script>
  3. 3
    Arrays and Loops 5 mins

    Group data together and loop through them to print each one.

    • Create an array of fruits
    • Use a 'for' loop to iterate and log each one
    <script>
const fruits = ['Apple', 'Banana', 'Orange'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
</script>

Career & real-world context

JS basics precede React/Vue/TS—most frontend jobs require JavaScript.

Industry examples

  • Form validation
  • Analytics events
  • Simple UI toggles

Recommended study plan

Variables → functions → arrays → objects → conditionals → loops.

Prerequisites

JS basics precede React/Vue/TS—most frontend jobs require JavaScript.…

Frequently Asked Questions

Why doesn't 0.1 + 0.2 equal 0.3? Is JS broken?
Welcome to programming! It's not a JS bug, it's caused by the 'IEEE 754' standard for floating-point math. When dealing with money, multiply by 10/100 to make them whole numbers, do the math, and divide back down. It's an ugly but necessary hack.
Why do everyone hate 'var'? It works fine for me.
Because it's an agent of chaos. 'var' doesn't respect block scope (things inside {}), meaning it can randomly overwrite a variable with the same name halfway across your code and cause nightmare bugs. Just stick to 'const' and 'let' to keep your variables safely contained.
What the heck is the difference between == and ===?
=== is strict. It checks if both value AND type match. == is way too friendly; it tries to convert types behind your back, meaning it thinks string '0' and number 0 are the same. It breeds unpredictable bugs. Seriously, just use === for the rest of your life.
My 'this' keyword randomly changed its value and broke my app...
Ah, the darkest corner of JavaScript. The value of 'this' changes based on *how* the function was called, like a chameleon. Thankfully, modern JS gave us Arrow Functions (() => {}), which lock 'this' to whatever it was when you wrote it. Peace at last.
Avoid var?
Use const/let; var function scope causes bugs.
console.log in prod?
Great for dev—remove or replace before release.

① Read the explanation. Next: ② Do exercises.

You've learned JS basics.

Next we learn layout (Flexbox/Grid).

② Do exercises (15 problems)
Related tools: JSON Formatter

🛠️ Recommended Dev Tools

Image Compression & WebP Conversion

Compress images locally with no server uploads. Keep quality while reducing size.

JSON Formatter & Validator

Format messy JSON for readability. Check syntax errors instantly.

JWT Decode & Verify

Decode JWT tokens instantly. Check expiration and claims.