DEV Community: Md. Rony

JavaScript Optional Chaining(?.)

Md. Rony — Sun, 15 Sep 2024 06:16:16 +0000

Optional Chaining কি?

Optional Chaining (?.) হল জাভাস্ক্রিপ্টের একটি ফিচার যা আপনাকে একটি ডিপলি নেস্টেড অবজেক্ট প্রপার্টি নিরাপদে অ্যাক্সেস করতে দেয়, যেটির প্রতিটি রেফারেন্স null বা undefined কিনা তা স্পষ্টভাবে চেক না করেই। যদি কোনো রেফারেন্স null বা undefined হয়, তাহলে optional chaining অপারেটর (?.) পরবর্তী প্রপারটি access বন্ধ করে দেয় এবং undefined রিটার্ন করে, কোনো ত্রুটি না করে।

এই ফিচারটি ECMAScript 2020 (ES11) এ যুক্ত হয়েছে এবং এটি এমন অবজেক্টগুলির সাথে কাজ করার সময় একটি পরিষ্কার এবং সংক্ষিপ্ত উপায় প্রদান করে যেগুলির মধ্যে কিছু প্রপার্টি অনুপস্থিত বা undefined হতে পারে।

Optional Chaining কেন ব্যবহার করবেন?

১. ত্রুটি এড়ায়: এটি আপনাকে undefined বা null অবজেক্টের প্রপার্টি অ্যাক্সেস করতে গিয়ে runtime ত্রুটি থেকে রক্ষা করে।

২. পরিষ্কার কোড: একাধিক চেক (যেমন if স্টেটমেন্ট বা লজিক্যাল AND অপারেটর &&) এর প্রয়োজনীয়তা দূর করে কোডকে সরল করে।

৩. রিডেবিলিটি উন্নত করে: এটি কোডকে আরও পড়ার উপযোগী এবং রক্ষণাবেক্ষণের জন্য সহজ করে তোলে।

৪. ফাংশন এবং অ্যারের সাথে কাজ করে: কেবল অবজেক্ট নয়, এটি ফাংশন বা অ্যারে এক্সিস্ট করে কিনা তা চেক করতেও ব্যবহৃত হয়।

Optional Chaining এর উদাহরণ:

ধরুন, আপনার একটি নেস্টেড অবজেক্ট আছে এবং আপনি ডিপলি নেস্টেড প্রপার্টি নিরাপদে অ্যাক্সেস করতে চান:

const user = {
  name: "Alice",
  address: {
    city: "Wonderland",
    zip: "12345"
  }
};

// নেস্টেড প্রপার্টি নিরাপদে অ্যাক্সেস করা
console.log(user.address?.city); // Output: Wonderland
console.log(user.address?.street); // Output: undefined (ত্রুটি ছাড়াই)

// আরও ডিপ প্রপার্টি অ্যাক্সেস করার চেষ্টা করা যা নেই
console.log(user.contact?.phone); // Output: undefined (কোনো ত্রুটি নেই)

এই উদাহরণে, ?. ব্যবহার করে address অবজেক্টের ভেতরে থাকা city প্রপার্টিটি নিরাপদে অ্যাক্সেস করা হয়েছে। যদি address না থাকতো, তাহলে এটি কোনো ত্রুটি না করে undefined রিটার্ন করতো।

ফাংশন কলের উদাহরণ:

আপনি ফাংশনের সাথেও optional chaining ব্যবহার করতে পারেন, ফাংশনটি এক্সিস্ট করে কিনা তা চেক করার জন্য:

const person = {
  greet: function () {
    console.log("Hello!");
  }
};

// ফাংশনটি নিরাপদে কল করা
person.greet?.(); // Output: Hello!

// এমন একটি ফাংশন কল করার চেষ্টা করা যা নেই
person.sayGoodbye?.(); // কোনো আউটপুট নেই, নিরাপদে কিছুই করে না

অ্যারের উদাহরণ:
Optional chaining অ্যারের সাথে কাজ করার সময়ও উপকারী হতে পারে:

