## Oppgave
Du arbeider med en produktside hvor du skal vise produktinformasjon og la brukere veksle tilgjengelighetsstatus.
1. Sett produktnavnet til `"Smartphone"`;
2. Sett startprisen til `"499.99"`;
3. **Veksle tilgjengelighetsstatus ved hjelp av attributter**: Når knappen klikkes:
   - Sjekk om `<button>` har attributtet `data-available`;
   - Hvis `data-available` er til stede, fjern det og oppdater tekstinnholdet til `"Unavailable"`.
   - Hvis `data-available` ikke er til stede, legg det til med verdien `"true"` og oppdater tekstinnholdet til `"Available"`.
4. **Vis tilgjengelighetsstatus**:
   - Sjekk om attributtet `data-available` er til stede på knappen;
   - Vis `"In Stock"` i `availability-status` hvis `data-available` er til stede, eller `"Out of Stock"` hvis det ikke er det.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdBcmlhbCcsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YwZjJmNTsKICBtYXJnaW46IDA7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6ICMzMzM7Cn0KCiNwcm9kdWN0LW5hbWUgewogIGZvbnQtc2l6ZTogMnJlbTsKICBjb2xvcjogIzJhN2JjNzsKICBtYXJnaW4tYm90dG9tOiAxcmVtOwp9CgpwIHsKICBmb250LXNpemU6IDEuMXJlbTsKICBjb2xvcjogIzU1NTsKfQoKaW5wdXRbdHlwZT0ndGV4dCddIHsKICBwYWRkaW5nOiA1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNHB4OwogIHdpZHRoOiAxMDBweDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbi10b3A6IDEwcHg7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDRweDsKICBjb2xvcjogI2ZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDk1MzRmOwogIGN1cnNvcjogcG9pbnRlcjsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZTsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzVjYjg1YzsKfQoKYnV0dG9uOmhvdmVyIHsKICBvcGFjaXR5OiAwLjk7Cn0KCiNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBmb250LXdlaWdodDogYm9sZDsKICBjb2xvcjogI2Q5NTM0ZjsKfQoKYnV0dG9uW2RhdGEtYXZhaWxhYmxlXSArICNhdmFpbGFiaWxpdHktc3RhdHVzIHsKICBjb2xvcjogIzVjYjg1YzsKfQ==

Ly8gU2V0IHByb2R1Y3QgbmFtZQpjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUuX19fX18gPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UuX19fX18gPSBfX19fXzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKQogID8gJ0luIFN0b2NrJwogIDogJ091dCBvZiBTdG9jayc7CgphdmFpbGFiaWxpdHlCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgaWYgKGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykpIHsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXygnZGF0YS1hdmFpbGFibGUnKTsKICAgIGF2YWlsYWJpbGl0eUJ0bi5fX19fXyA9ICdVbmF2YWlsYWJsZSc7CiAgICBhdmFpbGFiaWxpdHlTdGF0dXMudGV4dENvbnRlbnQgPSAnT3V0IG9mIFN0b2NrJzsKICB9IGVsc2UgewogICAgYXZhaWxhYmlsaXR5QnRuLl9fX19fKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

- Bruk `textContent` for å sette produktnavnet til `"Smartphone"`;
- Bruk `value` for å sette startprisen til `"499.99"`.
- Bruk `hasAttribute` for å sjekke om `<button>` har attributtet `data-available`;
- Hvis `data-available` er til stede, bruk `removeAttribute` for å fjerne det og oppdater `textContent` til `"Unavailable"`;
- Hvis `data-available` ikke er til stede, bruk `setAttribute` for å legge det til med verdien `"true"` og oppdater `textContent` til `"Available"`.
- Bruk `getAttribute` for å sjekke om attributtet `data-available` er til stede på knappen.

