23 KiB

Raw Permalink Blame History

ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਅਤੇ ਕਲੋਜ਼ਰ

ਸਕੈਚਨੋਟ Tomomi Imura ਦੁਆਰਾ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਜਾਣ ਪਛਾਣ

DOM, ਜਾਂ "ਡਾਕੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ" ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨਾ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪਹلو ਹੈ। MDN ਦੇ ਅਨੁਸਾਰ, "ਡਾਕੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ (DOM) ਵੈੱਬ 'ਤੇ ਡਾਕੂਮੈਂਟ ਦੀ ਬਣਤਰ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਆਬਜੈਕਟਾਂ ਦੀ ਡਾਟਾ ਪ੍ਰਸਤੁਤੀ ਹੈ।" ਵੈੱਬ 'ਤੇ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਦੇ ਚੁਣੌਤੀਪੂਰਨ ਪਹਲੂ ਅਕਸਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਰੇਮਵਰਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਕਾਰਨ ਬਣੇ ਹਨ, ਪਰ ਅਸੀਂ ਇਸ ਨੂੰ ਆਪਣੇ ਆਪ ਸੰਭਾਲਾਂਗੇ!

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਸ ਪਾਠ ਵਿੱਚ JavaScript ਕਲੋਜ਼ਰ ਦਾ ਵਿਚਾਰ ਪੇਸ਼ ਕੀਤਾ ਜਾਵੇਗਾ, ਜਿਸਨੂੰ ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵਜੋਂ ਸੋਚ ਸਕਦੇ ਹੋ ਜੋ ਦੂਜੇ ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਘੇਰਿਆ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ।

ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ ਇੱਕ ਵਿਆਪਕ ਅਤੇ ਜਟਿਲ ਵਿਸ਼ਾ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ ਸਿਰਫ਼ ਬੁਨਿਆਦੀ ਵਿਚਾਰ ਨੂੰ ਛੂਹਿਆ ਗਿਆ ਹੈ ਕਿ ਇਸ ਟੈਰੀਰੀਅਮ ਦੇ ਕੋਡ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਕਲੋਜ਼ਰ ਪਾਓਗੇ: ਇੱਕ ਅੰਦਰਲਾ ਫੰਕਸ਼ਨ ਅਤੇ ਇੱਕ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਜੋ ਇਸ ਤਰੀਕੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਕਿ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ। ਇਸ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਕਿਰਪਾ ਕਰਕੇ ਵਿਆਪਕ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ।

ਅਸੀਂ DOM ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਲਈ ਇੱਕ ਕਲੋਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।

DOM ਨੂੰ ਇੱਕ ਦਰੱਖਤ ਵਜੋਂ ਸੋਚੋ, ਜੋ ਵੈੱਬ ਪੇਜ ਡਾਕੂਮੈਂਟ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੇ ਸਾਰੇ ਤਰੀਕੇ ਦਰਸਾਉਂਦਾ ਹੈ। ਵੱਖ-ਵੱਖ APIs (ਐਪਲੀਕੇਸ਼ਨ ਪ੍ਰੋਗਰਾਮ ਇੰਟਰਫੇਸ) ਲਿਖੀਆਂ ਗਈਆਂ ਹਨ ਤਾਂ ਜੋ ਪ੍ਰੋਗਰਾਮਰ, ਆਪਣੇ ਪਸੰਦੀਦਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, DOM ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਣ ਅਤੇ ਇਸ ਨੂੰ ਸੋਧ, ਬਦਲ, ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਅਤੇ ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਣ।

DOM ਅਤੇ ਇਸਨੂੰ ਹਵਾਲਾ ਦੇਣ ਵਾਲੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਪ੍ਰਸਤੁਤੀ। Olfa Nasraoui ਤੋਂ

ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣੇ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਪੂਰਾ ਕਰਾਂਗੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਕੇ ਜੋ ਵਰਤੋਂਕਾਰ ਨੂੰ ਪੇਜ 'ਤੇ ਪੌਦਿਆਂ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਵੇਗਾ।