const fruits = ["apple", "banana"];
console.log(fruits?.[0]); // Output: apple
console.log(fruits?.[10]); // Output: undefined (ত্রুটি ছাড়াই)

Optional Chaining এর সুবিধা ও অসুবিধা

সুবিধা:

১. পরিষ্কার সিনট্যাক্স:

null বা undefined মানের জন্য চেক করার কোডের পরিমাণ কমায়।

২. ত্রুটি প্রতিরোধ:

ডিপ প্রপার্টি যা এক্সিস্ট নাও করতে পারে তা অ্যাক্সেস করার সময় runtime ত্রুটি এড়ায়।

৩. কোড রিডেবিলিটি উন্নত করে:

Verbose চেকের প্রয়োজনীয়তা দূর করে কোডকে আরও পড়ার উপযোগী করে।

৪. নেস্টেড চেক কমায়:

একাধিক স্তরের if স্টেটমেন্ট বা লজিক্যাল && চেক কমায়।

৫. একাধিক টাইপের সাথে কাজ করে:

অবজেক্ট, অ্যারে এবং ফাংশন কলের সাথে ব্যবহার করা যায়।

অসুবিধা:

১. সীমিত ব্রাউজার সাপোর্ট:

Optional chaining একটি নতুন ফিচার (ES2020-এ পরিচিত) এবং এটি সব পুরনো ব্রাউজারে পুরোপুরি সাপোর্ট করে না। উদাহরণস্বরূপ, Internet Explorer এটি সাপোর্ট করে না। তবে, আপনি Babel-এর মতো একটি ট্রান্সপাইলার ব্যবহার করে মডার্ন জাভাস্ক্রিপ্টকে ব্যাকওয়ার্ড-কোম্প্যাটিবল কোডে কনভার্ট করতে পারেন।

২. সম্ভাব্য ভুল ব্যবহার:

Optional chaining ত্রুটি হ্যান্ডলিংয়ে অলসতার দিকে নিয়ে যেতে পারে। অতিরিক্ত ব্যবহারে এটি বুঝতে কঠিন করে তুলতে পারে কোন জায়গায় মিসিং প্রপার্টি আশা করা হয়েছিল, যা সম্ভাব্য বাগ বা ডিজাইন ইস্যু লুকিয়ে রাখতে পারে।

৩. পারফরম্যান্স ওভারহেড:

যদিও optional chaining রিডেবিলিটি উন্নত করে, এটি পারফরম্যান্সে সামান্য ওভারহেড যোগ করতে পারে, বিশেষ করে পারফরম্যান্স-সংবেদনশীল অংশগুলিতে অতিরিক্ত ব্যবহারে।

উপসংহার:

Optional chaining (?.) একটি শক্তিশালী এবং সুবিধাজনক টুল যা ডেভেলপারদের null বা undefined রেফারেন্স সম্পর্কিত ত্রুটি থেকে রক্ষা করে পরিষ্কার, নিরাপদ এবং আরও রিডেবল কোড লিখতে সহায়তা করে। এটি কোডকে সরল করে একাধিক চেকের প্রয়োজনীয়তা কমিয়ে এবং সম্ভাব্য মিসিং প্রপার্টি বা মেথডগুলো নিরাপদে হ্যান্ডল করার একটি অভিন্ন উপায় প্রদান করে। তবে, যেকোনো টুলের মতো এটি প্রয়োজনের অতিরিক্ত ব্যবহার করা উচিত নয় যাতে সম্ভাব্য বাগ বা পারফরম্যান্স ওভারহেড এড়ানো যায়।

টাইপস্ক্রিপ্ট: বেসিক থেকে অ্যাডভান্সড – একটি বিস্তারিত গাইড (উদাহরণ সহ)

Md. Rony — Sun, 15 Sep 2024 04:57:49 +0000

ভূমিকাঃ

