` disappear when we click it. +Tilføj JavaScript til `button` for at gøre `

` usynlig når vi klikker på den. -The demo: +Demo: [iframe border=1 src="solution" height=80] diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md index cded5b622..b8fbb4242 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md @@ -1,5 +1,5 @@ -Can use `this` in the handler to reference "the element itself" here: +Du kan her bruge `this` i handleren til at referere til "elementet selv": ```html run height=50 - + ``` diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md index 9ee8f18e1..61fa90f54 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Hide self +# Skjul dig selv -Create a button that hides itself on click. +Opret en knap, der skjuler sig selv ved klik. ```online -Like this: - +Som dette: + ``` diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md index d569f0e4d..e9b9bebb0 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md @@ -1,8 +1,8 @@ -The answer: `1` and `2`. +Svaret er `1` og `2`. -The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function. +Den første handler afvikles, fordi den ikke er blevet fjernet af `removeEventListener`. For at fjerne handleren skal vi overføre præcis den funktion, der var tildelt. Og i koden bliver en ny funktion overført, som ser den samme ud, men er stadig en anden funktion. -To remove a function object, we need to store a reference to it, like this: +For at fjerne et funktionsobjekt, skal vi gemme en reference til det, sådan her: ```js function handler() { @@ -13,4 +13,4 @@ button.addEventListener("click", handler); button.removeEventListener("click", handler); ``` -The handler `button.onclick` works independently and in addition to `addEventListener`. +Handleren `button.onclick` virker uafhængigt og i tilføjelse til `addEventListener`. diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md index f8cd75d5a..d9ea489b9 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Which handlers run? +# Hvilken handler vil blive afviklet? -There's a button in the variable. There are no handlers on it. +Der er et element i variablen (en knap). Der er ingen handlers på den. -Which handlers run on click after the following code? Which alerts show up? +Hvilke handlers afvikles ved klik efter følgende kode? Hvilke alerts vises? ```js no-beautify button.addEventListener("click", () => alert("1")); diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index b04cb8231..f59799c45 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -1,11 +1,11 @@ -First we need to choose a method of positioning the ball. +Først skal vi vælge en metode til at positionere bolden. -We can't use `position:fixed` for it, because scrolling the page would move the ball from the field. +Vi kan ikke bruge `position:fixed` til det, fordi scrolling af siden ville flytte bolden fra plænen. -So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned. +Så vi bør bruge `position:absolute` og, for at gøre positioneringen virkelig solid, give selve `field` en `position`. -Then the ball will be positioned relatively to the field: +På den måde vil bolden blive positioneret relativt til plænen: ```css #field { @@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field: #ball { position: absolute; - left: 0; /* relative to the closest positioned ancestor (field) */ + left: 0; /* relativt til den nærmeste positionerede forælder (field) */ top: 0; - transition: 1s all; /* CSS animation for left/top makes the ball fly */ + transition: 1s all; /* CSS animation for left/top får bolden til at bevæge sig */ } ``` -Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now. +Derefter skal vi tildele de korrekte `ball.style.left/top`. De indeholder nu koordinater relative til plænen. -Here's the picture: +Her er et billede: ![](move-ball-coords.svg) -We have `event.clientX/clientY` -- window-relative coordinates of the click. +Vi har `event.clientX/clientY` -- koordinater relativt til vinduet. -To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width: +For at få et field-relativt `left` koordinat, kan vi trække fields venstre side og border tykkelse fra: ```js let left = event.clientX - fieldCoords.left - field.clientLeft; ``` -Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor. +Normalt betyder `ball.style.left` den "venstre kant af et element" (bolden). Så hvis vi tildeler den `left`, så vil det være boldens venstre side og ikke center der vil være under musemarkøren. -We need to move the ball half-width left and half-height up to make it center. +Vi skal flytte den halve bredde af bolden til venstre og den halve højde op for at centrere den. -So the final `left` would be: +Så den endelige `left` vil være: ```js let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2; ``` -The vertical coordinate is calculated using the same logic. +Den samme logik bruges til at beregne den lodrette koordinat. -Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS. +Bemærk, at boldens bredde/højde skal være kendt på det tidspunkt, hvor vi tilgår `ball.offsetWidth`. Den skal angives i HTML eller CSS. diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html index 3ebe8739e..dea7d5d8a 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html @@ -1,75 +1,69 @@ - + - - - - - - - - - Click on a field to move the ball there. -
- - -

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . -

- - - - + + + + + Klik på plænen for at flytte bolden derhen. +
+ +

+ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . +

+ + + diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html index 34f9c88ae..0e876d953 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html @@ -16,8 +16,8 @@ - Click on a field to move the ball there. -
The ball should never leave the field. + Klik på plænen for at flytte bolden derhen. +
Bolden må ikke forlade plænen.

diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md index d5269147a..a6264c6d8 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md @@ -2,20 +2,20 @@ importance: 5 --- -# Move the ball across the field +# Flyt bolden hen over plænen -Move the ball across the field to a click. Like this: +Flyt bolden hen over plænen til det sted der klikkes. Som dette: [iframe src="solution" height="260" link] -Requirements: +Krav: -- The ball center should come exactly under the pointer on click (if possible without crossing the field edge). -- CSS-animation is welcome. -- The ball must not cross field boundaries. -- When the page is scrolled, nothing should break. +- Boldens center skal være det sted der klikkes (hvis muligt uden at lande uden for plænen). +- CSS-animationer er velkomne. +- Bolden må ikke lande uden for plænen. +- Når siden scrolles, skal det stadig virke. -Notes: +Note: -- The code should also work with different ball and field sizes, not be bound to any fixed values. -- Use properties `event.clientX/event.clientY` for click coordinates. +- Koden skal kunne virke ved forskellige bold- og plæne-størrelser og må ikke være bundet til faste værdier. +- Brug egenskaberne `event.clientX/event.clientY` for klik-koordinater. diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md index 7554a2f09..6448559e8 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md @@ -1,47 +1,47 @@ # HTML/CSS -First let's create HTML/CSS. +Lad os først oprette HTML/CSS. -A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element. +En menu er at selvstændigt element på side, så det bør puttes i sit eget DOM-element. -A list of menu items can be laid out as a list `ul/li`. +En liste at menupunkter kan opstilles som en liste `ul/li`. Here's the example structure: ```html ``` -We use `` for the title, because `

` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width. +Vi bruger `` til titlen fordi `

` har en implicit `display:block` på det, og det vil optage 100% af den horisontale bredde. -Like this: +Sådan her: ```html autorun height=50 -

Sweeties (click me)!

Søde sager (klik her)!

``` -So if we set `onclick` on it, then it will catch clicks to the right of the text. +Så hvis vi sætter et `onclick` på det, så vil det også opfange klik til højre for teksten. -As `` has an implicit `display: inline`, it occupies exactly enough place to fit all the text: +Da `` har en implicit `display: inline`, optager det kun den plads, der er nødvendig for at rumme hele teksten: ```html autorun height=50 -Sweeties (click me)! +Søde sager (klik her)! ``` -# Toggling the menu +# Toggling af menu -Toggling the menu should change the arrow and show/hide the menu list. +Toggling af menu bør ændre pilen og vise/skjule menu-listen. -All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`. +Alle disse ændringer håndteres perfekt af CSS. I JavaScript skal vi justere den tilstand menuen er i ved at tilføje eller fjerne klassen `.open`. -Without it, the menu will be closed: +Uden den vil menuen være uden den vil menuen være lukket: ```css .menu ul { @@ -58,7 +58,7 @@ Without it, the menu will be closed: } ``` -...And with `.open` the arrow changes and the list shows up: +... og med `.open` vil pilen ændres og listen vises: ```css .menu.open .title::before { diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html index 0c1996a7e..49835e622 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.view/index.html @@ -1,57 +1,53 @@ - + - - - - - - - - - - - - - + + + + + + + + + + diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html index 03dded0cd..388877970 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/source.view/index.html @@ -1,16 +1,14 @@ - + - - - - - - ▶ ▼ Sweeties (click me)! -

Cake
Donut
Honey

- - + + + + + ▶ ▼ Søde sager (klik her)! +

Kage
Donut
Honning

+ diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md index 34c313710..15a29eda6 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md +++ b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md @@ -2,10 +2,12 @@ importance: 5 --- -# Create a sliding menu +# Opret en sliding menu -Create a menu that opens/collapses on click: +Opret en menu, der åbner/skjuler ved klik: [iframe border=1 height=100 src="solution"] -P.S. HTML/CSS of the source document is to be modified. +PS. Du skal også ændre HTML/CSS i dokumentet for at løse opgaven. + + diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md index 022a0d977..0b2ae110c 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md @@ -1,12 +1,12 @@ -To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours. +For at tilføje knappen kan vi enten bruge `position:absolute` (og gøre panelet `position:relative`) eller `float:right`. Fordelen ved `float:right` er at knappen aldrig overlapper teksten, men `position:absolute` giver mere frihed. Så valget er dit. -Then for each pane the code can be like: +Koden for hvert panel kan se således ud: ```js pane.insertAdjacentHTML("afterbegin", ''); ``` -Then the ` - - - The button code (may need to adjust CSS): - - -

Horse

The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.

Donkey

The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.

Hest

Hesten er en af to nulevende underarter af Equus ferus. Det er et oddetået hovdyr, der tilhører den taksonomiske familie af hestefamilien. Hesten har udviklet sig i løbet af de sidste 45 til 55 millioner år fra et lille væsen med mange tåer, Eohippus, til det store, entåede dyr, vi har i dag.

Æsel

Æslet eller æslet (Equus africanus asinus) er et domesticeret medlem af hestefamilien, Equidae. Æslets vilde forfader er det afrikanske vildæsel, E. africanus. Æslet har været brugt som arbejdsdyr i mindst 5000 år.

Kat

Huskatten (latin: Felis catus) er et lille, typisk loddent, kødædende pattedyr. De kaldes ofte huskatte, når de holdes som kæledyr, eller blot katte, når der ikke er behov for at skelne dem fra andre kattedyr. Katte værdsættes ofte af mennesker for deres selskab og for deres evne til at jage skadedyr.

Cat

The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin. -

- - + diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md index 152cf41fe..d0e01def2 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Add a closing button +# Tilføj en lukkeknap -There's a list of messages. +Der er en liste af beskeder. -Use JavaScript to add a closing button to the right-upper corner of each message. +Brug nu JavaScript til at tilføje en lukkeknap til højre i hjørnet af hver besked. -The result should look like this: +Resultatet skal se sådan ud: [iframe src="solution" height=450] diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md index 1c6b52cea..6c2b95390 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md @@ -1,17 +1,17 @@ -The images ribbon can be represented as `ul/li` list of images ``. +Billederne i båndet kan repræsenteres som en `ul/li` liste af billeder ``. -Normally, such a ribbon is wide, but we put a fixed-size `

` around to "cut" it, so that only a part of the ribbon is visible: +Normalt vil sådan et bånd være meget bredt, men vi putter en fast størrelse `

` omkring for at "beskære" det, så det kun er en del af båndet der er synligt: ![](carousel1.svg) -To make the list show horizontally we need to apply correct CSS properties for `

`, like `display: inline-block`. +For at vise listen vandret, kan vi anvende CSS-egenskaber for `

`, som f.eks. `display: inline-block`. -For `` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it. +For `` bør vi også justere `display`, fordi standard er `inline`. Der er afsat ekstra plads under `inline`-elementer til "underliggere" (bogstaver der går under grundlinjen). Med `display:block` fjerner vi den plads. -To do the scrolling, we can shift `

` has a fixed width, so "extra" images are cut. +Den ydre `

` har en fast bredde, så "ekstra" billeder bliver beskåret. -The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `

` and style things inside it. +Hele karrusellen er en selvstændig "grafisk komponent" på siden, så vi bør pakke den ind i en enkelt `

` og style tingene inden for den. diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html index baf867664..53bd4ec88 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html @@ -27,7 +27,7 @@

diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md index a6adbffa5..9f2f57c20 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md @@ -2,12 +2,12 @@ importance: 4 --- -# Carousel +# Karrusel -Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows. +Opret en "karrusel" -- et bånd af billeder, der kan scrolles ved at klikke på pile. [iframe height=200 src="solution"] -Later we can add more features to it: infinite scrolling, dynamic loading etc. +Senere kan vi tilføje flere funktioner: uendelig scrolling, dynamisk indlæsning osv. -P.S. For this task HTML/CSS structure is actually 90% of the solution. +PS. I denne opgave er HTML/CSS-strukturen faktisk 90% af løsningen. diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md index 4eca222aa..f9ee96452 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -1,98 +1,96 @@ -# Introduction to browser events +# Introduktion til browser events -*An event* is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM). - -Here's a list of the most useful DOM events, just to take a look at: +*En event* (på dansk en hændelse)er en signal, der indikerer, at noget er sket. Alle DOM-noder genererer sådanne signaler (men events er ikke begrænset til DOM). +Her er en liste over et par af de mere nyttige DOM-events, bare så du får en fornemmelse af, hvad der er muligt.: **Mouse events:** -- `click` -- when the mouse clicks on an element (touchscreen devices generate it on a tap). -- `contextmenu` -- when the mouse right-clicks on an element. -- `mouseover` / `mouseout` -- when the mouse cursor comes over / leaves an element. -- `mousedown` / `mouseup` -- when the mouse button is pressed / released over an element. -- `mousemove` -- when the mouse is moved. +- `click` -- når musen klikker på et element (ved touchskærme er det når der trykkes på skærmen). +- `contextmenu` -- når musen højreklikker på et element. +- `mouseover` / `mouseout` -- når musen peger over / forlader et element. +- `mousedown` / `mouseup` -- når museknappen trykkes / frigives over et element. +- `mousemove` -- når musen bevæges. **Keyboard events:** -- `keydown` and `keyup` -- when a keyboard key is pressed and released. +- `keydown` and `keyup` -- når en tast på tastaturet trykkes og frigives. **Form element events:** -- `submit` -- when the visitor submits a `

`. -- `focus` -- when the visitor focuses on an element, e.g. on an ``. +- `submit` -- når besøgende indsender et ``. +- `focus` -- når besøgende fokuserer på et element, f.eks. på et ``. **Document events:** -- `DOMContentLoaded` -- when the HTML is loaded and processed, DOM is fully built. +- `DOMContentLoaded` -- når HTML er hentet og processeret, DOM er færdigbygget. **CSS events:** -- `transitionend` -- when a CSS-animation finishes. - -There are many other events. We'll get into more details of particular events in upcoming chapters. +- `transitionend` -- når en CSS-animation er færdig. -## Event handlers +Der er mange andre events. Vi vil dække dem i detaljer i de kommende kapitler. -To react on events we can assign a *handler* -- a function that runs in case of an event. +## Event-håndtering -Handlers are a way to run JavaScript code in case of user actions. +Til at reagere på events kan vi tildele en *handler* -- en funktion, der kører i tilfælde af en event. -There are several ways to assign a handler. Let's see them, starting from the simplest one. +Handlers er en måde at køre JavaScript-kode der reagerer på system- eller brugerhandlinger. -### HTML-attribute +Der er flere måder at tildele en handler. Lad os se nærmere på dem, begyndende med den mest simple. +### HTML-attribut -A handler can be set in HTML with an attribute named `on`. +En handler kan sættes direkte i HTML ved med en attribut kaldet `on`. -For instance, to assign a `click` handler for an `input`, we can use `onclick`, like here: +For eksempel, for at tildele en `click` handler til et `input`, kan vi bruge `onclick`, som her: ```html run - + ``` -On mouse click, the code inside `onclick` runs. +Når musen klikker på elementet, kører koden inden i `onclick`. -Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we forget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Click!")"`, then it won't work right. +Bemærk, at inde i `onclick` bruger vi enkelt anførelsestegn, fordi attributten selv er i dobbelte anførelsestegn. Hvis vi glemmer, at koden er inde i attributten og bruger dobbelte anførelsestegn inde, som dette: `onclick="alert("Click!")"`, så vil det ikke virke korrekt. -An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there. +En HTML-attribut er ikke et praktisk sted at skrive meget kode, så vi bør oprette en JavaScript-funktion og kalde den der. -Here a click runs the function `countRabbits()`: +Her vil et klik køre funktionen kaldet `countRabbits()`: ```html autorun height=50 - + ``` -As we know, HTML attribute names are not case-sensitive, so `ONCLICK` works as well as `onClick` and `onCLICK`... But usually attributes are lowercased: `onclick`. +Som vi ved så er HTML-attributter ikke case-sensitive, så `ONCLICK` virker lige så godt som `onClick` og `onCLICK`... Men ofte er attributter i små bogstaver: `onclick`. -### DOM property +### DOM egenskaber -We can assign a handler using a DOM property `on`. +Vi kan tildele en handler ved hjælp af en DOM-egenskab `on`. -For instance, `elem.onclick`: +For eksempel, `elem.onclick`: ```html autorun - + ``` -If the handler is assigned using an HTML-attribute then the browser reads it, creates a new function from the attribute content and writes it to the DOM property. +Hvis en handler tildeles ved hjælp af en HTML-attribut, så læser browseren den, opretter en ny funktion fra attributindholdet og skriver den om til en DOM-egenskab. -So this way is actually the same as the previous one. +Så denne måde er faktisk den samme som den forrige. -These two code pieces work the same: +Disse to stykker kode virker ens: -1. Only HTML: +1. Kun HTML: ```html autorun height=50 - + ``` 2. HTML + JS: @@ -101,156 +99,155 @@ These two code pieces work the same: ``` -In the first example, the HTML attribute is used to initialize the `button.onclick`, while in the second example -- the script, that's all the difference. +I det første eksempel bruges HTML-attributten til at initialisere `button.onclick`, mens det i det andet eksempel er selve scriptet ... grundklæggende ingen forskel. -**As there's only one `onclick` property, we can't assign more than one event handler.** +**Da der kun er en `onclick`-egenskab, kan vi ikke tildele mere end én eventhandler.** -In the example below adding a handler with JavaScript overwrites the existing handler: +I eksemplet nedenfor overskriver tildelelsen af en handler med JavaScript den eksisterende handler: ```html run height=50 autorun - + ``` -To remove a handler -- assign `elem.onclick = null`. +For at fjerne en handler -- tildel elementet `elem.onclick = null`. -## Accessing the element: this +## Tilgå elementet: this -The value of `this` inside a handler is the element. The one which has the handler on it. +Værdien af `this` inde i en handler er elementet. Det element, som har handleren på sig. -In the code below `button` shows its contents using `this.innerHTML`: +I koden nedenfor viser `button` sit indhold ved hjælp af `this.innerHTML`: ```html height=50 autorun - + ``` -## Possible mistakes +## Mulige fejl -If you're starting to work with events -- please note some subtleties. +Når du starter med at arbejde med events så er der små detaljer der er værd at have i baghovedet. -We can set an existing function as a handler: +Vi kan sætte en eksisterende funktion som en handler: ```js function sayThanks() { - alert('Thanks!'); + alert('Tak!'); } elem.onclick = sayThanks; ``` -But be careful: the function should be assigned as `sayThanks`, not `sayThanks()`. +Men vær forsigtig: funktionen skal tildeles som `sayThanks`, ikke `sayThanks()`. ```js -// right +// rigtigt button.onclick = sayThanks; -// wrong +// forkert button.onclick = sayThanks(); ``` -If we add parentheses, then `sayThanks()` becomes a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work. +Hvis vi tilføjer paranteser, så bliver `sayThanks()` til et funktionskald. Så den sidste linje tager faktisk *resultatet* af funktionskaldet, som er `undefined` (da funktionen ikke returnerer noget), og tildeler det til `onclick`. Det virker ikke. -...On the other hand, in the markup we do need the parentheses: +...Modsat så behøver vi paranteser i markup'en: ```html ``` -The difference is easy to explain. When the browser reads the attribute, it creates a handler function with body from the attribute content. +Forskellen er relativ simpel. Når browseren læser attributten, opretter den en handlerfunktion hvor kroppen er indholdet fra attributten. -So the markup generates this property: +Så markup'en genererer denne egenskab: ```js button.onclick = function() { *!* - sayThanks(); // <-- the attribute content goes here + sayThanks(); // <-- attributtens indhold placeres her */!* }; ``` -**Don't use `setAttribute` for handlers.** +**Brug ikke `setAttribute` til handlere.** -Such a call won't work: +Et kald som dette vil ikke virke: ```js run no-beautify -// a click on will generate errors, -// because attributes are always strings, function becomes a string +// et klik på vil generere fejl, +// fordi attributter altid er strenge, bliver function til en streng document.body.setAttribute('onclick', function() { alert(1) }); ``` -**DOM-property case matters.** +**DOM-egenskaber kigger efter store og små bogstaver.** -Assign a handler to `elem.onclick`, not `elem.ONCLICK`, because DOM properties are case-sensitive. +Tildel en handler til `elem.onclick`, ikke `elem.ONCLICK`, fordi DOM-egenskaber er case-sensitive. ## addEventListener -The fundamental problem of the aforementioned ways to assign handlers is that we *can't assign multiple handlers to one event*. - -Let's say, one part of our code wants to highlight a button on click, and another one wants to show a message on the same click. +Et grundlæggende problem med de ovenstående måder at tildele handlere er, at vi *ikke kan tildele flere handlere til en begivenhed*. -We'd like to assign two event handlers for that. But a new DOM property will overwrite the existing one: +Lad os sige, at en del af vores kode vil ønske at fremhæve en knap ved klik, og en anden vil ønske at vise en besked på samme klik. +Vi vil gerne tildele to event-handlere for det. Men en ny DOM-egenskab vil overskrive den eksisterende: ```js no-beautify input.onclick = function() { alert(1); } // ... -input.onclick = function() { alert(2); } // replaces the previous handler +input.onclick = function() { alert(2); } // erstatter den forrige handler ``` -Developers of web standards understood that long ago and suggested an alternative way of managing handlers using the special methods `addEventListener` and `removeEventListener` which aren't bound by such constraint. +Udviklere af web standarden forstod dette for lang tid siden og foreslog en alternative måde at håndtere handlere ved hjælp af de specielle metoder `addEventListener` og `removeEventListener`, som ikke er bundet af denne begrænsning. -The syntax to add a handler: +Syntaksen for at tilføje en handler er: ```js element.addEventListener(event, handler, [options]); ``` `event` -: Event name, e.g. `"click"`. +: Navn på begivenheden, f.eks. `"click"`. `handler` -: The handler function. +: Handlerfunktionen. `options` -: An additional optional object with properties: - - `once`: if `true`, then the listener is automatically removed after it triggers. - - `capture`: the phase where to handle the event, to be covered later in the chapter . For historical reasons, `options` can also be `false/true`, that's the same as `{capture: false/true}`. - - `passive`: if `true`, then the handler will not call `preventDefault()`, we'll explain that later in . +: Et objekt der kan indeholde yderligere valgfrie egenskaber: + - `once`: hvis `true`, vil listeneren automatisk fjernes efter den udløses. + - `capture`: den *fase* der skal håndtere hændelsen. Dette bliver dækket senere i kapitlet . Af historiske grunde kan `options` også sættes til `false/true`, der betyder det samme som `{capture: false|true}`. + - `passive`: hvis `true`, vil handleren ikke kalde `preventDefault()`. Det forklares senere i . -To remove the handler, use `removeEventListener`: +For at fjerne en handler, brug `removeEventListener`: ```js element.removeEventListener(event, handler, [options]); ``` -````warn header="Removal requires the same function" -To remove a handler we should pass exactly the same function as was assigned. +````warn header="Fjernelse kræver den samme funktion" +For at fjerne en handler skal vi overføre nøjagtigt den samme funktion, som blev tildelt. -This doesn't work: +Dette virker ikke: ```js no-beautify -elem.addEventListener( "click" , () => alert('Thanks!')); +elem.addEventListener( "click" , () => alert('Tak!')); // .... -elem.removeEventListener( "click", () => alert('Thanks!')); +elem.removeEventListener( "click", () => alert('Tak!')); ``` -The handler won't be removed, because `removeEventListener` gets another function -- with the same code, but that doesn't matter, as it's a different function object. +Denne handler vil ikke blive fjernet, fordi `removeEventListener` får en anden anonym funktion -- med den samme kode. Det spiller ingen rolle, da funktionen er et andet objekt. -Here's the right way: +Her er den rigtige måde: ```js function handler() { - alert( 'Thanks!' ); + alert( 'Tak!' ); } input.addEventListener("click", handler); @@ -258,112 +255,112 @@ input.addEventListener("click", handler); input.removeEventListener("click", handler); ``` -Please note -- if we don't store the function in a variable, then we can't remove it. There's no way to "read back" handlers assigned by `addEventListener`. +Bemærk venligt -- hvis vi ikke gemmer funktionen i en variabel så kan vi ikke fjerne den. Der er ikke nogen mulighed for at "trække en handler ud" af et element der har fået den tildelt med `addEventListener`. ```` -Multiple calls to `addEventListener` allow it to add multiple handlers, like this: +Flere kald til `addEventListener` tillader os at tilføje flere handlere, som her: ```html run no-beautify - + ``` -As we can see in the example above, we can set handlers *both* using a DOM-property and `addEventListener`. But generally we use only one of these ways. +Som det fremgår af eksemplet ovenfor, kan vi sætte handlere *både* ved hjælp af en DOM-egenskab og `addEventListener`. Men generelt bruger vi kun én af metoderne. -````warn header="For some events, handlers only work with `addEventListener`" -There exist events that can't be assigned via a DOM-property. Only with `addEventListener`. +````warn header="For nogle events, vil handlere kun virke med `addEventListener`" +Der findes events der ikke kan tildeles via en DOM-egenskab. Kun med `addEventListener`. -For instance, the `DOMContentLoaded` event, that triggers when the document is loaded and the DOM has been built. +For eksempel eventen `DOMContentLoaded`, der affyres når documentet er hentet og DOM-træet er bygget færdigt. ```js -// will never run +// vil aldrig køre document.onDOMContentLoaded = function() { - alert("DOM built"); + alert("DOM er klar"); }; ``` ```js -// this way it works +// denne måde virker document.addEventListener("DOMContentLoaded", function() { - alert("DOM built"); + alert("DOM er klar"); }); ``` -So `addEventListener` is more universal. Although, such events are an exception rather than the rule. +Så `addEventListener` er mere universiel ... selvom sådanne event mere er undtagelsen end reglen. ```` -## Event object +## Event objekt -To properly handle an event we'd want to know more about what's happened. Not just a "click" or a "keydown", but what were the pointer coordinates? Which key was pressed? And so on. +For at kunne håndtere en event ordentligt skal vi vide mere om, hvad der er sket. Informationen "click" eller "keydown" er sjældent nok. Vi har ofte også brug for information om, hvilket koordinat musen havde eller hvilken tast der blev trykket på, etc. -When an event happens, the browser creates an *event object*, puts details into it and passes it as an argument to the handler. +Når en event sker så opretter browseren et *event objekt*, putter detaljer ind i det og sender det som et argument til handleren. -Here's an example of getting pointer coordinates from the event object: +Her er et eksempel på, hvordan man henter musemarkørens koordinater fra event objektet: ```html run - + ``` -Some properties of `event` object: +Et par gængse egenskaber for `event` objekt er: `event.type` -: Event type, here it's `"click"`. +: Typen af event. Her er det `"click"`. `event.currentTarget` -: Element that handled the event. That's exactly the same as `this`, unless the handler is an arrow function, or its `this` is bound to something else, then we can get the element from `event.currentTarget`. +: Elementet som håndterede eventet. Det er præcis det samme som `this`, medmindre handleren er en arrow function, eller dens `this` er bundet til noget andet, så kan vi altid få elementet fra `event.currentTarget`. `event.clientX` / `event.clientY` -: Window-relative coordinates of the cursor, for pointer events. +: Koordinater for musemarkøren (og andre pege-events) relativt til vinduet. -There are more properties. Many of them depend on the event type: keyboard events have one set of properties, pointer events - another one, we'll study them later when as we move on to the details of different events. +Der er mange andre egenskaber. Mange af dem er afhængige af event typen: keyboard events har ét sæt af egenskaber, pointer events har andre. Vi kigger nærmere på de forskellige egenskaber, når vi undersøger dem enkeltvis. -````smart header="The event object is also available in HTML handlers" -If we assign a handler in HTML, we can also use the `event` object, like this: +````smart header="Event objektet er også tilgængeligt i HTML handlere" +Hvis vi tildeler en handler i HTML, kan vi også bruge `event` objektet sådan her: ```html autorun height=60 ``` -That's possible because when the browser reads the attribute, it creates a handler like this: `function(event) { alert(event.type) }`. That is: its first argument is called `"event"`, and the body is taken from the attribute. +Dette er muligt fordi browseren læser attributten og opretter et handler objekt: `function(event) { alert(event.type) }`. Det betyder: dets første argument kaldes `"event"` og indholdet bliver taget fra attributten. ```` -## Object handlers: handleEvent +## Object handlere: handleEvent -We can assign not just a function, but an object as an event handler using `addEventListener`. When an event occurs, its `handleEvent` method is called. +Vi kan tildele andet end funktioner med `addEventListener` - det kan også være et objekt. Når en event sker, kaldes dens `handleEvent` metode. -For instance: +For eksempel, her er et objekt der håndterer en `click` event: ```html run - + ``` -As we can see, when `addEventListener` receives an object as the handler, it calls `obj.handleEvent(event)` in case of an event. +Som vi kan se, når `addEventListener` modtager et objekt som handler, kalder det `obj.handleEvent(event)` i tilfælde af en event. -We could also use objects of a custom class, like this: +Vi kunne også bruge objekter af en brugerdefineret klasse, som dette: ```html run - + ``` -Here the same object handles both events. Please note that we need to explicitly setup the events to listen using `addEventListener`. The `menu` object only gets `mousedown` and `mouseup` here, not any other types of events. +Her håndterer det samme objekt begge evens. Bemærk, at vi stadig er nødt til at sætte alle listeners med `addEventListener`. Objektet `menu` giver os kun `mousedown` og `mouseup` her - ikke enhver type af events. -The method `handleEvent` does not have to do all the job by itself. It can call other event-specific methods instead, like this: +Metoden `handleEvent` behøver ikke at gøre alt arbejdet selv. Den kan kalde andre event-specifikke metoder i stedet, som dette: ```html run - + ``` -Now event handlers are clearly separated, that may be easier to support. +Nu er event handlere klart adskilt på en måde der er nemmere at vedligeholde. -## Summary +## Opsummering -There are 3 ways to assign event handlers: +Der er 3 måder at tildele event handlere: -1. HTML attribute: `onclick="..."`. -2. DOM property: `elem.onclick = function`. -3. Methods: `elem.addEventListener(event, handler[, phase])` to add, `removeEventListener` to remove. +1. HTML attribut: `onclick="..."`. +2. DOM egenskab: `elem.onclick = function`. +3. Metoderne: `elem.addEventListener(event, handler[, phase])` til at tilføje, og `removeEventListener` til at fjerne. -HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there. +HTML attributer bruges sjældent fordi JavaScript midt inde i et HTML tag ikke er god skik. Vi kan heller ikke skrive meget kode i forbindelse med hændelsen. -DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing. +DOM egenskaber er ok at bruge, men vi kan ikke tildele mere end én handler af den pågældende event. I mange tilfælde er denne begrænsning ikke kritisk. -The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transitionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event. +Den sidste måde er den mest fleksible, men den er også den længste at skrive. Der er få events, der kun virker med denne måde, for eksempel `transitionend` og `DOMContentLoaded` (forklares i et senere kapitel). `addEventListener` understøtter også objekter som event handlere. I det tilfælde kaldes metoden `handleEvent` i tilfælde af eventen. -No matter how you assign the handler -- it gets an event object as the first argument. That object contains the details about what's happened. +Lige meget hvordan du tildeler en handler får det et event-objekt som det første argument. Objektet indeholder detaljer om hvad der er sket. -We'll learn more about events in general and about different types of events in the next chapters. +Vi lærer mere om events i det hele tag og om forskellige typer af events i de næste kapitler. diff --git a/2-ui/2-events/index.md b/2-ui/2-events/index.md index f4996083c..0b7823400 100644 --- a/2-ui/2-events/index.md +++ b/2-ui/2-events/index.md @@ -1,3 +1,3 @@ -# Introduction to Events +# Introduktion til Events -An introduction to browser events, event properties and handling patterns. +En introduktion til browser events, eventegenskaber og mønstre til håndtering af events.