The DOM API

HTML கூறுகளை உள்ளமைக்க (nested) முடியும், இது ஒரு வலைப்பக்கத்தை கூறுகளின் "மரமாக (tree)" கருத அனுமதிக்கிறது:

• ஒரு மரம் (tree) என்பது ஒரு படிநிலை தரவுக் கட்டமைப்பாகும், இதில் ஒவ்வொரு உறுப்பும் (node என்று அழைக்கப்படுகிறது) குழந்தை (child) கூறுகளுக்கான குறிப்புகளைக் கொண்டுள்ளது. மர உருவகத்தைப் (arboreal metaphor) பின்பற்றி, மரத்தின் "தொடக்கம்" root node என்றும், கணுக்களின் படிநிலைத் தொடர்கள் கிளைகள் (branches) என்றும், குழந்தைகளைக் கொண்டிருக்காத ஒரு கணு இலை (leaf) என்றும் அழைக்கப்படுகிறது.

ஒரு வலைப்பக்கத்தின் உள்ளடக்கத்தை HTML கூறுகளின் மரமாகக் கருதுவது அந்தத் தகவலின் கட்டமைப்பை மாதிரியாக்க (model) (பிரதிநிதித்துவப்படுத்த) ஒரு வழியாகும். இணைய ஆவணத்தின் இந்த குறிப்பிட்ட மாதிரி (பொருள் (object) கணுக்களின் மரமாக) சுருக்கமாக Document Object Model, அல்லது DOM என்று அழைக்கப்படுகிறது. பல வழிகளில் DOM என்பது HTML ஆகும் (ஆனால் உலாவியில் காட்டப்படும் HTML, நீங்கள் எழுதிய .html மூலக் குறியீடு அல்ல)! எனவே வலைப்பக்கத்தின் உள்ளடக்கத்தை "DOM" என்றும், HTML உறுப்பை "DOM உறுப்பு (DOM element)" என்றும் குறிப்பிடலாம்.

• "வெற்று உரை" உள்ளடக்கம் கூட (எ.கா., <p> குறிச்சொல்லுக்குள் இருப்பது) DOM மரத்தில் கணுக்களாகக் கருதப்படுகின்றன என்பதை நினைவில் கொள்க - அவை ("உறுப்பு கணுக்களுக்கு (element nodes)" பதிலாக) "உரை உள்ளடக்க (text content)" கணுக்கள்.

மேலும், DOM ஆனது ஒரு பயன்பாட்டு நிரலாக்க இடைமுகத்தையும் (Application Programming Interface - API) வழங்குகிறது, இது கணினி பயன்பாடுகளை நிரல்ரீதியாக (எ.கா., ஜாவாஸ்கிரிப்ட் குறியீடு மூலம்) அதனுடன் தொடர்பு கொள்ள அனுமதிக்கிறது: கூறுகளின் மரத்தை அணுகுதல் மற்றும் கையாளுதல். API என்பது பெரும்பாலும் செயல்பாடுகள் (functions) மற்றும் மாறிகள் (variables) ஆகியவற்றின் தொகுப்பாகும், இது ஒரு நிரலுக்கு வழிமுறைகளை வழங்க பயன்படும். DOM API உம் வேறுபட்டதல்ல: இது நீங்கள் அழைக்கக்கூடிய செயல்பாடுகள் மற்றும் (பொதுவாக பொருள் பண்புகள்) நீங்கள் காட்டப்படும் இணைய உள்ளடக்கத்தை மாற்றியமைக்க சரிசெய்யக்கூடிய மாறிகளின் குழுவாகும். ஒரு பக்கத்தை ஊடாடக்கூடியதாக மாற்றுவதற்காக இந்த செயல்பாடுகளை அழைப்பதற்கான குறியீட்டை நீங்கள் எழுதுகிறீர்கள்.

Global மாறிகள் (Global Variables)

