History

softchris 04881ec984 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	3 months ago

README.md

Proyekto ng Terrarium Bahagi 3: Manipulasyon ng DOM at Isang Closure

Sketchnote ni Tomomi Imura

Pre-Lecture Quiz

Pre-lecture quiz

Panimula

Ang pag-manipula sa DOM, o "Document Object Model", ay isang mahalagang aspeto ng web development. Ayon sa MDN, "Ang Document Object Model (DOM) ay ang representasyon ng data ng mga bagay na bumubuo sa istruktura at nilalaman ng isang dokumento sa web." Ang mga hamon sa paligid ng manipulasyon ng DOM sa web ay madalas na nagiging dahilan ng paggamit ng mga JavaScript framework sa halip na vanilla JavaScript upang pamahalaan ang DOM, ngunit magagawa natin ito nang mag-isa!

Bukod dito, ipakikilala ng araling ito ang ideya ng isang JavaScript closure, na maaari mong isipin bilang isang function na nakapaloob sa isa pang function upang ang inner function ay may access sa scope ng outer function.

Ang JavaScript closures ay isang malawak at komplikadong paksa. Ang araling ito ay tumutukoy sa pinaka-pangunahing ideya na sa code ng terrarium, makakakita ka ng isang closure: isang inner function at isang outer function na itinayo sa paraang nagbibigay-daan sa inner function na ma-access ang scope ng outer function. Para sa mas detalyadong impormasyon kung paano ito gumagana, bisitahin ang malawak na dokumentasyon.

Gagamit tayo ng closure upang manipulahin ang DOM.

Isipin ang DOM bilang isang puno, na kumakatawan sa lahat ng paraan kung paano maaaring manipulahin ang isang dokumento ng web page. Iba't ibang mga API (Application Program Interfaces) ang isinulat upang ang mga programmer, gamit ang kanilang napiling programming language, ay ma-access ang DOM at ma-edit, mabago, maayos, at pamahalaan ito.

Isang representasyon ng DOM at ang HTML markup na tumutukoy dito. Mula kay Olfa Nasraoui

Sa araling ito, tatapusin natin ang ating interactive na proyekto ng terrarium sa pamamagitan ng paggawa ng JavaScript na magpapahintulot sa user na manipulahin ang mga halaman sa pahina.

Paunang Kailangan

Dapat ay tapos mo na ang HTML at CSS para sa iyong terrarium. Sa pagtatapos ng araling ito, magagawa mong ilipat ang mga halaman papasok at palabas ng terrarium sa pamamagitan ng pag-drag sa mga ito.

Gawain

Sa iyong terrarium folder, gumawa ng bagong file na tinatawag na script.js. I-import ang file na iyon sa seksyong <head>:

	<script src="./script.js" defer></script>

Tandaan: gamitin ang defer kapag nag-i-import ng external na JavaScript file sa html file upang payagan ang JavaScript na mag-execute lamang pagkatapos ma-load nang buo ang HTML file. Maaari mo ring gamitin ang async attribute, na nagpapahintulot sa script na mag-execute habang ang HTML file ay nagpa-parse, ngunit sa ating kaso, mahalagang ang mga elemento ng HTML ay ganap na magamit para sa pag-drag bago natin payagan ang drag script na ma-execute.

Ang mga Elemento ng DOM

Ang unang bagay na kailangan mong gawin ay gumawa ng mga reference sa mga elementong nais mong manipulahin sa DOM. Sa ating kaso, ito ang 14 na halaman na kasalukuyang naghihintay sa mga side bars.

Gawain

dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));

Ano ang nangyayari dito? Ikaw ay tumutukoy sa dokumento at naghahanap sa DOM nito upang mahanap ang isang elemento na may partikular na Id. Tandaan sa unang aralin sa HTML na binigyan mo ng mga indibidwal na Id ang bawat imahe ng halaman (id="plant1")? Ngayon ay magagamit mo na ang pagsisikap na iyon. Pagkatapos matukoy ang bawat elemento, ipapasa mo ang item na iyon sa isang function na tinatawag na dragElement na gagawin mo sa ilang sandali. Sa gayon, ang elemento sa HTML ay magiging drag-enabled, o malapit nang maging ganap.

✅ Bakit natin tinutukoy ang mga elemento sa pamamagitan ng Id? Bakit hindi sa pamamagitan ng kanilang CSS class? Maaaring balikan ang nakaraang aralin sa CSS upang masagot ang tanong na ito.

Ang Closure

Ngayon ay handa ka nang gumawa ng dragElement closure, na isang outer function na naglalaman ng isang inner function o mga function (sa ating kaso, magkakaroon tayo ng tatlo).

Ang mga closure ay kapaki-pakinabang kapag ang isa o higit pang mga function ay kailangang ma-access ang scope ng isang outer function. Narito ang isang halimbawa:

function displayCandy(){
	let candy = ['jellybeans'];
	function addCandy(candyType) {
		candy.push(candyType)
	}
	addCandy('gumdrops');
}
displayCandy();
console.log(candy)