ਪੂਰਵ ਸ਼ਰਤ

ਤੁਹਾਡੇ ਕੋਲ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਲਈ HTML ਅਤੇ CSS ਬਣੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ ਤੁਸੀਂ ਪੌਦਿਆਂ ਨੂੰ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਲਿਜਾਣ ਅਤੇ ਬਾਹਰ ਕੱਢਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ।

ਕੰਮ

ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਫੋਲਡਰ ਵਿੱਚ, ਇੱਕ ਨਵਾਂ ਫਾਇਲ ਬਣਾਓ ਜਿਸਨੂੰ script.js ਕਹਿੰਦੇ ਹਨ। ਇਸ ਫਾਇਲ ਨੂੰ <head> ਸੈਕਸ਼ਨ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰੋ:

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

ਨੋਟ: ਜਦੋਂ HTML ਫਾਇਲ ਵਿੱਚ ਬਾਹਰੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਇਲ ਨੂੰ ਇੰਪੋਰਟ ਕਰਦੇ ਹੋ ਤਾਂ defer ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਜਾਵਾਸਕ੍ਰਿਪਟ HTML ਫਾਇਲ ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਹੀ ਚਲਾਏ। ਤੁਸੀਂ async ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ ਸਕ੍ਰਿਪਟ ਨੂੰ HTML ਫਾਇਲ ਦੇ ਪਾਰਸ ਹੋਣ ਦੌਰਾਨ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਪਰ ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇਹ ਜਰੂਰੀ ਹੈ ਕਿ ਡ੍ਰੈਗ ਕਰਨ ਵਾਲੇ HTML ਐਲਿਮੈਂਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਉਪਲਬਧ ਹੋਣ।

DOM ਐਲਿਮੈਂਟ

ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ DOM ਵਿੱਚ ਉਹ ਐਲਿਮੈਂਟਾਂ ਨੂੰ ਰਿਫਰੈਂਸ ਕਰਨਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਮੈਨਿਪੂਲੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇਹ 14 ਪੌਦੇ ਹਨ ਜੋ ਇਸ ਸਮੇਂ ਸਾਈਡ ਬਾਰ ਵਿੱਚ ਉਡੀਕ ਕਰ ਰਹੇ ਹਨ।

ਕੰਮ

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'));

ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਤੁਸੀਂ ਡਾਕੂਮੈਂਟ ਨੂੰ ਰਿਫਰੈਂਸ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਇਸਦੇ DOM ਵਿੱਚ ਇੱਕ ਖਾਸ Id ਵਾਲੇ ਐਲਿਮੈਂਟ ਨੂੰ ਲੱਭ ਰਹੇ ਹੋ। ਯਾਦ ਕਰੋ ਕਿ HTML ਦੇ ਪਹਿਲੇ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਹਰ ਪੌਦੇ ਦੀ ਚਿੱਤਰ ਨੂੰ ਵਿਅਕਤੀਗਤ Id ਦਿੱਤੀ ਸੀ (id="plant1")? ਹੁਣ ਤੁਸੀਂ ਉਸ ਯਤਨ ਦੀ ਵਰਤੋਂ ਕਰੋਗੇ। ਹਰ ਐਲਿਮੈਂਟ ਦੀ ਪਛਾਣ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ ਉਸ ਆਈਟਮ ਨੂੰ ਇੱਕ ਫੰਕਸ਼ਨ dragElement ਵਿੱਚ ਪਾਸ ਕਰਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਕੁਝ ਸਮੇਂ ਵਿੱਚ ਬਣਾਉਣ ਵਾਲੇ ਹੋ। ਇਸ ਤਰ੍ਹਾਂ, HTML ਵਿੱਚ ਐਲਿਮੈਂਟ ਹੁਣ ਡ੍ਰੈਗ-ਸਮਰੱਥ ਹੈ, ਜਾਂ ਜਲਦੀ ਹੋਵੇਗਾ।

