A structured approach to learning JavaScript, including essential topics, demos, and resources.
-
Basics of JavaScript
- Syntax, variables, data types, and basic control structures.
-
Functions
- Declaration, expression, and arrow functions.
-
Objects and Arrays
- Creating and manipulating objects and arrays.
-
DOM Manipulation
- Selecting elements, modifying content, and handling events.
-
Asynchronous JavaScript
- Understanding callbacks, Promises, and async/await.
-
Advanced Topics
- ES6+ features, modules, error handling, and debugging.
let name = "Alice";
let age = 30;
if (age >= 18) {
console.log(`${name} is an adult.`);
} else {
console.log(`${name} is a minor.`);
}Copy code
function greet(user) {
return `Hello, ${user}!`;
}
const greetArrow = (user) => `Hello, ${user}!`;
console.log(greet("Alice"));
console.log(greetArrow("Bob"));Copy code
const person = {
name: "Alice",
age: 30,
hobbies: ["reading", "traveling"]
};
console.log(person.name);
console.log(person.hobbies[0]);
const numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers);Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Manipulation</title>
</head>
<body>
<h1 id="title">Hello World</h1>
<button id="changeTitle">Change Title</button>
<script>
const button = document.getElementById("changeTitle");
button.addEventListener("click", () => {
document.getElementById("title").textContent = "Title Changed!";
});
</script>
</body>
</html>Copy code
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched!");
}, 2000);
});
}
async function getData() {
const data = await fetchData();
console.log(data);
}
getData();