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
23 KiB
186 lines
23 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "61c14b27044861e5e69db35dd52c4403",
|
|
"translation_date": "2025-08-28T17:10:45+00:00",
|
|
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 3: DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਅਤੇ ਕਲੋਜ਼ਰ
|
|
|
|
|
|
> ਸਕੈਚਨੋਟ [Tomomi Imura](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 ਮੈਨਿਪੂਲੇਸ਼ਨ ਦੇ ਚੁਣੌਤੀਪੂਰਨ ਪਹਲੂ ਅਕਸਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਰੇਮਵਰਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਕਾਰਨ ਬਣੇ ਹਨ, ਪਰ ਅਸੀਂ ਇਸ ਨੂੰ ਆਪਣੇ ਆਪ ਸੰਭਾਲਾਂਗੇ!
|
|
|
|
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਸ ਪਾਠ ਵਿੱਚ [JavaScript ਕਲੋਜ਼ਰ](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ਦਾ ਵਿਚਾਰ ਪੇਸ਼ ਕੀਤਾ ਜਾਵੇਗਾ, ਜਿਸਨੂੰ ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵਜੋਂ ਸੋਚ ਸਕਦੇ ਹੋ ਜੋ ਦੂਜੇ ਫੰਕਸ਼ਨ ਦੁਆਰਾ ਘੇਰਿਆ ਗਿਆ ਹੈ ਤਾਂ ਜੋ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ।
|
|
|
|
> ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਲੋਜ਼ਰ ਇੱਕ ਵਿਆਪਕ ਅਤੇ ਜਟਿਲ ਵਿਸ਼ਾ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ ਸਿਰਫ਼ ਬੁਨਿਆਦੀ ਵਿਚਾਰ ਨੂੰ ਛੂਹਿਆ ਗਿਆ ਹੈ ਕਿ ਇਸ ਟੈਰੀਰੀਅਮ ਦੇ ਕੋਡ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਕਲੋਜ਼ਰ ਪਾਓਗੇ: ਇੱਕ ਅੰਦਰਲਾ ਫੰਕਸ਼ਨ ਅਤੇ ਇੱਕ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਜੋ ਇਸ ਤਰੀਕੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਕਿ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਦੇ ਸਕੋਪ ਤੱਕ ਪਹੁੰਚ ਹੋਵੇ। ਇਸ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਕਿਰਪਾ ਕਰਕੇ [ਵਿਆਪਕ ਦਸਤਾਵੇਜ਼](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ਵੇਖੋ।
|
|
|
|
ਅਸੀਂ DOM ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਲਈ ਇੱਕ ਕਲੋਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ।
|
|
|
|
DOM ਨੂੰ ਇੱਕ ਦਰੱਖਤ ਵਜੋਂ ਸੋਚੋ, ਜੋ ਵੈੱਬ ਪੇਜ ਡਾਕੂਮੈਂਟ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਨ ਦੇ ਸਾਰੇ ਤਰੀਕੇ ਦਰਸਾਉਂਦਾ ਹੈ। ਵੱਖ-ਵੱਖ APIs (ਐਪਲੀਕੇਸ਼ਨ ਪ੍ਰੋਗਰਾਮ ਇੰਟਰਫੇਸ) ਲਿਖੀਆਂ ਗਈਆਂ ਹਨ ਤਾਂ ਜੋ ਪ੍ਰੋਗਰਾਮਰ, ਆਪਣੇ ਪਸੰਦੀਦਾ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, DOM ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਣ ਅਤੇ ਇਸ ਨੂੰ ਸੋਧ, ਬਦਲ, ਦੁਬਾਰਾ ਵਿਵਸਥਿਤ ਅਤੇ ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਕਰ ਸਕਣ।
|
|
|
|
|
|
|
|
> DOM ਅਤੇ ਇਸਨੂੰ ਹਵਾਲਾ ਦੇਣ ਵਾਲੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਪ੍ਰਸਤੁਤੀ। [Olfa Nasraoui](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` 'ਤੇ ਸੈਟ ਕਰਦੇ ਹੋ ਜੋ ਫੰਕਸ਼ਨ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਹਨ ਜੋ ਹਰ ਐਲਿਮੈਂਟ ਲਈ ਮੈਨਿਪੂਲੇਟ ਕੀਤੇ ਜਾਣਗੇ ਜਦੋਂ ਤੁਸੀਂ closure ਦੇ ਅੰਦਰ ਡ੍ਰੈਗ ਅਤੇ ਡ੍ਰਾਪ ਫੰਕਸ਼ਨਲਿਟੀ ਜੋੜਦੇ ਹੋ। ਟੈਰੀਰੀਅਮ ਨੂੰ ਇਨ੍ਹਾਂ ਡ੍ਰੈਗ ਕੀਤੇ ਗਏ ਐਲਿਮੈਂਟਾਂ ਦੁਆਰਾ ਭਰਿਆ ਜਾਵੇਗਾ, ਇਸ ਲਈ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਇਹ ਟ੍ਰੈਕ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਕਿ ਉਹ ਕਿੱਥੇ ਰੱਖੇ ਗਏ ਹਨ।
|
|
|
|
ਇਸ ਤੋਂ ਇਲਾਵਾ, `terrariumElement` ਜੋ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕੀਤਾ ਗਿਆ ਹੈ, ਨੂੰ ਇੱਕ `pointerdown` ਇਵੈਂਟ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ [web APIs](https://developer.mozilla.org/docs/Web/API) ਦਾ ਹਿੱਸਾ ਹੈ ਜੋ DOM ਮੈਨਿਪੂਲੇਸ਼ਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ। `onpointerdown` ਉਸ ਸਮੇਂ ਚਲਦਾ ਹੈ ਜਦੋਂ ਕੋਈ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ, ਜਾਂ ਸਾਡੇ ਕੇਸ ਵਿੱਚ, ਇੱਕ ਡ੍ਰੈਗ ਕਰਨ ਯੋਗ ਐਲਿਮੈਂਟ ਨੂੰ ਛੂਹਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਇਵੈਂਟ ਹੈਂਡਲਰ [web ਅਤੇ mobile browsers](https://caniuse.com/?search=onpointerdown) ਦੋਵਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੁਝ ਛੋਟੇ-ਮੋਟੇ ਅਪਵਾਦਾਂ ਦੇ ਨਾਲ।
|
|
|
|
✅ [ਇਵੈਂਟ ਹੈਂਡਲਰ `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ਵਿੱਚ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕ੍ਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਹੈ; ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਥੇ ਕਿਉਂ ਨਹੀਂ ਵਰਤਦੇ? ਉਸ ਸਕ੍ਰੀਨ ਇੰਟਰਐਕਸ਼ਨ ਦੇ ਬਾਰੇ ਸੋਚੋ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਬਣਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ।
|
|
|
|
---
|
|
|
|
## Pointerdrag ਫੰਕਸ਼ਨ
|
|
|
|
`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` ਦੇ ਹੇਠਾਂ ਦੋ ਹੋਰ pointer ਇਵੈਂਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```html
|
|
document.onpointermove = elementDrag;
|
|
document.onpointerup = stopElementDrag;
|
|
```
|
|
ਹੁਣ ਤੁਸੀਂ ਦਰਸਾ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ pointer ਦੇ ਨਾਲ ਖਿੱਚਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਅਤੇ ਡ੍ਰੈਗਿੰਗ ਜੈਸਚਰ ਨੂੰ ਰੋਕਣ ਲਈ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਡੀਸੈਲੇਕਟ ਕਰਦੇ ਹੋ। `onpointermove` ਅਤੇ `onpointerup` ਇੱਕੋ API ਦਾ ਹਿੱਸਾ ਹਨ ਜਿਵੇਂ `onpointerdown`। ਇੰਟਰਫੇਸ ਹੁਣ ਗਲਤੀਆਂ ਸੁੱਟੇਗਾ ਕਿਉਂਕਿ ਤੁਸੀਂ ਅਜੇ `elementDrag` ਅਤੇ `stopElementDrag` ਫੰਕਸ਼ਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਹੈ, ਇਸ ਲਈ ਅਗਲੇ ਫੰਕਸ਼ਨ ਬਣਾਓ।
|
|
|
|
## elementDrag ਅਤੇ stopElementDrag ਫੰਕਸ਼ਨ
|
|
|
|
ਤੁਸੀਂ closure ਨੂੰ ਪੂਰਾ ਕਰਾਂਗੇ ਦੋ ਹੋਰ ਅੰਦਰਲੇ ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਕੇ ਜੋ ਇਹ ਸੰਭਾਲਣਗੇ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਖਿੱਚਦੇ ਹੋ ਅਤੇ ਖਿੱਚਣਾ ਰੋਕਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ। ਤੁਸੀਂ ਜੋ ਵਿਹਾਰ ਚਾਹੁੰਦੇ ਹੋ ਉਹ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਸਮੇਂ ਕਿਸੇ ਵੀ ਪੌਦੇ ਨੂੰ ਖਿੱਚ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿਤੇ ਵੀ ਰੱਖ ਸਕਦੇ ਹੋ। ਇਹ ਇੰਟਰਫੇਸ ਬਹੁਤ ਹੀ ਅਨ-ਓਪਿਨਿਅਟਡ ਹੈ (ਉਦਾਹਰਨ ਲਈ ਕੋਈ ਡ੍ਰਾਪ ਜ਼ੋਨ ਨਹੀਂ ਹੈ) ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਬਿਲਕੁਲ ਆਪਣੇ ਪਸੰਦ ਦੇ ਅਨੁਸਾਰ ਡਿਜ਼ਾਈਨ ਕਰ ਸਕੋ।
|
|
|
|
### ਕੰਮ
|
|
|
|
`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 ਨੂੰ ਬਹੁਤ ਸੋਧਦੇ ਹੋ ਜੋ ਤੁਸੀਂ closure ਦੇ ਬਾਹਰੀ ਫੰਕਸ਼ਨ ਵਿੱਚ ਸਥਾਨਕ ਵੈਰੀਏਬਲ ਵਜੋਂ ਸੈਟ ਕੀਤੇ। ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ?
|
|
|
|
ਜਦੋਂ ਤੁਸੀਂ ਡ੍ਰੈਗ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ `pos1` ਨੂੰ ਦੁਬਾਰਾ ਅਸਾਈਨ ਕਰਦੇ ਹੋ ਇਸਨੂੰ `pos3` ਦੇ ਬਰਾਬਰ ਬਣਾਕੇ (ਜਿਸਨੂੰ ਤੁਸੀਂ ਪਹਿਲਾਂ `e.clientX` ਵਜੋਂ ਸੈਟ ਕੀਤਾ ਸੀ) ਮਾਈਨਸ ਮੌਜੂਦਾ `e.clientX` ਮੁੱਲ। ਤੁਸੀਂ `pos2` 'ਤੇ ਇੱਕੋ ਜਿਹੀ ਕਾਰਵਾਈ ਕਰਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ `pos3` ਅਤੇ `pos4` ਨੂੰ ਐਲਿਮੈਂਟ ਦੇ ਨਵੇਂ X ਅਤੇ Y ਕੋਆਰਡੀਨੇਟਾਂ 'ਤੇ ਦੁਬਾਰਾ ਸੈਟ ਕਰਦੇ ਹੋ। ਤੁਸੀਂ ਜਦੋਂ ਡ੍ਰੈਗ ਕਰਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਕਨਸੋਲ ਵਿੱਚ ਇਹ ਬਦਲਾਅ ਦੇਖ ਸਕਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ ਪੌਦੇ ਦੇ css ਸਟਾਈਲ ਨੂੰ ਮੈਨਿਪੂਲੇਟ ਕਰਦੇ ਹੋ ਤਾਂ ਜੋ ਇਸਦੀ ਨਵੀਂ ਸਥਿਤੀ ਨੂੰ `pos1`
|
|
|
|
---
|
|
|
|
**ਅਸਵੀਕਰਤੀ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |