Rohit Waghmare
@Rohit_inTech
Learning to code | Self-taught Web Dev Sharing my dev journey daily
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
🖱️ 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
United States Trends
- 1. Justin Fields 8,816 posts
- 2. Jets 64.7K posts
- 3. Patriots 138K posts
- 4. Drake Maye 17.3K posts
- 5. Henderson 20.1K posts
- 6. Jalen Johnson 3,333 posts
- 7. AD Mitchell 2,197 posts
- 8. Pats 13.5K posts
- 9. Judge 175K posts
- 10. Diggs 9,234 posts
- 11. Cal Raleigh 7,021 posts
- 12. #TNFonPrime 2,987 posts
- 13. #GreysAnatomy 1,938 posts
- 14. Santana 13.4K posts
- 15. #criticalrolespoilers 1,747 posts
- 16. Mike Vrabel 5,502 posts
- 17. Purdue 8,865 posts
- 18. #TNAiMPACT 5,463 posts
- 19. Mack Hollins 2,806 posts
- 20. #JetUp 2,044 posts
Something went wrong.
Something went wrong.