Scribd
Upload
3 views

JavaScript ECMA2024 Presentation

The document provides an overview of JavaScript's object-oriented programming features as per ECMAScript 2024, focusing on DOM manipulation, interactivity, and JSON. It covers key concepts such as classes, inheritance, destructuring, and modules, along with practical examples. The summary emphasizes the importance of modern OOP and UI interaction skills in web development.

Uploaded by

pramukhjainofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

JavaScript ECMA2024 Presentation

The document provides an overview of JavaScript's object-oriented programming features as per ECMAScript 2024, focusing on DOM manipulation, interactivity, and JSON. It covers key concepts such as classes, inheritance, destructuring, and modules, along with practical examples. The summary emphasizes the importance of modern OOP and UI interaction skills in web development.

Uploaded by

pramukhjainofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

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);

You might also like