diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.da.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.da.png new file mode 100644 index 00000000..5ba438f4 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.da.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.el.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.el.png new file mode 100644 index 00000000..726ad467 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.el.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.id.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.id.png new file mode 100644 index 00000000..2c2c2aaf Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.id.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ms.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ms.png new file mode 100644 index 00000000..e46e8f6b Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ms.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.no.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.no.png new file mode 100644 index 00000000..34dadbc9 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.no.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.sv.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.sv.png new file mode 100644 index 00000000..99b8b33e Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.sv.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.th.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.th.png new file mode 100644 index 00000000..738d8267 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.th.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.vi.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.vi.png new file mode 100644 index 00000000..6c9b78f2 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.vi.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.da.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.da.png new file mode 100644 index 00000000..2bb6ac4d Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.da.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.el.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.el.png new file mode 100644 index 00000000..ead637b8 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.el.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.id.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.id.png new file mode 100644 index 00000000..c9721733 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.id.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ms.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ms.png new file mode 100644 index 00000000..b3381689 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ms.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.no.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.no.png new file mode 100644 index 00000000..2bfb1ffb Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.no.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.sv.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.sv.png new file mode 100644 index 00000000..b2b0fb86 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.sv.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.th.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.th.png new file mode 100644 index 00000000..0a83f772 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.th.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.vi.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.vi.png new file mode 100644 index 00000000..8eca6f0c Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.vi.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.da.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.da.png new file mode 100644 index 00000000..fdf7e04e Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.da.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.el.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.el.png new file mode 100644 index 00000000..38c0a257 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.el.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.id.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.id.png new file mode 100644 index 00000000..142ffdca Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.id.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ms.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ms.png new file mode 100644 index 00000000..bf24a570 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ms.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.no.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.no.png new file mode 100644 index 00000000..927f8236 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.no.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.sv.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.sv.png new file mode 100644 index 00000000..ac99c638 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.sv.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.th.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.th.png new file mode 100644 index 00000000..9a9074f6 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.th.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.vi.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.vi.png new file mode 100644 index 00000000..cdc5ced3 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.vi.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.da.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.da.png new file mode 100644 index 00000000..ab305aa3 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.da.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.el.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.el.png new file mode 100644 index 00000000..0b443407 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.el.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.id.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.id.png new file mode 100644 index 00000000..ec69b600 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.id.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ms.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ms.png new file mode 100644 index 00000000..e1ea54c6 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ms.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.no.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.no.png new file mode 100644 index 00000000..43666dc6 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.no.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.sv.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.sv.png new file mode 100644 index 00000000..80690e80 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.sv.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.th.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.th.png new file mode 100644 index 00000000..b11a1800 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.th.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.vi.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.vi.png new file mode 100644 index 00000000..cae2ed73 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.vi.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.da.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.da.png new file mode 100644 index 00000000..2ecfc77a Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.da.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.el.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.el.png new file mode 100644 index 00000000..72cc31af Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.el.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.id.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.id.png new file mode 100644 index 00000000..897fc71e Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.id.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ms.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ms.png new file mode 100644 index 00000000..e5ced953 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ms.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.no.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.no.png new file mode 100644 index 00000000..d3ee18da Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.no.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.sv.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.sv.png new file mode 100644 index 00000000..6b00a650 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.sv.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.th.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.th.png new file mode 100644 index 00000000..8442c949 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.th.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.vi.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.vi.png new file mode 100644 index 00000000..81c72bcf Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.vi.png differ diff --git a/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 9e1a15e0..a39acedb 100644 --- a/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,8 +1,8 @@ # JavaScript Grundlæggende: Datatyper -![JavaScript Grundlæggende - Datatyper](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.da.png) +![JavaScript Basics - Datatyper](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.da.png) > Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz før lektionen -[Quiz før lektionen](https://ff-quizzes.netlify.app/web/quiz/7) +[Quiz før lektionen](https://ff-quizzes.netlify.app/web/) Denne lektion dækker det grundlæggende i JavaScript, sproget der giver interaktivitet på nettet. @@ -26,15 +26,16 @@ Denne lektion dækker det grundlæggende i JavaScript, sproget der giver interak > 🎥 Klik på billederne ovenfor for videoer om variabler og datatyper Lad os starte med variabler og de datatyper, der fylder dem! + ## Variabler -Variabler gemmer værdier, der kan bruges og ændres gennem din kode. +Variabler gemmer værdier, som kan bruges og ændres i din kode. At oprette og **deklarere** en variabel har følgende syntaks **[nøgleord] [navn]**. Det består af to dele: - **Nøgleord**. Nøgleord kan være `let` eller `var`. -✅ Nøgleordet `let` blev introduceret i ES6 og giver din variabel en såkaldt _blokscope_. Det anbefales, at du bruger `let` frem for `var`. Vi vil dække blokscopes mere detaljeret i fremtidige dele. +✅ Nøgleordet `let` blev introduceret i ES6 og giver din variabel en såkaldt _blokscope_. Det anbefales, at du bruger `let` frem for `var`. Vi vil dække blokscope mere detaljeret i fremtidige dele. - **Variabelnavnet**, dette er et navn, du selv vælger. ### Opgave - arbejde med variabler @@ -53,7 +54,7 @@ At oprette og **deklarere** en variabel har følgende syntaks **[nøgleord] [nav myVariable = 123; ``` - > Bemærk: brugen af `=` i denne lektion betyder, at vi bruger en "tildelingsoperator", der bruges til at sætte en værdi til en variabel. Det angiver ikke lighed. + > Bemærk: brugen af `=` i denne lektion betyder, at vi bruger en "tildelingsoperator", som bruges til at sætte en værdi til en variabel. Det angiver ikke lighed. `myVariable` er nu blevet *initialiseret* med værdien 123. @@ -73,11 +74,11 @@ At oprette og **deklarere** en variabel har følgende syntaks **[nøgleord] [nav Når en variabel er deklareret, kan du ændre dens værdi på ethvert tidspunkt i din kode med operatoren `=` og den nye værdi. - ✅ Prøv det! Du kan skrive JavaScript direkte i din browser. Åbn et browservindue og navigér til Developer Tools. I konsollen finder du en prompt; skriv `let myVariable = 123`, tryk retur, og skriv derefter `myVariable`. Hvad sker der? Bemærk, du vil lære mere om disse begreber i efterfølgende lektioner. + ✅ Prøv det! Du kan skrive JavaScript direkte i din browser. Åbn et browservindue og navigér til Developer Tools. I konsollen finder du en prompt; skriv `let myVariable = 123`, tryk på return, og skriv derefter `myVariable`. Hvad sker der? Bemærk, du vil lære mere om disse begreber i efterfølgende lektioner. ## Konstanter -Deklaration og initialisering af en konstant følger de samme koncepter som en variabel, med undtagelse af nøgleordet `const`. Konstanter deklareres typisk med store bogstaver. +Deklaration og initialisering af en konstant følger de samme principper som en variabel, med undtagelse af nøgleordet `const`. Konstanter deklareres typisk med store bogstaver. ```javascript const MY_VARIABLE = 123; @@ -114,9 +115,9 @@ Konstanter ligner variabler, med to undtagelser: ## Datatyper -Variabler kan gemme mange forskellige typer værdier, som tal og tekst. Disse forskellige typer værdier er kendt som **datatyper**. Datatyper er en vigtig del af softwareudvikling, fordi de hjælper udviklere med at træffe beslutninger om, hvordan koden skal skrives, og hvordan softwaren skal køre. Desuden har nogle datatyper unikke funktioner, der hjælper med at transformere eller udtrække yderligere information fra en værdi. +Variabler kan gemme mange forskellige typer værdier, som tal og tekst. Disse forskellige typer værdier kaldes **datatyper**. Datatyper er en vigtig del af softwareudvikling, fordi de hjælper udviklere med at træffe beslutninger om, hvordan koden skal skrives, og hvordan softwaren skal fungere. Desuden har nogle datatyper unikke funktioner, der hjælper med at transformere eller udtrække yderligere information fra en værdi. -✅ Datatyper kaldes også JavaScript dataprimitiver, da de er de laveste niveau datatyper, der leveres af sproget. Der er 7 primitive datatyper: string, number, bigint, boolean, undefined, null og symbol. Tag et øjeblik til at visualisere, hvad hver af disse primitiver kan repræsentere. Hvad er en `zebra`? Hvad med `0`? `true`? +✅ Datatyper kaldes også JavaScript-dataprimitiver, da de er de mest grundlæggende datatyper, som sproget tilbyder. Der er 7 primitive datatyper: string, number, bigint, boolean, undefined, null og symbol. Tag et øjeblik til at visualisere, hvad hver af disse primitiver kan repræsentere. Hvad er en `zebra`? Hvad med `0`? `true`? ### Tal @@ -126,7 +127,7 @@ I det foregående afsnit var værdien af `myVariable` en tal-datatype. Variabler kan gemme alle typer tal, inklusive decimaler eller negative tal. Tal kan også bruges med aritmetiske operatorer, som dækkes i [næste afsnit](../../../../2-js-basics/1-data-types). -### Aritmetiske Operatorer +### Aritmetiske operatorer Der er flere typer operatorer, der kan bruges til at udføre aritmetiske funktioner, og nogle er listet her: @@ -150,11 +151,11 @@ Strings er sæt af tegn, der er placeret mellem enkelt- eller dobbeltanførselst Husk at bruge anførselstegn, når du skriver en string, ellers vil JavaScript antage, at det er et variabelnavn. -### Formatering af Strings +### Formatering af strings Strings er tekstuelle og vil kræve formatering fra tid til anden. -For at **konkatenere** to eller flere strings, eller sætte dem sammen, brug operatoren `+`. +For at **konkatenere** to eller flere strings, eller sætte dem sammen, bruges operatoren `+`. ```javascript let myString1 = "Hello"; @@ -168,7 +169,7 @@ myString1 + ", " + myString2 + "!"; //Hello, World! ✅ Hvorfor er `1 + 1 = 2` i JavaScript, men `'1' + '1' = 11?` Tænk over det. Hvad med `'1' + 1`? -**Template literals** er en anden måde at formatere strings på, undtagen i stedet for anførselstegn bruges backtick. Alt, der ikke er almindelig tekst, skal placeres inde i pladsholdere `${ }`. Dette inkluderer eventuelle variabler, der kan være strings. +**Template literals** er en anden måde at formatere strings på, bortset fra at der bruges backticks i stedet for anførselstegn. Alt, der ikke er almindelig tekst, skal placeres i placeholders `${ }`. Dette inkluderer eventuelle variabler, der kan være strings. ```javascript let myString1 = "Hello"; @@ -189,16 +190,16 @@ Booleans kan kun have to værdier: `true` eller `false`. Booleans kan hjælpe me - `let myTrueBool = true` - `let myFalseBool = false` -✅ En variabel kan betragtes som 'truthy', hvis den evalueres til en boolean `true`. Interessant nok er [alle værdier truthy, medmindre de er defineret som falsy](https://developer.mozilla.org/docs/Glossary/Truthy) i JavaScript. +✅ En variabel kan betragtes som 'truthy', hvis den evalueres til en boolean `true`. Interessant nok er [alle værdier i JavaScript truthy, medmindre de er defineret som falsy](https://developer.mozilla.org/docs/Glossary/Truthy). --- ## 🚀 Udfordring -JavaScript er berygtet for sine overraskende måder at håndtere datatyper på fra tid til anden. Undersøg lidt om disse 'gotchas'. For eksempel: case sensitivity kan drille! Prøv dette i din konsol: `let age = 1; let Age = 2; age == Age` (resulterer i `false` -- hvorfor?). Hvilke andre gotchas kan du finde? +JavaScript er berygtet for sine overraskende måder at håndtere datatyper på. Undersøg lidt om disse 'gotchas'. For eksempel: case sensitivity kan drille! Prøv dette i din konsol: `let age = 1; let Age = 2; age == Age` (resulterer i `false` -- hvorfor?). Hvilke andre gotchas kan du finde? ## Quiz efter lektionen -[Quiz efter lektionen](https://ff-quizzes.netlify.app/web/quiz/8) +[Quiz efter lektionen](https://ff-quizzes.netlify.app) ## Gennemgang & Selvstudie @@ -211,4 +212,4 @@ Tag et kig på [denne liste over JavaScript-øvelser](https://css-tricks.com/sni --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/2-js-basics/2-functions-methods/README.md b/translations/da/2-js-basics/2-functions-methods/README.md index 917554d9..ac3eb0ce 100644 --- a/translations/da/2-js-basics/2-functions-methods/README.md +++ b/translations/da/2-js-basics/2-functions-methods/README.md @@ -1,8 +1,8 @@ -# Opret et spil ved hjælp af events +# Oprettelse af et spil ved hjælp af events ## Quiz før forelæsning @@ -15,40 +15,40 @@ CO_OP_TRANSLATOR_METADATA: ## Event-drevet programmering -Når vi opretter en browserbaseret applikation, giver vi en grafisk brugergrænseflade (GUI) til brugeren, som de kan bruge til at interagere med det, vi har bygget. Den mest almindelige måde at interagere med browseren på er ved at klikke og skrive i forskellige elementer. Udfordringen, vi står over for som udviklere, er, at vi ikke ved, hvornår de vil udføre disse handlinger! +Når vi skaber en browserbaseret applikation, leverer vi en grafisk brugergrænseflade (GUI), som brugeren kan bruge til at interagere med det, vi har bygget. Den mest almindelige måde at interagere med browseren på er ved at klikke og skrive i forskellige elementer. Udfordringen som udvikler er, at vi ikke ved, hvornår de vil udføre disse handlinger! -[Event-drevet programmering](https://en.wikipedia.org/wiki/Event-driven_programming) er navnet på den type programmering, vi skal bruge for at oprette vores GUI. Hvis vi bryder denne sætning lidt ned, ser vi, at det centrale ord her er **event**. [Event](https://www.merriam-webster.com/dictionary/event), ifølge Merriam-Webster, er defineret som "noget, der sker". Dette beskriver vores situation perfekt. Vi ved, at noget vil ske, som vi ønsker at udføre kode som svar på, men vi ved ikke, hvornår det vil finde sted. +[Event-drevet programmering](https://en.wikipedia.org/wiki/Event-driven_programming) er navnet på den type programmering, vi skal bruge for at skabe vores GUI. Hvis vi bryder denne sætning lidt ned, ser vi, at kerneordet her er **event**. [Event](https://www.merriam-webster.com/dictionary/event), ifølge Merriam-Webster, defineres som "noget, der sker". Dette beskriver vores situation perfekt. Vi ved, at noget vil ske, som vi ønsker at udføre kode som svar på, men vi ved ikke, hvornår det vil finde sted. Måden, vi markerer en sektion af kode, vi ønsker at udføre, er ved at oprette en funktion. Når vi tænker på [procedureprogrammering](https://en.wikipedia.org/wiki/Procedural_programming), kaldes funktioner i en specifik rækkefølge. Det samme gælder for event-drevet programmering. Forskellen er **hvordan** funktionerne kaldes. For at håndtere events (knapklik, indtastning osv.) registrerer vi **event listeners**. En event listener er en funktion, der lytter efter, at en event opstår, og udfører noget som svar. Event listeners kan opdatere UI, foretage kald til serveren eller hvad der ellers skal gøres som svar på brugerens handling. Vi tilføjer en event listener ved at bruge [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) og angive en funktion, der skal udføres. -> **NOTE:** Det er værd at fremhæve, at der er mange måder at oprette event listeners på. Du kan bruge anonyme funktioner eller oprette navngivne. Du kan bruge forskellige genveje, som at indstille `click`-egenskaben eller bruge `addEventListener`. I vores øvelse vil vi fokusere på `addEventListener` og anonyme funktioner, da det sandsynligvis er den mest almindelige teknik, webudviklere bruger. Det er også den mest fleksible, da `addEventListener` fungerer for alle events, og event-navnet kan angives som en parameter. +> **NOTE:** Det er værd at fremhæve, at der er mange måder at oprette event listeners på. Du kan bruge anonyme funktioner eller oprette navngivne funktioner. Du kan bruge forskellige genveje, som at sætte `click`-egenskaben eller bruge `addEventListener`. I vores øvelse vil vi fokusere på `addEventListener` og anonyme funktioner, da det sandsynligvis er den mest almindelige teknik, webudviklere bruger. Det er også den mest fleksible, da `addEventListener` fungerer for alle events, og event-navnet kan angives som en parameter. ### Almindelige events -Der er [masser af events](https://developer.mozilla.org/docs/Web/Events), du kan lytte til, når du opretter en applikation. Grundlæggende hæver alt, hvad en bruger gør på en side, en event, hvilket giver dig stor magt til at sikre, at de får den oplevelse, du ønsker. Heldigvis vil du normalt kun have brug for en lille håndfuld events. Her er nogle almindelige (inklusive de to, vi vil bruge, når vi opretter vores spil): +Der er [mange events](https://developer.mozilla.org/docs/Web/Events) tilgængelige, som du kan lytte til, når du opretter en applikation. Grundlæggende udløser alt, hvad en bruger gør på en side, en event, hvilket giver dig stor magt til at sikre, at de får den oplevelse, du ønsker. Heldigvis har du normalt kun brug for en lille håndfuld events. Her er nogle almindelige (inklusive de to, vi vil bruge, når vi opretter vores spil): -- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Brugeren klikkede på noget, typisk en knap eller hyperlink -- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Brugeren klikkede med højre museknap +- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Brugeren klikkede på noget, typisk en knap eller et hyperlink +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Brugeren klikkede på højre museknap - [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Brugeren markerede noget tekst - [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Brugeren indtastede noget tekst -## Opret spillet +## Oprettelse af spillet -Vi skal oprette et spil for at udforske, hvordan events fungerer i JavaScript. Vores spil vil teste en spillers skrivefærdigheder, som er en af de mest undervurderede færdigheder, alle udviklere bør have. Vi bør alle øve os på at skrive! Den generelle flow af spillet vil se sådan ud: +Vi skal oprette et spil for at udforske, hvordan events fungerer i JavaScript. Vores spil vil teste en spillers skrivefærdigheder, som er en af de mest undervurderede færdigheder, alle udviklere bør have. Vi bør alle øve os i at skrive! Den generelle spilflow vil se sådan ud: - Spilleren klikker på startknappen og præsenteres for et citat, de skal skrive - Spilleren skriver citatet så hurtigt som muligt i en tekstboks - - Når hvert ord er færdigt, fremhæves det næste - - Hvis spilleren laver en tastefejl, opdateres tekstboksen til rød + - Når hvert ord er færdiggjort, fremhæves det næste + - Hvis spilleren laver en tastefejl, bliver tekstboksen rød - Når spilleren fuldfører citatet, vises en succesmeddelelse med den forløbne tid Lad os bygge vores spil og lære om events! ### Filstruktur -Vi skal bruge i alt tre filer: **index.html**, **script.js** og **style.css**. Lad os starte med at opsætte dem for at gøre livet lidt lettere for os. +Vi skal bruge i alt tre filer: **index.html**, **script.js** og **style.css**. Lad os starte med at sætte dem op for at gøre livet lidt lettere for os. - Opret en ny mappe til dit arbejde ved at åbne en konsol eller terminal og udføre følgende kommando: @@ -73,14 +73,14 @@ code . ## Opret brugergrænsefladen -Hvis vi undersøger kravene, ved vi, at vi skal bruge en håndfuld elementer på vores HTML-side. Dette er lidt som en opskrift, hvor vi har brug for nogle ingredienser: +Hvis vi ser på kravene, ved vi, at vi skal bruge en håndfuld elementer på vores HTML-side. Dette er lidt som en opskrift, hvor vi har brug for nogle ingredienser: - Et sted at vise citatet, som brugeren skal skrive - Et sted at vise meddelelser, som en succesmeddelelse - En tekstboks til indtastning - En startknap -Hvert af disse vil have brug for IDs, så vi kan arbejde med dem i vores JavaScript. Vi vil også tilføje referencer til de CSS- og JavaScript-filer, vi skal oprette. +Hvert af disse elementer skal have ID'er, så vi kan arbejde med dem i vores JavaScript. Vi tilføjer også referencer til de CSS- og JavaScript-filer, vi skal oprette. Opret en ny fil med navnet **index.html**. Tilføj følgende HTML: @@ -107,16 +107,16 @@ Opret en ny fil med navnet **index.html**. Tilføj følgende HTML: ### Start applikationen -Det er altid bedst at udvikle iterativt for at se, hvordan tingene ser ud. Lad os starte vores applikation. Der er en fantastisk udvidelse til Visual Studio Code kaldet [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), som både vil hoste din applikation lokalt og opdatere browseren hver gang du gemmer. +Det er altid bedst at udvikle iterativt for at se, hvordan tingene ser ud. Lad os starte vores applikation. Der er en fantastisk udvidelse til Visual Studio Code kaldet [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon), som både hoster din applikation lokalt og opdaterer browseren, hver gang du gemmer. - Installer [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) ved at følge linket og klikke på **Install** - - Du vil blive bedt om at åbne Visual Studio Code via browseren og derefter af Visual Studio Code om at udføre installationen + - Du vil blive bedt om at åbne Visual Studio Code via browseren og derefter udføre installationen i Visual Studio Code - Genstart Visual Studio Code, hvis det bliver bedt om det -- Når det er installeret, klik Ctrl-Shift-P (eller Cmd-Shift-P) i Visual Studio Code for at åbne kommandopaletten +- Når det er installeret, skal du i Visual Studio Code trykke på Ctrl-Shift-P (eller Cmd-Shift-P) for at åbne kommandopaletten - Skriv **Live Server: Open with Live Server** - Live Server vil begynde at hoste din applikation - Åbn en browser og naviger til **https://localhost:5500** -- Du bør nu se den side, du har oprettet! +- Du skulle nu kunne se den side, du har oprettet! Lad os tilføje noget funktionalitet. @@ -138,7 +138,7 @@ Opret en ny fil med navnet **style.css**, og tilføj følgende syntaks. } ``` -✅ Når det kommer til CSS, kan du layout din side, som du vil. Brug lidt tid på at gøre siden mere tiltalende: +✅ Når det kommer til CSS, kan du designe din side, som du vil. Brug lidt tid på at gøre siden mere tiltalende: - Vælg en anden skrifttype - Farvelæg overskrifterne @@ -146,24 +146,24 @@ Opret en ny fil med navnet **style.css**, og tilføj følgende syntaks. ## JavaScript -Med vores UI oprettet er det tid til at fokusere på JavaScript, som vil give logikken. Vi vil opdele dette i en håndfuld trin: +Med vores UI oprettet er det tid til at fokusere på JavaScript, som vil levere logikken. Vi vil opdele dette i en håndfuld trin: - [Opret konstanterne](../../../../4-typing-game/typing-game) - [Event listener til at starte spillet](../../../../4-typing-game/typing-game) - [Event listener til indtastning](../../../../4-typing-game/typing-game) -Men først, opret en ny fil med navnet **script.js**. +Men først skal du oprette en ny fil med navnet **script.js**. ### Tilføj konstanterne -Vi skal bruge nogle elementer for at gøre vores programmering lidt lettere. Igen, ligesom en opskrift, her er hvad vi skal bruge: +Vi skal bruge nogle elementer for at gøre vores programmering lettere. Igen, ligesom en opskrift, her er hvad vi skal bruge: -- Array med listen over alle citater -- Tomt array til at gemme alle ordene for det aktuelle citat -- Plads til at gemme indekset for det ord, spilleren aktuelt skriver -- Tiden, spilleren klikkede på start +- En array med listen over alle citater +- En tom array til at gemme alle ordene for det aktuelle citat +- Et sted til at gemme indekset for det ord, spilleren aktuelt skriver +- Tiden, hvor spilleren klikkede på start -Vi vil også have referencer til UI-elementerne: +Vi skal også have referencer til UI-elementerne: - Tekstboksen (**typed-value**) - Citatvisningen (**quote**) @@ -194,9 +194,9 @@ const typedValueElement = document.getElementById('typed-value'); ✅ Tilføj flere citater til dit spil -> **NOTE:** Vi kan hente elementerne, når vi vil i koden, ved at bruge `document.getElementById`. Fordi vi regelmæssigt vil referere til disse elementer, undgår vi tastefejl med strenglitteraler ved at bruge konstanter. Frameworks som [Vue.js](https://vuejs.org/) eller [React](https://reactjs.org/) kan hjælpe dig med bedre at centralisere din kode. +> **NOTE:** Vi kan hente elementerne, når som helst vi vil i koden, ved at bruge `document.getElementById`. Fordi vi ofte vil referere til disse elementer, undgår vi tastefejl med strenglitteraler ved at bruge konstanter. Frameworks som [Vue.js](https://vuejs.org/) eller [React](https://reactjs.org/) kan hjælpe dig med bedre at centralisere din kode. -Tag et øjeblik til at se en video om brugen af `const`, `let` og `var` +Tag et øjeblik til at se en video om brugen af `const`, `let` og `var`. [![Typer af variabler](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Typer af variabler") @@ -204,9 +204,9 @@ Tag et øjeblik til at se en video om brugen af `const`, `let` og `var` ### Tilføj startlogik -For at starte spillet vil spilleren klikke på start. Selvfølgelig ved vi ikke, hvornår de vil klikke på start. Dette er, hvor en [event listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) kommer i spil. En event listener giver os mulighed for at lytte efter, at noget sker (en event) og udføre kode som svar. I vores tilfælde ønsker vi at udføre kode, når brugeren klikker på start. +For at starte spillet vil spilleren klikke på start. Selvfølgelig ved vi ikke, hvornår de vil klikke på start. Dette er, hvor en [event listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) kommer i spil. En event listener giver os mulighed for at lytte efter, at noget sker (en event), og udføre kode som svar. I vores tilfælde ønsker vi at udføre kode, når brugeren klikker på start. -Når brugeren klikker på **start**, skal vi vælge et citat, opsætte brugergrænsefladen og opsætte sporing for det aktuelle ord og timing. Nedenfor er den JavaScript, du skal tilføje; vi diskuterer det lige efter scriptblokken. +Når brugeren klikker på **start**, skal vi vælge et citat, opsætte brugergrænsefladen og opsætte sporing for det aktuelle ord og tidtagning. Nedenfor er den JavaScript, du skal tilføje; vi diskuterer det lige efter scriptblokken. ```javascript // at the end of script.js @@ -245,23 +245,23 @@ Lad os bryde koden ned! - Opsætning af ordsporing - Brug af [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) og [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) giver os mulighed for tilfældigt at vælge et citat fra `quotes`-arrayet - - Vi konverterer `quote` til et array af `words`, så vi kan spore det ord, spilleren aktuelt skriver + - Vi konverterer `quote` til en array af `words`, så vi kan spore det ord, spilleren aktuelt skriver - `wordIndex` sættes til 0, da spilleren starter med det første ord - Opsætning af UI - - Opret et array af `spanWords`, som indeholder hvert ord inde i et `span`-element - - Dette giver os mulighed for at fremhæve ordet på displayet - - `join` arrayet for at oprette en streng, som vi kan bruge til at opdatere `innerHTML` på `quoteElement` + - Opret en array af `spanWords`, som indeholder hvert ord inde i et `span`-element + - Dette giver os mulighed for at fremhæve ordet på skærmen + - `join` arrayet for at skabe en streng, som vi kan bruge til at opdatere `innerHTML` på `quoteElement` - Dette vil vise citatet til spilleren - - Indstil `className` for det første `span`-element til `highlight` for at fremhæve det som gult - - Rens `messageElement` ved at indstille `innerText` til `''` + - Sæt `className` for det første `span`-element til `highlight` for at fremhæve det som gult + - Rens `messageElement` ved at sætte `innerText` til `''` - Opsætning af tekstboksen - Ryd den aktuelle `value` på `typedValueElement` - - Indstil `focus` til `typedValueElement` + - Sæt `focus` til `typedValueElement` - Start timeren ved at kalde `getTime` ### Tilføj indtastningslogik -Når spilleren skriver, vil en `input`-event blive rejst. Denne event listener vil kontrollere, om spilleren skriver ordet korrekt, og håndtere spillets aktuelle status. Vend tilbage til **script.js**, og tilføj følgende kode til slutningen. Vi vil bryde det ned bagefter. +Når spilleren skriver, vil en `input`-event blive udløst. Denne event listener vil kontrollere, om spilleren skriver ordet korrekt, og håndtere spillets aktuelle status. Tilføj følgende kode til slutningen af **script.js**. Vi vil bryde det ned bagefter. ```javascript // at the end of script.js @@ -300,27 +300,27 @@ typedValueElement.addEventListener('input', () => { }); ``` -Lad os bryde koden ned! Vi starter med at hente det aktuelle ord og den værdi, spilleren har skrevet indtil videre. Derefter har vi en vandfaldslogik, hvor vi kontrollerer, om citatet er fuldført, ordet er fuldført, ordet er korrekt, eller (endelig), om der er en fejl. +Lad os bryde koden ned! Vi starter med at hente det aktuelle ord og den værdi, spilleren har skrevet indtil videre. Derefter har vi en kaskadelogik, hvor vi tjekker, om citatet er fuldført, ordet er fuldført, ordet er korrekt, eller (endelig), om der er en fejl. -- Citatet er fuldført, angivet ved at `typedValue` er lig med `currentWord`, og `wordIndex` er lig med en mindre end `length` af `words` +- Citatet er fuldført, angivet ved, at `typedValue` er lig med `currentWord`, og `wordIndex` er lig med en mindre end længden af `words` - Beregn `elapsedTime` ved at trække `startTime` fra den aktuelle tid - Divider `elapsedTime` med 1.000 for at konvertere fra millisekunder til sekunder - Vis en succesmeddelelse -- Ordet er fuldført, angivet ved at `typedValue` slutter med et mellemrum (slutningen af et ord) og `typedValue` er lig med `currentWord` - - Indstil `value` på `typedElement` til `''` for at tillade, at det næste ord kan skrives +- Ordet er fuldført, angivet ved, at `typedValue` slutter med et mellemrum (slutningen af et ord), og `typedValue` er lig med `currentWord` + - Sæt `value` på `typedElement` til `''` for at tillade, at det næste ord kan skrives - Inkrementer `wordIndex` for at gå videre til det næste ord - - Loop gennem alle `childNodes` af `quoteElement` for at indstille `className` til `''` for at vende tilbage til standardvisning - - Indstil `className` for det aktuelle ord til `highlight` for at markere det som det næste ord, der skal skrives -- Ordet er aktuelt skrevet korrekt (men ikke fuldført), angivet ved at `currentWord` starter med `typedValue` + - Gennemgå alle `childNodes` af `quoteElement` for at sætte `className` til `''` for at vende tilbage til standardvisning + - Sæt `className` for det aktuelle ord til `highlight` for at markere det som det næste ord, der skal skrives +- Ordet er aktuelt skrevet korrekt (men ikke fuldført), angivet ved, at `currentWord` starter med `typedValue` - Sørg for, at `typedValueElement` vises som standard ved at rydde `className` - Hvis vi er nået hertil, har vi en fejl - - Indstil `className` på `typedValueElement` til `error` + - Sæt `className` på `typedValueElement` til `error` ## Test din applikation -Du er nået til slutningen! Det sidste trin er at sikre, at vores applikation fungerer. Prøv det! Vær ikke bekymret, hvis der er fejl; **alle udviklere** har fejl. Undersøg meddelelserne og debug efter behov. +Du er nået til slutningen! Det sidste trin er at sikre, at vores applikation fungerer. Prøv det! Vær ikke bekymret, hvis der er fejl; **alle udviklere** oplever fejl. Undersøg meddelelserne og fejlret efter behov. -Klik på **start**, og begynd at skrive! Det skulle se lidt ud som animationen, vi så før. +Klik på **start**, og begynd at skrive! Det skulle se lidt ud som animationen, vi så tidligere. ![Animation af spillet i aktion](../../../../4-typing-game/images/demo.gif) @@ -333,21 +333,20 @@ Tilføj mere funktionalitet - Deaktiver `input`-event listeneren ved fuldførelse, og aktiver den igen, når knappen klikkes - Deaktiver tekstboksen, når spilleren fuldfører citatet - Vis en modal dialogboks med succesmeddelelsen -- Gem høje scorer ved hjælp af [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) - +- Gem high scores ved hjælp af [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) ## Quiz efter forelæsning [Quiz efter forelæsning](https://ff-quizzes.netlify.app/web/quiz/22) ## Gennemgang & Selvstudie -Læs om [alle de tilgængelige begivenheder](https://developer.mozilla.org/docs/Web/Events) for udviklere via webbrowseren, og overvej de scenarier, hvor du ville bruge hver enkelt. +Læs om [alle de tilgængelige hændelser](https://developer.mozilla.org/docs/Web/Events) for udviklere via webbrowseren, og overvej de scenarier, hvor du ville bruge hver enkelt. ## Opgave -[Opret et nyt tastaturspil](assignment.md) +[Skab et nyt tastaturspil](assignment.md) --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/5-browser-extension/1-about-browsers/README.md b/translations/da/5-browser-extension/1-about-browsers/README.md index 90d97515..e15f20e4 100644 --- a/translations/da/5-browser-extension/1-about-browsers/README.md +++ b/translations/da/5-browser-extension/1-about-browsers/README.md @@ -1,8 +1,8 @@ -# Browserudvidelsesprojekt del 2: Kald en API, brug lokal lagring +# Browserudvidelsesprojekt Del 2: Kald en API, brug lokal lagring ## Quiz før lektionen @@ -21,7 +21,7 @@ I denne lektion vil du kalde en API ved at indsende din browserudvidelses formul ### Opsæt elementerne til manipulation i udvidelsen: -På dette tidspunkt har du oprettet HTML til formularen og resultaternes `
` for din browserudvidelse. Fra nu af skal du arbejde i filen `/src/index.js` og bygge din udvidelse lidt efter lidt. Henvis til [den forrige lektion](../1-about-browsers/README.md) for at få din projektopsætning og byggeprocessen på plads. +På dette tidspunkt har du opbygget HTML'en til formularen og resultaternes `
` for din browserudvidelse. Fra nu af skal du arbejde i filen `/src/index.js` og bygge din udvidelse lidt efter lidt. Henvis til [den forrige lektion](../1-about-browsers/README.md) for at få din projektopsætning og byggeprocessen på plads. Arbejd i din `index.js`-fil, og start med at oprette nogle `const`-variabler til at holde værdierne forbundet med forskellige felter: @@ -41,11 +41,11 @@ const myregion = document.querySelector('.my-region'); const clearBtn = document.querySelector('.clear-btn'); ``` -Alle disse felter refereres til via deres CSS-klasse, som du opsatte i HTML i den forrige lektion. +Alle disse felter refereres til via deres CSS-klasse, som du opsatte i HTML'en i den forrige lektion. ### Tilføj lyttere -Tilføj derefter event listeners til formularen og knappen, der nulstiller formularen, så der sker noget, hvis en bruger indsender formularen eller klikker på nulstillingsknappen. Tilføj også kaldet til at initialisere appen nederst i filen: +Tilføj derefter event listeners til formularen og nulstillingsknappen, der nulstiller formularen, så hvis en bruger indsender formularen eller klikker på nulstillingsknappen, sker der noget, og tilføj kaldet til at initialisere appen nederst i filen: ```JavaScript form.addEventListener('submit', (e) => handleSubmit(e)); @@ -53,7 +53,7 @@ clearBtn.addEventListener('click', (e) => reset(e)); init(); ``` -✅ Bemærk den forkortede metode, der bruges til at lytte efter en submit- eller klikbegivenhed, og hvordan begivenheden sendes til handleSubmit- eller reset-funktionerne. Kan du skrive den tilsvarende lange version af denne forkortelse? Hvilken foretrækker du? +✅ Bemærk den forkortede metode, der bruges til at lytte efter en submit- eller klikbegivenhed, og hvordan begivenheden sendes til handleSubmit- eller reset-funktionerne. Kan du skrive den længere version af denne forkortelse? Hvilken foretrækker du? ### Byg init()-funktionen og reset()-funktionen: @@ -92,10 +92,9 @@ function reset(e) { } ``` - I denne funktion er der noget interessant logik. Når du læser igennem den, kan du se, hvad der sker? -- To `const` oprettes for at tjekke, om brugeren har gemt en APIKey og regionskode i lokal lagring. +- To `const` oprettes for at kontrollere, om brugeren har gemt en APIKey og regionskode i lokal lagring. - Hvis en af dem er null, vis formularen ved at ændre dens stil til at blive vist som 'block'. - Skjul resultaterne, loading og clearBtn, og sæt eventuel fejltekst til en tom streng. - Hvis der findes en nøgle og region, start en rutine for at: @@ -104,19 +103,19 @@ I denne funktion er der noget interessant logik. Når du læser igennem den, kan - Skjule formularen. - Vise nulstillingsknappen. -Før du går videre, er det nyttigt at lære om et meget vigtigt koncept, der er tilgængeligt i browsere: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage er en nyttig måde at gemme strenge i browseren som et `key-value`-par. Denne type webopbevaring kan manipuleres af JavaScript til at administrere data i browseren. LocalStorage udløber ikke, mens SessionStorage, en anden slags webopbevaring, ryddes, når browseren lukkes. De forskellige typer lagring har fordele og ulemper ved deres brug. +Før du går videre, er det nyttigt at lære om et meget vigtigt koncept, der er tilgængeligt i browsere: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage er en nyttig måde at gemme strenge i browseren som et `key-value`-par. Denne type webopbevaring kan manipuleres af JavaScript til at administrere data i browseren. LocalStorage udløber ikke, mens SessionStorage, en anden slags webopbevaring, ryddes, når browseren lukkes. De forskellige typer opbevaring har fordele og ulemper ved deres brug. > Bemærk - din browserudvidelse har sin egen lokale lagring; hovedbrowser-vinduet er en anden instans og opfører sig separat. -Du sætter din APIKey til at have en strengværdi, for eksempel, og du kan se, at den er sat i Edge ved at "inspicere" en webside (du kan højreklikke på en browser for at inspicere) og gå til fanen Applications for at se lagringen. +Du sætter din APIKey til at have en strengværdi, for eksempel, og du kan se, at den er sat i Edge ved at "inspicere" en webside (du kan højreklikke på en browser for at inspicere) og gå til fanen Applications for at se opbevaringen. ![Lokallagringspanel](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.da.png) -✅ Tænk over situationer, hvor du IKKE ville ønske at gemme nogle data i LocalStorage. Generelt er det en dårlig idé at placere API-nøgler i LocalStorage! Kan du se hvorfor? I vores tilfælde, da vores app udelukkende er til læring og ikke vil blive udgivet i en app-butik, vil vi bruge denne metode. +✅ Tænk over situationer, hvor du IKKE ville ønske at gemme nogle data i LocalStorage. Generelt er det en dårlig idé at placere APIKeys i LocalStorage! Kan du se hvorfor? I vores tilfælde, da vores app udelukkende er til læring og ikke vil blive udgivet i en app-butik, vil vi bruge denne metode. -Bemærk, at du bruger Web API til at manipulere LocalStorage, enten ved at bruge `getItem()`, `setItem()` eller `removeItem()`. Det er bredt understøttet på tværs af browsere. +Bemærk, at du bruger Web API'en til at manipulere LocalStorage, enten ved at bruge `getItem()`, `setItem()` eller `removeItem()`. Det er bredt understøttet på tværs af browsere. -Før du bygger `displayCarbonUsage()`-funktionen, der kaldes i `init()`, lad os bygge funktionaliteten til at håndtere den indledende formularindsendelse. +Før du bygger funktionen `displayCarbonUsage()`, der kaldes i `init()`, lad os bygge funktionaliteten til at håndtere den indledende formularindsendelse. ### Håndter formularindsendelsen @@ -128,12 +127,11 @@ function handleSubmit(e) { setUpUser(apiKey.value, region.value); } ``` - -✅ Frisk din hukommelse op - HTML'en, du opsatte i den sidste lektion, har to inputfelter, hvis `values` fanges via de `const`, du opsatte øverst i filen, og de er begge `required`, så browseren forhindrer brugere i at indtaste null-værdier. +✅ Frisk din hukommelse op - HTML'en, du opsatte i den sidste lektion, har to inputfelter, hvis `values` fanges via de `const`, du opsatte øverst i filen, og de er begge `required`, så browseren stopper brugere fra at indtaste null-værdier. ### Opsæt brugeren -Videre til `setUpUser`-funktionen, her sætter du værdier for lokal lagring for apiKey og regionName. Tilføj en ny funktion: +Videre til funktionen `setUpUser`, her sætter du værdier for lokal lagring for apiKey og regionName. Tilføj en ny funktion: ```JavaScript function setUpUser(apiKey, regionName) { @@ -146,20 +144,19 @@ function setUpUser(apiKey, regionName) { displayCarbonUsage(apiKey, regionName); } ``` - Denne funktion viser en loading-besked, mens API'en kaldes. På dette tidspunkt er du nået til at oprette den vigtigste funktion i denne browserudvidelse! ### Vis kulstofbrug Endelig er det tid til at forespørge API'en! -Før vi går videre, bør vi diskutere API'er. API'er, eller [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), er et kritisk element i en webudviklers værktøjskasse. De giver standardmåder for programmer til at interagere og grænseflade med hinanden. For eksempel, hvis du bygger en hjemmeside, der skal forespørge en database, kan nogen have oprettet en API, du kan bruge. Mens der findes mange typer API'er, er en af de mest populære en [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/). +Før vi går videre, bør vi diskutere API'er. API'er, eller [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), er et kritisk element i en webudviklers værktøjskasse. De giver standardmåder for programmer at interagere og grænseflade med hinanden. For eksempel, hvis du bygger en hjemmeside, der skal forespørge en database, kan nogen have oprettet en API, du kan bruge. Mens der findes mange typer API'er, er en af de mest populære en [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/). -✅ Udtrykket 'REST' står for 'Representational State Transfer' og indebærer brug af forskelligt konfigurerede URL'er til at hente data. Lav lidt research om de forskellige typer API'er, der er tilgængelige for udviklere. Hvilket format tiltaler dig? +✅ Udtrykket 'REST' står for 'Representational State Transfer' og indebærer brugen af forskellige konfigurerede URL'er til at hente data. Lav lidt research om de forskellige typer API'er, der er tilgængelige for udviklere. Hvilket format tiltaler dig? -Der er vigtige ting at bemærke om denne funktion. Først, bemærk [`async`-nøgleordet](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). At skrive dine funktioner, så de kører asynkront, betyder, at de venter på, at en handling, såsom data, der returneres, bliver fuldført, før de fortsætter. +Der er vigtige ting at bemærke om denne funktion. Først, bemærk nøgleordet [`async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). At skrive dine funktioner, så de kører asynkront, betyder, at de venter på en handling, såsom at data returneres, før de fortsætter. -Her er en hurtig video om `async`: +Her er en kort video om `async`: [![Async og Await til håndtering af promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async og Await til håndtering af promises") @@ -207,8 +204,8 @@ async function displayCarbonUsage(apiKey, region) { Dette er en stor funktion. Hvad sker der her? -- Efter bedste praksis bruger du et `async`-nøgleord for at få denne funktion til at opføre sig asynkront. Funktionen indeholder et `try/catch`-blok, da den vil returnere et løfte, når API'en returnerer data. Fordi du ikke har kontrol over hastigheden, som API'en vil svare med (den kan muligvis slet ikke svare!), skal du håndtere denne usikkerhed ved at kalde den asynkront. -- Du forespørger co2signal API'en for at få data om din region ved hjælp af din APIKey. For at bruge den nøgle skal du bruge en type autentificering i dine header-parametre. +- I overensstemmelse med bedste praksis bruger du nøgleordet `async` for at få denne funktion til at opføre sig asynkront. Funktionen indeholder et `try/catch`-blok, da den vil returnere et løfte, når API'en returnerer data. Fordi du ikke har kontrol over hastigheden, som API'en vil svare med (den kan muligvis slet ikke svare!), skal du håndtere denne usikkerhed ved at kalde den asynkront. +- Du forespørger co2signal API'en for at få data om din regions kulstofbrug ved hjælp af din APIKey. For at bruge den nøgle skal du bruge en type autentificering i dine header-parametre. - Når API'en svarer, tildeler du forskellige elementer af dens responsdata til de dele af din skærm, du opsatte til at vise disse data. - Hvis der opstår en fejl, eller hvis der ikke er noget resultat, viser du en fejlmeddelelse. @@ -220,7 +217,7 @@ Tillykke! Hvis du bygger din udvidelse (`npm run build`) og opdaterer den i din ## 🚀 Udfordring -Vi har diskuteret flere typer API'er indtil videre i disse lektioner. Vælg en web-API og undersøg i dybden, hvad den tilbyder. For eksempel, kig på API'er, der er tilgængelige i browsere, såsom [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Hvad gør en API fremragende efter din mening? +Vi har diskuteret flere typer API'er indtil videre i disse lektioner. Vælg en web-API og undersøg i dybden, hvad den tilbyder. For eksempel, tag et kig på API'er, der er tilgængelige i browsere, såsom [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Hvad gør en API fantastisk efter din mening? ## Quiz efter lektionen @@ -232,9 +229,9 @@ Du lærte om LocalStorage og API'er i denne lektion, begge meget nyttige for den ## Opgave -[Adoptér en API](assignment.md) +[Adopt an API](assignment.md) --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md index e4fa2e17..1a078182 100644 --- a/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/da/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,43 +1,43 @@ -# Browserudvidelsesprojekt Del 3: Lær om baggrundsopgaver og ydeevne +# Browserudvidelsesprojekt Del 3: Lær om Baggrundsopgaver og Ydeevne -## Quiz før lektionen +## Quiz før forelæsning -[Quiz før lektionen](https://ff-quizzes.netlify.app/web/quiz/27) +[Quiz før forelæsning](https://ff-quizzes.netlify.app/web/quiz/27) ### Introduktion -I de sidste to lektioner i dette modul lærte du, hvordan man bygger en formular og et visningsområde til data hentet fra en API. Det er en meget standard måde at skabe en webtilstedeværelse på nettet. Du lærte endda, hvordan man håndterer asynkron datahentning. Din browserudvidelse er næsten færdig. +I de sidste to lektioner af dette modul lærte du, hvordan man bygger en formular og et visningsområde til data hentet fra en API. Det er en meget standard måde at skabe en webtilstedeværelse på nettet. Du lærte endda, hvordan man håndterer asynkron datahentning. Din browserudvidelse er næsten færdig. -Det, der mangler, er at håndtere nogle baggrundsopgaver, herunder opdatering af farven på udvidelsens ikon. Derfor er det et godt tidspunkt at tale om, hvordan browseren håndterer denne type opgaver. Lad os tænke på disse browseropgaver i konteksten af ydeevnen for dine webressourcer, mens du bygger dem. +Det, der mangler, er at håndtere nogle baggrundsopgaver, herunder at opdatere farven på udvidelsens ikon. Dette er derfor et godt tidspunkt at tale om, hvordan browseren håndterer denne type opgaver. Lad os tænke på disse browseropgaver i sammenhæng med ydeevnen af dine webressourcer, mens du bygger dem. ## Grundlæggende om webydeevne > "Webstedets ydeevne handler om to ting: hvor hurtigt siden indlæses, og hvor hurtigt koden på den kører." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) -Emnet om, hvordan man gør sine websites lynhurtige på alle slags enheder, for alle slags brugere, i alle slags situationer, er ikke overraskende omfattende. Her er nogle punkter at huske på, når du bygger enten et standard webprojekt eller en browserudvidelse. +Emnet om, hvordan man gør dine websteder lynhurtige på alle slags enheder, for alle slags brugere, i alle slags situationer, er ikke overraskende omfattende. Her er nogle punkter at huske på, mens du bygger enten et standard webprojekt eller en browserudvidelse. Det første, du skal gøre for at sikre, at dit websted kører effektivt, er at indsamle data om dets ydeevne. Det første sted at gøre dette er i udviklerværktøjerne i din webbrowser. I Edge kan du vælge knappen "Indstillinger og mere" (ikonet med de tre prikker øverst til højre i browseren), derefter navigere til Flere værktøjer > Udviklerværktøjer og åbne fanen Ydeevne. Du kan også bruge tastaturgenvejene `Ctrl` + `Shift` + `I` på Windows eller `Option` + `Command` + `I` på Mac for at åbne udviklerværktøjerne. -Fanen Ydeevne indeholder et profileringsværktøj. Åbn et websted (prøv for eksempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) og klik på 'Optag'-knappen, og opdater derefter webstedet. Stop optagelsen når som helst, og du vil kunne se de rutiner, der genereres for at 'script', 'render' og 'male' webstedet: +Fanen Ydeevne indeholder et profileringsværktøj. Åbn et websted (prøv for eksempel [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) og klik på 'Optag'-knappen, og opdater derefter siden. Stop optagelsen når som helst, og du vil kunne se de rutiner, der genereres for at 'script', 'render' og 'male' siden: ![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.da.png) -✅ Besøg [Microsoft Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) om ydeevnepanelet i Edge +✅ Besøg [Microsoft Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) om Ydeevne-panelet i Edge -> Tip: For at få en nøjagtig aflæsning af dit websteds opstartstid, skal du rydde din browsers cache. +> Tip: For at få en præcis måling af dit websteds opstartstid, ryd din browsers cache Vælg elementer i profilens tidslinje for at zoome ind på begivenheder, der sker, mens din side indlæses. -Få et snapshot af din sides ydeevne ved at vælge en del af profilens tidslinje og se på oversigtspanelet: +Få et øjebliksbillede af din sides ydeevne ved at vælge en del af profilens tidslinje og kigge på oversigtspanelet: ![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.da.png) @@ -45,29 +45,29 @@ Tjek begivenhedslogpanelet for at se, om nogen begivenhed tog længere end 15 ms ![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.da.png) -✅ Lær din profiler at kende! Åbn udviklerværktøjerne på dette websted og se, om der er nogen flaskehalse. Hvilken ressource indlæses langsomst? Hurtigst? +✅ Lær din profiler at kende! Åbn udviklerværktøjerne på dette websted og se, om der er nogen flaskehalse. Hvad er den langsomst indlæsende ressource? Den hurtigste? ## Profileringstjek Generelt er der nogle "problemområder", som enhver webudvikler bør holde øje med, når de bygger et websted, for at undgå ubehagelige overraskelser, når det er tid til at implementere i produktion. -**Ressourcestørrelser**: Internettet er blevet 'tungere' og dermed langsommere i løbet af de seneste år. Noget af denne vægt skyldes brugen af billeder. +**Ressourcestørrelser**: Internettet er blevet 'tungere' og dermed langsommere i løbet af de sidste par år. Noget af denne vægt skyldes brugen af billeder. -✅ Gennemse [Internetarkivet](https://httparchive.org/reports/page-weight) for et historisk overblik over sidens vægt og mere. +✅ Kig gennem [Internetarkivet](https://httparchive.org/reports/page-weight) for et historisk overblik over sidens vægt og mere. -En god praksis er at sikre, at dine billeder er optimerede og leveres i den rigtige størrelse og opløsning til dine brugere. +En god praksis er at sikre, at dine billeder er optimeret og leveret i den rigtige størrelse og opløsning til dine brugere. -**DOM-gennemløb**: Browseren skal opbygge sin Document Object Model baseret på den kode, du skriver, så det er i interesse for god sideydeevne at holde dine tags minimale og kun bruge og style det, siden har brug for. I denne forbindelse kunne overskydende CSS, der er knyttet til en side, optimeres; stilarter, der kun skal bruges på én side, behøver for eksempel ikke at være inkluderet i hovedstilarket. +**DOM-gennemløb**: Browseren skal bygge sin Document Object Model baseret på den kode, du skriver, så det er i god sidens ydeevnes interesse at holde dine tags minimale og kun bruge og style det, som siden har brug for. For eksempel kan overskydende CSS, der er knyttet til en side, optimeres; stilarter, der kun skal bruges på én side, behøver ikke at være inkluderet i hoved-stilarket. **JavaScript**: Enhver JavaScript-udvikler bør holde øje med 'render-blokerende' scripts, der skal indlæses, før resten af DOM'en kan gennemløbes og males til browseren. Overvej at bruge `defer` med dine inline scripts (som det gøres i Terrarium-modulet). ✅ Prøv nogle websteder på en [Site Speed Test-webside](https://www.webpagetest.org/) for at lære mere om de almindelige tjek, der udføres for at bestemme webstedets ydeevne. -Nu hvor du har en idé om, hvordan browseren gengiver de ressourcer, du sender til den, lad os se på de sidste par ting, du skal gøre for at fuldføre din udvidelse: +Nu hvor du har en idé om, hvordan browseren gengiver de ressourcer, du sender til den, lad os se på de sidste par ting, du skal gøre for at færdiggøre din udvidelse: ### Opret en funktion til at beregne farve -Arbejd i `/src/index.js`, og tilføj en funktion kaldet `calculateColor()` efter rækken af `const`-variabler, du har oprettet for at få adgang til DOM'en: +Arbejd i `/src/index.js`, og tilføj en funktion kaldet `calculateColor()` efter rækken af `const`-variabler, du satte for at få adgang til DOM'en: ```JavaScript function calculateColor(value) { @@ -88,17 +88,17 @@ function calculateColor(value) { } ``` -Hvad sker der her? Du sender en værdi (kulstofintensiteten) fra API-kaldet, du fuldførte i sidste lektion, og derefter beregner du, hvor tæt dens værdi er på indekset præsenteret i farvearrayet. Derefter sender du den nærmeste farveværdi videre til chrome runtime. +Hvad sker der her? Du sender en værdi (kulstofintensiteten) fra API-kaldet, du færdiggjorde i den sidste lektion, og derefter beregner du, hvor tæt dens værdi er på indekset præsenteret i farvearrayet. Derefter sender du den nærmeste farveværdi videre til chrome runtime. Chrome.runtime har [en API](https://developer.chrome.com/extensions/runtime), der håndterer alle slags baggrundsopgaver, og din udvidelse udnytter dette: -> "Brug chrome.runtime API'en til at hente baggrundssiden, returnere detaljer om manifestet og lytte til og reagere på begivenheder i appens eller udvidelsens livscyklus. Du kan også bruge denne API til at konvertere den relative sti for URL'er til fuldt kvalificerede URL'er." +> "Brug chrome.runtime API'en til at hente baggrundssiden, returnere detaljer om manifestet og lytte til og reagere på begivenheder i appens eller udvidelsens livscyklus. Du kan også bruge denne API til at konvertere relative stier til fuldt kvalificerede URL'er." -✅ Hvis du udvikler denne browserudvidelse til Edge, kan det overraske dig, at du bruger en chrome API. De nyere Edge-browserversioner kører på Chromium-browsermotoren, så du kan udnytte disse værktøjer. +✅ Hvis du udvikler denne browserudvidelse til Edge, kan det overraske dig, at du bruger en chrome API. De nyere versioner af Edge-browseren kører på Chromium-browsermotoren, så du kan udnytte disse værktøjer. > Bemærk, hvis du vil profilere en browserudvidelse, skal du starte udviklerværktøjerne fra selve udvidelsen, da den er sin egen separate browserinstans. -### Indstil en standardfarve for ikonet +### Indstil en standard ikonfarve Nu, i `init()`-funktionen, skal du indstille ikonet til at være generisk grønt til at starte med ved igen at kalde chromes `updateIcon`-handling: @@ -113,14 +113,14 @@ chrome.runtime.sendMessage({ ### Kald funktionen, udfør kaldet -Dernæst skal du kalde den funktion, du lige har oprettet, ved at tilføje den til det løfte, der returneres af C02Signal API'en: +Kald derefter den funktion, du lige har oprettet, ved at tilføje den til løftet returneret af C02Signal API: ```JavaScript //let CO2... calculateColor(CO2); ``` -Og endelig, i `/dist/background.js`, tilføj lytteren til disse baggrundsaktionskald: +Og endelig, i `/dist/background.js`, tilføj lytteren til disse baggrundshandlingskald: ```JavaScript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { @@ -142,9 +142,9 @@ function drawIcon(value) { } ``` -I denne kode tilføjer du en lytter til eventuelle beskeder, der kommer til baggrundsopgavehåndteringen. Hvis den kaldes 'updateIcon', køres den næste kode for at tegne et ikon med den korrekte farve ved hjælp af Canvas API'en. +I denne kode tilføjer du en lytter til eventuelle beskeder, der kommer til baggrundsopgavehåndteringen. Hvis den kaldes 'updateIcon', køres den næste kode for at tegne et ikon i den korrekte farve ved hjælp af Canvas API'en. -✅ Du lærer mere om Canvas API'en i [Space Game-lektionerne](../../6-space-game/2-drawing-to-canvas/README.md). +✅ Du vil lære mere om Canvas API'en i [Space Game-lektionerne](../../6-space-game/2-drawing-to-canvas/README.md). Nu skal du genopbygge din udvidelse (`npm run build`), opdatere og starte din udvidelse og se farven ændre sig. Er det et godt tidspunkt at tage en pause eller vaske op? Nu ved du det! @@ -154,17 +154,17 @@ Tillykke, du har bygget en nyttig browserudvidelse og lært mere om, hvordan bro ## 🚀 Udfordring -Undersøg nogle open source-websteder, der har eksisteret i lang tid, og baseret på deres GitHub-historik, se om du kan afgøre, hvordan de blev optimeret gennem årene for ydeevne, hvis overhovedet. Hvad er det mest almindelige problemområde? +Undersøg nogle open source-websteder, der har eksisteret i lang tid, og se, baseret på deres GitHub-historik, om du kan afgøre, hvordan de blev optimeret over årene for ydeevne, hvis overhovedet. Hvad er det mest almindelige problemområde? -## Quiz efter lektionen +## Quiz efter forelæsning -[Quiz efter lektionen](https://ff-quizzes.netlify.app/web/quiz/28) +[Quiz efter forelæsning](https://ff-quizzes.netlify.app/web/quiz/28) ## Gennemgang & Selvstudie Overvej at tilmelde dig et [ydeevne-nyhedsbrev](https://perf.email/) -Undersøg nogle af de måder, browsere vurderer webydeevne ved at kigge gennem ydeevnefanerne i deres webværktøjer. Finder du nogen større forskelle? +Undersøg nogle af de måder, browsere vurderer webydeevne på ved at kigge gennem ydeevnefanerne i deres webværktøjer. Finder du nogen større forskelle? ## Opgave @@ -173,4 +173,4 @@ Undersøg nogle af de måder, browsere vurderer webydeevne ved at kigge gennem y --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/6-space-game/1-introduction/README.md b/translations/da/6-space-game/1-introduction/README.md index 75435f58..8961c9a1 100644 --- a/translations/da/6-space-game/1-introduction/README.md +++ b/translations/da/6-space-game/1-introduction/README.md @@ -1,13 +1,13 @@ -# Byg et rumspil del 1: Introduktion +# Byg et Rumspil Del 1: Introduktion ![video](../../../../6-space-game/images/pewpew.gif) @@ -15,24 +15,24 @@ CO_OP_TRANSLATOR_METADATA: [Quiz før forelæsning](https://ff-quizzes.netlify.app/web/quiz/29) -### Arv og komposition i spiludvikling +### Arv og Komposition i spiludvikling -I tidligere lektioner var der ikke meget behov for at bekymre sig om designarkitekturen i de apps, du byggede, da projekterne var meget små i omfang. Men når dine applikationer vokser i størrelse og omfang, bliver arkitektoniske beslutninger en større bekymring. Der er to hovedtilgange til at skabe større applikationer i JavaScript: *komposition* eller *arv*. Begge har fordele og ulemper, men lad os forklare dem inden for konteksten af et spil. +I tidligere lektioner var der ikke meget behov for at bekymre sig om designarkitekturen i de apps, du byggede, da projekterne var meget små i omfang. Men når dine applikationer vokser i størrelse og kompleksitet, bliver arkitektoniske beslutninger en større bekymring. Der er to hovedtilgange til at skabe større applikationer i JavaScript: *komposition* eller *arv*. Begge har deres fordele og ulemper, men lad os forklare dem i konteksten af et spil. ✅ En af de mest berømte programmeringsbøger nogensinde handler om [designmønstre](https://en.wikipedia.org/wiki/Design_Patterns). -I et spil har du `spilobjekter`, som er objekter, der findes på en skærm. Det betyder, at de har en placering i et kartesisk koordinatsystem, karakteriseret ved at have en `x` og `y` koordinat. Når du udvikler et spil, vil du bemærke, at alle dine spilobjekter har en standardegenskab, fælles for hvert spil, du skaber, nemlig elementer, der er: +I et spil har du `spilobjekter`, som er objekter, der eksisterer på en skærm. Det betyder, at de har en placering i et kartesisk koordinatsystem, karakteriseret ved at have en `x`- og `y`-koordinat. Når du udvikler et spil, vil du bemærke, at alle dine spilobjekter har en standardegenskab, som er fælles for hvert spil, du skaber, nemlig elementer, der er: - **positionsbaserede** De fleste, hvis ikke alle, spilelementer er positionsbaserede. Det betyder, at de har en placering, en `x` og `y`. -- **bevægelige** Dette er objekter, der kan flytte sig til en ny placering. Typisk er det en helt, et monster eller en NPC (en ikke-spilbar karakter), men ikke for eksempel et statisk objekt som et træ. -- **selvdestruerende** Disse objekter eksisterer kun i en bestemt periode, før de sætter sig selv op til sletning. Normalt er dette repræsenteret af en `dead` eller `destroyed` boolean, der signalerer til spilmotoren, at dette objekt ikke længere skal vises. -- **nedkøling** 'Nedkøling' er en typisk egenskab blandt kortvarige objekter. Et typisk eksempel er et stykke tekst eller en grafisk effekt som en eksplosion, der kun skal ses i nogle få millisekunder. +- **bevægelige** Dette er objekter, der kan flytte sig til en ny placering. Typisk er det en helt, et monster eller en NPC (en ikke-spiller karakter), men ikke for eksempel et statisk objekt som et træ. +- **selvdestruerende** Disse objekter eksisterer kun i en bestemt periode, før de markerer sig selv til sletning. Normalt repræsenteres dette af en `dead` eller `destroyed` boolean, der signalerer til spilmotoren, at dette objekt ikke længere skal vises. +- **cool-down** 'Cool-down' er en typisk egenskab blandt kortlivede objekter. Et typisk eksempel er et stykke tekst eller en grafisk effekt som en eksplosion, der kun skal ses i nogle få millisekunder. ✅ Tænk på et spil som Pac-Man. Kan du identificere de fire objekttyper, der er nævnt ovenfor, i dette spil? -### Udtryk adfærd +### Udtryk af adfærd -Alt det, vi beskrev ovenfor, er adfærd, som spilobjekter kan have. Så hvordan koder vi dem? Vi kan udtrykke denne adfærd som metoder, der er knyttet til enten klasser eller objekter. +Alt det, vi har beskrevet ovenfor, er adfærd, som spilobjekter kan have. Så hvordan koder vi det? Vi kan udtrykke denne adfærd som metoder, der er knyttet til enten klasser eller objekter. **Klasser** @@ -88,7 +88,7 @@ hero.moveTo(5,5); const tree = new Tree(); ``` -✅ Brug et par minutter på at forestille dig en Pac-Man helt (Inky, Pinky eller Blinky, for eksempel) og hvordan det ville blive skrevet i JavaScript. +✅ Brug et par minutter på at forestille dig en Pac-Man-helt (Inky, Pinky eller Blinky, for eksempel) og hvordan den ville blive skrevet i JavaScript. **Komposition** @@ -149,9 +149,9 @@ Et andet mønster, der er almindeligt i spiludvikling, adresserer problemet med ✅ Pub/Sub står for 'publish-subscribe' -Dette mønster adresserer ideen om, at de forskellige dele af din applikation ikke bør kende til hinanden. Hvorfor er det sådan? Det gør det meget lettere at se, hvad der generelt foregår, hvis de forskellige dele er adskilt. Det gør det også lettere pludselig at ændre adfærd, hvis du har brug for det. Hvordan opnår vi dette? Vi gør det ved at etablere nogle begreber: +Dette mønster adresserer ideen om, at de forskellige dele af din applikation ikke bør kende til hinanden. Hvorfor det? Det gør det meget lettere at få et overblik, hvis de forskellige dele er adskilt. Det gør det også lettere at ændre adfærd, hvis det er nødvendigt. Hvordan opnår vi dette? Vi gør det ved at etablere nogle begreber: -- **besked**: En besked er normalt en tekststreng ledsaget af en valgfri payload (et stykke data, der præciserer, hvad beskeden handler om). En typisk besked i et spil kan være `KEY_PRESSED_ENTER`. +- **besked**: En besked er normalt en tekststreng ledsaget af en valgfri nyttelast (et stykke data, der præciserer, hvad beskeden handler om). En typisk besked i et spil kan være `KEY_PRESSED_ENTER`. - **udgiver**: Dette element *udgiver* en besked og sender den ud til alle abonnenter. - **abonnent**: Dette element *lytter* til specifikke beskeder og udfører en opgave som resultat af at modtage denne besked, såsom at affyre en laser. @@ -204,7 +204,7 @@ window.addEventListener('keyup', (evt) => { }); ``` -Ovenfor forbinder vi en tastaturhændelse, `ArrowLeft`, og sender beskeden `HERO_MOVE_LEFT`. Vi lytter til den besked og flytter `hero` som resultat. Styrken ved dette mønster er, at event listeneren og helten ikke kender til hinanden. Du kan omdanne `ArrowLeft` til `A`-tasten. Derudover ville det være muligt at gøre noget helt andet på `ArrowLeft` ved at lave nogle få ændringer i eventEmitter's `on`-funktion: +Ovenfor forbinder vi en tastaturhændelse, `ArrowLeft`, og sender beskeden `HERO_MOVE_LEFT`. Vi lytter til den besked og flytter `hero` som resultat. Styrken ved dette mønster er, at event listeneren og helten ikke kender til hinanden. Du kan ommappe `ArrowLeft` til `A`-tasten. Derudover ville det være muligt at gøre noget helt andet på `ArrowLeft` ved at lave nogle få ændringer i eventEmitter's `on`-funktion: ```javascript eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { @@ -212,13 +212,13 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { }); ``` -Efterhånden som tingene bliver mere komplicerede, når dit spil vokser, forbliver dette mønster det samme i kompleksitet, og din kode forbliver ren. Det anbefales virkelig at adoptere dette mønster. +Når tingene bliver mere komplekse, efterhånden som dit spil vokser, forbliver dette mønster det samme i kompleksitet, og din kode forbliver ren. Det anbefales virkelig at adoptere dette mønster. --- ## 🚀 Udfordring -Tænk over, hvordan pub-sub-mønsteret kan forbedre et spil. Hvilke dele bør udsende hændelser, og hvordan bør spillet reagere på dem? Nu har du chancen for at være kreativ og tænke på et nyt spil og hvordan dets dele kunne opføre sig. +Tænk over, hvordan pub-sub-mønsteret kan forbedre et spil. Hvilke dele bør udsende hændelser, og hvordan skal spillet reagere på dem? Nu har du chancen for at være kreativ og tænke på et nyt spil og hvordan dets dele kunne opføre sig. ## Quiz efter forelæsning @@ -230,9 +230,9 @@ Lær mere om Pub/Sub ved at [læse om det](https://docs.microsoft.com/azure/arch ## Opgave -[Mock et spil](assignment.md) +[Mock et spil op](assignment.md) --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/6-space-game/2-drawing-to-canvas/README.md b/translations/da/6-space-game/2-drawing-to-canvas/README.md index c8fcd367..2948564b 100644 --- a/translations/da/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/da/6-space-game/2-drawing-to-canvas/README.md @@ -1,25 +1,25 @@ -# Byg et Rumspil Del 2: Tegn Helten og Monstrene på Canvas +# Byg et rumspil del 2: Tegn helten og monstre på lærredet ## Quiz før forelæsning [Quiz før forelæsning](https://ff-quizzes.netlify.app/web/quiz/31) -## Canvas +## Lærredet -Canvas er et HTML-element, der som standard ikke har noget indhold; det er en tom flade. Du skal tilføje indhold ved at tegne på det. +Lærredet er et HTML-element, der som standard ikke har noget indhold; det er en tom flade. Du skal tilføje indhold ved at tegne på det. -✅ Læs [mere om Canvas API'et](https://developer.mozilla.org/docs/Web/API/Canvas_API) på MDN. +✅ Læs [mere om Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) på MDN. -Sådan ser det typisk ud, når det erklæres som en del af sidens body: +Her er, hvordan det typisk deklareres som en del af sidens body: ```html @@ -27,24 +27,24 @@ Sådan ser det typisk ud, når det erklæres som en del af sidens body: Ovenfor sætter vi `id`, `width` og `height`. -- `id`: angiv dette, så du kan få en reference, når du skal interagere med det. +- `id`: sæt dette, så du kan få en reference, når du skal interagere med det. - `width`: dette er elementets bredde. - `height`: dette er elementets højde. ## Tegning af simpel geometri -Canvas bruger et kartesisk koordinatsystem til at tegne ting. Det betyder, at det bruger en x-akse og en y-akse til at angive, hvor noget er placeret. Positionen `0,0` er øverste venstre hjørne, og nederste højre hjørne er det, du har angivet som CANVAS' BREDDE og HØJDE. +Lærredet bruger et kartesisk koordinatsystem til at tegne ting. Det betyder, at det bruger en x-akse og y-akse til at udtrykke, hvor noget er placeret. Placeringen `0,0` er øverste venstre hjørne, og nederste højre hjørne er det, du har angivet som lærredets BREDDE og HØJDE. -![canvas' gitter](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.da.png) +![lærredets gitter](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.da.png) > Billede fra [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) -For at tegne på canvas-elementet skal du gennemgå følgende trin: +For at tegne på lærredselementet skal du følge disse trin: -1. **Få en reference** til Canvas-elementet. -2. **Få en reference** til Context-elementet, der sidder på Canvas-elementet. -3. **Udfør en tegneoperation** ved hjælp af Context-elementet. +1. **Få en reference** til lærredselementet. +1. **Få en reference** til kontekstelementet, der sidder på lærredselementet. +1. **Udfør en tegneoperation** ved hjælp af kontekstelementet. -Koden for ovenstående trin ser typisk sådan ud: +Kode for ovenstående trin ser typisk sådan ud: ```javascript // draws a red rectangle @@ -61,21 +61,21 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x,y,width, height ``` -✅ Canvas API'et fokuserer primært på 2D-former, men du kan også tegne 3D-elementer på en webside; til dette kan du bruge [WebGL API'et](https://developer.mozilla.org/docs/Web/API/WebGL_API). +✅ Canvas API fokuserer primært på 2D-former, men du kan også tegne 3D-elementer på en hjemmeside; til dette kan du bruge [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API). -Du kan tegne mange forskellige ting med Canvas API'et, såsom: +Du kan tegne mange forskellige ting med Canvas API, såsom: -- **Geometriske former**, vi har allerede vist, hvordan man tegner et rektangel, men der er meget mere, du kan tegne. -- **Tekst**, du kan tegne tekst med enhver skrifttype og farve, du ønsker. -- **Billeder**, du kan tegne et billede baseret på en billedfil som f.eks. en .jpg eller .png. +- **Geometriske former**, vi har allerede vist, hvordan man tegner et rektangel, men der er meget mere, du kan tegne. +- **Tekst**, du kan tegne tekst med enhver skrifttype og farve, du ønsker. +- **Billeder**, du kan tegne et billede baseret på en billedfil som f.eks. en .jpg eller .png. ✅ Prøv det! Du ved, hvordan man tegner et rektangel, kan du tegne en cirkel på en side? Tag et kig på nogle interessante Canvas-tegninger på CodePen. Her er et [særligt imponerende eksempel](https://codepen.io/dissimulate/pen/KrAwx). -## Indlæs og tegn en billedressource +## Indlæs og tegn en billedfil -Du indlæser en billedressource ved at oprette et `Image`-objekt og sætte dets `src`-egenskab. Derefter lytter du til `load`-hændelsen for at vide, hvornår det er klar til brug. Koden ser sådan ud: +Du indlæser en billedfil ved at oprette et `Image`-objekt og sætte dets `src`-egenskab. Derefter lytter du til `load`-begivenheden for at vide, hvornår det er klar til brug. Koden ser sådan ud: -### Indlæs ressource +### Indlæs fil ```javascript const img = new Image(); @@ -85,9 +85,9 @@ img.onload = () => { } ``` -### Mønster for indlæsning af ressource +### Indlæsningsmønster -Det anbefales at pakke ovenstående ind i en konstruktion som denne, så det er nemmere at bruge, og du kun forsøger at manipulere det, når det er fuldt indlæst: +Det anbefales at pakke ovenstående ind i en konstruktion som denne, så det er lettere at bruge, og du kun forsøger at manipulere det, når det er fuldt indlæst: ```javascript function loadAsset(path) { @@ -128,19 +128,19 @@ async function run() { ### Hvad skal bygges -Du skal bygge en webside med et Canvas-element. Det skal vise en sort skærm `1024*768`. Vi har givet dig to billeder: +Du skal bygge en webside med et lærredselement. Det skal vise en sort skærm `1024*768`. Vi har givet dig to billeder: -- Helteskib +- Helteskib ![Helteskib](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.da.png) -- 5*5 monster +- 5*5 monster ![Monsterskib](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.da.png) -### Anbefalede trin for at starte udviklingen +### Anbefalede trin til at starte udviklingen -Find de filer, der er blevet oprettet til dig i undermappen `your-work`. Den bør indeholde følgende: +Find de filer, der er oprettet til dig i undermappen `your-work`. Den bør indeholde følgende: ```bash -| assets @@ -151,7 +151,7 @@ Find de filer, der er blevet oprettet til dig i undermappen `your-work`. Den bø -| package.json ``` -Åbn en kopi af denne mappe i Visual Studio Code. Du skal have et lokalt udviklingsmiljø opsat, helst med Visual Studio Code med NPM og Node installeret. Hvis du ikke har `npm` opsat på din computer, [sådan gør du det](https://www.npmjs.com/get-npm). +Åbn en kopi af denne mappe i Visual Studio Code. Du skal have et lokalt udviklingsmiljø sat op, helst med Visual Studio Code med NPM og Node installeret. Hvis du ikke har `npm` sat op på din computer, [sådan gør du](https://www.npmjs.com/get-npm). Start dit projekt ved at navigere til mappen `your_work`: @@ -168,16 +168,16 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e Tilføj den nødvendige kode til `your-work/app.js` for at løse nedenstående: -1. **Tegn** et canvas med sort baggrund - > tip: tilføj to linjer under den relevante TODO i `/app.js`, der sætter `ctx`-elementet til at være sort og top/venstre koordinater til at være 0,0, og højden og bredden til at svare til canvas. -2. **Indlæs** teksturer - > tip: tilføj spiller- og fjendebilleder ved hjælp af `await loadTexture` og angiv billedstien. Du vil endnu ikke kunne se dem på skærmen! -3. **Tegn** helten i midten af skærmen i den nederste halvdel - > tip: brug `drawImage` API'et til at tegne heroImg på skærmen, og sæt `canvas.width / 2 - 45` og `canvas.height - canvas.height / 4)`. -4. **Tegn** 5*5 monstre - > tip: Nu kan du fjerne kommenteringen af koden for at tegne fjender på skærmen. Gå derefter til funktionen `createEnemies` og byg den ud. +1. **Tegn** et lærred med sort baggrund + > tip: tilføj to linjer under den relevante TODO i `/app.js`, der sætter `ctx`-elementet til sort og top/venstre koordinater til 0,0 og højden og bredden til at matche lærredet. +2. **Indlæs** teksturer + > tip: tilføj spiller- og fjendebilleder ved hjælp af `await loadTexture` og angiv stien til billedet. Du vil ikke se dem på skærmen endnu! +3. **Tegn** helten i midten af skærmen i den nederste halvdel + > tip: brug `drawImage` API til at tegne heroImg på skærmen, og sæt `canvas.width / 2 - 45` og `canvas.height - canvas.height / 4)`. +4. **Tegn** 5*5 monstre + > tip: Nu kan du fjerne kommentaren fra koden for at tegne fjender på skærmen. Gå derefter til funktionen `createEnemies` og byg den ud. - Først, opsæt nogle konstanter: + Først skal du opsætte nogle konstanter: ```javascript const MONSTER_TOTAL = 5; @@ -186,7 +186,7 @@ Tilføj den nødvendige kode til `your-work/app.js` for at løse nedenstående: const STOP_X = START_X + MONSTER_WIDTH; ``` - derefter, opret en løkke for at tegne arrayet af monstre på skærmen: + derefter oprette en løkke for at tegne arrayet af monstre på skærmen: ```javascript for (let x = START_X; x < STOP_X; x += 98) { @@ -198,19 +198,19 @@ Tilføj den nødvendige kode til `your-work/app.js` for at løse nedenstående: ## Resultat -Det færdige resultat bør se sådan ud: +Det færdige resultat skal se sådan ud: ![Sort skærm med en helt og 5*5 monstre](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.da.png) ## Løsning -Prøv venligst at løse det selv først, men hvis du sidder fast, kan du se en [løsning](../../../../6-space-game/2-drawing-to-canvas/solution/app.js). +Prøv først at løse det selv, men hvis du går i stå, kan du se en [løsning](../../../../6-space-game/2-drawing-to-canvas/solution/app.js). --- ## 🚀 Udfordring -Du har lært om at tegne med det 2D-fokuserede Canvas API; tag et kig på [WebGL API'et](https://developer.mozilla.org/docs/Web/API/WebGL_API), og prøv at tegne et 3D-objekt. +Du har lært om at tegne med det 2D-fokuserede Canvas API; tag et kig på [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), og prøv at tegne et 3D-objekt. ## Quiz efter forelæsning @@ -218,13 +218,13 @@ Du har lært om at tegne med det 2D-fokuserede Canvas API; tag et kig på [WebGL ## Gennemgang & Selvstudie -Lær mere om Canvas API'et ved at [læse om det](https://developer.mozilla.org/docs/Web/API/Canvas_API). +Lær mere om Canvas API ved at [læse om det](https://developer.mozilla.org/docs/Web/API/Canvas_API). ## Opgave -[Leg med Canvas API'et](assignment.md) +[Leg med Canvas API](assignment.md) --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/6-space-game/3-moving-elements-around/README.md b/translations/da/6-space-game/3-moving-elements-around/README.md index 302c7449..3e64c2f6 100644 --- a/translations/da/6-space-game/3-moving-elements-around/README.md +++ b/translations/da/6-space-game/3-moving-elements-around/README.md @@ -1,8 +1,8 @@ -# Byg et rumspil del 4: Tilføj en laser og registrer kollisioner +# Byg et Rumspil Del 4: Tilføjelse af en Laser og Registrering af Kollisioner ## Quiz før lektionen [Quiz før lektionen](https://ff-quizzes.netlify.app/web/quiz/35) -I denne lektion lærer du, hvordan du skyder med laser ved hjælp af JavaScript! Vi vil tilføje to ting til vores spil: +I denne lektion lærer du, hvordan man skyder med lasere ved hjælp af JavaScript! Vi tilføjer to ting til vores spil: -- **En laser**: Denne laser bliver skudt fra din helts rumskib og bevæger sig lodret opad. -- **Kollisionsregistrering**: Som en del af implementeringen af evnen til at *skyde* vil vi også tilføje nogle gode spilleregler: - - **Laser rammer fjende**: Fjenden dør, hvis den bliver ramt af en laser. - - **Laser rammer toppen af skærmen**: En laser bliver ødelagt, hvis den rammer den øverste del af skærmen. - - **Fjende og helt kolliderer**: En fjende og helten bliver ødelagt, hvis de rammer hinanden. - - **Fjende rammer bunden af skærmen**: En fjende og helten bliver ødelagt, hvis fjenden rammer bunden af skærmen. +- **En laser**: Denne laser affyres fra din helts skib og bevæger sig lodret opad. +- **Registrering af kollisioner**, som en del af implementeringen af evnen til at *skyde*, tilføjer vi også nogle spændende spilleregler: + - **Laser rammer fjende**: Fjenden dør, hvis den rammes af en laser. + - **Laser rammer toppen af skærmen**: En laser destrueres, hvis den rammer den øverste del af skærmen. + - **Fjende og helt kollision**: En fjende og helten destrueres, hvis de rammer hinanden. + - **Fjende rammer bunden af skærmen**: En fjende og helten destrueres, hvis fjenden rammer bunden af skærmen. Kort sagt, du -- *helten* -- skal ramme alle fjender med en laser, før de når bunden af skærmen. -✅ Lav lidt research om det allerførste computerspil nogensinde. Hvad var dets funktionalitet? +✅ Lav lidt research om det allerførste computerspil, der nogensinde blev skrevet. Hvad var dets funktionalitet? -Lad os være heroiske sammen! +Lad os være heltemodige sammen! -## Kollisionsregistrering +## Registrering af kollisioner -Hvordan registrerer vi kollisioner? Vi skal tænke på vores spilobjekter som rektangler, der bevæger sig rundt. Hvorfor det, spørger du måske? Jo, det billede, der bruges til at tegne et spilobjekt, er et rektangel: det har en `x`, `y`, `bredde` og `højde`. +Hvordan registrerer vi kollisioner? Vi skal tænke på vores spilobjekter som rektangler, der bevæger sig rundt. Hvorfor det, spørger du måske? Jo, billedet, der bruges til at tegne et spilobjekt, er et rektangel: det har en `x`, `y`, `bredde` og `højde`. -Hvis to rektangler, dvs. en helt og en fjende, *skærer hinanden*, har du en kollision. Hvad der skal ske derefter, afhænger af spillereglerne. For at implementere kollisionsregistrering skal du derfor bruge følgende: +Hvis to rektangler, dvs. en helt og en fjende, *overlapper*, har du en kollision. Hvad der derefter skal ske, afhænger af spillereglerne. For at implementere registrering af kollisioner skal du derfor bruge følgende: -1. En måde at få en rektangelrepræsentation af et spilobjekt, noget i stil med dette: +1. En måde at få en rektangelrepræsentation af et spilobjekt, noget i denne stil: ```javascript rectFromGameObject() { @@ -58,32 +58,32 @@ Hvis to rektangler, dvs. en helt og en fjende, *skærer hinanden*, har du en kol } ``` -## Hvordan ødelægger vi ting +## Hvordan destruerer vi ting -For at ødelægge ting i et spil skal du lade spillet vide, at det ikke længere skal tegne dette objekt i spil-loopet, der udløses med et bestemt interval. En måde at gøre dette på er at markere et spilobjekt som *dødt*, når noget sker, som så: +For at destruerer ting i et spil skal du fortælle spillet, at det ikke længere skal tegne dette objekt i spillets løkke, som udløses med et bestemt interval. En måde at gøre dette på er at markere et spilobjekt som *dødt*, når noget sker, som dette: ```javascript // collision happened enemy.dead = true ``` -Derefter kan du sortere *døde* objekter fra, før skærmen bliver tegnet igen, som så: +Derefter kan du sortere *døde* objekter fra, før skærmen genmales, som dette: ```javascript gameObjects = gameObject.filter(go => !go.dead); ``` -## Hvordan skyder vi en laser +## Hvordan affyrer vi en laser -At skyde en laser betyder at reagere på en tastaturhændelse og oprette et objekt, der bevæger sig i en bestemt retning. Vi skal derfor udføre følgende trin: +At affyre en laser betyder at reagere på en tastaturhændelse og skabe et objekt, der bevæger sig i en bestemt retning. Vi skal derfor udføre følgende trin: -1. **Opret et laserobjekt**: fra toppen af heltenes rumskib, som ved oprettelse begynder at bevæge sig opad mod toppen af skærmen. -2. **Tilføj kode til en tastaturhændelse**: Vi skal vælge en tast på tastaturet, der repræsenterer spilleren, der skyder laseren. +1. **Opret et laserobjekt**: fra toppen af helteskibet, som ved oprettelse begynder at bevæge sig opad mod skærmens top. +2. **Tilføj kode til en tastaturhændelse**: vi skal vælge en tast på tastaturet, der repræsenterer spillerens affyring af laseren. 3. **Opret et spilobjekt, der ligner en laser**, når tasten trykkes. ## Cooldown på vores laser -Laseren skal affyres hver gang du trykker på en tast, f.eks. *mellemrum*. For at forhindre spillet i at producere alt for mange lasere på kort tid, skal vi løse dette. Løsningen er at implementere en såkaldt *cooldown*, en timer, der sikrer, at en laser kun kan affyres med bestemte intervaller. Du kan implementere det på følgende måde: +Laseren skal affyres hver gang du trykker på en tast, f.eks. *mellemrumstasten*. For at forhindre spillet i at producere alt for mange lasere på kort tid, skal vi løse dette. Løsningen er at implementere en såkaldt *cooldown*, en timer, der sikrer, at en laser kun kan affyres med bestemte intervaller. Du kan implementere det på følgende måde: ```javascript class Cooldown { @@ -109,19 +109,19 @@ class Weapon { } ``` -✅ Henvis til lektion 1 i rumspilsserien for at minde dig selv om *cooldowns*. +✅ Gå tilbage til lektion 1 i rumspilsserien for at minde dig selv om *cooldowns*. ## Hvad skal bygges -Du skal tage den eksisterende kode (som du burde have ryddet op i og refaktoreret) fra den forrige lektion og udvide den. Enten start med koden fra del II eller brug koden fra [Del III - starter](../../../../../../../../../your-work). +Du skal tage den eksisterende kode (som du burde have ryddet op i og refaktoreret) fra den forrige lektion og udvide den. Start enten med koden fra del II eller brug koden fra [Del III - startkode](../../../../../../../../../your-work). -> tip: Laseren, du skal arbejde med, er allerede i din assets-mappe og refereret af din kode. +> tip: Laseren, du skal arbejde med, findes allerede i din assets-mappe og er refereret i din kode. -- **Tilføj kollisionsregistrering**, når en laser kolliderer med noget, skal følgende regler gælde: - 1. **Laser rammer fjende**: Fjenden dør, hvis den bliver ramt af en laser. - 2. **Laser rammer toppen af skærmen**: En laser bliver ødelagt, hvis den rammer den øverste del af skærmen. - 3. **Fjende og helt kolliderer**: En fjende og helten bliver ødelagt, hvis de rammer hinanden. - 4. **Fjende rammer bunden af skærmen**: En fjende og helten bliver ødelagt, hvis fjenden rammer bunden af skærmen. +- **Tilføj registrering af kollisioner**, når en laser kolliderer med noget, skal følgende regler gælde: + 1. **Laser rammer fjende**: Fjenden dør, hvis den rammes af en laser. + 2. **Laser rammer toppen af skærmen**: En laser destrueres, hvis den rammer den øverste del af skærmen. + 3. **Fjende og helt kollision**: En fjende og helten destrueres, hvis de rammer hinanden. + 4. **Fjende rammer bunden af skærmen**: En fjende og helten destrueres, hvis fjenden rammer bunden af skærmen. ## Anbefalede trin @@ -137,7 +137,7 @@ Find de filer, der er blevet oprettet til dig i undermappen `your-work`. Den bø -| package.json ``` -Du starter dit projekt i mappen `your_work` ved at skrive: +Du starter dit projekt i `your_work`-mappen ved at skrive: ```bash cd your-work @@ -148,7 +148,7 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e ### Tilføj kode -1. **Opsæt en rektangelrepræsentation af dit spilobjekt for at håndtere kollisioner**. Nedenstående kode giver dig mulighed for at få en rektangelrepræsentation af et `GameObject`. Rediger din GameObject-klasse for at udvide den: +1. **Opsæt en rektangelrepræsentation af dit spilobjekt for at håndtere kollisioner** Følgende kode giver dig mulighed for at få en rektangelrepræsentation af et `GameObject`. Rediger din GameObject-klasse for at udvide den: ```javascript rectFromGameObject() { @@ -161,7 +161,7 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e } ``` -2. **Tilføj kode, der kontrollerer kollisioner**. Dette vil være en ny funktion, der tester, om to rektangler skærer hinanden: +2. **Tilføj kode, der tjekker kollisioner** Dette vil være en ny funktion, der tester, om to rektangler overlapper: ```javascript function intersectRect(r1, r2) { @@ -174,8 +174,8 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e } ``` -3. **Tilføj laser-skydningsfunktionalitet** - 1. **Tilføj tastaturhændelsesmeddelelse**. *Mellemrumstasten* skal oprette en laser lige over heltenes rumskib. Tilføj tre konstanter i Messages-objektet: +3. **Tilføj laser-affyringsfunktionalitet** + 1. **Tilføj tastaturhændelse**. *Mellemrumstasten* skal skabe en laser lige over helteskibet. Tilføj tre konstanter i Messages-objektet: ```javascript KEY_EVENT_SPACE: "KEY_EVENT_SPACE", @@ -183,7 +183,7 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", ``` - 1. **Håndter mellemrumstasten**. Rediger funktionen `window.addEventListener` keyup for at håndtere mellemrumstasten: + 1. **Håndter mellemrumstasten**. Rediger `window.addEventListener` keyup-funktionen for at håndtere mellemrumstasten: ```javascript } else if(evt.keyCode === 32) { @@ -191,7 +191,7 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e } ``` - 1. **Tilføj lyttere**. Rediger funktionen `initGame()` for at sikre, at helten kan skyde, når mellemrumstasten trykkes: + 1. **Tilføj lyttere**. Rediger `initGame()`-funktionen for at sikre, at helten kan affyre, når mellemrumstasten trykkes: ```javascript eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { @@ -209,7 +209,7 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e }) ``` - 1. **Bevæg objektet**, Sørg for, at laseren gradvist bevæger sig mod toppen af skærmen. Du opretter en ny Laser-klasse, der udvider `GameObject`, som du har gjort før: + 1. **Bevæg objekt**, Sørg for, at laseren gradvist bevæger sig mod toppen af skærmen. Du opretter en ny Laser-klasse, der udvider `GameObject`, som du har gjort før: ```javascript class Laser extends GameObject { @@ -252,11 +252,11 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e } ``` - Sørg for at tilføje `updateGameObjects()` til dit spil-loop i `window.onload`. + Sørg for at tilføje `updateGameObjects()` i din spillykke i `window.onload`. 4. **Implementer cooldown** på laseren, så den kun kan affyres med bestemte intervaller. - Til sidst skal du redigere Hero-klassen, så den kan håndtere cooldown: + Til sidst rediger Hero-klassen, så den kan håndtere cooldown: ```javascript class Hero extends GameObject { @@ -285,7 +285,7 @@ Ovenstående starter en HTTP-server på adressen `http://localhost:5000`. Åbn e } ``` -På dette tidspunkt har dit spil noget funktionalitet! Du kan navigere med dine piletaster, skyde en laser med din mellemrumstast, og fjender forsvinder, når du rammer dem. Godt gået! +På dette tidspunkt har dit spil noget funktionalitet! Du kan navigere med piletasterne, affyre en laser med mellemrumstasten, og fjender forsvinder, når du rammer dem. Godt gået! --- @@ -299,7 +299,7 @@ Tilføj en eksplosion! Tag et kig på spilassets i [Space Art-repoet](../../../. ## Gennemgang & Selvstudie -Eksperimenter med intervallerne i dit spil indtil videre. Hvad sker der, når du ændrer dem? Læs mere om [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). +Eksperimentér med intervallerne i dit spil indtil videre. Hvad sker der, når du ændrer dem? Læs mere om [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). ## Opgave @@ -308,4 +308,4 @@ Eksperimenter med intervallerne i dit spil indtil videre. Hvad sker der, når du --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at sikre nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/6-space-game/5-keeping-score/README.md b/translations/da/6-space-game/5-keeping-score/README.md index 8015a25e..de784ec4 100644 --- a/translations/da/6-space-game/5-keeping-score/README.md +++ b/translations/da/6-space-game/5-keeping-score/README.md @@ -1,23 +1,23 @@ # Byg et Rumspil Del 5: Point og Liv -## Quiz før lektion +## Quiz før lektionen -[Quiz før lektion](https://ff-quizzes.netlify.app/web/quiz/37) +[Quiz før lektionen](https://ff-quizzes.netlify.app/web/quiz/37) -I denne lektion vil du lære, hvordan du tilføjer point til et spil og beregner liv. +I denne lektion lærer du, hvordan du tilføjer point til et spil og beregner liv. ## Tegn tekst på skærmen -For at kunne vise en spilscore på skærmen skal du vide, hvordan man placerer tekst på skærmen. Svaret er at bruge metoden `fillText()` på canvas-objektet. Du kan også kontrollere andre aspekter som hvilken skrifttype der skal bruges, tekstens farve og endda dens justering (venstre, højre, center). Nedenfor er der noget kode, der tegner tekst på skærmen. +For at kunne vise en spilscore på skærmen skal du vide, hvordan man placerer tekst på skærmen. Svaret er at bruge `fillText()`-metoden på canvas-objektet. Du kan også styre andre aspekter som hvilken skrifttype, der skal bruges, tekstens farve og endda dens justering (venstre, højre, center). Nedenfor er noget kode, der tegner tekst på skærmen. ```javascript ctx.font = "30px Arial"; @@ -30,14 +30,14 @@ ctx.fillText("show this on the screen", 0, 0); ## Liv som et spilkoncept -Konceptet med at have liv i et spil er blot et tal. I konteksten af et rumspil er det almindeligt at tildele et sæt liv, der bliver trukket fra ét ad gangen, når dit rumskib tager skade. Det er en god idé at vise en grafisk repræsentation af dette, som for eksempel små rumskibe eller hjerter i stedet for et tal. +Konceptet med at have liv i et spil er blot et tal. I konteksten af et rumspil er det almindeligt at tildele et sæt liv, som trækkes fra ét ad gangen, når dit skib tager skade. Det er en god idé at vise en grafisk repræsentation af dette, som for eksempel små skibe eller hjerter i stedet for et tal. ## Hvad skal bygges Lad os tilføje følgende til dit spil: -- **Spilscore**: For hver fjendtlig rumskib, der bliver ødelagt, skal helten tildeles nogle point. Vi foreslår 100 point pr. skib. Spilscoren skal vises nederst til venstre. -- **Liv**: Dit rumskib har tre liv. Du mister et liv, hver gang et fjendtligt rumskib kolliderer med dig. En livscore skal vises nederst til højre og bestå af følgende grafik ![livsbillede](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.da.png). +- **Spilscore**: For hver fjendeskib, der bliver ødelagt, skal helten tildeles nogle point. Vi foreslår 100 point pr. skib. Spilscoren skal vises nederst til venstre. +- **Liv**: Dit skib har tre liv. Du mister et liv, hver gang et fjendeskib kolliderer med dig. En livscore skal vises nederst til højre og bestå af følgende grafik ![livsbillede](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.da.png). ## Anbefalede trin @@ -53,24 +53,24 @@ Find de filer, der er blevet oprettet til dig i undermappen `your-work`. Den bø -| package.json ``` -Start dit projekt i mappen `your_work` ved at skrive: +Du starter dit projekt i mappen `your_work` ved at skrive: ```bash cd your-work npm start ``` -Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åbn en browser og indtast den adresse. Lige nu bør den vise helten og alle fjenderne, og når du trykker på venstre og højre piletaster, bevæger helten sig og kan skyde fjender ned. +Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åbn en browser og indtast den adresse. Lige nu bør den vise helten og alle fjenderne, og når du trykker på dine venstre og højre piletaster, bevæger helten sig og kan skyde fjender ned. ### Tilføj kode -1. **Kopier de nødvendige aktiver** fra mappen `solution/assets/` til mappen `your-work`; du vil tilføje en `life.png`-fil. Tilføj lifeImg til funktionen window.onload: +1. **Kopier de nødvendige ressourcer** fra mappen `solution/assets/` til mappen `your-work`; du skal tilføje en `life.png`-ressource. Tilføj `lifeImg` til `window.onload`-funktionen: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` -1. Tilføj `lifeImg` til listen over aktiver: +1. Tilføj `lifeImg` til listen over ressourcer: ```javascript let heroImg, @@ -82,7 +82,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb 2. **Tilføj variabler**. Tilføj kode, der repræsenterer din samlede score (0) og resterende liv (3), og vis disse scores på skærmen. -3. **Udvid `updateGameObjects()`-funktionen**. Udvid `updateGameObjects()`-funktionen til at håndtere fjendtlige kollisioner: +3. **Udvid `updateGameObjects()`-funktionen**. Udvid `updateGameObjects()`-funktionen til at håndtere fjendekollisioner: ```javascript enemies.forEach(enemy => { @@ -94,7 +94,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb ``` 4. **Tilføj `liv` og `point`**. - 1. **Initialiser variabler**. Under `this.cooldown = 0` i klassen `Hero`, sæt liv og point: + 1. **Initialiser variabler**. Under `this.cooldown = 0` i `Hero`-klassen, sæt liv og point: ```javascript this.life = 3; @@ -128,7 +128,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb ``` - 1. **Tilføj metoder til spil-loopet**. Sørg for at tilføje disse funktioner til din window.onload-funktion under `updateGameObjects()`: + 1. **Tilføj metoder til spilloopet**. Sørg for at tilføje disse funktioner til din `window.onload`-funktion under `updateGameObjects()`: ```javascript drawPoints(); @@ -137,9 +137,9 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb 1. **Implementer spilleregler**. Implementer følgende spilleregler: - 1. **For hver kollision mellem helten og en fjende**, træk et liv fra. + 1. **For hver helt og fjendekollision**, træk et liv fra. - Udvid klassen `Hero` til at gøre dette fradrag: + Udvid `Hero`-klassen til at gøre dette fradrag: ```javascript decrementLife() { @@ -152,7 +152,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb 2. **For hver laser, der rammer en fjende**, øg spilscoren med 100 point. - Udvid klassen Hero til at gøre denne forøgelse: + Udvid `Hero`-klassen til at gøre denne forøgelse: ```javascript incrementPoints() { @@ -175,9 +175,9 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb }); ``` -✅ Lav lidt research for at opdage andre spil, der er lavet med JavaScript/Canvas. Hvad er deres fælles træk? +✅ Lav lidt research for at opdage andre spil, der er lavet med JavaScript/Canvas. Hvad er deres fællestræk? -Når du er færdig med dette arbejde, bør du kunne se de små 'livs'-rumskibe nederst til højre, point nederst til venstre, og du bør se din livstæller falde, når du kolliderer med fjender, og dine point stige, når du skyder fjender. Godt gået! Dit spil er næsten færdigt. +Når du er færdig med dette arbejde, bør du kunne se de små 'livsskibe' nederst til højre, point nederst til venstre, og du bør se din livstæller falde, når du kolliderer med fjender, og dine point stige, når du skyder fjender. Godt gået! Dit spil er næsten færdigt. --- @@ -185,13 +185,13 @@ Når du er færdig med dette arbejde, bør du kunne se de små 'livs'-rumskibe n Din kode er næsten færdig. Kan du forestille dig dine næste skridt? -## Quiz efter lektion +## Quiz efter lektionen -[Quiz efter lektion](https://ff-quizzes.netlify.app/web/quiz/38) +[Quiz efter lektionen](https://ff-quizzes.netlify.app/web/quiz/38) ## Gennemgang & Selvstudie -Undersøg nogle måder, hvorpå du kan øge og mindske spilscorer og liv. Der findes nogle interessante spilmotorer som [PlayFab](https://playfab.com). Hvordan kunne brugen af en af disse forbedre dit spil? +Undersøg nogle måder, hvorpå du kan øge og mindske spilscore og liv. Der findes nogle interessante spilmotorer som [PlayFab](https://playfab.com). Hvordan kunne brugen af en af disse forbedre dit spil? ## Opgave @@ -200,4 +200,4 @@ Undersøg nogle måder, hvorpå du kan øge og mindske spilscorer og liv. Der fi --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på at opnå nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/6-space-game/6-end-condition/README.md b/translations/da/6-space-game/6-end-condition/README.md index 18967214..c9913021 100644 --- a/translations/da/6-space-game/6-end-condition/README.md +++ b/translations/da/6-space-game/6-end-condition/README.md @@ -1,36 +1,36 @@ -# Byg et Rumspil Del 6: Afslutning og Genstart +# Byg et Rumspil Del 6: Afslut og Genstart ## Quiz før forelæsning [Quiz før forelæsning](https://ff-quizzes.netlify.app/web/quiz/39) -Der er forskellige måder at udtrykke en *slutbetingelse* i et spil. Det er op til dig som spillets skaber at definere, hvorfor spillet er slut. Her er nogle mulige grunde, hvis vi antager, at vi taler om det rumspil, du har bygget indtil videre: +Der er forskellige måder at udtrykke en *slutbetingelse* i et spil. Det er op til dig som spilskaber at definere, hvorfor spillet slutter. Her er nogle mulige grunde, hvis vi antager, at vi taler om det rumspil, du har bygget indtil videre: -- **`N` fjendtlige skibe er blevet ødelagt**: Det er ret almindeligt, hvis du deler et spil op i forskellige niveauer, at du skal ødelægge `N` fjendtlige skibe for at fuldføre et niveau. +- **`N` fjendtlige skibe er blevet ødelagt**: Det er ret almindeligt, hvis du opdeler et spil i forskellige niveauer, at du skal ødelægge `N` fjendtlige skibe for at fuldføre et niveau. - **Dit skib er blevet ødelagt**: Der findes helt sikkert spil, hvor du taber, hvis dit skib bliver ødelagt. En anden almindelig tilgang er at have et koncept med liv. Hver gang dit skib bliver ødelagt, mister du et liv. Når alle liv er tabt, taber du spillet. -- **Du har samlet `N` point**: En anden almindelig slutbetingelse er, at du samler point. Hvordan du får point, er op til dig, men det er ret almindeligt at tildele point til forskellige aktiviteter som at ødelægge et fjendtligt skib eller måske samle genstande, som bliver *droppet*, når de ødelægges. -- **Fuldfør et niveau**: Dette kan involvere flere betingelser såsom `X` fjendtlige skibe ødelagt, `Y` point samlet eller måske, at en specifik genstand er blevet samlet. +- **Du har samlet `N` point**: En anden almindelig slutbetingelse er, at du skal samle point. Hvordan du får point, er op til dig, men det er ret almindeligt at tildele point for forskellige aktiviteter som at ødelægge et fjendtligt skib eller måske samle genstande, som bliver *droppet*, når de ødelægges. +- **Fuldfør et niveau**: Dette kan involvere flere betingelser, såsom `X` fjendtlige skibe ødelagt, `Y` point samlet eller måske, at en specifik genstand er blevet samlet. ## Genstart Hvis folk nyder dit spil, vil de sandsynligvis gerne spille det igen. Når spillet slutter af en eller anden grund, bør du tilbyde en mulighed for at genstarte. -✅ Tænk lidt over, under hvilke betingelser du synes, et spil slutter, og hvordan du bliver bedt om at genstarte. +✅ Tænk lidt over, under hvilke betingelser du synes, et spil slutter, og hvordan du bliver opfordret til at genstarte. ## Hvad skal bygges -Du vil tilføje disse regler til dit spil: +Du skal tilføje følgende regler til dit spil: -1. **Vind spillet**. Når alle fjendtlige skibe er blevet ødelagt, vinder du spillet. Derudover skal der vises en form for sejrsmelding. +1. **Vinde spillet**. Når alle fjendtlige skibe er blevet ødelagt, vinder du spillet. Derudover skal der vises en form for sejrsmeddelelse. 1. **Genstart**. Når alle dine liv er tabt, eller spillet er vundet, skal du tilbyde en måde at genstarte spillet på. Husk! Du skal reinitialisere spillet, og den tidligere spiltilstand skal ryddes. ## Anbefalede trin @@ -48,20 +48,20 @@ Find de filer, der er blevet oprettet til dig i undermappen `your-work`. Den bø -| package.json ``` -Start dit projekt i mappen `your_work` ved at skrive: +Du starter dit projekt i mappen `your_work` ved at skrive: ```bash cd your-work npm start ``` -Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åbn en browser og indtast den adresse. Dit spil bør være i en spilbar tilstand. +Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åbn en browser, og indtast den adresse. Dit spil bør være i en spilbar tilstand. -> tip: For at undgå advarsler i Visual Studio Code, rediger funktionen `window.onload` til at kalde `gameLoopId` som den er (uden `let`), og deklarer `gameLoopId` øverst i filen, uafhængigt: `let gameLoopId;` +> tip: For at undgå advarsler i Visual Studio Code skal du redigere funktionen `window.onload` til at kalde `gameLoopId` som den er (uden `let`), og erklære `gameLoopId` øverst i filen uafhængigt: `let gameLoopId;` ### Tilføj kode -1. **Spor slutbetingelse**. Tilføj kode, der holder styr på antallet af fjender, eller om helteskibet er blevet ødelagt ved at tilføje disse to funktioner: +1. **Spor slutbetingelse**. Tilføj kode, der holder styr på antallet af fjender, eller om helteskibet er blevet ødelagt, ved at tilføje disse to funktioner: ```javascript function isHeroDead() { @@ -74,7 +74,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb } ``` -1. **Tilføj logik til beskedhåndtering**. Rediger `eventEmitter` til at håndtere disse betingelser: +1. **Tilføj logik til meddelelseshåndterere**. Rediger `eventEmitter` til at håndtere disse betingelser: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { @@ -108,16 +108,16 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb }); ``` -1. **Tilføj nye beskedtyper**. Tilføj disse beskeder til constants-objektet: +1. **Tilføj nye meddelelsestyper**. Tilføj disse meddelelser til konstantobjektet: ```javascript GAME_END_LOSS: "GAME_END_LOSS", GAME_END_WIN: "GAME_END_WIN", ``` -2. **Tilføj genstartskode**. Tilføj kode, der genstarter spillet ved tryk på en valgt knap. +2. **Tilføj genstartskode** kode, der genstarter spillet ved tryk på en valgt knap. - 1. **Lyt til tastetryk `Enter`**. Rediger din vindues eventListener til at lytte efter dette tryk: + 1. **Lyt efter tastetryk `Enter`**. Rediger din vindues `eventListener` til at lytte efter dette tryk: ```javascript else if(evt.key === "Enter") { @@ -125,7 +125,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb } ``` - 1. **Tilføj genstartsbesked**. Tilføj denne besked til din Messages constant: + 1. **Tilføj genstartsmeddelelse**. Tilføj denne meddelelse til dine meddelelseskonstanter: ```javascript KEY_EVENT_ENTER: "KEY_EVENT_ENTER", @@ -133,9 +133,9 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb 1. **Implementer spilleregler**. Implementer følgende spilleregler: - 1. **Spillerens vindbetingelse**. Når alle fjendtlige skibe er ødelagt, vis en sejrsmelding. + 1. **Spillerens sejrsbetingelse**. Når alle fjendtlige skibe er ødelagt, vis en sejrsmeddelelse. - 1. Først, opret en `displayMessage()`-funktion: + 1. Først skal du oprette en funktion `displayMessage()`: ```javascript function displayMessage(message, color = "red") { @@ -146,7 +146,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb } ``` - 1. Opret en `endGame()`-funktion: + 1. Opret en funktion `endGame()`: ```javascript function endGame(win) { @@ -171,7 +171,7 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb } ``` - 1. **Genstartlogik**. Når alle liv er tabt, eller spilleren har vundet spillet, vis, at spillet kan genstartes. Genstart desuden spillet, når genstartstasten trykkes (du kan beslutte, hvilken tast der skal bruges til genstart). + 1. **Genstartlogik**. Når alle liv er tabt, eller spilleren har vundet spillet, vis, at spillet kan genstartes. Genstart desuden spillet, når genstartstasten trykkes (du kan selv bestemme, hvilken tast der skal bruges til genstart). 1. Opret funktionen `resetGame()`: @@ -210,13 +210,13 @@ Ovenstående vil starte en HTTP-server på adressen `http://localhost:5000`. Åb } ``` -👽 💥 🚀 Tillykke, kaptajn! Dit spil er færdigt! Godt klaret! 🚀 💥 👽 +👽 💥 🚀 Tillykke, Kaptajn! Dit spil er færdigt! Godt klaret! 🚀 💥 👽 --- ## 🚀 Udfordring -Tilføj en lyd! Kan du tilføje en lyd for at forbedre din spiloplevelse, måske når der er et laserhit, eller helten dør eller vinder? Se denne [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) for at lære, hvordan man afspiller lyd med JavaScript. +Tilføj en lyd! Kan du tilføje en lyd for at forbedre din spiloplevelse, måske når der er et laserhit, eller når helten dør eller vinder? Tag et kig på denne [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) for at lære, hvordan man afspiller lyd ved hjælp af JavaScript. ## Quiz efter forelæsning @@ -224,13 +224,13 @@ Tilføj en lyd! Kan du tilføje en lyd for at forbedre din spiloplevelse, måske ## Gennemgang & Selvstudie -Din opgave er at skabe et nyt prøve-spil, så udforsk nogle af de interessante spil derude for at se, hvilken type spil du kunne bygge. +Din opgave er at skabe et nyt eksempelspil, så udforsk nogle af de interessante spil derude for at se, hvilken type spil du kunne bygge. ## Opgave -[Byg et prøve-spil](assignment.md) +[Byg et Eksempelspil](assignment.md) --- **Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse. \ No newline at end of file diff --git a/translations/da/7-bank-project/1-template-route/README.md b/translations/da/7-bank-project/1-template-route/README.md index c9d9b921..fd31ea7a 100644 --- a/translations/da/7-bank-project/1-template-route/README.md +++ b/translations/da/7-bank-project/1-template-route/README.md @@ -1,13 +1,13 @@ -# Byg en Bankapp Del 1: HTML-skabeloner og Ruter i en Webapp +# Byg en bankapp Del 1: HTML-skabeloner og ruter i en webapp ## Quiz før lektionen @@ -15,7 +15,7 @@ CO_OP_TRANSLATOR_METADATA: ### Introduktion -Siden JavaScript blev introduceret i browsere, er hjemmesider blevet mere interaktive og komplekse end nogensinde før. Webteknologier bruges nu ofte til at skabe fuldt funktionelle applikationer, der kører direkte i en browser, og som vi kalder [webapplikationer](https://en.wikipedia.org/wiki/Web_application). Da webapps er meget interaktive, ønsker brugerne ikke at vente på, at hele siden genindlæses, hver gang en handling udføres. Derfor bruges JavaScript til at opdatere HTML direkte via DOM'en for at give en mere gnidningsfri brugeroplevelse. +Siden JavaScript blev introduceret i browsere, er hjemmesider blevet mere interaktive og komplekse end nogensinde før. Webteknologier bruges nu ofte til at skabe fuldt funktionelle applikationer, der kører direkte i en browser, og som vi kalder [webapplikationer](https://en.wikipedia.org/wiki/Web_application). Da webapps er meget interaktive, ønsker brugerne ikke at vente på, at hele siden genindlæses, hver gang en handling udføres. Derfor bruges JavaScript til at opdatere HTML direkte via DOM'en for at give en mere flydende brugeroplevelse. I denne lektion vil vi lægge fundamentet for at skabe en bankwebapp ved at bruge HTML-skabeloner til at lave flere skærme, der kan vises og opdateres uden at genindlæse hele HTML-siden. @@ -25,7 +25,7 @@ Du skal bruge en lokal webserver for at teste den webapp, vi bygger i denne lekt ### Forberedelse -På din computer skal du oprette en mappe kaldet `bank` med en fil ved navn `index.html` indeni. Vi starter med denne HTML [grundstruktur](https://en.wikipedia.org/wiki/Boilerplate_code): +På din computer skal du oprette en mappe kaldet `bank` med en fil ved navn `index.html` indeni. Vi starter med denne HTML-[grundstruktur](https://en.wikipedia.org/wiki/Boilerplate_code): ```html @@ -45,26 +45,26 @@ På din computer skal du oprette en mappe kaldet `bank` med en fil ved navn `ind ## HTML-skabeloner -Hvis du vil oprette flere skærme til en webside, kunne en løsning være at lave én HTML-fil for hver skærm, du vil vise. Men denne løsning har nogle ulemper: +Hvis du vil oprette flere skærme til en webside, kunne en løsning være at lave en HTML-fil for hver skærm, du vil vise. Denne løsning har dog nogle ulemper: -- Hele HTML'en skal genindlæses, når du skifter skærm, hvilket kan være langsomt. +- Du skal genindlæse hele HTML'en, når du skifter skærm, hvilket kan være langsomt. - Det er svært at dele data mellem de forskellige skærme. -En anden tilgang er at have kun én HTML-fil og definere flere [HTML-skabeloner](https://developer.mozilla.org/docs/Web/HTML/Element/template) ved hjælp af `