✅ ਅਸੀਂ ਐਲਿਮੈਂਟਾਂ ਨੂੰ Id ਦੁਆਰਾ ਕਿਉਂ ਰਿਫਰੈਂਸ ਕਰਦੇ ਹਾਂ? CSS ਕਲਾਸ ਦੁਆਰਾ ਕਿਉਂ ਨਹੀਂ? ਇਸ ਸਵਾਲ ਦਾ ਜਵਾਬ ਦੇਣ ਲਈ ਤੁਸੀਂ CSS ਦੇ ਪਿਛਲੇ ਪਾਠ ਨੂੰ ਰਿਫਰੈਂਸ ਕਰ ਸਕਦੇ ਹੋ।

ਕਲੋਜ਼ਰ

ਹੁਣ ਤੁਸੀਂ dragElement ਕਲੋਜ਼ਰ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ, ਜੋ ਇੱਕ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਇੱਕ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਜਾਂ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਘੇਰਦਾ ਹੈ (ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਤਿੰਨ ਬਣਾਉਣ ਵਾਲੇ ਹਾਂ)।

ਕਲੋਜ਼ਰ ਉਸ ਸਮੇਂ ਲਾਭਦਾਇਕ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਇੱਕ ਜਾਂ ਵੱਧ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:

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

ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, displayCandy ਫੰਕਸ਼ਨ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਘੇਰਦਾ ਹੈ ਜੋ ਇੱਕ ਐਰੇ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਕੈਂਡੀ ਟਾਈਪ ਪੁਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਪਹਿਲਾਂ ਹੀ ਫੰਕਸ਼ਨ ਵਿੱਚ ਮੌਜੂਦ ਹੈ। ਜੇ ਤੁਸੀਂ ਇਸ ਕੋਡ ਨੂੰ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ candy ਐਰੇ ਅਪਰਿਭਾਸ਼ਿਤ ਹੋਵੇਗਾ, ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਹੈ (ਕਲੋਜ਼ਰ ਦੇ ਸਥਾਨਕ ਸਕੋਪ ਵਿੱਚ)।

✅ ਤੁਸੀਂ candy ਐਰੇ ਨੂੰ ਕਿਵੇਂ ਪਹੁੰਚਯੋਗ ਬਣਾ ਸਕਦੇ ਹੋ? ਇਸਨੂੰ ਕਲੋਜ਼ਰ ਦੇ ਬਾਹਰ ਲਿਜਾਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇਸ ਤਰੀਕੇ ਨਾਲ, ਐਰੇ ਗਲੋਬਲ ਬਣ ਜਾਂਦਾ ਹੈ, ਬਜਾਏ ਕਿ ਸਿਰਫ਼ ਕਲੋਜ਼ਰ ਦੇ ਸਥਾਨਕ ਸਕੋਪ ਵਿੱਚ ਉਪਲਬਧ ਰਹੇ।

ਕੰਮ

script.js ਵਿੱਚ ਐਲਿਮੈਂਟ ਡਿਕਲੇਰੇਸ਼ਨ ਦੇ ਹੇਠਾਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ:

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