Sa halimbawang ito, ang displayCandy function ay nakapalibot sa isang function na nagdadagdag ng bagong uri ng kendi sa isang array na umiiral na sa function. Kung patatakbuhin mo ang code na ito, ang candy array ay magiging undefined, dahil ito ay isang lokal na variable (lokal sa closure).

✅ Paano mo magagawang ma-access ang candy array? Subukang ilipat ito sa labas ng closure. Sa ganitong paraan, ang array ay magiging global, sa halip na manatiling available lamang sa lokal na scope ng closure.

Gawain

Sa ilalim ng mga deklarasyon ng elemento sa script.js, gumawa ng isang function:

function dragElement(terrariumElement) {
	//set 4 positions for positioning on the screen
	let pos1 = 0,
		pos2 = 0,
		pos3 = 0,
		pos4 = 0;
	terrariumElement.onpointerdown = pointerDrag;
}

Ang dragElement ay nakakakuha ng terrariumElement object nito mula sa mga deklarasyon sa itaas ng script. Pagkatapos, magse-set ka ng ilang lokal na posisyon sa 0 para sa object na ipinasa sa function. Ito ang mga lokal na variable na mamanipulahin para sa bawat elemento habang nagdadagdag ka ng drag at drop functionality sa loob ng closure sa bawat elemento. Ang terrarium ay mapupuno ng mga dragged na elemento, kaya't kailangang subaybayan ng application kung saan sila inilalagay.

Bukod dito, ang terrariumElement na ipinasa sa function na ito ay itinalaga ng isang pointerdown event, na bahagi ng web APIs na idinisenyo upang makatulong sa pamamahala ng DOM. Ang onpointerdown ay nagfi-fire kapag pinindot ang isang button, o sa ating kaso, kapag hinawakan ang isang draggable na elemento. Ang event handler na ito ay gumagana sa parehong web at mobile browsers, na may ilang mga eksepsyon.

✅ Ang event handler onclick ay may mas malawak na suporta sa iba't ibang browser; bakit hindi mo ito gagamitin dito? Isipin ang eksaktong uri ng screen interaction na sinusubukan mong likhain dito.

Ang Pointerdrag Function

Ang terrariumElement ay handa nang i-drag; kapag ang onpointerdown event ay na-fire, ang function na pointerDrag ay na-invoke. Idagdag ang function na iyon sa ilalim ng linyang ito: terrariumElement.onpointerdown = pointerDrag;:

Gawain

function pointerDrag(e) {
	e.preventDefault();
	console.log(e);
	pos3 = e.clientX;
	pos4 = e.clientY;
}

Maraming nangyayari. Una, pinipigilan mo ang default na mga event na karaniwang nangyayari sa pointerdown mula sa paglitaw sa pamamagitan ng paggamit ng e.preventDefault();. Sa ganitong paraan, mas may kontrol ka sa pag-uugali ng interface.

Balikan ang linyang ito kapag ganap mong nabuo ang script file at subukang tanggalin ang e.preventDefault() - ano ang nangyayari?

Pangalawa, buksan ang index.html sa isang browser window, at i-inspect ang interface. Kapag nag-click ka sa isang halaman, makikita mo kung paano na-capture ang 'e' event. Suriin ang event upang makita kung gaano karaming impormasyon ang nakukuha ng isang pointer down event!

Susunod, pansinin kung paano na-set ang mga lokal na variable na pos3 at pos4 sa e.clientX. Makikita mo ang mga e values sa inspection pane. Ang mga value na ito ay nag-capture ng x at y coordinates ng halaman sa sandaling i-click o hawakan mo ito. Kailangan mo ng mas detalyadong kontrol sa pag-uugali ng mga halaman habang ini-click at ini-drag mo ang mga ito, kaya't sinusubaybayan mo ang kanilang mga coordinates.

✅ Nagiging mas malinaw ba kung bakit ang buong app na ito ay binuo gamit ang isang malaking closure? Kung hindi ito ginawa, paano mo mapapanatili ang scope para sa bawat isa sa 14 na draggable na halaman?

Kumpletuhin ang initial function sa pamamagitan ng pagdaragdag ng dalawa pang pointer event manipulations sa ilalim ng pos4 = e.clientY:

document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;

Ngayon ay ipinapahiwatig mo na nais mong ang halaman ay ma-drag kasabay ng pointer habang ini-move ito, at para sa dragging gesture na huminto kapag na-deselect ang halaman. Ang onpointermove at onpointerup ay bahagi ng parehong API tulad ng onpointerdown. Ang interface ay mag-throw ng errors ngayon dahil hindi mo pa na-define ang elementDrag at ang stopElementDrag functions, kaya't buuin ang mga iyon sa susunod.

Ang elementDrag at stopElementDrag Functions

