## Opgave
Du arbejder på en produktside, hvor du skal vise produktinformation og give brugerne mulighed for at skifte tilgængelighedsstatus.
1. Angiv produktnavnet til `"Smartphone"`;
2. Angiv startprisen til `"499.99"`;
3. **Skift tilgængelighedsstatus ved hjælp af attributter**: Når knappen klikkes:
   - Kontroller om `<button>` har attributten `data-available`;
   - Hvis `data-available` er til stede, fjern den og opdater tekstindholdet til `"Unavailable"`.
   - Hvis `data-available` ikke er til stede, tilføj den med værdien `"true"` og opdater tekstindholdet til `"Available"`.
4. **Vis tilgængelighedsstatus**:
   - Kontroller om attributten `data-available` er til stede på knappen;
   - Vis `"In Stock"` i `availability-status`, hvis `data-available` er til stede, eller `"Out of Stock"` hvis den ikke er.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxIGlkPSJwcm9kdWN0LW5hbWUiPjwvaDE+CiAgICA8cD5QcmljZTogJDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0icHJvZHVjdC1wcmljZSIgLz48L3A+CiAgICA8YnV0dG9uIGlkPSJhdmFpbGFiaWxpdHktYnRuIj5VbmF2YWlsYWJsZTwvYnV0dG9uPgogICAgPHA+U3RhdHVzOiA8c3BhbiBpZD0iYXZhaWxhYmlsaXR5LXN0YXR1cyI+PC9zcGFuPjwvcD4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjJmNTsKICBtYXJnaW46IDA7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6ICMzMzM7Cn0KCiNwcm9kdWN0LW5hbWUgewogIGZvbnQtc2l6ZTogMnJlbTsKICBjb2xvcjogIzJhN2JjNzsKICBtYXJnaW4tYm90dG9tOiAxcmVtOwp9CgpwIHsKICBmb250LXNpemU6IDEuMXJlbTsKICBjb2xvcjogIzU1NTsKfQoKaW5wdXRbdHlwZT0ndGV4dCddIHsKICBwYWRkaW5nOiA1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIHdpZHRoOiAxMDBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IDEwcHg7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDk1MzRmOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzVjYjg1YzsKfQoKYnV0dG9uOmhvdmVyIHsKICBvcGFjaXR5OiAwLjk7Cn0KCiNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBmb250LXdlaWdodDogYm9sZDsKICBjb2xvcjogI2Q5NTM0ZjsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSArICNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBjb2xvcjogIzVjYjg1YzsKfQ==

Ly8gU2V0IHByb2R1Y3QgbmFtZQpjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUuX19fX18gPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UuX19fX18gPSBfX19fXzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKQogID8gJ0luIFN0b2NrJwogIDogJ091dCBvZiBTdG9jayc7CgphdmFpbGFiaWxpdHlCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgaWYgKGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykpIHsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKTsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXyA9ICdVbmF2YWlsYWJsZSc7CiAgICBhdmFpbGFiaWxpdHlTdGF0dXMudGV4dENvbnRlbnQgPSAnT3V0IG9mIFN0b2NrJzsKICB9IGVsc2UgewogICAgYXZhaWxhYmlsaXR5QnRuLl9fX19fKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

- Brug `textContent` til at sætte produktnavnet til `"Smartphone"`;
- Brug `value` til at sætte startprisen til `"499.99"`.
- Brug `hasAttribute` til at kontrollere, om `<button>` har attributten `data-available`;
- Hvis `data-available` er til stede, brug `removeAttribute` til at fjerne den og opdater `textContent` til `"Unavailable"`;
- Hvis `data-available` ikke er til stede, brug `setAttribute` til at tilføje den med værdien `"true"` og opdater `textContent` til `"Available"`.
- Brug `getAttribute` til at kontrollere, om attributten `data-available` er til stede på knappen.

Ly8gU2V0IHByb2R1Y3QgbmFtZSB1c2luZyB0ZXh0Q29udGVudApjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUudGV4dENvbnRlbnQgPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZSB1c2luZyB2YWx1ZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UudmFsdWUgPSAnNDk5Ljk5JzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykKICA/ICdJbiBTdG9jaycKICA6ICdPdXQgb2YgU3RvY2snOwoKYXZhaWxhYmlsaXR5QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGlmIChhdmFpbGFiaWxpdHlCdG4uaGFzQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpKSB7CiAgICBhdmFpbGFiaWxpdHlCdG4ucmVtb3ZlQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpOwogICAgYXZhaWxhYmlsaXR5QnRuLnRleHRDb250ZW50ID0gJ1VuYXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdPdXQgb2YgU3RvY2snOwogIH0gZWxzZSB7CiAgICBhdmFpbGFiaWxpdHlCdG4uc2V0QXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

Behersk væsentlige JavaScript-koncepter, herunder klasser, DOM-manipulation, eventhåndtering og asynkron programmering. Lær at skabe dynamiske og interaktive webapplikationer ved at håndtere brugerinteraktioner, hente og vise data samt håndtere asynkrone operationer effektivt. Gennem en kombination af teori, praktiske udfordringer og virkelighedsnære eksempler giver dette kursus dig de praktiske færdigheder, der er nødvendige for moderne webudvikling.

Lær grundlæggende JavaScript-klasser, fra klassedeklarationer til definition af metoder, der udvider funktionaliteten. Opdag, hvordan parameterobjekter anvendes effektivt, håndtering af private egenskaber og adgangskontrol med getters og setters. Behersk statiske egenskaber og statiske metoder, og udnyt styrken ved klassearv ved brug af "extends" og "super()" til at opbygge skalerbar og genanvendelig kode.

Behersk DOM-manipulation for at skabe dynamiske, interaktive webapplikationer. Naviger og modificer DOM-strukturen, opdater indhold dynamisk, og implementer bedste praksis for sikkerhed og ydeevne. Skeln mellem egenskaber og attributter for at optimere din kode.

Lås op for interaktiviteten i dine webapplikationer ved at mestre JavaScript-hændelser. Forstå hændelsespropagering, kontroller hændelsesadfærd, og implementer effektiv hændelseshåndtering for brugerinteraktioner. Optimer ydeevnen med avancerede teknikker som hændelsesdelegering.

Dyk ned i asynkron JavaScript, herunder callbacks, Promises og async/await. Lær at hente data fra API'er, integrere tredjepartsbiblioteker og håndtere flere forespørgsler effektivt, hvilket opbygger færdigheder til at skabe datadrevne applikationer.

Udfordring: Håndtering af Elementegenskaber og Attributter

Opgave

Udfordring: Håndtering af Elementegenskaber og Attributter

Opgave