dragElement ਆਪਣੇ terrariumElement ਆਬਜੈਕਟ ਨੂੰ ਸਕ੍ਰਿਪਟ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਕੀਤੇ ਡਿਕਲੇਰੇਸ਼ਨ ਤੋਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਫਿਰ, ਤੁਸੀਂ ਉਸ ਆਬਜੈਕਟ ਲਈ ਕੁਝ ਸਥਾਨਕ ਸਥਿਤੀਆਂ 0 'ਤੇ ਸੈਟ ਕਰਦੇ ਹੋ ਜੋ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਹਨ ਜੋ ਹਰ ਐਲਿਮੈਂਟ ਲਈ ਮੈਨਿਪੂਲੇਟ ਕੀਤੇ ਜਾਣਗੇ ਜਦੋਂ ਤੁਸੀਂ closure ਦੇ ਅੰਦਰ ਡ੍ਰੈਗ ਅਤੇ ਡ੍ਰਾਪ ਫੰਕਸ਼ਨਲਿਟੀ ਜੋੜਦੇ ਹੋ। ਟੈਰੀਰੀਅਮ ਨੂੰ ਇਨ੍ਹਾਂ ਡ੍ਰੈਗ ਕੀਤੇ ਗਏ ਐਲਿਮੈਂਟਾਂ ਦੁਆਰਾ ਭਰਿਆ ਜਾਵੇਗਾ, ਇਸ ਲਈ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਇਹ ਟ੍ਰੈਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਕਿ ਉਹ ਕਿੱਥੇ ਰੱਖੇ ਗਏ ਹਨ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, terrariumElement ਜੋ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕੀਤਾ ਗਿਆ ਹੈ, ਨੂੰ ਇੱਕ pointerdown ਇਵੈਂਟ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ web APIs ਦਾ ਹਿੱਸਾ ਹੈ ਜੋ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ। onpointerdown ਉਸ ਸਮੇਂ ਚਲਦਾ ਹੈ ਜਦੋਂ ਕੋਈ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ, ਜਾਂ ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇੱਕ ਡ੍ਰੈਗ ਕਰਨ ਯੋਗ ਐਲਿਮੈਂਟ ਨੂੰ ਛੂਹਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਇਵੈਂਟ ਹੈਂਡਲਰ web ਅਤੇ mobile browsers ਦੋਵਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੁਝ ਛੋਟੇ-ਮੋਟੇ ਅਪਵਾਦਾਂ ਦੇ ਨਾਲ।

✅ ਇਵੈਂਟ ਹੈਂਡਲਰ onclick ਵਿੱਚ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਹੈ; ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਥੇ ਕਿਉਂ ਨਹੀਂ ਵਰਤਦੇ? ਉਸ ਸਕ੍ਰੀਨ ਇੰਟਰਐਕਸ਼ਨ ਦੇ ਬਾਰੇ ਸੋਚੋ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ।

Pointerdrag ਫੰਕਸ਼ਨ

terrariumElement ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਡ੍ਰੈਗ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ; ਜਦੋਂ onpointerdown ਇਵੈਂਟ ਚਲਦਾ ਹੈ, pointerDrag ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਲਾਈਨ ਦੇ ਹੇਠਾਂ ਇਹ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ: terrariumElement.onpointerdown = pointerDrag;:

ਕੰਮ

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

ਕਈ ਚੀਜ਼ਾਂ ਹੁੰਦੀਆਂ ਹਨ। ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਤੁਸੀਂ e.preventDefault(); ਦੀ ਵਰਤੋਂ ਕਰਕੇ pointerdown 'ਤੇ ਆਮ ਤੌਰ 'ਤੇ ਹੋਣ ਵਾਲੇ ਡਿਫਾਲਟ ਇਵੈਂਟਾਂ ਨੂੰ ਰੋਕਦੇ ਹੋ। ਇਸ ਤਰੀਕੇ ਨਾਲ ਤੁਹਾਡੇ ਕੋਲ ਇੰਟਰਫੇਸ ਦੇ ਵਿਹਾਰ 'ਤੇ ਹੋਰ ਕੰਟਰੋਲ ਹੁੰਦਾ ਹੈ।

ਜਦੋਂ ਤੁਸੀਂ ਸਕ੍ਰਿਪਟ ਫਾਇਲ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਣਾਉਂਦੇ ਹੋ, ਇਸ ਲਾਈਨ 'ਤੇ ਵਾਪਸ ਆਓ ਅਤੇ ਇਸਨੂੰ e.preventDefault() ਤੋਂ ਬਿਨਾਂ ਅਜ਼ਮਾਓ - ਕੀ ਹੁੰਦਾ ਹੈ?

