diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md index 0507832f3..db03368ab 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/solution.md @@ -4,15 +4,15 @@ -
Choose the genre
+
Vælg en genre
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md index 4cdf231b0..c4ae970d9 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md @@ -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 -
Choose the genre
+
Vælg en genre
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md index 726be4c8f..e114d4854 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md @@ -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'); @@ -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); diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html index 4209a5f34..7fd2f7593 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html +++ b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.view/index.html @@ -2,7 +2,7 @@ - The list: + Listen: ``` -The result should be: +Resultatet skal være som her: [iframe border=1 height=180 src="solution"] diff --git a/2-ui/1-document/06-dom-attributes-and-properties/article.md b/2-ui/1-document/06-dom-attributes-and-properties/article.md index b02f626dc..54520ecf4 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/article.md +++ b/2-ui/1-document/06-dom-attributes-and-properties/article.md @@ -1,150 +1,150 @@ -# Attributes and properties +# Attributter og egenskaber -When the browser loads the page, it "reads" (another word: "parses") the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects. +Når en browser henter en side, læser den (et andet ord: "parser") HTML'en og genererer DOM-objekter ud fra dem. For elementnoder bliver de fleste standard HTML-attributter automatisk til egenskaber for DOM-objekterne. -For instance, if the tag is ``, then the DOM object has `body.id="page"`. +For eksempel, hvis tagget er ``, så har DOM-objektet `body.id="page"`. -But the attribute-property mapping is not one-to-one! In this chapter we'll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different. +Men forholdet mellem attributter og egenskaber er ikke en-til-en! I dette kapitel vil vi fokusere på at adskille disse to koncepter, for at se, hvordan man arbejder med dem, når de er de samme, og når de er forskellige. -## DOM properties +## DOM egenskaber -We've already seen built-in DOM properties. There are a lot. But technically no one limits us, and if there aren't enough, we can add our own. +Vi har allerede set det indbyggede DOM egenskaber - der er mange. Men teknisk set er der ingen begrænsninger for os. Hvis der ikke er nok, kan vi oprette vores egne. -DOM nodes are regular JavaScript objects. We can alter them. +DOM noder er regulære JavaScript objekter. Vi kan ændre dem. -For instance, let's create a new property in `document.body`: +For eksempel, lad os oprette en ny egenskab i `document.body`: ```js run document.body.myData = { - name: 'Caesar', - title: 'Imperator' + name: 'Cæsar', + title: 'Kejser' }; -alert(document.body.myData.title); // Imperator +alert(document.body.myData.title); // Kejser ``` -We can add a method as well: +Vi kan også tilføje en metode: ```js run document.body.sayTagName = function() { alert(this.tagName); }; -document.body.sayTagName(); // BODY (the value of "this" in the method is document.body) +document.body.sayTagName(); // BODY (værdien af "this" i metoden er document.body) ``` -We can also modify built-in prototypes like `Element.prototype` and add new methods to all elements: +Vi kan også modificere indbyggede prototyper som `Element.prototype` og tilføje nye metoder til alle elementer: ```js run Element.prototype.sayHi = function() { - alert(`Hello, I'm ${this.tagName}`); + alert(`Hej, Jeg er ${this.tagName}!`); }; -document.documentElement.sayHi(); // Hello, I'm HTML -document.body.sayHi(); // Hello, I'm BODY +document.documentElement.sayHi(); // Hej, Jeg er HTML! +document.body.sayHi(); // Hej, Jeg er BODY! ``` -So, DOM properties and methods behave just like those of regular JavaScript objects: +Så, DOM egenskaber og metoder er de samme som regulære JavaScript objekter. -- They can have any value. -- They are case-sensitive (write `elem.nodeType`, not `elem.NoDeTyPe`). +- De kan have hvilken som helst værdi. +- De er case-sensitive (på dansk versalfølsomme, men det er der ingen der siger) (skriv `elem.nodeType`, ikke `elem.NoDeTyPe`). -## HTML attributes +## HTML attributter -In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them. +I HTML kan tags have attributter. Når browseren parser HTML'en for at oprette DOM-objekter for tags, genkender den *standard* attributter og opretter DOM-egenskaber ud fra dem. -So when an element has `id` or another *standard* attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard. +Så når et element har `id` eller en anden *standard* attribut, oprettes den tilsvarende egenskab. Men det sker ikke, hvis attributten *ikke er standard*. -For instance: +For eksempel: ```html run - + ``` -Please note that a standard attribute for one element can be unknown for another one. For instance, `"type"` is standard for `` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), but not for `` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Standard attributes are described in the specification for the corresponding element class. +Bemærk at en standard attribut for et element kan være ukendt for et andet element. For eksempel er `"type"` standard for `` ([HTMLInputElement](https://html.spec.whatwg.org/#htmlinputelement)), men ikke for `` ([HTMLBodyElement](https://html.spec.whatwg.org/#htmlbodyelement)). Standard attributter er beskrevet i specifikationen for den tilsvarende elementklasse. -Here we can see it: +Det kan vi se her: ```html run ``` -So, if an attribute is non-standard, there won't be a DOM-property for it. Is there a way to access such attributes? +Så, hvis en attribut ikke er standard for elementet oprettes der ikke en DOM egenskab. Men, er der så en måde at tilgå sådanne attributter? -Sure. All attributes are accessible by using the following methods: +Det er der! Alle attributter er tilgængelige ved hjælp af følgende metoder: -- `elem.hasAttribute(name)` -- checks for existence. -- `elem.getAttribute(name)` -- gets the value. -- `elem.setAttribute(name, value)` -- sets the value. -- `elem.removeAttribute(name)` -- removes the attribute. +- `elem.hasAttribute(name)` -- tjekker for eksistens. +- `elem.getAttribute(name)` -- henter værdien. +- `elem.setAttribute(name, value)` -- sætter værdien. +- `elem.removeAttribute(name)` -- fjerner attributten. -These methods operate exactly with what's written in HTML. +Disse metoder arbejder præcis med det, der er skrevet i HTML. -Also one can read all attributes using `elem.attributes`: a collection of objects that belong to a built-in [Attr](https://dom.spec.whatwg.org/#attr) class, with `name` and `value` properties. +Man kan også læse alle attributter ved hjælp af `elem.attributes`: en samling af objekter, der tilhører en indbygget [Attr](https://dom.spec.whatwg.org/#attr) klasse, med `name` og `value` egenskaber. -Here's a demo of reading a non-standard property: +Her er en demonstration af læsning af en ikke-standard egenskab: ```html run - + ``` -HTML attributes have the following features: +HTML attributter har følgende egenskaber: -- Their name is case-insensitive (`id` is same as `ID`). -- Their values are always strings. +- Deres navne er ikke case-sensitive (`id` er set samme som `ID`). +- Deres værdi er altid strenge. -Here's an extended demo of working with attributes: +Her er en udvidet demonstration af arbejde med attributter: ```html run -
+
``` -Please note: +Bemærk: -1. `getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive. -2. We can assign anything to an attribute, but it becomes a string. So here we have `"123"` as the value. -3. All attributes including ones that we set are visible in `outerHTML`. -4. The `attributes` collection is iterable and has all the attributes of the element (standard and non-standard) as objects with `name` and `value` properties. +1. `getAttribute('About')` -- det første bogstav er stort, og i HTML er alle bogstaverne små. Men det er lige meget: attributnavne er ikke case-sensitive. +2. Vi kan tildele hvad som helst til en attribut, men det bliver til en streng. Så her har vi `"123"` som værdien. +3. Alle attributter, også dem vi selv sæltter, er synlige i `outerHTML`. +4. Samlingen `attributes` er itererbar og har alle attributter for elementet (standard og ikke-standard) som objekter med `name` og `value` egenskaber. -## Property-attribute synchronization +## Egenskab-attribut synkronisering -When a standard attribute changes, the corresponding property is auto-updated, and (with some exceptions) vice versa. +Når en standard attribut ændres, opdateres den tilsvarende egenskab automatisk, og (med nogle undtagelser) vice versa. -In the example below `id` is modified as an attribute, and we can see the property changed too. And then the same backwards: +I eksemplet herunder ændres `id` som attribut, og vi kan se at egenskaben også ændres. Og det samme sker den anden vej: ```html run @@ -152,17 +152,17 @@ In the example below `id` is modified as an attribute, and we can see the proper ``` -But there are exclusions, for instance `input.value` synchronizes only from attribute -> property, but not back: +Men der er undtagelser, for eksempel synkroniserer `input.value` kun fra attribut til egenskab og ikke den anden vej rundt: ```html run @@ -170,41 +170,41 @@ But there are exclusions, for instance `input.value` synchronizes only from attr ``` -In the example above: -- Changing the attribute `value` updates the property. -- But the property change does not affect the attribute. +I eksemplet ovenfor: +- Ændring af attributten `value` opdaterer egenskaben. +- Men ændring af egenskaben påvirker ikke attributten. -That "feature" may actually come in handy, because the user actions may lead to `value` changes, and then after them, if we want to recover the "original" value from HTML, it's in the attribute. +Denne "feature" kan faktisk være nyttig, fordi brugerhandlinger kan føre til `value`-ændringer, og derefter, hvis vi vil gendanne den "originale" værdi fra HTML, er den i attributten. -## DOM properties are typed +## DOM egenskaber er en bestemt type -DOM properties are not always strings. For instance, the `input.checked` property (for checkboxes) is a boolean: +DOM egenskaber er ikke altid strenge. For eksempel er egenskaben `input.checked` (for afkrydsningsbokse) boolesk: ```html run checkbox ``` -There are other examples. The `style` attribute is a string, but the `style` property is an object: +Der er andre eksempler. Attributten `style` er en streng, men egenskaben `style` er et objekt: ```html run -
Hello
+
Hej
``` -Most properties are strings though. +De fleste egenskaber er dog strenge. -Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the `href` DOM property is always a *full* URL, even if the attribute contains a relative URL or just a `#hash`. +I sjældne tilfælde kan de adskille sig fra attributten, selvom en DOM-egenskabens type er en streng. For eksempel er `href`-egenskaben altid en *fuld* URL, selv hvis attributten indeholder en relativ URL eller kun en `#hash`. -Here's an example: +Her er et eksempel: ```html height=30 run link ``` -If we need the value of `href` or any other attribute exactly as written in the HTML, we can use `getAttribute`. +Hvis vi har brug for værdien af `href` eller en anden attribut præcis som den er skrevet i HTML, kan vi bruge metoden `getAttribute`. -## Non-standard attributes, dataset +## Ikke-standard attributter, dataset -When writing HTML, we use a lot of standard attributes. But what about non-standard, custom ones? First, let's see whether they are useful or not? What for? +Når vi skriver HTML, bruger vi mange standard attributter. Men hvad med ikke-standard, brugerdefinerede attributter? Lad os først se på om de overhovedet er brugbare eller ej. Hvad kan de bruges til? -Sometimes non-standard attributes are used to pass custom data from HTML to JavaScript, or to "mark" HTML-elements for JavaScript. +Nogle gange bruges ikke-standard attributter til at sende brugerdefinerede data fra HTML til JavaScript, eller til at "markere" HTML-elementer for JavaScript. -Like this: +Sådan her: ```html run - +
- +
``` -Also they can be used to style an element. +De kan også bruges til at style et element. -For instance, here for the order state the attribute `order-state` is used: +For eksempel opdateres en ordres status med attributten `order-state`: ```html run
- A new order. + En ny ordre.
- A pending order. + En ventende ordre.
- A canceled order. + En annulleret ordre.
``` -Why would using an attribute be preferable to having classes like `.order-state-new`, `.order-state-pending`, `.order-state-canceled`? +HVorfor vil en attribut være at foretrække frem for en klasse i stil med `.order-state-new`, `.order-state-pending`, `.order-state-canceled`? -Because an attribute is more convenient to manage. The state can be changed as easy as: +Fordi en attribut er mere praktisk at håndtere. Tilstanden kan ændres lige så let som: ```js -// a bit simpler than removing old/adding a new class +// en smule mere simpelt end at slette og tilføje en ny klasse div.setAttribute('order-state', 'canceled'); ``` -But there may be a possible problem with custom attributes. What if we use a non-standard attribute for our purposes and later the standard introduces it and makes it do something? The HTML language is alive, it grows, and more attributes appear to suit the needs of developers. There may be unexpected effects in such case. +Men, der kan være mulige problemer med brugerdefinerede attributter. Hvad hvis vi bruger ikke-standard attributter i vores projekt, men standarden senere introducere samme attribut? HTML sproget er levende, det gror og flere attributter vil komme for at tilfredsstille udvikleres behov. Det kan derfor føre til uventede resultater. -To avoid conflicts, there exist [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes. +For at undgå den slags konflikter, findes [data-*](https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes) attributter. -**All attributes starting with "data-" are reserved for programmers' use. They are available in the `dataset` property.** +**Alle attributter der starter med "data-" er reserveret til brug for programører. De er tilgængelige i egenskaben `dataset`.** -For instance, if an `elem` has an attribute named `"data-about"`, it's available as `elem.dataset.about`. +For eksempel, hvis et `elem` har en attribut med navnet `"data-about"`, er den tilgængelig som `elem.dataset.about`. -Like this: +Sådan her: ```html run - + ``` -Multiword attributes like `data-order-state` become camel-cased: `dataset.orderState`. +Attributter med flere ord som `data-order-state` bliver til camel-cased: `dataset.orderState`. -Here's a rewritten "order state" example: +Her er et omskrevet eksempel af ordretilstanden, der bruger `data-*` attributter: ```html run
- A new order. + En ny ordre.
``` -Using `data-*` attributes is a valid, safe way to pass custom data. +Brugen af `data-*` attributter er en valid og sikker måde at overføre brugerdefinerede data. -Please note that we can not only read, but also modify data-attributes. Then CSS updates the view accordingly: in the example above the last line `(*)` changes the color to blue. +Bemærk, at vi ikke kun kan læse data-attributter, vi kan også modificere dem. Derefter vil CSS opdatere skærmen: I eksemplet vil den sidste linje `(*)` ændre farven til blå. -## Summary +## Opsummering -- Attributes -- is what's written in HTML. -- Properties -- is what's in DOM objects. +- Attributter -- er det der skrives i HTML. +- Egenskaber -- er det der er i DOM-objekter. -A small comparison: +En lille sammenligning: | | Properties | Attributes | |------------|------------|------------| -|Type|Any value, standard properties have types described in the spec|A string| -|Name|Name is case-sensitive|Name is not case-sensitive| +|Type|Alle værdier, standard egenskaber har deres type beskrevet i specifikationen|En streng| +|Navn|case-sensitiv|ikke case-sensitiv| -Methods to work with attributes are: +Metoder til at arbejde med attributter er: -- `elem.hasAttribute(name)` -- to check for existence. -- `elem.getAttribute(name)` -- to get the value. -- `elem.setAttribute(name, value)` -- to set the value. -- `elem.removeAttribute(name)` -- to remove the attribute. -- `elem.attributes` is a collection of all attributes. +- `elem.hasAttribute(name)` -- for at tjekke om attributten eksisterer. +- `elem.getAttribute(name)` -- for at få værdien af en attribut. +- `elem.setAttribute(name, value)` -- for at sætte værdien af en attribut. +- `elem.removeAttribute(name)` -- for at fjerne et attribut. +- `elem.attributes` er en samling af attributter på et element. -For most situations using DOM properties is preferable. We should refer to attributes only when DOM properties do not suit us, when we need exactly attributes, for instance: +I de fleste situationer er det bedre at bruge DOM-egenskaber. Vi bør kun henvise til attributter, når DOM-egenskaber ikke passer med det vil vil opnå. Altså, situationer hvor vi har brug for det præcise indhold af en attribut, for eksempel: -- We need a non-standard attribute. But if it starts with `data-`, then we should use `dataset`. -- We want to read the value "as written" in HTML. The value of the DOM property may be different, for instance the `href` property is always a full URL, and we may want to get the "original" value. +- Vi har brug for en oprettet ikke-standard attribut. Men hvis den starter med `data-`, så bør vi bruge `dataset`. +- Vi vil læse værdien "som den er skrevet" i HTML. Værdien af DOM-egenskaben kan være anderledes, for eksempel `href`-egenskaben er altid en fuld URL, og vi kan ønske at få "original" værdi.