Ly8gU2V0IHByb2R1Y3QgbmFtZSB1c2luZyB0ZXh0Q29udGVudApjb25zdCBwcm9kdWN0TmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdwcm9kdWN0LW5hbWUnKTsKcHJvZHVjdE5hbWUudGV4dENvbnRlbnQgPSAnU21hcnRwaG9uZSc7CgovLyBTZXQgcHJvZHVjdCBwcmljZSB1c2luZyB2YWx1ZQpjb25zdCBwcm9kdWN0UHJpY2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncHJvZHVjdC1wcmljZScpOwpwcm9kdWN0UHJpY2UudmFsdWUgPSAnNDk5Ljk5JzsKCi8vIFRvZ2dsZSBhdmFpbGFiaWxpdHkgc3RhdHVzIHVzaW5nIGF0dHJpYnV0ZXMKY29uc3QgYXZhaWxhYmlsaXR5U3RhdHVzID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1zdGF0dXMnKTsKY29uc3QgYXZhaWxhYmlsaXR5QnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2F2YWlsYWJpbGl0eS1idG4nKTsKCmF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9IGF2YWlsYWJpbGl0eUJ0bi5oYXNBdHRyaWJ1dGUoJ2RhdGEtYXZhaWxhYmxlJykKICA/ICdJbiBTdG9jaycKICA6ICdPdXQgb2YgU3RvY2snOwoKYXZhaWxhYmlsaXR5QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGlmIChhdmFpbGFiaWxpdHlCdG4uaGFzQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpKSB7CiAgICBhdmFpbGFiaWxpdHlCdG4ucmVtb3ZlQXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScpOwogICAgYXZhaWxhYmlsaXR5QnRuLnRleHRDb250ZW50ID0gJ1VuYXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdPdXQgb2YgU3RvY2snOwogIH0gZWxzZSB7CiAgICBhdmFpbGFiaWxpdHlCdG4uc2V0QXR0cmlidXRlKCdkYXRhLWF2YWlsYWJsZScsICd0cnVlJyk7CiAgICBhdmFpbGFiaWxpdHlCdG4udGV4dENvbnRlbnQgPSAnQXZhaWxhYmxlJzsKICAgIGF2YWlsYWJpbGl0eVN0YXR1cy50ZXh0Q29udGVudCA9ICdJbiBTdG9jayc7CiAgfQp9KTs=

Behersk grunnleggende JavaScript-konsepter, inkludert klasser, DOM-manipulering, hendelseshåndtering og asynkron programmering. Lær å lage dynamiske og interaktive webapplikasjoner ved å håndtere brukerinteraksjoner, hente og vise data, samt effektivt håndtere asynkrone operasjoner. Gjennom en kombinasjon av teori, praktiske utfordringer og eksempler fra virkeligheten gir dette kurset deg de praktiske ferdighetene som kreves for moderne webutvikling.

Lær det grunnleggende om JavaScript-klasser, fra klassedeklarasjoner til å definere metoder som utvider funksjonaliteten. Oppdag hvordan du bruker parameterobjekter effektivt, håndterer private egenskaper og kontrollerer tilgang med getters og setters. Mestre statiske egenskaper og statiske metoder, og utnytt kraften i klassearv ved å bruke "extends" og "super()" for å bygge skalerbar og gjenbrukbar kode.

Behersk DOM-manipulering for å lage dynamiske, interaktive webapplikasjoner. Naviger og endre DOM-strukturen, oppdater innhold dynamisk, og implementer beste praksis for sikkerhet og ytelse. Skille mellom egenskaper og attributter for å optimalisere koden din.

Lås opp interaktiviteten i dine webapplikasjoner ved å mestre JavaScript-hendelser. Forstå hendelsespropagering, kontroller hendelsesatferd, og implementer effektiv hendelseshåndtering for brukerinteraksjoner. Optimaliser ytelsen med avanserte teknikker som hendelsesdelegering.

Fordypning i asynkron JavaScript, inkludert callbacks, Promises og async/await. Lær hvordan du henter data fra API-er, integrerer tredjepartsbiblioteker og håndterer flere forespørsler effektivt, for å utvikle ferdigheter i å lage datadrevne applikasjoner.

Utfordring: Håndtere Elementegenskaper og Attributter

Oppgave

Awesome!

Utfordring: Håndtere Elementegenskaper og Attributter

Oppgave