JavaScript · HTML · Atkļūdošana

Uzdevumu Izziņas
Materiāls

Trīs uzdevumu analīze — kas notiek un kādas kļūdas slēpjas "nepareizajos" failos. Ievadi katra uzdevuma slepeno vārdu, lai redzētu atbildi.

⚙️ Sākšanas instrukcija

Lejupielādē visus failus uzreiz, savieto pareizā mapju struktūrā un atver pārlūkā — viss gatavs!

1
Lejupielādē visus failus
Nospied pogu — tiks lejupielādēti visi nepieciešamie faili uzreiz.
Tiks lejupielādēti: 1uzd_nepareizi.html · 2uzd_nepareizi.html · 3uzd_nepareizi.html · 1uzd_scripts.js · 2uzd_scripts.js · 3uzd_scripts.js · styles.css
2
Izveido šādu mapju struktūru
Izveido mapi uzdevumi/. Iekšā izveido apakšmapi js/. HTML un CSS failus liec mapē uzdevumi/, JS failus — mapē uzdevumi/js/.
📁 uzdevumi/
├── 📄 1uzd_nepareizi.html
├── 📄 2uzd_nepareizi.html
├── 📄 3uzd_nepareizi.html
├── 🎨 styles.css
└── 📁 js/
    ├── ⚡ 1uzd_scripts.js
    ├── ⚡ 2uzd_scripts.js
    └── ⚡ 3uzd_scripts.js
3
Atver uzdevumu pārlūkā
Veic dubultklikšķi uz vajadzīgā _nepareizi.html faila — tas atvērsies pārlūkprogrammā. Mēģini atrast kļūdas un salabo kodu, lai poga darbotos!
4
Izmanto pārlūka izstrādātāja rīkus
Nospied F12 (vai Cmd+Option+I uz Mac), lai atvērtu DevTools. Skatīties Console kļūdu ziņojumus — tie palīdzēs atrast, kas nestrādā. Kad kods strādā pareizi, konsolē parādīsies vārds ar emoji!
01
🚀Pirmais lidojums!
Raķetes palaišanas simulācija — noklikšķinot pogu, tiek atšifrēts pirmais slepenais vārds
Kas notiek
Lapa parāda pogu "PALAIŽ RAKETI!".
Kļūdas nepareizajā failā (1uzd_nepareizi.html)
JS KĻŪDA
Nepareizs elementa ID
HTML pogas ID ir launchButton, bet JS meklē launchBtn — addEventListener tiek izsaukts uz null un kods nobrūk.
CSS KĻŪDA
Trūkst animācija uz #result
Pareizajā failā #result ir animation: glow 1s infinite. Nepareizajā — šī īpašība iztrūkst, tādēļ mirgošanas efekts nestrādā.
var launchBtn = document.getElementById( 'launchBtn' 'launchButton' );
✅ Pareizā atbilde — 1. vārds
Base64 dekodēts vārds programmēt

Base64: cHJvZ3JhbW3Ek3Q= → UTF-8 dekodēšana → programmēt

🔐 Ievadi 1. uzdevuma slepeno vārdu, lai redzētu atbildi
❌ Nepareizi! Mēģini vēlreiz.
✅ Pareizi! Atbilde atslēgta.
02
🔮Nākotnes prognoze!
Ievadot vecumu un nospiežot pogu, tiek parādīts otrais slepenais vārds ar atklāšanas animāciju
Kas notiek
Lietotājs ievada savu vecumu. Pēc pogas nospiešanas skripts pārbauda, vai lauks nav tukšs un izvada slepeno vārdu.
Kļūdas nepareizajā failā (2uzd_nepareizi.html)
JS KĻŪDA
Nepareizs elementa ID
Mainīgais tiek iestatīts uz getElementById('checkBtn'), bet HTML elementam ir ID checkButton — atgriež null.
HTML KĻŪDA
Neaizvērts <script> tags
Pirmajā <script> blokā trūkst aizvēršanas taga — nākamais <script src="..."> tiek uzskatīts par iekšējo kodu, nevis ārēja faila ielādi.
CSS KĻŪDA
Trūkst reveal animācija
Pareizajā failā ir .reveal klase un @keyframes reveal. Nepareizajā — to nav.
var checkButton = document.getElementById( 'checkBtn' 'checkButton' ); // + aizverošais </script> ir jāpievieno
✅ Pareizā atbilde — 2. vārds
Base64 dekodēts vārds ir

Base64: SmEgdHUgYsWrc2kg... → Ja tu būsi foršs programmētājs un slepenais vārdiņš būs (IR)

🔐 Ievadi 2. uzdevuma slepeno vārdu, lai redzētu atbildi
❌ Nepareizi! Mēģini vēlreiz.
✅ Pareizi! Atbilde atslēgta.
03
🌈Padari to foršu!
Vizuālā efektu lapa — nospiežot pogu, tiek ielādēts trešais slepenais vārds ar varavīksnes animāciju
Kas notiek
Lapa izmanto ārējo styles.css failu ar komiksu fontu, gradienta pogu un varavīksnes animāciju.
Kļūdas nepareizajā failā (3uzd_nepareizi.html)
HTML KĻŪDA
CSS fails ar nepareizu nosaukumu
href="style.css" vietā vajag href="styles.css" — trūkst "s", stili netiek ielādēti.
HTML KĻŪDA
Trūkst = zīme atribūtā
div id"cool" vietā vajag div id="cool" — elements tiek izveidots bez ID, JS nevar to atrast.
HTML KĻŪDA
Neaizvērts div tags
Aizvēršanas tagā trūkst /, <div> vietā jābūt </div>.
JS KĻŪDA
Nepareizs elementa ID
JS meklē getElementById('funBtn'), bet HTML elementam ID ir funButton.
href="style.css" href="styles.css" div id"cool"><div> div id="cool"></div> getElementById('funBtn') getElementById('funButton')
✅ Pareizā atbilde — 3. vārds
UTF-8 dekodēts vārds (ar speciālu rakstzīmi) forši

Base64: Zm9yxaFp → Uint8Array UTF-8 → forši

🔐 Ievadi 3. uzdevuma slepeno vārdu, lai redzētu atbildi
❌ Nepareizi! Mēģini vēlreiz.
✅ Pareizi! Atbilde atslēgta.

Uzdevumu kopējā jēga

Šie trīs uzdevumi māca atkļūdošanu — vienu no svarīgākajām programmētāja prasmēm. Katrs uzdevums satur tīšas kļūdas, kuras jāatrod un jālabo, lai kods strādātu pareizi.

getElementById()
ID starp HTML un JS jāsakrīt precīzi — lielajiem burtiem ir nozīme
HTML struktūra
Katrs atvērts tags jāaizver. Atribūtos = zīme ir obligāta.
CSS animācijas
@keyframes un animation īpašības rada dzīvīgumu
Ārējie faili
Failu nosaukumiem jāsakrīt precīzi — styles.css ≠ style.css
🏆 Slēptā frāze — apvienojot visus 3 uzdevumus
programmēt
ir
forši

"Programmētājs ir forši" — tu to atklāji!