Scribd
Upload
10 views4 pages

JavaScript ECMA2024 Presentation Content

The document provides an overview of key concepts in Object-Oriented JavaScript as per ECMA 2024, including the Document Object Model (DOM), interactivity, JSON, classes and inheritance, destructuring, modules, and iteration methods. It includes examples for each concept to illustrate their usage in web development. Additionally, it lists resources for further learning on JavaScript.

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 DOCX, PDF, TXT or read online on Scribd
10 views4 pages

JavaScript ECMA2024 Presentation Content

The document provides an overview of key concepts in Object-Oriented JavaScript as per ECMA 2024, including the Document Object Model (DOM), interactivity, JSON, classes and inheritance, destructuring, modules, and iteration methods. It includes examples for each concept to illustrate their usage in web development. Additionally, it lists resources for further learning on JavaScript.

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 DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

JavaScript (Object-Oriented) – ECMA 2024 Presentation Content

1. JavaScript DOM (Document Object Model)

The DOM is a programming interface for HTML and XML documents. It represents the page
so that programs can change the document structure, style, and content dynamically.

It allows JavaScript to interact with and manipulate the web page. You can update content,
add or remove elements, change styles, and respond to user actions — all without reloading
the page.

Example:
document.getElementById("welcome").innerHTML = "Welcome to My Website!";

2. JavaScript Interactivity

JavaScript interactivity allows users to interact with a website — like clicking a button or
filling a form.

Event listeners are used to respond to actions like clicks or keypresses.

Example:
document.getElementById("btn").addEventListener("click", function() {
alert("Button was clicked!");
});

3. JavaScript Object Notation (JSON)

JSON (JavaScript Object Notation) is a lightweight format used for storing and exchanging
data.

Syntax Example:
{
"name": "Amit",
"age": 25,
"skills": ["JavaScript", "Python", "HTML"]
}

Working with JSON:


let jsonData = '{"name":"Amit","age":25}';
let obj = JSON.parse(jsonData);
let jsonString = JSON.stringify(obj);

4. Classes and Inheritance in JavaScript

Classes provide cleaner syntax for OOP. Inheritance allows one class to reuse code from
another.

Example:
class Animal {
speak() {
console.log("Animal speaks");
}
}
class Dog extends Animal {
bark() {
console.log("Dog barks");
}
}

5. Destructuring, Spread & Rest Operators

Destructuring lets you extract values from arrays or objects easily.

Spread Operator expands array elements:


let arr2 = [...arr1, 3, 4];

Rest Operator gathers arguments:


function sum(...args) { return args.reduce((a, b) => a + b); }

6. JavaScript Selectors

Selectors are used to select and manipulate DOM elements.

Examples:
document.getElementById("id")
document.querySelector(".class")

These allow you to dynamically interact with webpage content.


7. JavaScript Modules

Modules split code into reusable pieces.

Exporting from math.js:


export function add(x, y) { return x + y; }

Importing in main.js:
import { add } from './math.js';

8. For...of Loops and Object Iteration

For...of iterates over iterable objects like arrays.

Example:
for (let color of colors) {
console.log(color);
}

For...in iterates over object properties.

9. Real-World Example

Combining concepts into one example:

HTML:
<button id="greetBtn">Greet</button>
<p id="output"></p>

JavaScript:
class Greeter {
constructor(name) { this.name = name; }
greet() { return `Hello, ${this.name}!`; }
}

document.getElementById("greetBtn").addEventListener("click", () => {
let greeter = new Greeter("Student");
document.getElementById("output").innerText = greeter.greet();
});
10. Resources

- W3Schools: https://www.w3schools.com/js/
- MDN Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- JavaScript Info: https://javascript.info/
- ECMA Specification: https://tc39.es/ecma262/

You might also like