ਦੂਜਾ, index.html ਨੂੰ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਇੰਟਰਫੇਸ ਦੀ ਜਾਂਚ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਪੌਦੇ 'ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ 'e' ਇਵੈਂਟ ਕਿਵੇਂ ਕੈਪਚਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਵੈਂਟ ਵਿੱਚ ਖੋਜ ਕਰੋ ਕਿ ਇੱਕ pointerdown ਇਵੈਂਟ ਦੁਆਰਾ ਕਿੰਨੀ ਜਾਣਕਾਰੀ ਇਕੱਠੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ!

ਅਗਲਾ, ਧਿਆਨ ਦਿਓ ਕਿ ਸਥਾਨਕ ਵੈਰੀਏਬਲ pos3 ਅਤੇ pos4 ਨੂੰ e.clientX 'ਤੇ ਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਇੰਸਪੈਕਸ਼ਨ ਪੈਨ ਵਿੱਚ e ਮੁੱਲਾਂ ਨੂੰ ਲੱਭ ਸਕਦੇ ਹੋ। ਇਹ ਮੁੱਲ ਪੌਦੇ ਦੇ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਇਸ 'ਤੇ ਕਲਿਕ ਜਾਂ ਟੱਚ ਕਰਦੇ ਹੋ। ਤੁਸੀਂ ਪੌਦਿਆਂ ਦੇ ਵਿਹਾਰ 'ਤੇ ਜਦੋਂ ਤੁਸੀਂ ਕਲਿਕ ਅਤੇ ਡ੍ਰੈਗ ਕਰਦੇ ਹੋ, ਬਹੁਤ ਜ਼ਿਆਦਾ ਕੰਟਰੋਲ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਇਸ ਲਈ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਦੇ ਕੋਆਰਡੀਨੇਟਾਂ ਦਾ ਟ੍ਰੈਕ ਰੱਖਦੇ ਹੋ।

✅ ਕੀ ਇਹ ਹੋਰ ਸਪਸ਼ਟ ਹੋ ਰਿਹਾ ਹੈ ਕਿ ਇਹ ਸਾਰਾ ਐਪ ਇੱਕ ਵੱਡੇ ਕਲੋਜ਼ਰ ਨਾਲ ਕਿਉਂ ਬਣਾਇਆ ਗਿਆ ਹੈ? ਜੇ ਇਹ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਤੁਸੀਂ 14 ਡ੍ਰੈਗ ਕਰਨ ਯੋਗ ਪੌਦਿਆਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਲਈ ਸਕੋਪ ਕਿਵੇਂ ਬਣਾਉਂਦੇ?

ਸ਼ੁਰੂਆਤੀ ਫੰਕਸ਼ਨ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ pos4 = e.clientY ਦੇ ਹੇਠਾਂ ਦੋ ਹੋਰ pointer ਇਵੈਂਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:

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

ਹੁਣ ਤੁਸੀਂ ਦਰਸਾ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ pointer ਦੇ ਨਾਲ ਖਿੱਚਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਅਤੇ ਡ੍ਰੈਗਿੰਗ ਜੈਸਚਰ ਨੂੰ ਰੋਕਣ ਲਈ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਡੀਸੈਲੇਕਟ ਕਰਦੇ ਹੋ। onpointermove ਅਤੇ onpointerup ਇੱਕੋ API ਦਾ ਹਿੱਸਾ ਹਨ ਜਿਵੇਂ onpointerdown। ਇੰਟਰਫੇਸ ਹੁਣ ਗਲਤੀਆਂ ਸੁੱਟੇਗਾ ਕਿਉਂਕਿ ਤੁਸੀਂ ਅਜੇ elementDrag ਅਤੇ stopElementDrag ਫੰਕਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਹੈ, ਇਸ ਲਈ ਅਗਲੇ ਫੰਕਸ਼ਨ ਬਣਾਓ।