টাইপস্ক্রিপ্ট (TypeScript) হলো জাভাস্ক্রিপ্টের একটি সুপারসেট যা জাভাস্ক্রিপ্টের সমস্ত বৈশিষ্ট্য বজায় রেখে অতিরিক্ত কিছু সুবিধা যুক্ত করে, যেমন টাইপ সেফটি, উন্নত ডেভেলপার অভিজ্ঞতা, এবং কোড রিফ্যাক্টরিং সহজ করা। মাইক্রোসফট দ্বারা ডেভেলপকৃত এই ভাষা ওয়েব ডেভেলপারদের মধ্যে জনপ্রিয় হয়ে উঠেছে কারণ এটি বড় এবং জটিল অ্যাপ্লিকেশন তৈরি করতে সহায়ক।

এই ব্লগে, আমরা টাইপস্ক্রিপ্টের বেসিক থেকে শুরু করে অ্যাডভান্সড বিষয়গুলো নিয়ে বিস্তারিত আলোচনা করব, যাতে আপনি টাইপস্ক্রিপ্ট শিখে আপনার ওয়েব ডেভেলপমেন্ট প্রজেক্টগুলোতে দক্ষতা অর্জন করতে পারেন।

টাইপস্ক্রিপ্ট কী এবং কেন এটি ব্যবহার করবেন?

টাইপস্ক্রিপ্ট হলো জাভাস্ক্রিপ্টের একটি টাইপ সেফ সংস্করণ। এটি একটি স্ট্যাটিক টাইপিং ভাষা, অর্থাৎ কম্পাইল টাইমে টাইপ ত্রুটি সনাক্ত করা যায়। এটি জাভাস্ক্রিপ্টের সীমাবদ্ধতাগুলির সমাধান করে এবং বড় স্কেল প্রকল্পগুলিতে কোড বজায় রাখা সহজ করে তোলে।

টাইপস্ক্রিপ্টের মূল বৈশিষ্ট্যসমূহ:

টাইপ সেফটি (Type Safety): টাইপস্ক্রিপ্টে আপনি প্রতিটি ভেরিয়েবল, ফাংশন প্যারামিটার, এবং অবজেক্টের টাইপ নির্ধারণ করতে পারেন। এটি কম্পাইলারকে টাইপ ত্রুটি সনাক্ত করতে সাহায্য করে, যা কোড লিখতে এবং বজায় রাখতে সাহায্য করে।
উন্নত কোড কমপ্লিশন (Enhanced Code Completion): টাইপস্ক্রিপ্ট ইন্টেলিজেন্ট কোড কমপ্লিশন এবং ইনটেলিসেন্স (IntelliSense) প্রদান করে, যা ডেভেলপারদের দ্রুত কোড লিখতে সহায়ক।
রিফ্যাক্টরিং সহজ করে: টাইপস্ক্রিপ্টে টাইপিং এবং ইন্টারফেসের মাধ্যমে কোডের স্ট্রাকচার ভালোভাবে বোঝা যায়, যা রিফ্যাক্টরিং সহজ করে।
ভবিষ্যত-প্রুফ জাভাস্ক্রিপ্ট: টাইপস্ক্রিপ্ট জাভাস্ক্রিপ্টের সর্বশেষ বৈশিষ্ট্যগুলি (ESNext) ব্যবহার করতে দেয় যা বিভিন্ন ব্রাউজার বা জাভাস্ক্রিপ্ট RUNTIME-এ সমর্থিত না হলেও, টাইপস্ক্রিপ্ট সেগুলিকে পূর্ববর্তী সংস্করণে ট্রান্সপাইল করে।

টাইপস্ক্রিপ্ট সেটআপ:

টাইপস্ক্রিপ্ট ব্যবহার শুরু করার জন্য, আপনাকে প্রথমে আপনার সিস্টেমে টাইপস্ক্রিপ্ট ইনস্টল করতে হবে। এটি করার সবচেয়ে সহজ উপায় হল npm (Node Package Manager) ব্যবহার করা:

npm install -g typescript

একবার ইনস্টল হয়ে গেলে, আপনি tsc (TypeScript Compiler) কমান্ড ব্যবহার করে টাইপস্ক্রিপ্ট ফাইলগুলো জাভাস্ক্রিপ্টে কম্পাইল করতে পারবেন।

tsc your-file.ts

