😊 hello linkedin........... 🚀 JavaScript DOM Essentials: querySelectorAll() + setAttribute() When building interactive web pages, you’ll often need to select elements and modify their attributes dynamically. Two of the most powerful DOM methods for this are querySelectorAll() and setAttribute() 💪 🧠 querySelectorAll() This method helps you select all elements that match a specific CSS selector. It returns a NodeList — which is similar to an array — allowing you to loop through elements and apply changes easily. Harish M Manivardhan Jakka #Python #Django #JavaScript #HTML #CSS #SQL #API #JSON #NumPy #Pandas #Coding #Programming #WebDevelopment #FullStackDevelopment #FrontendDevelopment #BackendDevelopment #SoftwareDevelopment #SoftwareEngineer #WebDeveloper #PythonDeveloper #JavaScriptDeveloper #CodingJourney #LearningInPublic #BuildInPublic #100DaysOfCode #TechLearning #TechJourney #DeveloperCommunity #CodeNewbie #SelfLearning #ContinuousLearning #CodeLife #ProgrammerLife #LearningNeverStops #WebApp #SoftwareProjects #TechSkills #CodingMotivation #CodeEveryday #DataScience #Database #LogicBuilding #Debugging #ProjectBasedLearning #PythonProjects #DjangoDeveloper #FullStackEngineer #TechCommunity #NaveenLearns #Innovation #ProblemSolving #CodeWithNaveen #MachineLearning #AI #ArtificialIntelligence #CloudComputing #DataAnalytics #CyberSecurity #WebDesign #OpenSource #DeveloperLife #CodingGoals #FutureDeveloper #TechEnthusiast
More Relevant Posts
-
🛑 Still using this to deep clone objects in JavaScript? JSON.parse(JSON.stringify(obj)) It works… until it doesn’t 😅 It breaks with: ❌ Dates (turn into strings) ❌ Maps / Sets (lost completely) ❌ undefined & functions (removed) ❌ Circular references (throws error) JavaScript now has a modern, safer solution: structuredClone(obj) ✨ Supports circular references ✨ Preserves Date, Map, Set, RegExp ✨ Faster & built-in in modern JS/Node I wrote a simple blog with easy examples explaining why this matters, including a quick view of Shallow vs Deep cloning so the concept is crystal clear even for beginners. 🔗 Read it here: https://lnkd.in/dVcGiNwv #JavaScript #WebDevelopment #Programming #NodeJS #TypeScript #JSTips #CleanCode #SoftwareEngineering #Developers #WebDev #CodingLife
To view or add a comment, sign in
-
-
🚀 Today’s JavaScript Learning Recap: Character Counter + Web Storage Essentials In today’s session, we dived into two core JavaScript concepts — creating a Character Counter and understanding how Local Storage & Session Storage work behind the scenes to retain data on the client side. 1️⃣ Building the Character Counter Feature We kicked things off by developing a simple yet useful functionality: A textarea that allows only 20 characters, while continuously showing how many characters are left as the user types. Through this exercise, we strengthened our grasp of: ✅ DOM manipulation ✅ Handling events like onkeyup ✅ Updating UI elements dynamically in real time 2️⃣ Exploring Local Storage & Session Storage After practicing with character counting, we moved on to how browsers store data with the Web Storage API. 💾 Local Storage Stores data permanently in the browser. Information persists even after refreshes or browser restarts. Perfect for themes, tokens, user preferences, and lightweight data. Common Methods: localStorage.setItem("key", "value") localStorage.getItem("key") localStorage.removeItem("key") localStorage.clear() Why it’s useful: ✅ Enhances user experience ✅ Minimizes server dependency ✅ Simple and efficient 🕒 Session Storage Works like Local Storage but only for the current tab session. Data disappears once the tab is closed. Common Methods: sessionStorage.setItem("key", "value") sessionStorage.getItem("key") sessionStorage.removeItem("key") sessionStorage.clear() Best suited for: ✅ Temporary form data ✅ One-session state management ✅ Scenarios where data shouldn’t persist after closing the tab 🔧 Character Counter – Practical Workflow Script detects every key press. Updates remaining characters out of 20. If input exceeds the limit, extra characters are trimmed and a warning message is shown. 💡 Final Thoughts Today’s hands-on session helped us understand both interactive UI handling and efficient client-side data management. A big thank-you to Siva Ram Teja Sir for the clear explanations and practical guidance! Thanks to Ravi Siva Ram Teja Nagulavancha sir Saketh Kallepu sir Uppugundla Sairam sir Codegnan #JavaScript #WebDevelopment #Frontend #WebStorage #LocalStorage #SessionStorage #Coding #Programming #ContinuousLearning #TeamLearning
To view or add a comment, sign in
-
🌟 Learning JavaScript — Step by Step! Today, I practiced some of the most useful JavaScript methods — and it was a really fun and insightful experience! 🚀 Instead of just reading theory, I decided to create a simple interactive page that shows how Math, Number, and String methods work in real-time. This small practice helped me understand how these methods behave and how JavaScript interacts with the browser dynamically. 🧮 Math Methods Practiced Math.abs() → returns the absolute value Math.ceil() & Math.floor() → round numbers up or down Math.round() → normal rounding Math.sqrt() & Math.pow() → square root & powers Math.random() → generating random values 🔢 Number Methods Explored toFixed() → limit decimals parseInt() & parseFloat() → convert strings to numbers isNaN() → check for invalid numbers Number() → type conversion 🔤 String Methods Tried split() → break strings into arrays startsWith() / endsWith() → check string positions toUpperCase() / toLowerCase() → text transformations replaceAll() → replace text dynamically concat() & repeat() → combine and duplicate strings ✨ What I Learned: How JavaScript methods make data manipulation simple and powerful ⚙️ How to format and display data dynamically using DOM functions How to build a live digital clock with 12-hour format (AM/PM) ⏰ How to style my interface beautifully using CSS gradients and transitions 🎨 This isn’t a big project — but it’s a meaningful step in my learning journey. Every small practice builds confidence and helps me write cleaner, better code. 💪 Live Demo: https://lnkd.in/gvu5pPJz Source Code: https://lnkd.in/g6AjcaRM 💡 Technologies Used: 🔸 HTML5 🔸 CSS3 🔸 JavaScript 10000 Coders #javascript #html #programming #coding #css #java #python #programmer #developer #webdevelopment #webdeveloper #coder #code #php #webdesign #codinglife #softwaredeveloper #computerscience #software #reactjs #technology #frontend #development #tech #linux #frontenddeveloper #javascriptdeveloper #programmers #softwareengineer #web
To view or add a comment, sign in
-
✅ What is HTML? HTML stands for HyperText Markup Language. It is the standard language used to create and structure webpages. HTML is not a programming language — it is a markup language that tells the browser how to display content. 🧩 What does HTML do? It structures the content on a webpage, such as: Headings Paragraphs Images Links Lists Tables Forms 🔗 HTML + CSS + JavaScript HTML alone = structure CSS = style and colors JavaScript = interaction and behavior Together → complete web development #HTML #CODING #JAVASCRIPT #PYTHON #CSS #REACT
To view or add a comment, sign in
-
-
🧱Objects — The Foundation of Everything in JavaScript 🗓️ This week, I focused on JavaScript Objects — and honestly, it changed how I see the language. From arrays to functions, almost everything in JS is built on objects. 💡Learning about prototypes, object methods, and inheritance made me realize how JavaScript manages structure without strict classes. “In JavaScript, objects don’t just hold data — they define behavior.” Once you get comfortable with the prototype chain, JS starts to feel less confusing and more elegant. #JavaScript #OOP #Programming #WebDevelopment #Frontend #CodingJourney #Developers
To view or add a comment, sign in
-
-
JavaScript Learning – Today's Topic : Understanding Closures Have you ever seen a function “remember” variables even after its parent function has finished running? 🤔 That’s not magic — it’s called a Closure ✨ 🔍 What is a Closure? A closure is formed when an inner function “remembers” the variables of its outer function, even after that outer function has completed execution. In short: Functions remember the environment they were created in. Example 1: Simple Closure Javascript function outer() { let name = "Venkatesh"; function inner() { console.log("Hello, " + name); } return inner; } const greet = outer(); greet(); // Output: Hello, Venkatesh Explanation: • The outer() function returns inner(). • Even though outer() is done executing, the inner function still remembers the name — that’s closure! Example 2: Private Variables (Real-life Use) Javascript function counter() { let count = 0; return { increment: function() { count++; console.log(count); }, decrement: function() { count--; console.log(count); } }; } const myCounter = counter(); myCounter.increment(); // 1 myCounter.increment(); // 2 myCounter.decrement(); // 1 ✅ Here, count is private — you can’t access it directly from outside! Closures help in data hiding and encapsulation (like private variables in OOP). 🧠 Why Closures Are Useful ✅ Maintain state between function calls ✅ Implement data privacy ✅ Used in callbacks and event listeners ✅ Help create factory functions and module patterns In Simple Words A closure is like a backpack 🎒 — when a function travels, it carries the variables it needs from its home environment. #JavaScript #Closures #WebDevelopment #Coding #FrontendDevelopment #LearnToCode #JSConcepts #WebDev #Programming #Developer #CodeNewbie #100DaysOfCode #SoftwareEngineering #JavaScriptTips #CodeWithVenkatesh #WebTech #AsyncJS #TechLearning #InterviewPrep
To view or add a comment, sign in
-
5 JavaScript Basics That Will Change Everything 1. var, let, and const (Scope & Hoisting): Just avoid using the var keyword. Understand how let and const alone can serve. This is Step 1 to writing clean code. 2. Closures (The "Memory" Trick): This one is tricky as you might mistake it for encapsulation in OOP, but it’s pure magic once you understand it. Think of it as a function having a secret memory of the variables from where it was born. It’s a reason advanced features work smoothly. 3. The Event Loop (How JS Multitasks): JavaScript is single-threaded. It can only do one thing at a time. So how does it fetch data from a server without freezing the whole app? You need to understand the Call Stack, Web APIs, and the Message Queue. This explains Promises! 4. The "this" Keyword (The Shapeshifter): This means something different depending on where you call a function from. Don't guess! Learn a little bit about how bind, call, and apply gives you total control. 5. Prototypal Inheritance (What Classes Are Hiding): You use class in modern JavaScript, right? Okay nice... Dig one layer deeper to see clearer. Prototypal Inheritance is the core mechanism JavaScript uses to share methods and properties. Understanding this makes debugging complex libraries much less painful. Which one of these made you feel like throwing your keyboard across the room when you first learned it? If you want me to get more elaborate each one of them, let me know in the comments! And if this was a helpful reality check, please leave a like and connect for more straight-up coding insights. #JavaScript #WebDevelopment #CodingBasics #Programming #BeginnerDev
To view or add a comment, sign in
-
-
🌐 Introduction to JavaScript JavaScript is a lightweight, interactive scripting language that comes with many built-in methods. It plays a key role alongside HTML and CSS to make webpages dynamic and engaging. 🧩 Where JavaScript Is Used JavaScript is used in web development to: Add interactivity Handle user input Communicate with servers for dynamic content 💻 Example Script // Display an alert message window.alert("This is an alert message!"); // Print output to the console console.log("Hello from JavaScript!"); ⚙️ Features of JavaScript ✅ Easy to use ⚡ Fast response time 🔁 Flexible and powerful 🚀 JIT (Just-In-Time) compiler — works as both compiler and interpreter 🧠 Common Console Methods window.alert("Alert message"); console.log("Log message"); console.warn("Warning message"); console.info("Information message"); 📘 console: A built-in JS object giving access to the browser’s debugging console. 🧩 log(), warn(), info() are methods used to print messages or information. 🧱 Objects in JavaScript Objects are collections of properties and methods. Properties (fields): Store data like strings or numbers. Methods (functions): Perform actions. ⚠️ Common JavaScript Errors 1️⃣ Syntax Errors – mistakes in code structure 2️⃣ Reference Errors – using variables not defined 3️⃣ Type Errors – invalid operations on data types 🔡 JavaScript Variables – var, let, const Variables are used to store data values. There are three ways to declare them: var, let, and const 10000 Coders #Frontend #JavaScript #LearningNewThings #WebDevelopment #Coding #Programming
To view or add a comment, sign in
-
-
A tiny but powerful library! 😎 Let me tell you about magic-bytes.js 👇 I was working on a project that involved file uploads, and suddenly I realized that some people were changing file names or extensions! Like someone uploads file.jpg but it’s actually a PDF 😂 So I thought, “I need a way to detect the real file type…” And that’s when I found magic-bytes.js — and honestly, it saved me 👏 ⸻ 🧙♂️ What this library does: This library reads the first few bytes of a file — known as magic numbers — and determines the real file type 🔍 So even if someone changes the file name or extension, the library will expose it 😂 A tiny example: import { fileTypeFromBuffer } from 'magic-bytes.js' import fs from 'fs' const buffer = fs.readFileSync('test-file') const type = fileTypeFromBuffer(buffer) console.log(type) // Output example: // { mime: 'image/png', extension: 'png' } ⚡ Why you should use it: ✅ Protects you from files with fake extensions. ✅ Super useful for uploads and file validation before saving. ✅ Lightweight, simple, and requires zero configuration. Honestly, I just tried it out for fun, but it really works like magic 🔮 If anyone has used it before or has another way to detect real file types, drop it in the comments 👇 #BNE #javascript #nodejs #backend #webdev #opensource #developers #coding
To view or add a comment, sign in
-
🧠 Today’s JavaScript Learning — Math, Date & DOM Objects Today, I explored some of the most important built-in objects in JavaScript that power web functionality and dynamic page behavior 💡 ⚫ Math Object Properties: Math.PI, Math.E Methods: round(), floor(), ceil(), random(), max(), min(), sqrt(), pow(), abs() ⚪ Date Object Date Creation & Retrieval: getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes(), getSeconds() Set Methods: setFullYear(), setMonth(), setDate(), setHours() Formatting: toDateString(), toTimeString() 🟢 DOM (Document Object Model) Selecting Elements: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll() Modifying Elements: innerHTML, innerText, textContent, style, classList DOM Navigation: parentNode, childNodes, firstChild, lastChild, nextSibling, previousSibling Creating & Removing: createElement(), appendChild(), removeChild(), replaceChild() Attributes: getAttribute(), setAttribute(), removeAttribute() 🚀 Excited to see how these objects make webpages more dynamic, interactive, and functional! #JavaScript #WebDevelopment #DOM #Frontend #LearningEveryday #CodingJourney #MathObject #DateObject #LearningJourney #CodingEveryday #Frontend #Objects #Strings #Arrays #DeveloperJourney
To view or add a comment, sign in
-
Explore related topics
- Engineering Skills for Website Development
- Essential Skills for Advanced Coding Roles
- Front-end Development with React
- How to Start Learning Coding Skills
- Key Skills Needed for Python Developers
- Programming Skills for Professional Growth
- Programming in Python
- How to Use AI for Manual Coding Tasks
- Clean Code Practices For Data Science Projects
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development