Rohit Waghmare @Rohit_inTech

Common JavaScript Events click: User clicks an element mouseover: Mouse over an element keydown: Key pressed submit: Form submission load: Page fully loaded Handle these to enhance UX! #JavaScript #WebDev #100daysofcoding #day19

Focus on improving.

🖱️ Handling Click Events Use addEventListener to respond to user interactions. button.addEventListener('click', () => { alert('Button clicked!'); }); This makes your web pages interactive! #JavaScript #DOM #100DaysOfCode

🧠 What are JavaScript Events? Events are actions that occur in the browser, like clicks or key presses. JavaScript can listen for these events and respond accordingly. #JavaScript #WebDevelopment #day18

🔄 DOM Recap The DOM allows JavaScript to: Access elements Modify content and styles Create and remove elements Handle user events Mastering the DOM is key to dynamic web development! #LearnToCode3 #100daysofcode

🛠️ Creating Elements Add new elements to your page: let newDiv = document.createElement('div'); newDiv.textContent = 'Hello World!'; document.body.appendChild(newDiv); Build your page dynamically! #FrontendDevelopment #learndom

Styling Elements Inline styles can be changed via element.style.property (e.g., element.style.color = 'red'). CSS classes can be manipulated using element.classList methods like add(), remove(), and toggle(). #learnjs #100DaysOfCode

Manipulating Content and Attributes Modify using element.textContent or element.innerText. HTML Content: Modify using element.innerHTML. Attributes: Access or modify using element.getAttribute('attr') and element.setAttribute('attr', 'value'). #100DaysOfCode #day17

🧠 Remember: The DOM is the bridge between HTML and JavaScript. JS alone can't "see" HTML — it uses the DOM to do that. Learn DOM → Build real websites → Have fun coding 💻✨ #FrontendDev #DOM #100DaysOfCode

➕ Want to add new content with JS? let para = document.createElement("p"); para.textContent = "New paragraph!"; document.body.appendChild(para); Boom! New element added to your page 📦✨ #WebDevelopment #100daysofcode #day16 #learnjs

🎨 You can even change the style of your page with DOM! let box = document.querySelector(".box"); box.style.backgroundColor = "blue"; Change color, font, size — anything CSS can do! #CSS #DOM #JavaScript #100DaysOfCode

✏️ Want to change text with JS? Example: let title = document.querySelector("h1"); title.textContent = "Hello, World!"; Now your <h1> shows new text. Magic! 🪄 (DOM power 💪) #Coding #100DaysOfCode #day15

🔍 Want to grab something from your page? Use selectors: document.querySelector("p"); // first <p> document.getElementById("myId"); // by ID These let you select elements to change them later! 🎯 #JavaScript #DOM #100DaysOfCode

🧠 Meet document in JavaScript! It gives you access to the whole webpage. Example: console.log(document); This shows your full HTML structure — ready to be explored or changed! 🕵️‍♂️ #LearnJS #DOM #100daysofcode #day14

Think of DOM like a family tree of your webpage. Each element (<h1>, <p>, <div>) is a node in the tree. JavaScript can go to any node, and say: 👉 “Change something!” 👉 “Add something!” 👉 “Delete something!” #code #JavaScript #day13

What is the DOM? DOM = Document Object Model. It’s how your browser sees your HTML page as a tree of elements. JavaScript uses the DOM to read, change, or control your webpage! 🧠 #JavaScript #WebDev #100DaysOfCode

Functions vs. Methods Summary 📊 Functions vs. Methods Function: Independent block of code. Method: Function associated with an object. Understanding the difference helps in writing organized and efficient code. #JavaScript #CodingTips #100DaysOfCode #learnjs

Adding Methods to Objects 🧱 Custom Methods in Objects You can add your own methods to objects. Example: const calculator = { add: function(a, b) { return a + b; } }; console.log(calculator.add (2, 3)); // Outputs: 5#JavaScript #CustomMethods #100DaysOfCode #day12

🛠️ Using Built-in Methods JavaScript provides methods for strings, arrays, etc. Example: let text = "hello world"; console.log(text.toUpperCase()); // Outputs: HELLO WORLD #JavaScript #BuiltInMethods #day12 #100DaysOfCode