টাইপস্ক্রিপ্ট কনফিগারেশন:

টাইপস্ক্রিপ্টের প্রকল্প কনফিগার করতে, আপনি একটি tsconfig.json ফাইল তৈরি করতে পারেন, যা কম্পাইলারের জন্য প্রয়োজনীয় সব সেটিংস নির্ধারণ করে।

উদাহরণস্বরূপ:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

এটি টাইপস্ক্রিপ্ট কম্পাইলারের জন্য বিভিন্ন অপশন নির্ধারণ করে, যেমন কোন জাভাস্ক্রিপ্ট ভার্সনে কম্পাইল করতে হবে, কোন মডিউল সিস্টেম ব্যবহার করতে হবে ইত্যাদি।

টাইপস্ক্রিপ্ট বেসিকস:

১. টাইপ এনোটেশন (Type Annotation):

টাইপ এনোটেশন টাইপস্ক্রিপ্টের মৌলিক বৈশিষ্ট্য। এটি প্রতিটি ভেরিয়েবলের জন্য টাইপ নির্ধারণ করার সুবিধা দেয়, যা টাইপ সংক্রান্ত ত্রুটি কম্পাইল টাইমে সনাক্ত করতে সাহায্য করে।

উদাহরণস্বরূপ:

let age: number = 30;   // 'age' হলো একটি সংখ্যা (number)
let name: string = "জন"; // 'name' হলো একটি স্ট্রিং (string)
let isStudent: boolean = true; // 'isStudent' হলো একটি বুলিয়ান (boolean)

এখানে, :number, :string, এবং :boolean টাইপ এনোটেশন ব্যবহার করে প্রতিটি ভেরিয়েবলের টাইপ স্পষ্টভাবে উল্লেখ করা হয়েছে।

২. ফাংশন টাইপিং (Function Typing):

টাইপস্ক্রিপ্টে ফাংশনের ইনপুট এবং আউটপুটের টাইপও নির্ধারণ করা যায়, যা ফাংশনের ভ্যালিডিটি এবং নিরাপত্তা নিশ্চিত করে।

উদাহরণস্বরূপ:

function add(a: number, b: number): number {
    return a + b;
}

উপরের উদাহরণে, a এবং b ফাংশনের প্যারামিটার হিসেবে সংখ্যা (number) নির্ধারিত এবং আউটপুটের টাইপও সংখ্যা (number) হিসেবে নির্ধারিত।

৩. অ্যারে এবং অবজেক্ট টাইপিং (Array and Object Typing):

টাইপস্ক্রিপ্টে আপনি অ্যারে এবং অবজেক্টের জন্য নির্দিষ্ট টাইপ নির্ধারণ করতে পারেন।

উদাহরণস্বরূপ:

let numbers: number[] = [1, 2, 3]; // শুধুমাত্র সংখ্যা ধারণকারী অ্যারে
let person: { name: string, age: number } = { name: "জন", age: 25 }; // নির্দিষ্ট টাইপের অবজেক্ট

এখানে numbers হলো একটি অ্যারে যা শুধুমাত্র সংখ্যা ধারণ করতে পারে এবং person হলো একটি অবজেক্ট যা নির্দিষ্ট স্ট্রাকচার অনুসরণ করতে হবে।

৪. ইন্টারফেস (Interfaces):

ইন্টারফেস হলো একটি শক্তিশালী টুল যা অবজেক্টের টাইপ নির্ধারণে ব্যবহার করা হয়। এটি আপনার কোডে কনসিসটেন্সি এবং টাইপ সেফটি যোগ করে।

উদাহরণস্বরূপ:

interface Person {
    name: string;
    age: number;
    isStudent: boolean;
}

let student: Person = {
    name: "রনি",
    age: 22,
    isStudent: true
};

ইন্টারফেস ব্যবহার করে আমরা একটি Person টাইপ তৈরি করেছি যা নির্দিষ্ট প্রপার্টিস ধারণ করতে হবে। student অবজেক্টটি Person ইন্টারফেসের সাথে মিলছে, তাই এটি টাইপস্ক্রিপ্টের সাথে সামঞ্জস্যপূর্ণ।

