🚀JavaScript + Advanced JS
Use this as your core roadmap from beginner → advanced JavaScript mastery.
11 What is JavaScript
1️⃣
Definition:
JavaScript is a programming language used to make web pages interactive and dynamic.
👉 Controls behavior
👉 Handles user actions
👉 Communicates with servers
22 How JavaScript Works in the Browser
2️⃣
11️⃣User loads page
2️⃣Browser reads HTML
3️⃣CSS styles it
4️⃣JavaScript adds logic
⚙️3️⃣Ways to Add JavaScript
3️⃣
Inline
<button onclick="alert('Hi')">Click</button>
Internal
<script>
[Link]("Hello");
</script>
External (Best Practice)
<script src="[Link]"></script>
44 Variables
4️⃣
Definition: Store data values.
let name = "Yonas";
const age = 25;
var city = "Addis";
👉 Use let and const (modern JS)
55 Data Types
5️⃣
• String → "Hello"
• Number → 10
• Boolean → true
• Array → [1,2,3]
• Object → {name:"Jon"}
• Null / Undefined
66 Operators
6️⃣
+ - * / %
=== !==
&& || !
77 Conditions
7️⃣
if (age > 18) {
[Link]("Adult");
} else {
[Link]("Minor");
}
88 Loops
8️⃣
for (let i = 0; i < 5; i++) {
[Link](i);
}
99 Functions
9️⃣
Definition: Reusable block of code.
function greet(name) {
return "Hello " + name;
}
Arrow function:
const greet = name => "Hello " + name;
🌐 🔟 DOM Manipulation
Definition: Change HTML using JS.
[Link]("h1").textContent = "New Title";
Common actions:
✔ Select elements
✔ Change text
✔ Change styles
✔ Add/remove elements
111 Events
1️⃣
[Link]("click", () => {
alert("Clicked");
});
212 Arrays
2️⃣
const fruits = ["apple", "banana"];
[Link]("orange");
3️⃣
1 Objects
const user = {
name: "Yonas",
age: 25
};
⚡4️⃣
4️⃣1 ES6 Features (Must Know)
✔ Arrow functions
✔ Template literals
✔ Destructuring
✔ Spread operator
✔ Modules
Example:
const {name} = user;
515 Asynchronous JavaScript
5️⃣
Callbacks
Promises
Async / Await (Modern)
async function getData() {
const res = await fetch("/api");
const data = await [Link]();
}
616 Fetch API
6️⃣
fetch("[Link]
.then(res => [Link]())
.then(data => [Link](data));
7️⃣
1 Error Handling
try {
riskyCode();
} catch (err) {
[Link](err);
}
8️⃣
1 Advanced Concepts
Closures
Function remembers outer variables.
Scope
Global vs Local vs Block
Hoisting
Variables/functions move to top.
This keyword
Context of execution.
919 Advanced JavaScript (Pro Level)
9️⃣
🔹 Prototypes
Inheritance mechanism.
🔹 Classes
class User {
constructor(name) {
[Link] = name;
}
}
🔹 Modules
export default function() {}
🔹 Event Loop
Handles async tasks.
🔹 Debounce & Throttle
Performance optimization.
0 20 Performance Best Practices
⚡0️⃣
✔ Minimize DOM updates
✔ Use debouncing
✔ Lazy load resources
✔ Avoid global variables
121 Real-World Skills
1️⃣
You should be able to:
✔ Build interactive UI
✔ Fetch API data
✔ Handle forms
✔ Manage state
✔ Debug with console
🧪 Practice Project
Build a Todo App
Features:
✔ Add task
✔ Delete task
✔ Mark complete
✔ Save in localStorage
🏁 Final Outcome
After mastering this you can:
✅ Build dynamic websites
✅ Understand modern frameworks
✅ Work with APIs
✅ Write clean JS logic