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/
