Day 46 of #180daysofcode 🚀 Part 1 Today I revised JavaScript Fundamentals – the real brain behind web applications 🧠 We often say: HTML → Structure CSS → Design JavaScript → Brain But what exactly does that mean? ❓ What is JavaScript? Makes web pages interactive Runs inside the browser Controls logic and behavior Without JavaScript, websites are just static pages. 📦 Variables in JavaScript Variables store data in memory. There are 3 ways to declare variables: 🔹 let Value can change Block scoped Most commonly used 🔹 const Cannot be reassigned Used for fixed values 🔹 var (avoid in modern JS) Function scoped Old style Example: Javascript Copy code let age = 25; const name = "Deepak"; 🧾 JavaScript Data Types JavaScript is dynamically typed. 🔢 Number Javascript Copy code let score = 90; 📝 String Javascript Copy code let city = "Delhi"; ✅ Boolean Javascript Copy code let isLoggedIn = true; 📦 Undefined Javascript Copy code let x; 🚫 Null Javascript Copy code let data = null; 🧠 Object Javascript Copy code let user = { name: "Amit", age: 30 }; 📚 Array Javascript Copy code let skills = ["HTML", "CSS", "JS"]; Mastering fundamentals makes advanced concepts easier later. Strong basics = Strong developer foundation 💪 #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #100DaysOfCode #LearnToCode #Developers
Satyam- Tiwari’s Post
More Relevant Posts
-
What Actually Is JavaScript? And How Does It Run in the Browser? JavaScript is a high-level, interpreted programming language used to make web pages interactive. HTML → Structure CSS → Styling JavaScript → Behavior Without JavaScript, websites would be static. What JavaScript Really Is JavaScript is: • Single-threaded • Event-driven • Dynamically typed • Prototype-based It allows you to: - Handle user clicks - Update the DOM - Fetch data from APIs - Build full web applications How JavaScript Runs in the Browser JavaScript runs inside a JavaScript Engine built into the browser. Examples: Chrome → V8 Engine Firefox → SpiderMonkey Here’s what happens when a browser loads a website: 1. Browser loads HTML 2. It builds the DOM (Document Object Model) 3. When it finds <script> 4. The JavaScript engine parses and executes the code Behind the Scenes Inside the browser: • Call Stack → Executes functions • Web APIs → Handle async tasks (setTimeout, fetch, DOM events) • Callback Queue → Stores completed async tasks • Event Loop → Moves tasks to call stack when ready That’s how JavaScript handles asynchronous behavior even though it’s single-threaded. In Simple Terms JavaScript runs in the browser using: JavaScript Engine + Call Stack + Web APIs + Event Loop And that’s what makes websites interactive. #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering
-
-
Linking JS file Sounds small… but it’s VERY important. 🔥 Without linking JS properly, your website is just a static page. 💡 What is a JS File? A JavaScript file (script.js) contains code that makes your website: ✅ Interactive ✅ Dynamic ✅ Responsive to user actions For example: - Button click events - Form validation - Show/Hide content - API calls 🛠 How to Link JavaScript File? There are 2 common ways: ✅ 1️⃣ Inside <head> <head> <script src="script.js"></script> </head> Problem ❌ JS loads before HTML → can cause errors. ✅ 2️⃣ Before Closing </body> <body> <script src="script.js"></script> </body> Why this is better? ✔ HTML loads first ✔ Then JavaScript runs ✔ Faster page experience 🎯 What I Understood Today Linking JS file is simple but powerful. One small line connects your entire logic to the UI. #WebDevelopment #JavaScript #Programming #Coding #SoftwareDevelopment #Tech
-
-
𝗛𝗼𝘄 𝗝𝗮 v𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗪𝗼𝗿𝗸𝘀 𝗢𝗻 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 You want to know how JavaScript works on a browser. Let's break it down. JavaScript is a programming language that makes web pages interactive. It was created to run inside browsers, but now it also runs on servers using environments like Node.js. A web page is made of: - HTML: structure - CSS: styling - JavaScript: behavior When you visit a web page, your browser loads HTML, creates a DOM tree, and downloads CSS to create a CSSOM. These combine to form a Render Tree, which is displayed on the screen. The browser has a rendering engine and a JavaScript engine, like Google's V8. The V8 engine executes JavaScript code, but it does not change the DOM or UI. Instead, it uses browser APIs to do that. Browser APIs include: - document - getElementById - querySelector - createElement - setTimeout - fetch - WebSocket - localStorage - sessionStorage - geolocation - history - navigator The V8 engine's code is written in C++. To understand the event loop, you need to know how JavaScript code executes. JavaScript is a single-threaded language, so every instruction is executed line by line. The JavaScript engine creates a global execution context, which is divided into two sections: - variable environment - execution context When a promise comes, it goes into the microtask queue, and when a timeout is called, it goes into the callback queue. The event loop resolves the microtask queue first, then the callback queue. When you open a website, your browser downloads HTML, creates a DOM tree, and downloads CSS to create a CSSOM. If JavaScript exists, it is sent to the V8 engine, which executes it. If JavaScript modifies the DOM, the browser updates the DOM, and the screen updates. Source: https://lnkd.in/gJirTwcw
-
Add structured navigation to JavaScript #reports. Incorporate a #TableofContents when designing reports in #JavaScript apps to structure sections clearly and enable faster, more intuitive navigation. Compare leading JavaScript #reporting components. https://lnkd.in/eeDupNTK
-
🚀 What is filter() in JavaScript? (Complete Guide for Developers) In JavaScript, filter() is a powerful array method used to create a new array by selecting elements that meet a specific condition. It does not modify the original array — instead, it returns a new filtered array. 📌 Syntax: array.filter((element, index, array) => { return condition; }); element → Current item being processed index (optional) → Index of the current element array (optional) → The original array 🔎 Simple Example: const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // Output: [2, 4, 6] 👉 Here, filter() returns only the numbers divisible by 2. 📦 Real-World Example (Filtering Objects): const users = [ { name: "Ali", active: true }, { name: "Sara", active: false }, { name: "Ahmed", active: true } ]; const activeUsers = users.filter(user => user.active); console.log(activeUsers); ✅ This is commonly used in: Search functionality Product filtering (e-commerce) Dashboard data filtering Status-based filtering 💡 Important Points: ✔ filter() does not change the original array ✔ It always returns a new array ✔ If no element matches → returns an empty array ✔ It works great with arrow functions 🆚 Difference from map() and forEach(): map() → transforms every element filter() → selects elements based on condition forEach() → executes logic but returns nothing 🎯 Why Every Developer Should Master filter(): Because modern web apps rely heavily on dynamic data manipulation — and filter() makes your code cleaner, readable, and functional-programming friendly. Clean code + Functional methods = Better performance & maintainability ✨ Are you using filter() in your projects? Drop your favorite use case below 👇 #JavaScript #FrontendDevelopment #WebDevelopment #Coding #100DaysOfCode
-
𝗧𝗲𝗺𝗽𝗹𝗮𝗧𝗲 𝗟𝗶𝗧𝗲𝗿𝗮𝗹𝘀 𝗜𝗻 𝗝𝗮𝗏𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Template literals in JavaScript make your code cleaner and smarter. You can write better strings with this feature. It was introduced in ES6 to improve how you work with strings. Before template literals, you used the + operator to combine strings and variables. This made your code messy and hard to read. Template literals solved this problem by introducing a more intuitive way to build strings. Here are the benefits of template literals: - They make your code more readable - They are easier to maintain - They support multi-line strings - They allow you to embed variables and expressions directly inside strings You can use template literals to: - Combine strings with variables - Write multi-line text - Create dynamic HTML - Log values - Generate dynamic URLs Template literals improve readability, maintainability, and developer productivity. They are widely used in modern frontend and backend JavaScript. Source: https://lnkd.in/gSDqrz2T
-
Day 19🚀 #𝟯𝟬𝗗𝗮𝘆𝘀𝗼𝗳𝗰𝗼𝗱𝗶𝗻𝗴 HTML, CSS, BOOTSTRAP, JAVASCRIPT👨🏼💻 🚀 Project Update: Wikipedia Search Application 💫 💫 Today I worked on building a Wikipedia Search Application using HTML, CSS, Bootstrap, and JavaScript. The application allows users to search for any keyword and instantly retrieve related Wikipedia articles with their title, URL, and description This project helped me gain practical experience in working with APIs, handling asynchronous operations, and dynamically updating the user interface using JavaScript. 🔹 Key Features 💡 💡 • Implemented a search functionality that triggers when the user presses Enter, enabling quick and intuitive searches. • Integrated the Fetch API to send HTTP requests and retrieve data from an external API endpoint. • Used JavaScript DOM manipulation to dynamically create and render search result elements on the webpage. • Applied object destructuring to efficiently extract the required fields (title, link, and description) from the API response. • Implemented asynchronous programming with Promises to handle API responses smoothly. • Added a loading spinner to enhance the user experience by indicating when data is being fetched. • Implemented proper empty-state handling by displaying a “No Results Found” message when the search query returns no results. • Designed a clean and responsive interface using Bootstrap for better layout and styling. 🔹 Technologies Used ✨✨ HTML | CSS | Bootstrap | JavaScript | Fetch API | DOM Manipulation Building projects like this helps me strengthen my understanding of frontend development and real-world API integration. I’m excited to continue learning and building more interactive web applications. 💻💫 #NxtWave #CCBP #Day19 #HTML #CSS #bootstrap #MiniProject #30DaysOfCode #MERN #JavaScript #WebDevelopment #FrontendDevelopment #APIs #DOMManipulation #LearningInPublic #APIs
-
🚀 JavaScript Object Cheat Sheet Every Developer Should Know Objects are the heart of JavaScript. Almost everything in JavaScript revolves around objects, properties, and methods. If you master objects, you automatically level up your JavaScript skills. Here’s a quick JavaScript Object Cheatsheet to remember the most useful patterns: 🔹 Object Declaration const user = { name: "Profile", followers: 4817 } 🔹 Access Properties user.name // dot notation user["name"] // bracket notation 🔹 Delete Property delete user.name 🔹 Iterate Objects for (const key in user) { console.log(key, user[key]) } 🔹 Copy Object const copy = {...user} // shallow copy const deepCopy = structuredClone(user) // deep copy 🔹 Freeze Object Object.freeze(user) 🔹 Destructuring const { name, followers } = user 🔹 Getter & Setter const user = { name: "Profile", get profile(){ return this.name } } 💡 Pro Tip: Using destructuring, spread operator, and Object.freeze() properly makes your JavaScript code cleaner and safer. 📌 Save this cheat sheet so you can quickly review JavaScript objects anytime. If this helped you: 👍 Like 💬 Comment your favorite JavaScript feature 🔁 Share with a developer friend Follow for more JavaScript Cheat Sheets & Developer Tips 🔗 LinkedIn: mdyousufali205 #javascript #webdevelopment #programming #coding #frontend #softwareengineering #developers #javascriptdeveloper #codingtips #devcommunity #learnprogramming #100DaysOfCode #webdev
-
-
🚀 Continuing Web Development Basics – JavaScript (Getting Started) After learning HTML and CSS, I started with JavaScript, the language that makes web pages interactive and dynamic. Today I focused on basic JavaScript concepts to build a strong foundation. 🔹 What is JavaScript? JavaScript is used to: • Add interactivity to web pages • Handle user actions (clicks, input) • Update content dynamically 🔹 Basic JavaScript Topics 1️⃣ Variables Used to store data. let name = "John"; let age = 22; 2️⃣ Data Types Common types: • String → "Hello" • Number → 10 • Boolean → true/false 3️⃣ Operators Used to perform operations. let sum = 5 + 3; let isEqual = (5 == 5); 4️⃣ Conditional Statements Used for decision making. let age = 18; if (age >= 18) { console.log("Eligible"); } else { console.log("Not Eligible"); } 5️⃣ Loops Used to repeat tasks. for (let i = 1; i <= 3; i++) { console.log(i); } 6️⃣ Functions Reusable block of code. function greet(name) { console.log("Hello " + name); } greet("John"); 7️⃣ Events (Basic) JavaScript responds to user actions. <button onclick="alert('Button Clicked')">Click Me</button> 🔹 Why Learn JavaScript? • Makes websites interactive • Works with HTML & CSS • Essential for frontend development • Required for full-stack development Starting with basics is important before moving to advanced concepts like DOM, APIs, and frameworks. Next step: Deeper JavaScript concepts and DOM manipulation. #JavaScript #WebDevelopment #DotNetDeveloper #FrontendDevelopment #LearningJourney #FullStackDevelopment
-
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