Global மாறிகளின் தொகுப்பைப் பயன்படுத்துவதன் மூலம் ஜாவாஸ்கிரிப்டில் API ஐ நிரல்ரீதியாக அணுகலாம். Global மாறிகள் என்பவை "உலகளாவிய (globally)" ஸ்கோப் செய்யப்பட்ட மாறிகள்: அவை நிரலில் எங்கும் கிடைக்கின்றன (ஒரு குறிப்பிட்ட செயல்பாட்டிற்குள் மட்டும் அல்ல).

ஒரு முக்கியமான நிரலாக்க பாணி விதி global மாறிகளின் பயன்பாட்டைக் **குறைப்பது**. நீங்களே அதிக புதிய global களை உருவாக்குவதைத் தவிர்க்க முயற்சிக்கவும்!

ஜாவாஸ்கிரிப்டில் உள்ள Global மாறிகள் எப்போதும் அவற்றின் மதிப்புகளாக முறைகளைக் கொண்ட பொருள்கள் (Objects) ஆகும். எடுத்துக்காட்டாக, ஜாவாஸ்கிரிப்ட் மொழியே Math பொருளை வழங்குகிறது, இதில் பல செயல்பாட்டு பண்புகள் அடங்கும் (எ.கா., sqrt(), floor() போன்றவை).

console.log(typeof Math); //=> 'object'
console.log(typeof Math.sqrt); //=> 'function'
console.log(Math.sqrt(25)); //=> 5

• உண்மையில், console பொருள் ஜாவாஸ்கிரிப்ட் இயக்கநேரத்தால் (runtime) (உலாவியிலோ அல்லது Node.js இற்குள்ளோ) வழங்கப்படும் மற்றொரு global மாறியாகும்!

இணைய உலாவியும் நீங்கள் பயன்படுத்தக்கூடிய பல global மாறிகளை வழங்குகிறது. எடுத்துக்காட்டாக window என்பது உலாவியையே குறிக்கும் ஒரு global பொருளாகும். உலாவியைப் பற்றிய தகவல்களைப் பெற இந்தப் பொருளைப் பயன்படுத்தலாம்:

/* எடுத்துக்காட்டு பண்புகள் */
let width = window.innerWidth; //viewport அகலம்
let height = window.innerHeight; //viewport உயரம்
var url = window.location.href; //இந்தப் பக்கத்திற்கான url

/* எடுத்துக்காட்டு செயல்பாடுகள் */
window.alert("Boo!"); //popup எச்சரிக்கையைக் காட்டு. இதைப் பயன்படுத்த வேண்டாம்.
window.scrollTo(0, 1000); //ஒரு நிலைக்கு உருட்டவும்
window.setTimeout(callback, 1000); //ஒரு தாமதத்திற்குப் பிறகு callback ஐ இயக்கவும்
window.setInterval(callback, 1000); //இடைவெளிக்குப் பிறகு மீண்டும் மீண்டும் callback ஐ இயக்கவும்

முழுமைக்காக இந்த எடுத்துக்காட்டுகள் சேர்க்கப்பட்டாலும், பெரும்பாலான `window` செயல்பாடுகள் அரிதாகவே பயன்படுத்தப்படுகின்றன, மேலும் அவற்றைத் தவிர்க்க வேண்டும். `window.alert()` செயல்பாட்டைக் கொண்ட பாப்அப்கள் நேர்த்தியற்றவை, பயனரின் செயல்களுக்கு இடையூறு விளைவிப்பவை மற்றும் மோசமான பயனர் அனுபவத்தை உருவாக்குகின்றன - அதற்குப் பதிலாக நீங்கள் in-window எச்சரிக்கை விருப்பங்களைப் பயன்படுத்த வேண்டும் (அதாவது `class="alert-class" ` ஐக் காண்பிப்பது போன்றவை). `scrollTo()` போன்ற உலாவி கட்டுப்பாட்டு செயல்பாடுகள் தரமற்றவை மற்றும் அமைப்புகள் மற்றும் இயங்குதளங்களில் கடுமையாக மாறுபடும். `window` செயல்பாடுகளைப் பயன்படுத்தும் போது எச்சரிக்கையுடன் தொடரவும்!