DEV Community: திரைச்சுவடு

Variable

திரைச்சுவடு — Tue, 03 Feb 2026 07:16:54 +0000

Variable-னா என்ன?

JavaScript-ல variable-ன்றது ஒரு மனுஷனோட அடையாளம் (Identity) மாதிரி. ஒரு மனுஷனுக்கு எப்படி பல விஷயங்கள் இருக்கும் (பேர், வயசு, வேலை), அதே மாதிரி ஒரு டேட்டாவை ஸ்டோர் பண்ண வைக்கிறதுதான் variable.

நம்ம ஒரு டேட்டாவை (Data) கம்ப்யூட்டர் மெமரில சேமிச்சு வைக்கிறதுக்கு யூஸ் பண்ற ஒரு "கண்டெய்னர்" (Container) தான் வேரியபிள். ஜாவாஸ்கிரிப்ட் ஒரு Dynamically Typed Language, அதனால நீங்க டேட்டா டைப்பை மென்ஷன் பண்ணாமலே வேல்யூஸை ஸ்டோர் பண்ணலாம்.

Const: மாற்ற முடியாதவை (Like Date of Birth / Blood Group) ஒரு மனுஷன் பிறந்த தேதியையோ (DOB) அல்லது அவனோட ரத்த வகையையோ (Blood Group) மாத்த முடியாது. இதுதான் const. விளக்கம்: ஒரு தடவை வேல்யூ குடுத்துட்டா, அப்புறம் அதை மாத்தவே முடியாது.

JS Code: const rathaVagai = "O+ve";

Let: அவ்வப்போது மாறுபவை (Like Current Designation / Address) ஒருத்தர் இன்னைக்கு 'Junior Developer'-ஆ இருப்பாரு, அடுத்த வருஷம் 'Senior'-ஆ மாறிடுவாரு. இன்னைக்கு சென்னையில இருப்பாரு, நாளைக்கு பெங்களூருக்கு மாறிடுவாரு. இதுதான் let.

ஒரு குறிப்பிட்ட சூழ்நிலைக்கோ (Block Scope) அல்லது நேரத்துக்கோ ஏத்த மாதிரி இதை மாத்திக்கலாம்.

JS Code: let velai = "Junior Dev"; (அடுத்த வருஷம் velai = "Senior Dev";-ன்னு மாத்தலாம்).

Var: ஒரு பழைய பழக்கம் (Like Family Reputation / Nickname) முன்னாடி காலத்துல ஒரு குடும்பத்தோட கௌரவம் (Reputation) ஊர் முழுக்க பேசப்படும். அது அந்த மனுஷனோட கண்ட்ரோல்லயே இருக்காது. எங்க வேணா மாறும். இதுதான் var.

இது Function Scope. அதாவது ஒரு ரூம்குள்ள மட்டும் இல்லாம, எல்லா இடத்துலயும் இதோட ஆதிக்கம் இருக்கும். இது அடிக்கடி குழப்பத்தை உண்டாக்கும் (Hoisting). அதனால இப்ப யாரும் இதை அதிகமா யூஸ் பண்றது இல்ல.

JS Code: var ooruPayer = "Madurai";

இதோட Pros & Cons :

Const (Pros): ரொம்ப Safe. தெரியாம கூட வேல்யூவை மாத்த முடியாது. அதனால கோட் 'Predictable'-ஆ இருக்கும்.
Let (Pros): Memory Management-க்கு சூப்பர். வேலை முடிஞ்சதும் மெமரியை விட்டு போயிடும் (Block scope).
Var (Cons): இதோட பெரிய மைனஸ் Hoisting. அதாவது வேரியபிளை டிக்ளர் பண்றதுக்கு முன்னாடியே அது வந்து நிக்கும் (ghost மாதிரி). இதனால நிறைய 'Bugs' வரும்.

Execution (எப்படி நடக்கும்?):

Memory Phase: மனுஷன் பிறக்குறதுக்கு முன்னாடியே அவனுக்கு என்னென்ன தேவைன்னு பிளான் பண்ற மாதிரி, JS என்ஜின் மெமரியை ஒதுக்கும்.
Execution Phase: மனுஷன் வளர்ந்து ஒரு ஒரு ஸ்டேஜா அடையுற மாதிரி, கோட் ஒரு ஒரு லைனா ரன் ஆகி வேல்யூவை அசைன் பண்ணும்.

Built this comprehensive guide in Tamil, but the code speaks English! Get the full picture by using the browser's translate feature. Appreciate any feedback and engagement from the DEV community! #Web development.

திரைச்சுவடு — Mon, 02 Feb 2026 04:40:38 +0000

திரைச்சுவடு

Jan 20

JavaScript (The Brain)

#discuss #javascript #programming #productivity

Comments

2 min read

Built this comprehensive guide in Tamil, but the code speaks English! Get the full picture by using the browser's translate feature. Appreciate any feedback and engagement from the DEV community! #Web development.

திரைச்சுவடு — Mon, 02 Feb 2026 04:39:59 +0000

திரைச்சுவடு

Jan 20

HTML (The Skeleton)

#discuss #html #programming #productivity

Comments

1 min read

HTTP - இணையத்தின் முதுகெலும்பு

திரைச்சுவடு — Thu, 22 Jan 2026 10:57:15 +0000

HTTP என்பது இணையத்தின் முதுகெலும்பு போன்றது.

1. What: HTTP-ன்னா என்ன?

HTTP என்பது HyperText Transfer Protocol. இது பிரவுசருக்கும் (Client) சர்வர்க்கும் (Server) இடையே தகவல்களைப் பரிமாறப் பயன்படும் ஒரு "விதிமுறை" (Rules).

Example: நீங்க ஒரு ஜூஸ் கடைக்கு (Server) போறீங்க. நீங்க ஒரு வாடிக்கையாளர் (Client). அங்க இருக்குற சர்வர் (Waiter) தான் HTTP.
நீங்க "எனக்கு ஒரு ஆப்பிள் ஜூஸ் குடுங்க"ன்னு கேட்குறீங்க (இது Request).

அந்த சர்வர் கடைக்குள்ள போய் ஜூஸ் போட்டு எடுத்துட்டு வந்து உங்ககிட்ட குடுக்குறார் (இது Response).

2. Why: இது ஏன் தேவை?

இணையத்துல இருக்குற ஒரு வெப்சைட்-ஐ நீங்க பாக்கணும்னா, அந்த வெப்சைட் பைல்கள் எங்கோ ஒரு கம்ப்யூட்டர்ல (Server) இருக்கும். அந்த பைல்களை உங்க கம்ப்யூட்டருக்கு கொண்டு வர ஒரு "பாலம்" வேணும். அந்த வேலையைத்தான் HTTP செய்யுது.

3. Where & When: இது எங்கே, எப்போது நடக்கும்?

Where: இது உங்க பிரவுசரோட பேக்கிரவுண்ட்-ல (Background) நடக்கும்.
When: நீங்க ஒரு URL டைப் பண்ணும்போதோ, அல்லது ஒரு பட்டனை கிளிக் செய்யும்போதோ (உதாரணத்துக்கு Facebook 'Like' பட்டன்), உடனே ஒரு HTTP Request கிளம்பி சர்வருக்கு போகும்.

4. HTTP Types (Methods): முக்கியமான வகைகள்
ஒரு மனுஷன் கடைக்கு போய் என்னென்ன காரியம் செய்வானோ, அதே மாதிரி HTTP-லயும் வகைகள் இருக்கு:

GET (வாசித்தல்): சர்வருகிட்ட இருந்து ஒரு தகவலை மட்டும் எடுத்துட்டு வர (உதாரணம்: News படிக்கிறது).
POST (உருவாக்குதல்): புதுசா ஒரு தகவலை சர்வருக்கு அனுப்ப (உதாரணம்: புதுசா ஒரு Account Create பண்றது).
PUT / PATCH (மாற்றுதல்): ஏற்கனவே இருக்குற தகவலை அப்டேட் பண்ண (உதாரணம்: Profile Photo மாத்துறது).
DELETE (நீக்குதல்): ஒரு தகவலை டெலீட் பண்ண (உதாரணம்: ஒரு Post-ஐ டெலீட் பண்றது).

5. Pros and Cons (நன்மைகள் மற்றும் தீமைகள்)

Pros (நன்மைகள்)

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

Cons (தீமைகள்)

HTTP பாதுகாப்பானது இல்லை. அதனாலதான் 2026-ல் எல்லாரும் HTTPS (S - Secure) பயன்படுத்துறாங்க.
டேட்டா திருடப்பட வாய்ப்பு இருக்கு (Encryption கிடையாது).

6. Alternatives (மாற்று வழிகள்)
HTTP-க்கு மாற்றாக இவை பயன்படுது:

WebSockets: இது ஒரு போன் கால் மாதிரி. சர்வரும் நீங்களும் எப்போவும் பேசிக்கிட்டே இருக்கலாம் (உதாரணம்: WhatsApp Chat, Live Game).
gRPC: ரொம்ப வேகமா டேட்டாவை அனுப்ப பெரிய கம்பெனிகள் பயன்படுத்துறாங்க.
FTP: வெறும் பைல்களை மட்டும் ஏத்தவோ இறக்கவோ பயன்படுது.

சுருக்கமாக: HTTP என்பது பிரவுசருக்கும் சர்வருக்கும் இடையே நடக்கும் ஒரு "கேள்வி-பதில்" விளையாட்டு போன்றது.

Local file communication

திரைச்சுவடு — Thu, 22 Jan 2026 10:45:53 +0000

உங்கள் லோக்கல் (Local) ஃபைல்களைத் திறக்கும்போது ஏன் 'HTTP Call' அல்லது 'Network Request' நடக்கிறது என்பதற்கான விளக்கம் இதோ:

1. 'Request' என்பது ஒரு தகவல் தொடர்பு (Communication)

ஜாவாஸ்கிரிப்ட் மற்றும் பிரவுசரைப் பொறுத்தவரை, ஒரு ஃபைலைத் திறப்பது என்பது ஒரு "ஆர்டர்" கொடுப்பது போன்றது.
உங்கள் HTML ஃபைல் லோக்கல் டிஸ்க்கில் (C: Drive அல்லது D: Drive) இருந்தாலும், பிரவுசர் அதை நேரடியாகப் படிக்காது.
மாறாக, பிரவுசரின் ஒரு பகுதி (Client) உங்கள் கம்ப்யூட்டரின் மற்றொரு பகுதியிடம் (File System) அந்த ஃபைலைத் தரும்படி ஒரு ரிக்வெஸ்ட் கேட்கும். இந்தத் தொடர்புதான் நெட்வொர்க் டேப்பில் பதிவாகிறது.

2. ஏன் இது 'HTTP' ஆகக் காட்டப்படுகிறது?

பொதுவாக இணையதளங்கள் http:// அல்லது https:// மூலம் இயங்கும். ஆனால் லோக்கல் ஃபைல்கள் file:/// என்ற புரோட்டோகால் மூலம் இயங்கும்.

Chrome போன்ற நவீன பிரவுசர்கள், அனைத்து வகையான டேட்டா பரிமாற்றங்களையும் (அது லோக்கல் ஃபைலாக இருந்தாலும் சரி) ஒரே மாதிரியான Network Log-ல் காட்டுகின்றன.
நீங்கள் ஒரு HTML-ஐத் திறந்தால், அதில் உள்ள CSS, Images மற்றும் JS கோப்புகளை ஒவ்வொன்றாகப் பெற பிரவுசர் தனித்தனி 'Internal Requests' அனுப்பும்.

3. JavaScript Point of View (JS ஏன் இதைச் செய்கிறது?)

ஜாவாஸ்கிரிப்ட் கோப்புகள் இயங்க வேண்டுமானால், அவை முதலில் பிரவுசரின் மெமரிக்குள் (Memory) வர வேண்டும்.
Parsing: பிரவுசர் உங்கள் HTML-ஐ வாசிக்கும்போது, <script src="script.js"> என்ற வரியைப் பார்த்தால், உடனே அந்த ஃபைலைத் தேடி ஒரு ரிக்வெஸ்ட் அனுப்பும்.
Security (CORS): நீங்கள் லோக்கல் ஃபைலை நேரடியாகத் திறக்கும்போது (Double click), சில ஜாவாஸ்கிரிப்ட் வேலைகள் (உதாரணமாக: fetch() அல்லது APIs) பாதுகாப்பு காரணங்களுக்காகத் தடுக்கப்படலாம். ஏன்னென்றால், file:// முறையில் ரிக்வெஸ்ட் அனுப்புவது பாதுகாப்பற்றதாக பிரவுசர் கருதுகிறது.

4. எப்போது இது மாறும்?

நீங்கள் Live Server (VS Code extension) அல்லது லோக்கல் ஹோஸ்ட் (Localhost) பயன்படுத்தினால், அது உண்மையான HTTP Request ஆக மாறும்.
Localhost: இங்கே ஒரு குட்டி சர்வர் உங்கள் கம்ப்யூட்டருக்குள்ளேயே ஓடும். இது file:// என்பதை விட http://localhost:5500 என இயங்குவதால், ஒரிஜினல் இணையதளம் போலவே வேலை செய்யும்.
சுருக்கமாக: உங்கள் ஃபைல்கள் கம்ப்யூட்டருக்கு உள்ளேயே இருந்தாலும், பிரவுசர் அவை ஒவ்வொன்றையும் தனித்தனியாகத் திரட்டி (Fetch) ஒரு பக்கமாக உருவாக்க வேண்டியுள்ளது. அந்தத் "திரட்டும்" செயலே நெட்வொர்க் டேப்பில் ரிக்வெஸ்ட்டாகத் தெரிகிறது.

திருத்து - Debug

திரைச்சுவடு — Thu, 22 Jan 2026 10:24:36 +0000

JavaScript (JS) கோப்புகளைத் திருத்துவதற்கும் (Debug), அதேபோல் HTML மற்றும் CSS கோப்புகளைச் சரிபார்ப்பதற்கும் பல எளிய வழிகள் உள்ளன.

1. JavaScript Debugging: வழிகள் (Ways)

Browser Developer Tools (F12): இதுவே முதன்மையான வழி. Chrome அல்லது Edge பிரவுசரில் F12 அழுத்தி Sources Tab-க்குச் சென்றால் உங்கள் JS கோப்பைக் காணலாம்.

Breakpoints: Sources Tab-ல் கோட்டின் எண்ணைக் (Line Number) கிளிக் செய்தால் Breakpoint அமையும். கோடு அங்கே வந்து நின்றுவிடும், அப்போது வேரியபிள்களில் என்ன மதிப்பு இருக்கிறது என்று ஒவ்வொன்றாகச் சரிபார்க்கலாம்.

Console Logging: உங்கள் கோடில் console.log(variableName); என்று சேர்ப்பதன் மூலம், அந்த வேரியபிளின் மதிப்பை Console Tab-ல் உடனுக்குடன் பார்க்கலாம்.

Debugger Keyword: உங்கள் கோடில் debugger; என்று டைப் செய்தால், பிரவுசர் அந்த இடத்தில் தானாகவே எக்ஸிகியூஷனை நிறுத்திவிடும்.

VS Code Debugger: Visual Studio Code எடிட்டரிலேயே 'Run and Debug' வசதியைப் பயன்படுத்தி பிரவுசரை இணைத்து டிபக் செய்யலாம்.

2. CSS மற்றும் HTML-ஐ Debug செய்ய முடியுமா?

நிச்சயமாக முடியும். ஆனால் இவை JS போல இயங்கும் கோடுகள் அல்ல என்பதால், இவற்றைப் பார்க்கும் விதம் சற்று வேறுபடும்.

HTML Debugging:

Elements Tab: பிரவுசரில் F12 அழுத்தி Elements Tab-க்குச் சென்றால், உங்கள் HTML ஸ்ட்ரக்சரைப் பார்க்கலாம்.

ஏதேனும் டேக் மூடப்படாமல் இருந்தாலோ அல்லது தவறாக இருந்தாலோ இங்கே கண்டறியலாம்.
நேரடியாக அங்கேயே டெக்ஸ்ட்டை மாற்றிப் பார்த்து (Edit as HTML) சோதனை செய்யலாம்.

CSS Debugging:

Styles Pane: ஒரு எலிமெண்ட்டைத் தேர்வு செய்தால், அதற்கு என்னென்ன CSS விதிகள் பயன்படுத்தப்பட்டுள்ளன என்று வலது பக்கம் தெரியும்.

தேவையற்ற ஸ்டைல்களை அணைத்து (Disable) பார்க்கலாம் அல்லது புதிய ஸ்டைல்களை உடனுக்குடன் சேர்த்து (Live Edit) அவுட்புட்டைச் சரிபார்க்கலாம்.

Computed Tab: ஒரு எலிமெண்ட்டின் இறுதி விளிம்பு (Border), பேடிங் (Padding) போன்றவை எவ்வளவு பிக்சல்களில் உள்ளன என்பதை இங்கே பார்க்கலாம்.

3. பொதுவான சிக்கல்கள் (Common Problems)

Syntax Errors: } அல்லது ; போன்றவற்றை விடுவித்தால் JS இயங்காது.
Specificity Issues (CSS): நீங்கள் ஒரு ஸ்டைல் கொடுத்தும் அது மாறவில்லை என்றால், வேறு ஒரு ஸ்டைல் அதை ஓவர்ரைட் (Overwrite) செய்கிறது என்று அர்த்தம்.
Caching: நீங்கள் மாற்றிய கோடு பிரவுசரில் தெரியவில்லை என்றால் Ctrl + Shift + R கொடுத்து ஹார்ட் ரீலோட் (Hard Reload) செய்யவும்.

Executions

திரைச்சுவடு — Thu, 22 Jan 2026 09:39:24 +0000

1. Traditional/Separate Files Way

Traditional/Separate Files Way என்பது HTML, CSS மற்றும் JavaScript ஆகிய மூன்றையும் தனித்தனி ஃபைல்களாகப் பிரித்து வைப்பதாகும். இது ஒரு சமையலறையில் மளிகை பொருட்கள், பாத்திரங்கள் மற்றும் காய்கறிகளைத் தனித்தனியாக அடுக்கி வைப்பது போன்றது.

ஏன் இப்படி பிரிக்க வேண்டும்? (Pros)

Clean Code: HTML-ல் ஸ்ட்ரக்சர் மட்டும் இருக்கும், CSS-ல் அழகுபடுத்தும் வேலை மட்டும் இருக்கும். குழப்பம் வராது.
Easy Debugging: ஸ்டைலில் பிரச்சனை என்றால் CSS ஃபைலை மட்டும் பார்க்கலாம்.
Reusability: ஒரு CSS ஃபைலை பல HTML பக்கங்களுக்குப் பயன்படுத்தலாம்.

Step-by-Step Example:
உதாரணத்திற்கு ஒரு பட்டனை உருவாக்கி, அதை அழகுபடுத்தி, கிளிக் செய்தால் ஒரு மெசேஜ் வருவது போல செய்வோம்.
1. HTML File (index.html)
இதுதான் எலும்புக்கூடு. இதில் CSS மற்றும் JS ஃபைல்களை இணைக்க (Link) வேண்டும்.

2. CSS File (style.css)
இது மேக்கப் போடும் வேலை. இந்த ஃபைலில் HTML டேக்குகளுக்கு ஸ்டைல் கொடுப்போம்.

3. JavaScript File (script.js)
இது மூளை. பட்டனை அழுத்தினால் என்ன நடக்க வேண்டும் என்று இங்கே சொல்லுவோம்.

எப்படி வேலை செய்கிறது?

பிரவுசர் index.html-ஐ முதலில் படிக்கும்.
<link> டேக் பார்த்தவுடன் style.css-ஐ டவுன்லோட் செய்து அழகைக் கொடுக்கும்.
கடைசியில் <script> டேக் பார்த்தவுடன் script.js-ஐ எடுத்துக்கொண்டு மூளையை (Logic) செயல்படுத்தும்.

செய்யக்கூடாதவை (Don'ts):

CSS மற்றும் JS ஃபைல் பெயர்களைத் தவறாகக் கொடுக்காதீர்கள் (உதாரணம்: Style.css என இருந்தால் style.css என அழைக்காதீர்கள் - Case Sensitive).
ஃபைல்கள் எல்லாம் ஒரே ஃபோல்டரில் (Folder) இருப்பதை உறுதி செய்யவும். இல்லையெனில் சரியான பாத் (Path) கொடுக்க வேண்டும்.

2. Single File Way (Inline/Internal)

Single File Way என்பது HTML, CSS, மற்றும் JavaScript ஆகிய மூன்றையும் ஒரே .html கோப்பிற்குள் எழுதுவதாகும். இதை Internal Styling மற்றும் Internal Scripting என்றும் அழைப்பார்கள்.

இது எப்போது உதவும்?

மிகச்சிறிய புராஜெக்ட்கள் அல்லது ஒரு சிறிய 'Landing Page' செய்யும்போது.
கோடிங் கற்றுக் கொள்ளும் ஆரம்பக் கட்டத்தில் (Beginners) கோப்புகளை மாற்றி மாற்றிப் பார்க்காமல் இருக்க.
யாராவது ஒருவருக்குத் தபால் (Email) மூலம் ஒரு சிறிய வேலையை அனுப்பும்போது (ஒரே ஃபைலாக அனுப்ப எளிது).

Single File Example:
இந்த ஒரு ஃபைலை மட்டும் சேமித்து ரன் செய்தால் போதும்.

<!DOCTYPE html>
<html lang="ta">
<head>
    <meta charset="UTF-8">
    <title>Single File Example</title>

    <!-- 1. CSS இங்கேயே இருக்கும் (Internal CSS) -->
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 50px;
            background-color: #e3f2fd;
        }

        .box {
            background: white;
            padding: 20px;
            display: inline-block;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
        }

        button {
            background-color: #ff5722;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="box">
        <h1 id="status">விளக்கு அணைந்துள்ளது</h1>
        <!-- 2. Inline Event - HTML-க்குள்ளேயே சிறிய JS -->
        <button onclick="changeLight()">விளக்கை ஏற்று</button>
    </div>

    <!-- 3. JavaScript இங்கேயே இருக்கும் (Internal JS) -->
    <script>
        function changeLight() {
            const status = document.getElementById("status");
            status.innerHTML = "விளக்கு எரிந்து கொண்டிருக்கிறது! 💡";
            status.style.color = "#fbc02d";
            document.body.style.backgroundColor = "#fff9c4";
        }
    </script>

</body>
</html>

இதில் உள்ள முக்கியமான பகுதிகள்:

<style> Tag: இதுதான் CSS-க்கான இடம். <head> பகுதிக்குள் இருக்கும்.
Inline Attributes: onclick="changeLight()" என்பது HTML டேக்கிற்குள்ளேயே நேரடியாக JavaScript-ஐக் குறிப்பது.
<script> Tag: இது JavaScript-க்கான இடம். பொதுவாக இதைப் பாடியின் (<body>) இறுதியில் வைப்பார்கள்.

Pros & Cons
Pros:

ஒரே ஃபைலை மட்டும் மெயின்டைன் செய்தால் போதும்.
பிரவுசர் ஒரே ஒரு முறைதான் சர்வரைக் கேட்கும் Single HTTP Request.

Cons:

கோடு 1000 வரிகளுக்கு மேல் போனால் எங்கு என்ன இருக்கிறது என்று தேடுவது கஷ்டம்.
இதே ஸ்டைலை இன்னொரு பக்கத்திற்குப் பயன்படுத்த முடியாது (Code Reusability இல்லை).
பிரவுசருக்கு இந்த கோப்பைத் தனியாகப் பிரித்து சேமிக்க (Caching) முடியாது, அதனால் பக்கம் மெதுவாகத் தெரியலாம்.

3. Modern Framework Way (React, Vue, Angular)

இங்கு HTML, CSS மற்றும் JS ஆகியவை Components-களாக பிரிக்கப்படுகின்றன.

Pros: பெரிய அப்ளிகேஷன்களை உருவாக்க இதுவே சிறந்த வழி. கோட் மீண்டும் பயன்படுத்தக்கூடியதாக (Reusable) இருக்கும். இணையதளம் மிகவும் வேகமாக இயங்கும்.
Cons: இதைக் கற்றுக்கொள்வது கடினம் (Steep learning curve). ஆரம்பத்தில் செட்-அப் செய்ய அதிக நேரம் எடுக்கும்.

4. Progressive Web Apps (PWA)

இணையதளங்களை மொபைல் ஆப் (App) போல இயங்கச் செய்யும் முறை.

Pros:இணையம் (Internet) இல்லாமலும் இயங்கும் வசதி உண்டு. மொபைல் ஆப் போலவே புஷ் நோட்டிபிகேஷன் அனுப்பலாம்.
Cons: ஐபோன் (iOS) போன்ற சில தளங்களில் இன்னும் முழுமையான ஆதரவு கிடைக்காமல் போகலாம்.

5. அதிகம் அறியப்படாத புதிய முறைகள்

Web Components: எவ்வித பிரேம்வொர்க்கும் (React, Vue) இல்லாமல், பிரவுசரின் சொந்த வசதிகளை வைத்தே சொந்தமாக டேக்குகளை (Custom Tags) உருவாக்குவது.
Island Architecture (Astro): தேவையான இடங்களில் மட்டும் JavaScript-ஐப் பயன்படுத்தி, மற்ற இடங்களை நிலையான HTML-ஆக வைத்திருப்பது. இது இணையதளத்தின் வேகத்தை உச்சகட்டத்திற்கு கொண்டு செல்லும்.
CSS-in-JS: JavaScript கோப்பிற்குள்ளேயே CSS எழுதுவது. இது ஸ்டைல்களை டைனமிக்காக மாற்ற உதவும்.

Operator - "கருவி"

திரைச்சுவடு — Thu, 22 Jan 2026 08:54:58 +0000

JavaScript-ல் Operator என்பது ஒரு வேலையைச் செய்யப் பயன்படும் "கருவி" (Tool) அல்லது "குறியீடு" (Symbol) ஆகும்.

1. What: Operator-ன்னா என்ன?

ரெண்டு டேட்டாவை (Data) வச்சு ஏதாச்சும் ஒரு வேலையைச் செய்யப் பயன்படும் குறியீடுகள்தான் Operators.

Example: ஒரு மனுஷன் கையில இருக்குற "கத்தி" (Knife) அல்லது "கரண்டி" (Spoon) மாதிரி. கத்தியை வச்சு காய்கறி வெட்டலாம், கரண்டியை வச்சு சாப்பிடலாம். அதே மாதிரி, Operator-ஐ வச்சு ரெண்டு எண்களைக் கூட்டலாம் அல்லது ஒப்பிடலாம்.

let sum = 10 + 5; -> இதில் + என்பதுதான் Operator. 10 மற்றும் 5 என்பது Operands (யாரு மேல வேலை நடக்குதோ அவங்க).

2. Why: இது எதுக்கு தேவை?

Example: உங்களுக்கு ரெண்டு ஆப்பிள் இருக்கு, உங்க ரண்டுக்கு மூணு இருக்கு. மொத்தம் எத்தனைன்னு தெரிய ஒரு "கூட்டல்" (+) தேவைப்படுதுல?

லாஜிக் போட: "இவன் உயரமா? அல்லது அவன் உயரமா?"னு செக் பண்ண ஒரு ஒப்பீடு (Comparison) தேவை. இந்த மாதிரி கணக்கு போடவும், கண்டிஷன் செக் பண்ணவும் Operators கண்டிப்பா வேணும்.

3. Where & How: முக்கியமான Operator வகைகள் (With Human Example)

1. Arithmetic Operators (கணக்கீடு செய்பவர்கள்)
ஒரு மனிதன் தன் வரவு-செலவு கணக்கைச் சரிபார்ப்பது போன்றது இது.

+ (Addition): இருவரை இணைப்பது (உதாரணம்: அப்பா + அம்மா = குடும்பம்).
- (Subtraction): ஒருவரிடமிருந்து ஒன்றைப் பிரிப்பது.
** (Exponentiation): இது நவீன ஜாவாஸ்கிரிப்ட்டில் அதிகம் பயன்படும் (Power of).

Example: let power = 2 ** 3; (2-ன் அடுக்கு 3 = 8).

%(Modulus): மீதி (Remainder) கண்டுபிடிப்பது. 10 சாக்லேட்டை 3 பேருக்குப் பிரித்துக் கொடுத்தால் மீதி 1 இருக்கும்.

Example: 10 % 3 அவுட்புட் 1 என வரும்.

2. Assignment Operators (பொறுப்பு கொடுப்பவர்கள்)
ஒரு மனிதனுக்கு ஒரு வேலையையோ அல்லது ஒரு பொருளையோ ஒதுக்குவது.

= (Simple Assignment): let job = "Doctor"; (வேலை ‘டாக்டர்’ என்று உறுதி செய்தல்).
+= (Add and Assign): உங்களிடம் 10 ரூபாய் இருக்கிறது, யாரோ 5 ரூபாய் தருகிறார்கள். இப்போது மொத்தம் 15.

Example: money += 5; (இதன் அர்த்தம் money = money + 5). இது கோடைச் சுருக்கப் பயன்படுகிறது.

3. Comparison Operators (ஒப்பீடு செய்பவர்கள்) **
மிக முக்கியம் இங்குதான் லாஜிக் (Logic) ஆரம்பிக்கிறது. இருவரை ஒப்பிடுவது.
**== vs === (The Deep Difference):

== (Abstract Equality): இது மதிப்பை மட்டும் பார்க்கும். (உதாரணம்: "5" மற்றும் 5 சமம் என்று சொல்லும்).
===(Strict Equality): இது மதிப்பு மற்றும் டேட்டா வகை (Data Type) இரண்டையும் பார்க்கும். 2026-ல் இதைப் பயன்படுத்துவதுதான் புத்திசாலித்தனம்.

Example: 5 === "5" என்பது False என வரும், ஏன்னா ஒன்று எண், இன்னொன்று டெக்ஸ்ட்.

!= vs !==: சமம் இல்லை என்பதை உறுதி செய்ய.

4. Logical Operators (முடிவு எடுப்பவர்கள்)
ஒரு மனிதன் மூளை மூலம் சிந்தித்து முடிவெடுப்பது போன்றது.

&& (AND): "எனக்கு பசியும் எடுக்கணும், சாப்பாடும் இருக்கணும் - அப்போதான் சாப்பிடுவேன்". இரண்டுமே உண்மையாக (True) இருக்க வேண்டும்.
|| (OR): "டீ அல்லது காபி - எது இருந்தாலும் குடிப்பேன்". ஏதேனும் ஒன்று உண்மையாக இருந்தால் போதும்.
! (NOT): தலைகீழாக மாற்றுவது. உண்மையை பொய் என்றும், பொய்யை உண்மை என்றும் மாற்றும்.

Example: !true என்பது false என மாறும்.

5. Ternary Operator (குறுக்கு வழி - Short-cut)
இது if-else கண்டிஷனுக்கு மாற்றாகப் பயன்படுத்தப்படும் ஒரு ஸ்டைலான வழி.
Syntax: condition ? value_if_true : value_if_false
மனுஷன் எக்ஸாம்பிள்: கல்யாண வயசு வந்துடுச்சா?

let age = 22;
let status = (age >= 21) ? "Eligible" : "Not Eligible";
console.log(status); // Output: Eligible

6. Nullish Coalescing Operator (??) - Modern JS
இது 2026-ல் மிக முக்கியமான ஆப்பரேட்டர். ஒரு வேரியபிளில் மதிப்பு இல்லை என்றால் (null அல்லது undefined), ஒரு டீபால்ட் மதிப்பைக் கொடுக்க இது உதவும்.
Example: ஒரு மனுஷனுக்கு இன்னும் பெயர் வைக்கவில்லை என்றால், அவரை "Guest" என்று கூப்பிடு.

let username = null;
let displayName = username ?? "Guest"; 
console.log(displayName); // Output: Guest

4. Operator-ல் செய்யக்கூடாதவை (Logic Mistakes)

== பயன்படுத்துவதைத் தவிர்க்கவும்: இது டேட்டா வகையைச் சரிபார்க்காது (5 == "5" என்பது True என வரும்). எப்போதும் === (Strict Equality) பயன்படுத்துங்கள்.

Assignment மற்றும் Equality-ஐக் குழப்பிக் கொள்ளாதீர்கள்:

if (age = 18) -> இது தவறு (மதிப்பை மாற்றுகிறது).
if (age === 18) -> இதுதான் சரி (சரிபார்க்கிறது).

சரியான அடைப்புக்குறிகள் (Parentheses) இன்றி எழுதாதீர்கள்:

let result = 2 + 3 * 5; -> இது 17 வரும் (முதலில் பெருக்கல் நடக்கும்).
உங்களுக்கு கூட்டல் முதலில் நடக்க வேண்டுமென்றால் (2 + 3) * 5 என்று எழுதுங்கள். ஆப்பரேட்டர் முன்னுரிமை (Precedence) தெரியாமல் கோடு எழுதாதீர்கள்.

சரம் (String) மற்றும் எண்களைக் கூட்டும்போது கவனம்:

console.log(5 + "5"); -> இது 55 என்று வரும் (கூட்டாது, இணைத்துவிடும்). எண்களைக் கூட்டும்போது அவை உண்மையில் எண்கள்தானா என்று உறுதி செய்து கொள்ளவும்.

5. பொதுவான தவறுகள்

Don't use var: var பயன்படுத்துவது மிகவும் பழைய முறை. எப்போதும் let அல்லது const பயன்படுத்துங்கள். இது Identifier-ல் ஏற்படும் குழப்பங்களைத் தவிர்க்கும்.
Don't ignore Null/Undefined: ஒரு வேரியபிளில் மதிப்பு இருக்கிறதா இல்லையா என்று தெரியாமல் ஆப்பரேட்டர்களைப் பயன்படுத்தாதீர்கள். ?? (Nullish Coalescing) பயன்படுத்தி டீபால்ட் மதிப்பைக் கொடுக்கப் பழகுங்கள்.
Don't write "Spaghetti Code": ஆப்பரேட்டர்களைப் பயன்படுத்தி ஒரே வரியில் மிக நீளமான லாஜிக் எழுதாதீர்கள். அதைப் பிரித்து எழுதுவது மற்றவர்கள் படிக்க எளிதாக இருக்கும்.

Identifier - வைக்கும் "பெயர்"

திரைச்சுவடு — Thu, 22 Jan 2026 07:02:05 +0000

1. What: Identifier-ன்னா என்ன?

Identifier என்பது நீங்கள் ஒரு வேரியபிள் (Variable), ஃபங்க்ஷன் (Function), அல்லது ஒரு கிளாஸ்க்கு (Class) வைக்கும் "பெயர்" (Name) ஆகும்.

Example: ஒரு குழந்தை பிறக்குதுன்னா, அந்த குழந்தையை மத்தவங்க கிட்ட இருந்து பிரிச்சு காட்ட நாம "ராகுல்" அல்லது "பிரியா"ன்னு ஒரு பெயர் வைக்கிறோம்ல? அந்தப் பெயர்தான் ப்ரோக்ராமிங்ல Identifier.

let manithan= "Rahul";-> இதில் manithanஎன்பதுதான் Identifier.

2. Why: இது எதுக்கு தேவை?

Example: ஒரு கூட்டத்துல 100 பேர் இருக்காங்க. அங்க போய் "ஏய் மனுஷா இங்க வா!"ன்னு கூப்பிட்டா எல்லாரும் குழம்பிடுவாங்க. அதுவே "ராகுல் இங்க வா!"ன்னு கூப்பிட்டா கரெக்டா அந்த ஒருத்தர் வருவார்.

அதே மாதிரி, கம்ப்யூட்டர் மெமரியில நிறைய டேட்டா (Data) இருக்கும். எந்த டேட்டாவை நாம இப்போ கூப்பிடுறோம்னு கம்ப்யூட்டருக்கு தெரிய வைக்க இந்த "பெயர்" (Identifier) கண்டிப்பா வேணும்.

3. Where: இதை எங்கெல்லாம் பயன்படுத்துவோம்?

ஒரு மனுஷனோட வாழ்க்கையில பல இடத்துல பெயர் தேவைப்படுற மாதிரி, கோடுல இந்த இடத்துலலாம் வரும்:

Variables (பெயர்): let name = "Kumar";
Constants (மாறாத குணம்): const bloodGroup = "O+";
Functions (அவன் செய்யுற வேலை): function walking() { ... }
Objects (அவனை பத்தின விபரம்): let human = { height: 170, weight: 70 };

4. How: இதை எப்படி உருவாக்கணும்? (Rules)

ஒரு குழந்தைக்கு பெயர் வைக்கும்போது சில ரூல்ஸ் இருக்குல? (உதாரணத்துக்கு: பெயருக்கு நடுவுல நம்பர் வைக்க மாட்டோம்). அதே மாதிரி Identifier-க்கும் 4 முக்கியமான ரூல்ஸ் இருக்கு:

Rule 1: எண்கள் (Numbers) கூடாது: பெயரோட ஆரம்பத்துல நம்பர் வரக்கூடாது.
❌ let 1stPerson = "Rahul"; (தப்பு - 1-னு ஆரம்பிக்குது)
✅ let person1 = "Rahul"; (சரி - 1 கடைசில வருது)
Rule 2: ஸ்பேஸ் (Space) இருக்கக்கூடாது:
❌ let human name = "Rahul"; (தப்பு - நடுவுல கேப் இருக்கு)
✅ let humanName = "Rahul"; (சரி - இதான் camelCase-ன்னு சொல்லுவாங்க. 2026-ல இதான் ஸ்டாண்டர்டு).
Rule 3: ஸ்பெஷல் சிம்பல்ஸ்: $ மற்றும் _ (underscore) தவிர வேற எந்த குறியீடும் (Like @, #, %) பயன்படுத்தக்கூடாது.
✅ let _human = "Rahul";
✅ let $money = 500;
Rule 4: ரிசர்வ் செய்யப்பட்ட வார்த்தைகள் (Keywords): JavaScript-க்கே சொந்தமான வார்த்தைகளை (உதாரணத்துக்கு: let, var, function, if) பேரா வைக்க முடியாது.
❌ let let = "Rahul";(தப்பு - ஏன்னா 'let' ஒரு கீவேர்ட்).

5. Deep Analysis: Case Sensitive (சின்ன எழுத்து - பெரிய எழுத்து)

JavaScript-ல சின்ன எழுத்தும் பெரிய எழுத்தும் வேற வேற.
மனுஷன்.
Example: உங்க வீட்டுல ரெண்டு பேரு இருக்காங்கன்னு வச்சுப்போம். ஒருத்தன் பேரு "RAHUL" (எல்லாமே கேப்பிட்டல்), இன்னொருத்தன் பேரு "rahul" (எல்லாமே ஸ்மால்). நீங்க "rahul"ன்னு கூப்பிட்டா அந்த சின்ன ராகுல் தான் வருவான். பெரிய ராகுல் வரமாட்டான்.

let age = 25;
let Age = 30;

இங்க ageவேற, Ageவேற. கம்ப்யூட்டர் இத ரெண்டு தனி மனுஷனா பார்க்கும்.

Keywords - RESERVED words

திரைச்சுவடு — Thu, 22 Jan 2026 05:19:52 +0000

1. Keywords-ன்னா என்ன? (What is it?)

Keywords-ங்கிறது ஜாவாஸ்கிரிப்ட் லாங்குவேஜ்ல இருக்குற "Reserved Words". அதாவது, இந்த வார்த்தைகளை ஜாவாஸ்கிரிப்ட் தனக்காக மட்டும் ஒதுக்கி வச்சிருக்கு. நீங்க ஒரு வேரியபிள் (Variable) பேருக்கோ இல்ல ஃபங்க்ஷன் (Function) பேருக்கோ இந்த வார்த்தைகளை பயன்படுத்த முடியாது.

Example: ஒரு ஹோட்டலுக்கு போறீங்க. அங்க ஒரு டேபிள்ல "RESERVED"-ன்னு போர்டு வச்சிருக்காங்க. அந்த டேபிள்ல நீங்க போய் உட்கார முடியாது, ஏன்னா அது வேற ஒருத்தருக்காக ஒதுக்கப்பட்டது. அதே மாதிரி ஜாவாஸ்கிரிப்ட் இன்ஜினுக்கும் சில வார்த்தைகள் 'Reserved'.

2. Why and Where? (ஏன் மற்றும் எங்கே?)

Why: ஜாவாஸ்கிரிப்ட் இன்ஜினுக்கு (Browser) நாம என்ன செய்யச் சொல்றோம்னு புரிய வைக்க இந்த வார்த்தைகள் ஒரு Command (கட்டளை) மாதிரி பயன்படுது.
Where: நீங்க கோட் எழுதுறப்போ கம்ப்யூட்டருக்கு லாஜிக் சொல்லிக் குடுக்க ஒவ்வொரு வரியிலயும் இதைப் பயன்படுத்துவீங்க.

3. How and When? (எப்படி மற்றும் எப்போ?)

நீங்க ஒரு கீவேர்டை டைப் பண்ணும்போதே VS Code எடிட்டர்ல அது கலர் மாறி காட்டும் (உதாரணத்துக்கு constஅப்படின்னு டைப் பண்ணா அது நீல கலர்ல மாறும்).
All reserved words reference.,
எப்போ எதை யூஸ் பண்ணணும்?

ஒரு வேல்யூவை சேவ் பண்ண: const இல்ல let.
ஒரு கண்டிஷன் செக் பண்ண: if இல்ல else.
ஒரு வேலையைச் செய்ய: function.

4.முக்கியமான Keywords லிஸ்ட் (The VIP List)
ஜாவாஸ்கிரிப்ட்ல நிறைய இருக்கு, ஆனா நீங்க அடிக்கடி பயன்படுத்துறவை இவைதான்:

A. டேட்டா சேமிக்க (Variable Creation)

const: இது ஒரு "Constant". ஒருவாட்டி வேல்யூ குடுத்தா மாத்த முடியாது. (எ.கா: உங்களோட Brand Name - திரைச்சுவடு).
let: இது மாத்தக்கூடியது. (எ.கா: ஸ்கோர் அல்லது டைம்).
var: இது பழைய மெத்தட், இப்போ இதை அதிகமா பயன்படுத்துறது இல்லை.

B. கண்டிஷன் செக் பண்ண (Decision Making)

if, else, switch: "இது நடந்தா இத பண்ணு, இல்லன்னா அத பண்ணு"-ன்னு சொல்றதுக்கு.
break, continue: ஒரு லூப்பை (Loop) நிறுத்தவோ இல்ல அடுத்த ஸ்டெப்புக்கு போகவோ இது உதவும்.

C. வேலைகளைச் செய்ய (Action Words)

function: ஒரு வேலையை திரும்பத் திரும்பச் செய்ய ஒரு பிளாக் உருவாக்குறதுக்கு.
return: ஒரு வேலை முடிஞ்சதும் ரிசல்ட்ட வெளிய குடுக்க.

D. நவீன காலத்து Keywords (2026 Trends)

async, await: ஒரு டேட்டா வர்ற வரைக்கும் வெயிட் பண்ணி அப்புறம் வேலை செய்ய.
import, export: ஒரு ஃபைல்ல இருக்குற கோடை இன்னொரு ஃபைலுக்கு கொண்டு போக.

Syntax:
// தப்பான முறை (This will give Error): let const = "Hello";

// சரியான முறை: let myName = "Arun";

Note: thisஅப்படின்ற கீவேர்டை ரொம்ப கவனமா யூஸ் பண்ணனும். ஏன்னா அது ஒவ்வொரு இடத்துலயும் ஒவ்வொரு மாதிரி பிஹேவ் பண்ணும்.

Conclusion:

Keywords-ங்கிறது ஜாவாஸ்கிரிப்ட் உலகத்தோட Grammar மாதிரி. இத நீங்க சரியா கத்துக்கிட்டாலே, பாதி கோட நீங்க பிழை இல்லாம எழுதிடலாம்!

Event Bubbling - தண்ணீர் குமிழி

திரைச்சுவடு — Wed, 21 Jan 2026 11:42:38 +0000

Event Bubbling என்பது ஜாவாஸ்கிரிப்ட் ஈவென்ட்களின் ஒரு "இயற்கையான குணம்". இந்த தத்துவத்தை (Concept) புரிந்துகொள்வது மிக முக்கியம்.

1. What is Event Bubbling? (அப்படின்னா என்ன?):

ஒரு எலிமெண்ட்டில் (உதாரணமாக ஒரு பட்டன்) ஈவென்ட் நடக்கும்போது, அது அங்கேயே நின்றுவிடாமல், மெதுவாக ஒரு தண்ணீர் குமிழி (Bubble) மேலே வருவது போல, அதன் 'Parent' எலிமெண்ட்டுகளுக்கு வரிசையாகப் பரவும். இதுதான் Event Bubbling.

Example:
ஒரு அடுக்குமாடி குடியிருப்பு (Apartment). தரைத்தளத்தில் (Ground Floor) ஒரு சிறுவன் பட்டாசு வெடிக்கிறான். அந்தச் சத்தம் அப்படியே முதல் மாடி, இரண்டாம் மாடி என மேலே இருப்பவர்களுக்கும் கேட்கும் இல்லையா? அதுதான் பப்ளிங்!

2. Why it happens? (ஏன் இப்படி நடக்குது?):

பிரவுசர்கள் இப்படித்தான் வடிவமைக்கப்பட்டுள்ளன. ஒரு எலிமெண்ட் என்பது அதன் Parent-க்குள் ஒரு பகுதிதான். எனவே, ஒரு 'Child'-ல் நடக்கும் விஷயம் 'Parent'-க்கும் தெரிந்தால்தான் Event Delegation போன்ற ஸ்மார்ட் வேலைகளைச் செய்ய முடியும்.

3. How to find it? (எப்படி நடக்குதுன்னு கண்டுபிடிக்கிறது?):
இதை ஒரு சின்ன டெஸ்ட் மூலம் கண்டுபிடிக்கலாம். ஒரு DIV-க்குள் ஒரு BUTTON வைப்போம்.

<div onclick="alert('DIV Clicked!')"> <button onclick="alert('BUTTON Clicked!')">கிளிக் செய்</button> </div>
இப்போது நீங்கள் பட்டனை கிளிக் செய்தால்:

முதலில் "BUTTON Clicked!" அலர்ட் வரும்.
அது முடிந்ததும் தானாகவே "DIV Clicked!" அலர்ட் வரும். ஏன்? பட்டனில் தொடங்கிய அந்த 'கிளிக்' சிக்னல் அப்படியே மேலே பப்ளிங் ஆகி DIV-க்கும் போயிருச்சு!

4. How it Works? (இதன் படிநிலைகள்):

Stage 1: Capturing Phase (The Journey Down):
ஈவென்ட் மேலிருந்து (Window/Document) தொடங்கி, நீங்கள் கிளிக் செய்த எலிமெண்ட் (Target) வரை கீழே நோக்கி வரும்.

Example: டெலிவரி பாய் அப்பார்ட்மெண்ட் மெயின் கேட்டிற்கு வருகிறார். அங்கிருந்து லிஃப்ட் அல்லது படிக்கட்டு வழியாக 1-வது மாடி, 2-வது மாடி எனத் தாண்டி 5-வது மாடியை நோக்கி கீழே (உள்ளே) இறங்கி வருகிறார்.

Technical: Window -> Document -> Body -> Parent -> Child.
Note: Default-ஆக நாம் இதைக் கவனிக்க முடியாது, ஆனால் addEventListener(..., true) என்று கொடுத்தால் இந்த ஸ்டேஜைப் பிடிக்கலாம்.

Stage 2: Target Phase (The Delivery):
ஈவென்ட் நீங்கள் கிளிக் செய்த அந்த குறிப்பிட்ட எலிமெண்ட்டை வந்தடையும்.

Example: டெலிவரி பாய் 5-வது மாடியில் உள்ள சரியான கதவைத் தட்டி, அந்த நபரிடம் பார்சலைக் கொடுக்கிறார். இதுதான் முக்கியமான இடம் (Target).

Technical: நீங்கள் எந்த பட்டனை அல்லது DIV-ஐ கிளிக் செய்தீர்களோ, அங்கு அந்த ஈவென்ட் 'Trigger' ஆகும்.

Stage 3: Bubbling Phase (The Journey Back Up):
பார்சலைக் கொடுத்த பிறகு, அந்த சிக்னல் மீண்டும் கீழிருந்து மேல் நோக்கி (Parent-களுக்கு) பரவும்.

Example: பார்சலை வாங்கிய நபர் சந்தோஷத்தில் சத்தம் போடுகிறார். அந்தச் சத்தம் அவர் வீட்டுக்கு வெளியே கேட்டு, 4-வது மாடி, 3-வது மாடி என மெயின் கேட் வரை மேலே பரவுகிறது.

Technical: Child -> Parent -> Body -> Document -> Window.
Importance: 99% டெவலப்பர்கள் இந்த ஸ்டேஜைத்தான் Event Delegation செய்யப் பயன்படுத்துகிறார்கள்.

5. How to STOP it? (இதை எப்படி நிறுத்துவது?):

சில நேரம் உங்களுக்குப் பப்ளிங் தலைவலியாக இருக்கலாம். ஒரு பட்டனை அழுத்தினால் அந்த வேலை மட்டும் நடந்தால் போதும், Parent-க்கு சிக்னல் போகக் கூடாது என நினைத்தால் event.stopPropagation() பயன்படுத்தலாம்.

Real-time Example:
சிறுவன் பட்டாசு வெடிக்கும்போது, வீட்டின் ஜன்னல்களைச் சாத்திவிட்டால் (Stop Propagation), சத்தம் மேலே போகாது.
button.addEventListener("click", function(event) { alert("பட்டன் மட்டும் வேலை செய்யும்!"); event.stopPropagation(); // இதோட நிறுத்து, மேல போகாதே! });
6.Pros and Cons (நன்மைகள் மற்றும் தீமைகள்)

நன்மைகள் (Pros):

Event Delegation: ஒரு மெயின் லிசனர் வச்சே எல்லாத்தையும் கவனிக்கலாம்.
Simplicity: மெமரியை மிச்சப்படுத்தும் (RAM save ஆகும்).

தீமைகள் (Cons):

Accidental Triggers: தேவையில்லாத Parent வேலைகளும் நடக்கும்.
Logic Bugs: கவனிக்காவிட்டால் பெரிய ஆப்ஸில் குழப்பத்தை உண்டாக்கும்.

Note:

StopPropagation vs StopImmediatePropagation: stopPropagation சிக்னலை மேலே போகாமல் தடுக்கும். ஆனால் அதே பட்டனில் வேறு ஒரு லிசனர் இருந்தால் அது வேலை செய்யும். அதை நிறுத்த stopImmediatePropagationபயன்படுத்த வேண்டும்.
Debugging: பிரவுசர் கன்சோலில் event.bubbles என்று செக் செய்தால், அந்த ஈவென்ட் பப்ளிங் ஆகுமா இல்லையா (True/False) என்று தெரிந்துவிடும்.
Modern Apps: ரியாக்ட் 19-ல் கூட இந்த பப்ளிங் தத்துவத்தை வைத்துதான் அனைத்து ஈவென்ட்களும் கையாளப்படுகின்றன.

Conclusion:

ஈவென்ட் பப்ளிங் என்பது ஒரு நதி (River) மாதிரி. அதன் ஓட்டத்தைப் புரிந்துகொண்டால் (Event Delegation) நீங்கள் அதைப் பயன்படுத்திக்கொள்ளலாம், இல்லையென்றால் அணை (Stop Propagation) போட்டுத் தடுத்துவிடலாம்!

Event Delegation

திரைச்சுவடு — Wed, 21 Jan 2026 11:18:01 +0000

Event Delegation என்பது ஜாவாஸ்கிரிப்ட் மற்றும் பிரண்ட்-எண்ட் ஆர்க்கிடெக்சரில் (Architecture) ஒரு மிகச்சிறந்த "ஸ்மார்ட்" நுட்பமாகும். பெர்பார்மென்ஸை (Performance) மேம்படுத்த நீங்கள் பயன்படுத்த வேண்டிய முக்கியமான ஆயுதம் இது.

1. What is it? (Event Delegation-ன்னா என்ன?):

ஒவ்வொரு தனித்தனி எலிமெண்டிற்கும் (உதாரணமாக 100 பட்டன்கள்) தனித்தனியாக 'Listener' வைக்காமல், அவை அனைத்தையும் உள்ளடக்கிய ஒரு பெற்றோர் எலிமெண்டிற்கு (Parent Element) மட்டும் ஒரே ஒரு லிசனர் வைக்கும் முறைதான் Event Delegation.

Example: ஒரு வகுப்பறையில் 50 மாணவர்கள் உள்ளனர். ஒவ்வொரு மாணவருக்கும் ஒரு தனித்தனி தண்ணீர் பாட்டில் கொடுப்பதற்குப் பதிலாக, வகுப்பின் நடுவில் ஒரு பொதுவான வாட்டர் டேங்க் வைத்துவிடுவது போன்றது. யார் தாகம் எடுத்தாலும் அங்கே வந்து குடித்துக்கொள்ளலாம்.

2. Why & Where? (ஏன் மற்றும் எங்கே பயன்படுத்துவது?):

Why: 1000 எலிமெண்ட்டுகள் இருந்தால், 1000 லிசனர்ஸ் வைப்பது கம்ப்யூட்டரின் மெமரியை (RAM) காலி செய்யும். ஒரே ஒரு லிசனர் வைப்பதன் மூலம் மெமரியை மிச்சப்படுத்தலாம்.
Where:

Lists: <ul> அல்லது <table> போன்ற இடங்களில் பல வரிசைகள் இருந்தால்.
Dynamic Content: புதியதாகச் சேர்க்கப்படும் எலிமெண்ட்டுகள் (உதாரணமாக 'Add Member' கொடுக்கும்போது வரும் புதிய லிஸ்ட்).

3. How to use? (எப்படி?):

ஈவென்ட் பப்ளிங் (Event Bubbling) என்ற தத்துவத்தின் அடிப்படையில் இது வேலை செய்கிறது. அதாவது ஒரு 'Child' எலிமெண்ட்டை கிளிக் செய்தால், அந்த சிக்னல் அதன் 'Parent'-க்கு தானாகவே செல்லும்.

// Parent-ஐ மட்டும் பிடியுங்கள்
const list = document.querySelector("#myList");

// Parent-க்கு ஒரே ஒரு லிசனர்
list.addEventListener("click", function(event) { // எதை கிளிக் செய்தோம் என்று செக் செய்யுங்கள் if (event.target.tagName === 'LI') { console.log("திரைச்சுவடு: கிளிக் செய்யப்பட்ட லிஸ்ட் ஐட்டம்: " + event.target.innerText); } });

4. Pros and Cons (நன்மைகள் மற்றும் தீமைகள்)

நன்மைகள் (Pros):

High Performance: மெமரியை மிகக் குறைவாகப் பயன்படுத்தும்.
Dynamic Support: புதுசாக ஒரு எலிமெண்ட் ஆட் பண்ணினாலும் அது ஆட்டோமேட்டிக்கா வேலை செய்யும் (மறுபடி லிசனர் ஆட் பண்ண தேவையில்லை).
Cleaner Code: 100 வரிக் கோடை 5 வரியாகக் குறைக்கலாம்.

தீமைகள் (Cons):

Logic Complexity: கிளிக் செய்தது சரியான எலிமெண்ட்டா என்று if கண்டிஷன் போட்டு செக் செய்ய வேண்டும்.
Event Bubbling Dependancy: சில ஈவென்ட்கள் (உதாரணம்: focus, blur) பப்ளிங் ஆகாது, அங்கே இது வேலை செய்யாது.

5. என்னென்ன ஈவென்ட்கள் இதில் வரும்? (Events suitable for Delegation):
பப்ளிங் (Bubbling) ஆகும் அனைத்து ஈவென்ட்களையும் இதில் பயன்படுத்தலாம்:

click
mouseover / mouseout
keydown / keyup
mousedown / mouseup

Note:

Infinite Scroll (இன்ஸ்டாகிராம் மாதிரி) இல்லன்னா பெரிய Data Tables பண்ணும்போது இந்த Event Delegation இல்லாம பெர்பார்மென்ஸ் கொண்டு வர முடியாது.
React அல்லது Angular பயன்படுத்தும்போது, அந்த பிரேம்வொர்க்குகள் உள்ளுக்குள்ளேயே (Internally) இந்த Event Delegation முறையைப் பயன்படுத்திதான் ஈவென்ட்களைக் கையாளுகின்றன. அதனால்தான் அவை அவ்வளவு வேகமாக இருக்கின்றன.