Tatapusin mo ang iyong closure sa pamamagitan ng pagdaragdag ng dalawa pang internal functions na hahawak sa kung ano ang mangyayari kapag ini-drag mo ang isang halaman at huminto sa pag-drag nito. Ang nais mong pag-uugali ay maaari mong i-drag ang anumang halaman anumang oras at ilagay ito kahit saan sa screen. Ang interface na ito ay medyo un-opinionated (halimbawa, walang drop zone) upang payagan kang i-design ang iyong terrarium ayon sa gusto mo sa pamamagitan ng pagdaragdag, pag-aalis, at pag-reposition ng mga halaman.

Gawain

Idagdag ang elementDrag function sa ilalim ng closing curly bracket ng pointerDrag:

function elementDrag(e) {
	pos1 = pos3 - e.clientX;
	pos2 = pos4 - e.clientY;
	pos3 = e.clientX;
	pos4 = e.clientY;
	console.log(pos1, pos2, pos3, pos4);
	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
}

Sa function na ito, marami kang ina-edit sa mga initial positions 1-4 na na-set mo bilang mga lokal na variable sa outer function. Ano ang nangyayari dito?

Habang ini-drag, nire-reassign mo ang pos1 sa pamamagitan ng paggawa nitong katumbas ng pos3 (na na-set mo kanina bilang e.clientX) minus ang kasalukuyang e.clientX value. Ginagawa mo rin ang parehong operasyon sa pos2. Pagkatapos, nire-reset mo ang pos3 at pos4 sa bagong X at Y coordinates ng elemento. Makikita mo ang mga pagbabagong ito sa console habang ini-drag. Pagkatapos, mamanipulahin mo ang css style ng halaman upang i-set ang bagong posisyon nito batay sa mga bagong posisyon ng pos1 at pos2, kinakalkula ang top at left X at Y coordinates ng halaman batay sa paghahambing ng offset nito sa mga bagong posisyon.

Ang offsetTop at offsetLeft ay mga property ng CSS na nagse-set ng posisyon ng isang elemento batay sa posisyon ng parent nito; ang parent nito ay maaaring anumang elemento na hindi naka-position bilang static.

Ang lahat ng muling pagkalkula ng posisyon na ito ay nagbibigay-daan sa iyo upang ma-fine-tune ang pag-uugali ng terrarium at ng mga halaman nito.

Gawain

Ang huling gawain upang makumpleto ang interface ay ang pagdaragdag ng stopElementDrag function pagkatapos ng closing curly bracket ng elementDrag:

function stopElementDrag() {
	document.onpointerup = null;
	document.onpointermove = null;
}

Ang maliit na function na ito ay nire-reset ang onpointerup at onpointermove events upang maaari mong i-restart ang progreso ng iyong halaman sa pamamagitan ng pagsisimula ng pag-drag nito muli, o simulan ang pag-drag ng bagong halaman.

✅ Ano ang mangyayari kung hindi mo i-set ang mga events na ito sa null?

Ngayon ay natapos mo na ang iyong proyekto!

🥇Binabati kita! Natapos mo na ang iyong magandang terrarium.

Hamon ng GitHub Copilot Agent 🚀

Gamitin ang Agent mode upang tapusin ang sumusunod na hamon:

Deskripsyon: Pagandahin ang proyekto ng terrarium sa pamamagitan ng pagdaragdag ng reset functionality na magbabalik sa lahat ng halaman sa kanilang orihinal na posisyon na may smooth animations.

Prompt: Gumawa ng reset button na, kapag na-click, ay mag-a-animate sa lahat ng halaman pabalik sa kanilang orihinal na posisyon sa sidebar gamit ang CSS transitions. Ang function ay dapat mag-store ng orihinal na posisyon kapag nag-load ang pahina at mag-transition nang maayos ang mga halaman pabalik sa mga posisyon na iyon sa loob ng 1 segundo kapag na-press ang reset button.

🚀Hamon

Magdagdag ng bagong event handler sa iyong closure upang gumawa ng karagdagang aksyon sa mga halaman; halimbawa, i-double click ang isang halaman upang ilagay ito sa harapan. Maging malikhain!

Post-Lecture Quiz

Post-lecture quiz

Review at Pag-aaral sa Sarili

Bagama't ang pag-drag ng mga elemento sa screen ay tila simple, maraming paraan upang gawin ito at maraming mga pitfalls, depende sa epekto na nais mong makamit. Sa katunayan, mayroong isang buong drag and drop API na maaari mong subukan. Hindi natin ito ginamit sa module na ito dahil ang epekto na nais natin ay medyo naiiba, ngunit subukan ang API na ito sa sarili mong proyekto at tingnan kung ano ang maaari mong makamit.

Maghanap ng higit pang impormasyon tungkol sa pointer events sa W3C docs at sa MDN web docs.

Laging i-check ang kakayahan ng browser gamit ang CanIUse.com.

Takdang-Aralin

Magtrabaho pa sa DOM

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagamat sinisikap naming maging tumpak, pakatandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.