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.
188 lines
22 KiB
188 lines
22 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "c1e84148719fdfcf5039ab4401dca7a3",
|
|
"translation_date": "2025-10-20T21:59:51+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 ਫਾਈਲ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਦੇ ਬਾਅਦ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਚਲਾਉਣ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ HTML ਫਾਈਲ ਵਿੱਚ ਬਾਹਰੀ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਨੂੰ ਇੰਪੋਰਟ ਕਰਦੇ ਸਮੇਂ `defer` ਦੀ ਵਰਤੋਂ ਕਰੋ। ਤੁਸੀਂ `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 ਦੇ ਪਹਿਲੇ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਹਰ ਪੌਦੇ ਦੀ ਚਿੱਤਰ ਨੂੰ ਵਿਅਕਤੀਗਤ Ids ਦਿੱਤੇ ਸਨ (`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` ਇਵੈਂਟ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ [web 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' ਇਵੈਂਟ ਕਿਵੇਂ ਕੈਪਚਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਵੈਂਟ ਵਿੱਚ ਖੋਜ ਕਰੋ ਕਿ ਇੱਕ ਪੌਇੰਟਰ ਡਾਊਨ ਇਵੈਂਟ ਦੁਆਰਾ ਕਿੰਨੀ ਜਾਣਕਾਰੀ ਇਕੱਠੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ!
|
|
|
|
ਅਗਲੇ, ਧਿਆਨ ਦਿਓ ਕਿ ਸਥਾਨਕ ਵੈਰੀਏਬਲ `pos3` ਅਤੇ `pos4` ਨੂੰ e.clientX 'ਤੇ ਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਤੁਸੀਂ ਇੰਸਪੈਕਸ਼ਨ ਪੈਨ ਵਿੱਚ `e` ਮੁੱਲਾਂ ਨੂੰ ਲੱਭ ਸਕਦੇ ਹੋ। ਇਹ ਮੁੱਲ ਪੌਦੇ ਦੇ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਇਸ 'ਤੇ ਕਲਿੱਕ ਜਾਂ ਟੱਚ ਕਰਦੇ ਹੋ। ਤੁਹਾਨੂੰ ਪੌਦਿਆਂ ਦੇ ਵਿਹਾਰ 'ਤੇ ਜਦੋਂ ਤੁਸੀਂ ਕਲਿੱਕ ਅਤੇ ਖਿੱਚਦੇ ਹੋ ਤਾਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਕੰਟਰੋਲ ਦੀ ਲੋੜ ਹੋਵੇਗੀ, ਇਸ ਲਈ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਦੇ ਕੋਆਰਡੀਨੇਟ ਦਾ ਟ੍ਰੈਕ ਰੱਖਦੇ ਹੋ।
|
|
|
|
✅ ਕੀ ਇਹ ਹੋਰ ਸਪਸ਼ਟ ਹੋ ਰਿਹਾ ਹੈ ਕਿ ਇਹ ਸਾਰਾ ਐਪ ਇੱਕ ਵੱਡੇ ਕਲੋਜ਼ਰ ਨਾਲ ਕਿਉਂ ਬਣਾਇਆ ਗਿਆ ਹੈ? ਜੇਕਰ ਇਹ ਨਹੀਂ ਹੁੰਦਾ, ਤਾਂ ਤੁਸੀਂ 14 ਖਿੱਚਣ ਯੋਗ ਪੌਦਿਆਂ ਲਈ ਸਕੋਪ ਨੂੰ ਕਿਵੇਂ ਬਣਾਈ ਰੱਖਦੇ?
|
|
|
|
ਮੂਲ ਫੰਕਸ਼ਨ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ `pos4 = e.clientY` ਦੇ ਹੇਠਾਂ ਦੋ ਹੋਰ ਪੌਇੰਟਰ ਇਵੈਂਟ ਮੈਨਿਪੁਲੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```html
|
|
document.onpointermove = elementDrag;
|
|
document.onpointerup = stopElementDrag;
|
|
```
|
|
|
|
ਹੁਣ ਤੁਸੀਂ ਦਰਸਾ ਰਹੇ ਹੋ ਕਿ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਪੌਇੰਟਰ ਦੇ ਨਾਲ ਖਿੱਚਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਅਤੇ ਖਿੱਚਣ ਦੀ ਜੇਸਚਰ ਨੂੰ ਰੋਕਣ ਲਈ ਜਦੋਂ ਤੁਸੀਂ ਪੌਦੇ ਨੂੰ ਡੀਸੈਲੇਕਟ ਕਰਦੇ ਹੋ। `onpointermove` ਅਤੇ `onpointerup` `onpointerdown` ਦੇ ਸਮੇ API ਦੇ ਹਿੱਸੇ ਹਨ। ਇੰਟਰਫੇਸ ਹੁਣ ਗਲਤੀਆਂ ਸੁੱਟੇਗਾ ਕਿਉਂਕਿ ਤੁਸੀਂ ਅਜੇ ਤੱਕ `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` ਨਾਲ ਵੀ ਇਹੀ ਕਾਰਵਾਈ ਕਰਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ `pos3` ਅਤੇ `pos4` ਨੂੰ ਤੱਤ ਦੇ ਨਵੇਂ X ਅਤੇ Y ਕੋਆਰਡੀਨੇਟ 'ਤੇ ਦੁਬਾਰਾ ਸੈਟ ਕਰਦੇ ਹੋ। ਜਦੋਂ ਤੁਸੀਂ ਖਿੱਚਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਕਨਸੋਲ ਵਿੱਚ ਇਹ ਬਦਲਾਅ ਦੇਖ ਸਕਦੇ ਹੋ। ਫਿਰ, ਤੁਸੀਂ ਪੌਦੇ ਦੇ css ਸਟਾਈਲ ਨੂੰ ਮੈਨ
|
|
|
|
---
|
|
|
|
**ਅਸਵੀਕਰਤਾ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |