From efc9c6659ab9614237349a47178f07ab650c788d Mon Sep 17 00:00:00 2001 From: sagit2002 Date: Thu, 12 Mar 2020 19:00:58 +0530 Subject: [PATCH] Translated multiple files --- 2-ui/1-document/02-dom-nodes/elk.html | 6 +- .../4-select-diagonal-cells/solution.md | 2 +- .../4-select-diagonal-cells/task.md | 10 +- 2-ui/1-document/03-dom-navigation/article.md | 199 +++++++++--------- 4 files changed, 107 insertions(+), 110 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/elk.html b/2-ui/1-document/02-dom-nodes/elk.html index dc5d65f54..4c80412ce 100644 --- a/2-ui/1-document/02-dom-nodes/elk.html +++ b/2-ui/1-document/02-dom-nodes/elk.html @@ -1,11 +1,11 @@ - The truth about elk. + ਐਲਕ ਬਾਰੇ ਸੱਚਾਈ.
    -
  1. An elk is a smart
    2. +
  2. ਏਲਕ ਚੁਸਤ ਹੈ
    3. -
  3. ...and cunning animal!
    4. +
  4. ...ਅਤੇ ਚਲਾਕ ਜਾਨਵਰ!
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md index f2aa86302..f51eea693 100644 --- a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md +++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md @@ -1 +1 @@ -We'll be using `rows` and `cells` properties to access diagonal table cells. +ਅਸੀਂ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ `rows` ਅਤੇ `cells` properties ਡੀਗੋਨਲ ਟੇਬਲ ਸੈੱਲਾਂ ਤਕ ਪਹੁੰਚਣ ਲਈ. diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md index 23be59fc1..344f50633 100644 --- a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md +++ b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Select all diagonal cells +# ਸਾਰੇ ਵਿਕਰਣ ਸੈੱਲਾਂ ਦੀ ਚੋਣ ਕਰੋ -Write the code to paint all diagonal table cells in red. +ਸਾਰੇ ਡਿਗੋਨਲ ਟੇਬਲ ਸੈੱਲਸ ਨੂੰ ਲਾਲ ਰੰਗਣ ਲਈ ਕੋਡ ਲਿਖੋ. -You'll need to get all diagonal `` from the `` and paint them using the code: +ਤੁਹਾਨੂੰ ਸਾਰੇ ਡਿਗੋਨਲ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ `
` ਤੋਂ `` ਤੱਕ ਅਤੇ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਨ੍ਹਾਂ ਨੂੰ ਪੇਂਟ ਕਰੋ: ```js -// td should be the reference to the table cell +// td ਟੇਬਲ ਸੈੱਲ ਦਾ ਹਵਾਲਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ td.style.backgroundColor = 'red'; ``` -The result should be: +ਨਤੀਜਾ ਇਹ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ: [iframe src="solution" height=180] diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 332f57827..3c68ab060 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -5,37 +5,36 @@ libs: --- -# Walking the DOM +# ਡੋਮ ਨੂੰ ਤੁਰਨਾ -The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object. +DOM ਸਾਨੂੰ ਤੱਤ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਮੱਗਰੀ ਨਾਲ ਕੁਝ ਵੀ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਪਰ ਪਹਿਲਾਂ ਸਾਨੂੰ ਸੰਬੰਧਿਤ DOM ਆਬਜੈਕਟ ਤੱਕ ਪਹੁੰਚਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ. -All operations on the DOM start with the `document` object. That's the main "entry point" to DOM. From it we can access any node. - -Here's a picture of links that allow for travel between DOM nodes: +DOM ਤੇ ਸਾਰੇ ਕਾਰਜ `document` ਇਕਾਈ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ. ਇਹ DOM ਦਾ ਮੁੱਖ "ਪ੍ਰਵੇਸ਼ ਬਿੰਦੂ" ਹੈ. ਇਸ ਤੋਂ ਅਸੀਂ ਕਿਸੇ ਵੀ ਨੋਡ ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹਾਂ. +ਲਿੰਕ ਦੀ ਇੱਕ ਤਸਵੀਰ ਇਹ ਹੈ ਜੋ ਡੋਮ ਨੋਡਾਂ ਵਿਚਕਾਰ ਯਾਤਰਾ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ: ![](dom-links.svg) -Let's discuss them in more detail. +ਆਓ ਉਨ੍ਹਾਂ ਬਾਰੇ ਵਧੇਰੇ ਵਿਸਥਾਰ ਨਾਲ ਵਿਚਾਰ ਕਰੀਏ. -## On top: documentElement and body +## ਸਿਖਰ 'ਤੇ: documentElement ਅਤੇ body -The topmost tree nodes are available directly as `document` properties: +ਸਿਖਰ ਦੇ tree ਨੋਡ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਉਪਲਬਧ ਹਨ `document` ਪਰੋਪੇਰਟਿਸ ਦੇ ਰੂਪ ਵਿੱਚ:: `` = `document.documentElement` -: The topmost document node is `document.documentElement`. That's the DOM node of the `` tag. +: ਸਭ ਤੋਂ ਪੈਹਲਾ ਦਸਤਾਵੇਜ਼ ਨੋਡ ਹੈ `document.documentElement`. ਉਹ `` ਟੈਗ ਦਾ ਡੋਮ ਨੋਡ ਹੈ. `` = `document.body` -: Another widely used DOM node is the `` element -- `document.body`. +: ਇਕ ਹੋਰ ਵਿਆਪਕ ਤੌਰ ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਡੋਮ ਨੋਡ `>` ਐਲੀਮੈਂਟ ਹੈ -- `document.body`. `` = `document.head` -: The `` tag is available as `document.head`. +: `` ਟੈਗ ਇਸ ਤਰਾਂ ਉਪਲੱਬਧ ਹੈ `document.head`. -````warn header="There's a catch: `document.body` can be `null`" -A script cannot access an element that doesn't exist at the moment of running. +````warn header="ਇਕ ਕੈਚ ਹੈ: `document.body` ਹੋ ਸਕਦਾ ਹੈ`null`" +ਸਕ੍ਰਿਪਟ ਉਸ ਐਲੀਮੈਂਟ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚ ਸਕਦੀ ਜੋ ਚੱਲਣ ਦੇ ਸਮੇਂ ਮੌਜੂਦ ਨਹੀਂ ਹੈ. -In particular, if a script is inside ``, then `document.body` is unavailable, because the browser did not read it yet. +ਖ਼ਾਸਕਰ, ਜੇ ਕੋਈ ਸਕ੍ਰਿਪਟ `` ਦੇ ਅੰਦਰ ਹੈ, then `document.body` ਅਣਉਪਲਬਧ ਹੈ, ਕਿਉਂਕਿ ਬ੍ਰਾਜ਼ਰ ਨੇ ਹਾਲੇ ਇਸਨੂੰ ਨਹੀਂ ਪੜਿਆ. -So, in the example below the first `alert` shows `null`: +ਇਸ ਲਈ, ਪਹਿਲੇ ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਣ ਵਿੱਚ `alert` ਦਿਖੇਗਾ `null`: ```html run @@ -43,7 +42,7 @@ So, in the example below the first `alert` shows `null`: @@ -51,7 +50,7 @@ So, in the example below the first `alert` shows `null`: @@ -59,18 +58,18 @@ So, in the example below the first `alert` shows `null`: ``` ```` -```smart header="In the DOM world `null` means \"doesn't exist\"" -In the DOM, the `null` value means "doesn't exist" or "no such node". +```smart header="ਡੋਮ ਦੁਨੀਆ ਵਿਚ `null` ਦਾ ਮਤਲਬ ਹੈ \"ਮੌਜੂਦ ਨਹੀਂ ਹੈ\"" +ਡੋਮ ਵਿਚ, `null` ਦਾ ਅਰਥ ਹੈ "ਮੌਜੂਦ ਨਹੀਂ" ਜਾਂ "ਅਜਿਹਾ ਕੋਈ ਨੋਡ ਨਹੀਂ". ``` -## Children: childNodes, firstChild, lastChild +## ਬੱਚੇ: ਚਾਈਲਡਨੋਡਜ਼, ਫਸਟ ਚਾਈਲਡ, ਆਖਰੀ ਚਾਈਲਡ -There are two terms that we'll use from now on: +ਇੱਥੇ ਦੋ ਸ਼ਬਦ ਹਨ ਜੋ ਅਸੀਂ ਹੁਣ ਤੋਂ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ: -- **Child nodes (or children)** -- elements that are direct children. In other words, they are nested exactly in the given one. For instance, `` and `` are children of `` element. -- **Descendants** -- all elements that are nested in the given one, including children, their children and so on. +- **ਚਾਈਲਡ ਨੋਡ (ਜਾਂ ਬੱਚੇ) ** - ਉਹ ਐਲਿਮੈਂਟ ਜੋ ਸਿੱਧੇ ਬੱਚੇ ਹੁੰਦੇ ਹਨ. ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿਚ, ਉਹ ਇਕ ਦਿੱਤੇ ਅੰਦਰ ਬਿਲਕੁਲ ਬਸੇ ਹੋਏ ਹਨ. ਉਦਾਹਰਣ ਦੇ ਲਈ, `` ਅਤੇ `` ਬੱਚੇ ਹਨ `` ਐਲਿਮੈਂਟ ਦੇ . +- **ਔਲਾਦ** -- ਉਹ ਸਾਰੇ ਏਲੇਲਮੈਂਟ ਜੋ ਦਿੱਤੇ ਗਏ ਹਨ ਇੱਕ ਦੂਜੇ ਵਿੱਚ ਬੱਝੇ ਹੋਏ ਹਨ, ਸਮੇਤ ਬੱਚੇ, ਉਨ੍ਹਾਂ ਦੇ ਬੱਚੇ ਅਤੇ ਹੋਰ -For instance, here `` has children `
` and `
    ` (and few blank text nodes): +ਉਦਾਹਰਣ ਲਈ, ਇਥੇ `` ਬੱਚੇ ਹਨ `
    ` ਅਤੇ `
      ` (ਅਤੇ ਕੁਝ ਖਾਲੀ ਟੈਕਸਟ ਨੋਡ): ```html run @@ -86,11 +85,11 @@ For instance, here `` has children `
      ` and `
        ` (and few blank text ``` -...And descendants of `` are not only direct children `
        `, `
          ` but also more deeply nested elements, such as `
        • ` (a child of `
            `) and `` (a child of `
          • `) -- the entire subtree. +...ਅਤੇ `` ਦੇ ਵੰਸ਼ਜ `
            `, `
              ` ਹੀ ਸਿਰਫ ਸਿੱਧੇ ਬੱਚੇ ਨਹੀਂ ਹਨ ਪਰ ਹੋਰ ਵੀ ਡੂੰਘੇ ਬਝੈ ਐਲਿਮੈਂਟ, ਜਿਵੇ ਕੀ `
            • ` (ਦਾ ਇੱਕ ਬੱਚਾ`
                `) ਅਤੇ `` (ਦਾ ਇੱਕ ਬੱਚਾ `
              • `) -- ਸਾਰੀ ਸਬਟ੍ਰੀ. -**The `childNodes` collection lists all child nodes, including text nodes.** +**`ਚਾਈਲਡ ਨੋਡਸ` ਸੰਗ੍ਰਹਿ ਟੈਕਸਟ ਨੋਡਾਂ ਸਮੇਤ, ਸਾਰੇ ਚਿਲਡ ਨੋਡਾਂ ਦੀ ਸੂਚੀ ਹੈ.** -The example below shows children of `document.body`: +ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਣ `document.body` ਦੇ ਬੱਚਿਆਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ : ```html run @@ -110,67 +109,65 @@ The example below shows children of `document.body`: } */!* - ...more stuff... + ... ਹੋਰ ਚੀਜ਼ਾਂ ... ``` -Please note an interesting detail here. If we run the example above, the last element shown is ` ``` -The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html). +ਨਿਰਧਾਰਨ: [tabular data](https://html.spec.whatwg.org/multipage/tables.html). -There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms. +HTML ਫਾਰਮ ਲਈ ਅਤਿਰਿਕਤ ਨੇਵੀਗੇਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ. ਜਦੋਂ ਅਸੀਂ ਫਾਰਮਾਂ ਨਾਲ ਕੰਮ ਕਰਨਾ ਅਰੰਭ ਕਰਾਂਗੇ ਅਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਵੇਖਾਂਗੇ. -## Summary +## ਸਾਰ -Given a DOM node, we can go to its immediate neighbors using navigation properties. +ਇੱਕ ਡੋਮ ਨੋਡ ਦਿੱਤੇ ਜਾਣ ਤੇ, ਅਸੀਂ ਨੇਵੀਗੇਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਦੇ ਨਜ਼ਦੀਕੀ ਗੁਆਂਡੀਆਂ ਕੋਲ ਜਾ ਸਕਦੇ ਹਾਂ. -There are two main sets of them: +ਉਨ੍ਹਾਂ ਦੇ ਦੋ ਮੁੱਖ ਸਮੂਹ ਹਨ -- For all nodes: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`. -- For element nodes only: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`. +- ਸਾਰੇ ਨੋਡਾਂ ਲਈ: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`. +- ਸਿਰਫ ਐਲੀਮੈਂਟ ਨੋਡਜ਼ ਲਈ: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`. -Some types of DOM elements, e.g. tables, provide additional properties and collections to access their content. +ਕੁਝ ਕਿਸਮ ਦੇ DOM ਐਲਿਮੈਂਟਸ ਉਧਾਰਣ, ਟੇਬਲ, ਉਨ੍ਹਾਂ ਦੀ ਸਮਗਰੀ ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਲਈ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਸੰਗ੍ਰਹਿ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ.