JavaScript (Object-Oriented) ECMA
2024
• DOM Manipulation, Interactivity, and JSON in
Focus
• Presented by: [Your Name]
• College Name: [Your College]
Introduction to JavaScript
• High-level, interpreted language
• Supports Object-Oriented Programming (OOP)
• Modern features in ECMAScript 2024
• Used for web development
Object-Oriented Programming
(OOP)
• Focuses on objects, not actions
• Key principles: Encapsulation, Inheritance, etc.
• JS uses prototype-based OOP
Classes & Constructors
• Introduced in ES6
• A class is a blueprint for objects
Inheritance
• Allows one class to inherit from another
• Use 'extends' and 'super'
Destructuring Arrays & Objects
• Easily extract values from arrays or objects
For...of Loops and Object Iteration
• Loops through iterable objects like arrays
Spread & Rest Operators
• Spread: expands elements
• Rest: collects elements
JavaScript Modules
• Organize code into separate files
• Use 'export' and 'import'
JavaScript DOM
• DOM is the interface for HTML/XML
• JS can manipulate elements in real time
DOM Manipulations
• Access: getElementById, querySelector
• Modify: innerHTML, style
• Add/remove: appendChild, removeChild
JavaScript Interactivity
• Event handling with onclick, keydown, etc.
• Change behavior dynamically
JavaScript Selectors
• Select elements using getElementById,
querySelector, etc.
JavaScript Object Notation (JSON)
• Lightweight data format
• Used for data interchange
Summary
• Modern OOP and UI interaction in JS
• DOM, events, JSON = key web skills
References
• w3schools.com
• developer.mozilla.org
• ECMA Official Docs
OOP Example
• let person = {
name: "Alice",
greet() { console.log(`Hi, I'm ${this.name}`); }
};
person.greet();
Class Example
• class Car {
constructor(brand) {
this.brand = brand;
}
drive() { console.log(`${this.brand} is driving`); }
}
let myCar = new Car("Toyota");
myCar.drive();
Inheritance Example
• class Animal {
speak() { console.log("Animal speaks"); }
}
class Dog extends Animal {
speak() { console.log("Dog barks"); }
}
let d = new Dog();
d.speak();
Destructuring Example
• let [a, b] = [1, 2];
let {name, age} = {name: "Amit", age: 22};
For...of Example
• let fruits = ["apple", "banana"];
for (let fruit of fruits) {
console.log(fruit);
}
Spread/Rest Example
• function sum(...nums) {
return nums.reduce((a, b) => a + b);
}
let nums = [1, 2, 3];
console.log(sum(...nums));
Modules Example
• // add.js
export function add(x, y) { return x + y; }
// main.js
import { add } from './add.js';
DOM Example
• document.getElementById("demo").innerText = "Hello DOM!";
DOM Manipulation Example
• document.querySelector(".box").style.backgroundColor = "blue";
Interactivity Example
• document.getElementById("btn").onclick = function() {
alert("Button clicked!");
};
Selector Example
• let el = document.querySelector("#myId");
el.style.color = "green";
JSON Example
• let jsonString = '{"name":"Ravi","age":30}';
let obj = JSON.parse(jsonString);
console.log(obj.name);
