1. Introduction to JavaScript
Start with the basics! JavaScript is used to add behavior to web pages.
Mini Project: Write a simple “Hello, World!” program to get familiar with JS syntax.
console.log("Hello, World!");
2. Variables and Data Types
Learn how to store and manipulate data using variables and various data types like strings, numbers, booleans, arrays, and objects.
Mini Project: Create a program that demonstrates the different data types and how to use them.
let name = "Ayush"; // string
let age = 20; // number
let isStudent = true; // boolean
let hobbies = ["Coding", "Music"]; // array
let address = { city: "Mumbai", pincode: 400001 }; // object
3. Operators
Operators help you perform calculations and manipulate values.
Mini Project: Build a simple calculator that can add, subtract, multiply, and divide two numbers.
let num1 = 10;
let num2 = 5;
console.log(num1 + num2); // addition
console.log(num1 - num2); // subtraction
console.log(num1 * num2); // multiplication
console.log(num1 / num2); // division
4. Control Structures
Control the flow of your code using if-else statements.
Mini Project: Write a program that determines if a number is positive, negative, or zero.
let number = 5;
if (number > 0) {
console.log("Positive");
} else if (number < 0) {
console.log("Negative");
} else {
console.log("Zero");
}
5. Loops (for, while)
Loops allow you to repeat a block of code multiple times.
Mini Project: Create a program that prints numbers from 1 to 100 using a loop.
for (let i = 1; i <= 100; i++) {
console.log(i);
}6. Functions
Functions are reusable blocks of code.
Mini Project: Write a function that takes two numbers and returns their sum.
function addNumbers(a, b) {
return a + b;
}
console.log(addNumbers(5, 10));
7. Objects
Objects let you group related data and functionality.
Mini Project: Create a simple contact book where each contact is an object with properties like name, phone, and email.
let contact = {
name: "Ayush",
phone: "9876543210",
email: "ayush@example.com"
};
console.log(contact.name, contact.phone, contact.email);
8. Arrays
Arrays store multiple values in a single variable.
Mini Project: Build a program that manipulates an array of numbers (e.g., find the largest number, sort the array).
let numbers = [5, 10, 2, 8];
console.log(Math.max(...numbers)); // largest number
console.log(numbers.sort((a, b) => a - b)); // sorted array
9. DOM Manipulation
Learn how to interact with HTML elements using JavaScript.
Mini Project: Build a basic to-do list where users can add, remove, and mark tasks as complete.
// Add, remove, and mark tasks in the DOM using JavaScript.10. Events
JavaScript handles user interactions via events.
Mini Project: Create a form that validates user input and displays an alert when the form is submitted.
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
alert("Form submitted successfully!");
});
11. ES6 Features (let, const, arrow functions, etc.)
ES6 brought many improvements to JavaScript.
Mini Project: Refactor a basic function to use arrow functions and demonstrate the use of let and const.
const sum = (a, b) => a + b;
console.log(sum(5, 10));
12. Error Handling (try-catch)
Errors happen! Learn how to handle them gracefully.
Mini Project: Write a program that safely parses JSON and handles potential errors.
try {
let data = JSON.parse('{"name": "Ayush"}');
console.log(data.name);
} catch (error) {
console.log("Error parsing JSON", error);
}13. Asynchronous JavaScript (callbacks, promises)
Understand asynchronous code to handle tasks like fetching data.
Mini Project: Create a simple app that fetches data from an API and displays it using fetch and promises.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log("Error fetching data", error));
14. Async/Await
Simplify asynchronous code using async/await.
Mini Project: Refactor the previous project to use async/await for fetching and displaying data.
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Error fetching data", error);
}
}
fetchData();
15. Local Storage
Store data in the browser using local storage.
Mini Project: Build a note-taking app that saves notes to the browser's local storage.
localStorage.setItem('note', 'This is a note');
console.log(localStorage.getItem('note'));
16. Modules
Organize your code with ES6 modules by splitting it into multiple files.
Mini Project: Create a basic app with separate JavaScript files and use modules to import/export functions.
// import { myFunction } from './module.js';17. Basic Debugging
Use browser dev tools to debug your JavaScript code.
Mini Project: Intentionally break a piece of code and use the console to debug and fix it.
console.log("Debugging is important!");
