Javascript

What is JavaScript?

JavaScript-na enna? Simple-ah சொல்லணும்னா, ஒரு Website-க்கு "உயிர்" குடுக்கறதுதான் இந்த JavaScript.

Oru website create பண்ணும்போது மூணு முக்கியமான விஷயங்கள் இருக்கு:

1. HTML (The Skeleton): இது ஒரு மனுஷனோட எலும்புக்கூடு (bones) மாதிரி. Website-ல இருக்குற content-ஐ (Text, Images) இதுதான் முடிவு பண்ணும்.
2. CSS (The Skin & Dress): இது அந்த மனுஷன் எப்படி அழகா தெரியணும்னு முடிவு பண்ற skin and dress மாதிரி. Color, style எல்லாம் இதுதான்.
3. JavaScript (The Brain): இதுதான் அந்த மனுஷனோட மூளை (Brain). அந்த மனுஷன் எப்படி நடக்கணும், எப்படி பேசணும்னு சொல்லித்தர்றது இந்த JavaScript தான்.

Why JavaScript?

Imagine பண்ணுங்க, ஒரு Website-ல ஒரு button இருக்கு. அந்த button-ஐ click பண்ணா ஒரு Light எரியணும் இல்லனா ஒரு message வரணும்.

• HTML அந்த button-ஐ உருவாக்கும்.
• CSS அந்த button-க்கு அழகான கலர் குடுக்கும்.
• JavaScript தான் நீங்க click பண்ணும்போது "என்ன நடக்கணும்" (Action) அப்படின்னு அந்த Website-க்கு சொல்லும்.

Where JavaScript?

JavaScript எல்லா இடத்துலயும் இருக்கு!

• நீங்க யூஸ் பண்ற Google Chrome-ல இருக்கு.
• உங்க phone-ல இருக்குற Apps-ல இருக்கு.
• In fact, Facebook, Instagram, YouTube-ன்னு நீங்க பாக்குற எல்லா பெரிய website-ம் JavaScript இல்லாம இயங்காது.

How it works?

நம்ம பேசுற English-ஐ கம்ப்யூட்டருக்கு புரியாது. கம்ப்யூட்டருக்கு தெரிஞ்சதெல்லாம் 0 and 1 மட்டும்தான்.
நீங்க JavaScript-ல code எழுதுவீங்க.
Browser-க்குள்ள இருக்குற ஒரு "Interpreter" (ஒரு மொழிபெயர்ப்பாளர் மாதிரி) உங்க code-ஐ உடனே கம்ப்யூட்டருக்கு புரியுற மாதிரி மாத்திடும்.
இதனாலதான் நீங்க ஒரு button-ஐ click பண்ண உடனே, website டக்குனு response பண்ணுது.

Example:

HTML:

<article class="human">
  <div class="face"><h1>😃</h1></div>

  <button id="hand-btn">Wave Hand</button>

  <!-- This is where the brain's message will appear -->
  <p id="brain-msg">Waiting for signal...</p>
</article>

JavaScript:

// 1. Finding the body parts (Selecting Elements)
const handButton = document.getElementById('hand-btn');
const brainMessage = document.getElementById('brain-msg');

// 2. Setting up the "Brain Signal" (Event Listener)
handButton.addEventListener('click', function() {

    // 3. The Action (What happens?)
    brainMessage.innerText = "Action: Hello! I am waving! 👋";
    brainMessage.style.color = "green";

    // Changing the look using JS
    handButton.style.backgroundColor = "yellow";

    alert("Brain Signal Sent: Hand is moving!");
});

Explanation:

"இப்போ பாருங்க! நம்ம HTML எலும்புக்கூடுக்கு CSS மேக்கப் போட்டோம். ஆனா அந்த மனுஷன் இன்னும் சும்மாதான் நிக்கிறான். அவனுக்கு உயிர் (Action) குடுக்கிறதுதான் இந்த JavaScript."

• document.getElementById(உறுப்பை அடையாளம் காணுதல்): நம்ம உடம்புல இருக்குற கையை நம்ம மூளை எப்படி அடையாளம் வெச்சிருக்கோ, அதே மாதிரி JS அந்த Button-ஐ 'id' மூலமா தேடி பிடிக்குது.
• addEventListener (சிக்னலுக்காக காத்திருத்தல்): யாராவது அந்த கையை தொட்டா (Click பண்ணா) என்ன நடக்கணும்னு மூளை வெயிட் பண்ணுது.
• The Action (வேலை): பட்டனை கிளிக் பண்ண உடனே, மூளை ஒரு சிக்னல் அனுப்புது. உடனே "Waiting..." அப்படின்னு இருந்த மெசேஜ் "Hello!"-னு மாறுது.

Output:

Conclusion: The Triple Threat

ஒரு Website உருவாக்குறது ஒரு முழு மனுஷனை உருவாக்குற மாதிரிதான். இப்போ உங்களுக்கு புரிஞ்சிருக்கும்:

HTML (The Skeleton): இதுதான் அடிப்படை கட்டமைப்பு. எலும்புக்கூடு இல்லாம ஒரு உருவம் கிடையாது.
CSS (The Skin & Dress): இதுதான் அழகு. மேக்கப் மற்றும் உடை இல்லாம அந்த உருவம் பாக்குறதுக்கு நல்லா இருக்காது.
JavaScript (The Brain): இதுதான் உயிர். மூளை இல்லாம அந்த உருவத்தால எந்த வேலையும் செய்ய முடியாது.