You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
22 KiB
186 lines
22 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "30f8903a1f290e3d438dc2c70fe60259",
|
|
"translation_date": "2025-08-25T21:19:19+00:00",
|
|
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਅਤੇ ਕਲੋਜ਼ਰ
|
|
|
|
|
|
> ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਵੱਲੋਂ
|
|
|
|
## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
|
|
|
|
[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/19)
|
|
|
|
### ਪਰਿਚਯ
|
|
|
|
DOM, ਜਾਂ "ਡਾਕੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ", ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨਾ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦਾ ਇੱਕ ਮੁੱਖ ਪਹਲੂ ਹੈ। [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) ਦੇ ਅਨੁਸਾਰ, "ਡਾਕੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ (DOM) ਵੈੱਬ 'ਤੇ ਇੱਕ ਡਾਕੂਮੈਂਟ ਦੀ ਬਣਤਰ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਬਣਾਉਣ ਵਾਲੇ ਆਬਜੈਕਟਾਂ ਦੀ ਡਾਟਾ ਪ੍ਰਸਤੁਤੀ ਹੈ।" ਵੈੱਬ 'ਤੇ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਦੇ ਚੁਣੌਤੀਆਂ ਅਕਸਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਰੇਮਵਰਕਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਪਿੱਛੇ ਕਾਰਨ ਰਹੀਆਂ ਹਨ, ਪਰ ਅਸੀਂ ਇਸਨੂੰ ਸਿਰਫ ਵੈਨਿਲਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਸੰਭਾਲਾਂਗੇ!
|
|
|
|
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਸ ਪਾਠ ਵਿੱਚ [ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ਦਾ ਵਿਚਾਰ ਪੇਸ਼ ਕੀਤਾ ਜਾਵੇਗਾ, ਜਿਸਨੂੰ ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵਜੋਂ ਸੋਚ ਸਕਦੇ ਹੋ ਜੋ ਦੂਜੇ ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਘੇਰਿਆ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ।
|
|
|
|
> ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ ਇੱਕ ਵਿਆਪਕ ਅਤੇ ਜਟਿਲ ਵਿਸ਼ਾ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ ਸਿਰਫ ਬੁਨਿਆਦੀ ਵਿਚਾਰ ਨੂੰ ਛੂਹਿਆ ਗਿਆ ਹੈ ਕਿ ਇਸ ਟੈਰੀਰੀਅਮ ਦੇ ਕੋਡ ਵਿੱਚ ਤੁਹਾਨੂੰ ਇੱਕ ਕਲੋਜ਼ਰ ਮਿਲੇਗਾ: ਇੱਕ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਅਤੇ ਇੱਕ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਜੋ ਇਸ ਤਰੀਕੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਕਿ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ। ਇਸਦੇ ਕੰਮ ਕਰਨ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਕਿਰਪਾ ਕਰਕੇ [ਵਿਆਪਕ ਦਸਤਾਵੇਜ਼](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ਵੇਖੋ।
|
|
|
|
ਅਸੀਂ DOM ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਲਈ ਇੱਕ ਕਲੋਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।
|
|
|
|
DOM ਨੂੰ ਇੱਕ ਦਰੱਖਤ ਵਜੋਂ ਸੋਚੋ, ਜੋ ਇੱਕ ਵੈੱਬ ਪੇਜ ਡਾਕੂਮੈਂਟ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੇ ਸਾਰੇ ਤਰੀਕੇ ਦਰਸਾਉਂਦਾ ਹੈ। ਵੱਖ-ਵੱਖ APIs (ਐਪਲੀਕੇਸ਼ਨ ਪ੍ਰੋਗਰਾਮ ਇੰਟਰਫੇਸ) ਲਿਖੀਆਂ ਗਈਆਂ ਹਨ ਤਾਂ ਜੋ ਪ੍ਰੋਗਰਾਮਰ, ਆਪਣੇ ਪਸੰਦੀਦਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, DOM ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਣ ਅਤੇ ਇਸਨੂੰ ਸੋਧ ਸਕਣ, ਬਦਲ ਸਕਣ, ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਕਰ ਸਕਣ, ਅਤੇ ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਇਸਨੂੰ ਸੰਭਾਲ ਸਕਣ।
|
|
|
|
|
|
|
|
> DOM ਅਤੇ ਇਸਨੂੰ ਰਿਫਰੈਂਸ ਕਰਨ ਵਾਲੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਪ੍ਰਸਤੁਤੀ। [ਓਲਫਾ ਨਸਰਾਊਈ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ਵੱਲੋਂ
|
|
|
|
ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਆਪਣਾ ਇੰਟਰਐਕਟਿਵ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਪੂਰਾ ਕਰਾਂਗੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਬਣਾਕੇ ਜੋ ਯੂਜ਼ਰ ਨੂੰ ਪੇਜ 'ਤੇ ਪੌਦਿਆਂ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਵੇਗਾ।
|
|
|
|
### ਪੂਰਵ ਸ਼ਰਤ
|
|
|
|
ਤੁਹਾਡੇ ਕੋਲ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਲਈ HTML ਅਤੇ CSS ਬਣੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ ਤੁਸੀਂ ਪੌਦਿਆਂ ਨੂੰ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਖਿੱਚ ਕੇ ਲਿਜਾਣ ਅਤੇ ਬਾਹਰ ਕੱਢਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ।
|
|
|
|
### ਕੰਮ
|
|
|
|
ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਫੋਲਡਰ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਜਿਸਦਾ ਨਾਮ `script.js` ਰੱਖੋ। ਇਸ ਫਾਈਲ ਨੂੰ `<head>` ਸੈਕਸ਼ਨ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰੋ:
|
|
|
|
```html
|
|
<script src="./script.js" defer></script>
|
|
```
|
|
|
|
> ਨੋਟ: ਇੱਕ ਬਾਹਰੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਨੂੰ HTML ਫਾਈਲ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰਦੇ ਸਮੇਂ `defer` ਦੀ ਵਰਤੋਂ ਕਰੋ ਤਾਂ ਜੋ ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਿਰਫ HTML ਫਾਈਲ ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਹੀ ਚੱਲੇ। ਤੁਸੀਂ `async` ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ ਸਕ੍ਰਿਪਟ ਨੂੰ HTML ਫਾਈਲ ਦੇ ਪਾਰਸ ਹੋਣ ਦੇ ਦੌਰਾਨ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਪਰ ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਡਰੈਗ ਕਰਨ ਵਾਲੇ HTML ਐਲਿਮੈਂਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਉਪਲਬਧ ਹੋਣ।
|
|
|
|
---
|
|
|
|
## DOM ਐਲਿਮੈਂਟਸ
|
|
|
|
ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ DOM ਵਿੱਚ ਉਹ ਐਲਿਮੈਂਟਸ ਨੂੰ ਰਿਫਰੈਂਸ ਕਰਨਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਮੈਨਿਪੂਲੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇਹ 14 ਪੌਦੇ ਹਨ ਜੋ ਇਸ ਸਮੇਂ ਸਾਈਡ ਬਾਰ ਵਿੱਚ ਉਪਲਬਧ ਹਨ।
|
|
|
|
### ਕੰਮ
|
|
|
|
```html
|
|
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` ਕਲੋਜ਼ਰ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ, ਜੋ ਇੱਕ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਇੱਕ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਜਾਂ ਫੰਕਸ਼ਨਸ ਨੂੰ ਘੇਰਦਾ ਹੈ (ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਤਿੰਨ ਬਣਾਵਾਂਗੇ)।
|
|
|
|
ਕਲੋਜ਼ਰ ਉਸ ਸਮੇਂ ਲਾਭਦਾਇਕ ਹੁੰਦੇ ਹਨ ਜਦੋਂ ਇੱਕ ਜਾਂ ਵੱਧ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਥੇ ਇੱਕ ਉਦਾਹਰਨ ਹੈ:
|
|
|
|
```javascript
|
|
function displayCandy(){
|
|
let candy = ['jellybeans'];
|
|
function addCandy(candyType) {
|
|
candy.push(candyType)
|
|
}
|
|
addCandy('gumdrops');
|
|
}
|
|
displayCandy();
|
|
console.log(candy)
|
|
```
|
|
|
|
ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ, `displayCandy` ਫੰਕਸ਼ਨ ਇੱਕ ਅਜਿਹੇ ਫੰਕਸ਼ਨ ਨੂੰ ਘੇਰਦਾ ਹੈ ਜੋ ਇੱਕ ਮੌਜੂਦਾ ਐਰੇ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਕੈਂਡੀ ਦੀ ਕਿਸਮ ਪੁਸ਼ ਕਰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਇਸ ਕੋਡ ਨੂੰ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ `candy` ਐਰੇ ਅਣਪਛਾਤਾ ਹੋਵੇਗਾ, ਕਿਉਂਕਿ ਇਹ ਇੱਕ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਹੈ (ਕਲੋਜ਼ਰ ਲਈ ਸਥਾਨਕ)।
|
|
|
|
✅ ਤੁਸੀਂ `candy` ਐਰੇ ਨੂੰ ਕਿਵੇਂ ਪਹੁੰਚਯੋਗ ਬਣਾ ਸਕਦੇ ਹੋ? ਇਸਨੂੰ ਕਲੋਜ਼ਰ ਤੋਂ ਬਾਹਰ ਲਿਜਾਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇਸ ਤਰੀਕੇ ਨਾਲ, ਐਰੇ ਗਲੋਬਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਸਿਰਫ ਕਲੋਜ਼ਰ ਦੇ ਸਥਾਨਕ ਸਕੋਪ ਤੱਕ ਸੀਮਿਤ ਰਹਿਣ ਦੀ ਬਜਾਏ।
|
|
|
|
### ਕੰਮ
|
|
|
|
`script.js` ਵਿੱਚ ਐਲਿਮੈਂਟ ਡਿਕਲੇਰੇਸ਼ਨ ਦੇ ਹੇਠਾਂ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ:
|
|
|
|
```javascript
|
|
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` 'ਤੇ ਸੈਟ ਕਰਦੇ ਹੋ। ਇਹ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਹਨ ਜੋ ਹਰ ਐਲਿਮੈਂਟ ਲਈ ਮੈਨਿਪੂਲੇਟ ਕੀਤੇ ਜਾਣਗੇ ਜਦੋਂ ਤੁਸੀਂ ਕਲੋਜ਼ਰ ਦੇ ਅੰਦਰ ਡਰੈਗ ਅਤੇ ਡਰੌਪ ਫੰਕਸ਼ਨਲਿਟੀ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ। ਟੈਰੀਰੀਅਮ ਨੂੰ ਇਨ੍ਹਾਂ ਡਰੈਗ ਕੀਤੇ ਗਏ ਐਲਿਮੈਂਟਸ ਦੁਆਰਾ ਭਰਿਆ ਜਾਵੇਗਾ, ਇਸ ਲਈ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਇਹ ਟਰੈਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਕਿ ਇਹ ਕਿੱਥੇ ਰੱਖੇ ਗਏ ਹਨ।
|
|
|
|
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕੀਤਾ ਗਿਆ `terrariumElement` ਇੱਕ `pointerdown` ਇਵੈਂਟ ਨੂੰ ਅਸਾਈਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ [ਵੈੱਬ APIs](https://developer.mozilla.org/docs/Web/API) ਦਾ ਹਿੱਸਾ ਹੈ ਜੋ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ। `onpointerdown` ਉਸ ਸਮੇਂ ਚਲਦਾ ਹੈ ਜਦੋਂ ਕੋਈ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ, ਜਾਂ ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਜਦੋਂ ਇੱਕ ਡਰੈਗ ਕਰਨ ਯੋਗ ਐਲਿਮੈਂਟ ਨੂੰ ਛੂਹਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਇਵੈਂਟ ਹੈਂਡਲਰ ਦੋਨੋਂ [ਵੈੱਬ ਅਤੇ ਮੋਬਾਈਲ ਬ੍ਰਾਊਜ਼ਰ](https://caniuse.com/?search=onpointerdown) 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੁਝ ਛੋਟਾਂ ਦੇ ਨਾਲ।
|
|
|
|
✅ [ਇਵੈਂਟ ਹੈਂਡਲਰ `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ਦੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਪੋਰਟ ਹੈ; ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਥੇ ਕਿਉਂ ਨਹੀਂ ਵਰਤਦੇ? ਉਸ ਖਾਸ ਸਕ੍ਰੀਨ ਇੰਟਰਐਕਸ਼ਨ ਬਾਰੇ ਸੋਚੋ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ।
|
|
|
|
---
|
|
|
|
## ਪੌਇੰਟਰਡਰੈਗ ਫੰਕਸ਼ਨ
|
|
|
|
`terrariumElement` ਹੁਣ ਡਰੈਗ ਕਰਨ ਲਈ ਤਿਆਰ ਹੈ; ਜਦੋਂ `onpointerdown` ਇਵੈਂਟ ਚਲਦਾ ਹੈ, ਤਾਂ `pointerDrag` ਫੰਕਸ਼ਨ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਲਾਈਨ ਦੇ ਹੇਠਾਂ ਇਹ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ: `terrariumElement.onpointerdown = pointerDrag;`:
|
|
|
|
### ਕੰਮ
|
|
|
|
```javascript
|
|
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` ਦੇ ਹੇਠਾਂ ਦੋ ਹੋਰ ਪੌਇੰਟਰ ਇਵੈਂਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```html
|
|
document.onpointermove = elementDrag;
|
|
document.onpointerup = stopElementDrag;
|
|
```
|
|
|
|
ਹੁਣ ਤੁਸੀਂ ਦਰਸਾ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਪੌਇੰਟਰ ਦੇ ਨਾਲ ਖਿੱਚਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਅਤੇ ਡਰੈਗਿੰਗ ਜੈਸਚਰ ਨੂੰ ਰੋਕਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਡੀਸਿਲੈਕਟ ਕਰਦੇ ਹੋ। `onpointermove` ਅਤੇ `onpointerup` ਸਾਰੇ ਇੱਕੋ API ਦਾ ਹਿੱਸਾ ਹਨ ਜਿਵੇਂ `onpointerdown`। ਇੰਟਰਫੇਸ ਹੁਣ ਗਲਤੀਆਂ ਸੁੱਟੇਗਾ ਕਿਉਂਕਿ ਤੁਸੀਂ ਹਾਲੇ `elementDrag` ਅਤੇ `stopElementDrag` ਫੰਕਸ਼ਨਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਹੈ, ਇਸ ਲਈ ਹੁਣ ਉਹ ਬਣਾਓ।
|
|
|
|
## `elementDrag` ਅਤੇ `stopElementDrag` ਫੰਕਸ਼ਨਸ
|
|
|
|
ਤੁਸੀਂ ਦੋ ਹੋਰ ਅੰਦਰੂਨੀ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਕੇ ਆਪਣਾ ਕਲੋਜ਼ਰ ਪੂਰਾ ਕਰੋਗੇ ਜੋ ਇਹ ਸੰਭਾਲਣਗੇ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਪੌਦੇ ਨੂੰ ਖਿੱਚਦੇ ਹੋ ਅਤੇ ਖਿੱਚਣਾ ਬੰਦ ਕਰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਜੋ ਵਿਹਾਰ ਚਾਹੁੰਦੇ ਹੋ ਉਹ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਸਮੇਂ ਕਿਸੇ ਵੀ ਪੌਦੇ ਨੂੰ ਖਿੱਚ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਤੇ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ। ਇਹ ਇੰਟਰਫੇਸ ਬਹੁਤ ਹੀ ਅਣ-ਰਾਖਵਾਂ ਹੈ (ਉਦਾਹਰਣ ਲਈ, ਇੱਥੇ ਕੋਈ ਡਰੌਪ ਜ਼ੋਨ ਨਹੀਂ ਹੈ) ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਬਿਲਕੁਲ ਆਪਣੇ ਮਨਪਸੰਦ ਅਨੁਸਾਰ ਡਿਜ਼ਾਈਨ ਕਰ ਸਕੋ।
|
|
|
|
### ਕੰਮ
|
|
|
|
`pointerDrag` ਦੇ ਬੰਦ ਕਰਲੀ ਬ੍ਰੈਕਟ ਦੇ ਤੁਰੰਤ ਬਾਅਦ `elementDrag` ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```javascript
|
|
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 ਨੂੰ ਬਹੁਤ ਸੋਧਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਵਿੱਚ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਵਜੋਂ ਸੈਟ ਕੀਤੀਆਂ ਸਨ। ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ?
|
|
|
|
ਜਦੋਂ ਤੁਸੀਂ ਖਿੱਚਦੇ ਹੋ, ਤੁਸੀਂ `pos1` ਨੂੰ ਦੁਬਾਰਾ ਅਸਾਈਨ ਕਰਦੇ ਹੋ ਇਸਨੂੰ `pos3` ਦੇ ਬਰਾਬਰ ਬਣਾਕੇ (ਜਿਸਨੂੰ ਤੁਸੀਂ ਪਹਿਲਾਂ `e.clientX` ਵਜੋਂ ਸੈਟ ਕੀਤਾ ਸੀ) ਮਾਈਨਸ ਮੌਜੂਦਾ `e.clientX` ਮੁੱਲ। ਤੁਸੀਂ `pos2` ਨਾਲ ਵੀ ਇੱਕੋ ਜਿਹੀ ਕਾਰਵਾਈ ਕਰਦੇ ਹੋ। ਫਿਰ
|
|
|
|
**ਅਸਵੀਕਰਤਾ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |