🔹 Day 1/30 – JavaScript Variables (var, let, const) When I started learning JavaScript, I thought variables were one of the easiest topics. But very quickly I realized that many beginner mistakes actually start from here. Variables are used to store data that JavaScript needs to remember — user input, calculations, API data, and application state. Without variables, JavaScript would not be able to create dynamic and interactive websites. JavaScript provides var, let, and const for declaring variables. While var was used earlier, modern JavaScript mostly relies on let and const because they are safer and more predictable. Understanding scope and reassignment early helps avoid confusion later when working with functions, loops, and frameworks. Today reminded me that strong fundamentals matter more than speed. ❓ Do you use const by default while writing JavaScript? #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper
JavaScript Variables: var, let, const Basics
More Relevant Posts
-
Day 60 – JavaScript Basics & Script Integration Today I focused on understanding JavaScript fundamentals and its importance in web development as a scripting language used to add interactivity and dynamic behavior to websites. Topics covered: JavaScript Overview JavaScript as a scripting language Its role in both front-end and back-end development Importance in modern website development Using JavaScript in HTML Linking external JavaScript files using the <script> tag with the src attribute Safe script placement after CSS linking or at the end of the <body> to ensure proper execution and avoid loading issues Understanding internal scripting using <script></script> within HTML Execution & Usage Running HTML files directly for testing Using JavaScript mainly for handling events such as button clicks, animations, form validation, sliders, and other user interactions These concepts are essential for building interactive, responsive, and user-friendly web applications while maintaining clean and structured code. A solid step forward in strengthening core JavaScript knowledge. Continuing the learning journey with consistency and focus. #JavaScript #WebDevelopment #FrontendDevelopment #ScriptingLanguage #HTML #CSS #LearningJourney
-
🚀 Learning JavaScript DOM Manipulation – Real Practice! Today I practiced JavaScript DOM manipulation by working with getElementById() and getElementsByTagName() to dynamically access and modify HTML elements. In this task, I: Created a simple HTML structure with multiple <p> tags Used JavaScript to select elements using their ID and tag name Extracted a specific paragraph value using index Updated the page content dynamically using innerHTML 💡 This helped me clearly understand: How JavaScript interacts with HTML How to access and manipulate multiple elements How dynamic content rendering works in real-time Here’s a small example of what I implemented: ✔ Accessing elements ✔ Reading values ✔ Displaying output dynamically Every small project improves logical thinking and frontend skills 💻✨
-
-
𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝗲𝗿𝗶𝗲𝘀 – 𝗗𝗮𝘆 𝟭𝟬: 𝗜𝗻𝘁𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝘁𝗼 𝗗𝗢𝗠 (𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 𝗢𝗯𝗷𝗲𝗰𝘁 𝗠𝗼𝗱𝗲𝗹) The DOM allows JavaScript to interact with HTML elements. It represents the structure of a web page so JavaScript can read, change, and control content dynamically. 𝗪𝗵𝗮𝘁 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗮𝗻 𝗗𝗼 𝗨𝘀𝗶𝗻𝗴 𝗗𝗢𝗠 • Access HTML elements • Change text and HTML content • Change styles and attributes • Respond to user actions 𝗦𝗲𝗹𝗲𝗰𝘁 𝗮𝗻 𝗘𝗹𝗲𝗺𝗲𝗻𝘁 document.getElementById("title"); 𝗖𝗵𝗮𝗻𝗴𝗲 𝗧𝗲𝘅𝘁 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 document.getElementById("title").innerText = "Hello JavaScript"; 𝗖𝗵𝗮𝗻𝗴𝗲 𝗦𝘁𝘆𝗹𝗲 document.getElementById("title").style.color = "blue"; 𝗞𝗲𝘆 𝗣𝗼𝗶𝗻𝘁𝘀 • DOM connects JavaScript with HTML • Changes happen instantly on the page • DOM manipulation is the foundation of frontend development 𝗧𝗼𝗱𝗮𝘆’𝘀 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 • Create an HTML element with an id • Change its text using JavaScript • Change its color or background Next, we continue with Events and Event Handling in JavaScript. #JavaScriptSeries #Day10 #LearnJavaScript #DOM #JavaScriptBasics #FrontendDevelopment #CodingJourney #techgian
-
🧵 How JavaScript Does 10 Things at Once (While Being Single-Threaded) 🔄 Ever wondered how JavaScript handles API calls, timers, or async tasks without freezing the browser UI? The secret is the Event Loop. Even though JavaScript is single-threaded (it can do only one thing at a time), the Event Loop allows it to be asynchronous and non-blocking. Here’s a simple 4-step breakdown of how it works 👇 1️⃣ Call Stack This is the “Now” zone. JavaScript executes synchronous code here. If a function is in the stack, the engine is busy. 2️⃣ Web APIs / Node APIs When you use `setTimeout`, `fetch`, or DOM events, JavaScript hands them off to the browser/Node environment. This keeps the call stack free so the UI doesn’t freeze. 3️⃣ Callback Queue & Microtask Queue Once async tasks complete, their callbacks wait here. 👉 Promises (Microtasks) always run before timers (`setTimeout`). 4️⃣ Event Loop This is the coordinator. It constantly checks: • Is the Call Stack empty? • If yes → move the next task from the queue to the stack. 🔑 Golden Rule: Avoid blocking the Event Loop with heavy synchronous code — otherwise users will experience laggy interfaces. Learning this really helped me understand async JavaScript better 🚀 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #EventLoop #Programming #javascript
-
-
𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 Today, I explored functions in JavaScript and applied them by building a simple voting system using HTML, Bootstrap, and JavaScript. Functions play a key role in organizing logic and avoiding repetition, especially when handling user interactions and dynamic updates. 𝐖𝐡𝐚𝐭 𝐈 𝐥𝐞𝐚𝐫𝐧𝐞𝐝: • How to use functions to handle repeated logic efficiently • Using event listeners to trigger functions on user actions • Updating the DOM dynamically based on function output • Applying conditional logic inside functions to determine results 𝐊𝐞𝐲 𝐭𝐚𝐤𝐞𝐚𝐰𝐚𝐲: Executing a real task using functions—like determining a leading option in a voting system—helps strengthen core JavaScript concepts and improves problem-solving skills. #JavaScript #FunctionsInJavaScript #WebDevelopment #FrontendDevelopment #LearningByDoing #HandsOnPractice #CodingJourney #ComputerScience #StudentDeveloper
-
Continuing my web development journey with JavaScript! I built a digital clock using HTML, CSS, and JavaScript to practice core JavaScript fundamentals and DOM manipulation. Tech Stack: - HTML - CSS - JavaScript What I learned: - How to use JavaScript to manipulate the DOM - Working with Date & Time APIs - Updating UI dynamically using JavaScript - Integrating logic with frontend UI This project brings static UI to life using JavaScript, showcasing real interactive behavior. Live Demo: https://lnkd.in/g59Wy2vc GitHub Repo: https://lnkd.in/g9w7Fy7c Learning step-by-step and building real interactivity.
-
-
🚀 Built a Live HTML, CSS & JavaScript Code Editor 🔗 Live Demo :https://lnkd.in/gnKsb3_2 I created a live code editor using HTML, CSS, and JavaScript that allows users to write code and instantly see the output in real time. 🔹 Features ✔ Live preview while typing ✔ Separate sections for HTML, CSS & JS ✔ Clean and responsive UI ✔ Beginner-friendly project 🛠️ Tech Stack: HTML | CSS | JavaScript 💻 GitHub Repo: https://lnkd.in/gkFA-bZt I’m continuously learning and building projects to improve my frontend skills. Feedback and suggestions are welcome! 🙌 #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #LearningByBuilding
-
🧵 How JavaScript Does 10 Things at Once (While Being Single-Threaded) 🔄 Ever wondered how JavaScript handles API calls, timers, or async tasks without freezing the browser UI? The secret is the Event Loop. Even though JavaScript is single-threaded (it can do only one thing at a time), the Event Loop allows it to be asynchronous and non-blocking. Here’s a simple 4-step breakdown of how it works 👇 1️⃣ Call Stack This is the “Now” zone. JavaScript executes synchronous code here. If a function is in the stack, the engine is busy. 2️⃣ Web APIs / Node APIs When you use `setTimeout`, `fetch`, or DOM events, JavaScript hands them off to the browser/Node environment. This keeps the call stack free so the UI doesn’t freeze. 3️⃣ Callback Queue & Microtask Queue Once async tasks complete, their callbacks wait here. 👉 Promises (Microtasks) always run before timers (`setTimeout`). 4️⃣ Event Loop This is the coordinator. It constantly checks: • Is the Call Stack empty? • If yes → move the next task from the queue to the stack. 🔑 Golden Rule: Avoid blocking the Event Loop with heavy synchronous code — otherwise users will experience laggy interfaces. Learning this really helped me understand async JavaScript better 🚀 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #EventLoop #Programming
-
-
Ever Wonder How JavaScript Runs in Your Browser? 🚀 Let’s peek under the hood: 1️⃣ JS Arrives in the Browser Your browser downloads HTML, CSS, and JavaScript from the server. JS is just text, but it needs to be understood by the browser to run. 2️⃣ Parsing & Compiling The JavaScript engine (like V8 in Chrome) reads your JS line by line and converts it into machine code your computer can execute. 3️⃣ The Call Stack JS is single-threaded, meaning it runs one task at a time. Functions are added to the call stack when called and removed when finished. 4️⃣ Event Loop & Async Magic JS handles asynchronous tasks (like setTimeout or API calls) with the event loop. Tasks wait in the task queue and are executed when the call stack is empty. 5️⃣ Interaction with the DOM JS manipulates the DOM to update the page dynamically. Changing elements triggers reflows and repaints, so what you see on screen updates instantly. 💡 In a Nutshell: Load JS Parse & Compile Run in Call Stack Handle Async Tasks Update the DOM Understanding this makes debugging and writing efficient JS much easier. #JavaScript #WebDevelopment #Coding #Programming #FrontendDevelopment #WebDevTips #TechInsights #SoftwareEngineering #DeveloperLife #LearnToCode #CodeNewbie #JavaScriptTips #Browser #WebPerformance #AsyncJS
-
More from this author
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