জাভাস্ক্রিপ্ট অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং(OOP)

Md. Rony — Tue, 03 Sep 2024 06:49:37 +0000

ভূমিকা:

আজকের ক্লাসে আমরা জাভাস্ক্রিপ্টের একটি গুরুত্বপূর্ণ বিষয় শিখব, সেটি হলো অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং বা OOP। এই পদ্ধতিটি প্রোগ্রামিংকে আরও সহজ এবং সুশৃঙ্খল করে তোলে। আমরা প্রথমে এর বেসিক ধারণা নিব এবং তারপর অ্যাডভান্সড টপিক্সে যাব।

বেসিক টপিকস:

1.অবজেক্ট কী?

উদাহরণ:
ধরো, তুমি একটি গাড়ি তৈরি করতে চাও। গাড়িটি একটি অবজেক্ট হবে যেখানে বিভিন্ন প্রপার্টি থাকবে যেমন: ব্র্যান্ড, মডেল, রঙ, ইত্যাদি। জাভাস্ক্রিপ্টে একটি অবজেক্ট তৈরি করতে আমরা ব্যবহার করি {}।

কোড উদাহরণ:

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  color: 'Red'
};
console.log(car.brand); // Output: Toyota

ক্লাস এবং কনস্ট্রাক্টর:

ব্যাখ্যা:
ক্লাস হলো অবজেক্ট তৈরির একটি ব্লুপ্রিন্ট। কনস্ট্রাক্টর হলো একটি বিশেষ ফাংশন যা নতুন অবজেক্ট তৈরির সময় চালিত হয়।

কোড উদাহরণ:

class Car {
  constructor(brand, model, color) {
    this.brand = brand;
    this.model = model;
    this.color = color;
  }
}

let myCar = new Car('Honda', 'Civic', 'Blue');
console.log(myCar.model); // Output: Civic

মেথড (Method):

উদাহরণ:
একটি গাড়ি স্টার্ট করতে পারলে কেমন হয়? আমরা ক্লাসের মধ্যে মেথড যোগ করতে পারি, যা অবজেক্টের সাথে কাজ করতে পারে।

কোড উদাহরণ:

class Car {
  constructor(brand, model, color) {
    this.brand = brand;
    this.model = model;
    this.color = color;
  }

  startEngine() {
    console.log(`${this.brand} ${this.model} এর ইঞ্জিন স্টার্ট হয়েছে!`);
  }
}

let myCar = new Car('Nissan', 'Altima', 'Black');
myCar.startEngine(); // Output: Nissan Altima এর ইঞ্জিন স্টার্ট হয়েছে!

অ্যাডভান্সড টপিকস:

ইনহেরিটেন্স (Inheritance):

ব্যাখ্যা:
ইনহেরিটেন্সের মাধ্যমে আমরা একটি ক্লাস থেকে আরেকটি ক্লাসে প্রোপার্টি এবং মেথড নেওয়া যায়। এটি কোড রিইউজ্যাবিলিটি বাড়ায়।

কোড উদাহরণ:

class Vehicle {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  displayInfo() {
    console.log(`ব্র্যান্ড: ${this.brand}, মডেল: ${this.model}`);
  }
}

class Car extends Vehicle {
  constructor(brand, model, color) {
    super(brand, model);
    this.color = color;
  }
}

let myCar = new Car('Ford', 'Mustang', 'Red');
myCar.displayInfo(); // Output: ব্র্যান্ড: Ford, মডেল: Mustang

পলিমরফিজম (Polymorphism)

ব্যাখ্যা:

পলিমরফিজম হলো একাধিক ক্লাসের মেথডগুলির উপর ওভাররাইড করা। এটি কোডকে আরও ডাইনামিক এবং ফ্লেক্সিবল করে তোলে।

কোড উদাহরণ:

class Animal {
  makeSound() {
    console.log('Animal sound');
  }
}

class Dog extends Animal {
  makeSound() {
    console.log('Woof Woof');
  }
}

class Cat extends Animal {
  makeSound() {
    console.log('Meow');
  }
}

let myDog = new Dog();
let myCat = new Cat();

myDog.makeSound(); // Output: Woof Woof
myCat.makeSound(); // Output: Meow

এবস্ট্রাকশন (Abstraction)

ব্যাখ্যা:
এবস্ট্রাকশন হলো কোডের শুধু প্রয়োজনীয় অংশটি দেখানো এবং বাকি অংশটি হাইড করা। এটি কোডকে সহজ ও নিরাপদ করে তোলে।

কোড উদাহরণ:

class BankAccount {
  constructor(balance) {
    this._balance = balance; // প্রাইভেট প্রোপার্টি
  }

  deposit(amount) {
    this._balance += amount;
    console.log(`ডিপোজিট: ${amount}, নতুন ব্যালেন্স: ${this._balance}`);
  }

  withdraw(amount) {
    if (amount > this._balance) {
      console.log('ব্যালেন্স অপর্যাপ্ত!');
    } else {
      this._balance -= amount;
      console.log(`উইথড্র: ${amount}, নতুন ব্যালেন্স: ${this._balance}`);
    }
  }
}

let myAccount = new BankAccount(1000);
myAccount.deposit(500); // Output: ডিপোজিট: 500, নতুন ব্যালেন্স: 1500
myAccount.withdraw(2000); // Output: ব্যালেন্স অপর্যাপ্ত!

ইনক্যাপসুলেশন (Encapsulation):

ব্যাখ্যা:

ইনক্যাপসুলেশন বলতে বোঝায় ডেটা এবং মেথডগুলোকে একটি অবজেক্টের ভেতরে রাখা এবং বাইরের কোড থেকে সরাসরি অ্যাক্সেস নিয়ন্ত্রণ করা। এতে অবজেক্টের ডেটা সুরক্ষিত থাকে।

প্রাইভেট প্রোপার্টি এবং মেথড:

উদাহরণ:

আমরা প্রোপার্টি বা মেথডগুলিকে প্রাইভেট (private) করতে পারি, যাতে সেগুলো অবজেক্টের বাইরে থেকে অ্যাক্সেস করা না যায়। জাভাস্ক্রিপ্টে প্রাইভেট প্রোপার্টি বা মেথডের # চিহ্ন ব্যবহার করা হয়।

কোড উদাহরণ:

class Person {
  #name; // প্রাইভেট প্রোপার্টি
  constructor(name, age) {
    this.#name = name;
    this.age = age;
  }

  #getName() { // প্রাইভেট মেথড
    return this.#name;
  }

  introduce() {
    console.log(`Hello, my name is ${this.#getName()} and I am ${this.age} years old.`);
  }
}

let person1 = new Person('John', 30);
person1.introduce(); // Output: Hello, my name is John and I am 30 years old.
console.log(person1.#name); // Error: Cannot access private field '#name'

জাভাস্ক্রিপ্ট DOM (ডকুমেন্ট অবজেক্ট মডেল)

Md. Rony — Tue, 27 Aug 2024 09:56:10 +0000

ভূমিকা:
এই কোর্সে আমরা জাভাস্ক্রিপ্টের মাধ্যমে কীভাবে DOM (ডকুমেন্ট অবজেক্ট মডেল) এর সাথে ইন্টার‌্যাক্ট করা যায় তা শিখব। DOM হলো একটি ওয়েব পেজের HTML বা XML ডকুমেন্টের স্ট্রাকচার, যা জাভাস্ক্রিপ্টের মাধ্যমে পরিবর্তন, ম্যানিপুলেট ও আপডেট করা সম্ভব। এই ক্লাসটি বেসিক থেকে অ্যাডভান্সড লেভেল পর্যন্ত ডিজাইন করা হয়েছে।

DOM এর পরিচিতি:

টপিক:

DOM কি?
DOM এর স্ট্রাকচার
জাভাস্ক্রিপ্ট এবং DOM এর মধ্যে সম্পর্ক

উদাহরণ:

HTML কোড এবং কীভাবে ব্রাউজার সেই HTML কোডকে DOM এ রূপান্তর করে।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

ব্যাখ্যা:

এই HTML ফাইলটি একটি ডকুমেন্টের স্ট্রাকচার তৈরি করেছে, যা ব্রাউজার DOM এ রূপান্তর করে।

DOM এ এলিমেন্ট সিলেকশন:

টপিক:

DOM থেকে এলিমেন্ট সিলেক্ট করার পদ্ধতি

getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()

উদাহরণ:

HTML পেজ থেকে id, class, এবং tag এর মাধ্যমে এলিমেন্ট সিলেক্ট করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Selection</title>
</head>
<body>
    <h1 id="header">Welcome to DOM Manipulation</h1>
    <p class="content">This is a paragraph.</p>
    <p class="content">This is another paragraph.</p>

    <script>
        // getElementById
        const header = document.getElementById('header');
        console.log(header);

        // getElementsByClassName
        const paragraphs = document.getElementsByClassName('content');
        console.log(paragraphs);

        // getElementsByTagName
        const allParagraphs = document.getElementsByTagName('p');
        console.log(allParagraphs);

        // querySelector
        const firstParagraph = document.querySelector('.content');
        console.log(firstParagraph);

        // querySelectorAll
        const allContent = document.querySelectorAll('.content');
        console.log(allContent);
    </script>
</body>
</html>

ব্যাখ্যা:

এই উদাহরণে বিভিন্ন পদ্ধতি ব্যবহার করে DOM থেকে এলিমেন্ট সিলেক্ট করা হয়েছে।

DOM ম্যানিপুলেশন:

টপিক:

1.এলিমেন্ট এর কন্টেন্ট পরিবর্তন

innerHTML
textContent
innerText

2.নতুন এলিমেন্ট যুক্ত করা

createElement()
appendChild()

3.এলিমেন্ট রিমুভ করা

removeChild()

উদাহরণ:

HTML এলিমেন্টের টেক্সট পরিবর্তন করা, নতুন এলিমেন্ট যোগ করা, এবং বিদ্যমান এলিমেন্ট রিমুভ করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
</head>
<body>
    <h1 id="header">Original Heading</h1>
    <p id="para">Original paragraph text.</p>

    <script>
        // Changing the content
        const header = document.getElementById('header');
        header.innerHTML = 'Updated Heading';

        const para = document.getElementById('para');
        para.textContent = 'Updated paragraph text.';

        // Adding a new element
        const newPara = document.createElement('p');
        newPara.textContent = 'This is a new paragraph added to the DOM.';
        document.body.appendChild(newPara);

        // Removing an element
        const oldPara = document.getElementById('para');
        document.body.removeChild(oldPara);
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা শিখেছি কিভাবে DOM এর মধ্যে থাকা HTML এলিমেন্টগুলোর কন্টেন্ট আপডেট করতে হয়, নতুন এলিমেন্ট যোগ করতে হয়, এবং এলিমেন্ট রিমুভ করতে হয়।

ইভেন্ট হ্যান্ডলিং

টপিক:

1.ইভেন্ট কি?

2.ইভেন্ট হ্যান্ডলার যোগ করা

addEventListener()

3.ইভেন্টের ধরন

click, mouseover, mouseout, keydown, ইত্যাদি

উদাহরণ:

ইভেন্ট হ্যান্ডলার যোগ করা এবং ইভেন্টের উপর ভিত্তি করে DOM ম্যানিপুলেশন করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <p id="message"></p>

    <script>
        const button = document.getElementById('clickMe');
        const message = document.getElementById('message');

        button.addEventListener('click', function() {
            message.textContent = 'Button clicked!';
        });

        button.addEventListener('mouseover', function() {
            message.textContent = 'Mouse is over the button!';
        });

        button.addEventListener('mouseout', function() {
            message.textContent = '';
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এই উদাহরণে আমরা ইভেন্ট হ্যান্ডলার ব্যবহার করে কীভাবে ইভেন্টের উপর ভিত্তি করে DOM ম্যানিপুলেশন করতে পারি তা শিখেছি।

DOM ট্রাভার্সাল

টপিক:

1.প্যারেন্ট এলিমেন্ট খুঁজে বের করা

parentNode

2.চাইল্ড এলিমেন্ট খুঁজে বের করা

childNodes
firstChild
lastChild

3.সিবলিংস খুঁজে বের করা

nextSibling
previousSibling

উদাহরণ:

DOM এর মধ্যে নেভিগেট করা এবং বিভিন্ন এলিমেন্ট খুঁজে বের করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Traversal</title>
</head>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        const list = document.getElementById('list');

        // Parent Node
        console.log(list.parentNode);

        // Child Nodes
        console.log(list.childNodes);

        // First and Last Child
        console.log(list.firstChild);
        console.log(list.lastChild);

        // Siblings
        const firstItem = list.firstChild;
        console.log(firstItem.nextSibling);
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা DOM এর মধ্যে নেভিগেট করা এবং প্যারেন্ট, চাইল্ড এবং সিবলিংস এলিমেন্ট খুঁজে বের করার পদ্ধতি শিখেছি।

অ্যাডভান্সড DOM ম্যানিপুলেশন

টপিক:

1.ডাইনামিক স্টাইল পরিবর্তন

style প্রপার্টি

2.ক্লাস ম্যানিপুলেশন

classList.add()
classList.remove()
classList.toggle()

উদাহরণ:

DOM এর এলিমেন্টের স্টাইল পরিবর্তন করা এবং ক্লাস যোগ/রিমুভ করা।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced DOM Manipulation</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="text">Hover over this text to change its style.</p>

    <script>
        const text = document.getElementById('text');

        text.addEventListener('mouseover', function() {
            text.style.color = 'blue';
            text.classList.add('highlight');
        });

        text.addEventListener('mouseout', function() {
            text.style.color = '';
            text.classList.remove('highlight');
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা এলিমেন্টের স্টাইল ডাইনামিকভাবে পরিবর্তন করা এবং ক্লাস ম্যানিপুলেশন করার পদ্ধতি শিখেছি।

ফর্ম ডেটা ম্যানিপুলেশন এবং ভ্যালিডেশন

টপিক:

1.ফর্ম ডেটা অ্যাক্সেস এবং ম্যানিপুলেশন
2.ফর্ম ভ্যালিডেশন

কাস্টম ভ্যালিডেশন মেসেজ
input ইভেন্ট
submit ইভেন্ট

উদাহরণ:

ফর্ম ডেটা কিভাবে ম্যানিপুলেট করতে হয় এবং ভ্যালিডেশন কিভাবে অ্যাপ্লাই করতে হয়।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Manipulation</title>
</head>
<body>
    <form id="myForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Submit</button>
    </form>
    <p id="error"></p>

    <script>
        const form = document.getElementById('myForm');
        const username = document.getElementById('username');
        const error = document.getElementById('error');

        form.addEventListener('submit', function(event) {
            if (username.value === '') {
                error.textContent = 'Username is required';
                event.preventDefault();
            } else {
                error.textContent = '';
            }
        });

        username.addEventListener('input', function() {
            if (username.value !== '') {
                error.textContent = '';
            }
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা শিখেছি কিভাবে ফর্মের ডেটা ম্যানিপুলেট এবং ভ্যালিডেশন করা যায়।

অ্যাডভান্সড ইভেন্ট হ্যান্ডলিং এবং ডেলিগেশন

টপিক:

1.ইভেন্ট ডেলিগেশন
2.বাবলিং এবং ক্যাপচারিং
3.কাস্টম ইভেন্ট

উদাহরণ:

ইভেন্ট ডেলিগেশন ব্যবহার করে কিভাবে ইভেন্ট ম্যানেজ করতে হয় এবং কাস্টম ইভেন্ট কিভাবে তৈরি করা যায়।

কোড:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation</title>
</head>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        const list = document.getElementById('list');

        list.addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                alert(event.target.textContent);
            }
        });
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে আমরা শিখেছি কিভাবে ইভেন্ট ডেলিগেশন এবং বাবলিং ম্যানেজ করতে হয়।