JavaScript Tutorial (Basic to Advanced)
1. Introduction to JavaScript
JavaScript (JS) is a high-level, interpreted programming language widely used to create
dynamic and interactive web applications. It is one of the core technologies of the web
along with HTML and CSS.
Key Features
• Lightweight and versatile
• Cross-platform compatibility
• Event-driven and asynchronous
• Supports OOP and functional programming
2. Basics of JavaScript
2.1 Variables
var name = "John"; // function-scoped
let age = 25; // block-scoped
const PI = 3.1416; // block-scoped, constant value
2.2 Data Types
• Primitive Types: string, number, boolean, null, undefined, symbol, bigint
• Reference Types: object, array, function
let str = "Hello";
let num = 10;
let flag = true;
let arr = [1, 2, 3];
let obj = { key: "val" };
2.3 Operators
• Arithmetic: + - * / % **
• Comparison: == === != !== > < >= <=
• Logical: && || !
• Assignment: = += -= *= /=
2.4 Control Structures
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
while (age < 30) {
age++;
}
3. Functions
3.1 Function Declaration
function greet(name) {
return `Hello, ${name}`;
}
3.2 Function Expression
const greet = function(name) {
return `Hello, ${name}`;
}
3.3 Arrow Functions
const greet = (name) => `Hello, ${name}`;
3.4 Default Parameters
function add(a = 0, b = 0) {
return a + b;
}
4. Objects and Arrays
4.1 Object Basics
const person = {
name: "Alice",
age: 25,
greet() {
console.log("Hello");
}
};
4.2 Array Methods
const nums = [1, 2, 3];
nums.push(4);
nums.pop();
nums.map(x => x * 2);
nums.filter(x => x > 1);
5. DOM Manipulation
document.getElementById("myId").innerText = "Updated";
document.querySelector(".myClass").style.color = "red";
Event Listeners:
document.getElementById("btn").addEventListener("click", () => {
alert("Button clicked!");
});
6. Advanced JavaScript
6.1 Closures
• Closures exist due to lexical environment and lexical scope, allowing inner
functions to access variables from their outer function even after the outer function
has returned.
function outer() {
let count = 0;
return function inner() {
count++;
return count;
}
}
const counter = outer();
console.log(counter());
console.log(counter());
6.2 Promises & Async/Await
• Promises help overcome callback hell and inversion of control by providing a
cleaner, chainable way to handle asynchronous operations.
const fetchData = new Promise((resolve) => {
setTimeout(() => resolve("Data fetched"), 1000);
});
fetchData.then(data => console.log(data));
async function getData() {
const data = await fetchData;
console.log(data);
}
getData();
6.3 Event Loop
console.log("Start");
setTimeout(() => console.log("Async"), 0);
console.log("End");
6.4 Modules
// export.js
export const PI = 3.14;
export function sum(a, b) { return a + b; }
// import.js
import { PI, sum } from './export.js';
6.5 Error Handling
try {
throw new Error("Something went wrong");
} catch (err) {
console.error(err.message);
}
7. Real-World Applications of JavaScript
• Frontend Development: React, Angular, Vue
• Backend Development: Node.js, Express.js
• Mobile Apps: React Native, Ionic
• Game Development: Phaser.js
• AI/ML: TensorFlow.js
8. Conclusion
JavaScript is an essential skill for any software developer. By mastering its concepts from
basics to advanced levels, you can build interactive web applications, scalable backend
systems, and cross-platform apps.
