1. What is JavaScript?
JavaScript (JS) is a high-level, interpreted programming language used mainly for web development.
- In browsers, it interacts with HTML and CSS to add interactivity.
- With Node.js, it also runs outside the browser (backend development, APIs, etc.).
🔹 Example (browser console):
console.log("JavaScript is running!");
2. Output Methods
There are different ways to display output in JavaScript:
console.log("Hello from console!"); // Developer console output
alert("Hello from alert!"); // Pop-up alert for users
document.write("Hello from page!"); // Writes directly to the webpage
⚠️ Note: document.write() is not recommended for modern web apps because it can overwrite your page. Use it only for simple demos.
3. Variables: var, let, const
Variables store data in memory.
- var → Old, function-scoped, avoid using in modern code.
- let → Block-scoped, can be reassigned.
- const → Block-scoped, cannot be reassigned.
var a = 10; // Old way
let b = 20; // Modern, preferred
const c = 30; // Cannot be changed
b = 25; // ✅ Works
// c = 40; // ❌ Error: Assignment to constant variable
4. Data Types and Type Conversion
Primitive Types:
- Number →
let num = 42; - String →
let text = "Hello"; - Boolean →
let isTrue = true; - Null →
let empty = null; - Undefined →
let notSet; - Symbol, BigInt (advanced, rarely needed for beginners)
Non-Primitive Types:
- Arrays →
let arr = [1, 2, 3]; - Objects →
let person = {name: "Alice", age: 25}; - Functions →
function greet(){...}
Type Conversion:
let num = Number("42"); // "42" → 42
let str = String(100); // 100 → "100"
let bool = Boolean(0); // 0 → false, any non-zero number → true
👉 Use typeof to check data type:
console.log(typeof "hello"); // string
console.log(typeof 42); // number
5. Operators
Arithmetic Operators:
console.log(10 + 5); // 15
console.log(10 - 3); // 7
console.log(10 * 2); // 20
console.log(10 / 2); // 5
console.log(10 % 3); // 1 (remainder)
console.log(2 ** 3); // 8 (exponentiation)
Assignment Operators:
let x = 10;
x += 5; // 15
x *= 2; // 30
Comparison Operators:
console.log(5 == "5"); // true (loose equality)
console.log(5 === "5"); // false (strict equality)
console.log(10 > 5); // true
Logical Operators:
console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false
6. Comments and Clean Code
Comments explain code and improve readability.
// Single-line comment
/*
Multi-line comment
Used for longer explanations
*/
✅ Best Practices:
- Use meaningful variable names (
userAgeinstead ofx). - Write small, reusable functions.
- Format your code neatly (indentation, spacing).
7. Conditional Statements
let score = 80;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 75) {
console.log("Grade: B");
} else {
console.log("Grade: C");
}
Switch Example:
let day = "Monday";
switch (day) {
case "Monday":
console.log("Start of the week!");
break;
case "Friday":
console.log("Weekend is near!");
break;
default:
console.log("Just another day");
}
8. Loops
Loops repeat code.
// For loop
for (let i = 1; i <= 5; i++) {
console.log("For loop number:", i);
}
// While loop
let j = 1;
while (j <= 3) {
console.log("While loop:", j);
j++;
}
// Do...while loop
let k = 1;
do {
console.log("Do...while loop:", k);
k++;
} while (k <= 2);
👉 break stops the loop, continue skips to the next iteration.
9. Functions
Functions are blocks of code you can reuse.
// Function declaration
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Alice"));
// Function expression
const add = function(a, b) {
return a + b;
};
console.log(add(3, 4));
// Arrow function (ES6)
const multiply = (a, b) => a * b;
console.log(multiply(2, 5));
10. Arrays
Arrays store lists of values.
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // apple
fruits.push("orange"); // add to end
fruits.pop(); // remove from end
fruits.shift(); // remove from start
fruits.unshift("kiwi"); // add to start
console.log(fruits); // ["kiwi", "banana", "cherry"]
👉 Arrays can hold mixed data types:
let mixed = [42, "hello", true, { key: "value" }];
11. Objects
Objects store data as key-value pairs.
let car = {
brand: "Toyota",
model: "Corolla",
year: 2022,
start: function() {
console.log("Car started!");
}
};
console.log(car.brand); // Toyota
console.log(car["model"]); // Corolla
car.start(); // Car started!
12. Basic DOM Manipulation
DOM = Document Object Model → Represents the structure of a webpage.
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello World</h1>
<button id="btn">Click Me</button>
<script>
let title = document.getElementById("title");
let button = document.getElementById("btn");
button.addEventListener("click", function() {
title.innerText = "Button Clicked!";
title.style.color = "blue"; // Change style dynamically
});
</script>
</body>
</html>
👉 With JavaScript, you can change text, styles, and even create new elements dynamically.
✅ Conclusion
By learning these basic JavaScript concepts, you now understand:
- Variables, data types, operators
- Conditions and loops
- Functions, arrays, and objects
- DOM manipulation for interactive webpages
This foundation will prepare you for advanced topics like ES6 features, asynchronous programming (Promises, async/await), and frameworks like React or Vue.
🚀 Next step: Start building small projects like a to-do list app, a digital clock, or a calculator.