Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Attributes and properties #294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ockley merged 1 commit into from
May 4, 2026
Merged

Attributes and properties #294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions 2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
<html>
<body>

<div data-widget-name="menu">Choose the genre</div>
<div data-widget-name="menu">Vælg en genre</div>

<script>
// getting it
// hent elementet
let elem = document.querySelector('[data-widget-name]');

// reading the value
// læs værdien
alert(elem.dataset.widgetName);
// or
// eller
alert(elem.getAttribute('data-widget-name'));
</script>
</body>
Expand Down
8 changes: 4 additions & 4 deletions 2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ importance: 5

---

# Get the attribute
# Hent attributten

Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
Skriv en kode der vælger elementet med attributten `data-widget-name` fra dokumentet og læser dens værdi.

```html run
<!DOCTYPE html>
<html>
<body>

<div data-widget-name="menu">Choose the genre</div>
<div data-widget-name="menu">Vælg en genre</div>

<script>
/* your code */
/* din kode */
</script>
</body>
</html>
Expand Down
20 changes: 10 additions & 10 deletions 2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

First, we need to find all external references.
Først skal vi finde alle eksterne referencer.

There are two ways.
Der er to måder.

The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
Den første er at finde alle links ved hjælp af `document.querySelectorAll('a')` og derefter filtrere ud, hvad vi har brug for:

```js
let links = document.querySelectorAll('a');
Expand All @@ -12,23 +12,23 @@ for (let link of links) {
*!*
let href = link.getAttribute('href');
*/!*
if (!href) continue; // no attribute
if (!href) continue; // ingen attribut

if (!href.includes('://')) continue; // no protocol
if (!href.includes('://')) continue; // ingen protokol

if (href.startsWith('http://internal.com')) continue; // internal
if (href.startsWith('http://internal.com')) continue; // intern

link.style.color = 'orange';
}
```

Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
Bemærk: vi bruger `link.getAttribute('href')`. ikke `link.href` fordi vi har brug for værdien fra HTML.

...Another, simpler way would be to add the checks to CSS selector:
... en anden, simplere måde vil være at tilføje vores tjek til CSS-vælgeren:

```js
// look for all links that have :// in href
// but href doesn't start with http://internal.com
// kig efter alle links der har :// i href
// men hvor href ikke starter med http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

Expand Down
2 changes: 1 addition & 1 deletion 2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<body>

<a name="list">The list:</a>
<a name="list">Listen:</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
Expand Down
4 changes: 2 additions & 2 deletions 2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<body>

<a name="list">The list:</a>
<a name="list">Listen:</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
Expand All @@ -13,7 +13,7 @@
</ul>

<script>
// ...your code...
// ...din kode...
</script>

</body>
Expand Down
16 changes: 8 additions & 8 deletions 2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ importance: 3

---

# Make external links orange
# Gør eksterne links orange

Make all external links orange by altering their `style` property.
Gør alle eksterne links orange ved at ændre deres `style`-egenskab.

A link is external if:
- Its `href` has `://` in it
- But doesn't start with `http://internal.com`.
Et link er eksternt hvis:
- Dets `href` har `://` i sig, og
- Det ikke starter med `http://internal.com`.

Example:
Eksempel:

```html run
<a name="list">the list</a>
Expand All @@ -24,12 +24,12 @@ Example:
</ul>

<script>
// setting style for a single link
// set style for et enkelt link
let link = document.querySelector('a');
link.style.color = 'orange';
</script>
```

The result should be:
Resultatet skal være som her:

[iframe border=1 height=180 src="solution"]
Loading