டைனமிக்

Jules David

ஞாயிறு, 20 அக்டோபர், 2024 ’அன்று’ முற்பகல் 4:43:15

ஜாவாஸ்கிரிப்ட் மற்றும் பல வகைகளுடன் தயாரிப்பு வடிகட்டலை மேம்படுத்துதல்

டைனமிக், பயனர் நட்பு இணையப் பக்கங்களை உருவாக்குவது தடையற்ற வழிசெலுத்தல் மற்றும் உள்ளடக்கத்தை எளிதாக வடிகட்டுதல் ஆகியவற்றை உள்ளடக்கியது. பல வகைகளில் வரும் தயாரிப்புகள் அல்லது பொருட்களைக் காண்பிக்கும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். JavaScript ஐப் பயன்படுத்தி, பல வகைகளின் அடிப்படையில் உருப்படிகளை வடிகட்டுவதற்கான உள்ளுணர்வு வழியை நாங்கள் செயல்படுத்தலாம், பயனர்கள் தாங்கள் தேடுவதைத் துல்லியமாகக் கண்டுபிடிப்பதை எளிதாக்குகிறது.

இந்த சூழ்நிலையில், ஒரு வகை பொத்தானைக் கிளிக் செய்வதன் மூலம் பக்கத்தில் காட்டப்படும் உருப்படிகளை வடிகட்ட வேண்டும். பயனர் ஒரே நேரத்தில் பல வகைகளைத் தேர்ந்தெடுக்க முடியும், இது தயாரிப்புகளை மிகவும் வடிவமைக்கப்பட்ட பார்வைக்கு அனுமதிக்கிறது. உதாரணமாக, "சால்மன்" மற்றும் "இறால்" ஆகியவற்றைத் தேர்ந்தெடுப்பது இரண்டு பொருட்களையும் கொண்ட பொருட்களை மட்டுமே காட்ட வேண்டும்.

தற்போது, பல செயலாக்கங்கள் ஒற்றை-வகை வடிகட்டலுக்கு நன்றாக வேலை செய்கின்றன, ஆனால் பல வகைகளைச் சேர்ப்பது தந்திரமானதாக இருக்கும். எந்தப் பொருட்களைக் காட்ட வேண்டும் அல்லது மறைக்க வேண்டும் என்பதைத் தீர்மானிக்கும்போது, தேர்ந்தெடுக்கப்பட்ட அனைத்து வகைகளும் கருத்தில் கொள்ளப்படுவதை உறுதி செய்வதில் சவால் உள்ளது. ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி திறமையான முறையில் ஒற்றை-வகை வடிகட்டலை பல வகை வடிகட்டலுக்கு நீட்டிப்பது எப்படி என்பதை இந்தக் கட்டுரை ஆராய்கிறது.

இந்த வழிகாட்டியில், எளிதான மற்றும் பயனர் நட்பு அனுபவத்தை வழங்கும், பல செயலில் உள்ள பொத்தான்களின் அடிப்படையில் கார்டுகளை மாறும் வகையில் வடிகட்டக்கூடிய ஒரு தீர்வைக் காண்போம். இந்த ஜாவாஸ்கிரிப்ட் தீர்வைச் செயல்படுத்துவதன் மூலம், உங்கள் வலைப்பக்கத்தின் ஊடாடுதலை எவ்வாறு மேம்படுத்துவது மற்றும் பயனர் ஈடுபாட்டை அதிகரிப்பது எப்படி என்பதை நீங்கள் அறிந்துகொள்வீர்கள்.