elementDrag ਅਤੇ stopElementDrag ਫੰਕਸ਼ਨ

ਤੁਸੀਂ closure ਨੂੰ ਪੂਰਾ ਕਰਾਂਗੇ ਦੋ ਹੋਰ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਕੇ ਜੋ ਇਹ ਸੰਭਾਲਣਗੇ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਖਿੱਚਦੇ ਹੋ ਅਤੇ ਖਿੱਚਣਾ ਰੋਕਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਜੋ ਵਿਹਾਰ ਚਾਹੁੰਦੇ ਹੋ ਉਹ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਸਮੇਂ ਕਿਸੇ ਵੀ ਪੌਦੇ ਨੂੰ ਖਿੱਚ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਤੇ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ। ਇਹ ਇੰਟਰਫੇਸ ਬਹੁਤ ਹੀ ਅਨ-ਓਪਿਨਿਅਟਡ ਹੈ (ਉਦਾਹਰਨ ਲਈ ਕੋਈ ਡ੍ਰਾਪ ਜ਼ੋਨ ਨਹੀਂ ਹੈ) ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਬਿਲਕੁਲ ਆਪਣੇ ਪਸੰਦ ਦੇ ਅਨੁਸਾਰ ਡਿਜ਼ਾਈਨ ਕਰ ਸਕੋ।

ਕੰਮ

pointerDrag ਦੇ ਬੰਦ ਕਰਲੀ ਬ੍ਰੈਕਟ ਦੇ ਬਾਅਦ elementDrag ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:

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';
}

ਇਸ ਫੰਕਸ਼ਨ ਵਿੱਚ, ਤੁਸੀਂ ਸ਼ੁਰੂਆਤੀ ਸਥਿਤੀਆਂ 1-4 ਨੂੰ ਬਹੁਤ ਸੋਧਦੇ ਹੋ ਜੋ ਤੁਸੀਂ closure ਦੇ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਵਿੱਚ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਵਜੋਂ ਸੈਟ ਕੀਤੇ। ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ?

ਜਦੋਂ ਤੁਸੀਂ ਡ੍ਰੈਗ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ pos1 ਨੂੰ ਦੁਬਾਰਾ ਅਸਾਈਨ ਕਰਦੇ ਹੋ ਇਸਨੂੰ pos3 ਦੇ ਬਰਾਬਰ ਬਣਾਕੇ (ਜਿਸਨੂੰ ਤੁਸੀਂ ਪਹਿਲਾਂ e.clientX ਵਜੋਂ ਸੈਟ ਕੀਤਾ ਸੀ) ਮਾਈਨਸ ਮੌਜੂਦਾ e.clientX ਮੁੱਲ। ਤੁਸੀਂ pos2 'ਤੇ ਇੱਕੋ ਜਿਹੀ ਕਾਰਵਾਈ ਕਰਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ pos3 ਅਤੇ pos4 ਨੂੰ ਐਲਿਮੈਂਟ ਦੇ ਨਵੇਂ X ਅਤੇ Y ਕੋਆਰਡੀਨੇਟਾਂ 'ਤੇ ਦੁਬਾਰਾ ਸੈਟ ਕਰਦੇ ਹੋ। ਤੁਸੀਂ ਜਦੋਂ ਡ੍ਰੈਗ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਕਨਸੋਲ ਵਿੱਚ ਇਹ ਬਦਲਾਅ ਦੇਖ ਸਕਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ ਪੌਦੇ ਦੇ css ਸਟਾਈਲ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਦੇ ਹੋ ਤਾਂ ਜੋ ਇਸਦੀ ਨਵੀਂ ਸਥਿਤੀ ਨੂੰ pos1

ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।

23 KiB Raw Permalink Blame History