JavaScript Core Concepts: Variables, Functions, DOM Manipulation, and Events

JavaScript वेब डेवलपमेंट का “दिल” है। यह वेबपेज को interactive और dynamic बनाती है। चाहे आप नए हों या experienced, इन 4 core concepts को समझना ज़रूरी है: Variables, Functions, DOM Manipulation, और Events। आइए समझते हैं!

1. Variables: डेटा को स्टोर करें

Variables डेटा (जैसे numbers, text, objects) को store करने के लिए containers होते हैं।

Declaration (घोषणा):

• let: Reassignable values (बाद में बदल सकते हैं)
• const: Fixed values (बाद में नहीं बदल सकते)
• var: पुराना तरीका (avoid in modern code)

Example (उदाहरण):

//  नाम store करें (Store name)  
let userName = "Rahul";  
userName = "अनुज"; // let allows reassigning  

//  उम्र स्टोर करें (Store age)  
const userAge = 25;  
// userAge = 30; // Error! const cannot be changed  

Best Practices:

• Default choice: const (जब तक बदलने की ज़रूरत न हो)।
• let use करें जब values change होंगी।
• var avoid करें (block-scoping issues)।

2. Functions: कोड को Reuse करें

Functions कोड के blocks होते हैं जिन्हें बार-बार call किया जा सकता है।

Syntax:

Function Declaration:

// जोड़ने का फ़ंक्शन (Addition function)  
function add(a, b) {  
  return a + b;  
}  
console.log(add(2, 3)); // Output: 5  

Arrow Function (आधुनिक तरीका):

// Multiply function (गुणा करें)  
const multiply = (a, b) => a * b;  
console.log(multiply(4, 5)); // Output: 20  

Key Points:

• Parameters: फ़ंक्शन को inputs दें (जैसे a, b)।
• return: Result वापस करें।

3. DOM Manipulation: वेबपेज को Control करें

DOM (Document Object Model) वेबपेज का tree structure होता है। JavaScript का उपयोग करके HTML/CSS को modify कर सकते हैं।

Steps:

Select Elements

// ID से एलिमेंट चुनें (Select by ID)  
const heading = document.getElementById("title");  

// Class से चुनें (Select by class)  
const buttons = document.querySelectorAll(".btn");  

Modify Content/ Styles (कंटेंट/स्टाइल बदलें):

heading.textContent = "नमस्ते JavaScript!"; // Text बदलें  
heading.style.color = "blue"; // स्टाइल बदलें  

// Add CSS class  
buttons[0].classList.add("active");  

Create New Elements (नए एलिमेंट बनाएँ):

const newPara = document.createElement("p");  
newPara.textContent = "यह नया पैराग्राफ है!";  
document.body.appendChild(newPara);  

4. Events: User Interaction Handle करें

Events user actions (जैसे clicks, mouse movements, keystrokes) को detect करते हैं।

Event Listeners (इवेंट सुनने वाले):

//  बटन पर क्लिक इवेंट जोड़ें (Add click event)  
const button = document.querySelector("#myButton");  

//  Click event handler  
button.addEventListener("click", () => {  
  alert("बटन दबाया गया!");  
});  

Common Events (सामान्य इवेंट्स):

• click: Mouse click.
• mouseover: Mouse hover.
• keydown: Keyboard press.
• submit: Form submission.

Example: Input Field Validation (इनपुट चेक करें):

const inputField = document.querySelector("#email");  

inputField.addEventListener("input", (event) => {  
  if (!event.target.value.includes("@")) {  
    console.log("Invalid email!");  
  }  
});  

Best Practices (अच्छी आदतें):

1. Variables: const और let का सही उपयोग करें।
2. Functions: Arrow functions को छोटे tasks के लिए prefer करें।
3. DOM: querySelector और querySelectorAll use करें (modern और flexible)।
4. Events: एक से ज़्यादा listeners avoid करें (performance issue)।

Conclusion: JavaScript = Power + Creativity

JavaScript सीखकर आप वेबपेज को जीवंत (Live) बना सकते हैं। याद रखें:

• Variables → डेटा स्टोर करें।
• Functions → कोड reuse करें।
• DOM → पेज को dynamically update करें।
• Events → User interactions को handle करें।

हिंदी में समझें:

• JavaScript के बिना वेबसाइट सिर्फ़ एक स्थिर पेज है।
• Variables और Functions कोड को organized रखते हैं।
• DOM और Events वेबपेज को interactive बनाते हैं।

Keep Experimenting and Building! 🚀

Practice Example (अभ्यास):
एक बटन बनाएँ जिसे क्लिक करने पर पेज का बैकग्राउंड रंग बदल जाए।

const colorButton = document.querySelector("#colorBtn");  
let isBlue = true;  

colorButton.addEventListener("click", () => {  
  document.body.style.backgroundColor = isBlue ? "pink" : "lightblue";  
  isBlue = !isBlue;  
});  

Hope yeh article aapko pasand aaya ho! Agar esey hi articles or chahiye please subscribe karey.