கட்டளை	பயன்பாட்டின் உதாரணம்
every()	The every() method is used to check if all selected categories match the categories of each card. This is crucial in ensuring that multiple category filters work correctly. For example, activeCategories.every(cat =>தேர்ந்தெடுக்கப்பட்ட அனைத்து வகைகளும் ஒவ்வொரு அட்டையின் வகைகளுக்கும் பொருந்துமா என்பதைச் சரிபார்க்க ஒவ்வொரு() முறை பயன்படுத்தப்படுகிறது. பல வகை வடிப்பான்கள் சரியாக வேலை செய்வதை உறுதி செய்வதில் இது முக்கியமானது. எடுத்துக்காட்டாக, ActiveCategories.every(cat => cardCategories.includes(cat)) தேர்ந்தெடுக்கப்பட்ட அனைத்து வகைகளும் கார்டின் வகைகளுக்குள் இருப்பதை உறுதி செய்கிறது.
toggle()	இந்த கட்டளை ஒரு வகுப்பை ஆன் அல்லது ஆஃப் செய்யும். ஒரு வகை பொத்தானில் கிளிக் செய்யும் போது செயலில் உள்ள பட்டன் வகுப்பை மாறும் வகையில் சேர்க்க அல்லது அகற்ற இது பயன்படுகிறது. பொத்தான் செயலில் உள்ளதா என்பதைக் கண்காணிக்க இது உதவுகிறது, எந்த அட்டைகள் காட்டப்படுகின்றன அல்லது மறைக்கப்படுகின்றன என்பதைப் பாதிக்கிறது.
filter()	The filter() method creates a new array with all elements that pass a test. In the Node.js example, products.filter(product => selectedCategories.every(cat =>வடிகட்டி() முறையானது சோதனையில் தேர்ச்சி பெறும் அனைத்து உறுப்புகளையும் கொண்ட புதிய வரிசையை உருவாக்குகிறது. Node.js எடுத்துக்காட்டில், product.filter(product => selectedCategories.every(cat => product.categories.includes(cat))) பயனரால் தேர்ந்தெடுக்கப்பட்ட வகைகளின் அடிப்படையில் தயாரிப்புகளை வடிகட்டுகிறது.
split()	பிரிவுகளின் சரத்தை அணிவரிசையாக மாற்ற பிளவு() முறை பயன்படுத்தப்படுகிறது. உதாரணமாக, card.getAttribute("data-category").split(",") செயலில் உள்ள வகைகளுடன் எளிதாக ஒப்பிடுவதற்காக, கமாவால் பிரிக்கப்பட்ட வகை சரத்தை ஒரு வரிசையாகப் பிரிக்கிறது.
classList.add()	இந்த முறை ஒரு உறுப்புக்கு ஒரு குறிப்பிட்ட வகுப்பைச் சேர்க்கிறது. செயலில் உள்ள வடிப்பான்களுடன் பொருந்தாத கார்டுகளை மறைக்க, செயலற்ற அட்டை வகுப்பைச் சேர்க்க இது பயன்படுகிறது. எடுத்துக்காட்டாக, card.classList.add("செயலற்ற அட்டை") அதன் வகைகள் தேர்ந்தெடுக்கப்பட்டவற்றுடன் பொருந்தாதபோது அட்டையை மறைக்கும்.
trim()	ஒரு சரத்தின் இரு முனைகளிலிருந்தும் இடைவெளியை அகற்ற டிரிம்() முறை பயன்படுத்தப்படுகிறது. ஸ்கிரிப்டில், பொத்தான்களின் வகைகளை தயாரிப்புத் தரவின் வகைகளுடன் சுத்தமாக ஒப்பிடுவதை இது உறுதி செய்கிறது. உதாரணமாக, button.innerText.trim() கூடுதல் இடைவெளிகள் கருதப்படுவதில்லை என்பதை உறுதி செய்கிறது.
post()	பின்தளத்தில் ஸ்கிரிப்ட்டில், கிளையன்ட் அனுப்பிய தரவை ஏற்றுக்கொள்ளும் வழியை உருவாக்க post() பயன்படுகிறது (இந்த வழக்கில், தேர்ந்தெடுக்கப்பட்ட வகைகள்). தேர்ந்தெடுக்கப்பட்ட வகைகளின் அடிப்படையில் வடிகட்டப்பட்ட தயாரிப்புத் தரவைத் திருப்பி அனுப்ப சர்வர் பக்க ஸ்கிரிப்ட் இந்தக் கோரிக்கையைச் செயல்படுத்துகிறது.
json()	எக்ஸ்பிரஸில் உள்ள இந்த முறை JSON பதிலை கிளையண்டிற்கு திருப்பி அனுப்ப பயன்படுகிறது. உதாரணமாக, res.json(filteredProducts) தேர்ந்தெடுக்கப்பட்ட வகைகளுடன் பொருந்தக்கூடிய தயாரிப்புகளை வழங்குகிறது, வடிகட்டப்பட்ட தயாரிப்புகளைக் காண்பிக்க கிளையன்ட் பக்கத்தை அனுமதிக்கிறது.

ஜாவாஸ்கிரிப்டில் பல வகை வடிகட்டலைப் புரிந்துகொள்வது

மேலே வழங்கப்பட்ட ஸ்கிரிப்டுகள், தயாரிப்பு அடிப்படையிலான இணையதளங்களில் பயனர் அனுபவத்தை மேம்படுத்துவதற்கு அவசியமான பல வகைகளின் அடிப்படையில் உருப்படிகளை மாறும் வகையில் வடிகட்டுவதில் கவனம் செலுத்துகிறது. பல வகைகளைத் தேர்ந்தெடுத்து அதற்கேற்ப கார்டுகளை வடிகட்ட பயனர்களை அனுமதிப்பதே குறிக்கோள். பொத்தான் கிளிக்குகளைப் படம்பிடித்து, தேர்ந்தெடுக்கப்பட்ட வகைகளை ஒரு வரிசையில் சேமித்து, பின்னர் தேர்ந்தெடுக்கப்பட்ட அனைத்து வகைகளுக்கும் பொருந்தும் கார்டுகளை மட்டும் காண்பிப்பதன் மூலம் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி இது அடையப்படுகிறது. ஒரு பயனர் ஒரு வகை பொத்தானைக் கிளிக் செய்யும் போது செயல்முறை தொடங்கப்படுகிறது, இது அந்த பொத்தானின் செயலில் உள்ள நிலையை மாற்றும். பொத்தானின் மதிப்பு ஒரு வரிசையில் சேமிக்கப்படுகிறது, இது அனைத்து செயலில் உள்ள வடிப்பான்களையும் குறிக்கிறது.

இந்த தீர்வின் முக்கியமான பகுதி வரிசை முறையைப் பயன்படுத்துகிறது ஒவ்வொரு(). தேர்ந்தெடுக்கப்பட்ட அனைத்து வகைகளும் கார்டின் வகைகளுடன் ஒப்பிடப்படுவதை இந்தக் கட்டளை உறுதி செய்கிறது. கார்டின் வகைகளுக்குள் ஒவ்வொரு செயலில் உள்ள வகையும் காணப்படுகிறதா என்பதை இது சரிபார்க்கிறது, இதனால் பல வகை வடிகட்டுதல் சீராக செயல்பட அனுமதிக்கிறது. மற்றொரு முக்கியமான முறை பிளவு(), இது ஒவ்வொரு அட்டையிலிருந்தும் வகைகளின் சரத்தை ஒரு வரிசையாக உடைக்கப் பயன்படுகிறது. தனிப்பட்ட வகைகளை ஒப்பிட்டு, எந்த அட்டைகள் காட்டப்பட வேண்டும் அல்லது மறைக்கப்பட வேண்டும் என்பதைத் தீர்மானிக்க JavaScript ஐ இது செயல்படுத்துகிறது.

கூடுதலாக, ஸ்கிரிப்ட் பயன்படுத்துகிறது classList.toggle() கிளிக் செய்யும் போது பொத்தான்களில் செயலில் உள்ள வகுப்பைச் சேர்க்க அல்லது அகற்ற. காட்சி கருத்துக்களுக்கு இந்த வகுப்பு முக்கியமானது, ஏனெனில் இது எந்த பொத்தான்கள் தற்போது செயலில் உள்ளன என்பதைக் குறிக்கிறது. ஒரு பொத்தானை செயலிழக்கச் செய்யும் போது, அதன் வகை செயலில் உள்ள வகைகளின் வரிசையிலிருந்து அகற்றப்படும், மேலும் காட்சியைப் புதுப்பிக்க வடிகட்டுதல் செயல்பாடு மீண்டும் தூண்டப்படும். செயலில் உள்ள வகைகளுடன் பொருந்தாத கார்டுகள் செயலற்றதாகக் குறிக்க வகுப்பைச் சேர்ப்பதன் மூலம் மறைக்கப்படும். பல வடிப்பான்களைத் தேர்ந்தெடுப்பதன் மூலம் அல்லது தேர்வுநீக்குவதன் மூலம் பயனர்கள் தங்கள் தேடலை எளிதாகச் செம்மைப்படுத்த முடியும் என்பதை இந்த முறை உறுதி செய்கிறது.

பின்-இறுதி ஸ்கிரிப்ட் Node.js மற்றும் Express ஐப் பயன்படுத்தி சர்வர் பக்கத்தில் தயாரிப்பு வடிகட்டலைக் கையாளும் வகையில் கட்டமைக்கப்பட்டுள்ளது. தேர்ந்தெடுக்கப்பட்ட வகைகள் POST கோரிக்கையின் மூலம் சேவையகத்திற்கு அனுப்பப்படும், மேலும் தயாரிப்புகளை வடிகட்டுவதன் மூலமும், செயலில் உள்ள வகைகளுடன் பொருந்தக்கூடிய உருப்படிகளை மட்டுமே வழங்குவதன் மூலமும் சேவையகம் இந்தக் கோரிக்கையைச் செயல்படுத்துகிறது. சேவையகம் முன்-இறுதியின் அதே தர்க்கத்தைப் பயன்படுத்துகிறது வடிகட்டி () தேர்ந்தெடுக்கப்பட்ட வகைகளை ஒவ்வொரு பொருளின் வகைகளுடன் ஒப்பிடும் முறை. பெரிய தரவுத்தொகுப்புகளைக் கையாளும் போது இந்த அணுகுமுறை பயனுள்ளதாக இருக்கும், ஏனெனில் இது கிளையன்ட் பக்கத்திலிருந்து செயலாக்கத்தை ஏற்றுகிறது, இதன் விளைவாக இறுதி பயனர்களுக்கு சிறந்த செயல்திறன் கிடைக்கும்.

ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி டைனமிக் உருப்படி வடிகட்டுதல்: உகந்த பல வகை வடிகட்டுதல்

வெண்ணிலா ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி முன்-இறுதி மேம்பாட்டு அணுகுமுறை

// Define product data
let products = {
  data: [
    { productName: "Fantasy", category: "Salmon, Shrimp" },
    { productName: "Spring", category: "Veggie" },
    { productName: "Rainbow", category: "Salmon, Tuna, Unagi" },
    { productName: "Unique", category: "Salmon, Tuna, Unagi, Shrimp" },
    { productName: "Perfection", category: "Salmon" },
  ]
};

// Handle button click event
let activeCategories = [];
document.querySelectorAll(".category-button").forEach(button => {
  button.addEventListener("click", () => {
    const category = button.innerText.trim();
    button.classList.toggle("active-button");
    if (button.classList.contains("active-button")) {
      activeCategories.push(category);
    } else {
      activeCategories = activeCategories.filter(cat => cat !== category);
    }
    filterCards();
  });
});

// Filter cards based on active categories
function filterCards() {
  document.querySelectorAll(".card").forEach(card => {
    const cardCategories = card.getAttribute("data-category").split(",");
    const match = activeCategories.every(cat => cardCategories.includes(cat));
    card.style.display = match ? "block" : "none";
  });
}

டைனமிக் உருப்படி வடிகட்டுதலுக்கான பின்தளத்தில் செயல்படுத்தல்

Node.js மற்றும் Expressஐப் பயன்படுத்தி சர்வர் பக்க அணுகுமுறை

const express = require('express');
const app = express();
app.use(express.json());

// Sample product data
const products = [
  { name: 'Fantasy', categories: ['Salmon', 'Shrimp'] },
  { name: 'Spring', categories: ['Veggie'] },
];

// Filter products API
app.post('/filter', (req, res) => {
  const selectedCategories = req.body.categories;
  const filteredProducts = products.filter(product =>
    selectedCategories.every(cat => product.categories.includes(cat))
  );
  res.json(filteredProducts);
});

app.listen(3000, () => console.log('Server running on port 3000'));

வலை அபிவிருத்தியில் பல வகை வடிகட்டலுக்கான மேம்பட்ட நுட்பங்கள்

பல வகை வடிகட்டுதல் முறையை செயல்படுத்தும் போது ஜாவாஸ்கிரிப்ட், UI தொடர்பு மட்டுமல்ல, அதை ஆதரிக்கும் தரவு கட்டமைப்பையும் கருத்தில் கொள்வது முக்கியம். டைனமிக் உள்ளடக்கத்தின் பின்னணியில், உகந்ததாகவும் சுத்தமாகவும் பராமரித்தல் DOM கையாளுதல் உத்தி முக்கியமானது. உதாரணமாக, நீங்கள் பல வகை பொத்தான்களை திறமையாக கையாள நிகழ்வு பிரதிநிதித்துவ நுட்பங்களைப் பயன்படுத்தலாம், தேவையான DOM கூறுகள் மட்டுமே கையாளப்படுவதை உறுதிசெய்யலாம்.

வடிகட்டுதல் அனுபவத்தை மேலும் மேம்படுத்தக்கூடிய ஒரு அம்சம், எளிய பொத்தான்களுக்குப் பதிலாக தேர்வுப்பெட்டிகள் அல்லது பல-தேர்ந்தெடுக்கப்பட்ட கீழ்தோன்றல்கள் போன்ற அதிநவீன UI கூறுகளைச் சேர்ப்பதாகும். இது பயனர்கள் வடிப்பான்களுடன் அதிக நுணுக்கமான முறையில் தொடர்பு கொள்ள அனுமதிக்கிறது. எடுத்துக்காட்டாக, பல தேர்வுகளை அனுமதிக்கும் கீழ்தோன்றும் ஒரு சுத்தமான UI மற்றும் வகைகளைத் தேர்ந்தெடுக்கும்போது பயனர்களுக்கு அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது. இது கூடுதல் ஜாவாஸ்கிரிப்ட் லாஜிக் மற்றும் ஸ்டைலிங் மூலம் செயல்படுத்தப்படலாம், அதே நேரத்தில் வரிசை முறைகளைப் பயன்படுத்துகிறது filter() மற்றும் every() வகை ஒப்பீடு.

மற்றொரு முக்கியமான கருத்தில் வடிகட்டுதல் அமைப்பின் செயல்திறன், குறிப்பாக பெரிய தரவுத்தொகுப்பைக் கையாளும் போது. வடிகட்டுவதற்கு உங்களிடம் நூற்றுக்கணக்கான அல்லது ஆயிரக்கணக்கான உருப்படிகள் இருக்கும்போது, முடிந்தவரை DOM கையாளுதலைக் குறைப்பது முக்கியம். இதை மேம்படுத்துவதற்கான ஒரு வழி, DOMக்கான புதுப்பிப்புகளைப் பயன்படுத்துவதாகும் requestAnimationFrame() அல்லது debounce() புதுப்பிப்புகளின் விகிதத்தைக் கட்டுப்படுத்தும் மற்றும் மென்மையான பயனர் அனுபவத்தை உறுதி செய்வதற்கான முறைகள். இந்த நுட்பங்கள் செயல்திறனை மேம்படுத்துவதோடு மட்டுமல்லாமல் பக்கத்தின் வினைத்திறனையும் மேம்படுத்துகிறது, இது பெரிய தரவுத்தொகுப்புகளுக்கு மேலும் அளவிடக்கூடியதாக ஆக்குகிறது.

JavaScript இல் பல வகை வடிகட்டுதல் பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்

பல செயலில் உள்ள வடிப்பான்களை நான் எவ்வாறு கையாள்வது?
நீங்கள் செயலில் உள்ள வடிப்பான்களை ஒரு வரிசையில் சேமித்து பயன்படுத்தலாம் every() ஒவ்வொரு அட்டையின் வகையும் தேர்ந்தெடுக்கப்பட்ட வடிப்பான்களுடன் பொருந்துகிறதா என்பதைச் சரிபார்க்க.
என்னிடம் ஒன்றுடன் ஒன்று வகைகள் இருந்தால் என்ன நடக்கும்?
பயன்படுத்தி split() மற்றும் trim(), ஒவ்வொரு வகையும் செயலில் உள்ள வடிப்பான்களுடன் சரியாக ஒப்பிடப்படுவதை உறுதிசெய்து, வகைத் தரவைப் பிரித்து சுத்தம் செய்யலாம்.
பெரிய தரவுத்தொகுப்புகளுக்கான வடிகட்டலை எவ்வாறு மேம்படுத்துவது?
தொகுதி DOM புதுப்பிப்புகளைப் பயன்படுத்துகிறது requestAnimationFrame() அல்லது செயல்படுத்த a debounce() வடிகட்டுதல் செயல்பாடுகளின் அதிர்வெண்ணைக் குறைப்பதற்கான செயல்பாடு, செயல்திறனை மேம்படுத்துதல்.
தேர்ந்தெடுக்கப்பட்ட அனைத்து வகைகளுக்கும் பொருந்தும் உருப்படிகளை எப்படிக் காட்டுவது?
பயன்படுத்தவும் every() தேர்ந்தெடுக்கப்பட்ட அனைத்து வகைகளும் ஒவ்வொரு அட்டையின் தரவிலும் சேர்க்கப்பட்டுள்ளதா என்பதை உறுதிசெய்ய, அவற்றைக் காண்பிக்கும் முன்.
அட்டை அமைப்பில் உடைந்த படங்களைக் கையாள சிறந்த வழி எது?
ஒரு செயல்படுத்தவும் error ஒவ்வொரு படத்திலும் நிகழ்வு கேட்பவர் படத்தை ஏற்றத் தவறினால் அதை மறைக்க அல்லது மாற்றவும், பயனர் அனுபவத்தை மேம்படுத்துகிறது.

ஜாவாஸ்கிரிப்ட் வடிகட்டுதல் நுட்பங்கள் பற்றிய இறுதி எண்ணங்கள்

வலைப்பக்கங்களில் பல வகை வடிகட்டலைச் செயல்படுத்துவது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்தலாம், பயனர்கள் தங்களுக்குத் தேவையானதைத் துல்லியமாகக் கண்டுபிடிப்பதை எளிதாக்குகிறது. கவனமாகப் பயன்படுத்துவதன் மூலம் ஜாவாஸ்கிரிப்ட் போன்ற முறைகள் மாற்று() மற்றும் ஒவ்வொரு(), டெவலப்பர்கள் ஒரு திறமையான, அளவிடக்கூடிய தீர்வை உருவாக்க முடியும், இது பெரிய தரவுத்தொகுப்புகளை சீராக கையாளுகிறது.

மேலும், DOM கையாளுதலை மேம்படுத்துவதன் மூலமும் தேவையற்ற செயல்பாடுகளைக் குறைப்பதன் மூலமும், இந்த அணுகுமுறை அதிக பயனர் தொடர்பு கொண்டாலும் செயல்திறனை உறுதி செய்கிறது. இந்த வடிகட்டுதல் அமைப்பை மின் வணிக இணையதளங்கள், போர்ட்ஃபோலியோக்கள் அல்லது பல வடிகட்டிகளின் அடிப்படையில் டைனமிக் உள்ளடக்கக் காட்சி தேவைப்படும் எந்தப் பக்கத்திலும் ஒருங்கிணைக்க முடியும்.

ஆதாரம் மற்றும் குறிப்பு பிரிவு

இந்தக் கட்டுரையில் உள்ள உள்ளடக்கம் மற்றும் குறியீடு எடுத்துக்காட்டுகள் அலெனா சுயன்கோவாவின் CodePen உதாரணத்தால் ஈர்க்கப்பட்டன. அசல் குறியீட்டை நீங்கள் இங்கே ஆராயலாம்: அலெனாவின் கோட்பென் .
ஜாவாஸ்கிரிப்ட் வரிசை முறைகள் மற்றும் நிகழ்வு கையாளுதல் பற்றிய கூடுதல் கருத்துக்கள் அதிகாரப்பூர்வ Mozilla Developer Network ஆவணத்தில் இருந்து குறிப்பிடப்பட்டுள்ளன, இங்கே அணுகலாம்: MDN வெப் டாக்ஸ் .
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி DOM கையாளுதல் மற்றும் செயல்திறனை மேம்படுத்துவது பற்றிய கூடுதல் நுண்ணறிவுகளுக்கு, ஸ்மாஷிங் இதழிலிருந்து இந்த விரிவான வழிகாட்டியைப் பயன்படுத்தினேன்: திறமையான DOM ஐப் புரிந்துகொள்வது .

டைனமிக் இணையதளங்களுக்கான பல வகைகளின்படி பொருட்களை வரிசைப்படுத்த JavaScript ஐப் பயன்படுத்தவும்