diff --git a/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md index dce0fcc7c..0ddf48f09 100644 --- a/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,64 +1,246 @@ -# Sissejuhatus programmeerimiskeeltesse ja tööriistadesse +# Sissejuhatus programmeerimiskeeltesse ja kaasaegsesse arendustööriistadesse + +Tere tulemast, tulevane arendaja! 👋 Kas tohin sulle midagi rääkida, mis ikka veel igal päeval külmavärinaid tekitab? Sa oled just avastamas, et programmeerimine ei ole ainult arvutite jaoks – see on tegelike supervõimete omandamine oma metsikumaid ideid ellu viimiseks! + +Sa tead seda hetke, kui kasutad oma lemmikrakendust ja kõik lihtsalt klapib täiesti täiuslikult? Kui vajutad nuppu ja juhtub midagi täiesti maagilist, mis paneb sind mõtlema "Wau, kuidas nad seda TEGID?" No keegi, kellel on sina moodi – tõenäoliselt oma lemmikkohvikus kell 2 öösel, joob oma kolmandat espresso – kirjutas just selle koodi, mis selle maagia lõi. Ja siin on see, mis su meeled pea peale pöörab: selle tunni lõpuks sa mitte ainult ei mõista, kuidas nemad seda tegid, vaid sul on ka isu ise proovida! + +Kuule, ma saan täiesti aru, kui programmeerimine tundub praegu hirmutav. Kui ma esimest korda alustasin, arvasin ausalt, et pead olema mingi matemaatikageenius või kodeerima hakkama juba viieaastaselt. Aga siin on see, mis mu vaatepunkti täiesti muutis: programmeerimine on täpselt nagu uue keele õppimine, et pidada vestlusi. Sa alustad "tere" ja "aitäh" sõnadega, siis jõuad kohvi tellimiseni ja enne kui aru saad, arutad sügavaid filosoofilisi teemasid! Ainult et siin räägid sa arvutitega, ja ausalt? Nemad on kõige kannatlikumad vestluspartnerid üldse – nad ei hinnangu sinu vigu ja on alati valmis uuesti proovima! + +Täna uurime uskumatuid tööriistu, mis teevad kaasaegse veebi arendamise mitte ainult võimalikuks, vaid väga sõltuvust tekitavaks. Räägin täpselt nendest samadest editoridest, brauseritest ja töövoogudest, mida kasutavad Netflixi, Spotify ja sinu lemmik sõltumatu rakenduse stuudio arendajad iga päev. Ja siin on osa, mis paneb sind rõõmust tantsima: enamik neist professionaalsest klassist ja tööstusharu standarditest tööriistadest on täiesti tasuta! + +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.et.png) +> Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Teie programmeerimise teekond täna + section Avastamine + Mis on programmeerimine: 5: You + Programmeerimiskeeled: 4: You + Tööriistade ülevaade: 5: You + section Uurimine + Koodiredaktorid: 4: You + Brauserid & DevTööriistad: 5: You + Käsklusrida: 3: You + section Harjutamine + Keele detektiiv: 4: You + Tööriistade uurimine: 5: You + Kogukonnaga ühenduse loomine: 5: You +``` +## Vaatame, mida sa juba tead! + +Enne kui sukeldume lõbusasse ossa, olen uudishimulik – mida sa sellest programmeerimise maailmast juba tead? Ja kuule, kui sa vaatad neid küsimusi ja mõtled "mul pole sellest mitte vähimatki aimu", siis see ei ole mitte ainult okei, vaid ideaalne! See tähendab, et sa oled täiesti õiges kohas. Mõtle sellele viktoriinile nagu venitusele enne trenni – me lihtsalt soojendame neid ajulihaseid! + +[Võta eelmise tunni viktoriin](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) + +## Seiklus, millele me koos asume + +Ok, ma olen tõesti elevil selle üle, mida me täna avastame! Ausalt, ma sooviksin näha sinu nägu, kui mõned neist mõistetest klapivad. Siin on see uskumatu teekond, kuhu me koos läheme: + +- **Mis programmeerimine tegelikult on (ja miks see on lahedaim asi üldse!)** – Avastame, kuidas kood on sõna otseses mõttes nähtamatu maagia, mis paneb sinu ümber kõik tööle, alates äratusest, mis kuidagi teab, et on esmaspäeva hommik, kuni algoritmini, mis ideaalselt kureerib sinu Netflixi soovitused +- **Programmeerimiskeeled ja nende hämmastavad isiksused** – Kujuta ette, et lähed peole, kus igaühel on täiesti erinevad supervõimed ja probleemide lahendamise viisid. Nii ongi programmeerimiskeelte maailm ja sulle meeldib neiga kohtuda! +- **Põhilised koostisosad, mis muudavad digitaalse maagia võimalikuks** – Mõtle neile kui ülimale loomingulisele LEGO komplektile. Kui sa mõistad, kuidas need tükid kokku sobivad, siis saad sõna otseses mõttes luua kõike, mida su fantaasia välja mõtleb +- **Professionaalsed tööriistad, mis panevad sind tundma nagu oleksid võlukepp kätte saanud** – Ma ei liialda siin – need tööriistad panevad sind tõesti tundma, nagu sul oleksid supervõimed, ja parim osa? Need on täpselt samad, mida tõsised proffid kasutavad! + +> 💡 **Siin on asi**: Ära isegi mõtle kõike täna pähe õppida! Praegu tahan lihtsalt, et tunneksid seda põnevat sädet, mis väljendab kõike seda, mis võimalik on. Detailid tulevad loomulikult meelde, kui harjutame koos – nii õige õppimine käib! + +> Sa võid selle tunni võtta [Microsoft Learn’is](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! + +## Misasi on programmeerimine täpsemalt? -See õppetund käsitleb programmeerimiskeelte põhialuseid. Siin käsitletavad teemad kehtivad enamiku tänapäevaste programmeerimiskeelte kohta. Jaotises "Tööriistad" õpid tundma kasulikku tarkvara, mis aitab sind arendajana. +Okei, võtame käsile miljoni-dollarilise küsimuse: mis see programmeerimine tegelikult on? -![Intro Programmeerimine](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.et.png) -> Sketšimärkus: [Tomomi Imura](https://twitter.com/girlie_mac) +Annan sulle loo, mis täiesti muutis mu mõtteviisi. Eelmisel nädalal proovisin emale seletada, kuidas kasutada meie uut nutikat teleri puldit. Leidsin end ütlemas asju nagu „Vajuta punast nuppu, aga mitte seda suurt punast nuppu, vaid väikest punast nuppu vasakul... ei, sinu teine vasak... okei, nüüd hoia seda kaks sekundit, mitte üks, mitte kolm...” Kas see kõlab tuttavalt? 😅 -## Eeltest -[Eeltest](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +See ongi programmeerimine! See on kunst anda äärmiselt detailseid, samm-sammult juhiseid millelegi, mis on väga võimas, aga vajab kõike täpselt sõnastatult. Ainult et selle asemel, et seletada emale (kes võib küsida „milline punane nupp?!“), seletad sa arvutile (kes teeb täpselt, mida sa ütled, isegi kui see, mida sa ütlesid, pole päris see, mida sa mõtlesid). -## Sissejuhatus +Siin on see, mis mind esimest korda uskumatult imestama pani: arvutid on sisuliselt üsna lihtsad. Nad mõistavad ainult kahte asja – 1 ja 0, mis on põhimõtteliselt „jah“ ja „ei“ või „sees“ ja „väljas“. See ongi kõik! Aga siin muutub asi maagiliseks – me ei pea rääkima 1-de ja 0-de keeles nagu The Matrix’is. Siin tulevad appi **programmeerimiskeeled**. Need on nagu parim tõlk maailmas, kes võtab sinu täiesti normaalsed inimmõtted ja tõlgib need arvuti keelde. -Selles õppetunnis käsitleme: +Ja siin on see, mis annab mulle igal hommikul tegelikult külmavärinad: sõna otseses mõttes *kõik* digitaalne sinu elus algas kellegagi nagu sina, tõenäoliselt pidžaamas, kohvitassi kõrval, tippimas koodi oma sülearvutisse. See Instagrami filter, mis paneb sind ideaalsena välja nägema? Keegi kirjutas selle koodi. Soovitus, mis viis sind su uue lemmiklauluni? Arendaja ehitas selle algoritmi. Rakendus, mis aitab sul sõpradega õhtusöögi arveid jagada? Jep, keegi mõtles „see on tüütu, ma arvan, et suudan selle parandada“ ja siis... nad tegidki seda! -- Mis on programmeerimine? -- Programmeerimiskeelte tüübid -- Programmi põhielemendid -- Kasulik tarkvara ja tööriistad professionaalsele arendajale +Kui õpid programmeerima, ei omanda sa mitte ainult uut oskust – sa muutud osaks sellest uskumatust probleemilahendajate kogukonnast, kes veedavad oma päevi mõeldes: „Mis oleks, kui saaksin midagi ehitada, mis teeb kellegi päeva lihtsalt natuke paremaks?“ Ausalt, kas midagi lahedamat ongi olemas? -> Võid selle õppetunni läbida [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) platvormil! +✅ **Lõbus faktide otsing**: Siin on midagi väga lahedat, mida võid otsida, kui on vaba hetk – kes sa arvad oli maailma esimene arvutiprogrammeerija? Ma annan vihje: see ei pruugi olla see, keda sa ootad! Selle inimese lugu on absoluutselt põnev ja näitab, et programmeerimine on alati olnud loov probleemilahendus ja kastist välja mõtlemine. -## Mis on programmeerimine? +### 🧠 **Kiirülevaade: Kuidas Sul läheb?** -Programmeerimine (tuntud ka kui kodeerimine) on protsess, kus kirjutatakse juhiseid seadmele, näiteks arvutile või mobiilseadmele. Me kirjutame need juhised programmeerimiskeeles, mida seade seejärel tõlgendab. Neid juhiste kogumeid võib nimetada erinevate nimedega, näiteks *programm*, *arvutiprogramm*, *rakendus (app)* ja *käivitatav fail*. +**Võta hetk, et reflekteerida:** +- Kas mõte "arvutitele juhiste andmisest" tundub nüüd arusaadav? +- Kas tead mõnda igapäevast ülesannet, mida tahaksid programmeerimise abil automatiseerida? +- Millised küsimused sul selles programmeerimise teemas praegu kerkivad? -*Programm* võib olla mis tahes, mis on kirjutatud koodiga; veebilehed, mängud ja telefonirakendused on programmid. Kuigi on võimalik luua programm ilma koodi kirjutamata, tõlgendab seade siiski aluseks olevat loogikat, mis tõenäoliselt on kirjutatud koodiga. Programm, mis *käivitab* või *täidab* koodi, viib juhised ellu. Seade, millega sa seda õppetundi loed, käitab programmi, et kuvada seda ekraanil. +> **Pea meeles**: On täiesti normaalne, kui mõned mõisted tunduvad praegu ebaselged. Programmeerimise õppimine on nagu uue keele õppimine – ajul kulub aega, et luua need närvivõrgud. Sa teed suurepärast tööd! -✅ Tee veidi uurimistööd: kes peetakse maailma esimeseks arvutiprogrammeerijaks? +## Programmeerimiskeeled on nagu erinevad maagia maitsed -## Programmeerimiskeeled +Ok, see võib kõlada veidralt, aga kuula mind – programmeerimiskeeled on väga sarnased erinevatele muusikastiilidele. Mõtle sellele: on jazz, mis on sujuv ja improvisatoorne; rock, mis on võimas ja otsekohene; klassika, mis on elegantne ja struktureeritud; ja hip-hop, mis on loominguline ja väljendusrikas. Igal stiilil on oma vibe, oma kirglike fännide kogukond ja igaüks sobib erinevatele meeleoludele ja sündmustele. -Programmeerimiskeeled võimaldavad arendajatel kirjutada juhiseid seadmele. Seadmed mõistavad ainult binaarkoodi (1 ja 0), kuid *enamiku* arendajate jaoks pole see väga tõhus viis suhtlemiseks. Programmeerimiskeeled on vahend suhtlemiseks inimeste ja arvutite vahel. +Programmeerimiskeeled töötavad täpselt samamoodi! Sa ei kasutaks sama keelt, et teha lõbusat mobiilimängu, mida kasutad tohutu kliimaandmete töötlemiseks, just nagu sa ei mängiks death metali joogaklassis (no, enamasti mitte! 😄). -Programmeerimiskeeled on erinevates vormingutes ja võivad täita erinevaid eesmärke. Näiteks JavaScripti kasutatakse peamiselt veebirakenduste jaoks, samas kui Bash on peamiselt operatsioonisüsteemide jaoks. +Aga siin on see, mis mind iga kord täielikult hämmastab: need keeled on nagu kõige kannatlikumad ja geniaalsemad tõlgid maailmas, kes istuvad su kõrval. Sa saad väljendada oma ideid viisil, mis tundub loomulik sinu inimese ajule, ja nemad teevad kogu uskumatult keeruka töö selle tõlkimisel 1-deks ja 0-deks, mida arvutid tõesti räägivad. See on nagu sõber, kes on täiesti ladus mõlemas – „inimloomingus“ ja „arvutilogikas“ – ja ta ei väsigi kunagi, ei vaja kohvipause ega mõista sind hukka, kui küsid sama küsimust kaks korda! -*Madala taseme keeled* vajavad tavaliselt vähem samme, et seade juhiseid tõlgendaks, kuid *kõrge taseme keeled* on populaarsed oma loetavuse ja toe tõttu. JavaScripti peetakse kõrge taseme keeleks. +### Populaarsed programmeerimiskeeled ja nende kasutusvaldkonnad -Järgmine kood näitab erinevust kõrge taseme keele (JavaScript) ja madala taseme keele (ARM assembleri kood) vahel. +```mermaid +mindmap + root((Programmeerimiskeeled)) + Veebiarendus + JavaScript + Esiplaanimaagia + Interaktiivsed Veebisaidid + TypeScript + JavaScript + Tüübid + Ettevõtete Rakendused + Andmed & tehisintellekt + Python + Andmeteadus + Masinõpe + Automaatika + R + Statistika + Uurimistöö + Mobiilirakendused + Java + Android + Ettevõte + Swift + iOS + Apple Ökosüsteem + Kotlin + Kaasaegne Android + Platvormideülene + Süsteemid & Jõudlus + C++ + Mängud + Jõudluskriitiline + Rust + Mälu Turvalisus + Süsteemi Programmeerimine + Go + Pilveteenused + Mõõdetav Tagatise +``` +| Keel | Parim milleks | Miks on populaarne | +|------|---------------|-------------------| +| **JavaScript** | Veebiarendus, kasutajaliidesed | Töötab brauserites ja juhib interaktiivseid veebilehti | +| **Python** | Andmeteadus, automatiseerimine, tehisintellekt | Lihtne lugeda ja õppida, võimsad teegid | +| **Java** | Ettevõtte rakendused, Androidi rakendused | Platvormist sõltumatu, usaldusväärne suurte süsteemide jaoks | +| **C#** | Windowsi rakendused, mänguarendus | Tugev Microsofti ökosüsteemi tugi | +| **Go** | Pilveteenused, backend süsteemid | Kiire, lihtne, loodud kaasaegse arvutustöö jaoks | + +### Kõrgetasemelised vs madalamatasemelised keeled + +Ok, see oli ausalt öeldes see mõiste, mis mu aju murdis, kui ma esimest korda õppisin, nii et ma jagan võrdlust, mis lõpuks selle minu jaoks selgeks tegi – ja ma tõesti loodan, et see aitab ka sind! + +Kujuta ette, et sa reisisid riiki, kus sa ei räägi keelt ja sul on hädasti vaja leida lähim tualett (me oleme kõik sellises olukorras olnud, eks? 😅): + +- **Madalatase programmeerimine** on nagu kohalikku murret nii hästi õppida, et saad vestelda vanaemaga, kes müüb nurgal puuvilju, kasutades kultuurilisi viiteid, kohalikke slängisõnu ja sise nalju, mida mõistab ainult keegi, kes seal üles kasvanud on. Väga muljetavaldav ja uskumatult efektiivne... kui sa just oled selles täiesti sorav! Aga üsna üle jõu käiv, kui sa lihtsalt otsid tualetti. + +- **Kõrgetase programmeerimine** on nagu sul oleks see imeline kohalik sõber, kes lihtsalt mõistab sind. Sa võid öelda lihtsalt inglise keeles „Ma tõesti pean tualetti minema“, ja tema teeb kogu kultuurilise tõlke ning annab sulle juhised viisil, mis mõistab su mitte-kohalik aju täiuslikult. + +Programmeerimise mõistes: +- **Madala taseme keeled** (nagu Assembly või C) lubavad sul pidada uskumatult detailseid vestlusi arvuti enda riistvaraga, aga sa pead mõtlema nagu masin, mis on... noh, ütleme nii, üsna suur vaimne hüpe! +- **Kõrgetase keeled** (nagu JavaScript, Python või C#) lubavad sul mõelda nagu inimene, samal ajal kui nad tegelevad kogu masinakõnega taga. Lisaks on neil imelised toetavad kogukonnad täis inimesi, kes mäletavad, kuidas on olla algaja, ja tõesti tahavad aidata! + +Arva ära, milliseid ma võiksin soovitada alustuseks? 😉 Kõrgetasemelised keeled on nagu abiratastega jalgratas, mida sa tegelikult iialgi maha võtta ei taha, sest see muudab kogu kogemuse palju nauditavamaks! + +```mermaid +flowchart TB + A["👤 Inimese mõte:
'Ma tahan arvutada Fibonacci numbreid'"] --> B{Vali keeltee tase} + + B -->|Kõrgtase| C["🌟 JavaScript/Python
Lihtne lugeda ja kirjutada"] + B -->|Alamtase| D["⚙️ Assembly/C
Otsene riistvara juhtimine"] + + C --> E["📝 Kirjuta: fibonacci(10)"] + D --> F["📝 Kirjuta: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Arvuti aru saamine:
Tõlk käsitleb keerukust"] + F --> G + + G --> H["💻 Sama tulemus:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### Las ma näitan, miks kõrgetasemelised keeled on palju sõbralikumad + +Okei, näitan sulle midagi, mis täiuslikult demonstreerib, miks ma armusin kõrgetasemeliste keeltesse, aga esmalt palun ma midagi. Kui näed esimest koodinäidet, ära ehmu! See peakski tunduma hirmutav. Täpselt seda ma tahan öelda! + +Vaatame täpselt sama ülesannet kirjutatuna kahes täiesti erinevas stiilis. Mõlemad loovad nn Fibonacci jada – see on ilus matemaatiline muster, kus iga number on kahe eelneva summa: 0, 1, 1, 2, 3, 5, 8, 13... (Lõbus fakt: seda mustrit leiad sõna otseses mõttes kõikjalt loodusest – päevalille seemnete spiraalid, käbide mustrid, isegi galaktikate kujunemine!) + +Valmis nägema erinevust? Läheme! + +**Kõrgetasemeline keel (JavaScript) – inimloetav:** ```javascript -let number = 10 -let n1 = 0, n2 = 1, nextTerm; - -for (let i = 1; i <= number; i++) { - console.log(n1); - nextTerm = n1 + n2; - n1 = n2; - n2 = nextTerm; +// 1. samm: Põhiline Fibonacci seadistus +const fibonacciCount = 10; +let current = 0; +let next = 1; + +console.log('Fibonacci sequence:'); +``` + +**Mis see kood teeb:** +- **Määrab** konstantse väärtuse, kui palju Fibonacci numbreid soovime genereerida +- **Algatab** kaks muutujat, et jälgida jada praegust ja järgmist numbrit +- **Seab** algväärtused (0 ja 1), mis määratlevad Fibonacci mustri +- **Kuvab** päise, et meie väljund oleks äratuntav + +```javascript +// 2. samm: Järjestuse genereerimine tsükli abil +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // Arvuta järjestuse järgmine number + const sum = current + next; + current = next; + next = sum; } ``` -```c +**Mis siin juhtub:** +- **Käivitab** tsükli iga positsiooni jaoks jadast `for` tsükli abil +- **Kuvab** iga numbri koos selle positsiooniga, kasutades malliteksti vormindust +- **Arvutab** järgmise Fibonacci numbri, liites praeguse ja järgmise väärtuse +- **Uuendab** meie jälgimismuutujaid, et minna järgmisele iteratsioonile + +```javascript +// 3. samm: Kaasaegne funktsionaalne lähenemine +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; + +// Kasutusnäide +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**Ülal oleme:** +- **Loonud** taaskasutatava funktsiooni kaasaegse noolefunktsiooni süntaksiga +- **Koostanud** massiivi, et salvestada täielik jada, selle asemel, et kuvada ükshaaval +- **Kasutanud** massiivi indekseerimist, et arvutada iga uus number eelmiste väärtuste põhjal +- **Tagastanud** terve jada, et seda saaks paindlikult kasutada programmis muudes osades + +**Madalatase keel (ARM Assembly) – arvutile sobiv:** + +```assembly area ascen,code,readonly entry code32 @@ -83,137 +265,593 @@ back add r0,r1 end ``` -Uskuge või mitte, *mõlemad teevad sama asja*: prindivad Fibonacci jada kuni 10. +Pane tähele, kuidas JavaScripti versioon loeb peaaegu nagu ingliskeelsed juhised, samas kui Assembly versioon kasutab krüptilisi käske, mis otse kontrollivad arvuti protsessorit. Mõlemad täidavad täpselt sama ülesannet, aga kõrgetasemeline keel on inimestele palju lihtsam mõista, kirjutada ja hooldada. -✅ Fibonacci jada on [määratletud](https://en.wikipedia.org/wiki/Fibonacci_number) kui arvude kogum, kus iga arv on kahe eelneva summa, alustades 0 ja 1-ga. Esimesed 10 Fibonacci jada numbrit on 0, 1, 1, 2, 3, 5, 8, 13, 21 ja 34. +**Peamised erinevused, mis silma jäävad:** +- **Lugemismugavus**: JavaScript kasutab kirjeldavaid nimesid nagu `fibonacciCount`, Assembly aga krüptilisi silte nagu `r0`, `r1` +- **Kommentaarid**: Kõrgema taseme keeled soodustavad selgitavate kommentaaride kirjutamist, mis muudavad koodi isedokumenteerivaks +- **Struktuur**: JavaScripti loogiline voog peegeldab seda, kuidas inimesed probleemidele samm-sammult mõtlevad +- **Hooldus**: JavaScripti versiooni uuendamine erinevate nõudmiste jaoks on lihtne ja selge -## Programmi elemendid +✅ **Fibonacci jada kohta**: See täiesti vapustav numbrimuster (kus iga number on kahe eelneva summa: 0, 1, 1, 2, 3, 5, 8...) ilmub sõna otseses mõttes *kõikjal* looduses! Leiad selle päevalille spiraalidest, männikoore mustritest, nautiluse kestade kumerusest ja isegi sellest, kuidas puud harunevad. On üsna pea meelt muutv, kuidas matemaatika ja kood aitavad meil mõista ja luua looduses esinevaid mustreid, mida kasutatakse ilu loomisel! -Üksik juhis programmis nimetatakse *lauseks* ja sellel on tavaliselt märk või reavahe, mis tähistab, kus juhis lõpeb ehk *lõpetatakse*. Kuidas programm lõpetatakse, varieerub iga keele puhul. -Lauseid programmis võib täita kasutaja või mujal saadud andmete abil. Andmed võivad muuta programmi käitumist, seega on programmeerimiskeeltel viis andmete ajutiseks salvestamiseks, et neid hiljem kasutada. Neid nimetatakse *muutujateks*. Muutujad on laused, mis juhendavad seadet salvestama andmeid oma mällu. Muutujad programmis on sarnased algebras kasutatavate muutujatega, kus neil on unikaalne nimi ja nende väärtus võib aja jooksul muutuda. +## Ehitusplokid, mis teevad võlu ära -On võimalik, et mõned laused ei täitu seadme poolt. See juhtub tavaliselt arendaja kavatsuse tõttu või juhuslikult, kui tekib ootamatu viga. Selline kontroll rakenduse üle muudab selle vastupidavamaks ja hooldatavamaks. Tavaliselt toimub kontrolli muutus, kui teatud tingimused on täidetud. Üks levinud lause, mida kasutatakse kaasaegses programmeerimises programmi käitumise kontrollimiseks, on `if..else` lause. +Hea küll, nüüd kui sa nägid, millisena programmeerimiskeeled tegelikult välja näevad, vaatame lahti põhilised komponendid, millest koosneb sõna otseses mõttes iga kunagi kirjutatud programm. Mõtle neile nagu olulistele koostisosadele oma lemmikretseptis – kui saad aru, mida igaüks teeb, saad lugeda ja kirjutada koodi peaaegu mis tahes keeles! -✅ Õpid rohkem sellist tüüpi lausete kohta järgnevates õppetundides. +See on natuke nagu programmeerimise grammatikat õppida. Mäletad koolist, kui õppisid nimisõnu, tegusõnu ja seda, kuidas lauseid kokku panna? Programmeerimisel on oma grammatika ja ausalt öeldes on see palju loogilisem ja andestavam kui inglise keel kunagi oli! 😄 -## Tööriistad +### Lausekanded: samm-sammulised juhised -[![Tööriistad](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tööriistad") +Alustame **lausekannetest** – need on nagu üksikud laused vestluses arvutiga. Iga lause ütleb arvutile, et see teeb ühe konkreetse asja, nagu juhiste andmine: „Pööra siin vasakule,“ „Peatu punase tule juures,“ „Parki sinna kohta.“ -> 🎥 Klõpsa ülaloleval pildil, et vaadata videot tööriistadest +Mulle meeldib lausekannete juures, kui loetavad need tavaliselt on. Vaata seda: -Selles jaotises õpid tundma mõningaid tarkvarasid, mis võivad olla väga kasulikud, kui alustad oma professionaalset arendajateekonda. +```javascript +// Põhilised avaldused, mis täidavad ühekordseid toiminguid +const userName = "Alex"; +console.log("Hello, world!"); +const sum = 5 + 3; +``` -**Arenduskeskkond** on unikaalne tööriistade ja funktsioonide kogum, mida arendaja sageli kasutab tarkvara kirjutamisel. Mõned neist tööriistadest on kohandatud arendaja konkreetsetele vajadustele ja võivad aja jooksul muutuda, kui arendaja muudab tööprioriteete, isiklikke projekte või kasutab erinevat programmeerimiskeelt. Arenduskeskkonnad on sama unikaalsed kui arendajad, kes neid kasutavad. +**See kood teeb järgmist:** +- **Deklarerib** konstandi, kuhu salvestatakse kasutaja nimi +- **Kuvab** tervitussõnumi konsooli väljundis +- **Arvutab** ja salvestab matemaatilise operatsiooni tulemuse -### Redaktorid +```javascript +// Avaldused, mis suhtlevad veebilehtedega +document.title = "My Awesome Website"; +document.body.style.backgroundColor = "lightblue"; +``` -Üks olulisemaid tööriistu tarkvaraarenduses on redaktor. Redaktorid on koht, kus kirjutad oma koodi ja mõnikord ka käivitad seda. +**Samm-sammult toimub järgmist:** +- **Muudab** veebilehe pealkirja, mis ilmub brauseri vahekaardil +- **Muudab** kogu lehe taustavärvi -Arendajad toetuvad redaktoritele mitmel põhjusel: +### Muutujad: su programmi mälusüsteem -- *Silumine* aitab avastada vigu ja tõrkeid, astudes koodist läbi rida-realt. Mõnel redaktoril on silumisvõimalused; neid saab kohandada ja lisada konkreetsete programmeerimiskeelte jaoks. -- *Süntaksi esiletõstmine* lisab koodile värve ja teksti vormindamist, muutes selle loetavamaks. Enamik redaktoreid võimaldab kohandatud süntaksi esiletõstmist. -- *Laiendused ja integratsioonid* on spetsiaalsed tööriistad arendajatele, arendajate poolt. Need tööriistad ei ole redaktori põhifunktsioonidesse sisse ehitatud. Näiteks paljud arendajad dokumenteerivad oma koodi, et selgitada, kuidas see töötab. Nad võivad installida õigekirjakontrolli laienduse, et leida dokumentatsioonis kirjavigu. Enamik laiendusi on mõeldud kasutamiseks konkreetse redaktori sees ja enamik redaktoreid võimaldab otsida saadaolevaid laiendusi. -- *Kohandamine* võimaldab arendajatel luua unikaalse arenduskeskkonna, mis vastab nende vajadustele. Enamik redaktoreid on äärmiselt kohandatavad ja võivad samuti võimaldada arendajatel luua kohandatud laiendusi. +Olgu, **muutujad** on ausalt öeldes üks mu lemmikkontseptsioone õpetada, sest need on nii sarnased asjadele, mida sa juba iga päev kasutad! -#### Populaarsed redaktorid ja veebiarenduse laiendused +Mõtle natuke oma telefoni kontaktide loendile. Sa ei mäleta kõigi telefoninumbreid – selle asemel salvestad „Ema,“ „Parim sõber“ või „Pitsa koht, mis toob kuni kella 2-ni“ ja laseb telefonil numbrid meeles hoida. Muutujad töötavad täpselt nii! Need on kui sildiga konteinerid, kuhu su programm saab infot salvestada ja hiljem nime abil tagasi võtta. -- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -- [Atom](https://atom.io/) - - [spell-check](https://atom.io/packages/spell-check) - - [teletype](https://atom.io/packages/teletype) - - [atom-beautify](https://atom.io/packages/atom-beautify) - -- [Sublimetext](https://www.sublimetext.com/) - - [emmet](https://emmet.io/) - - [SublimeLinter](http://www.sublimelinter.com/en/stable/) +See, mis on tõeliselt lahe: muutujad võivad su programmi käigus muutuda (seetõttu ongi nimi "muutuja" – näed, kuidas nad selle välja mõtlesid?). Nii nagu sa ehk värskendad pitsakoha kontakti, kui avastad veel parem koha, saab muutujaid uuendada, kui su programm õpib uut infot või olukorrad muutuvad! + +Lubage mul näidata, kui kaunilt lihtne see võib olla: + +```javascript +// Samm 1: Põhimuutujate loomine +const siteName = "Weather Dashboard"; +let currentWeather = "sunny"; +let temperature = 75; +let isRaining = false; +``` + +**Nende kontseptsioonide mõistmine:** +- **Salvestada** muutumatud väärtused `const` muutujatesse (näiteks saidi nimi) +- **Kasutada** `let` väärtuste jaoks, mis võivad programmi jooksul muutuda +- **Määrata** erinevaid andmetüüpe: stringid (tekst), numbrid ja boole'id (true/false) +- **Valida** kirjeldavad nimed, mis selgitavad, mida iga muutuja sisaldab + +```javascript +// Samm 2: Objektidega töötamine seotud andmete grupeerimiseks +const weatherData = { + location: "San Francisco", + humidity: 65, + windSpeed: 12 +}; +``` + +**Ülaltoodud juhtumil oleme:** +- **Loonud** objekti, et grupeerida seotud ilmainfot kokku +- **Korraldanud** mitu andmeosa ühe muutuja nime alla +- **Kasutanud** võtme-väärtuse paare, et selgelt märgistada iga infoosa + +```javascript +// Samm 3: Muutujate kasutamine ja uuendamine +console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); +console.log(`Wind speed: ${weatherData.windSpeed} mph`); + +// Muutuvate muutujate uuendamine +currentWeather = "cloudy"; +temperature = 68; +``` + +**Mõistame iga osa:** +- **Kuvame** infot, kasutades malliliideseid `${}` süntaksiga +- **Juurdepääs** objekti omadustele punktnotatsiooni abil (`weatherData.windSpeed`) +- **Uuendame** `let`iga deklareeritud muutujaid, et kajastada muutuvaid tingimusi +- **Kombineerime** mitut muutujat mõtestatud sõnumite loomiseks + +```javascript +// Samm 4: Kaasaegne destruktureerimine puhtama koodi jaoks +const { location, humidity } = weatherData; +console.log(`${location} humidity: ${humidity}%`); +``` + +**Mida vaja teada:** +- **Eralda** kindlad omadused objektidest destruktureeriva määramisega +- **Loo** uued muutujad automaatselt samade nimedega nagu objekti võtmed +- **Lihtsusta** koodi, vältides korduvat punktnotatsiooni + +### Juhtimisvoog: õpeta oma programm mõtlema + +Hea küll, siin muutub programmeerimine täiesti pea raputavaks! **Juhtimisvoog** on põhimõtteliselt õpetamine, kuidas su programm teeb nutikaid otsuseid, täpselt nii nagu sina iga päev ilma mõtlemata teed. + +Kujuta ette: täna hommikul tegid sa tõenäoliselt midagi sellist: „Kui sajab, võtan kaasa vihmavarju. Kui on külm, panen jope selga. Kui hilinen, jätan hommikusöögi vahele ja võtan kohvi kaasa.“ Su aju järgib loomulikult seda kui-siis loogikat korduvalt päevas! + +See teebki programmidest tundele nutikad ja elavad, mitte lihtsalt igavat, ennustatavat stsenaariumit järgivad. Nad suudavad olukorda vaadata, hinnata, mis toimub ja vastavalt reageerida. See on nagu anda su programmile aju, mis suudab kohaneda ja valikuid teha! + +Tahad näha, kuidas see kaunilt toimib? Lubage mul näidata: + +```javascript +// Samm 1: Põhiline tingimusloogika +const userAge = 17; + +if (userAge >= 18) { + console.log("You can vote!"); +} else { + const yearsToWait = 18 - userAge; + console.log(`You'll be able to vote in ${yearsToWait} year(s).`); +} +``` + +**See kood teeb järgmist:** +- **Kontrollib**, kas kasutaja vanus vastab hääletamise nõuetele +- **Täidab** erinevaid koodiblokke vastavalt tingimuse tulemusele +- **Arvutab** ja kuvab, kui kaua on veel jäänud hääletamisõiguse saavutamiseni, kui alla 18 +- **Annan** iga stsenaariumi jaoks konkreetset ja kasulikku tagasisidet + +```javascript +// Samm 2: Mitmed tingimused loogiliste operaatoritega +const userAge = 17; +const hasPermission = true; + +if (userAge >= 18 && hasPermission) { + console.log("Access granted: You can enter the venue."); +} else if (userAge >= 16) { + console.log("You need parent permission to enter."); +} else { + console.log("Sorry, you must be at least 16 years old."); +} +``` + +**Siin juhtub järgmist:** +- **Kombineerib** mitmed tingimused `&&` (ja) operaatoriga +- **Loo** tingimuste hierarhia `else if` abil mitme stsenaariumi jaoks +- **Käsitleb** kõiki võimalikke juhtumeid lõpliku `else` lausega +- **Annan** iga olukorra kohta selge, kasutajasõbraliku tagasiside + +```javascript +// Samm 3: Lühike tingimus teinepoolse operaatoriga +const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; +console.log(`Status: ${votingStatus}`); +``` + +**Mida meeles pidada:** +- **Kasuta** tingimuslause jaoks lihtsaid kahe valikuga tingimusi ternääroperaatoriga (`? :`) +- **Kirjuta** tingimus esimesena, siis `?`, siis tõene tulemus, siis `:`, siis väär tulemus +- **Kasuta** seda mustrit, kui vajad väärtuste määramist tingimuste põhjal + +```javascript +// Samm 4: Mitme konkreetse juhtumi käsitlemine +const dayOfWeek = "Tuesday"; + +switch (dayOfWeek) { + case "Monday": + case "Tuesday": + case "Wednesday": + case "Thursday": + case "Friday": + console.log("It's a weekday - time to work!"); + break; + case "Saturday": + case "Sunday": + console.log("It's the weekend - time to relax!"); + break; + default: + console.log("Invalid day of the week"); +} +``` + +**See kood saavutab:** +- **Võrdleb** muutuja väärtust mitme kindla juhtumiga +- **Grupeerib** sarnased juhtumid kokku (nädalapäevad vs nädalavahetus) +- **Täidab** sobiva koodibloki, kui leitakse vaste +- **Sisaldab** `default` juhtumit ootamatute väärtuste jaoks +- **Kasutab** `break` lauseid, et vältida järgmise juhtumi täitmist + +> 💡 **Tegeliku elu võrdlus**: Mõtle juhtimisvoog nagu maailma kannatlikumale GPS-ile, mis juhatab sind. Ta võib öelda „Kui Main Streetil on ummik, võta maantee. Kui maantee on ehituse all, proovi maastikulist teed.“ Programmid kasutavad täpselt sama tingimusloogikat, et nutikalt reageerida erinevatele olukordadele ja anda kasutajatele parim võimalik kogemus. + +### 🎯 **Kontseptide kontroll: ehitusplokkide valdamine** + +**Vaatame, kuidas sul põhitõdedega läheb:** +- Kas suudad omasõnadega seletada muutujate ja lausekannete vahe? +- Mõtle päriselu olukord, kus kasutaksid kui-siis otsust (nagu meie hääletamise näide) +- Mis on üks asi programmeerimisloogika kohta, mis sind üllatas? + +**Kiire enesekindluse tõstja:** +```mermaid +flowchart LR + A["📝 Avaldused
(Juhised)"] --> B["📦 Muutujad
(Salvestus)"] --> C["🔀 Juhtimisvoog
(Otsused)"] --> D["🎉 Töötav programm!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Mis järgmisena tuleb**: Meil saab olema täielik lõbu, kui sukeldume sügavamale nende kontseptsioonide maailma sel imelisel teekonnal koos! Praegu keskendu lihtsalt sellele põnevale tunnetusele kõigi hämmastavate võimaluste ees. Spetsiifilised oskused ja tehnikad jäävad loomulikuks, kui harjutame koos – luban, et see saab olema palju lõbusam, kui sa võid ette kujutada! + +## Tööriistad, mis teevad asja ära + +Olgu, ausalt öeldes hakkab mul siin põnevusest lausa põrkama! 🚀 Räägime nüüd hämmastavatest tööriistadest, mis panevad sind tundma, nagu oleksid just saanud kätte võtmeks digitaalsele kosmoselaevale. + +Sa tead, kuidas kokal on täiuslikult tasakaalustatud noad, mis tunduvad käe pikendusena? Või kuidas muusikul on see üks kitarr, mis hakkab kohe laulma, kui ta seda puudutab? Arendajatel on oma versioon neist maagilistest tööriistadest ja siin on see osa, mis su mõistuse sassi ajab – enamik neist on täiesti tasuta! + +Ma peaaegu hüppan mu toolil, mõeldes, et jagan seda sinuga, sest need on täielikult revolutsiooniliselt muutnud tarkvara arendamise viisi. Räägime tehisintellekti jõul töötavatest koodiabilistest, mis aitavad kirjutada su koodi (ma ei naljatan!), pilvekeskkondadest, kus saad ehitada terveid rakendusi sõna otseses mõttes igalt poolt Wi-Fi-ga ja silumise tööriistadest, mis on nii arenenud, nagu oleks sul programmide jaoks röntgen! + +Ja siin on osa, mis annab endiselt külmavärinad: need ei ole „algajate tööriistad“, mida sa välja kasvad. Need on täpselt samad professionaalsed tööriistad, mida kasutavad Google'i, Netflixi ja selle indie-rakenduse stuudio arendajad, keda sa armastad, praegugi. Sa tunned end nende kasutamisel tõelise proffina! + +```mermaid +graph TD + A["💡 Sinu idee"] --> B["⌨️ Koodi redaktor
(VS Code)"] + B --> C["🌐 Brauseri arendustööriistad
(Testimine ja silumine)"] + C --> D["⚡ Käsklusrida
(Automatiseerimine ja tööriistad)"] + D --> E["📚 Dokumentatsioon
(Õppimine ja viited)"] + E --> F["🚀 Hämmastav veebirakendus!"] + + B -.-> G["🤖 AI assistent
(GitHub Copilot)"] + C -.-> H["📱 Seadme testimine
(Reageeriv disain)"] + D -.-> I["📦 Pakettide haldurid
(npm, yarn)"] + E -.-> J["👥 Kogukond
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Koodiredaktorid ja IDE-d: su uued digitaalsed parimad sõbrad + +Räägime koodiredaktoritest – need hakkavad tõepoolest saama sinu uueks lemmikkoha, kus aega veeta! Mõtle neile kui isiklikule kodeerimispühamule, kus sa veedad suure osa oma ajast, vormides ja lihvides oma digitaalseid loominguid. + +Aga siin on see, mis on kaasaegsete redaktorite juures täiesti maagiline: need ei ole lihtsalt uhked tekstiredaktorid. Need on nagu kõige säravam, toetavam kodeerimise mentor, kes istub sinu kõrval 24/7. Nad tabavad trükivead enne, kui sa neid märkad, pakuvad parandusi, mis muudavad sind geeniuseks, aitavad sul mõista, mida iga kooditükk teeb, ja mõned neist suudavad isegi ära arvata, mida sa hakkad kirjutama, ning pakkuda mõtteid lõpetada! + +Mäletan, kui ma avastasin automaatse täiendamise – tundsin, nagu elaksin tulevikus. Sa hakkad midagi kirjutama ja su redaktor ütleb: „Hei, kas sa mõtlesid selle funktsiooni peale, mis teeb täpselt seda, mida vajad?“ See on nagu mõtte lugeja, kes on su kodeerimise kaaslane! + +**Mida muudab need redaktorid nii uskumatuks?** + +Kaasaegsed koodiredaktorid pakuvad muljetavaldavat valikut funktsioone, mis suurendavad su tootlikkust: + +| Funktsioon | Mida see teeb | Miks see aitab | +|------------|---------------|----------------| +| **Süntaksi esiletõstmine** | Värvib erinevad koodiosad | Muudab koodi kergemini loetavaks ja vigade leidmise lihtsamaks | +| **Automaatne täiendamine** | Pakub koodi kirjutades | Kiirendab kodeerimist ja vähendab trükivigu | +| **Silumisvahendid** | Aidata leida ja parandada vigu | Säästab tunde probleemide otsimisest | +| **Laiendused** | Lisavad spetsialiseeritud funktsioone | Kohanda oma redaktorit mis tahes tehnoloogia jaoks | +| **AI abistajad** | Pakuvad koodi ja selgitusi | Kiirendab õppimist ja tootlikkust | + +> 🎥 **Videoressurss**: Tahad näha neid tööriistu töös? Vaata seda [Tools of the Trade videot](https://youtube.com/watch?v=69WJeXGBdxg), mis annab põhjaliku ülevaate. + +#### Soovitatud redaktorid veebiarenduseks -### Brauserid +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (tasuta) +- Kõige populaarsem veebiarendajate seas +- Suurepärane laienduste ökosüsteem +- Sisseehitatud terminal ja Git integratsioon +- **Asendamatud laiendused**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI jõul töötavad koodisoovitused + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Reaalajas koostöö + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automaatne koodi vormindus + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Tabab trükivead koodis -Teine oluline tööriist on brauser. Veebiarendajad toetuvad brauserile, et näha, kuidas nende kood veebis töötab. Seda kasutatakse ka veebilehe visuaalsete elementide kuvamiseks, mis on kirjutatud redaktoris, näiteks HTML. +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (tasuline, üliõpilastele tasuta) +- Täiustatud silumis- ja testimisvahendid +- Nutikas koodi täiendamine +- Sisseehitatud versioonihaldus -Paljudel brauseritel on *arendaja tööriistad* (DevTools), mis sisaldavad kasulikke funktsioone ja teavet, et aidata arendajatel koguda ja salvestada olulist teavet oma rakenduse kohta. Näiteks: Kui veebilehel esineb vigu, on mõnikord kasulik teada, millal need tekkisid. Brauseri DevTools saab konfigureerida selle teabe kogumiseks. +**Pilvepõhised IDE-d** (eri hinnaklassid) +- [GitHub Codespaces](https://github.com/features/codespaces) - Täielik VS Code brauseris +- [Replit](https://replit.com/) - Hea õppimiseks ja koodi jagamiseks +- [StackBlitz](https://stackblitz.com/) - Kohene täispinu veebiarendus -#### Populaarsed brauserid ja DevTools +> 💡 **Algusnõuanne**: Alusta Visual Studio Code’iga – see on tasuta, tööstuses laialt kasutusel ja sellel on tohutu kogukond, kes loob abimaterjale ja laiendusi. -- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon) -- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) -- [Firefox](https://developer.mozilla.org/docs/Tools) -### Käsurea tööriistad +### Veebibrauserid: su salajane arendustöötuba -Mõned arendajad eelistavad vähem graafilist vaadet oma igapäevaste ülesannete jaoks ja toetuvad käsureale, et seda saavutada. Koodi kirjutamine nõuab märkimisväärset hulka tippimist ja mõned arendajad eelistavad mitte katkestada oma voogu klaviatuuril. Nad kasutavad klaviatuuri otseteid, et vahetada töölaua akende vahel, töötada erinevate failidega ja kasutada tööriistu. Enamik ülesandeid saab täita hiirega, kuid üks käsurea eelis on see, et palju saab teha käsurea tööriistadega ilma vajaduseta vahetada hiire ja klaviatuuri vahel. Teine käsurea eelis on see, et need on konfigureeritavad ja sa saad salvestada kohandatud konfiguratsiooni, muuta seda hiljem ja importida teistesse arendusmasinatesse. Kuna arenduskeskkonnad on iga arendaja jaoks nii unikaalsed, siis mõned väldivad käsurea kasutamist, mõned toetuvad sellele täielikult ja mõned eelistavad nende kahe segu. +Kui oled valmis, siis laseb see teadmine su mõistuse täiesti sassi! Sa tead, kuidas oled brausereid kasutanud sotsiaalmeediat kerimiseks ja videote vaatamiseks? Selgub, et nad on kogu selle aja varjanud seda uskumatut saladuslikku arendustöötuba, mis ootab lihtsalt, et sina selle avastaksid! -### Populaarsed käsurea valikud +Iga kord, kui sa paremklõpsad veebilehel ja valid „Elementi kontrolli“, avad varjatud arendustööriistade maailma, mis on ausalt öeldes võimsamad kui mõned kallid tarkvarad, mille eest ma kunagi sadu dollareid maksis. See on nagu avastada, et tavalises köögis on salajane professionaalse koka laboratoorium peidetud! +Esimest korda, kui keegi mulle brauseri DevToolsi näitas, veetsin umbes kolm tundi lihtsalt klõpsides ja öeldes: "OOTA, KAS SEE SAAB KA SEDA TEHA?!" Sa saad päriselt muuta mistahes veebisaiti reaalajas, näha täpselt kui kiiresti kõik laadib, testida, kuidas su sait erinevates seadmetes välja näeb, ja isegi siluda JavaScripti nagu täielik proff. See on absoluutselt vapustav! -Käsurea valikud erinevad sõltuvalt operatsioonisüsteemist, mida kasutad. +**Sellepärast on brauserid su salarelv:** -*💻 = operatsioonisüsteemiga eelinstallitud.* +Kui sa lood veebisaiti või veebirakendust, pead nägema, kuidas see maailmas välja näeb ja käitub. Brauserid mitte ainult ei kuva su tööd, vaid annavad ka detailset tagasisidet jõudluse, ligipääsetavuse ja võimalike probleemide kohta. -#### Windows +#### Brauseri arendustööriistad (DevTools) -- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻 -- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (tuntud ka kui CMD) 💻 -- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon) -- [mintty](https://mintty.github.io/) +Tänapäeva brauserid sisaldavad põhjalikke arenduskomplekte: + +| Tööriista kategooria | Mida see teeb | Näide kasutusjuhtumist | +|----------------------|---------------|-----------------------| +| **Elementide inspekteerija** | HTML/CSS reaalajas vaatamine ja muutmine | Stiili reguleerimine, et näha kohest tulemust | +| **Konsool** | Vaata veateateid ja testi JavaScripti | Probleemide silumine ja katsetamine koodiga | +| **Võrgu monitoor** | Jälgi, kuidas ressursid laaditakse | Jõudluse ja laadimisaja optimeerimine | +| **Ligipääsetavuse kontrollija** | Testi kaasava disaini põhimõtteid | Veendu, et su sait töötab kõigi kasutajate jaoks | +| **Seadmete simulaator** | Eelvaade erinevate ekraanisuurustega | Testi reageerivat disaini ilma mitme seadmeta | + +#### Soovitatud brauserid arenduseks + +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Tööstusharu standard DevTools koos laiapõhjalise dokumentatsiooniga +- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Suurepärased CSS Gridi ja ligipääsetavuse tööriistad +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Põhineb Chromiumil, Microsofti arendajate ressurssidega + +> ⚠️ **Oluline testimisnipp**: Alati testi oma veebisaite mitmes brauseris! Mis töötab ideaalselt Chromes, võib Safaris või Firefoxis erineda. Professionaalsed arendajad testivad kõigis suuremates brauserites, et tagada ühtlane kasutajakogemus. + +### Käsureatööriistad: Sinu värav arendaja üleloomulike võimeteni + +Olgu, olgem täiesti ausad käsurea suhtes, sest ma tahan, et sa kuuled seda kedagi, kes tõesti mõistab. Kui ma selle esimest korda nägin – lihtsalt see hirmutav must ekraan vilkuva tekstiga – mõtlesin tõsiselt: "Ei-ei, üldse mitte! See näeb välja nagu 1980ndate häkkerifilmist ja ma pole kindlasti selleks piisavalt tark!" 😅 + +Aga siin on see, mida ma sooviksin, et keegi oleks mulle tookord öelnud ja mida ma ütlen sulle nüüd: käsurida pole hirmutav – see on nagu otsekõne arvutile. Mõtle sellele nagu vahe peale, kas tellid toidu uhkest foto- ja menüüplugina kasutavast äpist (mis on mugav ja lihtne) või lähed oma lemmiklokaali restorani, kus peakokk teab täpselt, mis sulle meeldib, ja võib valmistada suunamisi midagi imelist lihtsalt öeldes: "üllata mind millegagi suurepärasega." + +Käsurida on koht, kuhu arendajad lähevad, et tunda end tõeliste maagikutena. Sa kirjutad paar esmapilgul maagilist sõna (okei, need on lihtsalt käsud, aga tunduvad maagilised!), vajutad Enterit ja BUMM – oled loonud terve projekti struktuuri, paigaldanud võimsaid tööriistu üle kogu maailma või avaldanud oma rakenduse internetis miljonitele vaatamiseks. Kui sa selle esimese võimsuse maitset tunned, on see ausalt üsna sõltuvust tekitav! + +**Miks käsurida saab su lemmiktööriistaks:** + +Kuigi graafilised liidesed sobivad paljude ülesannete jaoks, paistab käsurida silma automatiseerimise, täpsuse ja kiiruse poolest. Paljud arendustööriistad töötavad peamiselt käsurealiideste kaudu ja nende efektiivne kasutamine võib oluliselt parandada sinu tootlikkust. + +```bash +# Samm 1: Loo ja liigu projekti kataloogi +mkdir my-awesome-website +cd my-awesome-website +``` -#### MacOS +**See kood teeb järgmist:** +- **Loo** uus kataloog nimega "my-awesome-website" oma projekti jaoks +- **Liigu** äsja loodud kataloogi, et alustada tööd + +```bash +# 2. samm: Initsialiseeri projekt koos package.json failiga +npm init -y -- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 -- [iTerm](https://iterm2.com/) -- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) +# Paigalda kaasaegsed arendusvahendid +npm install --save-dev vite prettier eslint +npm install --save-dev @eslint/js +``` + +**Samm-sammult toimub see:** +- **Algatatakse** uus Node.js projekt vaikeseadistustega kasutades `npm init -y` +- **Paigaldatakse** Vite kaasaegse ehitustööriistana kiireks arenduseks ja tootmisversioonideks +- **Lisatakse** Prettier automaatseks koodi vormindamiseks ja ESLint koodi kvaliteedi kontrolliks +- **Kasutatakse** `--save-dev` lippu, et märkida need ainult arendamise sõltuvusteks + +```bash +# 3. samm: Loo projekti struktuur ja failid +mkdir src assets +echo 'My Site

Hello World

' > index.html + +# Käivita arendusserver +npx vite +``` + +**Ülaltoodud toimingud olid:** +- **Organiseeriti** meie projekt, luues eraldi kaustad lähtekoodi ja varade jaoks +- **Genereeriti** põhiline HTML-fail õige dokumendisstruktuuriga +- **Käivitati** Vite arendusserver eluks uuenduste ja kuuma mooduli asendamisega -#### Linux +#### Veebiarenduse olulised käsureatööriistad -- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 -- [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html) -- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) +| Tööriist | Eesmärk | Miks seda vajad | +|----------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Versioonihaldus | Jälgi muudatusi, tee koostööd teistega, tee varukoopiaid | +| **[Node.js & npm](https://nodejs.org/)** | JavaScripti käituskeskkond ja pakethaldus | Käivita JavaScripti väljaspool brausereid, paigalda kaasaegseid arendustööriistu | +| **[Vite](https://vitejs.dev/)** | Ehitusvahend ja arendusserver | Väga kiire arendus koos kuuma mooduli asendusega | +| **[ESLint](https://eslint.org/)** | Koodi kvaliteet | Leia ja paranda automaatselt JavaScriptis probleemid | +| **[Prettier](https://prettier.io/)** | Koodi vormindamine | Hoia oma kood järjekindlalt vormindatud ja loetavana | -#### Populaarsed käsurea tööriistad +#### Platvormipõhised valikud -- [Git](https://git-scm.com/) (💻 enamikus operatsioonisüsteemides) -- [NPM](https://www.npmjs.com/) -- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Moodne, rikkalikult funktsioone täis terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Võimas skriptikeel +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Traditsiooniline Windowsi käsurida -### Dokumentatsioon +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Eelinstalleeritud terminalirakendus +- **[iTerm2](https://iterm2.com/)** – Täiustatud terminal koos arenenud funktsioonidega -Kui arendaja tahab midagi uut õppida, pöördub ta tõenäoliselt dokumentatsiooni poole, et õppida, kuidas seda kasutada. Arendajad toetuvad sageli dokumentatsioonile, et juhendada neid tööriistade ja keelte õiges kasutamises ning saada sügavamat arusaamist nende toimimisest. +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standardlinuxi kest +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – Täiustatud terminaliemulaator -#### Populaarne dokumentatsioon veebiarenduse kohta +> 💻 = Operatsioonisüsteemiga kaasas -- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla, [Firefox](https://www.mozilla.org/firefox/) brauseri väljaandjate poolt -- [Frontend Masters](https://frontendmasters.com/learn/) -- [Web.dev](https://web.dev), Google, [Chrome](https://www.google.com/chrome/) brauseri väljaandjate poolt -- [Microsofti arendajadokumentatsioon](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) brauseri jaoks -- [W3 Schools](https://www.w3schools.com/where_to_start.asp) +> 🎯 **Õppeteekond**: Alusta põhilistest käskudest nagu `cd` (kausta vahetus), `ls` või `dir` (failide listimine) ja `mkdir` (kausta loomine). Harjuta tänapäevaste töövoo käskudega nagu `npm install`, `git status` ja `code .` (avatakse praegune kaust VS Codes). Kui mugavus kasvab, omandad loomulikult ka keerulisemad käsud ja automatiseerimistehnikad. -✅ Tee veidi uurimistööd: Nüüd, kui tead veebiarendaja keskkonna põhialuseid, võrdle ja vastanda seda veebidisaineri keskkonnaga. +### Dokumentatsioon: Sinu alati olemasolev õppementor + +Olgu, las ma jagan väikest saladust, mis paneb sind tundma end palju paremini algajana: isegi kõige kogenumad arendajad veedavad tohutult aega dokumentatsiooni lugedes. Ja see pole sellepärast, et nad ei tea, mida teevad – see on tarkuse tõestus! + +Mõtle dokumentatsioonile kui maailma kannatlikumate, teadlikumate õpetajate kogumile, kes on alati saadaval ööpäevaringselt. Jääd kella kahe paiku öösel probleemiga hätta? Dokumentatsioon ootab soojalt virtuaalse kallistusega ja just õige vastusega. Tahad õppida mõnest uuest lahedast funktsioonist, millest kõik räägivad? Dokumentatsioon aitab samm-sammult näidetega. Püüad aru saada, miks midagi toimib nii nagu toimib? Sa arvasid õigesti – dokumentatsioon seletab selle lahti, kuni mõistmine saabub! + +Siin on midagi, mis mu vaatenurka täielikult muutis: veebiarendusmaailm liigub tohutu kiirusega ja keegi – ma tõesti mõtlen, et keegi! – ei talleta kõike pähe. Olen näinud vanemaid arendajaid, kellel on üle 15 aasta kogemust, pärimas põhilist süntaksit ja tead mida? See pole häbi – see on tarkus! Ei ole asi perfektses mälus, vaid selles, et tead, kuhu usaldusväärseid vastuseid kiiresti leida ja kuidas neid kasutada. + +**Tegelik maagia toimub siin:** + +Professionaalsed arendajad veedavad suure osa oma ajast dokumentatsiooni lugedes – mitte sest nad ei tea, mida teevad, vaid kuna veebiarenduse maastik areneb nii kiiresti, et ajakohasena püsimiseks on pidev õppimine vajalik. Hea dokumentatsioon aitab sul mõista mitte ainult *kuidas* midagi kasutada, vaid ka *miks* ja *millal* seda teha. + +#### Olulised dokumentatsiooni ressursid + +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- Veebitehnoloogiate kuldstandard dokumentatsioonis +- Põhjalikud juhendid HTML-i, CSS-i ja JavaScripti kohta +- Sisaldab brauserite ühilduvuse infot +- Praktikapõhjad näited ja interaktiivsed demo'd + +**[Web.dev](https://web.dev)** (Google poolt) +- Kaasaegsed veebiarenduse parimad praktikad +- Jõudluse optimeerimise juhendid +- Ligipääsetavuse ja kaasava disaini põhimõtted +- Reaalsetest projektidest juhtumiuuringud + +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Edge brauseri arendusressursid +- Progressiivsete veebirakenduste juhised +- Platvormideülene arendusinfo + +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- Struktureeritud õppemarsruudid +- Videokursused tööstuse ekspertidelt +- Praktilised kodeerimisülesanded + +> 📚 **Õppestrateegia**: Ära proovi dokumentatsiooni pähe õppida – selle asemel õpi seda efektiivselt navigeerima. Pane järjehoidjatesse tihti kasutatavad viited ja harjuta otsingufunktsioonide kasutamist, et kiiresti konkreetset infot leida. + +### 🔧 **Tööriista valdamise kontroll: Mis sinuga kõnetab?** + +**Võta hetk mõtlemiseks:** +- Millist tööriista tahaksid esimesena proovida? (Vale vastust ei ole!) +- Kas käsurida tundub endiselt hirmutav või oled selle vastu uudishimulik? +- Kas suudad ette kujutada, et kasutad brauseri DevToolsi, et piiluda oma lemmikveebide telgitagustesse? + +```mermaid +pie title "Arendaja Aeg Vahenditega" + "Koodiredaktor" : 40 + "Brauseri Testimine" : 25 + "Käsurida" : 15 + "Dokumentatsiooni Lugemine" : 15 + "Silumine" : 5 +``` +> **Lõbus fakt:** Enamik arendajaid veedab umbes 40% ajast koodiredaktoris, aga märka, kui palju aega kulub testimiseks, õppimiseks ja probleemide lahendamiseks. Programmeerimine ei ole ainult koodi kirjutamine – see on kogemuste loomine! + +✅ **Mõtlemise toit:** Siin on midagi huvitavat mõtlemiseks – kuidas arvad, et veebisaitide loomise tööriistad (arendus) erinevad tööriistadest, millega kujundada, kuidas need välja näevad (disain)? See on nagu vahe arhitekti vahel, kes disainib kauni maja, ja töövõtja vahel, kes selle päriselt ehitab. Mõlemad on olulised, kuid vajavad erinevaid tööriistakaste! Selline mõtlemine aitab sul tõesti näha suuremat pilti, kuidas veebisaidid ellu sünnivad. + +## GitHub Copilot Agenti väljakutse 🚀 + +Kasuta Agentrežiimi järgmise väljakutse lõpuleviimiseks: + +**Kirjeldus:** Uuri kaasaegse koodiredaktori või IDE omadusi ja näita, kuidas need võivad parandada su töövoogu veebiarendajana. + +**Juhtlause:** Vali koodiredaktor või IDE (näiteks Visual Studio Code, WebStorm või pilvepõhine IDE). Nimeta kolm funktsiooni või laiendust, mis aitavad sul koodi efektiivsemalt kirjutada, siluda või hooldada. Igaühe kohta anna lühike selgitus, kuidas see su töövoogu aitab. --- ## 🚀 Väljakutse -Võrdle mõningaid programmeerimiskeeli. Millised on JavaScripti ja Java unikaalsed omadused? Aga COBOLi ja Go omadused? +**Olgu, detektiiv, valmis oma esimeseks juhtumiks?** + +Nüüd, kui sul on see vinge alus olemas, on mul seiklus, mis aitab sul näha, kui uskumatult mitmekesine ja põnev programmeerimise maailm tegelikult on. Ja kuula – see ei ole veel koodi kirjutamine, nii et ära tunne survet! Mõtle end programmeerimiskeele detektiiviks oma esimesel põneval juhtumil! + +**Sinu missioon, kui valid selle vastu võtta:** +1. **Saa keelereisijaks:** Vali kolm programmeerimiskeelt täiesti erinevatest universumitest – võib-olla üks veebisaitide ehitamiseks, üks mobiilirakenduste loomiseks ja üks andmetöötluseks teadlastele. Leia näited ühest ja samast lihtsast ülesandest iga keele jaoks. Luban, et oled täiesti šokeeritud, kui erinevalt nad võivad sama asja teha! +2. **Avasta nende päritolulood:** Mis teeb iga keele eriliseks? Lahe fakt: iga programmeerimiskeel loodi, sest keegi mõtles: "Teate mis? Selle konkreetse probleemi lahendamiseks peab olema parem viis." Kas suudad välja uurida, millised probleemid need olid? Mõned lood on tõeliselt põnevad! +3. **Tutvu kogukondadega:** Vaata, kui sõbralikud ja kirglikud on iga keele kogukonnad. Mõnel on miljoneid arendajaid, kes teadmisi jagavad ja üksteist aitavad, teised on väiksemad, kuid väga kokkuhoidvad ja toetavad. Sa armud nende kogukondade eri iseloomudesse! +4. **Järgi sisetunnet:** Milline keel tundub praegu kõige ligipääsetavam? Ära muretse "täiusliku" valiku pärast – kuula lihtsalt oma instinkte! Siin pole vale vastust, ja alati saab hiljem teisi keeli uurida. + +**Boonusdetektiivitöö:** Uuri, millised suuremad veebisaidid või äpid on iga keelega ehitatud. Ma garanteerin, et oled üllatunud, kui saad teada, mis käitab Instagrami, Netflixi või seda mobiilimängu, mida sa ei suuda käest panna! + +> 💡 **Pea meeles:** Sa ei ürita täna ühekski neist keeltest ekspertiks saada. Sa lihtsalt võtad tuttavaks naabruskonnaga, enne kui otsustad, kuhu tahad asutada oma pesa. Võta aega, naudi seda ja lase uudishimul end juhtida! + +## Tähistame, mida oled avastanud! + +Issand jumal, sa oled täna neelanud nii palju hämmastavat teavet! Ootan tõeliselt põnevusega, et näha, kui palju sellest imelise rännaku materjalist sinusse on jäänud. Ja pea meeles – see ei ole test, kus kõik peab olema täiuslik. See on pigem tähistamine kogu toreda õpitu üle selles huvitavas maailmas, kuhu sa nüüd sukeldud! + +[Lahenda õppetunni järeltest](https://ff-quizzes.netlify.app/web/) +## Ülevaade & Iseõppimine -## Järeltundide test -[Järeltundide test](https://ff-quizzes.netlify.app/web/) +**Võta aega, et uurida ja lõbutse sellega!** -## Ülevaade ja iseseisev õppimine +Sa oled täna palju õppinud ning see on midagi, mille üle olla uhke! Nüüd tuleb lõbus osa – avastada teemasid, mis sinu uudishimu sütitasid. Pane tähele, see ei ole kodutöö – see on seiklus! -Uuri veidi erinevate programmeerimiskeelte kohta. Proovi kirjutada üks rida ühes keeles ja seejärel kirjutada see kahes teises keeles. Mida sa õppisid? +**Sukeldu sügavamale asjadesse, mis sind kõnetavad:** + +**Tee praktilist tutvust programmeerimiskeeltega:** +- Külasta ametlikke veebisaite 2-3 keeltele, mis sinu tähelepanu pälvisid. Igal keelel on oma iseloom ja lugu! +- Proovi mõnda veebipõhist koodi mänguvälja, nagu [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) või [Replit](https://replit.com/). Ära karda katsetada – sa ei saa midagi purustada! +- Loe, kuidas su lemmikprogrammikeel sündis. Ausalt, mõned tegelikud tekkeloostud on äärmiselt põnevad ja aitavad sul mõista, miks keeled töötavad nii nagu nad töötavad. + +**Tutu oma uute tööriistadega:** +- Laadi alla Visual Studio Code, kui sul seda veel pole – see on tasuta ja sa saad seda armastama hakata! +- Veeda paar minutit laienduste turul ringi sirvides. See on nagu rakenduste pood sinu koodiredaktorile! +- Ava brauseri arendustööriistad ja klõpsa ringi. Ära muretse, kui kõigest aru ei saa – lihtsalt tutvu, mis seal olemas on. + +**Liitu kogukonnaga:** +- Jälgi mõnda arendajate kogukonda [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/) või [GitHub](https://github.com/) - programmeerijate kogukond on erakordselt sõbralik uustulnukate suhtes! +- Vaata YouTubes mõningaid algajatele mõeldud programmeerimisteemalisi videoid. Seal on nii palju toredaid loojad, kes mäletavad, mis tunne on alustajana. +- Mõtle kohalike kohtumiste või veebikogukondadega liitumisele. Usu mind, arendajad armastavad uustulnukatele abiks olla! + +> 🎯 **Kuula, mida ma tahan, et sa meeles peaksid**: Sinult ei oodata, et sa üleöö programmeerimisseisundisse satuksid! Praegu oled sa lihtsalt seda hämmastavat uut maailma tundma õppimas, millesse sa hakkad kuuluma. Võta oma aeg, naudi teekonda ja pea meeles – iga üks arendajatest, keda sa imetled, on olnud täpselt seal, kus sa praegu oled, tundes elevust ja ehk ka veidi ülekoormatust. See on täiesti normaalne ning tähendab, et sa teed õiget asja! ## Ülesanne -[Dokumentatsiooni lugemine](assignment.md) +[Reading the Docs](assignment.md) -> Märkus: Ülesande jaoks tööriistu valides ära vali redaktoreid, brausereid ega käsurea tööriistu, mis on juba ülal loetletud. +> 💡 **Väike tõuge su ülesande jaoks**: Ma väga tahaksin, et sa uuriksid mõningaid tööriistu, millest me pole veel rääkinud! Väldi toimetajaid, brausereid ja käsureatööriistu, millest me juba rääkisime – seal on suur uskumatult kõikehõlmav arendusvahendite universum, mis ootab avastamist. Otsi neid, mida aktiivselt hooldatakse ja millel on elavalt toetavad kogukonnad (neil on tavaliselt parimad õpetused ja kõige toetavamad inimesed, kui sa paratamatult kinni jääd ja sõbralikku abi vajad). + +--- + +## 🚀 Sinu programmeerimise teekonna ajajoon + +### ⚡ **Mida saad teha järgmise 5 minuti jooksul** +- [ ] Pane järjehoidjatesse 2-3 programmeerimiskeele veebisaiti, mis sinu tähelepanu pälvisid +- [ ] Laadi alla Visual Studio Code, kui sul seda veel pole +- [ ] Ava oma brauseri DevTools (F12) ja klõpsa ringi mistahes veebilehel +- [ ] Liitu ühe programmeerijate kogukonnaga (Dev.to, Reddit r/webdev või Stack Overflow) + +### ⏰ **Mida saad täita selle tunni jooksul** +- [ ] Täida õppetunni järel test ja mõtiskle oma vastuste üle +- [ ] Seadista VS Code koos GitHub Copiloti laiendiga +- [ ] Proovi "Hello World" näidet kahes erinevas programmeerimiskeeles veebis +- [ ] Vaata YouTube'ist videot "Üks päev arendaja elus" +- [ ] Alusta oma programmeerimiskeele detektiivitööd (väljakutse raames) + +### 📅 **Sinu nädalapikkune seiklus** +- [ ] Täida ülesanne ja avasta 3 uut arendusvahendit +- [ ] Jälgi 5 arendajat või programmeerimiskontot sotsiaalmeedias +- [ ] Proovi ehitada midagi väikest CodePenis või Replitis (isegi lihtsalt "Hello, [Sinu nimi]!") +- [ ] Loe ühe arendaja blogipostitust kellegi kodeerimise teekonnast +- [ ] Liitu virtuaalse kohtumisega või vaata programmeerimisteemalist loengut +- [ ] Alusta oma valitud keele õppimist veebipõhiste õpetustega + +### 🗓️ **Sinu kuupikkune muutus** +- [ ] Ehita oma esimene väike projekt (ka lihtne veebileht loeb!) +- [ ] Panusta avatud lähtekoodiga projekti (alusta dokumentide parandamisest) +- [ ] Juhenda kedagi, kes alles alustab programmeerimisega +- [ ] Loo oma arendajaportfoolio veebileht +- [ ] Võta ühendust kohalike arendajate kogukondade või õppegruppidega +- [ ] Alusta järgmise õpieesmärgi planeerimist + +### 🎯 **Lõpumõtiskluse kontroll** + +**Enne edasi liikumist võta hetk, et tähistada:** +- Mis on üks asi programmeerimises, mis sind täna rõõmustas? +- Millist tööriista või kontseptsiooni tahad kõigepealt avastada? +- Kuidas sa tunned selle programmeerimisteekonna alustamise kohta? +- Millist küsimust tahaksid praegu arendajalt küsida? + +```mermaid +journey + title Sinu Enesekindluse Rajamise Teekond + section Täna + Uudishimulik: 3: Sa + Ülekoormatud: 4: Sa + Elevil: 5: Sa + section Käesolev Nädal + Avastamine: 4: Sa + Õppimine: 5: Sa + Ühendamine: 4: Sa + section Järgmine Kuu + Ehitamine: 5: Sa + Enesekindel: 5: Sa + Aitamine Teisi: 5: Sa +``` +> 🌟 **Pea meeles**: Iga ekspert on kunagi olnud algaja. Iga vanem arendaja on tundnud end täpselt nii nagu sina praegu – elevil, võib-olla veidi ülekoormatuna ja kindlasti uudishimulikuna, mis on võimalik. Sa oled imelises seltskonnas ning see teekond saab olema erakordne. Tere tulemast programmeerimise imelisse maailma! 🎉 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi me püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md index 81c23f833..38990cc89 100644 --- a/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md +++ b/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md @@ -1,31 +1,78 @@ +# Ülesanne: Kaasaegsete veebiarendusvahendite uurimine + ## Juhised -Veebiarendaja vajab mitmeid tööriistu, mis on loetletud [MDN dokumentatsioonis kliendipoolsete tööriistade kohta](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Valige **kolm tööriista**, mida **selles õppetükis ei käsitleta** (välja arvatud [loetlege konkreetsed tööriistad või viidake õppetüki sisule]), selgitage **miks** veebiarendaja neid tööriistu kasutaks ja leidke iga kategooria jaoks sobiv tööriist. Iga tööriista kohta jagage link selle ametlikule dokumentatsioonile (mitte MDN-is toodud näitele). +Veebiarenduse ökosüsteem hõlmab sadu spetsialiseeritud tööriistu, mis aitavad arendajatel rakendusi tõhusalt ehitada, testida ja hooldada. Teie ülesandeks on uurida ja mõista tööriistu, mis täiendavad selles õppetükis käsitletud vahendeid. + +**Teie missioon:** Valige **kolm tööriista**, mida selles õppetükis **ei käsitleta** (välistage koodiredaktorid, brauserid või käsureatööriistad, mis on juba loetletud). Keskenduge tööriistadele, mis lahendavad kaasaegses veebiarenduse töövoos spetsiifilisi probleeme. + +**Iga tööriista kohta esitage:** + +1. **Tööriista nimi ja kategooria** (nt "Figma – Disainitööriist" või "Jest – Testimisraamistik") +2. **Eesmärk ja eelised** – Selgitage 2–3 lauses, miks veebiarendaja seda tööriista kasutaks ja milliseid probleeme see lahendab +3. **Ametliku dokumentatsiooni link** – Esitage link tööriista ametlikule dokumentatsioonile või veebisaidile (mitte ainult õppelehtedele) +4. **Tegelik kasutusala** – Tooge välja üks viis, kuidas see tööriist sobitub professionaalsesse arendustöövoogu + +## Soovitatud tööriistakategooriad + +Kaaluge tööriistu järgmistest kategooriatest: + +| Kategooria | Näited | Mida nad teevad | +|------------|--------|-----------------| +| **Ehitusvahendid** | Vite, Webpack, Parcel, esbuild | Koodi pakkimine ja optimeerimine tootmiseks koos kiirete arendusserveritega | +| **Testimisraamistikud** | Vitest, Jest, Cypress, Playwright | Tagavad koodi korrektse toimimise ja püüavad vead enne levitamist kinni | +| **Disainitööriistad** | Figma, Adobe XD, Penpot | Loovad koosolekutes makette, prototüüpe ja disainisüsteeme | +| **Levitatavad platvormid** | Netlify, Vercel, Cloudflare Pages | Veebisaitide majutamine ja levitamine automaatse CI/CD-ga | +| **Versioonihaldus** | GitHub, GitLab, Bitbucket | Koodi muutuste, koostöö ja projektitöövoogude haldamine | +| **CSS raamistikud** | Tailwind CSS, Bootstrap, Bulma | Kiirendavad stiilide loomist eeltöödeldud komponendiraamatutega | +| **Pakettide haldurid** | npm, pnpm, Yarn | Koodiraamatukogude ja sõltuvuste paigaldamine ja haldamine | +| **Juurdepääsetavuse tööriistad** | axe-core, Lighthouse, Pa11y | Testivad kaasava disaini ja WCAG vastavust | +| **API arendus** | Postman, Insomnia, Thunder Client | Testivad ja dokumenteerivad API-sid arenduse käigus | -**Formaat:** -- Tööriista nimi -- Miks veebiarendaja seda kasutaks (2-3 lauset) -- Link dokumentatsioonile +## Vormistusnõuded -**Pikkus:** -- Iga selgitus peaks olema 2-3 lauset. +**Iga tööriista puhul:** +``` +### [Tool Name] - [Category] + +**Purpose:** [2-3 sentences explaining why developers use this tool] + +**Documentation:** [Official website/documentation link] + +**Workflow Integration:** [1 sentence about how it fits into development process] +``` + +## Kvaliteedi juhised + +- **Valige kaasaegsed tööriistad:** Valige tööriistu, mida aktiivselt hooldatakse ja mis on laialdaselt kasutusel aastaks 2025 +- **Keskenduge väärtusele:** Selgitage konkreetseid eeliseid, mitte ainult seda, mida tööriist teeb +- **Professionaalne kontekst:** Mõelge tööriistadele, mida kasutavad arendusmeeskonnad, mitte üksikharrastajad +- **Mitu kategooriat:** Valige tööriistu erinevatest kategooriatest, et näidata ökosüsteemi mitmekesisust +- **Kaasaegne asjakohasus:** Eelistage tööriistu, mis sobituvad tänapäevaste veebiarenduse suundumuste ja headega tavadega ## Hindamiskriteeriumid -Näidiskvaliteet | Piisav | Vajab parandamist ---- | --- | -- | -Selgitas, miks veebiarendaja tööriista kasutaks | Selgitas, kuidas, kuid mitte miks arendaja tööriista kasutaks | Ei maininud, kuidas või miks arendaja tööriista kasutaks | +| Suurepärane | Hea | Vajab parendamist | +|-------------|-----|-------------------| +| **Selgelt selgitatud, miks arendajad tööriista kasutavad ja milliseid probleeme see lahendab** | **Selgitatud, mida tööriist teeb, kuid mõni konteksti aspekt jäi välja** | **Loetletud tööriistad, kuid ei selgitatud nende eesmärki ega eeliseid** | +| **Esitatud ametlikud dokumentatsiooni lingid kõigi tööriistade kohta** | **Enamasti ametlikud lingid, 1–2 juhendilehte** | **Peamiselt juhendi saidid, mitte ametlik dokumentatsioon** | +| **Valitud tänapäevased, professionaalselt kasutatavad tööriistad erinevatest kategooriatest** | **Valitud head tööriistad, kuid piiratud erinevust kategooriates** | **Valitud aegunud tööriistad või ainult ühest kategooriast** | +| **Näidatud arusaam, kuidas tööriistad sobituvad arendustöövoogudesse** | **Näidatud mõningane arusaam professionaalsest kontekstist** | **Keskendutud ainult tööriistadele, ilma töövoo kontekstita** | + +> 💡 **Uurimisnõuanne**: Otsige tööriistu, mida mainitakse veebiarendaja töökuulutustes, vaadake populaarseid arendajaküsitlusi või uurige GitHubi edukate avatud lähtekoodiga projektide sõltuvusi! --- -**Lahtiütlus**: -See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada tõlke täpsuse, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest vabastamine**: +See dokument on tõlgitud tehisintellektil põhineva tõlkevahendi [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selles emakeeles on käsitletav autoriteetse allikana. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/1-getting-started-lessons/2-github-basics/README.md b/translations/et/1-getting-started-lessons/2-github-basics/README.md index 7c1491b9a..3eb2e7c32 100644 --- a/translations/et/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/et/1-getting-started-lessons/2-github-basics/README.md @@ -1,344 +1,777 @@ # Sissejuhatus GitHubi -See õppetund käsitleb GitHubi põhitõdesid – platvormi, kus saab majutada ja hallata oma koodi muudatusi. +Tere, tulevane arendaja! 👋 Oled valmis liituma miljonite kodeerijatega üle kogu maailma? Mul on tõeliselt hea meel tutvustada sulle GitHubi – mõtle sellele kui programmeerijate sotsiaalmeedia platvormile, ainult et selle asemel, et jagada oma lõunasöögi pilte, jagame me koodi ja ehitame koos midagi hämmastavat! -![Sissejuhatus GitHubi](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.et.png) -> Sketšimärkus: [Tomomi Imura](https://twitter.com/girlie_mac) +See, mis mulle tõesti meeleheitlikult muljet avaldab: iga rakendus sinu telefonis, iga veebisait, mida sa külastad, ja enamik tööriistu, mida sa õpid kasutama, on ehitatud koos töötavate arendajate tiimide poolt platvormidel nagu GitHub. See muusikarakendus, mida sa armastad? Keegi nagu sina on sellele panuse andnud. See mäng, mida sa ei suuda käest panna? Jep, tõenäoliselt ehitatud GitHubi koostöös. Ja nüüd SA ÕPID, kuidas olla osa sellest imelisest kogukonnast! -## Eeltest -[Eeltest](https://ff-quizzes.netlify.app) +Ma tean, et alguses võib see kõik tunduda palju – ausalt öeldes mäletan, kuidas ma esimest korda oma GitHubi lehekülge vaatasin ja mõtlesin „Mida küll see kõik tähendab?“ Aga siin on asi: iga arendaja alustas täpselt sealt, kus sina praegu oled. Selle tunni lõpuks on sul oma GitHubi hoidla (mõtle sellele kui sinu isiklikule projektinäitusele pilves) ja sa tead, kuidas salvestada oma tööd, jagada seda teistega ja isegi panustada projektidesse, mida kasutavad miljonid inimesed. + +Me võtame selle teekonna koos – sammhaaval. Ilma kiirustamise ja pingeta – ainult sina, mina ja mõned väga lahedad tööriistad, mis saavad sinu uueks parimaks sõbraks! + +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.et.png) +> Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Teie GitHubi seiklus täna + section Häälestus + Installi Git: 4: You + Loo konto: 5: You + Esimene hoidla: 5: You + section Git'i valdamine + Kohalikud muudatused: 4: You + Commits & Pushes: 5: You + Harud: 4: You + section Koostöö + Fork projekti: 4: You + Pull requests: 5: You + Avatud lähtekood: 5: You +``` +## Eelsissejuhatuse viktoriin +[Eelsissejuhatuse viktoriin](https://ff-quizzes.netlify.app) ## Sissejuhatus -Selles õppetunnis käsitleme: +Enne kui sukeldume kõige põnevamatesse asjadesse, valmistame su arvuti ette GitHubi võluks! Mõtle sellele nagu oma kunstitarvikute korrastamisele enne meistriteose loomist – õige tööriista olemasolu teeb kogu protsessi sujuvamaks ja palju lõbusamaks. -- töö jälgimist oma arvutis +Ma juhatan sind läbi kogu seadistamisprotsessi isiklikult ja luban, et see ei ole üldse nii hirmus, kui esmapilgul tunduda võib. Kui mõni asi kohe ei paista selge olevat, on see täiesti normaalne! Mäletan, kuidas ma seadistasin oma esimest arenduskeskkonda ja tundsin, justkui püüaksin lugeda iidseid hieroglüüfe. Iga arendaja on olnud täpselt seal, kus sina praegu oled, mõtiskledes, kas teeb kõike õigesti. Spoiler: kui sa siin õpid, siis teed seda juba õigesti! 🌟 + +Selles õppetükis käsitleme: + +- sinu masina tööl tehtud töö jälgimist - projektide kallal töötamist koos teistega -- avatud lähtekoodiga tarkvara panustamist +- kuidas panustada avatud lähtekoodiga tarkvarasse ### Eeltingimused -Enne alustamist kontrolli, kas Git on paigaldatud. Terminalis kirjuta: +Valmistame su arvuti GitHubi võluks ette! Ära muretse – see seadistus tuleb teha ainult korra ja siis oled kogu oma kodeerimisteekonnaks valmis. + +Alustame alustalast! Esiteks peame kontrollima, kas Git on su arvutisse juba installitud. Git on põhimõtteliselt nagu väga nutikas assistent, kes mäletab iga sinu koodimuudatust – palju parem kui paaniliselt iga kahe sekundi tagant Ctrl+S vajutada (me kõik oleme seda teinud!). + +Kontrollime, kas Git on juba olemas, tippides terminali selle maagilise käsu: `git --version` -Kui Git ei ole paigaldatud, [laadi alla Git](https://git-scm.com/downloads). Seejärel seadista oma lokaalne Git profiil terminalis: -* `git config --global user.name "sinu-nimi"` -* `git config --global user.email "sinu-email"` +Kui Git veel pole, ära muretse! Mine lihtsalt aadressile [download Git](https://git-scm.com/downloads) ja lae see alla. Kui oled installi lõpetanud, tutvustan sulle Git’i korralikult: + +> 💡 **Esimese korraga seadistus**: Need käsud ütlevad Git’ile, kes sa oled. See teave lisatakse igale sinu tehtud commit’ile, nii et vali nimi ja e-post, mida oled mugav avalikult jagada. + +```bash +git config --global user.name "your-name" +git config --global user.email "your-email" +``` -Kontrollimaks, kas Git on juba seadistatud, kirjuta: -`git config --list` +Git’i olemasoleva seadistuse kontrollimiseks võid tippida: +```bash +git config --list +``` -Sul on vaja ka GitHubi kontot, koodiredaktorit (näiteks Visual Studio Code) ja terminali (või käsurea akent). +Sul on samuti vaja GitHubi kontot, koodiredaktorit (nt Visual Studio Code) ja terminali (või käsurida) avada. -Mine [github.com](https://github.com/) ja loo konto, kui sul seda veel pole, või logi sisse ja täida oma profiil. +Mine aadressile [github.com](https://github.com/) ja loo konto, kui seda veel pole, või logi sisse ning täida oma profiil. -✅ GitHub ei ole ainus koodirepositoorium maailmas; on ka teisi, kuid GitHub on kõige tuntum. +💡 **Kaasaegne näpunäide**: Kaalu SSH võtmete seadistamist ([SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh)) või GitHub CLI kasutamist ([GitHub CLI](https://cli.github.com/)) lihtsamaks ja paroolivabaks autentimiseks. + +✅ GitHub pole ainus koodipõhine hoidla veebis; on ka teisi, aga GitHub on kõige tuntum. ### Ettevalmistus -Sul on vaja kausta koodiprojektiga oma arvutis (sülearvutis või lauaarvutis) ja avalikku GitHubi repositoriumi, mis toimib näitena, kuidas teiste projektidesse panustada. +Sul peab olema nii kohalikust masinast (sülearvuti või lauaarvuti) koodiprojektiga kaust kui avalik hoidla GitHubis, mis on näitena, kuidas panustada teiste projektidesse. ---- +### Koodi turvalisuse tagamine -## Koodi haldamine +Räägime hetkeks turvalisusest – aga ära muretse, me ei hirmuta sind hullult! Mõtle turvapraktikatele nagu auto või maja lukustamisele. Need on lihtsad harjumused, millest muutuvad su teiseks loomuseks ja hoiavad su raske töö kaitstuna. -Oletame, et sul on kohalik kaust koodiprojektiga ja sa tahad hakata oma edusamme jälgima, kasutades git'i – versioonihaldussüsteemi. Mõned inimesed võrdlevad git'i kasutamist armastuskirja kirjutamisega oma tulevasele minale. Kui loed oma commit-sõnumeid päevade, nädalate või kuude pärast, suudad meenutada, miks sa teatud otsuse tegid, või "tagasi kerida" muudatuse – eeldusel, et kirjutad häid "commit-sõnumeid". +Näitan sulle kaasaegseid ja turvalisi viise GitHubiga töötamiseks algusest peale. Nii arendad head harjumused, mis toetavad sind kogu su kodeerimiskarjääri jooksul. + +Kui töötad GitHubiga, on oluline järgida turvalisuse parimaid tavasid: + +| Turvaala | Parim tava | Miks see oluline on | +|----------|------------|---------------------| +| **Autentimine** | Kasuta SSH võtmeid või isiklikke juurdepääsutokeneid | Paroolid on vähem turvalised ja nende kasutamine väheneb | +| **Kahefaktoriline autentimine** | Lülita sisse 2FA oma GitHubi kontol | Lisab täiendava kaitsekihi kontole | +| **Hoidla turvalisus** | Ära kunagi tee commit evolventse infot | API võtmed ja paroolid ei tohiks kunagi olla avalikes hoidlates | +| **Sõltuvuste haldus** | Lülita sisse Dependabot uuendusteks | Hoiab sinu sõltuvused turvalised ja ajakohased | + +> ⚠️ **Kriitiline turvameeldetuletus**: Ära kunagi tee commit'i API võtmeid, paroole ega muud tundlikku infot mingisse hoidlasse. Kasuta keskkonnamuutujaid ja `.gitignore` faile tundliku info kaitseks. + +**Kaasaegne autentimise seadistamine:** + +```bash +# Genereeri SSH võti (kaasaegne ed25519 algoritm) +ssh-keygen -t ed25519 -C "your_email@example.com" + +# Sea Git kasutama SSH-d +git remote set-url origin git@github.com:username/repository.git +``` + +> 💡 **Profesionaalseks kasutamiseks**: SSH võtmed eemaldavad vajaduse mitmel korral paroole sisestada ning on traditsioonilisest autentimisest turvalisemad. + +--- + +## Halda oma koodi nagu proff + +Olgu, SEE on see koht, kus asjad tõeliselt põnevaks muutuvad! 🎉 Õpime jälgima ja haldama oma koodi nagu proffid ning ausalt öeldes on see üks mu lemmikuid teemasid õpetada, sest see muudab kõik mängupõhimõtte. + +Kujutle, et kirjutad erakordset lugu ning tahad jälgida iga mustandi, iga põneva paranduse ja iga „äh, see on geniaalne!“ hetke teekonda. Täpselt nii teebki Git sinu koodiga! See on nagu imelise ajas rändava märkmiku omamine, mis mäletab KÕIKE – iga klahvivajutust, iga muudatust, iga „ups, nüüd tekkis viga“ hetke, mille saad koheselt tagasi võtta. + +Olen aus – see võib alguses tunduda kurnav. Kui ma alustasin, mõtlesin: „Miks ma ei saa lihtsalt oma faile tavapäraselt salvestada?“ Aga usalda mind: kui Git sulle lõpuks klapib (ja see juhtub!), koged „kõrvalmaja valgustuse“ hetke, kus mõtled „Kuidas ma üldse varem ilma selleta koodisin?“ See on nagu avastaksid, et oskad lennata, kuigi kogu elu oled vaid jalutanud! + +Oletame, et sul on kohaliku masinaga kaust mõne koodiprojektiga ja soovid hakata oma edusamme jälgima git’i versioonihaldussüsteemi abil. Mõned inimesed võrdlevad git’i kasutamist armastuskirja kirjutamisega oma tulevasele minale. Oma commit’ide kirjade lugemisel päevade, nädalate või kuude pärast tuletad meelde, miks otsuse tegid, või saad „tagasi pöörata“ muudatuse – see tähendab, kui kirjutad head „commit’i sõnumid“. + +```mermaid +flowchart TD + A[📁 Teie Projekti Failid] --> B{Kas see on Git hoidla?} + B -->|Ei| C[git init] + B -->|Jah| D[Muuda faile] + C --> D + D --> E[git add .] + E --> F["git commit -m 'sõnum'"] + F --> G[git push] + G --> H[🌟 Kood GitHubis!] + + H --> I{Tahate koostööd teha?} + I -->|Jah| J[Tehke fork ja kloonimine] + I -->|Ei| D + J --> K[Loo haru] + K --> L[Muuda faile] + L --> M[Tee pull taotlus] + M --> N[🎉 Panustamine!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Ülesanne: loo oma esimene hoidla! + +> 🎯 **Sinu missioon (ja ma olen nii elevil sinu pärast!)**: Loome sinu esimese GitHubi hoidla koos! Selle lõpus on sul oma väike nurk internetis, kus elab sinu kood, ning oled teinud oma esimese „commit’i“ (see tähendab arendajakeeles, et oled oma töö salvestanud väga nutikalt). +> +> See on tõeliselt eriline hetk – oled ametlikult liitumas arendajate maailmakogukonnaga! Ma mäletan siiani, kuidas ehmatasin, kui tegin oma esimese repo ja mõtlesin: „Vau, ma tõesti teen seda!“ -### Ülesanne: Loo repositoorium ja commit'i kood +Käime selle seikluse samm-sammult läbi. Võta iga osa jaoks aega – kiirustamiseks pole auhinda ja luban, et iga samm saab lõpuks selgeks. Pea meeles, iga kodeerimise superstaar, keda imetled, istus kunagi seal, kus sina oled, just enne oma esimest hoidlat looma hakkamist. Kui äge see on? > Vaata videot > -> [![Git ja GitHubi põhitõdede video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> [![Git ja GitHubi alused video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) -1. **Loo GitHubis repositoorium**. GitHub.com-is, repositooriumide vahekaardil või paremal ülanurgas navigeerimisribalt, leia **uus repo** nupp. +**Teeme selle koos:** - 1. Anna oma repositooriumile (kaustale) nimi - 1. Vali **loo repositoorium**. +1. **Loo oma hoidla GitHubis**. Mine GitHub.com ja otsi seda heledat rohelist **New** nuppu (või paremas ülanurgas olevat **+** märki). Kliki sellel ja vali **New repository**. -1. **Liigu oma töökausta**. Terminalis vaheta kausta (tuntud ka kui kataloog), mida tahad hakata jälgima. Kirjuta: + Tee nii: + 1. Anna oma hoidlale nimi – vali midagi tähenduslikku! + 1. Lisa kirjeldus, kui soovid (see aitab teistel mõista, millega su projekt tegeleb) + 1. Otsusta, kas teha see avalik (kõik näevad) või privaatne (ainult sinu jaoks) + 1. Soovitan märkida linnuke kastikesse README faili lisamiseks – see on nagu projekti esileht + 1. Kliki **Create repository** ja tähista – just lõid oma esimese repo! 🎉 + +2. **Mine oma projekti kausta**. Nüüd ava terminal (ära karda, see ei ole üldse nii hirmus nagu tundub!). Peame ütlema arvutile, kus su projektifailid asuvad. Tippige see käsk: ```bash cd [name of your folder] ``` -1. **Initsialiseeri git repositoorium**. Oma projektis kirjuta: + **Mida me siin teeme:** + - Ütleme arvutile „Hei, vii mind minu projektikausta“ + - See on nagu konkreetse kausta avamine oma töölaual, aga me teeme seda tekstikäsklustega + - Asenda `[name of your folder]` oma tegeliku projektikausta nimega + +3. **Muuda oma kaust Git’i hoidla'ks**. Siin juhtub võlu! Tippige: ```bash git init ``` -1. **Kontrolli staatust**. Kontrollimaks repositooriumi staatust, kirjuta: + **Mis just juhtus (päris lahe, eks?):** + - Git lõi su projektikausta sees peidetud `.git` kausta – sa ei näe seda, aga see on olemas! + - Sinu tavaline kaust on nüüd „hoidla“, mis suudab jälgida kõiki tehtud muudatusi + - Mõtle sellele nagu annaksid oma kaustale supervõimed kõike mäletada + +4. **Vaata, mis toimub**. Vaatame, mida Git praegu su projekti kohta arvab: ```bash git status ``` - väljund võib välja näha umbes selline: + **Mida Git sulle ütleb:** + + Võid näha midagi sellist: ```output Changes not staged for commit: (use "git add ..." to update what will be committed) - (use "git checkout -- ..." to discard changes in working directory) + (use "git restore ..." to discard changes in working directory) modified: file.txt modified: file2.txt ``` - Tavaliselt annab `git status` käsk infot, näiteks millised failid on valmis _salvestamiseks_ repositooriumisse või millistel failidel on muudatusi, mida võiks püsivaks teha. + **Ära paanitse! See tähendab nii:** + - Failid punases **värvis** on muudatused, mis pole veel valmis salvestamiseks + - Failid rohelises **värvis** (kui neid näed) on valmis salvestamiseks + - Git aitab sul, öeldes täpselt, mida järgmiseks teha -1. **Lisa kõik failid jälgimiseks** - Seda nimetatakse ka failide lavastamiseks/lisamiseks lavastuspiirkonda. + > 💡 **Professionaalne nipp**: käsk `git status` on su parim sõber! Kasuta seda iga kord, kui olukord tundub segane. See on nagu küsiks Git’ilt „Hei, mis seis on praegu?“ + +5. **Valmista failid salvestamiseks ette** (see on „staging“ ehk lisamine alale): ```bash git add . ``` - `git add` koos `.` argumendiga näitab, et kõik failid ja muudatused on jälgimiseks. + **Mida me just tegime:** + - Ütlesime Gatile „Hei, tahan järgmisesse salvestusse lisada KÕIK oma failid“ + - `.` tähendab „kõik selles kaustas“ + - Nüüd on failid „lavale seatud“ ja valmis järgmiseks sammuks -1. **Lisa valitud failid jälgimiseks** + **Tahan olla valivam?** Võid lisada ka vaid kindlad failid: ```bash git add [file or folder name] ``` - See võimaldab lisada ainult valitud failid lavastuspiirkonda, kui sa ei taha kõiki faile korraga commit'ida. + **Miks sa seda teha võid?** + - Mõnikord tahad seotud muudatused koos salvestada + - See aitab sul oma tööd loogilistesse osadesse korraldada + - Muudab hiljem lihtsamaks aru saada, mis ja millal muutus -1. **Eemalda kõik failid lavastuspiirkonnast** + **Mõtlesid ümber?** Pole probleemi! Võid failid „lavalt“ maha võtta nii: ```bash + # Kõik muudatused valikust eemaldada git reset + + # Eemalda valikust ainult üks fail + git reset [file name] ``` - See käsk võimaldab eemaldada kõik failid korraga lavastuspiirkonnast. + Ära muretse – see ei kustuta sinu tööd, lihtsalt võtab failid „valmis salvestamiseks“ hunnikust välja. -1. **Eemalda konkreetne fail lavastuspiirkonnast** - - ```bash - git reset [file or folder name] - ``` - - See käsk võimaldab eemaldada ainult konkreetse faili lavastuspiirkonnast, mida sa ei taha järgmises commit'is kaasata. - -1. **Tee oma töö püsivaks**. Praeguseks oled failid lisanud nn _lavastuspiirkonda_. Koht, kus Git jälgib sinu faile. Muudatuse püsivaks tegemiseks pead failid _commit'ima_. Selleks loo _commit_ käsuga `git commit`. _Commit_ esindab salvestuspunkti sinu repositooriumi ajaloos. Kirjuta järgmine, et luua _commit_: +6. **Salvesta töö püsivalt** (tehes oma esimese commit’i!): ```bash git commit -m "first commit" ``` - See commit'ib kõik failid, lisades sõnumi "esimene commit". Tulevaste commit-sõnumite puhul tasub olla kirjeldavam, et edastada, millist tüüpi muudatusi sa tegid. + **🎉 Palju õnne! Sa tegid oma esimese commit’i!** + + **Mis just juhtus:** + - Git tegi kõigist lavale seatud failidest just selle hetke „hetktõmmise“ + - Sinu commit’i sõnum „first commit“ selgitab, miks see salvestuspunkt tehti + - Git andis sellele hetktõmmisele unikaalse ID, et saaksid seda alati hiljem leida + - Sa alustasid ametlikult oma projekti ajaloo jälgimist! -1. **Ühenda oma lokaalne Git repo GitHubiga**. Git repo on kasulik sinu arvutis, kuid mingil hetkel tahad oma failidest varukoopiat kusagil hoida ja kutsuda teisi inimesi oma repositooriumiga töötama. Üks suurepärane koht selleks on GitHub. Me oleme juba loonud GitHubis repositooriumi, nii et ainus, mida teha tuleb, on ühendada oma lokaalne Git repo GitHubiga. Käsk `git remote add` teeb just seda. Kirjuta järgmine käsk: + > 💡 **Tulevaste commit’i sõnumite jaoks**: Ole järgmistel kordadel kirjalikum! „Updated stuff“ asemel proovi „Lisa kontaktivorm avalehele“ või „Paranda navigeerimismenüü viga“. Su tulevane mina tänab sind! - > Märkus: enne käsu sisestamist mine oma GitHubi repo lehele, et leida repositooriumi URL. Kasuta seda allolevas käsus. Asenda ```https://github.com/username/repository_name.git``` oma GitHubi URL-iga. +7. **Ühenda oma kohalik projekt GitHubiga**. Praegu asub su projekt vaid arvutis. Ühendame selle sinu GitHubi hoidlaga, et saaksid seda maailmaga jagada! + + Kõigepealt mine oma GitHubi hoidla lehele ja kopeeri seal oleva hoidla URL. Siis tule siia tagasi ja tipi: ```bash git remote add origin https://github.com/username/repository_name.git ``` + + (Asenda see URL oma hoidla tegeliku URL-iga!) - See loob _remote_-ühenduse nimega "origin", mis osutab varem loodud GitHubi repositooriumile. + **Mida me just tegime:** + - Me lõime ühenduse teie kohaliku projekti ja teie GitHubi hoidla vahel + - "Origin" on lihtsalt hüüdnimi teie GitHubi hoidla jaoks – see on nagu kontakti lisamine telefoni + - Nüüd teab teie kohalik Git kuhu teie koodi saata, kui olete valmis seda jagama -1. **Saada lokaalsed failid GitHubi**. Seni oled loonud _ühenduse_ lokaalse repo ja GitHubi repo vahel. Saada need failid GitHubi järgmise käsuga `git push`, näiteks: + 💡 **Lihtsam viis**: Kui teil on GitHub CLI paigaldatud, saate seda teha ühe käsuga: + ```bash + gh repo create my-repo --public --push --source=. + ``` - > Märkus: sinu haru nimi võib vaikimisi erineda ```main```-ist. +8. **Saatke oma kood GitHubi** (suur hetk!): ```bash git push -u origin main ``` - See saadab sinu commit'id "main" harusse GitHubis. `upstream` haru seadistamine, sealhulgas `-u` käsus, loob lingi sinu lokaalse haru ja kaug-haru vahel, nii et tulevikus saad lihtsalt kasutada git push või git pull ilma haru nime täpsustamata. Git kasutab automaatselt upstream-haru ja sa ei pea tulevastes käskudes haru nime eraldi määrama. + **🚀 See ongi see! Te laadite oma koodi GitHubi üles!** + + **Mis toimub:** + - Teie commit'id liiguvad teie arvutist GitHubi + - `-u` lipp seab üles püsiva ühenduse, et tulevased push-d oleksid lihtsamad + - "main" on teie põhiharude nimi (nagu peamine kaust) + - Pärast seda saate lihtsalt kasutada `git push` tulevaste üleslaadimiste jaoks! + + 💡 **Kiire märkus**: Kui teie haru nimi on midagi muud (näiteks "master"), kasutage seda nime. Saate kontrollida käsuga `git branch --show-current`. + +9. **Teie uus igapäevane kodeerimise rütm** (siin muutub see sõltuvust tekitavaks!): -2. **Lisa rohkem muudatusi**. Kui tahad jätkata muudatuste tegemist ja nende GitHubi saatmist, pead lihtsalt kasutama järgmisi kolme käsku: + Edaspidi, igal korral, kui teie projektis muudatusi teete, on teil see lihtne kolmetapiline tants: ```bash git add . - git commit -m "type your commit message here" + git commit -m "describe what you changed" git push ``` - > Näpunäide: Võid kaaluda `.gitignore` faili kasutamist, et vältida failide, mida sa ei taha jälgida, GitHubis ilmumist – näiteks märkmete faili, mida hoiad samas kaustas, kuid millel pole kohta avalikus repositooriumis. `.gitignore` failide mallid leiad siit: [.gitignore templates](https://github.com/github/gitignore). + **See muutub teie kodeerimise südametukseks:** + - Tehke oma koodis lahedaid muudatusi ✨ + - Lisage need `git add`-ga ("Hei Git, pööra neile muudatustele tähelepanu!") + - Salvestage need `git commit`-iga koos kirjeldava sõnumiga (tulevane teie tänab teid!) + - Jagage neid maailmaga `git push`-iga 🚀 + - Korda ja korda – tõesti, see muutub sama loomulikuks kui hingamine! -#### Commit-sõnumid + Mulle meeldib see töövoog, sest see on nagu mängus mitme salvestuspunkti omamine. Tegite muudatuse, mis teile meeldib? Commit'i see! Tahate proovida midagi riskantset? Pole probleemi – alati saate tagasi minna oma viimase commit’i juurde, kui asjad lähevad vintsi! -Hea Git commit'i pealkiri lõpetab järgmise lause: -Kui rakendada, siis see commit + > 💡 **Vihje**: Võiksite ka lisada `.gitignore` faili, et takistada failide, mida te ei taha jälgida, ilmumist GitHubi – nagu see märkmikufail, mida hoiate samas kaustas, kuid millel pole kohta avalikus hoidlas. `.gitignore` failide malle leiate aadressilt [.gitignore templates](https://github.com/github/gitignore) või saate ühe luua aadressil [gitignore.io](https://www.toptal.com/developers/gitignore). -Pealkirjas kasuta käskivat, olevikuvormi: "muuda" mitte "muudetud" ega "muudab". -Nagu pealkirjas, kasuta ka kehas (valikuline) käskivat, olevikuvormi. Keha peaks sisaldama muudatuse motivatsiooni ja kontrasti varasema käitumisega. Selgitad `miks`, mitte `kuidas`. +### 🧠 **Esimene hoidla üleslaadimine: Kuidas see end tundus?** -✅ Võta paar minutit, et GitHubis ringi vaadata. Kas leiad tõeliselt hea commit-sõnumi? Kas leiad väga minimaalse? Millist infot pead commit-sõnumis kõige olulisemaks ja kasulikuks edastada? +**Võtke hetk tähistamiseks ja reflekteerimiseks:** +- Kuidas tundus näha oma koodi esimest korda GitHubis? +- Milline samm tundus kõige segasem ja milline üllatavalt lihtne? +- Kas saate oma sõnadega seletada vahet `git add`, `git commit` ja `git push` vahel? -### Ülesanne: Tee koostööd +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Loo projekt + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Edu! 🎉 + + note right of Staged + Failid valmis salvestamiseks + end note + + note right of Committed + Hetkeseis tehtud + end note +``` +> **Mäleta**: Isegi kogenud arendajad kipuvad mõnikord täpseid käske unustama. Selle töövoo lihasmäluks muutmine nõuab harjutamist – teil läheb suurepäraselt! -Peamine põhjus, miks asjad GitHubi üles laadida, on võimalus teha koostööd teiste arendajatega. +#### Kaasaegsed Git’i töövood -## Projektide kallal töötamine koos teistega +Kaaluge nende kaasaegsete tavade omaksvõttu: -> Vaata videot +- **Tavapärased commit’id**: Kasutage standardiseeritud commit sõnumite vormingut nagu `feat:`, `fix:`, `docs:` jne. Lisateavet leiate aadressilt [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atomilised commit’id**: Iga commit peaks esindama üht konkreetset muutust +- **Sagedased commit’id**: Commiti sageli koos kirjeldavate sõnumitega, mitte harva ja suuri kogumeid + +#### Commit sõnumid + +Hea Git commit'i teemareal lõpetatakse järgnev lause: +Kui rakendatud, teeb see commit + +Teema puhul kasutage imperatiivi olevikus: "muuda", mitte "muutnud" ega "muudab". +Nii nagu teemareas, kasutage ka (vabatahtlikus) kirjelduses imperatiivi olevikus. Kirjeldus peaks sisaldama muutuse motivatsiooni ja võrdlust varasema käitumisega. Selgitate „miks“, mitte „kuidas“. + +✅ Võtke paar minutit GitHubis ringi sirvimiseks. Kas leiate tõeliselt hea commit sõnumi? Kas leiate väga minimaalse sõnumi? Milline info on commit sõnumis teie arvates kõige olulisem ja kasulikum? + +## Töötamine koos teistega (Lõbus osa!) + +Hoidke mütsi, sest SIIN muutub GitHub tõeliselt maagiliseks! 🪄 Olete juba oma koodi haldamise selgeks saanud, aga nüüd sukeldume minu absoluutse lemmiku juurde – koostöösse hämmastavate inimestega üle kogu maailma. + +Kujutage ette: ärkate homme ja näete, et keegi Tokyos parandas teie koodi, kui te magasite. Siis keegi Berlinis parandab vea, kus teil oli takerdumine. Pealelõunaks on Sao Paulos arendaja lisanud funktsiooni, millest te isegi mõelnud ei olnud. See pole ulme – see on lihtsalt teisipäev GitHubi universumis! + +Mis mind tõeliselt elevile paneb, on see, et koostööoskused, mida teie hakkate õppima? Need on TÄPSELT samad töövood, mida Google, Microsoft ja teie lemmikud idufirmad iga päev kasutavad. Te ei õpi lihtsalt lahedat tööriista – te õpite saladuskeelt, mis paneb kogu tarkvaramaailma koos töötama. + +Tõsiselt, kui kogete esimest korda seda emotsiooni, kui keegi ühineb teie esimese pull request’iga, mõistate, miks arendajad on avatud lähtekoodiga nii kirglikud. See on nagu osa maailma suurimast ja loovamast meeskonnaprojektist! + +> Vaadake videot > -> [![Git ja GitHubi põhitõdede video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) +> [![Git ja GitHubi põhitõed video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +Peamine põhjus, miks asju GitHubi panna, oli võimaldada koostööd teiste arendajatega. + +```mermaid +flowchart LR + A[🔍 Leia Projekt] --> B[🍴 Hargne Repositoorium] + B --> C[📥 Kloneeri Kohalikku] + C --> D[🌿 Loo Haru] + D --> E[✏️ Tee Muudatused] + E --> F[💾 Tee Kinnitus] + F --> G[📤 Lükka Haru] + G --> H[🔄 Loo Tõmbepäring] + H --> I{Hooldaja Ülevaade} + I -->|✅ Kinnitatud| J[🎉 Ühenda!] + I -->|❓ Muudatusi Palutud| K[📝 Tee Uuendused] + K --> F + J --> L[🧹 Puhasta Harud] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +Mine oma hoidlas `Insights > Community`, et näha, kuidas teie projekt vastab soovitatud kogukonna standarditele. + +Tahate, et teie hoidla näeks välja professionaalne ja sõbralik? Mine oma hoidla juurde ja klõpsa `Insights > Community`. See lahe funktsioon näitab, kuidas teie projekt võrdub sellega, mida GitHubi kogukond peab heaks hoidlapraktikaks. + +> 🎯 **Projekti särama panemine**: Hästi organiseeritud hoidla hea dokumentatsiooniga on nagu puhas ja sõbralik pood. See ütleb inimestele, et hoolite oma tööst ja muudab teised kinnisideed panustama! + +**Sellised asjad teevad hoidla suurepäraseks:** + +| Mida lisada | Miks see oluline on | Mida see teile teeb | +|-------------|---------------------|--------------------| +| **Kirjeldus** | Esimene mulje loeb! | Inimesed teavad kohe, mida teie projekt teeb | +| **README** | Teie projekti esileht | Nii nagu sõbralik giid uutele külastajatele | +| **Panustamise juhised** | Näitab, et olete abi vastu avatud | Inimesed teavad täpselt, kuidas aidata | +| **Käitumisreeglid** | Loob sõbraliku ruumi | Kõik tunnevad end oodatuna osalema | +| **Litsents** | Õiguslik selgus | Teised teavad, kuidas nad saavad teie koodi kasutada | +| **Turvapoliitika** | Näitab, et olete vastutustundlik | Demonstreerib professionaalseid tavasid | + +> 💡 **Proffide nipp**: GitHub pakub nende failide jaoks malle. Uue hoidla loomisel valige kastid, et need failid automaatselt genereerida. + +**Kaasaegsed GitHubi funktsioonid, mida uurida:** -Sinu repositooriumis liigu `Insights > Community`, et näha, kuidas sinu projekt vastab soovitatud kogukonna standarditele. +🤖 **Automatiseerimine & CI/CD:** +- **GitHub Actions** automatiseeritud testimiseks ja juurutamiseks +- **Dependabot** automaatsete sõltuvuste uuenduste jaoks - Siin on mõned asjad, mis võivad sinu GitHubi repositooriumi parandada: - - **Kirjeldus**. Kas lisasid oma projektile kirjelduse? - - **README**. Kas lisasid README? GitHub pakub juhiseid [README kirjutamiseks](https://docs.github.com/articles/about-readmes/?WT.mc_id=academic-77807-sagibbon). - - **Panustamise juhised**. Kas sinu projektis on [panustamise juhised](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/?WT.mc_id=academic-77807-sagibbon)? - - **Käitumisjuhend**. Kas projektis on [käitumisjuhend](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)? - - **Litsents**. Võib-olla kõige olulisem, [litsents](https://docs.github.com/articles/adding-a-license-to-a-repository/)? +💬 **Kogukond & Projekti haldamine:** +- **GitHub Discussions** kogukonna vestlused probleemide kõrval +- **GitHub Projects** kanban-tüüpi projektihaldus +- **Haru kaitse reeglid** koodikvaliteedi standardite tagamiseks -Kõik need ressursid aitavad uute meeskonnaliikmete sisseelamist. Need on tavaliselt asjad, mida uued panustajad vaatavad enne sinu koodi vaatamist, et otsustada, kas sinu projekt on õige koht nende aja kulutamiseks. -✅ Kuigi README failide ettevalmistamine võtab aega, jäävad need tihti hõivatud hooldajate poolt tähelepanuta. Kas leiad näite eriti kirjeldavast README-st? Märkus: on olemas [tööriistad, mis aitavad luua häid README-sid](https://www.makeareadme.com/), mida võid proovida. +Kõik need ressursid aitavad uutel meeskonnaliikmetel kiiremini sisse elada. Ja need on tavaliselt esimesed asjad, mida uued panustajad vaatavad enne koodi uurimist, et otsustada, kas projekt on neile õige koht aja veetmiseks. -### Ülesanne: Ühenda kood +✅ README failid, kuigi vajavad aega ettevalmistamiseks, jäävad sageli hõivatud hooldajate poolt tähelepanuta. Kas saate leida eriti kirjeldava näite? Märkus: on olemas mõningaid [tööriistu head README loomise abistamiseks](https://www.makeareadme.com/), mida võiksite proovida. -Panustamise dokumendid aitavad inimestel projektile panustada. Need selgitavad, millist tüüpi panustusi otsitakse ja kuidas protsess toimib. Panustajad peavad läbima mitmeid samme, et saaksid GitHubis sinu repositooriumisse panustada: +### Ülesanne: Mõne koodi ühendamine -1. **Repo forkimine**. Tõenäoliselt tahad, et inimesed _fork'iksid_ sinu projekti. Forkimine tähendab sinu repositooriumi koopia loomist nende GitHubi profiilil. -1. **Kloonimine**. Sealt edasi kloonivad nad projekti oma arvutisse. -1. **Haru loomine**. Palu neil luua _haru_ oma töö jaoks. -1. **Muudatuste keskendamine ühele valdkonnale**. Palu panustajatel keskenduda oma panustamisel ühele asjale korraga – nii on suurem tõenäosus, et saad nende töö _ühendada_. Kujuta ette, et nad parandavad vea, lisavad uue funktsiooni ja uuendavad mitmeid teste – mis siis, kui tahad või saad rakendada ainult 2 kolmest või 1 kolmest muudatusest? +Panustamise dokumentatsioon aitab inimestel projektile panustada. See seletab, millist tüüpi panuseid te otsite ja kuidas protsess toimib. Panustajad peavad läbima rea samme, et saada võimalust teie hoidla GitHubis panustada: -✅ Kujuta ette olukorda, kus harud on eriti kriitilised hea koodi kirjutamiseks ja tarnimiseks. Milliseid kasutusjuhtumeid suudad välja mõelda? -> Märkus: ole muutus, mida tahad maailmas näha, ja loo harud ka oma töö jaoks. Kõik commit'id, mida teed, tehakse harule, millele oled hetkel "välja registreeritud". Kasuta `git status`, et näha, millisele harule oled registreeritud. +1. **Teie hoidla forkimine**. Tõenäoliselt tahate, et inimesed _forkiksid_ teie projekti. Forkkimine tähendab teie hoidla koopia loomist nende GitHubi profiilil. +1. **Kloonimine**. Sealt kopeerivad nad projekti oma kohalikule masinale. +1. **Haru loomine**. Tahtsite, et nad looksid oma töö jaoks _hooldanud haru_. +1. **Muudatuse keskendumine ühele alale**. Paluge panustajatel keskenduda oma panused korraga ühele asjale – nii on suurem võimalus, et saate nende töö _ühendada_. Kujutage ette, et nad kirjutavad vigade paranduse, lisavad uue funktsiooni ja uuendavad mitmeid teste – mis siis, kui soovite või saate rakendada ainult 2-st 3-st või 1-st 3-st muudatusest? -Läheme läbi panustaja töövoo. Eeldame, et panustaja on juba _fork'inud_ ja _klooninud_ repo, nii et neil on Git repo, millega oma arvutis töötada: +✅ Kujutage ette olukorda, kus harud on eriti olulised hea koodi kirjutamiseks ja saatmiseks. Milliseid kasutusjuhtumeid saate välja tuua? -1. **Loo haru**. Kasuta käsku `git branch`, et luua haru, mis sisaldab muudatusi, mida nad kavatsevad panustada: +> Märkus, olge ise muutus, mida soovite maailmas näha, ja tehke teretulnud harud ka oma töö jaoks. Kõik commit’id tehakse sellel harul, millel parasjagu “oled”. Vaadake, millisel harul te olete käsuga `git status`. + +Läheme läbi panustaja töövoo. Eeldame, et panustaja on juba oma hoidla _forkinud_ ja _klooninud_, nii et tal on kohalik Git hoidla kasutamiseks valmis: + +1. **Haru loomine**. Kasutage käsku `git branch`, et luua haru, kuhu panustaja lisatud muudatused mahuvad: ```bash git branch [branch-name] ``` -1. **Vaheta tööharule**. Vaheta määratud harule ja uuenda töökausta käsuga `git switch`: + > 💡 **Kaasaegne lähenemine**: Samuti saate ühe käsuga uue haru luua ja sellele üle lülituda: + ```bash + git switch -c [branch-name] + ``` + +1. **Vahetage tööharrule**. Vahetage antud harule ja uuendage töökataloogi käsuga `git switch`: ```bash git switch [branch-name] ``` -1. **Tee tööd**. Sellel hetkel tahad lisada oma muudatused. Ära unusta Git'ile sellest teada anda järgmiste käskudega: + > 💡 **Kaasaegne märkus**: `git switch` on kaasaegne asendus käsule `git checkout` harude vahetamiseks. See on algajatele selgem ja turvalisem. + +1. **Töötage**. Nüüd lisage oma muudatused. Ärge unustage Gitile sellest teada anda järgmiste käskudega: ```bash git add . git commit -m "my changes" ``` - Veendu, et annad oma commit'ile hea nime, enda ja repo hooldaja huvides, kellele sa aitad. + > ⚠️ **Commit sõnumi kvaliteet**: Kindlasti andke oma commit’ile hea nimi nii enda kui hoidla hooldaja jaoks, kellele aitate. Olge täpne, mida muutsite! -1. **Ühenda oma töö `main` haruga**. Mingil hetkel oled töö lõpetanud ja tahad oma töö `main` haruga ühendada. `main` haru võib vahepeal muutunud olla, nii et veendu, et kõigepealt uuendad seda viimase versiooniga järgmiste käskudega: +1. **Ühendage oma töö `main` haruga**. Ühel hetkel olete tööga valmis ja tahate liita oma töö `main` haruga. Kuna `main` haru võis vahepeal muutuda, veenduge esmalt, et see on kõige värskem järgmiste käskude abil: ```bash git switch main git pull ``` - Sellel hetkel tahad veenduda, et kõik _konfliktid_, olukorrad, kus Git ei suuda muudatusi lihtsalt _ühendada_, tekivad sinu tööharus. Seetõttu käivita järgmised käsud: + Siin veendute, et kõik _konfliktid_ – olukorrad, kus Git ei saa muutusi lihtsalt _ühendada_, tekivad teie tööharrul. Käivitage seetõttu järgmised käsud: ```bash git switch [branch_name] git merge main ``` - Käsk `git merge main` toob kõik muudatused `main` harust sinu harusse. Loodetavasti saad lihtsalt jätkata. Kui ei, siis VS Code näitab, kus Git on _segaduses_, ja sa lihtsalt muudad mõjutatud faile, et öelda, milline sisu on kõige täpsem. + Käsk `git merge main` toob kõik `main` haru muudatused teie harusse. Loodetavasti saate edasi minna. Kui mitte, ütleb VS Code, kus Git on _segaduses_, ning teie muudetud failid selgitavad, milline sisu on õige. - Haru vahetamiseks kasuta kaasaegset `git switch` käsku: + 💡 **Kaasaegne alternatiiv**: Mõelge `git rebase` kasutamisele puhtama ajaloo jaoks: ```bash - git switch [branch_name] - + git rebase main + ``` + See mängib teie commit’id viimase `main` haru peale, luues lineaarselt ajaloo. -1. **Saada oma töö GitHubi**. Oma töö GitHubi saatmine tähendab kahte asja. Oma haru lükkamist oma repo'sse ja seejärel PR-i, Pull Request'i avamist. +1. **Saada oma töö GitHubi**. Töölaua saatmine GitHubi tähendab kahte asja. Saadate oma haru oma hoidlas üles ja seejärel avate PR-i ehk Pull Request’i. ```bash git push --set-upstream origin [branch-name] ``` - Ülaltoodud käsk loob haru sinu fork'itud repo's. -1. **Ava PR**. Järgmine samm on PR-i avamine. Selleks navigeeri GitHubis oma kahvli (forked repo) juurde. GitHubis kuvatakse teade, kus küsitakse, kas soovid luua uue PR-i. Klõpsa sellel ja sind viiakse liidesesse, kus saad muuta commit'i sõnumi pealkirja ning lisada sobivama kirjelduse. Nüüd näeb kahvli algse hoidla haldaja seda PR-i ja _loodetavasti_ hindab seda ning _ühendab_ (merge) sinu PR-i. Nüüd oled panustaja, hurraa! :) + Ülaltoodud käsk loob haru teie forkitud hoidlas. + +### 🤝 **Koostööoskuste kontroll: Kas oled valmis teistega töötama?** + +**Vaatame, kuidas sa koostöö suhtes end tunned:** +- Kas idee forkimisest ja pull request’idest on nüüd arusaadav? +- Mis on üks asi harudega töötamise juures, mida soovite rohkem harjutada? +- Kui mugavalt tunnete end kellegi teise projektile panustades? + +```mermaid +mindmap + root((Git Koostöö)) + Branching + Funktsiooniharud + Vigade parandamise harud + Eksperimentaalne töö + Pull Requests + Koodi ülevaatus + Arutelu + Testimine + Best Practices + Selged commit-sõnumid + Väikesed keskendunud muudatused + Hea dokumentatsioon +``` +> **Kindlustunne**: Igaüks arendajatest, keda imetlete, oli kord närvis oma esimese pull requesti üle. GitHubi kogukond on uustulnukatele väga vastuvõtlik! + +1. **Ava PR**. Järgmisena avate PR'i. Teete seda, minnes GitHubis oma forkitud hoidla juurde. Saate märguande, kus küsitakse, kas soovite luua uue PR’i. Klõpsate ja viiakse teieni kasutajaliides, kus saate muuta commit sõnumi pealkirja, anda sobivama kirjelduse. Nüüd näeb hoidla hooldaja seda PR’i ja _pöidlad pihku_, nad hindavad ja _liidavad_ teie PR’i. Olete nüüd panustaja, juubeldage :) + + 💡 **Kaasaegne nipp**: Võite ka GitHub CLI abil PR-e luua: + ```bash + gh pr create --title "Your PR title" --body "Description of changes" + ``` -1. **Korista ära**. Pärast PR-i edukat ühendamist on hea tava _koristada_ oma töö. See tähendab, et tuleks kustutada nii kohalik haru kui ka GitHubi üleslaetud haru. Kõigepealt kustuta see kohalikult järgmise käsuga: + 🔧 **Parimad tavad PR-ide jaoks**: + - Lisage seotud probleemide lingid märksõnadega nagu "Fixes #123" + - Lisage UI muudatuste ekraanipildid + - Paluge konkreetseid ülevaatajaid + - Kasutage kavandi PR-e töö käigus + - Veenduge, et kõik CI kontrollid on läbitud enne ülevaate taotlemist +1. **Puhastamine**. Peetakse heaks tavaks _puhastada_ pärast õnnestunud PR-i ühendamist. Soovite puhastada nii oma kohaliku haru kui haru, mille GitHubi üles laadisite. Kõigepealt kustutame selle kohalikult järgmise käsuga: ```bash git branch -d [branch-name] ``` - -Seejärel mine GitHubi lehele oma kahvli juurde ja eemalda seal kaugharu, mille just üles laadisid. -`Pull request` võib tunduda veider termin, sest tegelikult tahad sa oma muudatusi projekti _push_'ida. Kuid hoidla haldaja (projekti omanik) või põhimeeskond peab enne muudatuste ühendamist projekti "peaharuga" neid muudatusi kaaluma, seega sa tegelikult palud haldajalt otsust muudatuse kohta. + Veenduge, et lähete järgmiseks GitHubi lehele selle forkitud repos ja eemaldate just sinna üles laaditud kaugharud. -Pull request on koht, kus saab võrrelda ja arutada haru muudatusi koos ülevaadete, kommentaaride, integreeritud testide ja muuga. Hea pull request järgib enam-vähem samu reegleid kui commit'i sõnum. Sa võid viidata probleemile (issue) probleemide jälgimissüsteemis, näiteks kui sinu töö lahendab konkreetse probleemi. Seda tehakse, kasutades `#` ja sellele järgnevat probleemi numbrit. Näiteks `#97`. +`Pull request` tundub rumal termin, sest tegelikult soovite oma muudatusi projektile üles laadida. Kuid hooldaja (projekti omanik) või tuumikmeeskond peab teie muudatused enne projekti "main" harusse ühendamist üle vaatama, seega taotlete tegelikult otsust muudatuse kohta hooldajalt. -🤞Hoidke pöidlad pihus, et kõik kontrollid läbiksid ja projekti omanik(ud) ühendaksid sinu muudatused projektiga🤞 +Pull request on koht, kus saab harude vahelist erinevust võrdlevalt arutada läbi ülevaadete, kommentaaride, integreeritud testide ja muu. Hea pull request järgib ligikaudu samu reegleid nagu commit-sõnum. Võite lisada viite probleemile probleemide jälgimissüsteemis, kui teie töö näiteks lahendab mõne probleemi. Seda tehakse `#`-märgi ja teie probleemi numbri abil. Näiteks `#97`. -Uuenda oma praegust kohalikku tööharu kõigi uute commit'idega vastavast kaugharust GitHubis: +🤞Pöidlad pihku, et kõik kontrollid läheksid läbi ja projektipidajad ühendaksid teie muudatused projekti🤞 + +Uuendage oma praegust kohalikku töötavat haru kõigi uute commitidega vastavast GitHubi kaugharust: `git pull` -## Kuidas panustada avatud lähtekoodiga projektidesse +## Panustamine avatud lähtekoodiga (teie võimalus avaldada mõju!) + +Kas olete valmis millekski, mis teie mõistuse päris pahviks lööb? 🤯 Räägime panustamisest avatud lähtekoodi projektidesse – ja mul tekib juba kananahk, kui mõtlen, et saan seda teiega jagada! + +See on teie võimalus saada osaks millestki tõeliselt erakordsest. Kujutage ette, et parandate tööriistu, mida kasutavad miljonid arendajad iga päev, või parandate vea rakenduses, mida teie sõbrad armastavad. See pole mitte ainult unistus – see ongi avatud lähtekoodiga panustamise olemus! + +Kõik see tekitab mul külmavärinaid iga kord, kui sellele mõtlen: iga tööriist, millega olete õppinud – teie koodiredaktor, raamistikud, mida uurime, isegi brauser, milles seda loete – algas kellegi nagu teie esimesest panusest. See geniaalne arendaja, kes ehitas teie lemmik VS Code'i laienduse? Ka nemad olid kord algajad, kes värisevate kätega klõpsasid "create pull request", just nagu teie ees ootab. + +Ja siin on kõige ilusam osa: avatud lähtekoodi kogukond on nagu interneti suurim grupp-sõlmimine. Enamik projekte otsib aktiivselt uusi inimesi ja on kutsunud probleeme siltidega "good first issue" just teile! Hooldajad on tõeliselt põnevil, kui näevad uusi panustajaid, sest nad mäletavad oma esimesi samme. + +```mermaid +flowchart TD + A[🔍 Uuri GitHubi] --> B[🏷️ Leia "hea esimene probleem"] + B --> C[📖 Loe panustamise juhiseid] + C --> D[🍴 Forki hoidla] + D --> E[💻 Sea üles kohalik keskkond] + E --> F[🌿 Loo funktsiooniharu] + F --> G[✨ Tee oma panus] + G --> H[🧪 Testi oma muudatusi] + H --> I[📝 Kirjuta selge commit] + I --> J[📤 Pushi & loo PR] + J --> K[💬 Suhtle tagasisidega] + K --> L[🎉 Ühendatud! Sa oled panustaja!] + L --> M[🌟 Leia järgmine probleem] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Te ei õpi siin lihtsalt kodeerima – te valmistute liitumiseks ülemaailmse ehitajate perega, kes ärkab iga päev mõttega "Kuidas saaksime digitaalmaailma veidi paremaks muuta?" Tere tulemast klubisse! 🌟 -Kõigepealt leia GitHubist hoidla (või **repo**), mis sind huvitab ja kuhu soovid muudatuse panustada. Selleks tuleb hoidla sisu kopeerida oma arvutisse. +Esmalt leidke GitHubist endale huvipakkuv hoidlasse (või **repo**), kuhu sooviksite panustada. Soovite selle sisu oma masinasse kopeerida. -✅ Hea viis leida algajatele sobivaid hoidlaid on [otsida märksõna 'good-first-issue' järgi](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ Hea viis "algajasõbralike" hoidlate leidmiseks on [otsida silti 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopeeri hoidla kohalikult](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.et.png) +![Kopeerige hoidla kohalikult](../../../../translated_images/clone_repo.5085c48d666ead57.et.png) -Koodi kopeerimiseks on mitu viisi. Üks võimalus on "kloonida" hoidla sisu, kasutades HTTPS-i, SSH-d või GitHub CLI-d (Command Line Interface). +Koodi kopeerimiseks on mitu võimalust. Üks neist on 'kloneerida' hoidla sisu HTTPS-i, SSH-ga või GitHub CLI (käsklusrida) abil. -Ava terminal ja klooni hoidla järgmiselt: -`git clone https://github.com/ProjectURL` +Avage terminal ja kloneerige hoidla järgmiselt: +```bash +# HTTPS-i kasutamine +git clone https://github.com/ProjectURL -Projekti kallal töötamiseks liigu õigesse kausta: +# SSH kasutamine (nõuab SSH võtme seadistamist) +git clone git@github.com:username/repository.git + +# GitHub CLI kasutamine +gh repo clone username/repository +``` + +Projekti kallal töötamiseks minge õigele kaustale: `cd ProjectURL` -Samuti saad avada kogu projekti, kasutades [Codespaces](https://github.com/features/codespaces), GitHubi sisseehitatud koodiredaktorit / pilvepõhist arenduskeskkonda, või [GitHub Desktop](https://desktop.github.com/). +Võite avada kogu projekti ka järgmiste võimalustega: +- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHubi pilve-arenduskeskkond VS Code brauseris +- **[GitHub Desktop](https://desktop.github.com/)** - GUI rakendus Git käskude jaoks +- **[GitHub.dev](https://github.dev)** - Vajutage suvalises GitHubi hoidlas klahvi `.` VS Code'i avamiseks brauseris +- **VS Code** GitHub Pull Requests laiendusega + +Lõpuks võite koodi alla laadida ka tihendatud kaustana. -Viimaks saad koodi alla laadida ka zip-failina. +### Mõned lisahuvitavad faktid GitHubi kohta -### Veel mõned huvitavad asjad GitHubi kohta +Saate GitHubis tähti panna, jälgida ja/või "forkida" mis tahes avalikku hoidlat. Oma tähistatud hoidlaid leiate üleval parempoolse rippmenüü alt. See on nagu järjehoidja, aga koodi jaoks. -Sa saad tähistada (star), jälgida (watch) ja/või "kahveldada" (fork) mis tahes avalikku hoidlat GitHubis. Tähistatud hoidlad leiad paremas ülanurgas rippmenüüst. See on nagu järjehoidja, aga koodi jaoks. +Projektidel on probleemide jälgimise süsteem, enamasti GitHubis vahekaardil "Issues", kui pole märgitud teisiti, kus arutletakse projekti küsimuste üle. Ja Pull Requests vahekaart on koht, kus arutatakse ja vaadatakse muudatusi, mis on töös. -Projektidel on probleemide jälgimissüsteem, enamasti GitHubis "Issues" vahekaardil, kui pole teisiti märgitud, kus inimesed arutavad projektiga seotud probleeme. Pull Requests vahekaart on koht, kus arutatakse ja vaadatakse üle muudatusi, mis on töös. +Projektidel võivad olla ka arutelud foorumites, meililistides või vestluskanalites nagu Slack, Discord või IRC. -Projektidel võib olla ka arutelusid foorumites, meililistides või vestluskanalites nagu Slack, Discord või IRC. +🔧 **Tänapäevased GitHubi funktsioonid**: +- **GitHub Discussions** - Kogukonna vestluste integreeritud foorum +- **GitHub Sponsors** - Toetage hooldajaid rahaliselt +- **Security tab** - Haavatavusaruanded ja turvakonsultatsioonid +- **Actions tab** - Vaadake automatiseeritud töövooge ja CI/CD torujuhtmeid +- **Insights tab** - Analüütika panustajate, commitide ja projekti tervise kohta +- **Projects tab** - GitHubi sisseehitatud projektijuhtimisvahendid -✅ Vaata oma uut GitHubi hoidlat ja proovi mõnda asja, näiteks seadete muutmist, info lisamist hoidlasse ja projekti loomist (näiteks Kanban-tahvlit). Võimalusi on palju! +✅ Vaadake üle oma uus GitHubi hoidla ja proovige mõnda asja, näiteks seadistuste muutmist, info lisamist hoidlasse, projekti loomist (nt Kanban tahvel) ja GitHub Actionsi seadistamist automatiseerimiseks. Võimalusi on palju! --- ## 🚀 Väljakutse -Tee koostööd sõbraga, töötades üksteise koodi kallal. Loo projekt ühiselt, kahvelda koodi, loo harusid ja ühenda muudatusi. +Olgu, on aeg panna teie säravad uued GitHubi supervõimed proovile! 🚀 Siin on väljakutse, mis paneb kõik klõpsama kõige rahuldustpakkuvamal viisil: + +Võtke sõber (või see pereliige, kes alati küsib, millega te kõik need "arvutiasjad" tegelete) ja asuge koos koostöös kodeerima! Just siin sünnib tõeline võlu – looge projekt, laske neil see forkida, tehke harud ja ühendage muudatused nagu juba professionaalid, kelleks saate. + +Ma ei valeta – tõenäoliselt naerate mingil hetkel (eriti siis, kui proovite mõlemad sama rida muuta), võib-olla ajate pead segaduses, aga kindlasti kogete neid hämmastavaid "aha!"-hetki, mis kõik õppetöö hästi ära tasuvad. Pealegi on midagi erilist esimest edukat ühendamist kellegagi jagada – see on nagu väike tähistamine, kui kaugele olete jõudnud! -## Loengu järgne viktoriin -[Loengu järgne viktoriin](https://ff-quizzes.netlify.app/web/en/) +Kas teil veel koodikaaslast pole? Pole probleemi! GitHubi kogukond on täis uskumatult sõbralikke inimesi, kes mäletavad, milline tunne on olla uus. Otsige hoidlaid märgistega "good first issue" – need kutsuvad algajaid õppima! Kui äge see on? -## Ülevaade ja iseseisev õppimine +## Loengu järel test +[Loengu järel test](https://ff-quizzes.netlify.app/web/en/) -Loe rohkem [avatud lähtekoodiga tarkvara panustamise kohta](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). +## Ülevaade & Jätka õppimist -[Git'i spikrijuhend](https://training.github.com/downloads/github-git-cheat-sheet/). +Huh! 🎉 Vaadake ise – olete just GitHubi põhialused vallutanud nagu tõeline meister! Kui teie pea tundub praegu natuke täis olevat, on see täiesti normaalne ja ausalt ka hea märk. Olete just õppinud tööriistu, mis mul võtsid nädalaid, enne kui end nendega mugavalt tundsin. -Harjuta, harjuta, harjuta. GitHubil on suurepärased õppeprogrammid saadaval [skills.github.com](https://skills.github.com) kaudu: +Git ja GitHub on uskumatult võimsad (tõsiselt võimsad) ning iga arendaja, keda ma tunnen – ka need, kes nüüd näivad olevat nagu võlurid – pidid harjutama ja vahel eksima, enne kui kõik klõpsas. See, et olete selle õppetüki läbinud, tähendab, et olete juba teel vallutama mõnda arendajate kõige olulisemat tööriista. -- [Esimene nädal GitHubis](https://skills.github.com/#first-week-on-github) +Siin on mõned tõeliselt suurepärased ressursid harjutamiseks ja veelgi võimsamaks muutumiseks: -Leiad ka edasijõudnutele mõeldud kursusi. +- [Juhend panustamiseks avatud lähtekoodi tarkvarasse](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Teie teejuht mõju avaldamiseks +- [Git kiirjuhend](https://training.github.com/downloads/github-git-cheat-sheet/) – Hoidke see käepärast kiireks viitamiseks! + +Ja pidage meeles: harjutamine teeb edenemise, mitte täiuslikkuse! Mida rohkem kasutate Git-i ja GitHubi, seda loomulikumaks see muutub. GitHub on loonud mõnusaid interaktiivseid kursuseid, kus saate turvalises keskkonnas harjutada: + +- [Sissejuhatus GitHubi](https://github.com/skills/introduction-to-github) +- [Suhtlus Markdowni abil](https://github.com/skills/communicate-using-markdown) +- [GitHub Pages](https://github.com/skills/github-pages) +- [Ühendamis-konfliktide lahendamine](https://github.com/skills/resolve-merge-conflicts) + +**Tunnete end seikluslikuna? Vaadake neid kaasaegseid tööriistu:** +- [GitHub CLI dokumentatsioon](https://cli.github.com/manual/) – Kui tahate tunda end käsurea võlurina +- [GitHub Codespaces dokumentatsioon](https://docs.github.com/en/codespaces) – Kodeerige pilves! +- [GitHub Actions dokumentatsioon](https://docs.github.com/en/actions) – Automatiseerige kõik asjad +- [Git parimad praktikad](https://www.atlassian.com/git/tutorials/comparing-workflows) – Tõstke oma töövoog järgmisele tasemele + +## GitHub Copiloti agendi väljakutse 🚀 + +Kasutage Agent režiimi järgmise väljakutse täitmiseks: + +**Kirjeldus:** Looge koostöine veebiarendusprojekt, mis demonstreerib kogu selles õppetükis õppitud GitHubi töövoogu. See väljakutse aitab teil harjutada hoidla loomist, koostöö funktsioone ja kaasaegseid Git töövooge reaalses situatsioonis. + +**Üleskutse:** Looge uus avalik GitHubi hoidla lihtsa "Veebiarenduse Ressursid" projekti jaoks. Hoidla peaks sisaldama hästi struktureeritud README.md faili kasulike veebiarenduse tööriistade ja ressursside nimekirjaga, kategoriseeritult (HTML, CSS, JavaScript jne). Seadistage hoidla vastavalt kogukonna standarditele, sealhulgas litsents, panustamise juhised ja käitumiskoodeks. Looge vähemalt kaks funktsiooniharud: üks CSS ressursside lisamiseks ja teine JavaScripti ressursside jaoks. Tehke kummaski harus commit-id kirjeldavate sõnumitega, seejärel looge pull requestid muudatuste ühendamiseks peaharusse. Lülitage sisse GitHubi funktsioonid nagu Issues, Discussions ja seadistage lihtne GitHub Actions töövoog automatiseeritud kontrollide jaoks. ## Ülesanne -Lõpeta [Esimese nädala GitHubis kursus](https://skills.github.com/#first-week-on-github) +Teie missioon, kui otsustate selle vastu võtta: lõpetage [Sissejuhatus GitHubi](https://github.com/skills/introduction-to-github) kursus GitHub Skills'is. See interaktiivne kursus laseb teil turvalises, juhendatud keskkonnas harjutada kõike, mida olete õppinud. Pealegi saate lõpetamisel laheda märgise! 🏅 + +**Tunnete end valmis rohkemaks?** +- Seadistage SSH autentimine oma GitHubi kontol (paroolid jäävad minevikku!) +- Proovige kasutada GitHub CLI oma päevastes Git toimingutes +- Looge hoidla GitHub Actions töövooga +- Avage see hoidla pilvepõhises redaktoris läbi GitHub Codespaces + +--- + +## 🚀 Teie GitHubi meistriklassi ajakava + +### ⚡ **Mida saate teha järgmise 5 minutiga** +- [ ] Pange tähis sellele hoidlaile ja veel 3-le huvipakkuvale projektile +- [ ] Seadistage oma GitHubi kontole kaksikautentimine +- [ ] Looge lihtne README oma esimese hoidla jaoks +- [ ] Jälgige 5 arendajat, kelle töö teid inspireerib + +### 🎯 **Mida saate selle tunni jooksul saavutada** +- [ ] Täitke loengu järel test ja mõtisklege oma GitHubi teekonna üle +- [ ] Seadistage SSH võtmepaar GitHubi paroolivabaks autentimiseks +- [ ] Tehke oma esimene tähendusrikas commit hea sõnumiga +- [ ] Avastage GitHubi "Explore" vahekaart, et leida trendiprojekte +- [ ] Harjutage hoidla forkimist ja väikse muudatuse tegemist + +### 📅 **Teie nädalane GitHubi seiklus** +- [ ] Lõpetage GitHub Skills kursused (Sissejuhatus GitHubi, Markdown) +- [ ] Tehke oma esimene pull request avatud lähtekoodi projekti +- [ ] Looge GitHub Pages sait, et näidata oma töid +- [ ] Liituge GitHub Discussions aruteludega huvipakkuvatel projektidel +- [ ] Looge hoidla vastavalt kogukonna standarditele (README, litsents jms) +- [ ] Proovige GitHub Codespaces pilvepõhist arendust + +### 🌟 **Teie kuu pikkune muutumine** +- [ ] Panustage 3 erinevasse avatud lähtekoodi projekti +- [ ] Mentorige kedagi uut GitHubis (tagasiandmine!) +- [ ] Seadistage automatiseeritud töövood GitHub Actionsiga +- [ ] Koostage portfoolio, mis näitab teie GitHubi panuseid +- [ ] Osalege Hacktoberfestil või sarnastel kogukonnaüritustel +- [ ] Saage oma projekti hooldajaks, kuhu teised on panustanud + +### 🎓 **Lõplik GitHubi meisterlikkuse ülevaatus** + +**Tähistage, kui kaugele olete jõudnud:** +- Mis on teie lemmik asi GitHubi kasutamisel? +- Milline koostööfunktsioon paneb teid kõige rohkem põnevusest õhkama? +- Kui enesekindlalt tunnete end nüüd, panustades avatud lähtekoodi? +- Millise esimese projekti soovite panustada? + +```mermaid +journey + title Sinu GitHubi Enesekindluse Teekond + section Täna + Närviline: 3: You + Uudishimulik: 4: You + Elevil: 5: You + section See Nädal + Harjutamine: 4: You + Panustamine: 5: You + Ühendamine: 5: You + section Järgmine Kuu + Koostöö: 5: You + Juhtimine: 5: You + Teisi Inspireeriv: 5: You +``` +> 🌍 **Tere tulemast globaalsesse arendajate kogukonda!** Teil on nüüd tööriistad, et teha koostööd miljonite arendajatega üle maailma. Teie esimene panus võib tunduda väike, kuid pidage meeles – iga suur avatud lähtekoodiga projekt algas kellegi esimesest commit-ist. Küsimus pole selles, kas avaldate mõju, vaid milline vinge projekt saab teie ainulaadsest perspektiivist esmalt kasu! 🚀 + +Pidage meeles: iga ekspert oli kord algaja. Te saate hakkama! 💪 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi me püüdleme täpsuse poole, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles on otsustavaks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/1-getting-started-lessons/3-accessibility/README.md b/translations/et/1-getting-started-lessons/3-accessibility/README.md index da427c0f9..f5dd79a5b 100644 --- a/translations/et/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/et/1-getting-started-lessons/3-accessibility/README.md @@ -1,176 +1,1356 @@ -# Ligipääsetavate veebilehtede loomine +# Ligipääsetavate Veebilehtede Loomine -![Kõik ligipääsetavusest](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.et.png) +![Kõigest Ligipääsetavusest](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.et.png) > Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) -## Loengu-eelne viktoriin -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/) +```mermaid +journey + title Teie ligipääsetavuse õppe seiklus + section Alus + Kasutajate mõistmine: 5: You + Testimisvahendid: 4: You + POUR põhimõtted: 5: You + section Oskuste arendamine + Semantiline HTML: 4: You + Visuaalne disain: 5: You + ARIA tehnikaid: 4: You + section Meistriks saamine + Klaviatuuri navigeerimine: 5: You + Vormide ligipääsetavus: 4: You + Reaalse maailma testimine: 5: You +``` +## Eelloengu Test +[Eelloengu test](https://ff-quizzes.netlify.app/web/) -> Veebi jõud peitub selle universaalsuses. Ligipääs kõigile, olenemata puudest, on oluline aspekt. +> Veebi jõud peitub selle universaalsuses. Ligipääs kõigile, sõltumata puuetest, on oluline aspekt. > -> \- Sir Timothy Berners-Lee, W3C direktor ja veebi leiutaja +> \- Sir Timothy Berners-Lee, W3C direktor ja Maailma Liiduveebi leiutaja + +Siin on midagi, mis võib sind üllatada: kui ehitad ligipääsetavaid veebisaite, siis sa ei aita mitte ainult puuetega inimesi — sa teed veebist tegelikult parema paiga kõigile! + +Oled märganud neid äärekivide lõike tänavanurkadel? Need olid algselt mõeldud ratastoolidele, aga nüüd aitavad nad lapsevankritega inimesi, kullerite platside kandjaid, rändureid veerelkohvriga ja rattureid. Täpselt nii toimib ligipääsetav veebidisain — lahendused, mis aitavad ühte gruppi, kasu toovad lõpuks kõigile. Lahe, eks? + +Selles õppetükis uurime, kuidas luua veebisaite, mis tõeliselt toimivad kõigile, ükskõik kuidas nad veebi sirvivad. Sa avastad praktilisi tehnikaid, mis on juba veebistandarditesse sisse ehitatud, saad käed külge testimisvahenditega ja näed, kuidas ligipääsetavus muudab su saidid lihtsamini kasutatavaks kõigile kasutajatele. + +Pärast seda õppetundi on sul kindlustunne teha ligipääsetavus oma arendustöövoo loomulikuks osaks. Kas oled valmis uurima, kuidas läbimõeldud disainiotsused võivad veebile ligipääsu avada miljarditele kasutajatele? Sukeldume! + +```mermaid +mindmap + root((Veebi juurdepääsetavus)) + Kasutajad + Ekraanilugerid + Klaviatuuri navigeerimine + Häälekontroll + Suurendus + Tehnoloogiad + HTML semantika + ARIA atribuudid + CSS fookusindikaatorid + Klaviatuuri sündmused + Kasud + Laiem sihtrühm + Parem SEO + Õiguslik vastavus + Universaalne disain + Testimine + Automaatseadmed + Käsitsi testimine + Kasutajate tagasiside + Tõeline abitehnoloogia +``` +> Selle õppetunni saad teha [Microsoft Learnis](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! -See tsitaat rõhutab suurepäraselt ligipääsetavate veebilehtede loomise tähtsust. Rakendus, millele kõik ei pääse ligi, on oma olemuselt välistav. Veebiarendajatena peaksime alati ligipääsetavust silmas pidama. Kui keskendume sellele juba algusest peale, oleme õigel teel, et tagada kõigile juurdepääs meie loodud lehtedele. Selles õppetükis õpid tundma tööriistu, mis aitavad tagada, et sinu veebivarad oleksid ligipääsetavad, ja kuidas ehitada neid ligipääsetavust silmas pidades. +## Puuetega Inimeste Abitehnoloogiate Mõistmine -> Selle õppetüki saad läbida [Microsoft Learnis](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! +Enne kui koodimisele tormame, võtame hetke, et mõista, kuidas inimesed erinevate võimetega tegelikult veebi kogevad. See pole pelgalt teooria — nende reaalses maailmas toimuvate navigeerimisviiside mõistmine teeb sinust palju parema arendaja! -## Kasutatavad tööriistad +Abitehnoloogiad on päris võimsad tööriistad, mis aitavad puuetega inimestel veebis suhelda viisil, mis võib sind üllatada. Kui saad aru, kuidas need tehnikad töötavad, muutub ligipääsetavate veebikogemuste loomine palju intuitiivsemaks. Nagu õpiksid nägema oma koodi kellegi teise pilgu läbi. ### Ekraanilugejad -Üks tuntumaid ligipääsetavuse tööriistu on ekraanilugejad. +[Ekraanilugejad](https://en.wikipedia.org/wiki/Screen_reader) on päris keerukad tehnoloogiad, mis muudavad digitaalse teksti kõneks või brailles väljundiks. Kuigi neid kasutavad peamiselt nägemispuudega inimesed, on need väga kasulikud ka õppimisraskustega kasutajatele, näiteks düsleksiaga inimestele. + +Mulle meeldib mõelda ekraanilugejat nagu väga nutikat jutustajat, kes raamatut sulle ette loeb. Ta loeb sisu loogilises järjekorras, teatab interaktiivsetest elementidest nagu "nupp" või "link" ja pakub klaviatuurilööke, et lehel kiiresti liikuda. Aga siin on asi – ekraanilugejad saavad imet teha ainult siis, kui ehitame veebilehed korraliku struktuuri ja tähendusliku sisuga. Siin tuleb mängu sinu roll arendajana! + +**Populaarsemad ekraanilugejad platvormide lõikes:** +- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (tasuta ja kõige populaarsem), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (sisseehitatud) +- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (sisseehitatud ja väga võimas) +- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (sisseehitatud) +- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (tasuta ja avatud lähtekoodiga) + +**Kuidas ekraanilugejad veebisisu navigeerivad:** + +Ekraanilugejad pakuvad mitmeid navigeerimismeetodeid, mis muudavad sirvimise kogenud kasutajatele tõhusaks: +- **Järjekohane lugemine**: Loeb sisu ülesvalt alla, nagu raamatu järgimine +- **Maamärkide navigeerimine**: Hüppa lehe sektsioonide vahel (päis, navigeerimine, põhiosa, jalus) +- **Pealkirjade navigeerimine**: Vaheta pealkirjade vahel, et mõista lehe ülesehitust +- **Lingiloendid**: Koosta loend kõigist linkidest kiireks ligipääsuks +- **Vormikontrollid**: Navigeeri otse sisendväljade ja nuppude vahel + +> 💡 **Siin on midagi, mis pani mind imestama**: 68% ekraanilugejate kasutajatest navigeerib peamiselt pealkirjade abil ([WebAIM uuring](https://webaim.org/projects/screenreadersurvey9/#finding)). See tähendab, et sinu pealkirjastruktuur on kasutajatele nagu maakaart — kui sa selle õigesti teed, aitad inimestel su sisu kiiremini leida! + +### Testimisprotsessi ülesseadmine + +Siin on häid uudiseid — tõhus ligipääsetavuse testimine ei pea olema üle jõu käiv! Sooviksid ühendada automatiseeritud tööriistad (need tabavad suurepäraselt silmatorkavaid vigu) mõningase praktilise testimisega. Siin on meetod, mis minu kogemuse põhjal haarab kõige rohkem vigu ilma terve päeva ära söömata: + +**Oluline käsitsi testimise töövoog:** + +```mermaid +flowchart TD + A[🚀 Alusta testimist] --> B{⌨️ Klaviatuuri navigeerimine} + B --> C[Suru kõik interaktiivsed elemendid läbi Tabiga] + C --> D{🎧 Ekraani lugeja testimine} + D --> E[Testi NVDA/VoiceOver'iga] + E --> F{🔍 Suumimise testimine} + F --> G[Suum 200%-ni ja testi funktsionaalsust] + G --> H{🎨 Värvi/kontrasti kontroll} + H --> I[Kinnita, et kogu tekst vastab kontrastisuhetele] + I --> J{👁️ Fookuse haldamine} + J --> K[Veendu, et fookuse indikaatorid on nähtavad] + K --> L[✅ Testimine lõpetatud] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 +``` +**Testimise samm-sammult kontrollnimekiri:** +1. **Klaviatuuri navigeerimine**: Kasuta ainult Tab, Shift+Tab, Enter, Space ja nooleklahve +2. **Ekraanilugeja testimine**: Lülita sisse NVDA, VoiceOver või Narrator ja navigeeri silmad kinni +3. **Suumimise testimine**: Testi 200% ja 400% suumitasemel +4. **Värvikontrastsuse kontroll**: Kontrolli kogu teksti ja kasutajaliidese komponente +5. **Fookuse indikaatori testimine**: Veendu, et kõigil interaktiivsetel elementidel on nähtavad fookuse seisundid + +✅ **Alusta Lighthouse'iga**: Ava oma brauseri arendustööriistad, tee Lighthouse'i ligipääsetavuse audit, siis kasuta tulemusi, et suunata oma käsitsi testimise fookust. + +### Suumimise ja suurendamise tööriistad + +Sa tead, kuidas vahel sõrmede kokkusurumisega telefoni teksti suumid, kui see liiga väike on, või kuidas päiksevalguses arvutiekraani pigistad? Paljud kasutajad toetuvad suurendamisse, et muuta sisu iga päev loetavaks. See hõlmab nägemispuudega inimesi, vanemaid täiskasvanuid ja kõiki, kes on proovinud veebi lugeda väljas. + +Kaasaegsed suumitehnoloogiad on arenenud kaugemale ainult suurendamast. Mõistmine, kuidas need tööriistad toimivad, aitab sul luua reageerivaid disaine, mis on funktsionaalsed ja atraktiivsed ka suumitasemel. + +**Kaasaegsed brauseri suumivõimalused:** +- **Lehe suum**: Skaalab kogu sisu proportsionaalselt (tekst, pildid, paigutus) - see on eelistatud meetod +- **Ainult teksti suum**: Suurendab fonti, säilitades originaalse paigutuse +- **Sõrmede kokkusurumisel suumimine ("pinch-to-zoom")**: Mobiilne žest ajutiseks suumiks +- **Brauseri tugi**: Kõik moodsad brauserid toetavad kuni 500% suurendust ilma funktsionaalsust rikkumata + +**Spetsiaalsed suurendustarkvarad:** +- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (sisseehitatud), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (sisseehitatud koos täiustatud funktsioonidega) + +> ⚠️ **Disaini kaalutlus**: WCAG nõuab, et sisu jääks funktsionaalseks 200% suumimisel. Sellel tasemel peaks horisontaalne kerimine olema minimaalne ja kõik interaktiivsed elemendid peaksid jääma ligipääsetavaks. + +✅ **Testeeri oma reageerivat disaini**: Suumiprograami oma brauser 200% ja 400% peale. Kas paigutus kohaneb sujuvalt? Kas saad ligipääsu kõigile funktsioonidele ilma liigse kerimiseta? + +## Kaasaegsed Ligipääsetavuse Testimisriistad + +Nüüd kui sul on aru saada, kuidas inimesed abitehnoloogiatega veebis navigeerivad, uurime tööriistu, mis aitavad sul luua ja testida ligipääsetavaid veebisaite. + +Mõtle nii: automatiseeritud tööriistad tabavad hästi silmatorkavaid vigu (nagu puuduva alt-teksti), samas praktiline testimine tagab, et su sait on päriselus hästi kasutatav. Koos annavad need kindlustunde, et su saidid töötavad kõigi jaoks. + +### Värvikontrasti testimine + +Siin on häid uudiseid: värvikontrastsus on üks levinumaid ligipääsetavusprobleeme, aga ka üks lihtsamaid parandada. Hea kontrastsus aitab kõiki — nägemispuudega kasutajaid ja inimesi, kes püüavad lugeda telefoni rannas. + +**WCAG kontrasti nõuded:** + +| Teksti tüüp | WCAG AA (minimaalne) | WCAG AAA (täiustatud) | +|-------------|----------------------|----------------------| +| **Tavaline tekst** (alla 18pt) | 4.5:1 kontrastisuhe | 7:1 kontrastisuhe | +| **Suur tekst** (18pt+ või 14pt+ paks) | 3:1 kontrastisuhe | 4.5:1 kontrastisuhe | +| **Kasutajaliidese komponendid** (nupud, vormide ääred) | 3:1 kontrastisuhe | 3:1 kontrastisuhe | + +**Olulised testimise tööriistad:** +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - lauaarvuti rakendus koos värvipipetiga +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - veebipõhine kohe tagasisidega +- [Stark](https://www.getstark.co/) - disainitööriistade plugin Figma, Sketch, Adobe XD jaoks +- [Accessible Colors](https://accessible-colors.com/) - Leia ligipääsetavad värvipaletid + +✅ **Loo paremaid värvikombinatsioone**: Alusta oma brändi värvidest ja kasuta kontrastikontrollereid, et luua ligipääsetavad variandid. Dokumenteeri need oma disainisüsteemi ligipääsetavate värviont tokenitena. + +### Ulatuslik ligipääsetavuse audit + +Kõige tõhusam ligipääsetavuse testimine ühendab mitmeid lähenemisi. Ükski tööriist ei kata kõike, seega mitmekesine testimisrutiin tagab põhjaliku katvuse. + +**Brauseripõhine testimine (arendustööriistades):** +- **Chrome/Edge**: Lighthouse'i ligipääsetavuse audit + Ligipääsetavuse paneel +- **Firefox**: Ligipääsetavuse inspekteerija koos detailse puuvaatega +- **Safari**: Web Inspectori auditivahekaart koos VoiceOver simulatsiooniga + +**Professionaalsed testimislaiendid:** +- [axe DevTools](https://www.deque.com/axe/devtools/) - tööstusharu standard automatiseeritud testimiseks +- [WAVE](https://wave.webaim.org/extension/) - visuaalne tagasiside veaparandustega +- [Accessibility Insights](https://accessibilityinsights.io/) - Microsofti ulatuslik testimiskomplekt + +**Käsurea ja CI/CD integreerimine:** +- [axe-core](https://github.com/dequelabs/axe-core) - JavaScripti teek automatiseeritud testimiseks +- [Pa11y](https://pa11y.org/) - käsurea ligipääsetavuse testimise tööriist +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Automatiseeritud ligipääsetavuse skoor + +> 🎯 **Testimise eesmärk**: Seadke Lighthouse'i ligipääsetavuse skooriks vähemalt 95+. Pea meeles, et automatiseeritud tööriistad tabavad ligikaudu 30-40% ligipääsetavusprobleemidest — käsitsi testimine on ikkagi hädavajalik! + +### 🧠 **Testimisoskuste Kontroll: Kas oled valmis probleemide leidmiseks?** + +**Vaatame, kuidas sa tunned end ligipääsetavuse testimisega:** +- Milline testimismeetod tundub sulle praegu kõige ligipääsetavam? +- Kas suudad ette kujutada terve päeva ainult klaviatuuriga navigeerimist? +- Mis on üks ligipääsetavustakistus, millega oled isiklikult veebis kokku puutunud? -[Ekraanilugejad](https://en.wikipedia.org/wiki/Screen_reader) on tavaliselt kasutatavad kliendid nägemispuudega inimestele. Kui me kulutame aega, et tagada brauseri korrektne teabe edastamine, peame samuti tagama, et ekraanilugeja teeks seda sama. +```mermaid +pie title "Juurdepääsetavuse probleemid, mida tabatakse erinevate meetoditega" + "Automaatsed tööriistad" : 35 + "Käsitsi testimine" : 40 + "Kasutajate tagasiside" : 25 +``` +> **Enesekindluse tõstja**: Professionaalsed ligipääsetavuse testijad kasutavad seda täpset meetodite kombinatsiooni. Sa õpid tööstusharu parimaid tavasid! + +## Ligipääsetavuse Loomine Algusest Lõpuni + +Edu võti ligipääsetavuses on see sisse ehitada juba algusest peale. Ma tean, et on ahvatlev mõelda "ma lisan ligipääsetavuse hiljem", aga see on nagu üritada lisada trepipakett majale, mis on juba valmis ehitatud. Võimalik? Jah. Lihtne? Mitte päris. + +Mõtle ligipääsetavusele nagu majaplaanimisele — palju lihtsam on arvestada ratastooliga ligipääsuga oma esialgsetes arhitektuuriplaanides kui hiljem kõike ümber kohandada. + +### POUR põhimõtted: Sinu ligipääsetavuse alus + +Veebisisu ligipääsetavuse juhised (WCAG) põhinevad neljal põhimõttel, mis moodustavad akronüümi POUR. Ära muretse — need pole kuivlikud akadeemilised mõisted! Tegelikult on need praktilised juhendid, kuidas luua sisu, mis töötab kõigile. + +Kui oled POUR põhimõtted selgeks saanud, muutub ligipääsetavuse otsuste tegemine palju loomulikumaks. Nagu oleks sul vaimne kontrollnimekiri, mis juhib sinu disainivalikuid. Vaatame üle: + +```mermaid +flowchart LR + A[🔍 TUNNETAV
Kas kasutajad saavad seda tajuda?] --> B[🎮 KASUTATAV
Kas kasutajad saavad seda kasutada?] + B --> C[📖 MÕISTETAV
Kas kasutajad saavad sellest aru?] + C --> D[💪 TÜHENDLIK
Kas see töötab kõikjal?] + + A1[Alternatiivtekst
Alapealkirjad
Kontrast] --> A + B1[Klaviatuuriga ligipääs
Puuduvad krambid
Ajapiirangud] --> B + C1[Selge keel
Ettetähtav
Veavigaabi] --> C + D1[Kehtiv kood
Ühilduv
Tulevikukindel] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Tajutav**: Info peab olema esitatav viisil, mida kasutajad saavad tajuda oma olemasolevate meelte kaudu + +- Paku tekstialternatiive mitte-tekstuaalsele sisule (pildid, videod, heli) +- Tagada piisav värvikontrastsus kogu teksti ja kasutajaliidese komponentide puhul +- Paku subtiitreid ja transkriptsioone multimeediale +- Disaini sisu, mis jääb funktsionaalseks suumides kuni 200% +- Kasuta mitmeid meelelisi omadusi (mitte ainult värvi), et edastada infot + +**🎮 Juhtitav**: Kõik liidese komponendid peavad olema juhitavad olemasolevate sisendmeetodite kaudu + +- Tee kogu funktsionaalsus ligipääsetav klaviatuuriga navigeerides +- Anna kasutajatele piisavalt aega sisu lugemiseks ja suhtlemiseks +- Väldi sisu, mis võib põhjustada krampe või vestibulaarseid häireid +- Aita kasutajatel navigeerida tõhusalt selge struktuuri ja maamärkidega +- Tagada interaktiivsetel elementidel piisavalt suured sihtmärgid (vähemalt 44px) + +**📖 Mõistetav**: Info ja liidese toimimine peavad olema arusaadavad ja selged + +- Kasuta selget, lihtsat keelt, mis sobib sinu sihtgrupile +- Tagada, et sisu ilmub ja toimib etteaimatavalt ja järjepidevalt +- Paku selgeid juhiseid ja veateateid kasutaja sisendi jaoks +- Aita kasutajatel mõista ja parandada vormides tehtud vigu +- Korralda sisu loogilise lugemiskorra ja infosõltuvusega + +**💪 Tugev**: Sisu peab töötama usaldusväärselt erinevate tehnoloogiate ja abiseadmetega + +- **Kasuta valide ja semantilist HTML-i oma aluseks** +- **Tagada ühilduvus praeguste ja tulevaste abitehnoloogiatega** +- **Järgi veebistandardeid ja parimaid tavasid märgistamisel** +- **Testi erinevates brauserites, seadmetes ja abivahenditega** +- **Struktureeri sisu nii, et keerukate funktsioonide puudumisel see siiski ladusalt toimiks** + +### 🎯 **POUR põhimõtete kontroll: Kinnitus** + +**Kiire ülevaade alustaladest:** +- Kas suudad meenutada mõnda veebisaidi funktsiooni, mis rikub iga POUR põhimõtte? +- Milline põhimõte tundub sulle arendajana kõige loomulikum? +- Kuidas võiksid need põhimõtted parandada disaini kõigile, mitte ainult puuetega kasutajatele? + +```mermaid +quadrantChart + title POUR põhimõtete mõju maatriks + x-axis Väike pingutus --> Suur pingutus + y-axis Väike mõju --> Suur mõju + quadrant-1 Kiired võidud + quadrant-2 Suured projektid + quadrant-3 Hinda hiljem + quadrant-4 Strateegiline fookus + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Pea meeles**: Alusta suurima mõjuga ja vähese pingutusega parendustest. Semantiline HTML ja alternatiivtekst annavad suurima ligipääsetavuse tõusu vähima vaevaga! + +## Ligipääsetava visuaalse disaini loomine + +Hea visuaalne disain ja ligipääsetavus käivad käsikäes. Kui kujundad mõttega ligipääsetavusest, avastad sageli, et need piirangud viivad puhtamate ja elegantsemate lahendusteni, mis kasuks tulevad kõigile kasutajatele. + +Vaatame, kuidas luua visuaalselt atraktiivseid kujundusi, mis töötavad kõigi jaoks sõltumata nende nägemisvõimest või tingimustest, milles nad su sisu vaatavad. + +### Värvi- ja visuaalse ligipääsetavuse strateegiad -Ekraanilugeja loeb lehe kõige lihtsamal kujul ülevalt alla kuuldavalt. Kui sinu leht on ainult tekst, edastab lugeja teabe sarnaselt brauserile. Loomulikult on veebilehed harva ainult tekst; need sisaldavad linke, graafikat, värve ja muid visuaalseid komponente. Tuleb hoolitseda selle eest, et ekraanilugeja loeks seda teavet õigesti. +Värv on võimas suhtlusvahend, kuid see ei tohiks kunagi olla ainus viis olulise info edastamiseks. Kujundamine, mis ei tugine üksnes värvile, loob vastupidavamaid ja kaasavamaid kogemusi, mis toimivad rohkemates olukordades. -Iga veebiarendaja peaks tutvuma ekraanilugejaga. Nagu eespool rõhutatud, on see klient, mida sinu kasutajad kasutavad. Samamoodi nagu oled tuttav brauseri toimimisega, peaksid õppima, kuidas ekraanilugeja töötab. Õnneks on ekraanilugejad enamikus operatsioonisüsteemides sisse ehitatud. +**Kujunda värvinägemise erinevusi arvestades:** -Mõned brauserid sisaldavad ka sisseehitatud tööriistu ja laiendusi, mis suudavad teksti ette lugeda või pakkuda mõningaid põhilisi navigeerimisfunktsioone, näiteks [Edge'i brauseri ligipääsetavuse tööriistad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Need on samuti olulised ligipääsetavuse tööriistad, kuid toimivad väga erinevalt ekraanilugejatest ja neid ei tohiks segamini ajada ekraanilugeja testimise tööriistadega. +Umbes 8% meestest ja 0,5% naistest on mingisugune värvinägemise erinevus (sage nimetus "värvipimedus"). Kõige tavalisemad tüübid on: +- **Deuteranoopia**: raskusi punase ja rohelise eristamisel +- **Protanoopia**: punane tundub tuhmim +- **Tritanoopia**: raskused sinise ja kollasega (harva esinev) -✅ Proovi ekraanilugejat ja brauseri tekstilugejat. Windowsis on vaikimisi kaasas [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon), samuti saab paigaldada [JAWS](https://webaim.org/articles/jaws/) ja [NVDA](https://www.nvaccess.org/about-nvda/). macOS-is ja iOS-is on vaikimisi paigaldatud [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10). +**Kaasaegsed värvistrateegiad:** -### Suumimine +```css +/* ❌ Bad: Using only color to indicate status */ +.error { color: red; } +.success { color: green; } -Teine tööriist, mida nägemispuudega inimesed sageli kasutavad, on suumimine. Kõige lihtsam suumimise tüüp on staatiline suum, mida juhitakse `Control + plussmärk (+)` või ekraani eraldusvõime vähendamisega. See suumimise tüüp muudab kogu lehe suurust, seega on [responsiivne disain](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) oluline, et pakkuda head kasutajakogemust suurendatud suumitasemetel. +/* ✅ Good: Color plus icons and context */ +.error { + color: #d32f2f; + border-left: 4px solid #d32f2f; +} +.error::before { + content: "⚠️"; + margin-right: 8px; +} + +.success { + color: #2e7d32; + border-left: 4px solid #2e7d32; +} +.success::before { + content: "✅"; + margin-right: 8px; +} +``` + +**Üle põhiliste kontrastinõuete:** +- Testi värvivalikuid värvipimeduse simulaatoritega +- Kasuta värvi kõrval mustreid, tekstuure või kujundeid +- Veendu, et interaktiivsed olekud oleksid ilma värvita eristatavad +- Mõtle, kuidas sinu disain näeb välja kõrge kontrasti režiimis -Teine suumimise tüüp tugineb spetsiaalsele tarkvarale, mis suurendab ekraani ühte ala ja liigutab seda, sarnaselt päris suurendusklaasi kasutamisele. Windowsis on sisseehitatud [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198), ja [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) on kolmanda osapoole suurendustarkvara, millel on rohkem funktsioone ja suurem kasutajaskond. Nii macOS-is kui iOS-is on sisseehitatud suurendustarkvara nimega [Zoom](https://www.apple.com/accessibility/mac/vision/). +✅ **Testi oma värvide ligipääsetavust**: Kasuta tööriistu nagu [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/), et näha, kuidas su leht erinevate värvinägemise tüüpi kasutajatele paistab. -### Kontrasti kontrollijad +### Fookuse indikaatorid ja interaktsioonidisain -Veebilehtede värvid tuleb hoolikalt valida, et vastata värvipimedate kasutajate või madala kontrastsusega värve raskesti nägevate inimeste vajadustele. +Fookuse indikaatorid on digitaalne vastendus kursorile – nad näitavad klaviatuuri kasutajatele, kus nad lehel asuvad. Hästi disainitud fookuse indikaatorid parandavad kogemust kõigile, muutes interaktsioonid selgeteks ja etteaimatavaks. -✅ Testi mõnda veebilehte, mida naudid, värvikasutuse osas brauserilaiendiga, näiteks [WCAG-i värvikontrollija](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Mida sa õpid? +**Kaasaegsed fookuse indikaatori parimad tavad:** -### Lighthouse +```css +/* Enhanced focus styles that work across browsers */ +button:focus-visible { + outline: 2px solid #0066cc; + outline-offset: 2px; + box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); +} -Sinu brauseri arendustööriistade alal leiad Lighthouse'i tööriista. See tööriist on oluline, et saada esmane ülevaade veebilehe ligipääsetavusest (samuti muudest analüüsidest). Kuigi on oluline mitte tugineda ainult Lighthouse'ile, on 100% skoor väga kasulik lähtepunkt. +/* Remove focus outline for mouse users, preserve for keyboard users */ +button:focus:not(:focus-visible) { + outline: none; +} -✅ Leia Lighthouse oma brauseri arendustööriistade paneelilt ja tee analüüs mõnel veebilehel. Mida sa avastad? +/* Focus-within for complex components */ +.card:focus-within { + box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); + border-color: #4A90A4; +} -## Ligipääsetavuse disainimine +/* Ensure focus indicators meet contrast requirements */ +.custom-focus:focus-visible { + outline: 3px solid #ffffff; + outline-offset: 2px; + box-shadow: 0 0 0 6px #000000; +} +``` + +**Fookuse indikaatori nõuded:** +- **Nähtavus**: vähemalt 3:1 kontrast ümbritsevate elementidega +- **Laius**: vähemalt 2px paksune kogu elemendi ümber +- **Püsivus**: peab jääma nähtavaks kuni fookus liigub mujale +- **Erinevus**: peab visuaalselt eristuma teistest UI olekutest + +> 💡 **Disaininipp**: Heledad fookuse indikaatorid kasutavad sageli ühisena joonist, varjutust ja värvimuutusi, et tagada nähtavus erinevatel taustadel ja kontekstides. + +✅ **Audit fookuse indikaatorid**: Liigu oma veebilehel Tab-klahviga ja märgi ära, millistel elementidel on selged fookuse indikaatorid. Kas mõni on raske märgata või puudub täielikult? + +### Semantiline HTML: Ligipääsetavuse alus + +Semantiline HTML on nagu GPS süsteem abitehnoloogiatele sinu veebisaidil. Kui kasutad HTML elemente nende otstarbe järgi, annad ekraanilugeritele, klaviatuuridele ja teistele tööriistadele detailse kaardi kasutajate tõhusaks navigeerimiseks. + +Siin on analoogia, mis mulle hästi sobis: semantiline HTML on nagu hästi organiseeritud raamatukogu selgete kategooriate ja abimärkidega, vastandina laoplatsile, kus raamatud on suvaliselt laiali. Mõlemas kohas on samad raamatud, aga kumma juures oleks sul kergem midagi leida? Just nii! + +```mermaid +flowchart TD + A[🏠 HTML Dokument] --> B[📰 päis] + A --> C[🧭 nav] + A --> D[📄 peamine] + A --> E[📋 jalus] + + B --> B1[h1: Saidi nimi
Logo & bränding] + C --> C1[ul: Navigatsioon
Põhilingid] + D --> D1[artikkel: Sisu
jaotis: Alajaotused] + D --> D2[aside: Küljeriba
Seotud sisu] + E --> E1[nav: Jaluse lingid
Autoriõiguse info] + + D1 --> D1a[h1: Lehe pealkiri
h2: Peamised jaotised
h3: Alajaotused] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Ligipääsetava lehekülje struktuuri ehituskivid:** -Ligipääsetavus on suhteliselt suur teema. Et sind aidata, on saadaval palju ressursse. +```html + +
+

Your Site Name

+ +
+ +
+
+
+

Article Title

+

Published on

+
+ +
+

First Section

+

Content that relates to this section...

+
+ +
+

Second Section

+

More related content...

+
+
+ + +
+ + +``` -- [Accessible U - Minnesota Ülikool](https://accessibility.umn.edu/your-role/web-developers) +**Miks semantiline HTML muudab ligipääsetavust:** + +| Semantiline element | Otstarve | Ekraanilugeja kasu | +|---------------------|----------|--------------------| +| `
` | Lehe või sektsiooni päis | "Banner landmark" - kiire navigeerimine ülesse | +| `
+ + + +
+
+

Welcome to Turtle Ipsum

+

+ Learn more about our turtle community and discover fascinating facts about these amazing creatures.

- Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum -

- - -
-
- Sign up for turtle news -
-

- Internal Pages + Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-

Index

-

Semantic Example

-
-
-

© 2016 Instrument

-
+
+
+ +
+ + + + +

© 2024 Instrument. All rights reserved.

+
``` -## Loengu-järgne viktoriin -[Loengujärgne viktoriin](https://ff-quizzes.netlify.app/web/en/) +**Peamised tehtud parandused:** +- Lisatud korrektne semantiline HTML struktuur +- Parandatud pealkirjade hierarhia (üksnes üks h1, loogiline järjekord) +- Lisatud tähenduslik linkide tekst "kliki siia" asemel +- Lisatud navigeerimise jaoks korrektne ARIA sildistus +- Lisatud lang atribuudi ja korrektsed meta märgendid +- Interaktiivsete elementidena kasutatud button-elementi +- Jaluse sisu korraldatud korrektselt tähtsate piirkondadega -## Ülevaade ja iseseisev õpe +## Lektuuri järeltest +[Lektuuri järeltest](https://ff-quizzes.netlify.app/web/en/) -Paljudel valitsustel on seadused, mis käsitlevad ligipääsetavuse nõudeid. Uuri oma koduriigi ligipääsetavuse seadusi. Mis on kaetud ja mis mitte? Näiteks [see valitsuse veebisait](https://accessibility.blog.gov.uk/). +## Ülevaade & Iseteemaks õppimine -## Ülesanne +Paljudel valitsustel on seadused ligipääsetavuse nõuete kohta. Loe oma kodumaa ligipääsetavusseadustest. Mis on kaetud ja mis mitte? Näiteks [see valitsuse veebisait](https://accessibility.blog.gov.uk/). + +## Kodune ülesanne [Analüüsi mitte-ligipääsetavat veebisaiti](assignment.md) -Autorid: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument +Tänud: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) autor Instrument + +--- + +## 🚀 Sinu ligipääsetavuse meisterlikkuse ajakava + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Paigalda brauserisse axe DevTools laiendus +- [ ] Käivita Lighthouse ligipääsetavuse audit oma lemmik veebisaidil +- [ ] Proovi navigeerida mõnel veebisaidil ainult Tab-klahvi abil +- [ ] Testi oma brauseri sisseehitatud ekraanilugejat (Narrator/VoiceOver) + +### 🎯 **Mida saad saavutada selle tunni jooksul** +- [ ] Tsemini lektuurijärgne test ja mõtiskle ligipääsetavuse teemadel +- [ ] Harjuta tähendusliku alt-teksti kirjutamist 10 erineva pildi kohta +- [ ] Audit eelnimetatud veebisaidi pealkirjastruktuur HeadingsMap laiendiga +- [ ] Paranda väljakutse HTML-is leitud ligipääsetavusprobleeme +- [ ] Testi oma praeguse projekti värvikontrasti WebAIM vahendiga + +### 📅 **Sinu nädala pikkune ligipääsetavuse teekond** +- [ ] Täida ülesanne mitte-ligipääsetava veebisaidi analüüsiks +- [ ] Sea üles oma arenduskeskkond ligipääsetavuse testimise tööriistadega +- [ ] Harjuta klaviatuuriga navigeerimist 5 erineval keerukal veebisaidil +- [ ] Loo lihtne vorm õige märgistuse, veahalduse ja ARIAGA +- [ ] Liitu ligipääsetavuse kogukonnaga (A11y Slack, WebAIM foorum) +- [ ] Vaata, kuidas tõelised puudega kasutajad veebis navigeerivad (YouTube'is on suurepäraseid näiteid) + +### 🌟 **Sinu kuuajaline muutumine** +- [ ] Integreeri ligipääsetavuse testimine arendusvoogu +- [ ] Panusta avatud lähtekoodi projekti ligipääsetavusprobleemide parandamisega +- [ ] Viige läbi kasutatavuse testimine koos kellelegi, kes kasutab abitehnoloogiat +- [ ] Loo oma meeskonnale ligipääsetav komponentide teek +- [ ] Too ligipääsetavuse eest seismine oma töökohal või kogukonnas +- [ ] Ole mentor kellelegi, kes on ligipääsetavuse mõistete uus õppija + +### 🏆 **Lõplik ligipääsetavuse meistri tagasiside** + +**Tähista oma ligipääsetavuse teekonda:** +- Mis on kõige üllatavam asi, mida õppisid inimeste veebikasutuse kohta? +- Milline ligipääsetavuse põhimõte kõnetab sind enim sinu arendusstiilis? +- Kuidas on ligipääsetavuse õppimine muutnud sinu disainivaadet? +- Millise esimese ligipääsetavuse paranduse soovid teha reaalsel projektil? + +```mermaid +journey + title Sinu ligipääsetavuse enesekindluse areng + section Täna + Ülekoormatud: 3: You + Uudishimulik: 4: You + Motiveeritud: 5: You + section Selle nädal + Harjutamine: 4: You + Testimine: 5: You + Mõistmine: 5: You + section Järgmine kuu + Pooldaja: 5: You + Juhtimine: 5: You + Vaikimisi kaasav: 5: You +``` +> 🌍 **Sa oled nüüd ligipääsetavuse meister!** Sa mõistad, et suurepärased veebikogemused toimivad kõigi jaoks, sõltumata sellest, kuidas nad veebi kasutavad. Iga ligipääsetav funktsioon, mida ehitad, teeb interneti kaasavamaks. Veeb vajab arendajaid nagu sina, kes näevad ligipääsetavust mitte piiranguna, vaid võimalusena luua paremaid kogemusi kõigile kasutajatele. Tere tulemast liikumisse! 🎉 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Hoiatus**: +See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles peaks olema autoriteetne allikas. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse või valesti mõistmise eest, mis võib tekkida selle tõlke kasutamisest. + \ No newline at end of file diff --git a/translations/et/1-getting-started-lessons/3-accessibility/assignment.md b/translations/et/1-getting-started-lessons/3-accessibility/assignment.md index d0dc3341c..a94353b7f 100644 --- a/translations/et/1-getting-started-lessons/3-accessibility/assignment.md +++ b/translations/et/1-getting-started-lessons/3-accessibility/assignment.md @@ -1,29 +1,261 @@ -# Analüüsi ligipääsmatut veebisaiti +# Terviklik veebisaidi ligipääsetavuse audit ## Juhised -Tuvasta veebisait, mis sinu arvates EI ole ligipääsetav, ja loo tegevuskava selle ligipääsetavuse parandamiseks. -Sinu esimene ülesanne on tuvastada see sait, kirjeldada viise, kuidas see sinu arvates ei ole ligipääsetav, ilma analüüsitööriistu kasutamata, ning seejärel esitada see Lighthouse'i analüüsile. Tee analüüsi tulemustest PDF ja koostada üksikasjalik plaan vähemalt kümne punktiga, kuidas saiti saaks parandada. +Selles ülesandes viid läbi professionaalse taseme ligipääsetavuse auditi reaalsel veebisaidil, rakendades õpitud põhimõtteid ja tehnikaid. See praktiline kogemus süvendab sinu arusaamist ligipääsetavuse tõketest ja lahendustest. -## Tabel saidi ligipääsetavuse testimiseks +Vali veebisait, mis tundub sisaldavat ligipääsetavusega seotud probleeme — see annab sulle rohkem õppimisvõimalusi kui juba täiusliku saidi analüüsimine. Sobivad kandidaadid võivad olla vanemad veebisaidid, keerukad veebirakendused või saidid rikkaliku multimeedia sisuga. -| Kriteerium | Näidislik | Piisav | Vajab parandamist | -|------------|-----------|--------|-------------------| -| | puudub <10% nõutavast | puudub 20% nõutavast | puudub 50% nõutavast | +### 1. etapp: Strateegiline manuaalne hindamine ----- -Õpilase aruanne: sisaldab lõike saidi ligipääsmatuse kohta, Lighthouse'i raporti PDF-vormingus, kümnepunktilist nimekirja parandustest koos üksikasjadega, kuidas neid ellu viia +Enne automatiseeritud tööriistade kasutamist vii läbi põhjalik manuaalne hindamine. See kasutajakeskne lähenemine paljastab sageli probleeme, mida tööriistad ei tuvasta, ning aitab mõista tegelikku kasutajakogemust. + +**🔍 Olulised hindamiskriteeriumid:** + +**Navigatsioon ja struktuur:** +- Kas kogu saidil saab navigeerida ainult klaviatuuri abil (Tab, Shift+Tab, Enter, Space, nooleklahvid)? +- Kas fookuse indikaatorid on selgelt nähtavad kõigil interaktiivsetel elementidel? +- Kas pealkirjastruktuur (H1-H6) loob loogilise sisuvälja? +- Kas on olemas otseühendused (skip links) põhisisu juurde hüppamiseks? + +**Visuaalne ligipääsetavus:** +- Kas kogu saidil on piisav värvikontrast (vähemalt 4.5:1 normaalse teksti jaoks)? +- Kas sait tugineb ainult värvile olulise info edastamisel? +- Kas kõigil piltidel on sobiv alternatiivtekst? +- Kas paigutus säilib funktsionaalsena ka 200% suumimisel? + +**Sisu ja kommunikatsioon:** +- Kas esineb ebamääraseid linkide tekste nagu "kliki siia"? +- Kas sisu ja funktsionaalsust on võimalik mõista ilma visuaalsete vihjeteta? +- Kas vormiväljadel on korrektsed sildid ja need on õigesti rühmitatud? +- Kas veateated on selged ja abistavad? + +**Interaktiivsed elemendid:** +- Kas kõik nupud ja vormikontrollid töötavad ainult klaviatuuri abil? +- Kas dünaamilisi sisumuutuseid teatatakse ekraanilugeritele? +- Kas modaalaknad ja keerukad vidinad järgivad korrektsed ligipääsetavuse mustrid? + +📝 **Kinnita oma leiud** konkreetsete näidete, ekraanipiltide ja lehekülgede URL-idega. Märgi nii probleemid kui ka hästi toimivad aspektid. + +### 2. etapp: Põhjalik automatiseeritud testimine + +Kinnita ja täienda oma manuaalseid leide tööstusharu standarditele vastavate ligipääsetavuse testimisvahenditega. Iga tööriist keskendub erinevatele tugevustele, seega annab mitme tööriista kasutamine täieliku ülevaate. + +**🛠️ Vajalikud testimisvahendid:** + +1. **Lighthouse Accessibility Audit** (Chrome/Edge DevTools’is sees) + - Käivita audit mitmel lehel + - Keskendu spetsiifilistele mõõdikutulemustele ja soovitustele + - Märgi ligipääsetavuse skoor ja rikkumised + +2. **axe DevTools** (brauserilaiendus – tööstusharu standard) + - Detailsem veatuvastus võrreldes Lighthouse’iga + - Pakub koodinäiteid paranduste jaoks + - Testib WCAG 2.1 kriteeriumide vastu + +3. **WAVE Web Accessibility Evaluator** (brauserilaiendus) + - Visuaalne ligipääsetavuse elementide kujutis + - Tõstab esile vigu ja tugevaid külgi + - Hea lehekülje struktuuri mõistmiseks + +4. **Värvikontrasti analüsaatorid** + - WebAIM Contrast Checker värvipaaride jaoks + - Brauserilaiendused kogu lehele analüüsi tegemiseks + - Kontrollib nii WCAG AA kui AAA standardite vastu + +**🎧 Reaalseid abitehnoloogiaid testides:** +- **Ekraanilugeri testimine**: kasuta NVDA (Windows), VoiceOver (Mac) või TalkBack (Android) +- **Ainult klaviatuuri navigeerimine**: eemalda hiir ja navigeeri kogu sait +- **Suumimise testimine**: testi funktsionaalsust 200% ja 400% suumimisel +- **Hääljuhtimise testimine**: kui võimalik, kasuta hääljuhtimise tööriistu + +**📊 Korralda tulemused** põhiandmetega tabelis: +- Probleemi kirjeldus ja asukoht +- Tõsiduse tase (Kriitiline/Kõrge/Keskmine/Madala tähtsusega) +- Rikutud WCAG edu kriteeriumid +- Tööriist, mis tuvastas vea +- Ekraanipildid ja tõendid + +### 3. etapp: Täielik leidude dokumenteerimine + +Koosta professionaalne ligipääsetavuse auditiraport, mis demonstreerib sinu teadmisi tehnilistest probleemidest ja nende inimlikust mõjust. + +**📋 Nõutavad aruande osad:** + +1. **Juht kokkuvõte** (1 lehekülg) + - Veebisaidi URL ja lühikirjeldus + - Üldine ligipääsetavuse küpsusaste + - 3 kõige kriitilisemat probleemi + - Hinnang kasutajatele puude või piirangutega + +2. **Metoodika** (½ lehekülge) + - Testimislähenemine ja kasutatud tööriistad + - Hindatud lehed ja seadme/brauseri kombinatsioonid + - Rakendatud standardid (WCAG 2.1 AA) + +3. **Detailne leidude ülevaade** (2-3 lehekülge) + - Probleemid WCAG printsiipide järgi kategoriseeritud (Tajutav, Kasutatav, Mõistetav, Vastupidav) + - Lisa ekraanipildid ja konkreetsed näited + - Tõsta esile leitud positiivsed ligipääsetavuse omadused + - Võrdlus automatiseeritud tööriistade leidudega + +4. **Kasutajamõju hindamine** (1 lehekülg) + - Kuidas mõjutasid tuvastatud probleemid erinevate puuetega kasutajaid + - Stsenaariumid reaalse kasutajakogemuse kirjeldamiseks + - Äriline mõju (õiguslik risk, SEO, kasutajate arvu laienemine) + +**📸 Tõendite kogumine:** +- Ekraanipildid ligipääsetavuse rikkumistest +- Ekraanivideod probleemsetest kasutuslugudest +- Tööriistade aruanded (PDF-formaadis) +- Koodi näited probleemidest + +### 4. etapp: Professionaalne paranduskava + +Koosta strateegiline ja prioriseeritud plaan ligipääsetavuse probleemide lahendamiseks. See näitab su võimet mõelda professionaalse veebiarendajana, arvestades reaalmaailma äripiiranguid. + +**🎯 Koosta detailne parendusettepanekute nimekiri (vähemalt 10 probleemi):** + +**Iga tuvastatud probleemi kohta esita:** + +- **Probleemi kirjeldus**: Selge selgitus, mis on valesti ja miks see on probleemne +- **WCAG viide**: Täpne rikutud edu kriteerium (nt "2.4.4 Link Purpose (In Context) - tase A") +- **Kasutaja mõju**: Kuidas see mõjutab eri tüüpi puuetega inimesi +- **Lahendus**: Täpsed koodimuudatused, disainitäiustused või protsessi parandused +- **Prioriteedi tase**: Kriitiline (blokeerib põhilise kasutuse)/Kõrge (oluline takistus)/Keskmine (kasutatavusprobleem)/Madal (täiendus) +- **Rakendamise keerukus**: Ajahinnang/keerukuse tase (Kiire võit / Mõõdukas pingutus / Suur ümberkujundus) +- **Testimise kontroll**: Kuidas kontrollida, et parandused toimivad + +**Näidise parendusettepanek:** + +``` +Issue: Generic "Read more" link text appears 8 times on homepage +WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A +User Impact: Screen reader users cannot distinguish between links when viewed in link list +Solution: Replace with descriptive text like "Read more about sustainability initiatives" +Priority: High (major navigation barrier) +Effort: Low (30 minutes to update content) +Testing: Generate link list with screen reader - each link should be meaningful standalone +``` + +**📈 Strateegilised juurutusetapid:** + +- **1. etapp (0–2 nädalat)**: Kriitilised probleemid, mis blokeerivad põhifunktsionaalsuse +- **2. etapp (1–2 kuud)**: Kõrge prioriteediga parendused parema kasutajakogemuse jaoks +- **3. etapp (3–6 kuud)**: Keskmise prioriteediga täiustused ja protsessi parandused +- **4. etapp (pidev)**: Pidev jälgimine ja täiustamine + +## Hindamisrubriik + +Sinu ligipääsetavuse auditit hinnatakse nii tehnilise täpsuse kui professionaalse esituse alusel: + +| Kriteerium | Suurepärane (90–100%) | Hea (80–89%) | Rahuldav (70–79%) | Parandamist vajav (<70%) | +|--------------------------------|--------------------------------------------------------------------|----------------------------------------------------------|---------------------------------------------------------|--------------------------------------------------------| +| **Manuaalse testimise sügavus**| Terviklik hindamine kõigi POUR põhimõtete alusel, detailsete tähelepanekute ja kasutajastsenaariumitega | Hea katvus enamikus ligipääsetavuse valdkondades selgete leidude ja mõningase kasutajamõju analüüsiga | Põhihindamine võtmevaldkondades piisavate tähelepanekutega | Piiratud testimine, pealiskaudsed tähelepanekud, minimaalne kasutajamõju analüüs | +| **Tööriistade kasutus ja analüüs** | Kasutab kõiki vajalikke tööriistu tõhusalt, võrdleb leide, sisaldab selget tõendusmaterjali, analüüsib tööriistade piiranguid | Kasutab enamust tööriistu hea dokumentatsiooni ja mõningase võrdlusega ning piisava tõendusmaterjaliga | Kasutab vajalikke tööriistu põhilise dokumentatsiooniga ja mõne tõendiga | Vähe tööriistade kasutamist, halb dokumentatsioon või tõendite puudumine | +| **Probleemide tuvastamine ja kategoriseerimine** | Tuvastab 15+ konkreetset probleemi kõigis WCAG printsiipides, täpne jaotus tõsiduse alusel, näitab sügavat arusaamist | Tuvastab 10–14 probleemi enamikes WCAG printsiipides, hea kategoriseerimine ja arusaamine | Tuvastab 7–9 probleemi piisava WCAG katvusega ja baasjaotusega | Tuvastab <7 probleemi, piiratud ulatus või halb kategooriajaotus | +| **Lahenduste kvaliteet ja teostatavus** | 10+ detailset ja rakendatavat lahendust täpse WCAG-viitega, realistlike rakendusaegade ja kontrollmeetoditega | 8–9 hästi arendatud lahendust enamasti täpse viitega ja hea rakendusdetailiga | 6–7 baaslahendust mõningase detailiga ja üldiselt realistlike lähenemistega | <6 lahendust või ebapiisav detail, ebareaalsed rakendused | +| **Professionaalne suhtlus** | Raport on suurepäraselt organiseeritud, selgelt kirjutatud, sisaldab juhtkonnale suunatud kokkuvõtet, kasutab sobivat tehnilist keelt ja järgib äridokumentide standardeid | Hästi organiseeritud, hea kirjutamisstiiliga, sisaldab enamust nõutud osadest, sobiv toon | Täiesti organiseeritud, vastuvõetava kirjutusega, sisaldab baasnõudeid | Kehv organiseeritus, ebaselge kirjutis või oluliste osade puudumine | +| **Reaalmaailma rakendamine** | Demonstreerib arusaamist ärilisest mõjust, õiguslikest tingimustest, kasutajate mitmekesisusest ja praktilistest rakendusväljakutsetest | Näitab head praktilist arusaamist mõningase ärikontekstiga | Baasline arusaam reaalsest rakendusest | Piiratud seos praktiliste rakendustega | + +## Täiustatud väljakutse valikud + +**🚀 Õpilastele, kes otsivad lisaväljakutset:** + +- **Võrdlev analüüs**: Auditeeri 2–3 konkureerivat veebisaiti ja võrdle nende ligipääsetavuse küpsust +- **Mobiilse ligipääsetavuse fookus**: Süvitsi mobiilide spetsiifiliste ligipääsetavusprobleemide tuvastamine Android TalkBacki või iOS VoiceOveriga +- **Rahvusvaheline perspektiiv**: Uuri ja rakenda erinevate riikide ligipääsetavuse standardeid (EN 301 549, Section 508, ADA) +- **Ligipääsetavuse avalduse ülevaade**: Hinda veebisaidi olemasolevat ligipääsetavuse avaldust (kui on) võrreldes enda leidudega + +## Tarnitavad materjalid + +Esita terviklik ligipääsetavuse auditiraport, mis tõestab professionaalset analüüsi ja praktilist rakendusplaani: + +**📄 Lõpparuanne peab sisaldama:** + +1. **Juhtkonnale kokkuvõte** (1 lehekülg) + - Veebisaidi ülevaade ja ligipääsetavuse küpsuse hindamine + - Põhitulemuste kokkuvõte äri mõjuga + - Soovitatud prioriteetsed meetmed + +2. **Metoodika ja ulatus** (1 lehekülg) + - Testimislähenemine, kasutatud tööriistad, hindamiskriteeriumid + - Hindatud lehed/sektsioonid ja piirangud + - Standardite järgimise raamistik (WCAG 2.1 AA) + +3. **Detailne leidude aruanne** (3–4 lehekülge) + - Manuaalse testimise tähelepanekud kasutajastsenaariumitega + - Automatiseeritud tööriistade tulemused võrdlusega + - Probleemid WCAG printsiipide järgi koos tõenditega + - Leitud positiivsed ligipääsetavuse omadused + +4. **Strateegiline paranduskava** (3–4 lehekülge) + - Prioriseeritud parendusettepanekud (vähemalt 10) + - Rakenduse ajakava koos pingutuse hinnangutega + - Edu mõõdikud ja kontrollmeetodid + - Pikemaajaline ligipääsetavuse hooldusstrateegia + +5. **Tõendid** (Lisaosad) + - Ligipääsetavuse rikkumiste ja testimise tööriistade ekraanipildid + - Koodi näited probleemidest ja lahendustest + - Tööriistade aruanded ja auditite kokkuvõtted + - Ekraanilugerite testimise märkmed või salvestised + +**📊 Vormistusnõuded:** +- **Dokumendi formaat**: PDF (professionaalne esitlus) +- **Sõnade arv**: 2500–3500 sõna (välja arvatud lisaosad ja ekraanipildid) +- **Visuaalsed elemendid**: Lisa ekraanipildid, skeemid ja näited kogu raportis +- **Tsitaadid**: Viita WCAG juhistele ja ligipääsetavuse ressurssidele korrektselt + +**💡 Tipid tipptasemeks:** +- Kasuta professionaalset aruandefromatte koos ühtsete pealkirjade ja stiiliga +- Lisa sisukord lihtsaks navigeerimiseks +- Tasakaalusta tehnilist täpsust selge, ärilisele kommunikatsioonile sobiva keelekasutusega +- Näita nii tehnilist teostamist kui kasutajamõju mõistmist + +## Õpitulemused + +Pärast selle tervikliku ligipääsetavuse auditi läbiviimist oled arendanud olulisi professionaalseid oskusi: + +**🎯 Tehnilised pädevused:** +- **Ligipääsetavuse testimise meistriklass**: Tööstusharu standarditele vastavate manuaalsete ja automatiseeritud testimismeetodite valdamine +- **WCAG rakendamine**: Praktiline kogemus veebisisu ligipääsetavuse juhiste rakendamisel reaalsetes olukordades +- **Abitehnoloogiate mõistmine**: Praktika ekraanilugerite ja klaviatuuriga navigeerimisega +- **Probleem–lahendus kaardistamine**: Võime tuvastada ligipääsetavuse takistusi ja kavandada konkreetseid ning teostatavaid parandusi + +**💼 Professionaalsed oskused:** +- **Tehniline kommunikatsioon**: Kogemus professionaalsete ligipääsetavuse aruannete kirjutamisel mitmekesisele sihtgrupile +- **Strateegiline planeerimine**: Võime seada prioriteete ligipääsetavuse parendamisel kasutajamõju ja rakendamise teostatavuse alusel +- **Kvaliteedi tagamine**: Ligipääsetavuse testimise mõistmine arendusprotsessi osana +- **Riskihindamine**: Õiguslike, äriliste ja eetiliste aspektide hindamine ligipääsetavuse nõuetele vastavuses + +**🌍 Kaasaegse disaini mõtteviis:** +- **Kasutaja empaatia**: Sügav arusaam mitmekesistest kasutajate vajadustest ja abitehnoloogia interaktsioonidest +- **Universaalse disaini põhimõtted**: Tunnistus, et ligipääsetav disain kasu toob kõigile kasutajatele, mitte ainult puuetega inimestele +- **Jätkuv täiustamine**: Raamistik ligipääsetavuse pidevaks hindamiseks ja arendamiseks +- **Eestkoste oskused**: Enesekindlus ligipääsetavuse parimate tavade propageerimisel tulevikuprojektides ja meeskondades + +**🚀 Karjääriplaan:** +See ülesanne peegeldab reaalmaailma ligipääsetavuse konsultatsiooniprojekte, andes sulle portfooliot vääriva kogemuse, mis tõestab: +- Süsteemset probleemide lahendamise lähenemist +- Tähelepanu nii tehnilistele detailidele kui ärilisele mõjule +- Selget keeruliste tehniliste kontseptsioonide edastamist +- Õiguslike ja eetiliste kohustuste mõistmist veebiarenduses + +Täitmisel oled valmis olulisel määral kaasa aitama ligipääsetavuse algatustes igas veebiarenduse rollis ja propageerima kaasava disaini põhimõtteid kogu oma karjääri vältel. --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüdleme täpsuse poole, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tekkida võivate arusaamatuste ega valesti tõlgendamise eest. + \ No newline at end of file diff --git a/translations/et/10-ai-framework-project/README.md b/translations/et/10-ai-framework-project/README.md index 525604c01..f302421b1 100644 --- a/translations/et/10-ai-framework-project/README.md +++ b/translations/et/10-ai-framework-project/README.md @@ -1,41 +1,187 @@ -# AI Raamistik +# AI raamistik -On palju AI raamistikke, mis võivad oluliselt kiirendada projekti loomise aega. Selles projektis keskendume nende raamistikuga lahendatavate probleemide mõistmisele ja loome ise sellise projekti. +Kas oled kunagi tundnud end ülekoormatuna, püüdes AI-rakendusi nullist ehitada? Sa ei ole üksi! AI raamistikud on nagu Šveitsi taskunuga AI arendusele – need on võimsad tööriistad, mis säästavad aega ja peavalu nutikate rakenduste loomisel. Mõtle AI raamistikule kui hästi korraldatud raamatukogule: see pakub eelvalmisteid komponente, standardiseeritud API-sid ja nutikaid abstraktsioone, et saaksid keskenduda probleemide lahendamisele, mitte rakenduse detailide kallal rabelemisele. -## Miks kasutada raamistikku +Selles õppetükis uurime, kuidas raamistikud nagu LangChain muudavad kunagised keerulised AI integreerimise ülesanded puhtaks ja loetavaks koodiks. Sa õpid, kuidas lahendada päriselu väljakutseid nagu vestluste jälgimine, tööriistakõnede rakendamine ja erinevate AI mudelite haldamine ühtse liidese kaudu. -AI kasutamisel on erinevaid lähenemisviise ja põhjuseid nende valimiseks. Siin on mõned: +Kui me lõpetame, tead, millal haarata raamistikule mitte aga põhilähedale API-kõnedele, kuidas kasutada nende abstraktsioone efektiivselt ja kuidas ehitada AI-rakendusi, mis on valmis päriselu kasutuseks. Vaatame, mida AI raamistikud sinu projektidele teha saavad. -- **Ilma SDK-ta**. Enamik AI mudeleid võimaldab suhelda otse mudeliga näiteks HTTP-päringute kaudu. See lähenemine toimib ja võib olla ainus võimalus, kui SDK valik puudub. -- **SDK**. SDK kasutamine on tavaliselt soovitatav, kuna see võimaldab vähem koodi kirjutada mudeliga suhtlemiseks. Tavaliselt on see piiratud konkreetse mudeliga ja kui kasutada erinevaid mudeleid, võib olla vaja kirjutada uus kood nende täiendavate mudelite toetamiseks. -- **Raamistik**. Raamistik viib asjad tavaliselt järgmisele tasemele, pakkudes ühtset API-d erinevate mudelite jaoks, kusjuures erinevused seisnevad tavaliselt algseadistuses. Lisaks toovad raamistikud sisse kasulikke abstraktsioone, nagu tööriistad, mälu, töövood, agendid ja palju muud, võimaldades kirjutada vähem koodi. Kuna raamistikud on tavaliselt arvamuslikud, võivad need olla väga kasulikud, kui aktsepteerida nende lähenemist, kuid võivad jääda hätta, kui proovida teha midagi kohandatud, mida raamistik ei toeta. Mõnikord võib raamistik asju liiga lihtsustada, mistõttu ei pruugi õppida olulist teemat, mis hiljem võib mõjutada näiteks jõudlust. +## ⚡ Mida saad teha järgmise 5 minutiga -Üldiselt tuleks kasutada õiget tööriista vastavalt ülesandele. +**Kiire algus hõivatud arendajatele** -## Sissejuhatus +```mermaid +flowchart LR + A[⚡ 5 minutit] --> B[Paigalda LangChain] + B --> C[Loo ChatOpenAI klient] + C --> D[Saada esimene üleskutse] + D --> E[Näe raamistikku võimsust] +``` +- **1. minut**: Installi LangChain: `pip install langchain langchain-openai` +- **2. minut**: Sea üles oma GitHub token ja impordi ChatOpenAI klient +- **3. minut**: Loo lihtne vestlus süsteemi ja inimese sõnumitega +- **4. minut**: Lisa põhiline tööriist (näiteks liitmistehe) ja vaata AI tööriistakõnede toimimist +- **5. minut**: Koge vahet nõtmete API-kõnede ja raamistikupõhise abstraktsiooni vahel + +**Kiire testikood**: +```python +from langchain_openai import ChatOpenAI +from langchain_core.messages import SystemMessage, HumanMessage + +llm = ChatOpenAI( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="openai/gpt-4o-mini" +) + +response = llm.invoke([ + SystemMessage(content="You are a helpful coding assistant"), + HumanMessage(content="Explain Python functions briefly") +]) +print(response.content) +``` + +**Miks see oluline on**: 5 minutiga saad kogemuse, kuidas AI raamistikud muudavad keerulise AI integreerimise lihtsate meetodikõnedeks. See on alus, mis aitab käivitada tööstuslikke AI rakendusi. + +## Miks valida raamistik? + +Nüüd oled valmis AI rakendust ehitama – tubli! Aga siin on asi: sul on mitu erinevat teed, mida mööda minna, ning igaühel on omad plussid ja miinused. See on nagu valida, kas jala käia, rattaga sõita või autoga minna – kõik viivad kohale, aga kogemus (ja pingutus) on täiesti erinev. -Selles õppetükis õpime: +Vaatame kolme peamist viisi, kuidas AI-d oma projektidesse integreerida: -- Kasutama levinud AI raamistikku. -- Lahendama levinud probleeme, nagu vestlused, tööriistade kasutamine, mälu ja kontekst. -- Kasutama seda AI rakenduste loomiseks. +| Lähenemine | Eelised | Sobib | Mõtted | +|------------|---------|-------|--------| +| **Otsekohesed HTTP päringud** | Täielik kontroll, pole sõltuvusi | Lihtsad päringud, fundamentide õppimine | Rohkem koodi, käsitsi veahaldus | +| **SDK integratsioon** | Vähem tülikat koodi, mudelispetsiifiline optimeerimine | Ühe mudeli rakendused | Piiratud konkreetsete pakkujatega | +| **AI raamistikud** | Ühtne API, sisseehitatud abstraktsioonid | Mitme mudeliga rakendused, keerulised töövood | Õppimiskõver, võimalik ülearune abstraktsioon | -## Esimene päring +### Raamistike eelised praktikas -Meie esimeses rakenduse näites õpime, kuidas ühendada AI mudeliga ja pärida seda kasutades päringut. +```mermaid +graph TD + A[Teie rakendus] --> B[Tehisintellekti raamistik] + B --> C[OpenAI GPT] + B --> D[Anthropic Claude] + B --> E[GitHub mudelid] + B --> F[Kohalikud mudelid] + + B --> G[Sisseehitatud tööriistad] + G --> H[Mälu haldamine] + G --> I[Vestluse ajalugu] + G --> J[Funktsiooni kutsumine] + G --> K[Vigade käsitlemine] +``` +**Miks raamistikud on olulised:** +- **Ühendavad** mitmed AI pakkujad ühe liidese alla +- **Haldavad** automaatselt vestluse mälu +- **Pakuvad** valmis tööriistu levinud ülesanneteks nagu manused ja funktsioonide kutsumine +- **Juhtivad** veahaldust ja taasingutuse loogikat +- **Muutvad** keerulised töövood loetavaks meetodikõnedeks + +> 💡 **Pro näpunäide**: Kasuta raamistikku, kui vahetad AI mudeleid või ehitad keerukaid funktsioone nagu agendid, mälu või tööriistakõned. Kasuta otse API-sid, kui õpid algtõdesid või ehitad lihtsaid spetsiifilisi rakendusi. + +**Järeldus**: Nagu valida spetsialiseeritud käsitööriistade ja täisvarustusega töökoja vahel, on oluline valida tööriist vastavalt ülesandele. Raamistikud on parimad keerukate ja funktsiooniderikaste rakenduste jaoks, otse API-d sobivad lihtsate kasutusjuhtude jaoks hästi. + +## 🗺️ Sinu õppimise teekond AI raamistike meistriks + +```mermaid +journey + title Toor API-dest tootmisesse AI rakendustesse + section Raamistiku alused + Mõista abstraktsiooni eeliseid: 4: You + Saa LangChaini põhiteadmiste meistriks: 6: You + Võrdle lähenemisi: 7: You + section Vestlussüsteemid + Loo jutuliideseid: 5: You + Rakenda mälumustreid: 7: You + Töötle voolutavaid vastuseid: 8: You + section Arendatud funktsioonid + Loo kohandatud tööriistu: 6: You + Saa meistriks struktureeritud väljundis: 8: You + Loo dokumendisüsteeme: 8: You + section Tootmisrakendused + Ühenda kõik funktsioonid: 7: You + Töötle vigade stsenaariume: 8: You + Juhi täielikke süsteeme: 9: You +``` +**Sinu sihtkoht**: Selle õppetüki lõpuks valdad AI raamistike arendamist ja suudad luua keerukaid, tootmisklassi AI rakendusi, mis konkureerivad kommertslike AI assistentidega. + +## Sissejuhatus + +Selles õppetükis õpid: + +- Kasutama tavalist AI raamistikku. +- Lahendama tavalisi probleeme nagu vestlused, tööriistade kasutus, mälu ja kontekst. +- Kasutama seda AI rakenduste ehitamiseks. + +## 🧠 AI raamistiku arendusökosüsteem + +```mermaid +mindmap + root((Tehisintellekti Raamistikud)) + Abstraction Benefits + Code Simplification + Unified APIs + Built-in Error Handling + Consistent Patterns + Reduced Boilerplate + Multi-Model Support + Provider Agnostic + Easy Switching + Fallback Options + Cost Optimization + Core Components + Conversation Management + Message Types + Memory Systems + Context Tracking + History Persistence + Tool Integration + Function Calling + API Connections + Custom Tools + Workflow Automation + Advanced Features + Structured Output + Pydantic Models + JSON Schemas + Type Safety + Validation Rules + Document Processing + Embeddings + Vector Stores + Similarity Search + RAG Systems + Production Patterns + Application Architecture + Modular Design + Error Boundaries + Async Operations + State Management + Deployment Strategies + Skalaarvus + Järelevalve + Jõudlus + Turvalisus +``` +**Põhiprintsiip**: AI raamistikud abstraktseerivad keerukust, pakkudes võimsaid abstraktsioone vestluste haldamiseks, tööriistade integreerimiseks ja dokumentide töötlemiseks, võimaldades arendajatel luua keerukaid AI rakendusi puhta ja hooldatava koodiga. + +## Sinu esimene AI päring + +Alustame põhialustest, luues oma esimese AI rakenduse, mis saadab küsimuse ja saab vastuse tagasi. Nagu Archimedes oma vannis avastas nihkumise printsiibi, mõnikord viivad lihtsad tähelepanekud kõige võimsamate teadmiste juurde – raamistikud teevad need teadmised kättesaadavaks. -### Pythoniga +### LangChaini seadistamine GitHubi mudelitega -Selles näites kasutame Langchaini, et ühendada GitHubi mudelitega. Kasutame klassi `ChatOpenAI` ja anname sellele väljad `api_key`, `base_url` ja `model`. Token täidetakse automaatselt GitHub Codespaces'is ja kui rakendust käitatakse lokaalselt, tuleb seadistada isiklik juurdepääsutoken, et see töötaks. +Kasutan LangChaini ühendamaks end GitHubi mudelitega, mis on päris vahva, sest annab sulle tasuta ligipääsu erinevatele AI mudelitele. Parim osa? Alguseks piisab vaid mõnest lihtsast konfiguratsiooniparameetrist: ```python from langchain_openai import ChatOpenAI @@ -47,32 +193,58 @@ llm = ChatOpenAI( model="openai/gpt-4o-mini", ) -# works -response = llm.invoke("What's the capital of France?") +# Saada lihtne päring +response = llm.invoke("What's the capital of France?") print(response.content) ``` -Selles koodis: +**Vaatame, mis siin toimub:** +- **Loo** LangChain klient `ChatOpenAI` klassi abil – see on su tee AI-sse! +- **Sea** ühendus GitHubi mudelitega oma autentimistornega +- **Määra**, millist AI mudelit kasutada (`gpt-4o-mini`) – mõtle sellele kui oma AI assistendi valikule +- **Saada** küsimus `invoke()` meetodi kaudu – siin sünnib võlu +- **Võta** vastus ja kuva see – voilà, sa suhtled AI-ga! -- Kutsume `ChatOpenAI`, et luua klient. -- Kasutame `llm.invoke` päringuga, et luua vastus. -- Trükime vastuse `print(response.content)` abil. - -Näete vastust, mis on sarnane: +> 🔧 **Seadistamisnõuanne**: Kui kasutad GitHub Codespaces, on sul vedanud – `GITHUB_TOKEN` on juba seadistatud! Töötad lokaalselt? Pole probleemi, pead lihtsalt looma isikliku ligipääsutokeni õige õigusega. +**Oodatav väljund:** ```text The capital of France is Paris. ``` -## Vestlus +```mermaid +sequenceDiagram + participant App as Teie Pythoni rakendus + participant LC as LangChain + participant GM as GitHub mudelid + participant AI as GPT-4o-mini + + App->>LC: llm.invoke("Mis on Prantsusmaa pealinn?") + LC->>GM: HTTP päring koos promptiga + GM->>AI: Töötle prompt + AI->>GM: Genereeritud vastus + GM->>LC: Tagasta vastus + LC->>App: vastus.sisu +``` +## Vestlusliku AI ehitamine + +See esimene näide näitab põhialuseid, aga see on ainult üks vahetus – sa küsid, saad vastuse ja see ongi kõik. Tõelistes rakendustes tahad, et su AI mäletaks, mida olete arutanud, nagu Watson ja Holmes ehitasid oma uurimisvestlusi aja jooksul. + +Siin tuleb mängu LangChain. See pakub erinevaid sõnumitüüpe, mis aitavad vestlusi struktureerida ja lubavad anda AI-le iseloomu. Sa ehitad vestluskogemusi, mis hoiavad konteksti ja karakterit. -Eelmises osas nägite, kuidas kasutasime nn nullvõtte päringut, kus on üks päring ja sellele järgnev vastus. +### Sõnumitüüpide mõistmine -Sageli on aga olukordi, kus tuleb säilitada vestlus mitme sõnumi vahetamisega kasutaja ja AI assistendi vahel. +Mõtle sellele, et need sõnumitüübid on nagu erinevad "mütsid", mida vestlusosalistel on peas. LangChain kasutab erinevaid sõnumiklasse, et jälgida, kes mida ütleb: -### Pythoniga +| Sõnumitüüp | Eesmärk | Näide kasutusest | +|------------|---------|-----------------| +| `SystemMessage` | Määrab AI isiksuse ja käitumise | "Sa oled abivalmis programmeerimisassistent" | +| `HumanMessage` | Esindab kasutaja sisendit | "Selgita, kuidas funktsioonid toimivad" | +| `AIMessage` | Salvestab AI vastuseid | Varasemad AI vastused vestluses | -Langchainis saame vestlust salvestada loendisse. `HumanMessage` esindab kasutaja sõnumit ja `SystemMessage` on sõnum, mis määrab AI "isiksuse". Allolevas näites näete, kuidas juhendame AI-d võtma kapten Picardi isiksuse ja kasutaja/kasutaja küsib "Räägi mulle endast" päringuna. +### Loo oma esimene vestlus + +Loome vestluse, kus meie AI võtab kindla rolli. Anname talle Kapten Picardi iseloomu – tegelane, kes on tuntud oma diplomaatilise tarkuse ja juhtimisoskuse poolest: ```python messages = [ @@ -81,7 +253,12 @@ messages = [ ] ``` -Selle näite täielik kood näeb välja selline: +**Vestluse seadistuse lahtimurdmine:** +- **Määrab** AI rolli ja iseloomu läbi `SystemMessage` +- **Sisestab** algse kasutajaküsimuse `HumanMessage` kaudu +- **Loomulikult** rajab mitme vooru vestluse aluse + +Siin on kogu kood selle näite jaoks: ```python from langchain_core.messages import HumanMessage, SystemMessage @@ -100,12 +277,12 @@ messages = [ ] -# works +# töötab response = llm.invoke(messages) print(response.content) ``` -Näete tulemust, mis on sarnane: +Peaksid nägema tulemust, mis näeb välja umbes nii: ```text I am Captain Jean-Luc Picard, the commanding officer of the USS Enterprise (NCC-1701-D), a starship in the United Federation of Planets. My primary mission is to explore new worlds, seek out new life and new civilizations, and boldly go where no one has gone before. @@ -115,7 +292,7 @@ I believe in the importance of diplomacy, reason, and the pursuit of knowledge. I hold the ideals of the Federation close to my heart, believing in the importance of cooperation, understanding, and respect for all sentient beings. My experiences have shaped my leadership style, and I strive to be a thoughtful and just captain. How may I assist you further? ``` -Vestluse oleku säilitamiseks saate lisada vestlusele vastuse, et vestlus jääks meelde. Siin on, kuidas seda teha: +Vestluse järjepidevuse säilitamiseks (konteksti vaikimisi parandamise asemel) pead hoidma vastuseid oma sõnumite loendis. Nii nagu suuline traditsioon säilitas lugusid põlvest põlve, loob see meetod kestva mälu: ```python from langchain_core.messages import HumanMessage, SystemMessage @@ -134,7 +311,7 @@ messages = [ ] -# works +# töötab response = llm.invoke(messages) print(response.content) @@ -150,9 +327,9 @@ print(response.content) ``` -Ülaltoodud vestlusest näeme, kuidas kutsume LLM-i kaks korda: esmalt vestlusega, mis koosneb kahest sõnumist, ja teist korda, kui vestlusele on lisatud rohkem sõnumeid. +Päris lahe, eks? Siin toimub see, et kutsume LLM-i kaks korda – esmalt kahe algse sõnumiga, siis kogu vestluse looga. See on nagu AI jälgiks tahtlikult meie jutuajamist! -Tegelikult, kui seda käitate, näete teist vastust, mis on midagi sellist: +Kui jooksutad seda koodi, saad teise vastuse, mis kõlab ligikaudu nii: ```text Welcome aboard, Chris! It's always a pleasure to meet those who share a passion for exploration and discovery. While I cannot formally offer you a position on the Enterprise right now, I encourage you to pursue your aspirations. We are always in need of talented individuals with diverse skills and backgrounds. @@ -160,27 +337,165 @@ Welcome aboard, Chris! It's always a pleasure to meet those who share a passion If you are interested in space exploration, consider education and training in the sciences, engineering, or diplomacy. The values of curiosity, resilience, and teamwork are crucial in Starfleet. Should you ever find yourself on a starship, remember to uphold the principles of the Federation: peace, understanding, and respect for all beings. Your journey can lead you to remarkable adventures, whether in the stars or on the ground. Engage! ``` -Võtan seda kui "võib-olla" ;) +```mermaid +sequenceDiagram + participant User + participant App + participant LangChain + participant AI + + User->>App: "Räägi mulle endast" + App->>LangChain: [SystemMessage, HumanMessage] + LangChain->>AI: Vormindatud vestlus + AI->>LangChain: Kapten Picardi vastus + LangChain->>App: AIMessage objekt + App->>User: Kuvage vastus + + Note over App: Lisa AIMessage vestlusse + + User->>App: "Kas ma võin teie meeskonnaga liituda?" + App->>LangChain: [SystemMessage, HumanMessage, AIMessage, HumanMessage] + LangChain->>AI: Täielik vestluse kontekst + AI->>LangChain: Kontekstipõhine vastus + LangChain->>App: Uus AIMessage + App->>User: Kuvage kontekstipõhine vastus +``` +Ma võtan seda kui "võib-olla" ;) + +## Voogedastuse vastused -## Voogesituse vastused +Kas oled märganud, kuidas ChatGPT "tüübid" oma vastuseid reaalajas? See on voogedastus toimimas. Nagu vaadata oskuslikku kaligraafe tööl, nägid tähemärke ilmumas haru haaval, mitte korraga – voogedastus teeb suhtluse loomulikumaks ja annab kohese tagasiside. -TODO +### Voogedastuse rakendamine LangChainiga -## Päringumallid +```python +from langchain_openai import ChatOpenAI +import os + +llm = ChatOpenAI( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="openai/gpt-4o-mini", + streaming=True +) + +# Voogedasta vastus +for chunk in llm.stream("Write a short story about a robot learning to code"): + print(chunk.content, end="", flush=True) +``` + +**Miks voogedastus on lahe:** +- **Näitab** sisu samal ajal, kui see valmib – enam pole piinlikku ootamist! +- **Paneb** kasutajad tundma, et midagi toimub +- **Tundub** kiirem, kuigi sisuliselt ei pruugi olla +- **Lubab** kasutajatel hakata lugema, kui AI veel "mõtleb" + +> 💡 **Kasutajakogemuse näpunäide**: Voogedastus särab eriti pikemate vastuste puhul nagu koodi selgitused, loominguline kirjutamine või üksikasjalikud juhendid. Kasutajad armastavad näha edenemist, mitte vahtida tühja ekraani! + +### 🎯 Pedagoogiline hetk: Raamistike abstraktsioonide eelised + +**Peatu ja mõtiskle**: Sa said kogemuse AI raamistike abstraktsioonide võimsusest. Võrdle seda seniste õppetükkide otseste API-kõnedega. + +**Kiire enesehindamine**: +- Kas suudad selgitada, kuidas LangChain lihtsustab vestluste haldust võrreldes käsitsi sõnumite jälgimisega? +- Mis vahe on `invoke()` ja `stream()` meetoditel ning millal kumbagi kasutada? +- Kuidas parandab raamistik sõnumitüüpide süsteem koodi organiseerimist? -TODO +**Päriselu seos**: Need abstraktsioonimustrid (sõnumitüübid, voogedastusliidesed, vestluse mälu) on kasutusel kõigis suuremates AI rakendustes – alates ChatGPT liidesest kuni GitHub Copiloti koodi abini. Sa valdad samu arhitektuurilisi mustreid, mida kasutavad professionaalsed AI meeskonnad. + +**Väljakutsuva küsimus**: Kuidas kavandaksid raamistikulahenduse erinevate AI mudelipakkujate (OpenAI, Anthropic, Google) haldamiseks ühe liidese kaudu? Mõtle selle eelistele ja puudustele. + +## Pärandmallid + +Pärandmallid töötavad nagu retoorilised struktuurid klassikalises kõnemeisterlikkuses – mõtle, kuidas Cicero kohandas oma kõnemustreid erinevate publikute jaoks, hoides samal ajal veenvat raamistikku. Neil on võimalik luua taaskasutatavaid pärandeid, kus saab erinevaid info tükke vahetada, ilma et peaks kõike nullist ümber kirjutama. Kui mall on loodud, täidad vaid muutujad vajalikuga. + +### Taaskasutatavate pärandite loomine + +```python +from langchain_core.prompts import ChatPromptTemplate + +# Määra koodi selgituste mall +template = ChatPromptTemplate.from_messages([ + ("system", "You are an expert programming instructor. Explain concepts clearly with examples."), + ("human", "Explain {concept} in {language} with a practical example for {skill_level} developers") +]) + +# Kasuta malli erinevate väärtustega +questions = [ + {"concept": "functions", "language": "JavaScript", "skill_level": "beginner"}, + {"concept": "classes", "language": "Python", "skill_level": "intermediate"}, + {"concept": "async/await", "language": "JavaScript", "skill_level": "advanced"} +] + +for question in questions: + prompt = template.format_messages(**question) + response = llm.invoke(prompt) + print(f"Topic: {question['concept']}\n{response.content}\n---\n") +``` + +**Miks sa armastad malli kasutamist:** +- **Hoia** oma pärandid ühtsete kõigis rakenduse osades +- **Pole enam** segadust teksti jupidena liitmisega – lihtsalt puhased muutujad +- **Sinu AI** käitub ennustatavalt, sest struktuur jääb samaks +- **Uuendused** on lihtsad – muudad malli kord ja see kehtib kõigis kohtades ## Struktureeritud väljund -TODO +Kas oled kunagi tüdinenud AI vastuste töötlemisest, mis tulevad tagasi struktureerimata tekstina? Struktureeritud väljund on nagu õpetada oma AI-l süsteemselt järgima, nagu Linnaeus kasutas bioloogilist klassifikatsiooni – organiseeritud, ennustatav ja hõlpsasti kasutatav. Sa võid nõuda JSON-i, kindlaid andmestruktuure või mis tahes vajalikku vormingut. + +### Väljundskeemide määratlemine + +```python +from langchain_core.prompts import ChatPromptTemplate +from langchain_core.output_parsers import JsonOutputParser +from pydantic import BaseModel, Field + +class CodeReview(BaseModel): + score: int = Field(description="Code quality score from 1-10") + strengths: list[str] = Field(description="List of code strengths") + improvements: list[str] = Field(description="List of suggested improvements") + overall_feedback: str = Field(description="Summary feedback") + +# Seadista parser +parser = JsonOutputParser(pydantic_object=CodeReview) + +# Loo prompt koos vormingu juhistega +prompt = ChatPromptTemplate.from_messages([ + ("system", "You are a code reviewer. {format_instructions}"), + ("human", "Review this code: {code}") +]) + +# Vorminda prompt juhistega +chain = prompt | llm | parser + +# Saa struktureeritud vastus +code_sample = """ +def calculate_average(numbers): + return sum(numbers) / len(numbers) +""" + +result = chain.invoke({ + "code": code_sample, + "format_instructions": parser.get_format_instructions() +}) + +print(f"Score: {result['score']}") +print(f"Strengths: {', '.join(result['strengths'])}") +``` -## Tööriistade kasutamine +**Miks on struktureeritud väljund läbimurre:** +- **Pole enam** pead murda, mis vormingut saad – iga kord on see ühtlane +- **Sobitub** otse sinu andmebaaside ja API-dega ilma lisatööta +- **Püüab kinni** AI imelikke vastuseid enne, kui need rakendust rikuvad +- **Teevab** su koodi puhtamaks, sest tead täpselt, millega töötad -Tööriistad on viis, kuidas anda LLM-ile lisavõimeid. Idee on teavitada LLM-i funktsioonidest, mis tal on, ja kui päring vastab ühe tööriista kirjeldusele, siis kutsutakse see tööriist. +## Tööriistakõned -### Pythoniga +Jõuame ühe võimsama funktsioonini: tööriistad. Nii annad oma AI-le praktilisi võimalusi, mis ületavad pelga vestluse. Nagu keskaegsed gildid arendasid spetsiaalseid tööriistu konkreetsete käsitööde jaoks, saad varustada AI fookustatud instrumendiga. Kirjeldad, millised tööriistad on saadaval, ja kui keegi soovib midagi vastavat, saab AI tegutseda. -Lisame mõned tööriistad järgmiselt: +### Pythoniga kasutamine + +Lisame tööriistu nii: ```python from typing_extensions import Annotated, TypedDict @@ -188,7 +503,7 @@ from typing_extensions import Annotated, TypedDict class add(TypedDict): """Add two integers.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # Märgenditel peab olema tüüp ning need võivad vabatahtlikult sisaldada vaikeväärtust ja kirjeldust (sel järjekorras). a: Annotated[int, ..., "First integer"] b: Annotated[int, ..., "Second integer"] @@ -199,9 +514,9 @@ functions = { } ``` -Siin loome tööriista nimega `add` kirjelduse. Pärides `TypedDict`-i ja lisades liikmeid nagu `a` ja `b` tüübiga `Annotated`, saab selle teisendada skeemiks, mida LLM mõistab. Funktsioonide loomine on sõnastik, mis tagab, et teame, mida teha, kui konkreetne tööriist tuvastatakse. +Mis siin toimub? Loome tööriista `add` sinise trüki. Tüübist `TypedDict` pärandamine ja `Annotated` tüüpide kasutamine `a` ja `b` jaoks annab LLM-ile selge ülevaate, mida see tööriist teeb ja mida ta vajab. `functions` sõnastik on nagu meie tööriistakast – see ütleb koodile täpselt, mida teha, kui AI otsustab konkreetset tööriista kasutada. -Vaatame, kuidas kutsume LLM-i selle tööriistaga: +Järgmine samm: vaadata, kuidas kutsume LLM-i koos selle tööriistaga: ```python llm = ChatOpenAI( @@ -213,7 +528,7 @@ llm = ChatOpenAI( llm_with_tools = llm.bind_tools(tools) ``` -Siin kutsume `bind_tools` meie `tools` massiiviga, mistõttu LLM `llm_with_tools` teab nüüd sellest tööriistast. +Siin kutsume `bind_tools` koos `tools` massiiviga ja seeläbi on LLM `llm_with_tools` nüüd selle tööriista tundmisega. Selle uue LLM-i kasutamiseks saame kirjutada järgmise koodi: @@ -227,7 +542,7 @@ if(res.tool_calls): print("CONTENT: ",res.content) ``` -Nüüd, kui kutsume `invoke` sellel uuel LLM-il, millel on tööriistad, võib omadus `tool_calls` olla täidetud. Kui see on nii, siis tuvastatud tööriistadel on omadused `name` ja `args`, mis määravad, millist tööriista tuleks kutsuda ja milliste argumentidega. Täielik kood näeb välja selline: +Kui nüüd käivitame `invoke` sellel uuel tööriistadega llm-il, on ehk omadus `tool_calls` täidetud. Kui jah, siis iga tuvastatud tööriistal on `name` ja `args` omadused, mis määravad, millist tööriista kutsuda ja mis argumentidega. Kogu kood näeb välja nii: ```python from langchain_core.messages import HumanMessage, SystemMessage @@ -238,7 +553,7 @@ from typing_extensions import Annotated, TypedDict class add(TypedDict): """Add two integers.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # Anotatsioonidel peab olema tüüp ning need võivad valikuliselt sisaldada vaikimisi väärtust ja kirjeldust (selles järjekorras). a: Annotated[int, ..., "First integer"] b: Annotated[int, ..., "Second integer"] @@ -265,28 +580,27 @@ if(res.tool_calls): print("CONTENT: ",res.content) ``` -Selle koodi käivitamisel näete väljundit, mis on sarnane: +Kui jooksutad seda koodi, peaksid nägema väljundit, mis sarnaneb: ```text TOOL CALL: 15 CONTENT: ``` -See väljund tähendab, et LLM analüüsis päringut "Mis on 3 + 12" kui tähendust, et tuleks kutsuda tööriist `add`, ja ta teadis seda tänu selle nimele, kirjeldusele ja liikmeväljade kirjeldustele. Et vastus on 15, tuleneb meie koodist, mis kasutab sõnastikku `functions`, et seda kutsuda: +AI uuris küsimust "Mis on 3 + 12" ja tuvastas selle kui töö `add` jaoks. Nagu osav raamatukoguhoidja teab, millist viidet küsida vastavalt küsimuse tüübile, tegi ta otsuse tööriista nime, kirjelduse ja välja spetsifikatsioonide põhjal. Tulemus 15 tuli meie `functions` sõnastiku tööriista täitmisest: ```python print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"])) ``` -### Huvitavam tööriist, mis kutsub veebirakenduse API-d - -Tööriist, mis liidab kaks arvu, on huvitav, kuna see illustreerib, kuidas tööriistade kutsumine toimib, kuid tavaliselt teevad tööriistad midagi huvitavamat, näiteks kutsuvad veebirakenduse API-d. Teeme seda järgmise koodiga: +### Huvitavam tööriist, mis kutsub veebipõhist API-d üles +Numbrite lisamine demonstreerib kontseptsiooni, kuid päris tööriistad teostavad tavaliselt keerulisemaid toiminguid, näiteks veebirakenduste API-de kutsumist. Laiendame oma näidet nii, et tehisintellekt otsiks internetist sisu – sarnaselt sellele, kuidas telegraafipostitajad kunagi ühendasid kaugeid kohti: ```python class joke(TypedDict): """Tell a joke.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # Märgenditel peab olema tüüp ning need võivad vabatahtlikult sisaldada vaikeväärtust ja kirjeldust (selles järjekorras). category: Annotated[str, ..., "The joke category"] def get_joke(category: str) -> str: @@ -302,17 +616,43 @@ functions = { query = "Tell me a joke about animals" -# the rest of the code is the same +# ülejäänud kood on sama ``` -Nüüd, kui käivitate selle koodi, saate vastuse, mis ütleb midagi sellist: +Nüüd, kui selle koodi käivitate, saate vastuse, mis ütleb midagi sellist: ```text TOOL CALL: Chuck Norris once rode a nine foot grizzly bear through an automatic car wash, instead of taking a shower. CONTENT: ``` -Siin on kogu kood: +```mermaid +flowchart TD + A[Kasutaja päring: "Räägi mulle loomade kohta nali"] --> B[LangChain analüüs] + B --> C{Tööriist saadaval?} + C -->|Jah| D[Vali nali tööriist] + C -->|Ei| E[Genereeri otsene vastus] + + D --> F[Parameetrite eraldamine] + F --> G[Kutsu nali(category="animals")] + G --> H[API päring chucknorris.io-le] + H --> I[Tagasta nali sisu] + I --> J[Kuva kasutajale] + + E --> K[Tehisintellekti genereeritud vastus] + K --> J + + subgraph "Tööriista definitsiooni kiht" + L[TypedDict skeem] + M[Funktsiooni teostus] + N[Parameetri valideerimine] + end + + D --> L + F --> N + G --> M +``` +Siin on kood tervikuna: ```python from langchain_openai import ChatOpenAI @@ -323,14 +663,14 @@ from typing_extensions import Annotated, TypedDict class add(TypedDict): """Add two integers.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # Märgenditel peab olema tüüp ja need võivad valikuliselt sisaldada vaikimisi väärtust ja kirjeldust (järjekorras). a: Annotated[int, ..., "First integer"] b: Annotated[int, ..., "Second integer"] class joke(TypedDict): """Tell a joke.""" - # Annotations must have the type and can optionally include a default value and description (in that order). + # Märgenditel peab olema tüüp ja need võivad valikuliselt sisaldada vaikimisi väärtust ja kirjeldust (järjekorras). category: Annotated[str, ..., "The joke category"] tools = [add, joke] @@ -359,30 +699,448 @@ query = "Tell me a joke about animals" res = llm_with_tools.invoke(query) if(res.tool_calls): for tool in res.tool_calls: - # print("TOOL CALL: ", tool) + # print("TÖÖRIISTA KUTSE: ", tool) print("TOOL CALL: ", functions[tool["name"]](../../../10-ai-framework-project/**tool["args"])) print("CONTENT: ",res.content) ``` -## Embedding +## Embeddingud ja dokumentide töötlemine + +Embeddingud on üks elegantsemaid lahendusi moodsas tehisintellektis. Kujutage ette, et suudaksite võtta mis tahes teksti ja muuta selle numbrilisteks koordinaatideks, mis hõlmavad selle tähendust. Just seda embeddingud teevad – nad teisendavad teksti punktideks mitmemõõtmelises ruumis, kus sarnased mõisted koonduvad kokku. See on nagu ideede koordinaatsüsteem, mis meenutab Mendeleevi viisigi perioodiliselt tabelit aatomiliste omaduste järgi organiseerida. + +### Embeddingute loomine ja kasutamine + +```python +from langchain_openai import OpenAIEmbeddings +from langchain_community.vectorstores import FAISS +from langchain_community.document_loaders import TextLoader +from langchain.text_splitter import CharacterTextSplitter + +# Algatage manused +embeddings = OpenAIEmbeddings( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="text-embedding-3-small" +) + +# Laadige ja jagage dokumendid +loader = TextLoader("documentation.txt") +documents = loader.load() + +text_splitter = CharacterTextSplitter(chunk_size=1000, chunk_overlap=0) +texts = text_splitter.split_documents(documents) + +# Looge vektoripood +vectorstore = FAISS.from_documents(texts, embeddings) + +# Tehke sarnasuse otsing +query = "How do I handle user authentication?" +similar_docs = vectorstore.similarity_search(query, k=3) + +for doc in similar_docs: + print(f"Relevant content: {doc.page_content[:200]}...") +``` + +### Erinevate vormingute dokumentide laadijad -Sisu vektoriseerimine, võrdlemine kosinuse sarnasuse kaudu +```python +from langchain_community.document_loaders import ( + PyPDFLoader, + CSVLoader, + JSONLoader, + WebBaseLoader +) + +# Laadi erinevaid dokumenditüüpe +pdf_loader = PyPDFLoader("manual.pdf") +csv_loader = CSVLoader("data.csv") +json_loader = JSONLoader("config.json") +web_loader = WebBaseLoader("https://example.com/docs") + +# Töötle kõiki dokumente +all_documents = [] +for loader in [pdf_loader, csv_loader, json_loader, web_loader]: + docs = loader.load() + all_documents.extend(docs) +``` + +**Mida embeddingutega teha saab:** +- **Loo** otsing, mis tõeliselt mõistab sinu mõtet, mitte ainult märksõnade sobitust +- **Loo** tehisintellekt, mis suudab vastata küsimustele sinu dokumentide kohta +- **Tee** soovitussüsteeme, mis pakuvad tõeliselt asjakohast sisu +- **Korralda** ja kategooriseeri oma sisu automaatselt + +```mermaid +flowchart LR + A[Dokumendid] --> B[Teksti Lõhkuja] + B --> C[Sisendite Loomine] + C --> D[Vektori Pood] + + E[Kasutaja Päring] --> F[Päringu Sisend] + F --> G[Sarnasuse Otsing] + G --> D + D --> H[Asjakohased Dokumendid] + H --> I[AI Vastus] + + subgraph "Vektori Ruumi" + J[Dokument A: [0.1, 0.8, 0.3...]] + K[Dokument B: [0.2, 0.7, 0.4...]] + L[Päring: [0.15, 0.75, 0.35...]] + end + + C --> J + C --> K + F --> L + G --> J + G --> K +``` +## Täieliku tehisintellekti rakenduse ehitamine + +Nüüd integreerime kõik, mida õppisid, laiahaardeliseks rakenduseks – kodeerimisabimeheks, mis suudab vastata küsimustele, kasutada tööriistu ja hoida vestlusmälu. Nii nagu trükipress ühendas olemasolevad tehnoloogiad (liigutatav trükk, tind, paber ja surve) millegi muutvaks, ühendame meie AI komponendid millegi praktiliseks ja kasulikuks. + +### Täieliku rakenduse näide -https://python.langchain.com/docs/how_to/embed_text/ +```python +from langchain_openai import ChatOpenAI, OpenAIEmbeddings +from langchain_core.prompts import ChatPromptTemplate +from langchain_core.messages import HumanMessage, SystemMessage, AIMessage +from langchain_community.vectorstores import FAISS +from typing_extensions import Annotated, TypedDict +import os +import requests + +class CodingAssistant: + def __init__(self): + self.llm = ChatOpenAI( + api_key=os.environ["GITHUB_TOKEN"], + base_url="https://models.github.ai/inference", + model="openai/gpt-4o-mini" + ) + + self.conversation_history = [ + SystemMessage(content="""You are an expert coding assistant. + Help users learn programming concepts, debug code, and write better software. + Use tools when needed and maintain a helpful, encouraging tone.""") + ] + + # Määra tööriistad + self.setup_tools() + + def setup_tools(self): + class web_search(TypedDict): + """Search for programming documentation or examples.""" + query: Annotated[str, "Search query for programming help"] + + class code_formatter(TypedDict): + """Format and validate code snippets.""" + code: Annotated[str, "Code to format"] + language: Annotated[str, "Programming language"] + + self.tools = [web_search, code_formatter] + self.llm_with_tools = self.llm.bind_tools(self.tools) + + def chat(self, user_input: str): + # Lisa kasutaja sõnum vestlusse + self.conversation_history.append(HumanMessage(content=user_input)) + + # Saa tehisintellekti vastus + response = self.llm_with_tools.invoke(self.conversation_history) + + # Töötle tööriista kutsed, kui neid on + if response.tool_calls: + for tool_call in response.tool_calls: + tool_result = self.execute_tool(tool_call) + print(f"🔧 Tool used: {tool_call['name']}") + print(f"📊 Result: {tool_result}") + + # Lisa tehisintellekti vastus vestlusse + self.conversation_history.append(response) + + return response.content + + def execute_tool(self, tool_call): + tool_name = tool_call['name'] + args = tool_call['args'] + + if tool_name == 'web_search': + return f"Found documentation for: {args['query']}" + elif tool_name == 'code_formatter': + return f"Formatted {args['language']} code: {args['code'][:50]}..." + + return "Tool execution completed" + +# Kasutusnäide +assistant = CodingAssistant() + +print("🤖 Coding Assistant Ready! Type 'quit' to exit.\n") + +while True: + user_input = input("You: ") + if user_input.lower() == 'quit': + break + + response = assistant.chat(user_input) + print(f"🤖 Assistant: {response}\n") +``` + +**Rakenduse arhitektuur:** + +```mermaid +graph TD + A[Kasutaja Sisend] --> B[Kodeerimisabi] + B --> C[Vestluse Mälu] + B --> D[Tööriista Tuvastamine] + B --> E[LLM Töötlemine] + + D --> F[Veebipõhine Otsingu Tööriist] + D --> G[Koodi Vormindaja Tööriist] + + E --> H[Vastuse Generatsioon] + F --> H + G --> H + + H --> I[Kasutajaliides] + H --> C +``` +**Põhifunktsioonid, mida oleme ellu viinud:** +- **Mäletab** kogu sinu vestlust konteksti järjepidevuse tagamiseks +- **Teostab toiminguid** tööriistade kutsumise kaudu, mitte ainult vestlust +- **Järgib** prognoositavaid suhtlusmustreid +- **Haldab** vigade käsitlemist ja keerukaid töövooge automaatselt -### dokumendi laadijad +### 🎯 Pedagoogiline kontroll: tootmistaseme tehisintellekti arhitektuur -pdf ja csv +**Arhitektuuri mõistmine**: Sa oled loonud täieliku AI rakenduse, mis ühendab vestluse halduse, tööriistade kutsumise ja struktureeritud töövood. See esindab tootmistaseme AI rakenduste loomist. -## Rakenduse loomine +**Olulised omandatud kontseptsioonid**: +- **Klassipõhine arhitektuur**: organiseeritud, hooldatav AI rakenduse struktuur +- **Tööriistade integreerimine**: kohandatud funktsionaalsus lisaks vestlusele +- **Mälu haldus**: püsiv vestluse kontekst +- **Vigade käitlemine**: robustne rakenduse käitumine -TODO +**Tööstuse seos**: Sinu kasutatud arhitektuuri mustrid (vestluse klassid, tööriistade süsteemid, mälu haldus) on samad, mida kasutatakse ettevõtte tasemel AI-rakendustes nagu Slacki ai-abiline, GitHub Copilot ja Microsoft Copilot. Sa ehitad professionaalse taseme arhitektuurilise mõtlemisega. -## Ülesanne +**Mõtisklusküsimus**: Kuidas laiendaksid seda rakendust mitme kasutaja, püsiva andmesalvestuse või väliste andmebaaside integratsiooniga? Mõtle skaleerimisele ja olekuhalduse väljakutsetele. + +## Kodutöö: Ehita oma AI-põhine õpiabiline + +**Eesmärk**: Loo tehisintellekti rakendus, mis aitab õpilastel programmeerimisalaseid mõisteid õppida, pakkudes selgitusi, koodinäiteid ja interaktiivseid teste. + +### Nõuded + +**Põhifunktsioonid (kohustuslikud):** +1. **Vestlusliides**: rakenda vestlussüsteem, mis säilitab konteksti mitmete küsimuste vahel +2. **Hariduslikud tööriistad**: loo vähemalt kaks tööriista, mis aitavad õppimisel: + - koodi seletamise tööriist + - mõistepõhine testide generaator +3. **Isikupärastatud õppimine**: kasuta süsteemiteateid, et kohandada vastuseid erinevatele oskustasemetele +4. **Vastuse vormindus**: rakenda struktureeritud väljund testiküsimuste jaoks + +### Rakendusetapid + +**Samm 1: Seadista oma keskkond** +```bash +pip install langchain langchain-openai +``` + +**Samm 2: Põhivestluse funktsionaalsus** +- Loo klass `StudyAssistant` +- Rakenda vestlusmälu +- Lisa isiksuse konfiguratsioon haridusliku toe jaoks + +**Samm 3: Lisa hariduslikud tööriistad** +- **Koodi seletaja**: jaotab koodi arusaadavateks osadeks +- **Testide generaator**: loob küsimusi programmeerimiskontseptsioonide kohta +- **Edenemise jälgija**: hoiab silma peal käsitletud teemadel + +**Samm 4: Täiendavad funktsioonid (valikuline)** +- Rakenda voogedastuslikke vastuseid paremaks kasutajakogemuseks +- Lisa dokumentide laadimine kursuse materjalide kaasamiseks +- Loo embeddingud sisuga sarnaste dokumentide otsimiseks + +### Hindamiskriteeriumid + +| Funktsioon | Suurepärane (4) | Hea (3) | Rahuldav (2) | Vajab parandust (1) | +|------------|-----------------|---------|--------------|---------------------| +| **Vestluse voog** | Loomulik, kontekstitundlikud vastused | Hea konteksti säilitamine | Põhiline vestlus | Mälu puudumine vestluse vahel | +| **Tööriistade integratsioon** | Mitmed kasulikud tööriistad töötavad sujuvalt | 2+ tööriista korrektselt | 1-2 põhifunktsiooni | Tööriistad ei tööta | +| **Koodi kvaliteet** | Puhas, hästi dokumenteeritud, vigade käitlemine | Hea struktuur, natuke dokumentatsiooni | Põhiline funktsionaalsus | Kehv struktuur, puudub vigade haldus | +| **Hariduslik väärtus** | Tõeliselt abistav õppimiseks, kohanduv | Hea õppimise tugi | Põhilised seletused | Piiratud hariduslik kasu | + +### Näidiskoodi struktuur + +```python +class StudyAssistant: + def __init__(self, skill_level="beginner"): + # Initsialiseeri LLM, tööriistad ja vestluse mälu + pass + + def explain_code(self, code, language): + # Tööriist: Selgita, kuidas kood töötab + pass + + def generate_quiz(self, topic, difficulty): + # Tööriist: Loo harjutusküsimused + pass + + def chat(self, user_input): + # Põhivestluse liides + pass + +# Näidiskasutus +assistant = StudyAssistant(skill_level="intermediate") +response = assistant.chat("Explain how Python functions work") +``` + +**Boonusväljakutsed:** +- Lisa hääl-sisendi / väljundi võimekus +- Loo veebiliides Streamliti või Flaski abil +- Loo teadmiste baas kursuse materjalidest embeddingute abil +- Lisa edenemise jälgimine ja isikupärastatud õpiteed + +## 📈 Su AI raamistu arendamise meistriklassi ajajoon + +```mermaid +timeline + title Tootmistehisintellekti raamistiku arendusreis + + section Raamistiku alused + Abstraktsioonide mõistmine + : Meistriraamistik vs API otsused + : Õpi LangChain'i põhikontseptsioonid + : Rakenda sõnumitüüpide süsteemid + + Põhisintegratsioon + : Ühenda AI pakkujatega + : Töötle autentimist + : Halda konfiguratsiooni + + section Vestlussüsteemid + Mälu haldamine + : Loo vestluste ajalugu + : Rakenda konteksti jälgimist + : Töötle sessiooni püsimist + + Täiustatud suhtlus + : Meistri voogedastuse vastused + : Loo vihjekäsud + : Rakenda struktureeritud väljundit + + section Tööriistade integratsioon + Kohandatud tööriista arendus + : Kujunda tööriistade skeemid + : Rakenda funktsioonikõnet + : Töötle väliseid API-sid + + Töövoo automatiseerimine + : Keti mitut tööriista + : Loo otsustuspuud + : Loo agendi käitumised + + section Tootmisrakendused + Täielik süsteemi arhitektuur + : Ühenda kõik raamistiku funktsioonid + : Rakenda veapiirid + : Loo hooldatav kood + + Ettevõtte valmisolek + : Töötle mastaapsuse küsimusi + : Rakenda jälgimist + : Loo juurutusstrateegiad +``` +**🎓 Lõputunnistus**: Oled edukalt valdanud AI raamistu arendamist, kasutades samu tööriistu ja mustreid, mis toidavad kaasaegseid AI rakendusi. Need oskused esindavad AI rakenduste arendamise tippsaavutust ja valmistavad sind ette ettevõtte taseme intelligentsete süsteemide loomiseks. + +**🔄 Järgmise taseme võimed**: +- Valmis uurima keerukamaid AI arhitektuure (agentid, mitmeagendilised süsteemid) +- Võimeline ehitama RAG-süsteeme vektorandmebaasidega +- Võimeline looma mitme režiimiga AI rakendusi +- Vundament AI rakenduste skaleerimiseks ja optimeerimiseks ## Kokkuvõte +🎉 Oled nüüd valdanud AI raamistu arendamise põhialuseid ja õppinud, kuidas luua keerukaid AI rakendusi, kasutades LangChainit. Just nagu põhjaliku õpipoisiameti lõpetamine, oled omandanud ulatusliku oskustekogu. Vaatame, mida oled saavutanud. + +### Mida oled õppinud + +**Põhiramistu kontseptsioonid:** +- **Raamistute eelised**: mõistmine, millal valida raamistikud otseteede asemel +- **LangChain põhialused**: AI mudelite ühenduste seadistamine ja konfiguratsioon +- **Sõnumitüübid**: `SystemMessage`, `HumanMessage` ja `AIMessage` kasutamine struktureeritud vestluseks + +**Täpsemad funktsioonid:** +- **Tööriistade kutsumine**: kohandatud tööriistade loomine AI võimete laiendamiseks +- **Vestlusmälu**: konteksti säilitamine mitmete vestlussammaste vältel +- **Voogedastuse vastused**: reaalajas vastuste kohaletoimetamine +- **Promptide mallid**: korduvkasutatavad dünaamilised päringud +- **Struktureeritud väljund**: järjepidev ja parsitav AI vastuste formaadis kohaletoimetamine +- **Embeddingud**: semantiline otsing ja dokumentide töötlemine + +**Praktilised rakendused:** +- **Täielike rakenduste ehitamine**: mitme funktsiooni kombineerimine tootmiseks valmis lahendusteks +- **Vigade haldus**: usaldusväärne vigade käsitlemine ja valideerimine +- **Tööriistade integreerimine**: kohandatud tööriistade loomine AI võimete laiendamiseks + +### Peamised õppetunnid + +> 🎯 **Meelespea**: AI raamistikud nagu LangChain on sinu keerukust varjavad ja funktsiooniderohked parimad sõbrad. Need sobivad suurepäraselt, kui vajad vestlusmälu, tööriistade kutsumist või tahad töötada paljude AI mudelitega, ilma meelt kaotamata. + +**AI integratsiooni otsustusraamistik:** + +```mermaid +flowchart TD + A[Tehisintellekti integreerimise vajadus] --> B{Lihtne üksikpäring?} + B -->|Jah| C[Otsepöördumised API-le] + B -->|Ei| D{Vajalik vestluse mälu?} + D -->|Ei| E[SDK integratsioon] + D -->|Jah| F{Vajalikud tööriistad või keerukad funktsioonid?} + F -->|Ei| G[Raamistik põhiseadistusega] + F -->|Jah| H[Täielik raamistik rakendus] + + C --> I[HTTP päringud, minimaalsed sõltuvused] + E --> J[Teenusepakkuja SDK, mudelispetsiifiline] + G --> K[LangChain põhiline vestlus] + H --> L[LangChain tööriistade, mäluga, agentidega] +``` +### Kuhu edasi minna? + +**Alusta kohe ehitamist:** +- Võta need kontseptsioonid ja loo midagi, mis SIND erutab! +- Katseta erinevaid AI mudeleid läbi LangChaini – see on nagu AI mudelite mänguväli +- Loo tööriistu, mis lahendavad päriselt sinu töö või projektide probleeme + +**Valmis järgmisele tasemele?** +- **AI agendid**: loo AI süsteeme, mis suudavad ise keerukaid ülesandeid planeerida ja täita +- **RAG (Retrieval-Augmented Generation)**: ühenda AI oma teadmistebaasidega ülivõimsate rakenduste jaoks +- **Mitme režiimiga AI**: tööta koos tekstide, piltide ja heliga – võimalused on lõputud! +- **Tootmiskeskkonna juurutus**: õpi, kuidas skaleerida oma AI rakendusi ja neid pärismaailmas jälgida + +**Liitu kogukonnaga:** +- LangChaini kogukond on suurepärane koht, et olla kursis viimaste uudistega ja õppida parimaid praktikaid +- GitHub Models annab ligipääsu tipptasemel AI võimekustele – ideaalne katsetamiseks +- Harjuta erinevate kasutusjuhtudega – iga projekt õpetab midagi uut + +Sul on nüüd teadmised luua intelligentseid, vestluspõhiseid rakendusi, mis aitavad inimestel reaalseid probleeme lahendada. Nagu renessansiaja meistrid, kes ühendasid kunstilise nägemuse tehnilise oskusega, suudad sina nüüd ühendada AI võimekuse praktilise rakendusega. Küsimus on: mida sina lood? 🚀 + +## GitHub Copilot Agent väljakutse 🚀 + +Kasuta agentrežiimi, et täita järgmine väljakutse: + +**Kirjeldus:** Loo arenenud AI-põhine koodikontrolli assistent, mis ühendab mitmeid LangChaini funktsioone, sh tööriistade kutsumine, struktureeritud väljund ning vestlusmälu, et pakkuda põhjalikku tagasisidet koodiesitustele. + +**Üleskutse:** Loo klass CodeReviewAssistant, mis rakendab: +1. Tööriista koodi keerukuse analüüsimiseks ja parendusettepanekute tegemiseks +2. Tööriista, mis kontrollib koodi parimate tavade nõuete vastu +3. Struktureeritud väljundit Pydantic mudelite abil ühtse ülevaate vormistamiseks +4. Vestlusmälu ülevaatussessioonide jälgimiseks +5. Peamist vestlusliidest, mis suudab hallata koodiesitusi ja pakkuda detailset, teostatavat tagasisidet + +Assistent peaks suutma üle vaadata koodi mitmes programmeerimiskeeles, säilitama konteksti mitme koodiesituse vältel sessiooni ajal ning pakkuma nii kokkuvõtlikke hindepunkte kui üksikasjalikke täiustuste soovitusi. + +Lisateave [agentrežiimi](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kohta. + --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame täpsust, palun pidage meeles, et automatiseeritud tõlgetes võib esineda vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks lugeda autoriteetse allikana. Tähtsa teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta käesoleva tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/2-js-basics/1-data-types/README.md b/translations/et/2-js-basics/1-data-types/README.md index 4adc6da5f..441816571 100644 --- a/translations/et/2-js-basics/1-data-types/README.md +++ b/translations/et/2-js-basics/1-data-types/README.md @@ -1,215 +1,618 @@ -# JavaScript'i põhialused: Andmetüübid +# JavaScripti põhialused: andmetüübid + +![JavaScripti põhialused - Andmetüübid](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.et.png) +> Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Teie JavaScripti andmetüüpide seiklus + section Alus + Muutujad & Konstandid: 5: You + Deklaratsiooni süntaks: 4: You + Omistamise kontseptsioonid: 5: You + section Põhitüübid + Numbrid & Matemaatika: 4: You + Stringid & Tekst: 5: You + Boole’id & Loogika: 4: You + section Rakenda teadmisi + Tüübi teisendus: 4: You + Tõelised näited: 5: You + Parimad tavad: 5: You +``` +Andmetüübid on üks JavaScripti põhikontseptsioone, millega kohtud igas programmis, mida kirjutad. Mõtle andmetüüpidele nagu Alexandria iidsete raamatukoguhoidjate kasutatud arhiveerimissüsteemile – nad omasid kindlaid kohti rullraamatutele, mis sisaldasid luulet, matemaatikat ja ajaloolisi andmeid. JavaScript korraldab teavet sarnaselt, erinevate kategooriate kaupa erinevate andmetüüpide jaoks. + +Selles tunnis uurime JavaScripti tööd võimaldavaid põhianumitreid. Õpid, kuidas käsitleda numbreid, teksti, tõeväärtusi ning mõistad, miks õige tüübi valimine on sinu programmide jaoks oluline. Need mõisted võivad alguses tunduda abstraktsed, kuid praktiseerides saavad neist sinu teine loomus. -![JavaScript'i põhialused - Andmetüübid](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.et.png) -> Sketšimärkmed: [Tomomi Imura](https://twitter.com/girlie_mac) +Andmetüüpide mõistmine teeb kõike muud JavaScriptis märksa selgemaks. Nii nagu arhitektid peavad enne katedraali ehitamist tundma erinevaid ehitusmaterjale, toetavad need alused kõike, mida edaspidi ehitad. -## Eelloengu viktoriin -[Eelloengu viktoriin](https://ff-quizzes.netlify.app/web/) +## Loengu-eelne viktoriin +[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/) -See õppetund käsitleb JavaScript'i põhialuseid, keelt, mis lisab veebile interaktiivsust. +See tund katab JavaScripti aluseid, mis on veebis interaktiivsuse võimaldamise keel. -> Selle õppetunni leiad [Microsoft Learnist](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)! +> Saad selle tunni läbida ka [Microsoft Learn’is](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)! -[![Muutujad](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Muutujad JavaScript'is") +[![Muutujad](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Muutujad JavaScriptis") -[![Andmetüübid JavaScript'is](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Andmetüübid JavaScript'is") +[![Andmetüübid JavaScriptis](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Andmetüübid JavaScriptis") -> 🎥 Klõpsa ülalolevatel piltidel, et vaadata videoid muutujate ja andmetüüpide kohta. +> 🎥 Klõpsa ülalolevatel piltidel, et vaadata muutujaid ja andmetüüpe käsitlevaid videoid Alustame muutujatest ja andmetüüpidest, mis neid täidavad! +```mermaid +mindmap + root((JavaScript andmed)) + Variables + let myVar + const PI = 3.14 + var oldStyle + Primitive Types + number + 42 + 3.14 + -5 + string + "Tere" + 'Maailm' + `Mall` + boolean + true + false + undefined + null + Operations + Arithmetic + + - * / % + String Methods + ühendamine + mallilitrid + Type Conversion + kaudne + otsene +``` ## Muutujad -Muutujad salvestavad väärtusi, mida saab koodis kasutada ja muuta. +Muutujad on programmeerimise põhielemendid. Nagu märgistatud purgid, mida keskaegsed alkeemikud kasutasid erinevate ainete talletamiseks, võimaldavad muutujad sul hoida teavet ja anda sellele kirjeldav nimi, et saaksid sellele hiljem viidata. Pead kellegi vanust meeles pidama? Säilita see muutujas nimega `age`. Tahad kasutaja nime jälgida? Hoia seda muutujas nimega `userName`. -Muutuja **loomine** ja **deklareerimine** toimub järgmise süntaksiga **[märksõna] [nimi]**. See koosneb kahest osast: +Keskendume JavaScriptis muutujate loomise kaasaegsele lähenemisele. Siin õpitavad tehnikad põhinevad aastaid kestnud keele arengul ja programmeerimiskogukonnas välja kujunenud parimatel tavadel. -- **Märksõna**. Märksõnadeks võivad olla `let` või `var`. +Muuttuja loomisel ja **deklareerimisel** on süntaks järgmine: **[võti] [nimi]**. See koosneb kahest osast: -✅ Märksõna `let` tutvustati ES6-s ja see annab muutujale nn _bloki ulatuse_. Soovitatav on kasutada `let` märksõna `var` asemel. Bloki ulatust käsitleme põhjalikumalt tulevastes osades. -- **Muutuja nimi**, mille valid ise. +- **Võti**. Kasuta `let` muutujate jaoks, mis võivad muutuda, või `const` väärtuste jaoks, mis püsivad samadena. +- **Muuttuja nimi**, see on kirjeldav nimi, mille valid ise. -### Ülesanne - töötamine muutujatega +✅ Võti `let` toodi sisse ES6-s ja annab muutujale nn _plokiruumi ulatuse_. Soovitatav on kasutada `let` või `const` vanema `var` asemel. Plokiruume käsitleme tulevastes osades põhjalikumalt. -1. **Deklareeri muutuja**. Deklareerime muutuja, kasutades märksõna `let`: +### Ülesanne – muutujatega töötamine + +1. **Dekleeri muutuja**. Alustame esimese muutuja loomisega: ```javascript let myVariable; ``` - `myVariable` on nüüd deklareeritud, kasutades märksõna `let`. Sellel pole hetkel väärtust. + **Mida see teeb:** + - See ütleb JavaScriptile, et luua muutujale nimetusega `myVariable` salvestuskoht + - JavaScript reserveerib muutujale ruumi mälus + - Muutujal pole praegu väärtust (undefined) -1. **Omista väärtus**. Salvestame väärtuse muutujasse, kasutades `=` operaatorit, millele järgneb oodatav väärtus. +2. **Anna väärtus**. Paneme nüüd muutujasse midagi: ```javascript myVariable = 123; ``` - > Märkus: `=` kasutamine selles õppetunnis tähendab, et kasutame "omistamisoperaatorit", mida kasutatakse väärtuse määramiseks muutujale. See ei tähenda võrdsust. + **Kuidas väärtuse määramine töötab:** + - Operaator `=` määrab muutujale väärtuseks 123 + - Muutuja sisaldab nüüd seda väärtust, mitte enam undefined + - Saad kogu koodis sellele väärtusele viidata nimega `myVariable` - `myVariable` on nüüd *initsialiseeritud* väärtusega 123. + > Märkus: tšunksis `=` tähendab, et kasutame "määramisoperaatorit", mis määrab muutujale väärtuse. See ei tähista võrdust. -1. **Refaktoreeri**. Asenda oma kood järgmise lausega. +3. **Tee seda targalt**. Kombineerime need kaks sammu: ```javascript let myVariable = 123; ``` - Ülaltoodut nimetatakse _selgesõnaliseks initsialiseerimiseks_, kui muutuja deklareeritakse ja sellele määratakse väärtus samal ajal. + **See lähenemine on tõhusam:** + - Deklareerid muutujad ja määrad väärtuse ühes lauses + - See on tavapraktika arendajate seas + - Vähendab koodi pikkust ja säilitab selguse -1. **Muuda muutuja väärtust**. Muuda muutuja väärtust järgmiselt: +4. **Muuda meelt**. Mis siis, kui tahame talletada teise numbri? ```javascript myVariable = 321; ``` - Kui muutuja on deklareeritud, saab selle väärtust igal ajal koodis muuta, kasutades `=` operaatorit ja uut väärtust. + **Taasesituse mõistmine:** + - Muutuja hoiab nüüd väärtust 321, varasema 123 asemel + - Varasem väärtus asendatakse – muutujad hoiavad korraga ainult ühte väärtust + - See muutuvus on `let`-ga deklareeritud muutujate võtmetunnus + + ✅ Proovi! Saad kirjutada JavaScripti otse oma brauseris. Ava arendaja tööriistad ja mine konsooli. Kirjuta `let myVariable = 123`, vajuta Enter, siis kirjuta `myVariable`. Mis juhtub? Mõisted saavad sulle selgemaks järgnevate tundide jooksul. - ✅ Proovi ise! Sa saad kirjutada JavaScript'i otse oma brauseris. Ava brauseri aken ja navigeeri arendustööriistadesse. Konsoolis leiad käsuviiba; sisesta `let myVariable = 123`, vajuta Enter, seejärel sisesta `myVariable`. Mis juhtub? Märkus: õpid neid kontseptsioone rohkem järgnevates õppetundides. +### 🧠 **Muutujate valdamise kontroll: mugavuse saavutamine** + +**Vaatame, kuidas sul muutujatega läheb:** +- Kas oskad selgitada muutujate deklareerimise ja väärtuse määramise vahet? +- Mis juhtub, kui püüad kasutada muutujat enne selle deklareerimist? +- Millal valid muutuja jaoks `let` asemel `const`? + +```mermaid +stateDiagram-v2 + [*] --> Declared: lase muMuuttuja + Declared --> Assigned: muMuuttuja = 123 + Assigned --> Reassigned: muMuuttuja = 456 + Assigned --> [*]: Muutuja valmis! + Reassigned --> [*]: Värskendatud väärtus + + note right of Declared + Muutuja eksisteerib, kuid + puudub väärtus (defineerimata) + end note + + note right of Assigned + Muutuja sisaldab + väärtust 123 + end note +``` +> **Nipp**: Mõtle muutujatele kui märgistatud hoiukastidele. Sa lood kasti (`let`), paned sellesse midagi (`=`) ja vajadusel vahetad sisu hiljem! ## Konstandid -Konstandi deklareerimine ja initsialiseerimine järgib samu põhimõtteid nagu muutuja puhul, välja arvatud märksõna `const`. Konstandid deklareeritakse tavaliselt suurte tähtedega. +Mõnikord tuleb talletada teavet, mis programmi jooksutamise ajal ei tohiks muutuda. Mõtle konstandidele nagu matemaatilised printsiibid, mille Eukleides iidse Kreeka ajal kehtestas – kui need on tõestatud ja dokumenteeritud, püsivad need muutumatuna igaveseks. + +Konstandid töötavad sarnaselt muutujatega, kuid olulise piiranguga: kui väärtus on määratud, ei saa seda enam muuta. See muutumatuse omadus aitab vältida kriitiliste väärtuste tahtmatut muutmist programmis. + +Konstandi deklareerimine ja initsialiseerimine järgib samu põhimõtteid nagu muutujal, ainult et kasutatakse võtmesõna `const`. Konstande kirjutatakse tavaliselt suurte tähtedega. ```javascript const MY_VARIABLE = 123; ``` -Konstandid on sarnased muutujatega, kuid neil on kaks erandit: +**See kood teeb järgmist:** +- **Loomine** konstandile nimega `MY_VARIABLE` väärtusega 123 +- **Suurtähtede** kasutamine konstandi nimena +- **Keelamine** tulevastel väärtuse muutmistel + +Konstandidel on kaks peamist reeglit: -- **Peab olema väärtus**. Konstandid peavad olema initsialiseeritud, vastasel juhul tekib koodi käivitamisel viga. -- **Viidet ei saa muuta**. Konstandi viidet ei saa pärast initsialiseerimist muuta, vastasel juhul tekib koodi käivitamisel viga. Vaatame kahte näidet: - - **Lihtne väärtus**. Järgmine EI ole lubatud: +- **Nendele tuleb kohe anda väärtus** – tühjad konstandid pole lubatud! +- **Väärtust ei tohi kunagi muuta** – JavaScript viskab vea, kui proovid. Vaata, mida ma mõtlen: + + **Lihtne väärtus** - Alljärgnev EI OLE lubatud: ```javascript const PI = 3; - PI = 4; // not allowed + PI = 4; // ei ole lubatud ``` - - - **Objekti viide on kaitstud**. Järgmine EI ole lubatud. + + **Mida meeles pidada:** + - **Püüdlused** konstanti uuesti määrata põhjustavad vea + - **Kaitseb** olulisi väärtusi juhuslike muutuste eest + - **Tagab**, et väärtus on kogu programmi jooksul püsiv + + **Objekti viide on kaitstud** - Alljärgnev EI OLE lubatud: ```javascript const obj = { a: 3 }; - obj = { b: 5 } // not allowed + obj = { b: 5 } // ei ole lubatud ``` - - **Objekti väärtus ei ole kaitstud**. Järgmine ON lubatud: + **Neid mõisteid mõistes:** + - **Takistab** kogu objekti asendamist uuega + - **Kaitseb** algse objekti viidet + - **Säilitab** objekti identiteedi mälus + + **Objekti väärtus ei ole kaitstud** - Alljärgnev ON lubatud: ```javascript const obj = { a: 3 }; - obj.a = 5; // allowed + obj.a = 5; // lubatud ``` - Ülaltoodud näites muudad objekti väärtust, kuid mitte viidet ennast, mis teeb selle lubatuks. + **Mis siin juhtub:** + - **Muudab** objekti sees olevaid omaduse väärtusi + - **Hoiab** sama objekti viide + - **Näitab**, et objekti sisu võib muutuda, kuigi viide jääb samaks - > Märkus: `const` tähendab, et viide on kaitstud ümbermääramise eest. Väärtus ei ole siiski _muutumatu_ ja võib muutuda, eriti kui tegemist on keeruka konstruktsiooniga nagu objekt. + > Märkus: `const` tähendab, et viide on kaitstud uuesti määramise eest. Väärtus ei ole aga _muutumatu_ ja võib muutuda, eriti kui tegemist on keeruka konstruktsiooniga nagu objekt. ## Andmetüübid -Muutujad võivad salvestada mitmesuguseid väärtusi, nagu numbrid ja tekst. Need erinevad väärtuste tüübid on tuntud kui **andmetüübid**. Andmetüübid on tarkvaraarenduse oluline osa, kuna need aitavad arendajatel otsustada, kuidas koodi kirjutada ja kuidas tarkvara peaks töötama. Lisaks on mõnel andmetüübil unikaalsed omadused, mis aitavad väärtusest lisainfot tuletada või seda muuta. +JavaScript korraldab info erinevatesse kategooriatesse, mida nimetatakse andmetüüpideks. See mõiste peegeldab seda, kuidas iidsetel teadlastel oli teadmiste liigistamine – Aristoteles eristas erinevaid mõtlemise liike, teades, et loogilisi põhimõtteid ei saa ühtemoodi rakendada luulele, matemaatikale ja loodusteadustele. -✅ Andmetüüpe nimetatakse ka JavaScript'i andmeprimitiivideks, kuna need on keele poolt pakutavad madalaimad andmetüübid. Primitiiive on 7: string, number, bigint, boolean, undefined, null ja symbol. Võta hetk, et visualiseerida, mida igaüks neist primitiividest võiks esindada. Mis on `zebra`? Aga `0`? `true`? +Andmetüübid on olulised, sest erinevad operatsioonid töötavad eri tüüpi informatsiooniga. Nagu ei saa kellegi nime kallal aritmeetikat teha ega matemaatilist võrrandit tähestikulises järjekorras paigutada, nõuab JavaScript iga operatsiooni jaoks sobival andmetüübil põhinevat lähenemist. Selle mõistmine aitab vältida vigu ja muudab koodi usaldusväärsemaks. + +Muutujad võivad hoida erinevat tüüpi väärtusi nagu numbrid ja tekst. Neid erinevaid väärtuste tüüpe nimetatakse **andmetüüpideks**. Andmetüübid on tarkvaraarenduse oluline osa, kuna aitavad arendajatel otsuseid vastu võtta, kuidas koodi kirjutada ja kuidas tarkvara töö peab käituma. Lisaks on mõnel andmetüübil unikaalsed omadused, mis aitavad väärtuses teisendada või ekstraheerida täiendavat teavet. + +✅ Andmetüübid on tuntud ka kui JavaScripti andmeprimitiivid, kuna need on keele pakutavad madalaima taseme andmetüübid. On 7 primitiivset andmetüüpi: string, number, bigint, boolean, undefined, null ja symbol. Võta hetk ja kujutle, mida iga primitiiv võiks kujutada. Mis on `sebra`? Kuidas oleks `0`? `true`? ### Numbrid -Eelmises osas oli `myVariable` väärtus andmetüüp number. +Numbrid on JavaScriptis kõige lihtsam andmetüüp. Olgu tegemist täisarvudega nagu 42, komakohalistega nagu 3.14 või negatiivsete arvudega nagu -5, JavaScript käsitleb neid kõiki ühtsel viisil. + +Pea meeles meie varasemat muutujat? See 123, mille seal hoidsime, oli tegelikult numbri andmetüüp: -`let myVariable = 123;` +```javascript +let myVariable = 123; +``` -Muutujad võivad salvestada igasuguseid numbreid, sealhulgas kümnendmurde või negatiivseid numbreid. Numbrid võivad olla kasutusel ka aritmeetiliste operaatoritega, mida käsitletakse [järgmises osas](../../../../2-js-basics/1-data-types). +**Peamised omadused:** +- JavaScript tunneb numbrilise väärtuse automaatselt ära +- Nendega saad teha matemaatilisi tehteid +- Tüüpi ei ole vaja eksplicitseerida +Muutujad võivad hoida kõiki arvutüüpe, kaasa arvatud komad ja negatiivsed numbrid. Numbreid saab kasutada ka aritmeetiliste operaatoritega, mida käsitleme [järgmises jaos](../../../../2-js-basics/1-data-types). + +```mermaid +flowchart LR + A["🔢 Numbrid"] --> B["➕ Liitmine"] + A --> C["➖ Lahutamine"] + A --> D["✖️ Korrutamine"] + A --> E["➗ Jagamine"] + A --> F["📊 Jääk %"] + + B --> B1["1 + 2 = 3"] + C --> C1["5 - 3 = 2"] + D --> D1["4 * 3 = 12"] + E --> E1["10 / 2 = 5"] + F --> F1["7 % 3 = 1"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` ### Aritmeetilised operaatorid -Aritmeetiliste funktsioonide teostamiseks on mitut tüüpi operaatoreid, millest mõned on siin loetletud: +Aritmeetilised operaatorid võimaldavad teha matemaatilisi arvutusi JavaScriptis. Need operaatorid järgivad samu põhimõtteid, mida matemaatikud on sajandeid kasutanud – samu märke, mis esinesid teadlaste nagu Al-Hvārazmī kirjutistes, kes töötas välja algebra notatsiooni. -| Sümbol | Kirjeldus | Näide | -| ------ | ----------------------------------------------------------------------- | ------------------------------- | -| `+` | **Liitmine**: Arvutab kahe arvu summa | `1 + 2 //oodatav vastus on 3` | -| `-` | **Lahutamine**: Arvutab kahe arvu vahe | `1 - 2 //oodatav vastus on -1` | -| `*` | **Korrutamine**: Arvutab kahe arvu korrutise | `1 * 2 //oodatav vastus on 2` | -| `/` | **Jagamine**: Arvutab kahe arvu jagatise | `1 / 2 //oodatav vastus on 0.5` | -| `%` | **Jääk**: Arvutab kahe arvu jagamise jäägi | `1 % 2 //oodatav vastus on 1` | +Operaatorid toimivad nii, nagu traditsiooniline matemaatika eeldab: pluss liitmiseks, miinus lahutamiseks jne. -✅ Proovi ise! Katseta aritmeetilist operatsiooni oma brauseri konsoolis. Kas tulemused üllatavad sind? +Siin on mõned aritmeetilised operaatorid: + +| Sümbol | Kirjeldus | Näide | +| ------ | ---------------------------------------------------------------------- | ----------------------------------- | +| `+` | **Liitmine**: kahe numbri summa arvutamine | `1 + 2 //oodatud vastus on 3` | +| `-` | **Lahutamine**: kahe numbri vahe arvutamine | `1 - 2 //oodatud vastus on -1` | +| `*` | **Korrutamine**: kahe numbri korrutis | `1 * 2 //oodatud vastus on 2` | +| `/` | **Jagamine**: kahe numbri jagatis | `1 / 2 //oodatud vastus on 0.5` | +| `%` | **Jääk**: kahe numbri jagamisel jäägi väärtus | `1 % 2 //oodatud vastus on 1` | + +✅ Proovi! Tee aritmeetiline tehe oma brauseri konsoolis. Kas tulemused üllatavad? + +### 🧮 **Matemaatikatest: arvutamiskindlus** + +**Testi oma arvutusteadmisi:** +- Mis vahe on operaatoritel `/` (jagamine) ja `%` (jääk)? +- Kas suudad ennustada, mis on `10 % 3`? (Vihje: see ei ole 3.33...) +- Milleks võiks programmeerimises jääkoperattor kasulik olla? + +```mermaid +pie title "JavaScripti arvutuste kasutamine" + "Liitmine (+)" : 35 + "Lahutamine (-)" : 20 + "Korrutamine (*)" : 20 + "Jagamine (/)" : 15 + "Jääk (%)" : 10 +``` +> **Praktiline nipp**: jääkoperatorit (%) kasutatakse väga tihti paarisarvude ja paaritute kontrollimiseks, mustrite loomiseks või massiivide tsükliliseks läbimiseks! ### Stringid -Stringid on tähemärkide kogumid, mis asuvad ühekordsete või kahekordsete jutumärkide vahel. +JavaScriptis esitatakse tekstilist andmestikku stringidena. Mõiste "string" tuleb sellest, et tähemärke on järjestikku ritta pandud, nagu keskaegsete kloostrite kirjanikud ühendasid tähti sõnadeks ja lauseteks oma käsikirjades. + +Stringid on veebiarenduse aluseks. Kõik veebisaidil kuvatav tekst – kasutajanimed, nupusildid, veateated, sisu – käsitletakse stringandmetena. Stringide mõistmine on funktsionaalsete kasutajaliideste loomisel hädavajalik. + +Stringid on tähemärkide kogumid, mis on ümbritsetud ühekordsete või kahekordsete jutumärkidega. -- `'See on string'` -- `"See on samuti string"` -- `let myString = 'See on stringi väärtus, mis on salvestatud muutujasse';` +```javascript +'This is a string' +"This is also a string" +let myString = 'This is a string value stored in a variable'; +``` + +**Põhimõistete selgitus:** +- **Kasutab** kas ühekordseid `'` või kahekordseid `"` jutumärke stringide määramiseks +- **Säilitab** tekstilist andmestikku, mis võib sisaldada tähti, numbreid ja sümboleid +- **Määrab** muutujatele stringväärtusi edasiseks kasutamiseks +- **Nõuab** jutumärkide kasutamist, et tekst eristuks muutuja nimest -Pea meeles kasutada jutumärke stringi kirjutamisel, vastasel juhul eeldab JavaScript, et tegemist on muutuja nimega. +Mäleta jutumärke kasutada stringi kirjutamisel, vastasel juhul võtab JavaScript seda muutujanimena. +```mermaid +flowchart TD + A["📝 Stringid"] --> B["Üksikud jutumärgid"] + A --> C["Kahekordsed jutumärgid"] + A --> D["Mallimärgendid"] + + B --> B1["'Tere maailm'"] + C --> C1["\"Tere maailm\""] + D --> D1["`Tere \${name}`"] + + E["Stringi toimingud"] --> F["Konkatenatsioon"] + E --> G["Malli lisamine"] + E --> H["Pikkus ja meetodid"] + + F --> F1["'Tere' + ' ' + 'maailm'"] + G --> G1["`Tere \${firstName} \${lastName}`"] + H --> H1["myString.length"] + + style A fill:#e3f2fd + style E fill:#fff3e0 + style D fill:#e8f5e8 + style G fill:#e8f5e8 +``` ### Stringide vormindamine -Stringid on tekstilised ja vajavad aeg-ajalt vormindamist. +Stringide manipuleerimisega saad kombineerida tekstielemente, lisada muutujad ja luua dünaamilist sisu, mis reageerib programmi olekule. See võimaldab teksti programmeeritult koostada. -Stringide **ühendamiseks** või nende kokkuliitmiseks kasuta `+` operaatorit. +Tihti tuleb kokku liita mitu stringi – seda nimetatakse konkateneerimiseks. +Kahe või enama stringi **ühendamiseks** või kokku liitmiseks kasuta operaatorit `+`. ```javascript let myString1 = "Hello"; let myString2 = "World"; -myString1 + myString2 + "!"; //HelloWorld! -myString1 + " " + myString2 + "!"; //Hello World! -myString1 + ", " + myString2 + "!"; //Hello, World! - +myString1 + myString2 + "!"; //Tere, maailm! +myString1 + " " + myString2 + "!"; //Tere Maailm! +myString1 + ", " + myString2 + "!"; //Tere, Maailm! ``` -✅ Miks on `1 + 1 = 2` JavaScript'is, aga `'1' + '1' = 11?` Mõtle sellele. Aga `'1' + 1`? +**Samm-sammult, siin toimub:** +- **Ühendab** mitut stringi operaatoriga `+` +- **Liidab** stringid otse kokku ilma tühikuteta esimeses näites +- **Lisab** lugemise hõlbustamiseks stringide vahele tühikuid `" "` +- **Sisestab** kirjavahemärke nagu komad, et luua korrektne vormindus -**Malliliteralid** on teine viis stringide vormindamiseks, kus jutumärkide asemel kasutatakse tagurpidi jutumärke. Kõik, mis ei ole lihttekst, tuleb paigutada kohatäidete `${ }` sisse. See hõlmab ka stringideks muutuvaid muutujaid. +✅ Miks on JavaScriptis `1 + 1 = 2`, kuid `'1' + '1' = 11?` Mõtle sellele. Aga mis juhtub, kui `'1' + 1`? + +**Malliliteraalid** on teine viis stringide vormindamiseks, välja arvatud see, et jutumärkide asemel kasutatakse tagurpidi kriipse. Kõik, mis ei ole tava tekst, peab olema paigutatud kohatäitjate `${ }` sisse. See hõlmab ka kõiki muutujaid, mis võivad olla stringid. ```javascript let myString1 = "Hello"; let myString2 = "World"; -`${myString1} ${myString2}!` //Hello World! -`${myString1}, ${myString2}!` //Hello, World! +`${myString1} ${myString2}!` //Tere, maailm! +`${myString1}, ${myString2}!` //Tere, maailm! +``` + +**Mõistame iga osa:** +- **Kasutab** malliliteraalide loomiseks tavapäraste jutumärkide asemel tagurpidi kriipse `` ` `` +- **Sisestab** muutujaid otse kasutades kohatäitjat `${}` +- **Säilitab** tühikud ja vormingu täpselt nagu kirjutatud +- **Pakku** puhast viisi keerukate stringide loomisel koos muutujatega + +Sa võid saavutada oma vorminduse eesmärgid mõlemal meetodil, kuid malliliteraalid austavad kõiki tühikuid ja reavahetusi. + +✅ Millal kasutaksid malliliteraali ja millal tavalist stringi? + +### 🔤 **Stringi valdamise kontroll: Teksti manipuleerimise kindlus** + +**Hinda oma stringioskusi:** +- Kas oskad selgitada, miks `'1' + '1'` võrdub `'11'`, mitte `2`? +- Millist stringimeetodit pead lugemise hõlbustamiseks paremaks: järjestamine või malliliteraalid? +- Mis juhtub, kui unustad stringi ümber jutumärgid? + +```mermaid +stateDiagram-v2 + [*] --> PlainText: "Tere" + [*] --> Variable: nimi = "Alice" + PlainText --> Concatenated: + " " + nimi + Variable --> Concatenated + PlainText --> Template: `Tere ${nimi}` + Variable --> Template + Concatenated --> Result: "Tere Alice" + Template --> Result + + note right of Concatenated + Traditsiooniline meetod + Rohkem sõnakas + end note + + note right of Template + Moodne ES6 süntaks + Puhtam ja loetavam + end note ``` +> **Nõuandeid proffidelt**: Malliliteraalid on üldiselt eelistatumad keerukate stringide loomisel, sest need on loetavamad ja käsitlevad ilusti mitmerealisi stringe! + +### Boole’id -Sa võid saavutada oma vormindamise eesmärgid mõlemal viisil, kuid malliliteralid austavad kõiki tühikuid ja reavahetusi. +Boole’id esindavad andmete kõige lihtsamat vormi: nad saavad võtta vaid kahte väärtust – `true` (tõene) või `false` (valeh). See binaarlogika süsteem viitab 19. sajandi matemaatiku George Boole tööle, kes töötas välja Boole algebra. -✅ Millal kasutaksid malliliteralit tavalise stringi asemel? +Vaatamata nende lihtsusele on boole’id olulised programmi loogikas. Nad võimaldavad koodil teha otsuseid tingimuste alusel – kas kasutaja on sisse logitud, kas nuppu vajutati, või kas teatud tingimused on täidetud. -### Booleans +Boole’id võivad olla vaid kaks väärtust: `true` või `false`. Boole’id aitavad teha otsuseid, milliseid koodiridu täita, kui mattud tingimused on täidetud. Paljudel juhtudel aitavad [operaatorid](../../../../2-js-basics/1-data-types) boole väärtust määrata ning sul on tihti märgata ja kirjutada muutujaid, millele väärtused on operaatoriga määratud või uuendatud. + +```javascript +let myTrueBool = true; +let myFalseBool = false; +``` -Booleans võib olla ainult kaks väärtust: `true` või `false`. Booleans aitab otsustada, millised koodiread peaksid teatud tingimuste täitumisel käivituma. Paljudel juhtudel aitavad [operaatorid](../../../../2-js-basics/1-data-types) booleani väärtuse määramisel ja sageli näed ning kirjutad muutujaid, mida initsialiseeritakse või mille väärtusi uuendatakse operaatoriga. +**Ülaltoodud näites oleme:** +- **Loonud** muutuja, mis salvestab boole väärtuse `true` +- **Näidanud** kuidas salvestada boole väärtuse `false` +- **Kasutanud** täpseid võtmesõnu `true` ja `false` (jutumärke ei ole vaja) +- **Valmistanud** need muutujad tingimuslauseteks kasutamiseks -- `let myTrueBool = true` -- `let myFalseBool = false` +✅ Muutujat võib pidada 'tõeseks', kui see hindamisel annab boole `true`. Huvitaval kombel on JavaScriptis [kõik väärtused tõesed, välja arvatud need, mida on defineeritud valetena](https://developer.mozilla.org/docs/Glossary/Truthy). -✅ Muutuja võib olla 'tõene', kui see hindab booleani `true`. Huvitaval kombel on JavaScript'is [kõik väärtused tõene, välja arvatud juhul, kui need on määratletud kui väär](https://developer.mozilla.org/docs/Glossary/Truthy). +```mermaid +flowchart LR + A["🔘 Boole'i väärtused"] --> B["true"] + A --> C["false"] + + D["Tõeväärtused"] --> D1["'tere'"] + D --> D2["42"] + D --> D3["[]"] + D --> D4["{}"] + + E["Väärväärtused"] --> E1["false"] + E --> E2["0"] + E --> E3["''"] + E --> E4["null"] + E --> E5["undefined"] + E --> E6["NaN"] + + style B fill:#e8f5e8 + style C fill:#ffebee + style D fill:#e3f2fd + style E fill:#fff3e0 +``` +### 🎯 **Boole loogika test: Otsuste tegemise oskused** + +**Testi oma boole arusaamist:** +- Miks arvad, et JavaScriptil on "tõed" ja "valed" väärtused lisaks ainult `true` ja `false`? +- Kas saad ennustada, milline neist on vale: `0`, `"0"`, `[]`, `"false"`? +- Kuidas võivad boole’id olla kasulikud programmi töökorra juhtimisel? + +```mermaid +pie title "Tavalised loogiliste väärtuste kasutusjuhtumid" + "Tingimusloogika" : 40 + "Kasutaja olek" : 25 + "Funktsioonide lülitid" : 20 + "Kinnitamine" : 15 +``` +> **Pea meeles**: JavaScriptis on vaid 6 valet (falsy) väärtust: `false`, `0`, `""`, `null`, `undefined` ja `NaN`. Kõik muu on tõene (truthy)! --- -## 🚀 Väljakutse +## 📊 **Sinu andmetüüpide tööriistakasti kokkuvõte** -JavaScript on kurikuulus oma üllatavate viiside poolest, kuidas ta aeg-ajalt andmetüüpe käsitleb. Uuri veidi nende 'üllatuste' kohta. Näiteks: tõstutundlikkus võib tekitada probleeme! Proovi seda oma konsoolis: `let age = 1; let Age = 2; age == Age` (tulemus `false` -- miks?). Milliseid teisi üllatusi leiad? +```mermaid +graph TD + A["🎯 JavaScripti andmetüübid"] --> B["📦 Muutujad"] + A --> C["🔢 Numbrid"] + A --> D["📝 Stringid"] + A --> E["🔘 Boole'i väärtused"] + + B --> B1["let muudetav"] + B --> B2["const muutumatu"] + + C --> C1["42, 3.14, -5"] + C --> C2["+ - * / %"] + + D --> D1["'jutumärgid' või \\\"jutumärgid\\\""] + D --> D2["`mallväärtused`"] + + E --> E1["tõene või väär"] + E --> E2["tõeväärtuslik vs väärväärtuslik"] + + F["⚡ Põhikontseptsioonid"] --> F1["Tüüp on operatsioonide jaoks oluline"] + F --> F2["JavaScript on dünaamiliselt tüübistatud"] + F --> F3["Muudujad võivad tüüpi muuta"] + F --> F4["Nimekasutus on suur- ja väiketundlik"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` +## GitHub Copilot Agendi väljakutse 🚀 + +Kasuta Agendi režiimi järgneva väljakutse lõpetamiseks: -## Järelloengu viktoriin -[Järelloengu viktoriin](https://ff-quizzes.netlify.app) +**Kirjeldus:** Loo isikuandmete haldur, mis demonstreerib kõiki selle õppetunni jooksul JavaScripti andmetüüpe, käsitledes pärismaailma andmejuhtumeid. -## Ülevaade ja iseseisev õppimine +**Ülesanne:** Koosta JavaScript programm, mis loob kasutajaprofiili objekti sisaldades: inimese nime (string), vanust (number), õpilase staatust (boolean), lemmikvärvide loendit ja aadressi objekti, mis sisaldab tänavat, linna ja postiindeksit. Lisa funktsioonid profiili kuvamiseks ja üksikute väljade uuendamiseks. Näita kindlasti stringide ühendamist, malliliteraale, aritmeetilisi operatsioone vanusega ning boole loogikat õpilase staatuse kohta. -Vaata [seda JavaScript'i harjutuste nimekirja](https://css-tricks.com/snippets/javascript/) ja proovi ühte. Mida õppisid? +Loe rohkem [agent mode’i kohta](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). -## Ülesanne +## 🚀 Väljakutse -[Andmetüüpide harjutamine](assignment.md) +JavaScriptil on mitmeid käitumisviise, mis võivad arendajaid ootamatult tabada. Siin on klassikaline näide uurimiseks: proovi oma brauseri konsoolis sisestada: `let age = 1; let Age = 2; age == Age` ja vaata tulemust. See annab `false` – suudad välja selgitada, miks? + +See on üks paljudest JavaScripti käitumistest, mida tasub mõista. Nende eripärade tundmine aitab sul kirjutada kindlamat koodi ja tõrkeid paremini lahendada. + +## Loengujärgne test +[Loengujärgne test](https://ff-quizzes.netlify.app) + +## Kordamine ja iseseisev õpe + +Vaata [seda JavaScripti harjutuste nimekirja](https://css-tricks.com/snippets/javascript/) ja proovi midagi. Mida sa õppisid? + +## Kodune ülesanne + +[Andmetüüpide harjutus](assignment.md) + +## 🚀 Sinu JavaScripti andmetüüpide valdamise ajakava + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Ava oma brauseri konsool ja loo 3 muutujat eri andmetüüpidega +- [ ] Proovi väljakutset: `let age = 1; let Age = 2; age == Age` ja leia, miks tulemus on false +- [ ] Harjuta stringide ühendamist oma nime ja lemmiknumbriga +- [ ] Testi, mis juhtub, kui lisad numbrile stringi + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida loengujärgne test ja korda ebamääraseid kontseptsioone +- [ ] Koosta mini-kalkulaator, mis liidab, lahutab, korrutab ja jagab kahte arvu +- [ ] Loo lihtne nimenormeerija kasutades malliliteraale +- [ ] Uuri `==` ja `===` võrdlusoperaatorite erinevusi +- [ ] Harjuta andmetüüpide vahel teisendamist + +### 📅 **Sinu nädala pikkune JavaScripti põhioskete programm** +- [ ] Täida ülesanne kindlusega ja loovusega +- [ ] Loo isikuprofiili objekt kõigi õpitud andmetüüpidega +- [ ] Harjuta JavaScripti harjutustega CSS-Tricksist [https://css-tricks.com/snippets/javascript/](https://css-tricks.com/snippets/javascript/) +- [ ] Loo lihtne vormikontroll kasutades boole loogikat +- [ ] Katseta massiivide ja objektide andmetüüpe (tulevaste õppetükkide eelvaade) +- [ ] Liitu JavaScripti kogukonnaga ja küsi andmetüüpide kohta + +### 🌟 **Sinu kuuajaline areng** +- [ ] Integreeri andmetüüpide teadmised suurematesse programmeerimisprojektidesse +- [ ] Mõista, millal ja miks kasutada iga andmetüüpi pärismaailma rakendustes +- [ ] Aita teisi algajaid JavaScripti aluste mõistmisel +- [ ] Loo väike rakendus, mis haldab erinevaid kasutajaandmetüüpe +- [ ] Uuri täpsemaid andmetüüpide kontseptsioone nagu tüübisundimine ja range võrdus +- [ ] Panusta avatud lähtekoodiga JavaScripti projektidesse dokumentatsiooni täiustamisega + +### 🧠 **Lõplik andmetüüpide valdamise kontroll** + +**Tähista oma JavaScripti alust:** +- Milline andmetüüp üllatas sind kõige rohkem oma käitumise poolest? +- Kui kindlalt tunned end muutujate ja konstantide seletamisel sõbrale? +- Mis on kõige huvitavam asi, mida sa avastasid JavaScripti tüübiesüsteemi kohta? +- Millise pärismaailma rakenduse suudaksid nende alustega ehitada? + +```mermaid +journey + title Teie JavaScripti Enesekindluse Teekond + section Täna + Segaduses: 3: You + Uudishimulik: 4: You + Põnevil: 5: You + section Käesolev Nädal + Harjutamine: 4: You + Mõistmine: 5: You + Ehitamine: 5: You + section Järgmine Kuu + Probleemide Lahendamine: 5: You + Teiste Õpetamine: 5: You + Tõelised Projektid: 5: You +``` +> 💡 **Oled loonud vundamendi!** Andmetüüpide mõistmine on nagu tähestiku õppimine enne lugude kirjutamist. Iga JavaScripti programm, mida kunagi kirjutad, kasutab neid põhikontseptsioone. Sul on nüüd alus, millega luua interaktiivseid veebilehti, dünaamilisi rakendusi ja lahendada pärismaailma probleeme koodiga. Tere tulemast imelisse JavaScripti maailma! 🎉 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, tuleb arvestada, et automaatsetes tõlgetes võib esineda vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Kriitilise tähtsusega teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta tõlke kasutamisest tulenevate arusaamatuste ega valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/2-js-basics/1-data-types/assignment.md b/translations/et/2-js-basics/1-data-types/assignment.md index 24fd28cf2..53293140b 100644 --- a/translations/et/2-js-basics/1-data-types/assignment.md +++ b/translations/et/2-js-basics/1-data-types/assignment.md @@ -1,25 +1,103 @@ -# Andmetüüpide harjutus +# Andmetüüpide harjutus: e-kaubanduse ostukorv ## Juhised -Kujutle, et sa lood ostukorvi. Kirjuta dokumentatsioon andmetüüpide kohta, mida sa vajad, et ostukogemus lõpule viia. Iga andmetüübi puhul selgita, kuidas ja miks sa seda kasutaksid, ning too näide. Kuus JavaScripti andmetüüpi on: String, Number, Boolean, Null, Undefined ja Object. +Kujutage ette, et loote kaasaegset e-kaubanduse ostukorvi süsteemi. See ülesanne aitab teil mõista, kuidas erinevad JavaScripti andmetüübid töötavad koos, et luua pärismaailma rakendusi. -## Hindamiskriteeriumid +### Teie ülesanne -Kriteeriumid | Suurepärane | Piisav | Vajab parandamist ---- | --- | --- | --- | -Andmetüübid | Kõik kuus andmetüüpi on loetletud, põhjalikult uuritud ja näidetega dokumenteeritud | Neli andmetüüpi on uuritud ja osaliselt selgitatud | Kaks andmetüüpi on uuritud ja minimaalselt selgitatud | +Looge põhjalik analüüs selle kohta, kuidas kasutaksite JavaScripti andmetüüpe ostukorvi rakenduses. Iga seitsme primaarse andmetüübi ja objektide puhul peate: + +1. **Määratlema** andmetüübi ja selle otstarbe +2. **Selgitama**, miks see andmetüüp on parim valik konkreetsete ostukorvi funktsioonide jaoks +3. **Andma** realistlikke koodinäiteid, mis näitavad andmetüübi kasutust +4. **Kirjeldama**, kuidas see andmetüüp suhtleb ostukorvi teiste osadega + +### Kaetud andmetüübid + +**Primaarandmed tüübid:** +- **String**: tootenimed, kirjed, kasutaja andmed +- **Number**: hinnad, kogused, maksuarvutused +- **Boolean**: toote saadavus, kasutaja eelistused, korvi staatus +- **Null**: teadlikult tühjad väärtused (näiteks puuduvad sooduskoodid) +- **Undefined**: initsialiseerimata väärtused või puuduvad andmed +- **Symbol**: unikaalsed identifikaatorid (edasijõudnutele) +- **BigInt**: suured finantsarvutused (edasijõudnutele) + +**Viitandmed tüübid:** +- **Object**: toote detailid, kasutajaprofiilid, korvi sisu +- **Array**: toodete nimekiri, tellimuste ajalugu, kategooriad + +### Iga andmetüübi näidisformaat + +Iga andmetüübi jaoks vormistage oma vastus järgmiselt: + +```markdown +## [Data Type Name] + +**Purpose in Shopping Cart:** [Explain what this data type does] + +**Why This Type:** [Explain why this is the best choice] + +**Code Example:** +```javascript +// Your realistic code example here +``` + +**Reaalne kasutus:** [Kirjeldage, kuidas see praktikas toimiks] + +**Suhtlemine:** [Selgitage, kuidas see andmetüüp töötab koos teistega] +``` + +### Bonus Challenges + +1. **Type Coercion**: Show an example where JavaScript automatically converts between data types in your shopping cart (e.g., string "5" + number 10) + +2. **Data Validation**: Demonstrate how you would check if user input is the correct data type before processing + +3. **Performance Considerations**: Explain when you might choose one data type over another for performance reasons + +### Submission Guidelines + +- Create a markdown document with clear headings for each data type +- Include working JavaScript code examples +- Use realistic e-commerce scenarios in your examples +- Explain your reasoning clearly for beginners to understand +- Test your code examples to ensure they work correctly + +## Rubric + +| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Needs Improvement (Below 70%) | +|----------|---------------------|---------------------|---------------------|------------------------------| +| **Data Type Coverage** | All 7 primitive types and objects/arrays covered with detailed explanations | 6-7 data types covered with good explanations | 4-5 data types covered with basic explanations | Fewer than 4 data types or minimal explanations | +| **Code Examples** | All examples are realistic, working, and well-commented | Most examples work and are relevant to e-commerce | Some examples work but may be generic | Code examples are incomplete or non-functional | +| **Real-world Application** | Clearly connects each data type to practical shopping cart features | Good connection to e-commerce scenarios | Some connection to shopping cart context | Limited real-world application demonstrated | +| **Technical Accuracy** | All technical information is correct and demonstrates deep understanding | Most technical information is accurate | Generally accurate with minor errors | Contains significant technical errors | +| **Communication** | Explanations are clear, beginner-friendly, and well-organized | Good explanations that are mostly clear | Explanations are understandable but may lack clarity | Explanations are unclear or poorly organized | +| **Bonus Elements** | Includes multiple bonus challenges with excellent execution | Includes one or more bonus challenges well done | Attempts bonus challenges with mixed success | No bonus challenges attempted | + +### Learning Objectives + +By completing this assignment, you will: +- ✅ **Understand** the seven JavaScript primitive data types and their uses +- ✅ **Apply** data types to real-world programming scenarios +- ✅ **Analyze** when to choose specific data types for different purposes +- ✅ **Create** working code examples that demonstrate data type usage +- ✅ **Explain** technical concepts in beginner-friendly language +- ✅ **Connect** fundamental programming concepts to practical applications --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades AI-tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüame tagada täpsust, palun mõistke, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlkega kaasnevate arusaamatuste ega valesti tõlgendamise eest. + \ No newline at end of file diff --git a/translations/et/2-js-basics/2-functions-methods/README.md b/translations/et/2-js-basics/2-functions-methods/README.md index 95bc5f6cf..0e8f95a81 100644 --- a/translations/et/2-js-basics/2-functions-methods/README.md +++ b/translations/et/2-js-basics/2-functions-methods/README.md @@ -1,45 +1,105 @@ -# JavaScript'i põhialused: meetodid ja funktsioonid +# JavaScripti alused: meetodid ja funktsioonid + +![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.et.png) +> Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Sinu JavaScripti funktsioonide seiklus + section Alused + Function Syntax: 5: You + Calling Functions: 4: You + Parameters & Arguments: 5: You + section Edasijõudnud kontseptsioonid + Return Values: 4: You + Default Parameters: 5: You + Function Composition: 4: You + section Kaasaegne JavaScript + Arrow Functions: 5: You + Anonymous Functions: 4: You + Higher-Order Functions: 5: You +``` +## Eel-loengu viktoriin +[Eel-loengu viktoriin](https://ff-quizzes.netlify.app) -![JavaScript'i põhialused - Funktsioonid](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.et.png) -> Sketchnote autor: [Tomomi Imura](https://twitter.com/girlie_mac) +Sama koodi korduvalt kirjutamine on programmeerimise üks levinumaid frustratsioone. Funktsioonid lahendavad selle probleemi, võimaldades sul pakendada koodi taaskasutatavatesse plokkidesse. Mõtle funktsioonidele nagu Henry Fordi liinikesksetele standardsetele osadele – kui sa lood usaldusväärse komponendi, saad seda kasutada kõikjal, ilma et peaksid iga kord nullist ehitama. -## Eelloengu viktoriin -[Eelloengu viktoriin](https://ff-quizzes.netlify.app) +Funktsioonid võimaldavad sul grupeerida koodiosi, et saaksid neid oma programmis korduvalt kasutada. Selle asemel, et iga kord sama loogikat kopeerida ja kleepida, saad luua funktsiooni ühe korra ja kutsuda seda välja siis, kui vaja. See lähenemine hoiab su koodi organiseerituna ja muudab uuendamise palju lihtsamaks. -Kui mõtleme koodi kirjutamisele, tahame alati tagada, et meie kood oleks loetav. Kuigi see võib tunduda vastupidine, loetakse koodi palju rohkem kui seda kirjutatakse. Üks arendaja tööriistakasti põhivahenditest, mis aitab tagada hooldatavat koodi, on **funktsioon**. +Selles õppetükis õpid, kuidas luua oma funktsioone, saata neile infot ja saada kasulikke tulemusi tagasi. Saad teada erinevuse funktsioonide ja meetodite vahel, õpid kaasaegseid süntaksipraktikaid ning näed, kuidas funktsioonid saavad töötada koos teiste funktsioonidega. Need kontseptsioonid ehitame samm-sammult üles. [![Meetodid ja funktsioonid](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Meetodid ja funktsioonid") -> 🎥 Klõpsa ülaloleval pildil, et vaadata videot meetoditest ja funktsioonidest. - -> Selle õppetunni leiad [Microsoft Learnist](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)! - +> 🎥 Klõpsa ülaloleval pildil videoks meetodite ja funktsioonide kohta. + +> Seda õppetundi saad võtta [Microsoft Learn’is](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)! + +```mermaid +mindmap + root((JavaScript funktsioonid)) + Põhikontseptsioonid + Deklaratsioon + Traditsiooniline süntaks + Noolefunktsiooni süntaks + Kutsumine + Ümarlause kasutamine + Ümarlause nõutud + Parameetrid + Sisendväärtused + Mitmed parameetrid + Vaikimisi väärtused + Argumendid + Edastatud väärtused + Võivad olla mis tahes tüüpi + Tagastusväärtused + Väljundiandmed + return lause + Funktsioonist väljumine + Tulemuste kasutamine + Muutujatesse salvestamine + Funktsioonide ahelad + Täpsemad mustrid + Kõrgema astme + Funktsioonid parameetritena + Tagasikutsed + Anonüümsed + Nime pole vaja + Rearealine definitsioon +``` ## Funktsioonid -Funktsioon on sisuliselt koodiplokk, mida saame käivitada vastavalt vajadusele. See sobib ideaalselt olukordadesse, kus peame sama ülesannet täitma mitu korda; selle asemel, et loogikat mitmes kohas dubleerida (mis muudaks hilisema uuendamise keeruliseks), saame selle tsentraliseerida ühte kohta ja kutsuda seda üles, kui operatsiooni on vaja teha - funktsioone saab isegi teistest funktsioonidest kutsuda! +Funktsioon on iseseisev koodiplokk, mis täidab konkreetset ülesannet. See kapseldab loogika, mida saad käivitada alati, kui vaja. + +Selle asemel, et kirjutada sama koodi mitmel korral kogu oma programmis, saad selle panna funktsiooni ja kutsuda seda välja siis, kui vaja. See muudab su koodi puhtamaks ja uuendamine palju lihtsamaks. Mõtle ainult sellele hooldusprobleemile, kui peaksid muutma loogikat, mis on laiali 20 erinevas kohas koodibaasis. -Samavõrd oluline on funktsiooni nime andmine. Kuigi see võib tunduda tühine, pakub nimi kiiret viisi koodilõigu dokumenteerimiseks. Võid mõelda sellele kui nupule pandud sildile. Kui klõpsan nupul, millel on kirjas "Tühista taimer", tean, et see peatab kella käimise. +Funktsioonide nimed peaksid olema kirjeldavad. Hästi nimetatud funktsioon ütleb kohe, mis selle eesmärk on – kui näed `cancelTimer()`, mõistad kohe, mida see teeb, just nagu märgistatud nupp ütleb täpselt, mis juhtub, kui sellele klõpsad. ## Funktsiooni loomine ja kutsumine -Funktsiooni süntaks näeb välja järgmine: +Vaadakem, kuidas funktsiooni luua. Süntaks järgib ühtset mustrit: ```javascript -function nameOfFunction() { // function definition - // function definition/body +function nameOfFunction() { // funktsiooni definitsioon + // funktsiooni definitsioon/korpus } ``` -Kui tahaksin luua funktsiooni tervituse kuvamiseks, võiks see välja näha nii: +Selgitame seda: +- Märksõna `function` ütleb JavaScriptile: "Hei, ma loon funktsiooni!" +- `nameOfFunction` on koht, kus annad oma funktsioonile kirjeldava nime +- Sulud `()` on kohad, kuhu saad lisada parameetrid (siinkohal varsti sellest räägime) +- Kõverad sulud `{}` sisaldavad tegelikku koodi, mis jooksutab funktsiooni väljakutsumisel + +Loome lihtsa tervitusfunktsiooni, et näha seda praktikas: ```javascript function displayGreeting() { @@ -47,28 +107,57 @@ function displayGreeting() { } ``` -Kui tahame oma funktsiooni kutsuda (või käivitada), kasutame funktsiooni nime, millele järgneb `()`. Tasub märkida, et meie funktsioon võib olla defineeritud enne või pärast selle kutsumist; JavaScript'i kompilaator leiab selle üles. +See funktsioon prindib konsooli "Hello, world!" Kui oled selle määratlenud, saad seda kasutada nii sagedasti kui soovid. + +Funktsiooni käivitamiseks (ehk "väljakutsumiseks") kirjuta selle nimi koos sulgudega. JavaScript laseb sul defineerida funktsiooni enne või pärast selle kutsumist – JavaScripti mootor korraldab täitmise järjekorra ise. ```javascript -// calling our function +// kutsume meie funktsiooni displayGreeting(); ``` -> **NOTE:** On olemas eriline funktsiooni tüüp, mida nimetatakse **meetodiks**, mida oled juba kasutanud! Tegelikult nägime seda oma demos, kui kasutasime `console.log`. Mis eristab meetodit funktsioonist, on see, et meetod on seotud objektiga (meie näites `console`), samas kui funktsioon on vaba ja ei kuulu ühegi objekti alla. Paljud arendajad kasutavad neid termineid vaheldumisi. +Kui jooksutad selle rea, täidab see kogu koodi funktsioonis `displayGreeting`, kuvades brauseri konsoolis "Hello, world!". Sa võid seda funktsiooni kutsuda korduvalt. + +### 🧠 **Funktsioonide põhitõed: esimeste funktsioonide loomine** + +**Vaata, kuidas sul funktsioonidega läheb:** +- Miks kasutame funktsioonide määratluses kõveraid sulgusid `{}`? +- Mis juhtub, kui kirjutad `displayGreeting` ilma sulgudeta? +- Miks võiks soovida kutsuda sama funktsiooni mitu korda? + +```mermaid +flowchart TD + A["✏️ Määra funktsioon"] --> B["📦 Paki kood"] + B --> C["🏷️ Anna nimi"] + C --> D["📞 Kutsu vajadusel"] + D --> E["🔄 Kasuta uuesti kõikjal"] + + F["💡 Eelised"] --> F1["Pole koodi kordusi"] + F --> F2["Lihtne hooldada"] + F --> F3["Selge korraldus"] + F --> F4["Lihtsam testimine"] + + style A fill:#e3f2fd + style E fill:#e8f5e8 + style F fill:#fff3e0 +``` +> **Märkus:** Sa oled neid õppetükke läbides kasutanud ka **meetodeid**. `console.log()` on meetod – sisuliselt funktsioon, mis kuulub `console` objektile. Peamine erinevus on see, et meetodid on seotud objektiga, funktsioonid töötavad iseseisvalt. Paljud arendajad kasutavad neid termineid igapäevases kõnes vaheldumisi. + +### Parimad tavad funktsioonidega -### Funktsiooni parimad tavad +Siin on mõned nipid, mis aitavad sul kirjutada häid funktsioone: -Funktsioonide loomisel tasub meeles pidada mõningaid parimaid tavasid: +- Anna funktsioonidele selged, kirjeldavad nimed – su tulevane mina tänab sind! +- Kasuta mitmesõnalistes nimedes **camelCase** stiili (nt `calculateTotal` asemel `calculate_total`) +- Hoia iga funktsioon keskendunud ühe asja korraldamisele hästi -- Kasuta alati kirjeldavaid nimesid, et teaksid, mida funktsioon teeb -- Kasuta **camelCase**'i sõnade ühendamiseks -- Hoia oma funktsioonid keskendunud konkreetsele ülesandele +## Info edastamine funktsioonile -## Informatsiooni edastamine funktsioonile +Meie `displayGreeting` funktsioon on piiratud – ta suudab kuvada alati ainult "Hello, world!" Parameetrid võimaldavad funktsioone paindlikumaks ja kasulikumaks muuta. -Funktsiooni muutmiseks paindlikumaks tahad sageli sellele informatsiooni edastada. Kui vaatame meie ülaltoodud `displayGreeting` näidet, kuvab see ainult **Hello, world!**. See pole just kõige kasulikum funktsioon, mida võiks luua. Kui tahame seda veidi paindlikumaks muuta, näiteks võimaldada kellelgi määrata tervitatava inimese nime, saame lisada **parameetri**. Parameeter (mõnikord nimetatakse seda ka **argumendiks**) on lisainformatsioon, mis saadetakse funktsioonile. +**Parameetrid** toimivad nagu kohatäited, kuhu saad iga funktsiooni kutsumise korral erinevad väärtused panna. Nii saab üks ja seesama funktsioon töötada erineva infoga sõltuvalt kutsest. -Parameetrid loetletakse definitsiooni osas sulgudes ja eraldatakse komadega, näiteks: +Kirjutad parameetrid sulgude vahele funktsiooni definitsioonis, mitmed parameetrid eraldatakse komadega: ```javascript function name(param, param2, param3) { @@ -76,7 +165,9 @@ function name(param, param2, param3) { } ``` -Saame uuendada oma `displayGreeting` funktsiooni, et see aktsepteeriks nime ja kuvaks selle. +Iga parameeter toimib kohatäitjana – kui keegi sinu funktsiooni kutsub, annab ta tegelikud väärtused, mis asetuvad nendele kohtadele. + +Värskendame meie tervitusfunktsiooni, et see võtaks vastu nime: ```javascript function displayGreeting(name) { @@ -85,16 +176,44 @@ function displayGreeting(name) { } ``` -Kui tahame oma funktsiooni kutsuda ja parameetri edastada, määrame selle sulgudes. +Pane tähele, et kasutame tagurpidi jutumärke (`` ` ``) ja `${}` süntaksit, et panna nimi otse sõnumisse – seda nimetatakse mallitekstiks, ja see on väga mugav viis stringidesse muutujaid lisada. + +Nüüd, kui kutsume funktsiooni, võime anda suvalise nime: ```javascript displayGreeting('Christopher'); -// displays "Hello, Christopher!" when run +// kuvab "Tere, Christopher!" käivitamisel ``` -## Vaikeväärtused +JavaScript võtab stringi `'Christopher'`, määrab selle `name` parameetrile ja loob personaalse sõnumi "Hello, Christopher!" + +```mermaid +flowchart LR + A["🎯 Funktsiooni kutsumine"] --> B["📥 Parameetrid"] + B --> C["⚙️ Funktsiooni keha"] + C --> D["📤 Tulemus"] + + A1["displayGreeting('Alice')"] --> A + B1["nimi = 'Alice'"] --> B + C1["Mall-märgend\n\`Tere, \${nimi}!\`"] --> C + D1["'Tere, Alice!'"] --> D + + E["🔄 Parameetri tüübid"] --> E1["Stringid"] + E --> E2["Numbrid"] + E --> E3["Boooleanid"] + E --> E4["Objektid"] + E --> E5["Funktsioonid"] + + style A fill:#e3f2fd + style C fill:#e8f5e8 + style D fill:#fff3e0 + style E fill:#f3e5f5 +``` +## Vaikesätted + +Mis saab siis, kui tahame teha mõningad parameetrid vabatahtlikuks? Just siin tulevad mängu vaikeväärtused! -Saame muuta oma funktsiooni veelgi paindlikumaks, lisades rohkem parameetreid. Aga mis siis, kui me ei taha, et iga väärtus oleks kohustuslik? Jätkates meie tervituse näidet, võiksime jätta nime kohustuslikuks (meil on vaja teada, keda tervitame), kuid tahame võimaldada tervitust ise kohandada. Kui keegi ei soovi seda kohandada, pakume selle asemel vaikeväärtuse. Vaikeväärtuse määramiseks parameetrile seadistame selle samamoodi nagu määrame väärtuse muutujale - `parameterName = 'defaultValue'`. Täieliku näite nägemiseks: +Oletame, et tahame lubada inimestel tervitusvormingut muuta, aga kui nad seda ei määra, kasutame lihtsalt vaikimisi "Hello". Saad vaikeväärtuseid määrata võrdusmärgiga, nagu muutuja määramisel: ```javascript function displayGreeting(name, salutation='Hello') { @@ -102,29 +221,63 @@ function displayGreeting(name, salutation='Hello') { } ``` -Kui kutsume funktsiooni, saame otsustada, kas tahame `salutation` jaoks väärtuse määrata. +Siin on `name` endiselt kohustuslik, aga `salutation` on varuväärtuseks `'Hello'`, kui keegi ei määra teist tervitust. + +Nüüd võime seda funktsiooni kutsuda kahel erineval viisil: ```javascript displayGreeting('Christopher'); -// displays "Hello, Christopher" +// kuvab "Tere, Christopher" displayGreeting('Christopher', 'Hi'); -// displays "Hi, Christopher" +// kuvab "Tere, Christopher" +``` + +Esimesel kutsumisel kasutab JavaScript vaikeväärtust "Hello", kuna ei määra tervitust. Teisel kutsumisel kasutab meie kohandatud "Hi" tervitust. See paindlikkus muudab funktsioonid kohanemisvõimeliseks erinevate stsenaariumide jaoks. + +### 🎛️ **Parameetrite valdamise kontroll: funktsioonide kohandamine** + +**Testi oma teadmisi parameetritest:** +- Mis vahe on parameetril ja argumendil? +- Miks on vaikeväärtused reaalses programmeerimises kasulikud? +- Mida arvad, mis juhtub, kui anda argumendid rohkem kui parameetreid? + +```mermaid +stateDiagram-v2 + [*] --> NoParams: function greet() {} + [*] --> WithParams: function greet(name) {} + [*] --> WithDefaults: function greet(name, greeting='Tere') {} + + NoParams --> Static: Alati sama väljund + WithParams --> Dynamic: Muutub sisendi järgi + WithDefaults --> Flexible: Valikuline kohandamine + + Static --> [*] + Dynamic --> [*] + Flexible --> [*] + + note right of WithDefaults + Kõige paindlikum lähenemine + Tagasiühildub + end note ``` +> **Profi nipp**: Vaikeparameetrid muudavad su funktsioonid kasutajasõbralikumaks. Kasutajad saavad kiiresti alustada mõistlike vaikeseadetega, aga saavad vajadusel ise kohandada! -## Tagastusväärtused +## Tagastatavad väärtused -Siiani on meie loodud funktsioon alati väljastanud tulemuse [konsoolile](https://developer.mozilla.org/docs/Web/API/console). Mõnikord võib see olla täpselt see, mida otsime, eriti kui loome funktsioone, mis kutsuvad teisi teenuseid. Aga mis siis, kui tahan luua abifunktsiooni, mis teeb arvutuse ja tagastab väärtuse, et saaksin seda mujal kasutada? +Senini on meie funktsioonid ainult sõnumeid konsoolis kuvavd, aga mis siis, kui tahad, et funktsioon arvutab midagi välja ja annab tulemuse tagasi? -Saame seda teha, kasutades **tagastusväärtust**. Tagastusväärtus tagastatakse funktsiooni poolt ja seda saab salvestada muutujasse samamoodi nagu saaksime salvestada literaalväärtuse, näiteks stringi või numbri. +Siin tulevad mängu **tagastatavad väärtused**. Funktsioon võib sulle väärtuse anda, mida saad hiljem muutuja sees hoida või kasutada muudes osades oma koodi. -Kui funktsioon midagi tagastab, kasutatakse märksõna `return`. Märksõna `return` eeldab väärtust või viidet sellele, mida tagastatakse, näiteks: +Tagastamiseks kasutad märksõna `return`, millele järgneb tagastatav väärtus: ```javascript return myVariable; -``` +``` + +Oluline asi: kui funktsioon jõuab `return` lausesse, peatab ta kohe täitmise ja saadab selle väärtuse üle funktsiooni välja kutsujale. -Saaksime luua funktsiooni, mis loob tervitussõnumi ja tagastab väärtuse kutsujale. +Muudame meie tervitusfunktsiooni nii, et see tagastaks sõnumi mitte ei trükiks seda: ```javascript function createGreetingMessage(name) { @@ -133,35 +286,81 @@ function createGreetingMessage(name) { } ``` -Funktsiooni kutsumisel salvestame väärtuse muutujasse. See on väga sarnane sellele, kuidas määraksime muutujale staatilise väärtuse (näiteks `const name = 'Christopher'`). +Nüüd selle asemel, et sõnumit kuvada, loob funktsioon selle ja annab meile tagasi. + +Tagastatud väärtust saab hoida muutuja sees nagu mis tahes teist väärtust: ```javascript const greetingMessage = createGreetingMessage('Christopher'); ``` -## Funktsioonid funktsioonide parameetritena +Nüüd sisaldab `greetingMessage` stringi "Hello, Christopher" ja me saame seda kasutada kus iganes oma koodis – kuvada veebilehel, lisada e-kirja või anda teisele funktsioonile. + +```mermaid +flowchart TD + A["🔧 Funktsiooni Töötlemine"] --> B{"tagastuslause?"} + B -->|Jah| C["📤 Tagasta Väärtus"] + B -->|Ei| D["📭 Tagasta määratlemata"] + + C --> E["💾 Salvesta muutuja"] + C --> F["🔗 Kasuta avaldises"] + C --> G["📞 Edasta funktsioonile"] + + D --> H["⚠️ Tavaliselt pole kasulik"] + + I["📋 Tagastatud Väärtuse Kasutused"] --> I1["Tulemuste arvutamine"] + I --> I2["Sisendi valideerimine"] + I --> I3["Andmete teisendamine"] + I --> I4["Objektide loomine"] + + style C fill:#e8f5e8 + style D fill:#ffebee + style I fill:#e3f2fd +``` +### 🔄 **Tagastatavate väärtuste kontroll: tulemuste saamine** + +**Hinda oma arusaamist tagastustest:** +- Mis juhtub funktsioonis olevate ridadega pärast `return` lauset? +- Miks on tihti parem väärtused tagasi tagastada, mitte lihtsalt konsooli printida? +- Kas funktsioon saab tagastada erinevat tüüpi väärtusi (string, number, boolean)? + +```mermaid +pie title "Levinumad tagastustüüpide väärtused" + "Stringid" : 30 + "Numbrid" : 25 + "Objektid" : 20 + "Boolsed väärtused" : 15 + "Massiivid" : 10 +``` +> **Oluline mõte**: Funktsioonid, mis tagastavad väärtusi, on paindlikumad, sest helistaja otsustab, mida tulemustega teha. See teeb su koodi modulaarsemaks ja taaskasutatavamaks! + +## Funktsioonid parameetritena teiste funktsioonide jaoks + +Funktsioone saab edasi anda parameetritena teistele funktsioonidele. See võiks esmapilgul tunduda keeruline, aga see on võimas omadus, mis võimaldab paindliku programmeerimisstiili. -Kui edened oma programmeerimiskarjääris, kohtad funktsioone, mis aktsepteerivad funktsioone parameetritena. See nutikas trikk on sageli kasutusel, kui me ei tea, millal midagi juhtub või lõppeb, kuid teame, et peame sellele vastuseks operatsiooni tegema. +See muster on väga levinud, kui tahad öelda "kui midagi juhtub, tee seda teist asja". Näiteks "kui taimer lõpeb, käivita see kood" või "kui kasutaja vajutab nuppu, kutsu see funktsioon". -Näiteks [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), mis alustab taimerit ja käivitab koodi, kui see lõppeb. Peame ütlema, millist koodi tahame käivitada. Tundub ideaalne töö funktsioonile! +Vaatame `setTimeouti`, mis on sisseehitatud funktsioon, mis ootab kindla aja ja siis täidab mingit koodi. Me peame ütlema, millist koodi täita – selleks ongi funktsiooni edasiandmine ideaalne! -Kui käivitad alloleva koodi, näed 3 sekundi pärast sõnumit **3 sekundit on möödunud**. +Proovi seda koodi – 3 sekundi pärast näed sõnumit: ```javascript function displayDone() { console.log('3 seconds has elapsed'); } -// timer value is in milliseconds +// taimeri väärtus on millisekundites setTimeout(displayDone, 3000); ``` +Pane tähele, et anname `setTimeoutile` edasi `displayDone` (ilma sulgudeta). Me ei kutsu seda funktsiooni ise, vaid anname selle `setTimeoutile` ja ütleme: "käivita see 3 sekundi pärast." + ### Anonüümsed funktsioonid -Vaatame uuesti, mida oleme ehitanud. Loome funktsiooni nimega, mida kasutatakse ainult üks kord. Kui meie rakendus muutub keerukamaks, näeme, et loome palju funktsioone, mida kutsutakse ainult üks kord. See pole ideaalne. Selgub, et me ei pea alati nime andma! +Mõnikord vajad funktsiooni ainult ühe asja jaoks ja sa ei taha sellele nime anda. Mõtle sellele – kui kasutad funktsiooni ainult kord, miks segada oma kood nimedega? -Kui edastame funktsiooni parameetrina, saame vältida selle eelnevat loomist ja selle asemel ehitada selle parameetri osana. Kasutame sama märksõna `function`, kuid ehitame selle parameetrina. +JavaScript lubab luua **anonüümseid funktsioone** – funktsioonid ilma nimesideta, mida saad defineerida seal, kus neid vajad. -Kirjutame ülaltoodud koodi ümber, et kasutada anonüümset funktsiooni: +Siin on, kuidas võiksime muuta meie taimerinäite anonüümseks funktsiooniks: ```javascript setTimeout(function() { @@ -169,13 +368,15 @@ setTimeout(function() { }, 3000); ``` -Kui käivitad meie uue koodi, märkad, et tulemused on samad. Oleme loonud funktsiooni, kuid ei pidanud sellele nime andma! +See annab sama tulemuse, aga funktsioon on defineeritud otse `setTimeout` kutses, ilma eraldi funktsiooni deklaratsioonita. -### Fat arrow funktsioonid +### Ümarnoole funktsioonid -Üks lühend, mis on levinud paljudes programmeerimiskeeltes (sealhulgas JavaScript'is), on võimalus kasutada nn **noole** või **fat arrow** funktsiooni. See kasutab spetsiaalset sümbolit `=>`, mis näeb välja nagu nool - seega nimi! Kasutades `=>`, saame vahele jätta märksõna `function`. +Kaasaegses JavaScriptis on olemas veelgi lühem viis funktsioonide kirjutamiseks – **noolefunktsioonid**. Need kasutavad `=>` sümbolit (mis näeb välja nagu nool) ja on arendajate seas väga populaarsed. -Kirjutame oma koodi veel kord ümber, et kasutada fat arrow funktsiooni: +Noolefunktsioonid võimaldavad jätta ära sõna `function` ja kirjutada koodi palju kompaktsemalt. + +Siin on meie taimeri näide noolefunktsiooni kasutades: ```javascript setTimeout(() => { @@ -183,28 +384,200 @@ setTimeout(() => { }, 3000); ``` -### Millal kasutada iga strateegiat - -Oled nüüd näinud, et meil on kolm viisi funktsiooni parameetrina edastamiseks ja võid mõelda, millal kasutada igaüht. Kui tead, et kasutad funktsiooni rohkem kui üks kord, loo see tavapäraselt. Kui kasutad seda ainult ühes kohas, on üldiselt parim kasutada anonüümset funktsiooni. Kas kasutada fat arrow funktsiooni või traditsioonilist `function` süntaksit, on sinu otsustada, kuid märkad, et enamik kaasaegseid arendajaid eelistab `=>`. +Tühjad sulud `()` tähistavad parameetreid (siin tühjad), seejärel tuleb nool `=>` ja lõpuks funktsiooni keha kõverates sulgudes. See annab sama funktsionaalsuse lühema süntaksiga. + +```mermaid +flowchart LR + A["📝 Funktsioonistiilid"] --> B["Traditsiooniline"] + A --> C["Noolega"] + A --> D["Anonüümne"] + + B --> B1["function name() {}"] + B --> B2["Tõstetud"] + B --> B3["Nimetatud"] + + C --> C1["const name = () => {}"] + C --> C2["Lühike süntaks"] + C --> C3["Moodne stiil"] + + D --> D1["function() {}"] + D --> D2["Ilma nime"] + D --> D3["Ühekordseks kasutamiseks"] + + E["⏰ Millal kasutada"] --> E1["Traditsiooniline: Taaskasutatavad funktsioonid"] + E --> E2["Noolega: Lühikesed tagasikutsetüüpide funktsioonid"] + E --> E3["Anonüümne: Sündmuste käsitlejad"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +### Millal kasutada millist lähenemist + +Millal siis kumbagi kasutada? Praktiline reegel: kui kutsud funktsiooni mitu korda, anna sellele nimi ja defineeri see eraldi. Kui kasutad funktsiooni ainult korra, kaalu anonüümset funktsiooni. Nii noolefunktsioonid kui traditsiooniline süntaks on kehtivad valikud, kuigi noolefunktsioonid on tänapäeva koodibaasides domineerivad. + +### 🎨 **Funktsioonistiilide valdamise kontroll: õige süntaksi valimine** + +**Testi oma süntaksiteadmisi:** +- Millal eelistad noolefunktsioone traditsioonilise funktsioonisüntaksi asemel? +- Mis on anonüümsete funktsioonide suurim eelis? +- Kas oskad mõelda olukorda, kus nimetatud funktsioon on anonüümse asemel parem? + +```mermaid +quadrantChart + title Funktsiooni valiku otsustusmaatriks + x-axis Lihtne --> Keeruline + y-axis Ühekordne kasutus --> Taaskasutatav + quadrant-1 Noolefunktsioonid + quadrant-2 Nimelised funktsioonid + quadrant-3 Anonüümsed funktsioonid + quadrant-4 Traditsioonilised funktsioonid + + Event Handlers: [0.3, 0.2] + Utility Functions: [0.7, 0.8] + Callbacks: [0.2, 0.3] + Class Methods: [0.8, 0.7] + Mathematical Operations: [0.4, 0.6] +``` +> **Moodne trend**: Noolefunktsioonid on paljude arendajate esimene valik tänu lühidusele, aga traditsioonilistel funktsioonidel on endiselt oma koht! --- + + ## 🚀 Väljakutse -Kas suudad ühe lausega selgitada funktsioonide ja meetodite erinevust? Proovi järele! +Kas suudad ühes lauses sõnastada funktsioonide ja meetodite erinevuse? Proovi järele! + +## GitHub Copilot Agent'i väljakutse 🚀 + +Kasuta Agent režiimi, et täita järgmine väljakutse: -## Järelloengu viktoriin -[Järelloengu viktoriin](https://ff-quizzes.netlify.app) +**Kirjeldus:** Loo matemaatiliste funktsioonide abiteek, mis demonstreerib selle õppetüki käsitletud funktsioonide kontseptsioone, sealhulgas parameetreid, vaikeväärtusi, tagastusi ja noolefunktsioone. + +**Prompt:** Loo JavaScripti fail nimega `mathUtils.js`, mis sisaldab järgmisi funktsioone: +1. Funktsioon `add`, mis võtab kaks parameetrit ja tagastab nende summa +2. Funktsioon `multiply` vaikeväärtustega parameetritel (teine parameeter vaikimisi 1) +3. Noolefunktsioon `square`, mis võtab numbri ja tagastab selle ruudu +4. Funktsioon `calculate`, mis võtab parameetrina teise funktsiooni ja kaks numbrit, seejärel rakendab seda funktsiooni nendele numbritele +5. Näita iga funktsiooni kutsumist sobivate testjuhtudega + +Loe agent režiimi kohta rohkem siit: [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). + +## Pärast loengut viktoriin +[Pärast loengut viktoriin](https://ff-quizzes.netlify.app) ## Ülevaade ja iseseisev õppimine -Tasub [lugeda veidi rohkem noolefunktsioonide kohta](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kuna neid kasutatakse üha enam koodibaasides. Harjuta funktsiooni kirjutamist ja seejärel selle ümberkirjutamist selle süntaksiga. +Tasub [lugeda natuke rohkem noolefunktsioonide kohta](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kuna neid kasutatakse üha rohkem koodibaasides. Harjuta funktsiooni kirjutamist ja seejärel sama funktsiooni ümberkirjutamist selle süntaksi abil. + +## Kodune ülesanne + +[Fun with Functions](assignment.md) -## Ülesanne +--- -[Lõbu funktsioonidega](assignment.md) +## 🧰 **Sinu JavaScripti funktsioonide tööriistakasti kokkuvõte** + +```mermaid +graph TD + A["🎯 JavaScripti funktsioonid"] --> B["📋 Funktsiooni deklaratsioon"] + A --> C["📥 Parameetrid"] + A --> D["📤 Tagastatud väärtused"] + A --> E["🎨 Moodne süntaks"] + + B --> B1["function name() {}"] + B --> B2["Kirjeldav nimetamine"] + B --> B3["Taaskasutatavad koodiplokid"] + + C --> C1["Sisendandmed"] + C --> C2["Vaikimisi väärtused"] + C --> C3["Mitmed parameetrid"] + + D --> D1["return lause"] + D --> D2["Funktsioonist väljumine"] + D --> D3["Andmete tagastamine"] + + E --> E1["Noolefunktsioonid: () =>"] + E --> E2["Anonüümsed funktsioonid"] + E --> E3["Kõrgemad järgu funktsioonid"] + + F["⚡ Peamised eelised"] --> F1["Koodi taaskasutus"] + F --> F2["Parem organiseerimine"] + F --> F3["Lihtsam testimine"] + F --> F4["Mooduldisain"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` +--- + +## 🚀 Sinu JavaScripti funktsioonide meistriaja ajakava + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Kirjuta lihtne funktsioon, mis tagastab su lemmiknumbri +- [ ] Loo funktsioon kahel parameetril, mis liidab need kokku +- [ ] Proovi traditsioonilise funktsiooni teisendamist noolefunktsiooni süntaksiks +- [ ] Harjuta ülesannet: selgita, mis vahe on funktsioonidel ja meetoditel + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Lõpeta õppetunni järgne viktoriin ja vaata üle kõik segased teemad +- [ ] Ehita matemaatika utiliitide teek GitHub Copilot väljakutse põhjal +- [ ] Loo funktsioon, mis kasutab teist funktsiooni parameetrina +- [ ] Harjuta funktsioonide kirjutamist vaikimisi parameetritega +- [ ] Katseta mallstringe funktsioonide tagastatavates väärtustes + +### 📅 **Sinu nädalane funktsioonide meisterlikkus** +- [ ] Täida loominguliselt ülesanne „Põnevad funktsioonid“ +- [ ] Refaktoreeri mõni korduv kood, mille oled kirjutanud, taaskasutatavateks funktsioonideks +- [ ] Ehita väike kalkulaator, kasutades ainult funktsioone (ilma globaalseid muutujaid) +- [ ] Harjuta noolefunktsioone massiivimeetoditega nagu `map()` ja `filter()` +- [ ] Loo kogu kasulikke funktsioone tavapäraste ülesannete jaoks +- [ ] Õpi kõrgema taseme funktsioone ja funktsionaalset programmeerimist + +### 🌟 **Sinu kuu pikkune muutus** +- [ ] Valda keerukamaid funktsioonide kontseptsioone nagu sulgemine ja ulatus +- [ ] Ehita projekt, mis tugevalt kasutab funktsioonide kompositsiooni +- [ ] Panusta avatud lähtekoodile, parandades funktsioonide dokumentatsiooni +- [ ] Õpeta kedagi teist funktsioonidest ja erinevatest süntaksistiilidest +- [ ] Uuri JavaScripti funktsionaalse programmeerimise paradigmasid +- [ ] Loo isiklik teek taaskasutatavatest funktsioonidest tulevasteks projektideks + +### 🏆 **Lõplik funktsioonide meistrivõistluse kokkuvõte** + +**Tähista oma funktsioonide valdamist:** +- Milline on kõige kasulikum funktsioon, mida oled seni loonud? +- Kuidas on funktsioonidest õppimine muutnud sinu mõtlemist koodi organiseerimise kohta? +- Millist funktsiooni süntaksit eelistad ja miks? +- Millise päriselu probleemi lahendaksid funktsiooni kirjutamisega? + +```mermaid +journey + title Teie funktsiooni enesekindluse areng + section Täna + Sümboolika mõistmine segaduses: 3: Teie + Põhitõdede mõistmine: 4: Teie + Lihtsate funktsioonide kirjutamine: 5: Teie + section See nädal + Parameetrite kasutamine: 4: Teie + Väärtuste tagastamine: 5: Teie + Kaasaegne süntaks: 5: Teie + section Järgmine kuu + Funktsioonide koostamine: 5: Teie + Täiustatud mustrid: 5: Teie + Muude õpetamine: 5: Teie +``` +> 🎉 **Oled valdanud üht programmeerimise võimsamatest kontseptsioonidest!** Funktsioonid on suuremate programmide põhikomponendid. Iga rakendus, mida ehitad, kasutab funktsioone koodi organiseerimiseks, taaskasutamiseks ja struktureerimiseks. Sa mõistad nüüd, kuidas pakendada loogikat taaskasutatavatesse komponentidesse, mis teeb sinust tõhusama ja tulemuslikuma programmeerija. Tere tulemast modulaarse programmeerimise maailma! 🚀 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Tähelepanek**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, pidage meeles, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles tuleks võtta autoriteetse allikana. Kriitilise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta käesoleva tõlke kasutamisest tingitud arusaamatuste või valesti tõlgenduste eest. + \ No newline at end of file diff --git a/translations/et/2-js-basics/2-functions-methods/assignment.md b/translations/et/2-js-basics/2-functions-methods/assignment.md index 28b96b7c9..3da993adc 100644 --- a/translations/et/2-js-basics/2-functions-methods/assignment.md +++ b/translations/et/2-js-basics/2-functions-methods/assignment.md @@ -1,27 +1,82 @@ -# Lõbu funktsioonidega +# Fun with Functions ## Juhised -Loo erinevaid funktsioone, nii neid, mis tagastavad midagi, kui ka neid, mis ei tagasta midagi. +Selles ülesandes harjutad erinevate funktsioonitüüpide loomist, et tugevdada oma teadmisi JavaScripti funktsioonidest, parameetritest, vaikimisi väärtustest ja tagastamisavaldistest. -Proovi luua funktsioon, millel on segamini tavalised parameetrid ja parameetrid vaikimisi väärtustega. +Loo JavaScripti fail nimega `functions-practice.js` ja implementeeri järgmised funktsioonid: + +### Osa 1: Põhilised funktsioonid +1. **Loo funktsioon nimega `sayHello`**, mis ei võta mingeid parameetreid ja logib lihtsalt konsooli "Hello!". + +2. **Loo funktsioon nimega `introduceYourself`**, mis võtab `name` parameetri ja logib konsooli sõnumi nagu "Hi, my name is [name]". + +### Osa 2: Vaikimisi parameetritega funktsioonid +3. **Loo funktsioon nimega `greetPerson`**, mis võtab kaks parameetrit: `name` (nõutud) ja `greeting` (valikuline, vaikimisi väärtuseks "Hello"). Funktsioon peaks logima konsooli sõnumi nagu "[greeting], [name]!". + +### Osa 3: Funktsioonid, mis tagastavad väärtusi +4. **Loo funktsioon nimega `addNumbers`**, mis võtab kaks parameetrit (`num1` ja `num2`) ja tagastab nende summa. + +5. **Loo funktsioon nimega `createFullName`**, mis võtab parameetrid `firstName` ja `lastName` ning tagastab täisnime ühtse stringina. + +### Osa 4: Pane kõik kokku +6. **Loo funktsioon nimega `calculateTip`**, mis võtab kaks parameetrit: `billAmount` (nõutud) ja `tipPercentage` (valikuline, vaikimisi 15). Funktsioon peaks arvutama ja tagastama jootraha summa. + +### Osa 5: Testi oma funktsioone +Lisa funktsioonikõned enda funktsioonide testimiseks ja kuva tulemused `console.log()` abil. + +**Näidiskõned testimiseks:** +```javascript +// Testi oma funktsioone siin +sayHello(); +introduceYourself("Sarah"); +greetPerson("Alex"); +greetPerson("Maria", "Hi"); + +const sum = addNumbers(5, 3); +console.log(`The sum is: ${sum}`); + +const fullName = createFullName("John", "Doe"); +console.log(`Full name: ${fullName}`); + +const tip = calculateTip(50); +console.log(`Tip for $50 bill: $${tip}`); +``` ## Hindamiskriteeriumid -| Kriteerium | Silmapaistev | Piisav | Vajab parandamist | -| ---------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------------- | -| | Lahendus sisaldab kahte või enamat hästi toimivat funktsiooni mitmekesiste parameetritega | Töötav lahendus sisaldab ühte funktsiooni ja mõnda parameetrit | Lahenduses on vead | +| Kriteerium | Suurepärane | Piisav | Vajab parandamist | +| -------- | --------- | -------- | ----------------- | +| **Funktsioonide loomine** | Kõik 6 funktsiooni on õigesti implementeeritud ning kasutatud korrektset süntaksit ja nimetust | 4-5 funktsiooni on õigesti implementeeritud väikeste süntaksi probleemidega | 3 või vähem funktsiooni on implementeeritud või on suured süntaksivead | +| **Parameetrid ja vaikimisi väärtused** | Kasutatakse õigesti nõutud ja valikulisi parameetreid ning vaikimisi väärtusi vastavalt ülesandele | Parameetreid kasutatakse õigesti, kuid võib esineda probleeme vaikimisi väärtustega | Parameetrite kasutamine on vale või puudulik | +| **Tagastatavad väärtused** | Funktsioonid, mis peaksid väärtusi tagastama, teevad seda korrektselt, ning funktsioonid, mis väärtusi tagastama ei pea, täidavad ainult tegevusi | Enamik tagastatavaid väärtusi on õiged väikeste probleemidega | Suured probleemid tagastamisega | +| **Koodi kvaliteet** | Puhtalt kirjutatud, hästi organiseeritud kood tähenduslike muutujanimede ja õige taandega | Kood töötab, kuid võiks olla puhtam ja paremini organiseeritud | Koodi on raske lugeda või see on halvasti struktureeritud | +| **Testimine** | Kõik funktsioonid on piisavalt testitud ja tulemused kuvatakse selgelt | Enamik funktsioone on piisavalt testitud | Funktsioonide testimine on piiratud või vale | + +## Boonuskatsed (Valikuline) + +Kui soovid end veelgi proovile panna: + +1. **Loo noolefunktsiooni versioon** ühest oma funktsioonist +2. **Loo funktsioon, mis võtab parameetrina teise funktsiooni** (näiteks setTimeouti näited õppetükist) +3. **Lisa sisendi valideerimine**, et vältida vigaste sisendite põhjustatud probleeme + +--- + +> 💡 **Nõuanne**: Ära unusta avada oma brauseri arendajakonsooli (F12), et näha `console.log()` väljundeid! --- -**Lahtiütlus**: -See dokument on tõlgitud AI-tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsuse, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüdleme täpsuse poole, palun pange tähele, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument tema emakeeles tuleks pidada autoriteetseks allikaks. Tähtsa teabe puhul soovitatakse kasutada professionaali inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/2-js-basics/3-making-decisions/README.md b/translations/et/2-js-basics/3-making-decisions/README.md index 713d7f429..f3722cb03 100644 --- a/translations/et/2-js-basics/3-making-decisions/README.md +++ b/translations/et/2-js-basics/3-making-decisions/README.md @@ -1,202 +1,489 @@ -# JavaScripti põhialused: Otsuste tegemine +# JavaScripti alused: otsuste tegemine + +![JavaScripti alused - otsuste tegemine](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.et.png) + +> Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Sinu JavaScripti otsustamise seiklus + section Alus + Booleani väärtused: 5: You + Võrdlusoperaatorid: 4: You + Loogiline mõtlemine: 5: You + section Põhilised otsused + If-lauseid: 4: You + If-Else loogika: 5: You + Switch-lauseid: 4: You + section Täiustatud loogika + Loogilised operaatorid: 5: You + Keerulised tingimused: 4: You + Ternaaravaldised: 5: You +``` +Kas oled kunagi mõelnud, kuidas rakendused teevad nutikaid otsuseid? Näiteks kuidas navigatsioonisüsteem valib kiireima marsruudi või kuidas termostaat otsustab, millal kütte sisse lülitada? See on programmeerimise otsustamise põhikontseptsioon. -![JavaScripti põhialused - Otsuste tegemine](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.et.png) +Nii nagu Charles Babbage’i Analüütiline Masin oli loodud erinevaid toimingujadasid tingimustest lähtuvalt järgnema, peavad ka tänapäeva JavaScripti programmid tegema valikuid erinevate olukordade põhjal. See võime haruneda ja teha otsuseid muudab staatilise koodi vastutulelikeks ja intelligentseteks rakendusteks. -> Sketšimärkus: [Tomomi Imura](https://twitter.com/girlie_mac) +Selles õppetükis õpid, kuidas oma programmidesse tingimusloogikat rakendada. Uurime tingimuslauseid, võrdlusoperaatoreid ja loogilisi avaldisi, mis lubavad su koodil olukordi hinnata ja sobivalt reageerida. -## Loengu-eelne viktoriin +## Enne loengut test -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/11) +[Enne loengut test](https://ff-quizzes.netlify.app/web/quiz/11) -Otsuste tegemine ja koodi täitmise järjekorra kontrollimine muudab sinu koodi taaskasutatavaks ja vastupidavaks. Selles osas käsitletakse JavaScripti andmevoo kontrollimise süntaksit ja selle olulisust, kui seda kasutatakse koos Boole'i andmetüüpidega. +Võime otsuseid teha ja programmi voogu juhtida on programmeerimise aluseks. Selles osas käsitletakse, kuidas juhtida oma JavaScripti programmide täitmisteed, kasutades Boole väärtusi ja tingimusloogikat. [![Otsuste tegemine](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Otsuste tegemine") -> 🎥 Klõpsa ülaloleval pildil, et vaadata videot otsuste tegemise kohta. - -> Saad selle õppetunni läbida [Microsoft Learnis](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)! - -## Lühike ülevaade Boole'i väärtustest - -Boole'i väärtused võivad olla ainult kaks: `true` või `false`. Boole'i väärtused aitavad otsustada, millised koodiread peaksid täituma, kui teatud tingimused on täidetud. - -Määra oma Boole'i väärtus `true` või `false` järgmiselt: +> 🎥 Klõpsa ülaloleval pildil, et vaadata videot otsuste tegemisest. + +> Võid selle õppetüki läbida ka [Microsoft Learn'is](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)! + +```mermaid +mindmap + root((Otsuste tegemine)) + Boolean Logic + tõene/vale + Võrdlustulemused + Loogilised avaldised + Tingimuslaused + if laused + Üks tingimus + Koodi täitmine + if-else + Kaks rada + Alternatiivsed tegevused + switch + Mitmed valikud + Selge struktuur + Operaatorid + Võrdlus + === !== < > <= >= + Väärtuste suhted + Loogilised + && || ! + Tingimuste kombineerimine + Täiustatud mustrid + Ternaarne + ? : süntaks + Sisesed otsused + Keeruline loogika + Pesastatud tingimused + Mitmed kriteeriumid +``` +## Lühike ülevaade Boole'idest -`let myTrueBool = true` -`let myFalseBool = false` +Enne kui otsustamise juurde asume, meenutame eelmise õppetüki Boolean-väärtusi. Need väärtused, mille nimes on mõjuva matemaatik George Boole’i järgi, esindavad binaarseid olekuid – kas `true` ehk tõene või `false` ehk väär. Pole mingit kahtlust ega keskteed. -✅ Boole'i väärtused on nime saanud inglise matemaatiku, filosoofi ja loogiku George Boole'i (1815–1864) järgi. +Need binaarsed väärtused on kogu arvutusloogika aluseks. Iga otsus, mida su programm teeb, lõppeb Boolean-hinnanguga. -## Võrdlusoperaatorid ja Boole'i väärtused +Boolean-muutuja loomine on lihtne: -Operaatorid aitavad tingimusi hinnata, tehes võrdlusi, mis loovad Boole'i väärtuse. Järgnevalt on loetelu sageli kasutatavatest operaatoritest. +```javascript +let myTrueBool = true; +let myFalseBool = false; +``` -| Sümbol | Kirjeldus | Näide | -| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `<` | **Väiksem kui**: Võrdleb kahte väärtust ja tagastab Boole'i väärtuse `true`, kui vasakpoolne väärtus on väiksem kui parempoolne | `5 < 6 // true` | -| `<=` | **Väiksem või võrdne**: Võrdleb kahte väärtust ja tagastab Boole'i väärtuse `true`, kui vasakpoolne väärtus on väiksem või võrdne parempoolsega | `5 <= 6 // true` | -| `>` | **Suurem kui**: Võrdleb kahte väärtust ja tagastab Boole'i väärtuse `true`, kui vasakpoolne väärtus on suurem kui parempoolne | `5 > 6 // false` | -| `>=` | **Suurem või võrdne**: Võrdleb kahte väärtust ja tagastab Boole'i väärtuse `true`, kui vasakpoolne väärtus on suurem või võrdne parempoolsega | `5 >= 6 // false` | -| `===` | **Range võrdsus**: Võrdleb kahte väärtust ja tagastab Boole'i väärtuse `true`, kui parempoolne ja vasakpoolne väärtus on võrdsed JA sama andmetüübiga | `5 === 6 // false` | -| `!==` | **Ebaühtlus**: Võrdleb kahte väärtust ja tagastab vastupidise Boole'i väärtuse sellele, mida range võrdsusoperaator tagastaks | `5 !== 6 // true` | +See loob kaks muutujat, millel on selgelt määratud Boolean-väärtused. + +✅ Boole'id on nimetatud inglise matemaatiku, filosoofi ja loogiku George Boole’i (1815–1864) järgi. + +## Võrdlusoperaatorid ja Boole’id + +Praktikas ei määra Boolean-väärtusi tavaliselt käsitsi, vaid loome need tingimusi hinnates: „Kas see number on suurem kui see?“ või „Kas need väärtused on võrdsed?“ + +Võrdlusoperaatorid võimaldavad neid hinnanguid teha. Nad võrdlevad väärtusi ja tagastavad Boolean-tulemuse, tuginedes operandide omavahelisele suhtele. + +| Sümbol | Kirjeldus | Näide | +| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| `<` | **Väiksem kui**: Võrdleb kahte väärtust ja tagastab `true` kui vasak pool on parem kui parem pool | `5 < 6 // true` | +| `<=` | **Väiksem või võrdne**: Võrdleb kahte väärtust ja tagastab `true`, kui vasak pool on väiksem või võrdne parema poolega | `5 <= 6 // true` | +| `>` | **Suurem kui**: Võrdleb kahte väärtust ja tagastab true, kui vasak pool on suurem kui parem pool | `5 > 6 // false` | +| `>=` | **Suurem või võrdne**: Võrdleb kahte väärtust ja tagastab true, kui vasak pool on suurem või võrdne parema poolega | `5 >= 6 // false` | +| `===` | **Range võrdsus**: Võrdleb kahte väärtust ja tagastab true ainult siis, kui mõlemad pooled on võrdsed JA sama tüüpi | `5 === 6 // false`| +| `!==` | **Mittetäielik võrdsus**: Võrdleb kahte väärtust ja tagastab Boolean-väärtuse, mis on range võrdsuse vastand | `5 !== 6 // true` | + +✅ Kontrolli oma teadmisi kirjutades brauseri konsoolis mõningaid võrdlusi. Kas mõni tagastatud tulemus üllatab sind? + +```mermaid +flowchart LR + A["🔢 Väärtused"] --> B["⚖️ Võrdlus"] + B --> C["✅ Loogiline tulemus"] + + D["5"] --> E["< 6"] + E --> F["true"] + + G["10"] --> H["=== '10'"] + H --> I["false"] + + J["'tere'"] --> K["!== 'maailm'"] + K --> L["true"] + + M["📋 Operaatori tüübid"] --> M1["Võrdlus: === !=="] + M --> M2["Suhteline: < > <= >="] + M --> M3["Range vs Leebe"] + + style A fill:#e3f2fd + style C fill:#e8f5e8 + style M fill:#fff3e0 +``` +### 🧠 **Võrdluse valdamise kontroll: Boolean-loogika mõistmine** + +**Testi oma võrdlusoskust:** +- Miks arvad, et `===` (range võrdsus) on üldiselt eelistatum `==` (ülevalt leebem võrdsus) asemel? +- Mida teeb `5 === '5'`? Ent `5 == '5'`? +- Milline on vahe `!==` ja `!=` vahel? + +```mermaid +stateDiagram-v2 + [*] --> Comparison: Kaks väärtust + Comparison --> StrictEqual: === või !== + Comparison --> Relational: < > <= >= + + StrictEqual --> TypeCheck: Kontrolli tüüpi JA väärtust + Relational --> NumberCompare: Muuda numbriteks + + TypeCheck --> BooleanResult: tõene või väär + NumberCompare --> BooleanResult + + note right of StrictEqual + Eelistatud meetod + Tyüpimuundus puudub + end note + + note right of Relational + Kasulik vahemike jaoks + Numbrilised võrdlused + end note +``` +> **Näpunäide**: Kasuta alati `===` ja `!==` võrdluse tegemiseks, välja arvatud juhul, kui soovid just tüübi teisendust. See aitab vältida ootamatuid käitumisi! -✅ Kontrolli oma teadmisi, kirjutades mõned võrdlused oma brauseri konsooli. Kas mõni tagastatud väärtus üllatab sind? +## If lause -## If-lause +`if` lause on nagu koodis küsimuse esitamist: „Kui see tingimus on tõene, siis tee seda.“ See on ilmselt kõige olulisem vahend otsuste tegemisel JavaScriptis. -If-lause täidab koodi oma plokkide vahel, kui tingimus on tõene. +Näide, kuidas see töötab: ```javascript if (condition) { - //Condition is true. Code in this block will run. + // Tingimus on tõene. Selle ploki kood käivitatakse. } ``` - -Loogilisi operaatoreid kasutatakse sageli tingimuse moodustamiseks. + +Tingimus pannakse sulgudes, ja kui see on `true`, täidab JavaScript koodi koolonite sees. Kui see on `false`, siis see plokk jäetakse vahele. + +Tingimuste loomiseks kasutatakse tihti võrdlusoperaatoreid. Praktikas näeb see välja nii: ```javascript -let currentMoney; -let laptopPrice; +let currentMoney = 1000; +let laptopPrice = 800; if (currentMoney >= laptopPrice) { - //Condition is true. Code in this block will run. + // Tingimus on tõene. Selle ploki kood käivitatakse. console.log("Getting a new laptop!"); } ``` - -## If..Else-lause +Kuna `1000 >= 800` on `true`, täidetakse ploki sees olev kood ja konsooli kuvatakse "Getting a new laptop!". + +```mermaid +flowchart TD + A["🚀 Programm algab"] --> B{"💰 currentMoney >= laptopPrice?"} + B -->|true| C["🎉 'Uue sülearvuti hankimine!'"] + B -->|false| D["⏭️ Jäta koodiplokk vahele"] + C --> E["📋 Jätka programmi"] + D --> E + + F["📊 Kui lause struktuur"] --> F1["if (tingimus) {"] + F1 --> F2[" // kood, mis käivitatakse, kui tõene"] + F2 --> F3["}"] + + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#ffebee + style F fill:#e3f2fd +``` +## If..Else lause + +Aga mis sa teed, kui soovid programmi lasta teha midagi muud, kui tingimus on väär? Täpselt selle jaoks ongi `else` – see on nagu varuplaan. -`else`-lause täidab koodi oma plokkide vahel, kui tingimus on väär. See on valikuline koos `if`-lausega. +`else` lause lubab öelda: „kui see tingimus ei pea paika, tee hoopis see teine asi.“ ```javascript -let currentMoney; -let laptopPrice; +let currentMoney = 500; +let laptopPrice = 800; if (currentMoney >= laptopPrice) { - //Condition is true. Code in this block will run. + // Tingimus on tõene. Selles plokis olev kood käivitatakse. console.log("Getting a new laptop!"); } else { - //Condition is false. Code in this block will run. + // Tingimus on väär. Selles plokis olev kood käivitatakse. console.log("Can't afford a new laptop, yet!"); } ``` - -✅ Kontrolli oma arusaamist sellest koodist ja järgnevast koodist, käivitades selle brauseri konsoolis. Muuda `currentMoney` ja `laptopPrice` muutujate väärtusi, et muuta tagastatud `console.log()`. -## Switch-lause +Kuna `500 >= 800` on `false`, siis esimene plokk jäetakse vahele ja käivitatakse `else` plokk. Konsoolis kuvatakse "Can't afford a new laptop, yet!". + +✅ Testi selle ja järgneva koodi toimimist brauseri konsoolis. Muuda muutuja currentMoney ja laptopPrice väärtusi, et muuta konsooli poolt tagastatud `console.log()` sõnumit. + +### 🎯 **If-Else loogika kontroll: harunemisteed** + +**Hinda oma tingimusloogika mõistmist:** +- Mis juhtub, kui `currentMoney` on täpselt `laptopPrice` võrdne? +- Kas oskad välja mõelda mõne reaalse stsenaariumi, kus if-else loogika oleks kasulik? +- Kuidas võiksid laiendada seda, et katta mitu hinnaklassi? + +```mermaid +flowchart TD + A["🔍 Tingimuse hindamine"] --> B{"Kas tingimus on tõene?"} + B -->|Jah| C["📤 TINGIMUS IF täitmine"] + B -->|Ei| D["📥 TINGIMUS ELSE täitmine"] + + C --> E["✅ Üks tee valitud"] + D --> E + + F["🌐 Reaalmaailma näited"] --> F1["Kasutaja sisselogimise staatus"] + F --> F2["Vanuse kontroll"] + F --> F3["Vormi valideerimine"] + F --> F4["Mängu oleku muutused"] + + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#e3f2fd + style F fill:#f3e5f5 +``` +> **Oluline mõte**: If-else tagab, et valitakse täpselt üks tee. See garanteerib, et su programm reageerib igale tingimusele! + +## Switch lause + +Mõnikord pead võrdlema ühte väärtust mitme võimalusega. Kuigi võiksid kasutada mitut `if..else` lauset, muutub see kiiresti keeruliseks. `switch` lause pakub puhtamat struktuuri mitme konkreetse väärtuse käsitlemiseks. -`switch`-lause abil saab täita erinevaid tegevusi, lähtudes erinevatest tingimustest. Kasuta `switch`-lauset, et valida täitmiseks üks paljudest koodiplokkidest. +See kontseptsioon meenutab varasemaid mehaanilisi vahetussüsteeme telefonikeskustes – üks sisendväärtus määrab, millist konkreetset teed täitmine järgib. ```javascript switch (expression) { case x: - // code block + // koodiplokk break; case y: - // code block + // koodiplokk break; default: - // code block + // koodiplokk } ``` - + +Struktuur näeb välja järgmiselt: +- JavaScript hindab avaldist ühe korra +- Otsib kõikidest `case`-idest sobivat juhust +- Kui sobiv leitakse, täidetakse selle plokk +- `break` käsib JavaScriptil switch lausest väljuda +- Kui ühtki sobivat pole, täidetakse `default` plokk (kui see on olemas) + ```javascript -// program using switch statement -let a = 2; +// Programm, mis kasutab nädalapäeva jaoks switch-lauset +let dayNumber = 2; +let dayName; -switch (a) { +switch (dayNumber) { case 1: - a = "one"; + dayName = "Monday"; break; case 2: - a = "two"; + dayName = "Tuesday"; + break; + case 3: + dayName = "Wednesday"; break; default: - a = "not found"; + dayName = "Unknown day"; break; } -console.log(`The value is ${a}`); +console.log(`Today is ${dayName}`); ``` - -✅ Kontrolli oma arusaamist sellest koodist ja järgnevast koodist, käivitades selle brauseri konsoolis. Muuda muutuja `a` väärtusi, et muuta tagastatud `console.log()`. -## Loogilised operaatorid ja Boole'i väärtused +Selles näites näeb JavaScript, et `dayNumber` on `2`, leiab sobiva `case 2`, määrab `dayName` väärtuseks "Tuesday" ning katkestab switch-lausendi. Tulemuseks logitakse konsooli "Today is Tuesday". + +```mermaid +flowchart TD + A["📥 switch(väljend)"] --> B["🔍 Hinnake üks kord"] + B --> C{"Kas sobib juhtum 1?"} + C -->|Jah| D["📋 Täida juhtum 1"] + C -->|Ei| E{"Kas sobib juhtum 2?"} + E -->|Jah| F["📋 Täida juhtum 2"] + E -->|Ei| G{"Kas sobib juhtum 3?"} + G -->|Jah| H["📋 Täida juhtum 3"] + G -->|Ei| I["📋 Täida vaikimisi"] + + D --> J["🛑 katkesta"] + F --> K["🛑 katkesta"] + H --> L["🛑 katkesta"] + + J --> M["✅ Väljasta switch"] + K --> M + L --> M + I --> M + + style A fill:#e3f2fd + style B fill:#fff3e0 + style M fill:#e8f5e8 +``` +✅ Testi selle ja järgnevate koodide toimimist brauseri konsoolis. Muuda muutuja a väärtust, et muuta konsoolis välja toodud `console.log()`. -Otsused võivad nõuda rohkem kui ühte võrdlust ja neid saab siduda loogiliste operaatoritega, et luua Boole'i väärtus. +### 🔄 **Switch-lausendi valdamise kontroll: mitu valikut** -| Sümbol | Kirjeldus | Näide | -| ------ | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | -| `&&` | **Loogiline JA**: Võrdleb kahte Boole'i avaldist. Tagastab `true` **ainult**, kui mõlemad pooled on tõesed | `(5 > 6) && (5 < 6 ) //Üks pool on väär, teine tõene. Tagastab false` | -| `\|\|` | **Loogiline VÕI**: Võrdleb kahte Boole'i avaldist. Tagastab `true`, kui vähemalt üks pool on tõene | `(5 > 6) \|\| (5 < 6) //Üks pool on väär, teine tõene. Tagastab true` | -| `!` | **Loogiline EI**: Tagastab Boole'i avaldise vastupidise väärtuse | `!(5 > 6) // 5 ei ole suurem kui 6, kuid "!" tagastab true` | +**Testi switch-lausendi mõistmist:** +- Mis juhtub, kui unustad `break`? +- Millal kasutaksid `switch` lauset mitme `if-else` asemel? +- Miks on `default` plokk kasulik ka siis, kui arvad, et kõik juhtumid on kaetud? +```mermaid +pie title "Millal kasutada iga otsustusstruktuuri" + "Lihtne if-else" : 40 + "Keerulised if-else ahelad" : 25 + "Switch laused" : 20 + "Kolmikoperaatorid" : 15 +``` +> **Parim praktika**: Kasuta `switch` lauset ühe muutuja võrdlemiseks mitme konkreetse väärtusega. Kasuta `if-else` vahemike või keerukamate tingimuste jaoks! + +## Loogilised operaatorid ja Boole’id + +Keerulised otsused nõuavad tihti mitme tingimuse samaaegset hindamist. Nii nagu Boole algebra võimaldab matemaatikutel loogilisi avaldisi kombineerida, pakub programmeerimine loogilisi operaatorid mitme Boolean-tingimuse ühendamiseks. + +Need operaatorid lubavad keerukat tingimusloogikat, ühendades lihtsaid tõeväärtuste hinnanguid. + +| Sümbol | Kirjeldus | Näide | +| ------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------| +| `&&` | **Loogiline JA**: Võrdleb kahte Boole avaldist. Tagastab true **ainult** siis, kui mõlemad on tõesed | `(5 > 3) && (5 < 10) // Mõlemad on tõesed. Tagastab true` | +| `\|\|` | **Loogiline VÕI**: Võrdleb kahte Boole avaldist. Tagastab true, kui vähemalt üks pool on tõene | `(5 > 10) \|\| (5 < 10) // Üks pool väär, teine tõene. Tagastab true` | +| `!` | **Loogiline MITTE**: Tagastab Boolean-avaldise vastandtõeväärtuse | `!(5 > 10) // 5 ei ole suurem kui 10, seega "!" teeb selle tõeks` | + +Need operaatorid võimaldavad tingimusi kasulikult ühendada: +- JA (`&&`) tähendab, et mõlemad tingimused peavad olema tõesed +- VÕI (`||`) tähendab, et vähemalt üks tingimus peab olema tõene +- MITTE (`!`) pöörab tõeväärtuse ümber + +```mermaid +flowchart LR + A["🔗 Loogilised operaatorid"] --> B["&& JA"] + A --> C["|| VÕI"] + A --> D["! MITTE"] + + B --> B1["Mõlemad peavad olema tõesed"] + B --> B2["true && true = true"] + B --> B3["true && false = false"] + + C --> C1["Vähemalt üks tõene"] + C --> C2["true || false = true"] + C --> C3["false || false = false"] + + D --> D1["Väärtust pöörab"] + D --> D2["!true = false"] + D --> D3["!false = true"] + + E["🌍 Tõelised näited"] --> E1["Vanus >= 18 && onLuba"] + E --> E2["onNädalavahetus || onPuhkepäev"] + E --> E3["!poleLogitud"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` ## Tingimused ja otsused loogiliste operaatoritega -Loogilisi operaatoreid saab kasutada tingimuste moodustamiseks if..else-lause sees. +Vaatame neid loogilisi operaatorid praktilises näites: ```javascript -let currentMoney; -let laptopPrice; -let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off +let currentMoney = 600; +let laptopPrice = 800; +let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Sülearvuti hind 20 protsenti soodsam if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) { - //Condition is true. Code in this block will run. + // Tingimus on tõene. Selle ploki kood käivitatakse. console.log("Getting a new laptop!"); } else { - //Condition is true. Code in this block will run. + // Tingimus on väär. Selle ploki kood käivitatakse. console.log("Can't afford a new laptop, yet!"); } ``` - -### Eitusoperaator +Selles näites arvutatakse 20% soodushinnaga hind (640), seejärel kontrollitakse, kas meil on kas täielikult või soodushinnaga piisavalt raha katmiseks. Kuna 600 täidab soodushinna künnise 640 (st tingimus on tõene), hinnatakse tingimus tõeseks. + +### 🧮 **Loogika operaatoreid kontroll: tingimuste kombineerimine** + +**Testi enda arvamist loogiliste operaatorite kohta:** +- Avaldises `A && B`, mis juhtub, kui A on väär? Kas B-d hinnatakse üldse? +- Kas oskad mõelda olukorrale, kus kõik kolm operaatorit (&&, ||, !) on korraga vajalikud? +- Milline on vahe `!user.isActive` ja `user.isActive !== true` vahel? + +```mermaid +stateDiagram-v2 + [*] --> EvaluateA: A && B + EvaluateA --> CheckB: A on tõene + EvaluateA --> ReturnFalse: A on väär + CheckB --> ReturnTrue: B on tõene + CheckB --> ReturnFalse: B on väär + + [*] --> EvaluateC: A || B + EvaluateC --> ReturnTrue: A on tõene + EvaluateC --> CheckD: A on väär + CheckD --> ReturnTrue: B on tõene + CheckD --> ReturnFalse: B on väär + + note right of EvaluateA + Lühike kontroll: + Kui A on väär, siis B-d kunagi ei kontrollita + end note +``` +> **Tõhususe nipp**: JavaScript kasutab „lühikese tsükli hindamist“ – kui `A && B` juures on A väär, siis B-d ei hinnata. Kasuta seda enda kasuks! + +### Negatsiooni operaator -Oled seni näinud, kuidas `if...else`-lause abil saab luua tingimuslikku loogikat. Kõik, mis läheb `if`-lause sisse, peab hinduma tõene/väär. Kasutades `!`-operaatorit, saad avaldist _eitada_. See näeks välja järgmiselt: +Mõnikord on lihtsam mõelda, millal midagi EI OLE tõene. Näiteks selle asemel, et küsida „Kas kasutaja on sisse logitud?“, võiks küsida „Kas kasutaja EI OLE sisse logitud?“ Kutseis (`!`) pöörab loogika ümber. ```javascript if (!condition) { - // runs if condition is false + // käivitub, kui tingimus on vale } else { - // runs if condition is true + // käivitub, kui tingimus on tõene } ``` - -### Ternaaravaldised +`!` operaator tähendab "vastand...“ – kui midagi on `true`, teeb `!` selle `false` ja vastupidi. + +### Tingimusavaldised (ternary) -`if...else` ei ole ainus viis otsustusloogika väljendamiseks. Võid kasutada ka midagi, mida nimetatakse ternaaroperaatoriks. Selle süntaks näeb välja selline: +Lihtsate tingimuslike väärtuste määramiseks pakub JavaScript **ternary operaatorit**. See lühike süntaks võimaldab ükskord tingimusavaldis kirjutada ühel real, mis sobib hästi olukordadesse, kus tuleb valida kahe väärtuse vahel. ```javascript -let variable = condition ? : +let variable = condition ? returnThisIfTrue : returnThisIfFalse; ``` - -Allpool on konkreetsem näide: + +See loeb nagu küsimus: „Kas see tingimus kehtib? Jah? Kasuta seda väärtust. Ei? Kasuta teist väärtust.“ + +Järgnevalt on konkreetsem näide: ```javascript let firstNumber = 20; let secondNumber = 10; let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber; ``` - -✅ Võta hetk, et seda koodi paar korda lugeda. Kas saad aru, kuidas need operaatorid töötavad? -Ülaltoodu ütleb, et +✅ Võta hetk, et seda koodi mõne korra lugeda. Kas mõistad, kuidas need operaatorid töötavad? -- kui `firstNumber` on suurem kui `secondNumber` -- siis omista `firstNumber` väärtus `biggestNumber`-ile -- muidu omista `secondNumber`. +See rida ütleb: „Kas `firstNumber` on suurem kui `secondNumber`? Kui jah, paneb `firstNumber` muutujasse `biggestNumber`. Kui ei, siis paneb sinna `secondNumber`." -Ternaaravaldis on lihtsalt kompaktne viis alloleva koodi kirjutamiseks: +Ternary operaator on lihtsalt lühem klassikalisest `if..else` lausest: ```javascript let biggestNumber; @@ -206,31 +493,179 @@ if (firstNumber > secondNumber) { biggestNumber = secondNumber; } ``` - +Mõlemad meetodid annavad identse tulemuse. Ternary operaator on lühem ja kompaktsem, samas tavapärane if-else struktuur võib keerukamate tingimuste puhul olla loetavam. + +```mermaid +flowchart LR + A["🤔 Tingimusoperaator"] --> B["tingimus ?"] + B --> C["väärtusKuiTõene :"] + C --> D["väärtusKuiVäär"] + + E["📝 Traditsiooniline Kui-Siis"] --> F["kui (tingimus) {"] + F --> G[" tagasta väärtusKuiTõene"] + G --> H["} muidu {"] + H --> I[" tagasta väärtusKuiVäär"] + I --> J["}"] + + K["⚡ Millal Kasutada"] --> K1["Lihtsad omistamised"] + K --> K2["Lühikesed tingimused"] + K --> K3["Reasisesed otsused"] + K --> K4["Tagastuslausendid"] + + style A fill:#e3f2fd + style E fill:#fff3e0 + style K fill:#e8f5e8 +``` --- + + ## 🚀 Väljakutse -Loo programm, mis on algselt kirjutatud loogiliste operaatoritega, ja kirjuta see seejärel ümber, kasutades ternaaravaldisi. Milline süntaks sulle rohkem meeldib? +Loo programm, mis on esmalt kirjutatud loogiliste operaatoritega, seejärel kirjuta see ümber, kasutades ternary avaldist. Milline süntaks meeldib sulle rohkem? --- -## Loengu-järgne viktoriin +## GitHub Copilot Agent väljakutse 🚀 + +Kasuta Agent režiimi, et järgmist ülesannet lahendada: + +**Kirjeldus:** Loo põhjalik hindekuulaja, mis demonstreerib mitmeid selle õppetüki otsustusmõisteid, sealhulgas if-else lauseid, switch lauseid, loogilisi operaatorid ja ternary avaldisi. + +**Sisend:** Kirjuta JavaScripti programm, mis võtab õpilase numbrilise skoori (0-100) ja määrab tema tähthinde järgmisel alusel: +- A: 90-100 +- B: 80-89 +- C: 70-79 +- D: 60-69 +- F: Alla 60 -[Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/12) +Nõuded: +1. Kasuta tähthinde määramiseks if-else lauset +2. Kasuta loogilisi operaatorid, et kontrollida, kas õpilane läbib (hinne >= 60) JA omab kiitust (hinne >= 90) +3. Kasuta switch-lauset, et anda konkreetset tagasisidet iga tähehinde kohta +4. Kasuta ternaarset operaatorit, et määrata, kas õpilane on järgmise kursuse jaoks sobilik (hinne >= 70) +5. Lisa sisendi valideerimine, et veenduda, et hinne jääb vahemikku 0 kuni 100 -## Ülevaade ja iseseisev õppimine +Testeeri oma programmi erinevate hinnetega, kaasa arvatud äärmuslikud juhtumid nagu 59, 60, 89, 90 ja väärad sisendid. -Loe rohkem paljude operaatorite kohta, mis on kasutajale saadaval, [MDN-is](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators). +Lisateavet leiad siit: [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). -Tutvu Josh Comeau suurepärase [operaatorite otsinguga](https://joshwcomeau.com/operator-lookup/)! +## Loengu järel test -## Ülesanne +[Loengu järel test](https://ff-quizzes.netlify.app/web/quiz/12) + +## Kordamine ja iseseisev õpe + +Loe rohkem kasutajale kättesaadavate operaatorite kohta [MDN-is](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators). + +Tutvu Josh Comeau imelise [operaatorite ülevaatega](https://joshwcomeau.com/operator-lookup/)! + +## Kodutöö [Operaatorid](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file +## 🧠 **Sinu otsustusvahendite tööriistakasti kokkuvõte** + +```mermaid +graph TD + A["🎯 JavaScript Otsused"] --> B["🔍 Boole'i Loogika"] + A --> C["📊 Tingimuslause"] + A --> D["🔗 Loogilised Operaatorid"] + A --> E["⚡ Täiustatud Mustrid"] + + B --> B1["tõene/väär väärtused"] + B --> B2["Võrdlusoperaatorid"] + B --> B3["Tõeväärtuse kontseptsioonid"] + + C --> C1["if laused"] + C --> C2["if-else ahelad"] + C --> C3["switch laused"] + + D --> D1["&& (JA)"] + D --> D2["|| (VÕI)"] + D --> D3["! (MITTE)"] + + E --> E1["Kolmikhargne operaator"] + E --> E2["Lühilõikeline hindamine"] + E --> E3["Kompleksed tingimused"] + + F["💡 Võtmeprintsiibid"] --> F1["Selged loetavad tingimused"] + F --> F2["Järjepidev võrdlusstiil"] + F --> F3["Õige operaatori eelnevus"] + F --> F4["Tõhus hindamiskord"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` +--- + +## 🚀 Sinu JavaScripti otsustusoskuse ajatelg + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Harjuta võrdlusoperaatoreid oma brauseri konsoolis +- [ ] Kirjuta lihtne if-else lause, mis kontrollib sinu vanust +- [ ] Proovi väljakutset: kirjuta if-else ümber kasutades ternaarset operaatorit +- [ ] Testi, mis juhtub erinevate "tõeväärtuslike" ja "ebatõeväärtuslike" väärtustega + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida järeltest ja vaata üle segased kontseptsioonid +- [ ] Ehita täielik hinde arvutaja GitHub Copiloti väljakutse põhjal +- [ ] Loo lihtne otsustuspuu reaalse maailma stsenaariumile (näiteks riietuse valik) +- [ ] Harjuta mitme tingimuse ühendamist loogiliste operaatoritega +- [ ] Katseta erinevaid kasutusjuhtumeid switch-lausetega + +### 📅 **Sinu nädalane loogika meisterlikkus** +- [ ] Täida operaatorite kodutöö loovate näidetega +- [ ] Loo väike testirakendus, kasutades erinevaid tingimusstruktuure +- [ ] Loo vormi valideerija, mis kontrollib mitut sisendtingimust +- [ ] Harjuta Josh Comeau [operaatorite otsingut](https://joshwcomeau.com/operator-lookup/) +- [ ] Refaktoreeri olemasolevat koodi sobivamate tingimusstruktuuride kasutamiseks +- [ ] Õpi lühitsükli hindamist ja selle mõju jõudlusele + +### 🌟 **Sinu kuu pikkune areng** +- [ ] Valda keerukaid pesastatud tingimusi ja hoia koodi loetavus +- [ ] Ehita rakendus keeruka otsustusloogikaga +- [ ] Panusta avatud lähtekoodi, parandades tingimusloogikat olemasolevates projektides +- [ ] Õpeta kedagi teist erinevate tingimusstruktuuride kohta ja nende kasutusajal +- [ ] Uuri funktsionaalprogrammeerimise lähenemisi tingimusloogikale +- [ ] Loo isiklik viide tingimuste parimatele praktikatele + +### 🏆 **Lõplik otsustusoskuse meistrikontroll** + +**Tähista oma loogilise mõtlemise valdamist:** +- Millise kõige keerukama otsustusloogika oled edukalt rakendanud? +- Milline tingimusstruktuur tundub sulle kõige loomulikum ja miks? +- Kuidas on õppimine loogiliste operaatorite kohta muutnud sinu probleemide lahendamise lähenemist? +- Milline reaalmaailma rakendus võiks kasu saada keerukast otsustusloogikast? + +```mermaid +journey + title Sinu loogilise mõtlemise areng + section Täna + Boole'i segadus: 3: You + If-Else mõistmine: 4: You + Operaatori äratundmine: 5: You + section Selle nädala jooksul + Komplekssed tingimused: 4: You + Switchi valdamine: 5: You + Loogilised kombinatsioonid: 5: You + section Järgmine kuu + Edasijõudnud mustrid: 5: You + Töökindluse teadlikkus: 5: You + Teiste õpetamine: 5: You +``` +> 🧠 **Oled valdanud digitaalse otsustamise kunsti!** Iga interaktiivne rakendus tugineb tingimusloogikale, et targalt reageerida kasutaja tegevustele ja muutuvale olukorrale. Nüüd mõistad, kuidas panna oma programmid mõtlema, hindama ja valima sobivaid vastuseid. See loogiline alus annab jõu kõigile dünaamilistele rakendustele, mida ehitad! 🎉 + +--- + + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi me püüame täpsust, tuleb arvestada, et automaatsetes tõlgetes võib esineda vigu või ebatäpsusi. Originaaldokument selle algkeeles tuleb pidada autoriteetseks allikaks. Kriitilise informatsiooni puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või väärinterpreteerimiste eest. + \ No newline at end of file diff --git a/translations/et/2-js-basics/3-making-decisions/assignment.md b/translations/et/2-js-basics/3-making-decisions/assignment.md index 8d180804b..838dba702 100644 --- a/translations/et/2-js-basics/3-making-decisions/assignment.md +++ b/translations/et/2-js-basics/3-making-decisions/assignment.md @@ -1,54 +1,120 @@ -# Operaatorid +# Otsuste tegemine: õpilaste hinnete töötleja -## Juhised +## Õpieesmärgid -Katseta operaatoritega. Siin on soovitus programmiks, mida saad rakendada: +Selles ülesandes harjutad selle tunni otsustamise kontseptsioone, luues programmi, mis töötleb õpilaste hindeid erinevatest hindamissüsteemidest. Kasutad `if...else` lauseid, võrdlusoperaatoreid ja loogikaoperaatoreid, et määrata, millised õpilased kursuse sooritavad. -Sul on kaks erinevat hindamissüsteemi, mida kasutatakse õpilaste jaoks. +## Väljakutse -### Esimene hindamissüsteem +Sa töötad koolis, mis hiljuti ühines teise asutusega. Nüüd pead töötlema õpilaste hindeid kahest täiesti erinevast hindamissüsteemist ja määrama, millised õpilased on kursusest läbi saanud. See on ideaalne võimalus harjutada tingimusloogikat! -Üks hindamissüsteem määratleb hinded vahemikus 1–5, kus 3 ja kõrgem tähendavad, et õpilane läbib kursuse. +### Hindamissüsteemide mõistmine -### Teine hindamissüsteem +#### Esimene hindamissüsteem (numbriline) +- Hinded antakse arvudena vahemikus 1-5 +- **Läbijate hinne**: 3 ja üleval (3, 4 või 5) +- **Ebaõnnestumise hinne**: Alla 3 (1 või 2) -Teises hindamissüsteemis on järgmised hinded: `A, A-, B, B-, C, C-`, kus `A` on parim hinne ja `C` on madalaim läbiv hinne. +#### Teine hindamissüsteem (tähthinded) +- Hinded on tähed: `A`, `A-`, `B`, `B-`, `C`, `C-` +- **Läbijad**: `A`, `A-`, `B`, `B-`, `C`, `C-` (kõik nimetatud hinded on läbivad) +- **Märkus**: selles süsteemis pole ebaõnnestunud hindeid nagu `D` või `F` -### Ülesanne +### Sinu ülesanne -Arvestades järgmist massiivi `allStudents`, mis esindab kõiki õpilasi ja nende hindeid, loo uus massiiv `studentsWhoPass`, mis sisaldab kõiki õpilasi, kes läbivad kursuse. - -> NIPP: kasuta for-tsüklit, if...else tingimusi ja võrdlusoperaatoreid: +Võttes arvesse järgmist massiivi `allStudents`, mis sisaldab kõiki õpilasi ja nende hindeid, koosta uus massiiv `studentsWhoPass`, kuhu kuuluvad kõik õpilased, kes oma vastava hindamissüsteemi järgi läbi saavad. ```javascript let allStudents = [ - 'A', - 'B-', - 1, - 4, - 5, - 2 -] + 'A', // Tähtede hinnang - läbinud + 'B-', // Tähtede hinnang - läbinud + 1, // Numbriline hinnang - ebaõnnestunud + 4, // Numbriline hinnang - läbinud + 5, // Numbriline hinnang - läbinud + 2 // Numbriline hinnang - ebaõnnestunud +]; let studentsWhoPass = []; ``` +### Samm-sammuline lähenemine + +1. **Sea üles tsükkel**, mis läbib iga hinde `allStudents` massiivis +2. **Kontrolli hinde tüüpi** (kas see on number või string?) +3. **Kohalda sobivaid hindamissüsteemi reegleid**: + - Kui number: kontrolli, kas hinne >= 3 + - Kui string: vaata, kas see on üks lubatud läbivate tähthindade seast +4. **Lisa läbivad hinded** massiivi `studentsWhoPass` + +### Kasulikud kooditehnikad + +Kasuta järgmisi JavaScripti mõisteid sellest tunnist: + +- **typeof operaator**: `typeof grade === 'number'` kontrollimaks, kas tegemist on numbrilise hinde või mitte +- **Võrdlusoperaatorid**: `>=` numbriliste hinnete võrdlemiseks +- **Loogikaoperaatorid**: `||` mitme tähthinde tingimuse kontrollimiseks +- **if...else laused**: erinevate hindamissüsteemide käsitlemiseks +- **Massiivi meetodid**: `.push()` läbivate hinnete lisamiseks uude massiivi + +### Oodatav väljund + +Kui käivitad programmi, peaks `studentsWhoPass` sisaldama: `['A', 'B-', 4, 5]` + +**Miks need hinded läbivad:** +- `'A'` ja `'B-'` on kehtivad tähthinded (kõik selles süsteemis olevad tähthinded on läbivad) +- `4` ja `5` on numbrilised hinded ≥ 3 +- `1` ja `2` ei läbi, sest need on numbrilised hinnetega < 3 + +## Oma lahenduse testimine + +Testeeri oma koodi erinevate stsenaariumitega: + +```javascript +// Testi erinevate hinnete kombinatsioonidega +let testGrades1 = ['A-', 3, 'C', 1, 'B']; +let testGrades2 = [5, 'A', 2, 'C-', 4]; + +// Sinu lahendus peaks toimima mis tahes kehtivate hinnete kombinatsiooniga +``` + +## Lisaväljakutsed + +Kui oled põhiülesandega valmis saanud, proovi neid laiendusi: + +1. **Lisa valideerimine**: Kontrolli kehtetuid hindeid (negatiivsed numbrid või kehtetud tähed) +2. **Arvuta statistikat**: Loenda, kui palju õpilasi läbi saavad vs. ebaõnnestuvad +3. **Hindede teisendamine**: Muuda kõik hinded ühtseks numbriliseks süsteemiks (A=5, B=4, C=3 jne) + ## Hindamiskriteeriumid -| Kriteerium | Näidislik lahendus | Piisav lahendus | Vajab parandamist | -| ---------- | ----------------------------- | ----------------------------- | ------------------------------- | -| | Esitatakse täielik lahendus | Esitatakse osaline lahendus | Esitatakse vigadega lahendus | +| Kriteerium | Suurepärane (4) | Korralik (3) | Arendamisel (2) | Algajatase (1) | +|------------|-----------------|--------------|-----------------|----------------| +| **Funktsionaalsus** | Programm tuvastab korrektselt kõik läbivad hinded mõlemast süsteemist | Programm töötab väikeste probleemide või äärmusjuhtudega | Programm töötab osaliselt, kuid sisaldab loogikavigu | Programmil on olulised vead või see ei tööta | +| **Koodi ülesehitus** | Puhas ja hästi organiseeritud kood õigete if...else tingimuslausega | Hea ülesehitus sobivate tingimuslausete kasutusega | Aktsepteeritav struktuur, mõned korraldusprobleemid | Halb ülesehitus, raskesti jälgitav loogika | +| **Kontseptsioonide kasutamine** | Tõhusalt kasutab võrdlusoperaatoreid, loogikaoperaatoreid ja tingimuslauseid | Hea kasutus tunni mõistetest väikeste puudustega | Mõningane kasutus, kuid puuduvad olulised elemendid | Piiratud kontseptsioonide kasutus | +| **Probleemilahendus** | Näitab selget arusaama probleemist ja elegantset lahendust | Hea probleemilahenduse lähenemine tugeva loogikaga | Rahuldav probleemilahendus mõningase segadusega | Ebaselge lähenemine, puudub arusaamine | + +## Töö esitamise juhised + +1. **Testeeri oma koodi** põhjalikult antud näidetega +2. **Lisa kommentaarid**, mis selgitavad sinu loogikat, eriti tingimuslausete puhul +3. **Kontrolli tulemusi**, mis peavad vastama ootustele: `['A', 'B-', 4, 5]` +4. **Arvesta äärmusjuhtumeid**, näiteks tühjad massiivid või ootamatud andmetüübid + +> 💡 **Nõuanne**: Alusta lihtsalt! Alusta põhilise funktsionaalsuse käima saamisest, seejärel lisa keerukamaid funktsioone. Peamine on harjutada otsustusloogikat, kasutades selle tunni vahendeid. --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles tuleks pidada usaldusväärseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tekkida võivate arusaamatuste või väärtõlgenduste eest. + \ No newline at end of file diff --git a/translations/et/2-js-basics/4-arrays-loops/README.md b/translations/et/2-js-basics/4-arrays-loops/README.md index ac5bc1249..42a0a3e62 100644 --- a/translations/et/2-js-basics/4-arrays-loops/README.md +++ b/translations/et/2-js-basics/4-arrays-loops/README.md @@ -1,147 +1,751 @@ -# JavaScript'i põhialused: massiivid ja tsüklid +# JavaScript Põhitõed: Massiivid ja Tsüklid + +![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.et.png) +> Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Sinu maatriksite ja tsüklite seiklus + section Maatriksite alused + Maatriksite loomine: 5: You + Elementide ligipääs: 4: You + Maatriksite meetodid: 5: You + section Tsükli valdamine + For-tsüklid: 4: You + While-tsüklid: 5: You + Kaasaegne süntaks: 4: You + section Andmetöötlus + Maatriks + tsüklid: 5: You + Reaalmaailma rakendused: 4: You + Tulemuslikkuse optimeerimine: 5: You +``` +## Eel-loengu viktoriin +[Eel-loengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/13) + +Kas oled kunagi mõelnud, kuidas veebilehed hoiavad ostukorvi üksusi või kuvavad sinu sõprade nimekirja? Siin tulevad mängu massiivid ja tsüklid. Massiivid on nagu digitaalsed anumad, mis hoiavad mitut informatsioonitükki, samas kui tsüklid võimaldavad sul kõigi nende andmetega tõhusalt töötada ilma korduvalt koodi kirjutamata. + +Need kaks kontseptsiooni moodustavad koos aluse info haldamiseks sinu programmides. Õpid liiguma käsitsi iga sammu välja kirjutamisest nutika ja tõhusa koodi loomisele, mis suudab kiiresti töödelda sadu või isegi tuhandeid elemente. + +Selle tunni lõpuks mõistad, kuidas saavutada keerukaid andmetöötlusi vaid mõne koodireaga. Avastame need olulised programmeerimise mõisted. + +[![Massiivid](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays") + +[![Tsüklid](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops") + +> 🎥 Vajuta ülalolevatele piltidele massiivide ja tsüklite videoteks. + +> Selle tunni leiad ka [Microsoft Learn platvormilt](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)! + +```mermaid +mindmap + root((Andmetöötlus)) + Arrays + Structure + Ruutkõrvade süntaks + Nullist alustav indekseerimine + Dünaamiline suurus + Operations + push/pop + shift/unshift + indexOf/includes + Types + Numbrite massiiv + Stringide massiiv + Segatüübid + Loops + For Loops + Iteratsioonide lugemine + Massiivi töötlemine + Ennustatav voog + While Loops + Tingimusest lähtuv + Teadmata iteratsioonid + Kasutaja sisend + Modern Syntax + for...of + forEach + Funktsionaalsed meetodid + Applications + Data Analysis + Statistika + Filtreerimine + Muundamised + User Interfaces + Listid + Menüüed + Galeriid +``` +## Massiivid -![JavaScript'i põhialused - massiivid](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.et.png) -> Sketchnote autor: [Tomomi Imura](https://twitter.com/girlie_mac) +Mõtle massiive kui digitaalsele dokumendikapisüsteemile - selle asemel, et hoida ühte dokumenti ühes sahtlis, saad paigutada mitu seotud eset ühte struktureeritud anumasse. Programmeerimise seisukohast võimaldab massiiv sul talletada mitmeid informatsiooni tükke ühes organiseeritud pakendis. -## Loengu-eelne viktoriin -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/13) +Olgu tegemist fotogaleriiga, ülesannete nimekirja haldamise või mängu kõrgete tulemuste jälgimisega – massiivid annavad andmete organiseerimise aluse. Vaatame, kuidas need töötavad. -See õppetund käsitleb JavaScript'i põhialuseid, mis on veebilehtede interaktiivsuse aluseks. Selles õppetükis õpid tundma massiive ja tsükleid, mida kasutatakse andmete töötlemiseks. +✅ Massiivid on kõikjal meie ümber! Kas suudad mõelda reaalset näidet massiivile, nagu näiteks päikesepaneelide ansambel? -[![Massiivid](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Massiivid") +### Massiivide loomine -[![Tsüklid](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Tsüklid") +Massiivi loomine on väga lihtne – kasuta lihtsalt nurksulgusid! -> 🎥 Klõpsa ülaltoodud piltidel, et vaadata videoid massiivide ja tsüklite kohta. +```javascript +// Tühi massiiv - nagu tühi ostukorv, mis ootab esemeid +const myArray = []; +``` -> Selle õppetunni leiad ka [Microsoft Learnist](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)! +**Mis siin toimub?** +Oled just loonud tühja anuma, kasutades neid nurksulgusid `[]`. Mõtle sellele nagu tühjale raamatukapi riiulile – see on valmis hoidma kõiki raamatuid, mida soovid seal organiseerida. -## Massiivid +Samuti võid algväärtustega massiivi täita kohe alguses: -Andmetega töötamine on igas programmeerimiskeeles tavaline ülesanne ja see on palju lihtsam, kui andmed on organiseeritud struktuursesse formaati, näiteks massiividesse. Massiivides salvestatakse andmed struktuuri, mis sarnaneb loendiga. Üks massiivide suur eelis on see, et ühes massiivis saab salvestada erinevat tüüpi andmeid. +```javascript +// Teie jäätisepoe maitsete menüü +const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; -✅ Massiivid on meie ümber kõikjal! Kas oskad mõelda mõnele päriselulisele massiivi näitele, näiteks päikesepaneelide massiiv? +// Kasutaja profiili info (erinevate andmetüüpide segamine) +const userData = ["John", 25, true, "developer"]; -Massiivi süntaksiks on paar nurksulge. +// Teie lemmikkursuse testitulemused +const scores = [95, 87, 92, 78, 85]; +``` -```javascript -let myArray = []; +**Huviäratavad punktid:** +- Saad hoida samas massiivis teksti, numbreid või isegi tõene/väär väärtusi +- Eralda iga element koma abil – lihtne! +- Massiivid on ideaalsed seotud info kokkuhoidmiseks + +```mermaid +flowchart LR + A["📦 Massiivid"] --> B["Loo [ ]"] + A --> C["Salvesta mitut elementi"] + A --> D["Juurdepääs indeksi järgi"] + + B --> B1["const arr = []"] + B --> B2["const arr = [1,2,3]"] + + C --> C1["Numbrid"] + C --> C2["Stringid"] + C --> C3["Booledad"] + C --> C4["Segatüübid"] + + D --> D1["arr[0] = esimene"] + D --> D2["arr[1] = teine"] + D --> D3["arr[2] = kolmas"] + + E["📊 Massiivi indeks"] --> E1["Indeks 0: Esimene"] + E --> E2["Indeks 1: Teine"] + E --> E3["Indeks 2: Kolmas"] + E --> E4["Indeks n-1: Viimane"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 ``` +### Massiivi indeksimine -See on tühi massiiv, kuid massiivid saab deklareerida ka juba andmetega täidetuna. Massiivis eraldatakse väärtused üksteisest komaga. +Siin on miskit, mis esialgu võib tunduda ebatavaline: massiivid nummerdavad oma elemendid alates nullist, mitte ühest. See nullipõhine indekseerimine tuleneb sellest, kuidas arvutimälu töötab – see on olnud programmeerimiskonventsioon juba arvutikeelte algusaegadest, nagu C keel. Iga massiivi koht saab enda aadressi numbri, mida nimetatakse **indeksiks**. -```javascript -let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; -``` +| Indeks | Väärtus | Kirjeldus | +|-------|---------|-----------| +| 0 | "Šokolaad" | Esimene element | +| 1 | "Maasikas" | Teine element | +| 2 | "Vannill" | Kolmas element | +| 3 | "Pistaatsia" | Neljas element | +| 4 | "Rocky Road" | Viies element | -Massiivi väärtustele määratakse unikaalne väärtus, mida nimetatakse **indeksiks** – täisarv, mis määratakse vastavalt kaugusele massiivi algusest. Ülaltoodud näites on stringiväärtuse "Chocolate" indeks 0 ja "Rocky Road" indeks on 4. Kasuta indeksit koos nurksulgudega, et massiivi väärtusi kätte saada, muuta või lisada. +✅ Kas sind üllatab, et massiivid algavad nullindeksist? Mõnes programmeerimiskeeles algavad indeksid ühest. Sellel on joon päris huvitavat ajalugu, mille kohta saad lugeda [Wikipedia artiklist](https://en.wikipedia.org/wiki/Zero-based_numbering). -✅ Kas sind üllatab, et massiivid algavad nullindeksist? Mõnes programmeerimiskeeles algavad indeksid 1-st. Sellel on huvitav ajalugu, mida saad [lugeda Wikipediast](https://en.wikipedia.org/wiki/Zero-based_numbering). +**Massiivi elementidele ligipääs:** ```javascript -let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; -iceCreamFlavors[2]; //"Vanilla" +const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; + +// Juurdepääs üksikutele elementidele sulgude märgistuse abil +console.log(iceCreamFlavors[0]); // "Šokolaad" - esimene element +console.log(iceCreamFlavors[2]); // "Vanilje" - kolmas element +console.log(iceCreamFlavors[4]); // "Rocky Road" - viimane element ``` -Indeksit saab kasutada väärtuse muutmiseks, näiteks nii: +**Mis siin toimub:** +- **Kasutab** nurksulgusid koos indeksi numbriga elementide kättesaamiseks +- **Tagastab** selle konkreetse positsiooniga seotud väärtuse +- **Loendab** algusest nullist, muutes esimese elemendi indeksiks 0 + +**Massiivi elementide muutmine:** ```javascript -iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan" +// Muuda olemasolevat väärtust +iceCreamFlavors[4] = "Butter Pecan"; +console.log(iceCreamFlavors[4]); // "Võipähkel" + +// Lisa uus element lõppu +iceCreamFlavors[5] = "Cookie Dough"; +console.log(iceCreamFlavors[5]); // "Küpsisetainas" ``` -Ja uue väärtuse lisamiseks kindlale indeksile nii: +**Ülaltoodud näites:** +- **Muudeti** 4. indeksil olev element "Rocky Road" -> "Butter Pecan" +- **Lisati** uus element "Cookie Dough" 5. indeksile +- **Pikendas** automaatselt massiivi pikkust, kui lisada väljaspool praegust vahemikku + +### Massiivi pikkus ja sagedased meetodid + +Massiivid sisaldavad sisseehitatud omadusi ja meetodeid, mis aitavad andmetega tööd palju lihtsamaks teha. + +**Massiivi pikkuse leidmine:** ```javascript -iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough" +const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +console.log(iceCreamFlavors.length); // 5 + +// Pikkus uuendub automaatselt, kui massiiv muutub +iceCreamFlavors.push("Mint Chip"); +console.log(iceCreamFlavors.length); // 6 ``` -✅ Levinum viis väärtuste lisamiseks massiivi on kasutada massiivi operaatoreid, näiteks array.push(). +**Olulised punktid:** +- **Tagastab** massiivi elementide koguarvu +- **Uuendab** automaatselt elementide lisamisel või eemaldamisel +- **Pakkub** dünaamilist arvu, mis sobib tsüklite ja kontrollide jaoks -Et teada saada, mitu elementi massiivis on, kasuta `length` omadust. +**Olulised massiivi meetodid:** ```javascript -let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; -iceCreamFlavors.length; //5 +const fruits = ["apple", "banana", "orange"]; + +// Lisa elemendid +fruits.push("grape"); // Lisab lõppu: ["õun", "banaan", "apelsin", "viinamari"] +fruits.unshift("strawberry"); // Lisab algusse: ["maasikas", "õun", "banaan", "apelsin", "viinamari"] + +// Eemalda elemendid +const lastFruit = fruits.pop(); // Eemaldab ja tagastab "viinamari" +const firstFruit = fruits.shift(); // Eemaldab ja tagastab "maasikas" + +// Leia elemendid +const index = fruits.indexOf("banana"); // Tagastab 1 (positsioon "banaanil") +const hasApple = fruits.includes("apple"); // Tagastab tõene ``` -✅ Proovi ise! Loo ja muuda oma loodud massiivi oma brauseri konsoolis. +**Nende meetodite mõistmine:** +- **Lisa** elemente `push()` (lõppu) ja `unshift()` (alguses) +- **Eemalda** elemente `pop()` (lõpp) ja `shift()` (algus) +- **Leia** elemente `indexOf()` abil ja kontrolli olemasolu `includes()` abil +- **Tagastab** kasulikke väärtusi, nagu eemaldatud elemendid või positsioonide indeksid + +✅ Proovi ise! Kasuta oma brauseri konsooli, et luua ja muuta oma massiivi. + +### 🧠 **Massiivi põhiteadmiste kontroll: Andmete organiseerimine** + +**Testi oma massiivi mõistmist:** +- Miks, sinu arvates, loendavad massiivid elemente nullist, mitte ühest? +- Mis juhtub, kui püüad juurde pääseda indeksile, mis puudub (nt `arr[100]` 5-elemendilises massiivis)? +- Kas suudad välja mõelda kolm päriselulist olukorda, kus massiivid on kasulikud? + +```mermaid +stateDiagram-v2 + [*] --> EmptyArray: const arr = [] + EmptyArray --> WithItems: Lisa elemendid + WithItems --> Accessing: Kasuta indekseid + Accessing --> Modifying: Muuda väärtusi + Modifying --> Processing: Kasuta meetodeid + + WithItems --> WithItems: push(), unshift() + Processing --> Processing: pop(), shift() + + note right of Accessing + Nullist arvestatud indeksid + arr[0] = esimene element + end note + + note right of Processing + Sisseehitatud meetodid + Dünaamilised toimingud + end note +``` +> **Reaalne vaatekoht**: Massiivid on programmeerimises kõikjal! Sotsiaalmeedia uudisvood, ostukorvid, fotogaleriid, muusikapleilistides olevad laulud – kõik on tegelikult massiivid! ## Tsüklid -Tsüklid võimaldavad meil teha korduvaid või **iteratiivseid** ülesandeid, säästes sellega aega ja koodi. Iga iteratsioon võib erineda oma muutujate, väärtuste ja tingimuste poolest. JavaScript'is on erinevat tüüpi tsükleid, millel on väikesed erinevused, kuid mis sisuliselt teevad sama asja: kordavad andmeid. - +Mõtle Charles Dickensi romaanidesse tuntud karistusele, kus õpilased pidid korduvalt tahvlile lauseid kirjutama. Kujuta ette, et saaksid lihtsalt käsu anda: "kirjuta see lause 100 korda," ja see saab automaatselt tehtud. Just nii töötavad tsüklid sinu koodis. + +Tsüklid on nagu väsimatu assistent, kes saab ülesandeid korduvalt ja veatult täita. Olgu vajadus vaadata üle iga ostukorvi element või kuvada kõik albumi pildid – tsüklid juhivad korduval tegevusel tõhusalt. + +JavaScript pakub mitu erinevat tsükli tüüpi. Vaatame igaüht ja mõistame, millal neid kasutada. + +```mermaid +flowchart TD + A["🔄 Silmuste tüübid"] --> B["For-tsükkel"] + A --> C["While-tsükkel"] + A --> D["For...of-tsükkel"] + A --> E["forEach meetod"] + + B --> B1["Tuntud kordused"] + B --> B2["Loenduril põhinev"] + B --> B3["for(init; condition; increment)"] + + C --> C1["Tundmatud kordused"] + C --> C2["Tingimusel põhinev"] + C --> C3["while(condition)"] + + D --> D1["Moodne ES6+"] + D --> D2["Massiivi iteratsioon"] + D --> D3["for(item of array)"] + + E --> E1["Funktsionaalne stiil"] + E --> E2["Massiivi meetod"] + E --> E3["array.forEach(callback)"] + + F["⏰ Millal kasutada"] --> F1["For: Lugemine, indeksid"] + F --> F2["While: Kasutaja sisend, otsimine"] + F --> F3["For...of: Lihtne iteratsioon"] + F --> F4["forEach: Funktsionaalne programmeerimine"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` ### For-tsükkel -`for`-tsükkel vajab iteratsiooniks kolme osa: -- `counter` Muutuja, mis tavaliselt algab numbriga ja loendab iteratsioonide arvu -- `condition` Avaldis, mis kasutab võrdlusoperaatoreid, et tsükkel peatuks, kui see muutub `false` -- `iteration-expression` Käivitatakse iga iteratsiooni lõpus, tavaliselt kasutatakse loenduri väärtuse muutmiseks - +`for` tsükkel on nagu taimeri sisselülitamine – sa tead täpselt, mitu korda midagi teha tahad. See on väga organiseeritud ja ettearvatav, mis teeb selle ideaalseks massiividega töötamisel või kui pead midagi lugema. + +**For-tsükli struktuur:** + +| Komponent | Eesmärk | Näide | +|-----------|---------|--------| +| **Initsialiseerimine** | Alguspunkti määramine | `let i = 0` | +| **Tingimus** | Millal jätkata | `i < 10` | +| **Inkrement** | Kuidas uuendada | `i++` | + ```javascript -// Counting up to 10 +// Loendamine nullist üheksani for (let i = 0; i < 10; i++) { - console.log(i); + console.log(`Count: ${i}`); +} + +// Praktilisem näide: skooride töötlemine +const testScores = [85, 92, 78, 96, 88]; +for (let i = 0; i < testScores.length; i++) { + console.log(`Student ${i + 1}: ${testScores[i]}%`); } ``` -✅ Käivita see kood brauseri konsoolis. Mis juhtub, kui teed loenduri, tingimuse või iteratsiooni avaldise osas väikeseid muudatusi? Kas saad selle panna tagurpidi töötama, luues tagasiloenduse? +**Samm-sammult, siin toimub:** +- **Initsialiseerib** loendurimuutuja `i` väärtusega 0 alguses +- **Kontrollib** tingimust `i < 10` iga iteratsiooni eel +- **Täidab** koodiploki, kui tingimus on tõene +- **Suurendab** `i` ühe võrra pärast iga iteratsiooni `i++` abil +- **Lõpetab**, kui tingimus muutub vääraks (kui `i` jõuab 10-ni) + +✅ Käivita see kood brauseri konsoolis. Mis juhtub, kui teed väikseid muudatusi loenduris, tingimuses või iteratsiooniväljendis? Kas saad panna tsükli töötama tagurpidi, luues loendamise allapoole? + +### 🗓️ **For-tsükli oskuslikkus: Kontrollitud kordused** + +**Hinda oma for-tsükli arusaamist:** +- Millest koosneb for-tsükkel ja mida iga osa teeb? +- Kuidas teha tagurpidi massiivilist läbitöötamist? +- Mis juhtub, kui unustad inkrementosa (`i++`)? + +```mermaid +flowchart TD + A["🚀 Alusta For tsüklit"] --> B["Algväärtusta: let i = 0"] + B --> C{"Tingimus: i < array.length?"} + C -->|true| D["Täida koodiblokk"] + D --> E["Suurenda: i++"] + E --> C + C -->|false| F["✅ Välju tsüklist"] + + G["📋 Levinud mustrid"] --> G1["for(let i=0; i G2["for(let i=n-1; i>=0; i--)"] + G --> G3["for(let i=0; i **Tsükli tarkus**: For-tsüklid on ideaalsed, kui tead täpselt, mitu korda tegevust korrata peab. Need on kõige tavalisem valik massiivide töötlemiseks! ### While-tsükkel -Erinevalt `for`-tsükli süntaksist vajavad `while`-tsüklid ainult tingimust, mis peatab tsükli, kui tingimus muutub `false`. Tsüklite tingimused sõltuvad tavaliselt teistest väärtustest, näiteks loenduritest, ja neid tuleb tsükli ajal hallata. Loendurite algväärtused tuleb luua väljaspool tsüklit ning kõik tingimuse täitmiseks vajalikud avaldised, sealhulgas loenduri muutmine, tuleb hallata tsükli sees. +`while` tsükkel on nagu öelda "tee seda seni, kuni…" – sa ei pruugi täpselt teada, mitu korda see toimub, aga tead, millal lõpetada. Sobib hästi olukordadeks, kus kasutajalt küsitakse sisendit seni, kuni õige vastus saab, või otsitakse andmeid kuni vajalik leitakse. + +**While-tsükli omadused:** +- **Jätkab** täitmist seni, kuni tingimus on tõene +- **Nõuab** käsitsi loendurimuutujate haldamist +- **Kontrollib** tingimust enne iga iteratsiooni +- **Oht** lõpmatute tsüklite tekkeks, kui tingimus ei muutu vääraks ```javascript -//Counting up to 10 +// Lihtne lugemise näide let i = 0; while (i < 10) { - console.log(i); - i++; + console.log(`While count: ${i}`); + i++; // Ära unusta suurendada! +} + +// Praktilisem näide: kasutaja sisendi töötlemine +let userInput = ""; +let attempts = 0; +const maxAttempts = 3; + +while (userInput !== "quit" && attempts < maxAttempts) { + userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`); + attempts++; +} + +if (attempts >= maxAttempts) { + console.log("Maximum attempts reached!"); +} +``` + +**Näidete mõistmine:** +- **Halda** loendurimuutujat `i` käsitsi tsükli sees +- **Suurendab** loendurit, et vältida lõpmatuid tsükleid +- **Näitab** praktilist kasutust kasutaja sisendi ja katsete piiranguga +- **Sisaldab** ohutusmehhanisme, et vältida lõpmatut täitmist + +### ♾️ **While-tsükli tarkuse kontroll: Tingimusel põhinev kordus** + +**Testi oma while-tsükli mõistmist:** +- Mis on peamine oht while-tsüklite kasutamisel? +- Millal eelistad while-tsüklit for-tsüklile? +- Kuidas saab vältida lõpmatuid tsükleid? + +```mermaid +flowchart LR + A["🔄 While vs For"] --> B["While-tsükkel"] + A --> C["For-tsükkel"] + + B --> B1["Tundmatud iteratsioonid"] + B --> B2["Tingimusest juhitud"] + B --> B3["Kasutaja sisend, otsimine"] + B --> B4["⚠️ Risk: lõputud tsüklid"] + + C --> C1["Tuntud iteratsioonid"] + C --> C2["Loenduri juhitud"] + C --> C3["Massiivi töötlemine"] + C --> C4["✅ Turvaline: ette aimatav lõpp"] + + D["🛡️ Turvanõuanded"] --> D1["Muuda alati tingimusmuutujat"] + D --> D2["Lisa väljumistingimused"] + D --> D3["Sea maksimaalsed iteratsioonipiirangud"] + + style A fill:#e3f2fd + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#ffebee +``` +> **Ohutus ennekõike**: While-tsüklid on võimsad, aga nõuavad hoolikat tingimuste juhtimist. Veendu alati, et su tingimus lõpuks vääraks muutub! + +### Moodsa tsükli alternatiivid + +JavaScript pakub moodsat tsükli süntaksit, mis teeb koodi lugemise lihtsamaks ja vigade tekkimise vähem tõenäoliseks. + +**For...of tsükkel (ES6+):** + +```javascript +const colors = ["red", "green", "blue", "yellow"]; + +// Kaasaegne lähenemine - puhtam ja turvalisem +for (const color of colors) { + console.log(`Color: ${color}`); +} + +// Võrdle traditsioonilise for-tsükliga +for (let i = 0; i < colors.length; i++) { + console.log(`Color: ${colors[i]}`); } ``` -✅ Miks eelistaksid for-tsüklit while-tsüklile? 17 000 vaatajat on esitanud sama küsimuse StackOverflow's ja mõned arvamused [võivad sulle huvi pakkuda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript). +**Peamised eelised `for...of`:** +- **Vabastab** indeksi haldamisest ja võimaliku ühe võrra valesti lugemise vigadest +- **Tagab** otsese ligipääsu massiivi elementidele +- **Parandab** koodi loetavust ja vähendab süntaksivigu + +**forEach meetod:** + +```javascript +const prices = [9.99, 15.50, 22.75, 8.25]; + +// Kasutades forEach funktsionaalse programmeerimise stiili jaoks +prices.forEach((price, index) => { + console.log(`Item ${index + 1}: $${price.toFixed(2)}`); +}); + +// forEach noolefunktsioonidega lihtsate toimingute jaoks +prices.forEach(price => console.log(`Price: $${price}`)); +``` + +**Mida forEach kohta teada:** +- **Täidab** funktsiooni iga massiivi elemendi jaoks +- **Annetab** väärtuse ja indeksi parameetritena +- **Ei saa** tsüklit keset katkestada (erinevalt tavapärastest tsüklitest) +- **Tagastab** undefined (ei loo uut massiivi) + +✅ Miks eelistaksid for tsüklit while-tsüklile? 17 000 inimest küsis sama StackOverflow’s ja mõned arvamused võivad olla huvitavad [sulle](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript). + +### 🎨 **Moodsa tsükli süntaksi kontroll: ES6+ omaksvõtt** + +**Hinda oma kaasaegse JavaScripti mõistmist:** +- Millised on `for...of` eelised tavapäraste for-tsüklite ees? +- Millal eelistaksid ikka tavapäraseid for-tsükleid? +- Mis vahe on `forEach` ja `map` vahel? + +```mermaid +quadrantChart + title Tsükli valiku juhend + x-axis Traditsiooniline --> Kaasaegne + y-axis Lihtne --> Keerukas + quadrant-1 Kaasaegne Keerukas + quadrant-2 Traditsiooniline Keerukas + quadrant-3 Traditsiooniline Lihtne + quadrant-4 Kaasaegne Lihtne + + Traditsiooniline For: [0.2, 0.7] + While tsükkel: [0.3, 0.6] + For...of: [0.8, 0.3] + forEach: [0.9, 0.4] + Massiivi meetodid: [0.8, 0.8] +``` +> **Moodne trend**: ES6+ süntaks nagu `for...of` ja `forEach` muutuvad eelistatud massiiviläbivaadeteks, sest need on puhtamad ja vähem vigadele kalduvad! ## Tsüklid ja massiivid -Massiive kasutatakse sageli koos tsüklitega, sest enamik tingimusi vajab tsükli peatamiseks massiivi pikkust ja indeks võib olla ka loenduri väärtus. +Massiivide ja tsüklite kombineerimine loob võimsad andmetöötluse võimalused. See paar on paljude programmeerimiste ülesannete alus, alates nimekirjade kuvamisest kuni statistika arvutamiseni. + +**Traditsiooniline massiivide töötlemine:** ```javascript -let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +// Klassikaline for-tsükli meetod for (let i = 0; i < iceCreamFlavors.length; i++) { - console.log(iceCreamFlavors[i]); -} //Ends when all flavors are printed + console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`); +} + +// Kaasaegne for...of meetod +for (const flavor of iceCreamFlavors) { + console.log(`Available flavor: ${flavor}`); +} ``` -✅ Katseta oma loodud massiivi üle tsükli tegemist oma brauseri konsoolis. +**Mõistame iga lähenemist:** +- **Kasutab** massiivi pikkuse omadust tsükli piiri määramiseks +- **Ligipääseb** elementidele indeksi kaudu tavapärastes for-tsüklites +- **Tagab** otsese ligipääsu for...of tsüklites +- **Töötab** iga massiivi elemendiga täpselt üks kord + +**Praktiline andmetöötluse näide:** + +```javascript +const studentGrades = [85, 92, 78, 96, 88, 73, 89]; +let total = 0; +let highestGrade = studentGrades[0]; +let lowestGrade = studentGrades[0]; + +// Töötle kõiki hinnetega ühe tsükliga +for (let i = 0; i < studentGrades.length; i++) { + const grade = studentGrades[i]; + total += grade; + + if (grade > highestGrade) { + highestGrade = grade; + } + + if (grade < lowestGrade) { + lowestGrade = grade; + } +} + +const average = total / studentGrades.length; +console.log(`Average: ${average.toFixed(1)}`); +console.log(`Highest: ${highestGrade}`); +console.log(`Lowest: ${lowestGrade}`); +``` +**Kuidas see kood töötab:** +- **Initsialiseerib** muutujad summa ja ekstreemidega jälgimiseks +- **Töötleb** iga hinnet ühe efektiivse tsükliga +- **Kogub** kokku summa keskmise arvutamiseks +- **Jälgib** tsükli käigus kõrgeimat ja madalaimat väärtust +- **Arvutab** lõplikud statistilised näitajad pärast tsükli lõppu + +✅ Proovi oma brauseri konsoolis tsüklit kohandada enda loodud massiiviga. + +```mermaid +flowchart TD + A["📦 Massiivi andmed"] --> B["🔄 Tsükli töötlemine"] + B --> C["📈 Tulemused"] + + A1["[85, 92, 78, 96, 88]"] --> A + + B --> B1["Arvuta summa"] + B --> B2["Leia min/max"] + B --> B3["Loe tingimused"] + B --> B4["Muuda andmeid"] + + C --> C1["Keskmine: 87.8"] + C --> C2["Kõrgeim: 96"] + C --> C3["Edukas: 5/5"] + C --> C4["Hinded tähega"] + + D["⚡ Töötlemismustrid"] --> D1["Akumulatsioon (summa)"] + D --> D2["Võrdlus (min/max)"] + D --> D3["Filterdamine (tingimused)"] + D --> D4["Kaardistamine (transformatsioon)"] + + style A fill:#e3f2fd + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#f3e5f5 +``` --- +## GitHub Copilot Agendi Väljakutse 🚀 + +Kasuta Agendi režiimi, et lahendada järgmine ülesanne: + +**Kirjeldus:** Loo terviklik andmetöötluse funktsioon, mis ühendab massiivid ja tsüklid andmestiku analüüsimiseks ning mõtestatud järelduste tegemiseks. + +**Üleskutse:** Loo funktsioon nimega `analyzeGrades`, mis võtab sisendiks massiivi õpilaste hinnetest objektidega (igaühel omadused name ja score) ning tagastab objekti statistikaga, sealhulgas kõrgeim hinne, madalaim hinne, keskmine hinne, sooritajate arv (hinded >=70) ning massiivi õpilaste nimedega, kes jäid keskmisest kõrgemale. Kasuta kindlasti kahte erinevat tsükli tüüpi lahenduses. + +Lisainfo agenti režiimi kohta leiad siit: [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). + ## 🚀 Väljakutse +JavaScript pakub mitmeid kaasaegseid massiivimeetodeid, mis võivad asendada traditsioonilisi tsükleid konkreetsete ülesannete jaoks. Uurige [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) ja [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). + +**Teie väljakutse:** Parandage üliõpilaste hinnete näidet, kasutades vähemalt kolme erinevat massiivimeetodit. Pange tähele, kui palju puhtam ja loetavam kood kaasajastatud JavaScripti süntaksiga muutub. + +## Loengu järgse test + +[Loengu järgse testi link](https://ff-quizzes.netlify.app/web/quiz/14) + -Massiivide üle tsükli tegemiseks on ka teisi viise peale for- ja while-tsüklite. Näiteks [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) ja [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Kirjuta oma massiivi tsükkel ümber, kasutades ühte neist tehnikatest. +## Kordamine ja iseseisev õppimine -## Loengu-järgne viktoriin -[Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/14) +JavaScripti massiividel on palju meetodeid, mis on väga kasulikud andmete manipuleerimiseks. [Lugege neist meetoditest](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ja proovige mõnda neist (nagu push, pop, slice ja splice) oma loodud massiivil. -## Ülevaade ja iseseisev õppimine +## Kodune ülesanne -JavaScript'i massiividel on palju meetodeid, mis on äärmiselt kasulikud andmete töötlemiseks. [Loe nende meetodite kohta](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ja proovi mõnda neist (näiteks push, pop, slice ja splice) oma loodud massiivil. +[Massiivi tsüklisse võtmine](assignment.md) -## Ülesanne +--- -[Massiivi tsükkel](assignment.md) +## 📊 **Teie massiivide ja tsüklite tööriistakasti kokkuvõte** + +```mermaid +graph TD + A["🎯 Massiivide ja tsüklite valdamine"] --> B["📦 Massiivi põhialused"] + A --> C["🔄 Tsükli tüübid"] + A --> D["🔗 Andmetöötlus"] + A --> E["🎨 Kaasaegsed tehnikad"] + + B --> B1["Loomine: [ ]"] + B --> B2["Indekseerimine: arr[0]"] + B --> B3["Meetodid: push, pop"] + B --> B4["Omandid: pikkus"] + + C --> C1["For: teada korduste arv"] + C --> C2["While: tingimusel põhinev"] + C --> C3["For...of: otsene ligipääs"] + C --> C4["forEach: funktsionaalne"] + + D --> D1["Statistika arvutamine"] + D --> D2["Andmete teisendamine"] + D --> D3["Filtreerimine ja otsing"] + D --> D4["Reaalajas töötlemine"] + + E --> E1["Noolefunktsioonid"] + E --> E2["Meetodite ahelad"] + E --> E3["Destruktureerimine"] + E --> E4["Mallitekstid"] + + F["💡 Peamised eelised"] --> F1["Tõhus andmetöötlus"] + F --> F2["Koodikorduste vähendamine"] + F --> F3["Laiendatavad lahendused"] + F --> F4["Puhtam süntaks"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` +--- + +## 🚀 Teie massiivide ja tsüklite valdamise ajajoon + +### ⚡ **Mida saate järgmise 5 minutiga teha** +- [ ] Looge massiiv oma lemmikfilmidega ja hankige konkreetseid elemente +- [ ] Kirjutage for-tsükkel, mis loendab 1-st kuni 10-ni +- [ ] Proovige õppetunni kaasaegseid massiivimeetodeid +- [ ] Harjutage massiivi indeksite kasutamist brauseri konsoolis + +### 🎯 **Mida saate selle tunni jooksul saavutada** +- [ ] Täitke pärast õppetundi test ja vaadake üle raskemad mõisted +- [ ] Koostage põhjalik hindeanalüsaator GitHub Copiloti väljakutse põhjal +- [ ] Looge lihtne ostukorv, kuhu lisate ja kustutate tooteid +- [ ] Harjutage konverteerimist erinevate tsükli tüüpide vahel +- [ ] Katsetage massiivimeetodeid nagu `push`, `pop`, `slice` ja `splice` + +### 📅 **Teie nädalakestev andmetöötluse teekond** +- [ ] Täitke "Massiivi tsüklisse võtmine" ülesanne loovate täiustustega +- [ ] Koostage ülesannete nimekirja rakendus, kasutades massiive ja tsükleid +- [ ] Looge lihtne statistika kalkulaator numbrilistele andmetele +- [ ] Harjutage [MDN massiivimeetoditega](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) +- [ ] Koostage fotogalerii või muusikapleieri liides +- [ ] Avastage funktsionaalset programmeerimist `map`, `filter` ja `reduce` abil + +### 🌟 **Teie kuuajaline areng** +- [ ] Valdage edasijõudnud massiivitegevusi ja jõudluse optimeerimist +- [ ] Koostage täielik andmete visualiseerimise juhtpaneel +- [ ] Panustage avatud lähtekoodiga andmetöötlusprojektidesse +- [ ] Õpetage kedagi teist massiive ja tsükleid praktiliste näidetega +- [ ] Looge isiklik kogu taaskasutatavatest andmetöötluse funktsioonidest +- [ ] Avastage algoritme ja andmestruktuure massiivide põhjal + +### 🏆 **Lõplik andmetöötluse meistri kontroll** + +**Tähistage oma massiivide ja tsüklite valdamist:** +- Milline massiivitehe on teie arvates reaalmaailma rakendustes kõige kasulikum? +- Milline tsüklitüüp tundub teile kõige loomulikum ja miks? +- Kuidas on massiivide ja tsüklite mõistmine muutnud teie lähenemist andmete korraldamisele? +- Millist keerukat andmetöötluse ülesannet soovite järgmiseks lahendada? + +```mermaid +journey + title Teie andmetöötluse areng + section Täna + Array Confusion: 3: You + Loop Basics: 4: You + Index Understanding: 5: You + section Sel Nädalal + Method Mastery: 4: You + Efficient Processing: 5: You + Modern Syntax: 5: You + section Järgmine Kuu + Complex Algorithms: 5: You + Performance Optimization: 5: You + Teaching Others: 5: You +``` +> 📦 **Olete avanud andmete korraldamise ja töötlemise jõu!** Massiivid ja tsüklid on aluseks peaaegu kõigile rakendustele, mida kunagi ehitate. Lihtsatest loenditest keeruka andmeanalüüsini on teil nüüd tööriistad informatsiooni tõhusaks ja elegantsuseks käsitlemiseks. Iga dünaamiline veebisait, mobiilirakendus ja andmepõhine rakendus tugineb neile põhikontseptsioonidele. Tere tulemast skaleeritava andmetöötluse maailma! 🎉 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud AI-tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame täpsust, tuleb arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Tähtsa teabe puhul soovitame kasutada professionaalse inimtõlke teenust. Me ei vastuta võimalike arusaamatuste või tõlgenduste eest, mis võivad tekkida selle tõlke kasutamise tõttu. + \ No newline at end of file diff --git a/translations/et/2-js-basics/4-arrays-loops/assignment.md b/translations/et/2-js-basics/4-arrays-loops/assignment.md index 982aef8ed..2753e18a5 100644 --- a/translations/et/2-js-basics/4-arrays-loops/assignment.md +++ b/translations/et/2-js-basics/4-arrays-loops/assignment.md @@ -1,27 +1,124 @@ -# Loenda massiivi +# Massiivid ja Tsüklid Ülesanne ## Juhised -Loo programm, mis loetleb iga 3. numbri vahemikus 1-20 ja prindib selle konsoolile. +Täida järgmised harjutused, et praktiseerida massiivide ja tsüklite kasutamist. Iga harjutus toetub tunni materjalile ja julgustab rakendama erinevaid tsükli tüüpe ja massiivi meetodeid. -> NIPP: kasuta for-tsüklit ja muuda iteratsiooni väljendit +### Harjutus 1: Numbrimustri Generaator +Loo programm, mis kuvab iga 3. numbri vahemikus 1–20 ja prindib selle konsooli. + +**Nõuded:** +- Kasuta `for` tsüklit kohandatud inkremendiga +- Kuvada numbrid kasutajasõbralikus formaadis +- Lisa kirjeldavad kommentaarid, mis selgitavad loogikat + +**Oodatav Tulem:** +``` +3, 6, 9, 12, 15, 18 +``` + +> **Nipp:** Muuda oma for tsükli iteratsiooni-väljendit, et vahele jätta numbreid. + +### Harjutus 2: Massiivi Analüüs +Loo massiiv vähemalt 8 erinevast numbrist ja kirjuta funktsioonid andmete analüüsimiseks. + +**Nõuded:** +- Loo massiiv nimega `numbers`, mis sisaldab vähemalt 8 väärtust +- Kirjuta funktsioon `findMaximum()`, mis tagastab suurima numbri +- Kirjuta funktsioon `findMinimum()`, mis tagastab väikseima numbri +- Kirjuta funktsioon `calculateSum()`, mis tagastab kõikide numbrite summa +- Testi iga funktsiooni ja kuva tulemused + +**Lisaväljakutse:** Kirjuta funktsioon, mis leiab massiivist teise suurima numbri. + +### Harjutus 3: Stringide Massiivi Töötlemine +Loo oma lemmikfilmide/raamatute/laulude massiiv ja harjuta erinevate tsükli tüüpidega. + +**Nõuded:** +- Loo massiiv vähemalt 5 stringväärtusega +- Kasuta traditsioonilist `for` tsüklit, et kuvada üksused numbritega (1. Üksuse Nimi) +- Kasuta `for...of` tsüklit, et kuvada üksused SUURTES TÄHTEDES +- Kasuta `forEach()` meetodit, et lugeda ja kuvada kõigi tähemärkide kogusummat + +**Näidistulemus:** +``` +Traditional for loop: +1. The Matrix +2. Inception +3. Interstellar + +For...of loop (uppercase): +THE MATRIX +INCEPTION +INTERSTELLAR + +Character count: +Total characters across all titles: 42 +``` + +### Harjutus 4: Andmete Filtreerimine (Edasijõudnutele) +Loo programm, mis töötleb massiivi õpilastest objektidega. + +**Nõuded:** +- Loo massiiv vähemalt 5 õpilase objektiga omadustega: `name`, `age`, `grade` +- Kasuta tsükleid, et leida õpilased, kes on 18 või vanemad +- Arvuta kõigi õpilaste keskmine hinne +- Loo uus massiiv, mis sisaldab ainult õpilasi, kelle hinnang on üle 85 + +**Näidisstruktuur:** +```javascript +const students = [ + { name: "Alice", age: 17, grade: 92 }, + { name: "Bob", age: 18, grade: 84 }, + // Lisa rohkem õpilasi... +]; +``` + +## Koodi Testimine + +Testi oma programme järgmiselt: +1. Käivita iga harjutus brauseri konsoolis +2. Veendu, et väljund vastab oodatule +3. Testi erinevate andmekogumitega +4. Kontrolli, et su kood suudab käsitleda äärejuhtumeid (tühjad massiivid, ühe elemendi massiivid) + +## Esitamise Juhised + +Lisa oma esitusele: +- Igale harjutusele hästi kommenteeritud JavaScripti kood +- Kuvatõmmised või tekst väljund, mis näitab programmi käivitumist +- Lühike seletus, millise tsükli tüübi valisid iga ülesande jaoks ja miks ## Hindamiskriteeriumid -| Kriteerium | Näidislik | Piisav | Vajab parandamist | -| ---------- | -------------------------------------- | ----------------------- | ------------------------------ | -| | Programm töötab korrektselt ja on kommenteeritud | Programm ei ole kommenteeritud | Programm on puudulik või vigane | +| Kriteerium | Väga Hea (3 punkti) | Piisav (2 punkti) | Vajab Parandamist (1 punkt) | +| -------- | -------------------- | ------------------- | --------------------------- | +| **Funktsionaalsus** | Kõik harjutused õigesti tehtud koos lisaväljakutsetega | Kõik nõutud harjutused töötavad korralikult | Mõned harjutused on puudulikud või sisaldavad vigu | +| **Koodi Kvaliteet** | Puhtalt kirjutatud, hästi organiseeritud kood, kirjeldavate muutujanimedega | Kood töötab, aga võiks olla selgem | Kood on segane või raske mõista | +| **Kommentaarid** | Ulatuslikud kommentaarid, mis selgitavad loogikat ja valikuid | Põhikommantaarid olemas | Vähe või ei ole kommentaare | +| **Tsüklite Kasutus** | Näitab arusaamist erinevatest tsükli tüüpidest sobivalt | Kasutab tsükleid õigesti, kuid vähese mitmekesisusega | Tsüklite kasutamine vale või ebaefektiivne | +| **Testimine** | Tõendid põhjalikust testimisest paljude stsenaariumitega | Põhitestimine tehtud | Vähe tõendeid testimise kohta | + +## Mõtiskluse Küsimused + +Pärast harjutuste lõpetamist mõtle: +1. Milline tsükli tüüp tundus kõige loomulikum ja miks? +2. Milliseid väljakutseid kogesid massiividega töötades? +3. Kuidas saab neid oskusi rakendada päris veebiarenduse projektides? +4. Mida teeksid teisiti, kui peaksid oma koodi jõudluse parandamiseks optimeerima? --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse või valesti mõistmise eest, mis võivad tuleneda selle tõlke kasutamisest. + \ No newline at end of file diff --git a/translations/et/3-terrarium/1-intro-to-html/README.md b/translations/et/3-terrarium/1-intro-to-html/README.md index 915ba7d14..b0c6b236a 100644 --- a/translations/et/3-terrarium/1-intro-to-html/README.md +++ b/translations/et/3-terrarium/1-intro-to-html/README.md @@ -1,85 +1,168 @@ -# Terrariumiprojekt, 1. osa: Sissejuhatus HTML-i - -![Sissejuhatus HTML-i](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.et.png) +# Terrarium projekt Osa 1: Sissejuhatus HTML-i + +```mermaid +journey + title Sinu HTML õppimisreis + section Alus + Looge HTML-fail: 3: Student + Lisage DOCTYPE: 4: Student + Struktureerige dokument: 5: Student + section Sisu + Lisage metaandmed: 4: Student + Lisage pildid: 5: Student + Korraldage kujundus: 5: Student + section Semantika + Kasutage õigeid silte: 4: Student + Parandage ligipääsetavust: 5: Student + Ehitage terrarium: 5: Student +``` +![Sissejuhatus HTML-i](../../../../translated_images/webdev101-html.4389c2067af68e98.et.png) > Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) -## Loengu-eelne viktoriin - -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/15) - +HTML ehk hüperteksti märgistuskeel on iga veebilehe aluseks, mida sa kunagi külastanud oled. Mõtle HTML-ile kui skeletile, mis annab veebilehtedele struktuuri – see määrab, kuhu sisu läheb, kuidas see on organiseeritud ja mida iga osa esindab. Kuigi CSS "riietab" su HTML-i hiljem värvide ja paigutustega ning JavaScript toob selle ellu interaktiivsusega, annab HTML vajaliku põhistruktuuri, mis muudab muu võimalikuks. + +Selles õppetükis lood HTML-struktuuri virtuaalsele terrariumiliidesele. See praktiline projekt õpetab sulle HTML-i põhimõtteid, samal ajal midagi visuaalselt köitvat ehitades. Õpid, kuidas sisu organiseerida semantiliste elementide abil, kuidas töötada piltidega ja luua alused interaktiivsele veebirakendusele. + +Selle õppetüki lõpuks on sul töötav HTML-leht, mis kuvab taimede pilte organiseeritud veergudes, valmis järgmiseks õppetükiks stiilimiseks. Ära muretse, kui see alguses lihtne välja näeb – just nii peabki HTML enne CSS-i visuaalset lihvi näitama. + +```mermaid +mindmap + root((HTML Põhitõed)) + Structure + DOCTYPE deklaratsioon + HTML element + Pea sektsioon + Sisu keha + Elements + Sildid & Atribuudid + Isekitsenevad sildid + Pesastatud elemendid + Blokk vs Rida + Content + Tekstielemendid + Pildid + Konteinereid (div) + Listid + Semantics + Mõttelised sildid + Juurdepääsetavus + Ekraanilugejad + SEO eelised + Best Practices + Õige pesastamine + Kehtiv märgend + Kirjeldav alt tekst + Korraldatud struktuur +``` +## Ettelugemise eelküsimustik -> Vaata videot +[Ettelugemise eelküsimustik](https://ff-quizzes.netlify.app/web/quiz/15) +> 📺 **Vaata ja õpi**: Vaata seda abistavat videoülevaadet > -> [![Git ja GitHubi põhialuste video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) - -### Sissejuhatus +> [![HTML põhitõed video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) -HTML ehk HyperText Markup Language on veebilehe "skelett". Kui CSS "riietab" HTML-i ja JavaScript toob selle ellu, siis HTML on veebirakenduse keha. HTML-i süntaks peegeldab seda ideed, sisaldades "head", "body" ja "footer" silte. +## Projekti seadistamine -Selles õppetükis kasutame HTML-i, et luua virtuaalse terrariumi liidese "skelett". Sellel on pealkiri ja kolm veergu: paremal ja vasakul veerus asuvad lohistatavad taimed ning keskel ala, mis kujutab klaasist terrariumi. Õppetüki lõpuks näete taimi veergudes, kuid liides näeb välja veidi kummaline; ärge muretsege, järgmises osas lisate CSS-i stiilid, et liides paremini välja näeks. +Enne kui sukeldume HTML-i koodi, seadistame korraliku töökeskkonna sinu terrariumiprojektile. Alustades organiseeritud failistruktuuri loomine on oluline harjumus, mis teenib sind hästi kogu veebiarenduse teekonna jooksul. -### Ülesanne +### Ülesanne: Loo oma projekti struktuur -Looge oma arvutis kaust nimega 'terrarium' ja selle sees fail nimega 'index.html'. Seda saab teha Visual Studio Code'is, avades uue VS Code'i akna, klõpsates 'open folder' ja navigeerides oma uude kausta. Klõpsake Explorer paneelil väikest 'file' nuppu ja looge uus fail: - -![Explorer VS Code'is](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.et.png) - -Või - -Kasutage neid käske oma git bashis: -* `mkdir terrarium` -* `cd terrarium` -* `touch index.html` -* `code index.html` või `nano index.html` - -> index.html failid näitavad brauserile, et see on kausta vaikimisi fail; URL-id nagu `https://anysite.com/test` võivad olla üles ehitatud kaustastruktuuri abil, mis sisaldab kausta nimega `test` ja selle sees `index.html`; `index.html` ei pea URL-is ilmuma. - ---- +Sa lood spetsiaalse kausta terrariumiprojekti jaoks ja lisad esimese HTML-faili. Siin on kaks lähenemist, mida saad kasutada: -## DocType ja html sildid +**Võimalus 1: Visual Studio Code'i kasutamine** +1. Ava Visual Studio Code +2. Klõpsa "Fail" → "Ava kaust" või kasuta `Ctrl+K, Ctrl+O` (Windows/Linux) või `Cmd+K, Cmd+O` (Mac) +3. Loo uus kaust nimega `terrarium` ja vali see +4. Avastusaknas klõpsa "Uus fail" ikoonile +5. Nyimesta oma fail nimega `index.html` -HTML-faili esimene rida on selle doctype. On veidi üllatav, et see rida peab olema faili kõige ülemises osas, kuid see ütleb vanematele brauseritele, et leht tuleb renderdada standardrežiimis, järgides praegust HTML-i spetsifikatsiooni. +![VS Code Exploreri ekraanipilt, kus luuakse uus fail](../../../../translated_images/vs-code-index.e2986cf919471eb9.et.png) -> Näpunäide: VS Code'is saate sildi kohal hõljuda ja saada teavet selle kasutamise kohta MDN Reference juhenditest. +**Võimalus 2: Terminalikäskluste kasutamine** +```bash +mkdir terrarium +cd terrarium +touch index.html +code index.html +``` -Teine rida peaks olema `` sildi avamissilt, millele järgneb selle sulgemissilt ``. Need sildid on teie liidese juurelemendid. +**Need käsud teevad järgneva:** +- **Loovad** uue kataloogi nimega `terrarium` sinu projekti jaoks +- **Sisenemisel** terrariumi kataloogi +- **Loovad** tühja `index.html` faili +- **Avavad** faili Visual Studio Codes redigeerimiseks + +> 💡 **Pro nipp**: Failinimi `index.html` on veebiarenduses eriline. Kui keegi külastab veebisaiti, otsivad brauserid automaatselt vaikimisi lehtena faili `index.html`. See tähendab, et URL nagu `https://mysite.com/projects/` serveerib automaatselt `index.html` faili `projects` kaustast ilma failinime täpsustamata. + +## HTML dokumendi struktuuri mõistmine + +Iga HTML dokument järgib spetsiifilist struktuuri, mida brauserid vajavad, et mõista ja korrektselt kuvada. Mõtle sellele struktuurile nagu ametlikule kirjale – tal on vajalikud elemendid kindlas järjekorras, mis aitavad sisutöötlejatel (antud juhul brauseril) sisu õieti töödelda. + +```mermaid +flowchart TD + A[""] --> B[""] + B --> C[""] + C --> D[""] + C --> E["<meta charset>"] + C --> F["<meta viewport>"] + B --> G["<body>"] + G --> H["<h1> Pealkiri"] + G --> I["<div> Konteinerid"] + G --> J["<img> Pildid"] + + style A fill:#e1f5fe + style B fill:#f3e5f5 + style C fill:#fff3e0 + style G fill:#e8f5e8 +``` +Alustame olulise alusega, mis on vajalik iga HTML dokumendi jaoks. -### Ülesanne +### DOCTYPE deklaratsioon ja juurelement -Lisage need read oma `index.html` faili ülaossa: +HTML-faili esimesed kaks rida toimivad dokumendi "sissejuhatusena" brauserile: -```HTML +```html <!DOCTYPE html> <html></html> ``` -✅ DocType'i määramisega päringustringi abil saab määrata erinevaid režiime: [Quirks Mode ja Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Need režiimid toetasid väga vanu brausereid, mida tänapäeval tavaliselt ei kasutata (Netscape Navigator 4 ja Internet Explorer 5). Võite jääda standardse doctype deklaratsiooni juurde. +**Mida see kood teeb:** +- **Deklaratsioon** dokumendi tüübiks on HTML5, kasutades `<!DOCTYPE html>` +- **Luuakse** juurelement `<html>`, mis sisaldab kogu lehe sisu +- **Kehtestatakse** tänapäevased veebistandardid korrektseks brauseri kuvamiseks +- **Tagatakse** ühtlane kuvamine erinevates brauserites ja seadmetes ---- +> 💡 **VS Code näpunäide**: Liiguta kursor mõnele HTML-tägile VS Codes, et näha MDN Web Docsi kasulikku infot, sealhulgas kasutusnäiteid ja brauserite ühilduvust. + +> 📚 **Lisateave**: DOCTYPE deklaratsioon hoiab ära brauserite ülemineku "quirks mode" režiimi, mida kasutati väga vanade veebisaitide toetamiseks. Kaasaegne veebiarendus kasutab lihtsat `<!DOCTYPE html>` deklaratsiooni, mis tagab [standarditele vastava kuvamise](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). + +### 🔄 **Pedagoogiline vahekokkuvõte** +**Peatu ja mõtiskle**: Enne jätkamist veendu, et saad aru: +- ✅ Miks igas HTML dokumendis on vaja DOCTYPE deklaratsiooni +- ✅ Mida sisaldab `<html>` juurelement +- ✅ Kuidas see struktuur aitab brauseritel lehti õigesti kuvada -## Dokumendi 'head' +**Kiire enesehinnang**: Kas suudad oma sõnadega seletada, mida tähendab "standarditele vastav kuvamine"? -HTML-dokumendi 'head' ala sisaldab olulist teavet teie veebilehe kohta, mida tuntakse ka kui [metaandmed](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Meie puhul edastame veebiserverile, kuhu see leht renderdamiseks saadetakse, järgmised neli asja: +## Vajalikud dokumendi metaandmete lisamine -- lehe pealkiri -- lehe metaandmed, sealhulgas: - - 'character set', mis näitab, millist märgistikku lehel kasutatakse - - brauseri teave, sealhulgas `x-ua-compatible`, mis näitab, et IE=edge brauserit toetatakse - - teave selle kohta, kuidas vaateaken peaks käituma, kui see laaditakse. Vaateakna seadmine algtasemele 1 kontrollib suumi taset, kui leht esmakordselt laaditakse. +HTML dokumendi `<head>` osa sisaldab olulist infot, mida brauserid ja otsingumootorid vajavad, kuid mida külastajad otse lehel ei näe. Mõtle sellele kui "tagatseeni" infole, mis aitab su veebilehel õigesti töötada ja kuvada korrektselt erinevatel seadmetel ja platvormidel. -### Ülesanne +See metaandmestik ütleb brauseritele, kuidas lehte kuvada, millist märgistikku kasutada ja kuidas erinevate ekraanisuurustega toime tulla – kõik see on vajalik professionaalsete ja ligipääsetavate veebilehtede loomiseks. -Lisage 'head' plokk oma dokumendile `<html>` siltide vahele. +### Ülesanne: Lisa dokumendi päis + +Lisa see `<head>` sektsioon oma `<html>` elemendi avamise ja sulgemise vahel: ```html <head> @@ -90,17 +173,28 @@ Lisage 'head' plokk oma dokumendile `<html>` siltide vahele. </head> ``` -✅ Mis juhtuks, kui määraksite vaateakna meta sildi selliselt: `<meta name="viewport" content="width=600">`? Lugege rohkem [vaateakna](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) kohta. +**Mida iga element teeb:** +- **Määrab** lehe tiitli, mis ilmub brauseri vahelehtedel ja otsingutulemustes +- **Seab** UTF-8 märgistikku tekstide korrektsel kuvamisel kogu maailmas +- **Tagab** ühilduvuse Internet Exploreri kaasaegsete versioonidega +- **Konfigureerib** reageeriva disaini, seadistades vaateaken (viewport) seadme laiusele +- **Juhtcontrolib** esialgset suumimistaset, kuvades sisu loomulikus suuruses ---- +> 🤔 **Mõtle sellele**: Mis juhtuks, kui seaksid vaateakna meta-tägi järgmiselt: `<meta name="viewport" content="width=600">`? See sunniks lehte alati olema 600 pikslit lai, rikkudes reageeriva disaini põhimõtteid! Loe rohkem [õige vaateakna seadistuse kohta](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). + +## Dokumendi keha ülesehitamine -## Dokumendi `body` +`<body>` element sisaldab kogu veebilehe nähtavat sisu – kõike, mida kasutajad näevad ja millega suhtlevad. Kui `<head>` osa andis brauserile juhiseid, siis `<body>` sisaldab tegelikku sisu: teksti, pilte, nuppe ja muid elemente, mis loovad kasutajaliidese. -### HTML-sildid +Lisame keha struktuuri ja mõistame, kuidas HTML-tägid koos töötavad tähendusliku sisu loomiseks. -HTML-is lisate oma .html faili sildid, et luua veebilehe elemente. Igal sildil on tavaliselt avamis- ja sulgemissilt, näiteks: `<p>hello</p>` tähistamaks lõiku. Looge oma liidese keha, lisades `<body>` sildid `<html>` siltide paari sisse; teie märgistus näeb nüüd välja selline: +### HTML-tägi struktuuri mõistmine -### Ülesanne +HTML kasutab paaristähti elementide määratlemiseks. Enamus täge on avamistäht nagu `<p>` ja sulgemistäht nagu `</p>`, mille vahele tuleb sisu: `<p>Tere, maailm!</p>`. See loob lõigu, mis sisaldab teksti "Tere, maailm!". + +### Ülesanne: Lisa `<body>` element + +Uuenda oma HTML-faili nii, et see sisaldaks `<body>` elementi: ```html <!DOCTYPE html> @@ -115,100 +209,179 @@ HTML-is lisate oma .html faili sildid, et luua veebilehe elemente. Igal sildil o </html> ``` -Nüüd saate hakata oma lehte üles ehitama. Tavaliselt kasutatakse `<div>` silte, et luua lehe eraldi elemente. Loome rea `<div>` elemente, mis sisaldavad pilte. +**Selle struktuuriga saad:** +- **Määratleda** põhilise HTML5 dokumendi raamistiku +- **Lisada** vajalikud metaandmed korrektsel brauseri kuvamisel +- **Luua** tühja keha, mis on valmis nähtavaks sisuks +- **Järgida** kaasaegseid veebiarenduse parimaid tavasid + +Nüüd oled valmis lisama oma terrariumi nähtavad elemendid. Kasutame `<div>` elemente konteineritena erinevate sisuosade organiseerimiseks ja `<img>` elemente taimede piltide kuvamiseks. -### Pildid +### Töötamine piltide ja kujunduskonteineritega -Üks HTML-silt, mis ei vaja sulgemissilti, on `<img>` silt, kuna sellel on `src` element, mis sisaldab kogu teavet, mida leht vajab elemendi renderdamiseks. +Pildid HTML-is on erisugused, kuna nad kasutavad "ise sulguvat" märgistust. Erinevalt elementidest nagu `<p></p>`, mis katavad sisu, sisaldab `<img>` märk see info, mida ta vajab, otse tagsis endas, kasutades atribuute nagu `src` pildifaili asukoha jaoks ja `alt` ligipääsetavuse tagamiseks. -Looge oma rakenduses kaust nimega `images` ja lisage sinna kõik pildid [lähtekoodi kaustast](../../../../3-terrarium/solution/images); (seal on 14 taimepilti). +Enne piltide lisamist HTML-i pead korralikult organiseerima oma projekti failid, luues kausta piltide jaoks ja lisades taimede graafika. -### Ülesanne +**Kõigepealt seadista oma pildid:** +1. Loo kaust nimega `images` oma terrariumi projekti kausta sees +2. Laadi taimepildid alla [lahenduse kaustast](../../../../3-terrarium/solution/images) (kokku 14 taimepilti) +3. Kopeeri kõik taimepildid uude kausta `images` -Lisage need taimepildid kahe veeru vahele `<body></body>` siltide sees: +### Ülesanne: Loo taimede kuvamise paigutus + +Nüüd lisa taimepildid, organiseerituna kahe veeruna, oma `<body></body>` siltide vahele: ```html <div id="page"> <div id="left-container" class="container"> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.et.png" /> + <img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc43.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.et.png" /> + <img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad89.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.et.png" /> + <img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a7.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.et.png" /> + <img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.et.png" /> + <img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebcc.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.et.png" /> + <img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b656994.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.et.png" /> + <img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621.et.png" /> </div> </div> <div id="right-container" class="container"> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.et.png" /> + <img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.et.png" /> + <img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc2.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.et.png" /> + <img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.et.png" /> + <img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84e.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.et.png" /> + <img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.et.png" /> + <img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf5.et.png" /> </div> <div class="plant-holder"> - <img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.et.png" /> + <img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba.et.png" /> </div> </div> </div> ``` -> Märkus: Spanid vs. Divid. Divid on 'block' elemendid ja spanid 'inline'. Mis juhtuks, kui muudaksite need divid spanideks? - -Selle märgistusega ilmuvad taimed ekraanile. See näeb välja üsna halb, kuna neid pole veel CSS-i abil stiliseeritud, ja me teeme seda järgmises õppetükis. - -Igal pildil on alt-tekst, mis ilmub isegi siis, kui te ei näe või ei saa pilti renderdada. See on oluline atribuut, mida lisada juurdepääsetavuse tagamiseks. Õppige juurdepääsetavuse kohta rohkem tulevastes õppetundides; praegu pidage meeles, et alt-atribuut pakub alternatiivset teavet pildi kohta, kui kasutaja mingil põhjusel ei saa seda vaadata (aeglane ühendus, viga src atribuudis või kui kasutaja kasutab ekraanilugejat). - -✅ Kas märkasite, et igal pildil on sama alt-silt? Kas see on hea tava? Miks või miks mitte? Kas saate seda koodi parandada? - ---- - -## Semantiline märgistus +**Järjekorras, mis koodis toimub:** +- **Luuakse** põhikonteiner lehel ID-ga `page`, mis hoiab kogu sisu +- **Määratakse** kaks veergude konteinerit: `left-container` ja `right-container` +- **Organiseeritakse** 7 taime vasakusse ja 7 paremasse veergu +- **Pakendatakse** iga taime pilt konteinerisse `plant-holder` individuaalse asukoha jaoks +- **Rakendatakse** ühtsed klassinimed CSS stiilimiseks järgmisel õppetunnil +- **Määratakse** iga taime pildile unikaalne ID JavaScripti jaoks hiljem +- **Sisaldab** korrektseid failiteid, mis viitavad kaustale images + +> 🤔 **Mõtle sellele**: Pane tähele, et kõigil piltidel on hetkel samasugune alternatiivtekst "plant". See pole ligipääsetavuse seisukohast optimaalne. Ekraanilugerite kasutajad kuuleksid 14 korda "plant" järjest ilma teadmiseta, millisest konkreetsest taimest pilt räägib. Kas suudad välja mõelda paremaid ja kirjeldavamaid alt-tekste iga pildi jaoks? + +> 📝 **HTML elemendi tüübid**: `<div>` elemendid on "plokitasemel" ja võtavad kogu olemasoleva laiuse, samas kui `<span>` elemendid on "joonekaaslased" ja võtavad vaid vajaliku laiuse. Mida sa arvad, mis juhtuks, kui selle koodis kõik `<div>` märgendid vahetaksid `<span>`-ide vastu? + +### 🔄 **Pedagoogiline vahekokkuvõte** +**Struktuuriteadmised**: Võta hetk, et üle vaadata oma HTML struktuur: +- ✅ Kas suudad tuvastada oma paigutuse põhilised konteinerid? +- ✅ Kas mõistad, miks igal pildil on unikaalne ID? +- ✅ Kuidas kirjeldaksid `plant-holder` div-de eesmärki? + +**Visuaalne kontroll**: Ava oma HTML fail brauseris. Sa peaksid nägema: +- Lihtsat taimede piltide nimekirja +- Pildid organiseeritud kaheks veeruks +- Lihtsat, stiliseerimata paigutust + +**Pane tähele**: See lihtne välimus ongi see, kuidas HTML peaks enne CSS stiilimist välja nägema! + +Selle märgistuse lisamisega ilmuvad taimed ekraanile, kuigi veel pole need lihvitud – seda teeb järgmisel õppetunnil CSS! Praegu on sul kindel HTML-põhi, mis korrektselt organiseerib su sisu ja järgib ligipääsetavuse parimaid tavasid. + +## Semantilise HTML kasutamine ligipääsetavuse jaoks + +Semantiline HTML tähendab HTML elementide valimist nende tähenduse ja eesmärgi põhjal, mitte ainult välimuse järgi. Semantilise märgistuse kasutamisel annad brauseritele, otsingumootoritele ja abitehnoloogiatele (näiteks ekraanilugeritele) teada oma sisu struktuurist ja tähendusest. + +```mermaid +flowchart TD + A[Kas tuleb sisu lisada?] --> B{Milline tüüp?} + B -->|Põhitekst| C["<h1>"] + B -->|Alapealkiri| D["<h2>, <h3>, jne."] + B -->|Paragrahv| E["<p>"] + B -->|Loend| F["<ul>, <ol>"] + B -->|Navigatsioon| G["<nav>"] + B -->|Artikkel| H["<article>"] + B -->|Sektsioon| I["<section>"] + B -->|Üldine konteiner| J["<div>"] + + C --> K[Ekraanilugerid teatavad põhitekstina] + D --> L[Loomise õige pealkirja hierarhia] + E --> M[Tagab korraliku teksti ruumijaotuse] + F --> N[Võimaldab loendi navigeerimiskiirparameetreid] + G --> O[Tuvastab navigeerimise maamärgid] + H --> P[Märgib iseseisva sisu] + I --> Q[Rühmitab seotud sisu] + J --> R[Kasutada ainult siis, kui ükski semantiline silt ei sobi] + + style C fill:#4caf50 + style D fill:#4caf50 + style E fill:#4caf50 + style F fill:#4caf50 + style G fill:#2196f3 + style H fill:#2196f3 + style I fill:#2196f3 + style J fill:#ff9800 +``` +See lähenemine teeb su veebilehed paremini ligipääsetavaks kasutajatele, kellel on puuded, ja aitab otsingumootoritel su sisu paremini mõista. See on kaasaegse veebiarenduse põhimõte, mis loob paremaid kogemusi kõigile. -Üldiselt on eelistatav kasutada tähenduslikku 'semantikat' HTML-i kirjutamisel. Mida see tähendab? See tähendab, et kasutate HTML-silte, et esindada andmete või interaktsiooni tüüpi, milleks need on loodud. Näiteks lehe peamine pealkirja tekst peaks kasutama `<h1>` silti. +### Semantilise pagunaja lisamine -Lisage järgmine rida kohe pärast `<body>` sildi avamist: +Lisame sinu terrariumile korraliku pealkirja. Lisa see rida kohe pärast avavat `<body>` märgendit: ```html <h1>My Terrarium</h1> ``` -Semantilise märgistuse kasutamine, näiteks pealkirjade `<h1>` ja loendite `<ul>` renderdamine, aitab ekraanilugejatel lehel navigeerida. Üldiselt peaksid nupud olema kirjutatud `<button>` ja loendid `<li>` kujul. Kuigi on _võimalik_ kasutada spetsiaalselt stiliseeritud `<span>` elemente klõpsukäsitlejatega nuppude jäljendamiseks, on parem, kui puudega kasutajad saavad tehnoloogiate abil kindlaks teha, kus lehel nupp asub, ja sellega suhelda, kui element ilmub nupuna. Sel põhjusel proovige kasutada semantilist märgistust nii palju kui võimalik. +**Miks semantiline märgistus on oluline:** +- **Aitab** ekraanilugeritel navigeerida ja mõista lehe struktuuri +- **Parandab** otsingumootori optimeerimist (SEO) sisu hierarhia selgeks tegemisega +- **Tõstab** ligipääsetavust visuaalpuudega või kognitiivsete erinevustega kasutajatele +- **Loodab** paremaid kasutajakogemusi kõikidel seadmetel ja platvormidel +- **Järgib** veebistandardeid ja parimaid professionaalseid praktikaid + +**Näited semantiliste ja mitte-semantiliste valikute kohta:** -✅ Vaadake ekraanilugejat ja [kuidas see veebilehega suhtleb](https://www.youtube.com/watch?v=OUDV1gqs9GA). Kas näete, miks mittesemantiline märgistus võib kasutajat frustreerida? +| Eesmärk | ✅ Semantiline valik | ❌ Mitte-semantiline valik | +|---------|---------------------|----------------------------| +| Peamine pealkiri | `<h1>Pealkiri</h1>` | `<div class="big-text">Pealkiri</div>` | +| Navigeerimine | `<nav><ul><li></li></ul></nav>` | `<div class="menu"><div></div></div>` | +| Nupp | `<button>Vajuta mind</button>` | `<span onclick="...">Vajuta mind</span>` | +| Artikli sisu | `<article><p></p></article>` | `<div class="content"><div></div></div>` | -## Terrarium +> 🎥 **Vaata praktikas**: Vaata, [kuidas ekraanilugerid veebilehtedega suhtlevad](https://www.youtube.com/watch?v=OUDV1gqs9GA), et mõista, miks semantiline märgistus on ligipääsetavuse seisukohalt ülioluline. Pane tähele, kuidas korralik HTML struktuur aitab kasutajatel tõhusalt navigeerida. -Liidese viimane osa hõlmab märgistuse loomist, mis stiliseeritakse terrariumi loomiseks. +## Terrariumi konteineri loomine -### Ülesanne: +Lisame nüüd terrariumi enda HTML struktuuri – klaaskonteineri, kuhu taimed lõpuks asetatakse. See jaotis demonstreerib olulist mõistet: HTML loob struktuuri, kuid ilma CSS stiilideta need elemendid veel nähtavad ei ole. -Lisage see märgistus viimase `</div>` sildi kohale: +Terrariumi märgistuses kasutatakse kirjeldavaid klassinimesid, mis muudavad CSS-i stiilimise järgmisel õppetunnil intuitiivseks ja hooldatavaks. + +### Ülesanne: Lisa terrariumi struktuur + +Lisa see märgistus viimase `</div>` sildi kohale (enne lehekonteineri sulgemismärgendit): ```html <div id="terrarium"> @@ -222,30 +395,200 @@ Lisage see märgistus viimase `</div>` sildi kohale: </div> ``` -✅ Kuigi lisasite selle märgistuse ekraanile, ei näe te midagi renderdumas. Miks? +**Mida see terrariumi struktuur teeb:** +- **Luuakse** peamine terrariumi konteiner, millel on unikaalne ID stiilimiseks +- **Määratleb** eraldi elemendid iga visuaalse komponendi jaoks (ülemine, seinad, muld, alumine osa) +- **Sisaldab** pesastatud elemente klaasi peegelduste efektide jaoks (läikivad elemendid) +- **Kasutab** kirjeldavaid klassinimesid, mis selgelt näitavad iga elemendi eesmärki +- **Valmistab ette** struktuuri CSS stiilimiseks, mis loob klaasterraariumi väljanägemise + +> 🤔 **Märkasid midagi?**: Kuigi sa lisasid selle märgistuskeele, ei näe sa lehel ühtegi uut elementi! See illustreerib perfektselt, kuidas HTML pakub struktuuri ja CSS annab välimuse. Need `<div>` elemendid eksisteerivad, kuid neil pole veel visuaalset stiili – see tuleb järgmises õppetükis! + +```mermaid +flowchart TD + A[HTML Dokument] --> B[Dokumendi Päis] + A --> C[Dokumendi Sisu] + B --> D[Pealkirja Element] + B --> E[Meta Märgistik] + B --> F[Meta Vaateaken] + C --> G[Põhipealkiri] + C --> H[Lehe Konteiner] + H --> I[Vasak Konteiner koos 7 taimega] + H --> J[Parem Konteiner koos 7 taimega] + H --> K[Terrarumi Struktuur] + + style A fill:#e1f5fe + style B fill:#fff3e0 + style C fill:#e8f5e8 + style H fill:#f3e5f5 +``` +### 🔄 **Pedagoogiline Kontroll** +**HTML struktuuri valdamine**: Enne edasi liikumist veendu, et sa oskad: +- ✅ Selgitada HTML struktuuri ja visuaalse välimuse vahet +- ✅ Tuvastada semantilisi vs mitte-semantilisi HTML elemente +- ✅ Kirjeldada, kuidas korrektne märgistus toetab ligipääsetavust +- ✅ Tunda püha dokumentide puu struktuuri + +**Testi oma arusaamist**: Proovi avada oma HTML fail brauseris, kus on JavaScript välja lülitatud ja CSS eemaldatud. See näitab sulle loodud puhast semantilist struktuuri! --- -## 🚀Väljakutse +## GitHub Copilot Agenti Väljakutse + +Kasuta Agent režiimi, et täita järgmine väljakutse: + +**Kirjeldus:** Loo semantiline HTML struktuur taimehoolduse juhendile, mida saaks lisada terrariumiprojekti. + +**Päring:** Loo semantiline HTML sektsioon, mis sisaldab põhipealkirja "Taimehoolduse juhend", kolme alajaotust pealkirjadega "Kastmine", "Valguse nõuded" ja "Mulla hooldus", igaüks sisaldades lõiku taimehoolduse infoga. Kasuta sobivaid semantilisi HTML-silte nagu `<section>`, `<h2>`, `<h3>`, ja `<p>`, et struktuur oleks asjakohane. + +Loe rohkem [agent režiimist](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). + +## Uuri HTML ajalugu väljakutse -HTML-is on mõned vanad 'vanemad' sildid, millega on endiselt lõbus mängida, kuigi te ei tohiks kasutada vananenud silte nagu [need sildid](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) oma märgistuses. Kas saate kasutada vana `<marquee>` silti, et muuta h1 pealkiri horisontaalselt kerivaks? (kui teete seda, ärge unustage seda hiljem eemaldada) +**Õppimine veebiarengust** + +HTML on oluliselt arenenud alates sellest, kui Tim Berners-Lee lõi esimese veebibrauseri CERNis 1990. aastal. Mõned vanemad sildid nagu `<marquee>` on nüüd aegunud, sest need ei toeta hästi kaasaegseid ligipääsetavuse standardeid ega responsiivse disaini põhimõtteid. + +**Proovi seda eksperimenti:** +1. Määri ajutiselt oma `<h1>` pealkiri `<marquee>` sildi sisse: `<marquee><h1>Minu terrarium</h1></marquee>` +2. Ava oma leht brauseris ja jälgi kerivat efekti +3. Mõtle, miks see silt tühistati (vihje: mõtle kasutajakogemusele ja ligipääsetavusele) +4. Eemalda `<marquee>` silt ja tagasi semantilisse märgistusse + +**Mõtisklusküsimused:** +- Kuidas võiks keriv pealkiri mõjutada visuaalpuudega või liikumistundlikke kasutajaid? +- Millised moodsad CSS tehnikad võiksid saavutada sarnaseid visuaalseid efekte ligipääsetavamalt? +- Miks on oluline kasutada tänapäevaseid veebistandardeid, mitte aegunud elemente? + +Uuri rohkem [aegunud ja tühistatud HTML elementide kohta](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements), et mõista, kuidas veebistandardid arenevad kasutajakogemuse parandamiseks. ## Loengu-järgne viktoriin [Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/16) -## Ülevaade ja iseseisev õppimine - -HTML on 'proovitud ja tõeline' ehitussüsteem, mis on aidanud veebist kujundada selle, mis see täna on. Uurige veidi selle ajalugu, õppides vanu ja uusi silte. Kas saate aru, miks mõned sildid vananenuks muutusid ja mõned lisati? Milliseid silte võiks tulevikus tutvustada? +## Ülevaade ja Iseteemastus + +**Sügavda oma HTML teadmisi** + +HTML on olnud veebipõhi üle 30 aasta, arenenud lihtsast dokumentimärgistuskeelest keeruka platvormini interaktiivsete rakenduste loomiseks. Selle evolutsiooni mõistmine aitab paremini hinnata kaasaegseid veebistandardeid ja teha teadlikumaid arendusotsuseid. + +**Soovitatavad õpiteed:** + +1. **HTML ajalugu ja areng** + - Uuri ajatelge HTML 1.0-st kuni HTML5-ni + - Uuri, miks teatud sildid tühistati (ligipääsetavus, mobiilne sõbralikkus, hooldatavus) + - Uuri uusimaid HTML funktsioone ja ettepanekuid + +2. **Semantiline HTML süvitsi** + - Õpi täielikku [HTML5 semantiliste elementide nimekirja](https://developer.mozilla.org/docs/Web/HTML/Element) + - Harjuta, millal kasutada `<article>`, `<section>`, `<aside>`, ja `<main>` + - Uuri ARIA atribuute parandatud ligipääsetavuse jaoks + +3. **Kaasaegne veebiarendus** + - Uuri, kuidas ehitada [responsiivseid veebilehti](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) Microsoft Learni kaudu + - Mõista, kuidas HTML seostub CSS-i ja JavaScriptiga + - Õpi veebijõudlust ja SEO parimaid praktikaid + +**Mõtisklusküsimused:** +- Milliseid tühistatud HTML silte avastasid ja miks need eemaldati? +- Milliseid uusi HTML funktsioone pakutakse tulevikus? +- Kuidas aitab semantiline HTML veebipõhist ligipääsetavust ja SEO-d? + +### ⚡ **Mida saad järgmise 5 minutiga teha** +- [ ] Ava DevTools (F12) ja vaata oma lemmiklehe HTML struktuuri +- [ ] Loo lihtne HTML fail põhisiltidega: `<h1>`, `<p>`, ja `<img>` +- [ ] Kontrolli oma HTML-i W3C HTML valideerijaga veebis +- [ ] Proovi lisada oma HTML-i kommentaar `<!-- kommentaar -->` abil + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida loengu-järgne viktoriin ja korrasta semantilisi HTML kontseptsioone +- [ ] Ehita enda kohta lihtne veebileht korraliku HTML struktuuriga +- [ ] Katseta eri pealkirjatasemeid ja teksti vorminduse silte +- [ ] Lisa pilte ja linke, et harjutada multimeedia integreerimist +- [ ] Uuri HTML5 võimalusi, mida sa veel pole proovinud + +### 📅 **Sinu nädala pikkune HTML teekond** +- [ ] Täida terrariumiprojekti ülesanne semantilise märgistusega +- [ ] Loo ligipääsetav veebileht kasutades ARIA silte ja rolle +- [ ] Harjuta vormide loomist eri sisenditüüpidega +- [ ] Uuri HTML5 API-sid nagu localStorage või geolocation +- [ ] Õpi responsiivseid HTML mustreid ja mobiil-esimese disaini +- [ ] Vaata teisi arendajaid HTML koodi ja õpi parimatest praktikatest + +### 🌟 **Sinu kuu pikkune veebi alus** +- [ ] Ehita portfoolio veebileht, mis demonstreerib HTML oskusi +- [ ] Õpi HTML mallimist raamistiku nagu Handlebars abil +- [ ] Panusta avatud lähtekoodiga projektidesse, parandades HTML dokumentatsiooni +- [ ] Oma HTML mõõdukaid keerukamaid kontseptsioone nagu kohandatud elemendid +- [ ] Integreeri HTML koos CSS raamistikute ja JavaScripti teekidega +- [ ] Ole mentoriks teistele, kes õpivad HTML põhialuseid + +## 🎯 Sinu HTML valdamise ajakava + +```mermaid +timeline + title HTML õppimise progressioon + + section Alus (5 minutit) + Dokumentide struktuur: DOCTYPE deklaratsioon + : HTML juurelement + : Pea vs keha mõistmine + + section Metaandmed (10 minutit) + Olulised Meta Sildid: Märgistikodeering + : Vaateakna seadistus + : Brauseri ühilduvus + + section Sisu loomine (15 minutit) + Piltide integreerimine: Õiged failiteed + : Alt-teksti tähtsus + : Isetsuletavad sildid + + section Paigutuse organiseerimine (20 minutit) + Mahuti strateegia: Div elemendid struktuuri jaoks + : Klasside ja ID-de nimetamine + : Pesastatud elementide hierarhia + + section Semantiline valdamine (30 minutit) + Tähenduslik märgistus: Pealkirjade hierarhia + : Ekraanilugeja navigeerimine + : Juurdepääsetavuse parimad tavad + + section Edasijõudnud kontseptsioonid (1 tund) + HTML5 funktsioonid: Kaasaegsed semantilised elemendid + : ARIA atribuudid + : Jõudluse kaalutlused + + section Professionaalsed oskused (1 nädal) + Koodi organiseerimine: Failide struktuuri mustrid + : Hooldatav märgistus + : Meeskonnatöö + + section Eksperdi tase (1 kuu) + Kaasaegsed veebistandardid: Progressiivne täiustamine + : Ristbrauseri ühilduvus + : HTML spetsifikatsiooni uuendused +``` +### 🛠️ Sinu HTML tööriistakomplekti kokkuvõte -Lisateavet veebilehtede ja mobiilseadmete jaoks saitide loomise kohta leiate [Microsoft Learnist](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon). +Pärast selle tunni lõpetamist on sul nüüd: +- **Dokumendi struktuur**: Täielik HTML5 alus koos õige DOCTYPE-ga +- **Semantiline märgistus**: Mõtestatud sildid, mis parandavad ligipääsetavust ja SEO-d +- **Pildi integratsioon**: Õige failide korraldus ja alt-teksti kasutamine +- **Paigutuse konteinerid**: Tarkade klassinimedega div-ide strateegiline kasutus +- **Ligipääsetavuse teadlikkus**: Ekraanilugeja navigeerimise mõistmine +- **Moodsa standardi tundmine**: Praegused HTML5 praktikad ja aegunud siltide teadlikkus +- **Projekti alus**: Kindel baas CSS stiilimiseks ja JavaScripti interaktiivsuseks +**Järgmised sammud**: Sinu HTML struktuur on valmis CSS stiilimiseks! Semantiline alus, mida sa ehitasid, teeb järgmise tunni mõistmise palju lihtsamaks. ## Ülesanne -[Harjutage HTML-i: Looge blogi makett](assignment.md) +[Harjuta HTML-i: Ehita blogi makett](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file +<!-- CO-OP TRANSLATOR DISCLAIMER START --> +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, olge teadlik, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algkeeles tuleks pidada autoriteetseks allikaks. Töötlemise või kriitilise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tekkivate arusaamatuste või moonutuste eest. +<!-- CO-OP TRANSLATOR DISCLAIMER END --> \ No newline at end of file diff --git a/translations/et/3-terrarium/1-intro-to-html/assignment.md b/translations/et/3-terrarium/1-intro-to-html/assignment.md index 45c59ec84..7d778fa9b 100644 --- a/translations/et/3-terrarium/1-intro-to-html/assignment.md +++ b/translations/et/3-terrarium/1-intro-to-html/assignment.md @@ -1,53 +1,154 @@ <!-- CO_OP_TRANSLATOR_METADATA: { - "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a", - "translation_date": "2025-10-11T12:00:26+00:00", + "original_hash": "650e63282e1dfa032890fcf5c1c4119d", + "translation_date": "2026-01-08T09:48:42+00:00", "source_file": "3-terrarium/1-intro-to-html/assignment.md", "language_code": "et" } --> -# HTML-i harjutusülesanne: Blogi maketi loomine +# HTML harjutusülesanne: ehita blogi visand -## Eesmärk +## Õpieesmärgid -Kavanda ja kodeeri käsitsi isikliku blogi avalehe HTML-struktuur. See harjutus aitab sul praktiseerida semantilist HTML-i, paigutuse planeerimist ja koodi organiseerimist. +Rakenda oma HTML-oskusi, kujundades ja kodeerides tervikliku blogi avalehe struktuuri. See praktiline ülesanne tugevdab semantilise HTML mõisteid, ligipääsetavuse parimaid tavasid ja professionaalse koodi organiseerimise oskusi, mida kasutad kogu veebiarenduse teekonna jooksul. -## Juhised +**Selle ülesande täites sa:** +- Harjutad veebilehe paigutuse planeerimist enne kodeerimist +- Rakendad semantilisi HTML elemente asjakohaselt +- Loovad ligipääsetava ja korrapärase markupe +- Arendad professionaalseid kodeerimisharjumusi koos kommentaaride ja organiseerimisega -1. **Kavanda oma blogi makett** - - Joonista visuaalne makett oma blogi avalehe jaoks. Lisa peamised sektsioonid, nagu päis, navigeerimine, põhisisu, külgriba ja jalus. - - Võid kasutada paberit ja skaneerida oma visandi või kasutada digitaalseid tööriistu (nt Figma, Adobe XD, Canva või isegi PowerPoint). +## Projekti nõuded -2. **Määra HTML-elemendid** - - Koosta nimekiri HTML-elementidest, mida plaanid kasutada igas sektsioonis (nt `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>` jne). +### Osa 1: Kujunduse planeerimine (visuaalne visand) -3. **Kirjuta HTML-märgendid** - - Kodeeri käsitsi HTML oma maketi jaoks. Keskendu semantilisele struktuurile ja parimatele praktikatele. - - Lisa vähemalt 10 erinevat HTML-elementi. - - Lisa kommentaare, et selgitada oma valikuid ja struktuuri. +**Loo oma blogi avalehe visuaalne visand, mis sisaldab:** +- Päis saidi pealkirja ja navigeerimisega +- Peamine sisuala vähemalt 2-3 blogipostituse eelvaatega +- Külgriba täiendava informatsiooniga (teave, uuemad postitused, kategooriad) +- Jalus kontaktinfo või linkidega -4. **Esita oma töö** - - Laadi üles oma visand/makett ja HTML-fail. - - Soovi korral kirjuta lühike refleksioon (2–3 lauset) oma disainiotsuste kohta. +**Visandi loomise võimalused:** +- **Käsitsi joonistatud visand**: Kasuta paberit ja pliiatsit, seejärel pildista või skaneeri oma kujundus +- **Digitaalsed tööriistad**: Figma, Adobe XD, Canva, PowerPoint või mõni joonistusprogramm +- **Juhtraamatööriistad**: Balsamiq, MockFlow või muu sarnane juhtraamatu tarkvara + +**Märgista oma visandi sektsioonid** HTML elementidega, mida plaanid kasutada (nt "Päis - `<header>`", "Blogipostitused - `<article>`"). + +### Osa 2: HTML elementide planeerimine + +**Koosta nimekiri, mis seob iga visandi sektsiooni konkreetsete HTML elementidega:** + +``` +Example: +- Site Header → <header> +- Main Navigation → <nav> with <ul> and <li> +- Blog Post → <article> with <h2>, <p>, <time> +- Sidebar → <aside> with <section> elements +- Page Footer → <footer> +``` + +**Nõutavad elemendid lisamiseks:** +Sinu HTML peab sisaldama vähemalt 10 erinevat semantilist elementi sellest loendist: +- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>` +- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>` +- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>` + +### Osa 3: HTML teostus + +**Kodeeri oma blogi avaleht järgides neid standardeid:** + +1. **Dokumendi struktuur**: Sisalda korrektne DOCTYPE, html, head ja body elemendid +2. **Semantiline märgistus**: Kasuta HTML elemente nende mõeldud otstarbel +3. **Ligipääsetavus**: Lisa piltidele korrektsed alt-tekstid ja tähenduslikud lingitekstid +4. **Koodi kvaliteet**: Kasuta ühtlast taanet ja tähenduslikke kommentaare +5. **Sisu**: Sisalda realistlik blogisisu (saad kasutada ka asendusteksti) + +**Näidis HTML struktuur:** +```html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>My Personal Blog + + + +
+

My Blog Title

+ +
+ + +
+ +
+ + + + + +
+ +
+ + +``` + +### Osa 4: Refleksioon + +**Kirjuta lühike refleksioon (3–5 lauset), mille käigus vastad:** +- Millised HTML elemendid pakkusid sulle enim kindlustunnet kasutamisel? +- Milliseid väljakutseid kogesid planeerimisel või kodeerimisel? +- Kuidas aitas semantiline HTML sinu sisu organiseerida? +- Mida teeksid järgmises HTML projektis teisiti? + +## Esitamise kontrollnimekiri + +**Enne esitust veendu, et sul on:** +- [ ] Visuaalne visand HTML elementide märgistustega +- [ ] Täielik HTML fail nõuetekohase dokumendisstruktuuriga +- [ ] Vähemalt 10 erinevat semantilist HTML elementi korrektselt kasutatud +- [ ] Tähenduslikud kommentaarid, mis selgitavad sinu koodi struktuuri +- [ ] Kehtiv HTML süntaks (testi brauseris) +- [ ] Kirjutatud refleksioon, mis vastab ülesande küsimustele ## Hindamiskriteeriumid -| Kriteerium | Silmapaistev | Piisav | Vajab parandamist | -|------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------| -| Visuaalne makett | Selge, detailne makett koos märgistatud sektsioonide ja läbimõeldud paigutusega | Põhiline makett, kus mõned sektsioonid on märgistatud | Minimaalne või ebaselge makett; puuduvad sektsioonide märgistused | -| HTML-elemendid | Kasutab 10+ semantilist HTML-elementi; näitab struktuuri ja parimate praktikate mõistmist | Kasutab 5–9 HTML-elementi; mõningane semantiline struktuur | Kasutab vähem kui 5 elementi; puudub semantiline struktuur | -| Koodi kvaliteet | Hästi organiseeritud, loetav kood koos kommentaaridega; järgib HTML-i standardeid | Enamasti organiseeritud kood; vähe kommentaare | Ebaorganiseeritud kood; kommentaarid puuduvad | -| Refleksioon | Läbimõeldud refleksioon disainiotsuste ja väljakutsete kohta | Põhiline refleksioon | Puudub refleksioon või see ei ole asjakohane | +| Kriteerium | Silmapaistev (4) | Pädev (3) | Arenev (2) | Algaja (1) | +|------------|------------------|-----------|------------|------------| +| **Planeerimine & disain** | Põhjalik, selgelt märgistatud visand, mis näitab head arusaamist paigutusest ja HTML semantilisest struktuurist | Selge visand, kus enamik sektsioone on nõuetekohaselt märgistatud | Lihtne visand mõningase märgistusega, näitab üldist arusaama | Väike või ebaselge visand, puudub sektsioonide õige identifitseerimine | +| **Semantilise HTML kasutamine** | Kasutab korrektselt 10+ semantilist elementi, demonstreerib sügavat HTML struktuuri ja ligipääsetavuse mõistmist | Kasutab korrektselt 8-9 semantilist elementi, näitab head semantilise märgistuse mõistmist | Kasutab 6-7 semantilist elementi, mõningane segadus sobivas kasutamises | Kasutab vähem kui 6 elemente või eksib semantiliste elementide kasutamisel | +| **Koodi kvaliteet ja organiseeritus** | Väga hästi organiseeritud, korrektselt taanetud kood koos põhjalike kommentaaridega ja täiusliku HTML süntaksiga | Hästi organiseeritud kood hea taanetuse ja kasulike kommentaaridega ning kehtiva süntaksiga | Peamiselt organiseeritud kood mõnede kommentaaridega ja väikeste süntaksiprobleemidega | Kehv organiseeritus, minimaalsed kommentaarid, mitmed süntaksivead | +| **Ligipääsetavus ja parimad tavad** | Suurepärane ligipääsetavus, tähenduslik alt-tekst, korrektne pealkirjade hierarhia, järgitakse kõiki kaasaegseid HTML parimaid tavasid | Hea ligipääsetavus, sobivad pealkirjad ja alt-tekstid, järgitakse enamust parimatest tavadest | Mõningane ligipääsetavuse arvestus, põhilised alt-tekstid ja pealkirjastruktuur | Piiratud ligipääsetavuse arvestus, kehv pealkirjastruktuur, ei järgi parimaid tavasid | +| **Refleksioon ja õppimine** | Sisukas refleksioon, mis demonstreerib sügavat HTML kontseptsioonide mõistmist ja põhjalikku analüüsi õppimise protsessist | Hea refleksioon, mis näitab põhiliste mõistete arusaamist ja eneseanalüüsi õppimisest | Lihtne refleksioon piiratud arusaamaga HTML kontseptsioonidest või õppimisest | Väike või puuduv refleksioon, vähene arusaam õpitust | + +## Õppematerjalid + +**Olulised allikad:** +- [MDN HTML Elementide viide](https://developer.mozilla.org/docs/Web/HTML/Element) – täielik juhend kõigi HTML elementide kohta +- [HTML5 semantilised elemendid](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) – semantilise märgistuse mõistmine +- [Veebi ligipääsetavuse juhised](https://www.w3.org/WAI/WCAG21/quickref/) – ligipääsetava veebisisu loomine +- [HTML valideerija](https://validator.w3.org/) – kontrolli oma HTML süntaksit -## Näpunäited +**Edu näpunäited:** +- Alusta visandist enne koodi kirjutamist +- Kasuta brauseri arendajatööriistu HTML struktuuri vaatamiseks +- Testi lehte erinevate ekraanisuurustega (ka ilma CSS-ita) +- Loe oma HTML-i valjult läbi, et kontrollida loogilist struktuuri +- Mõtle, kuidas ekraaniluger sinu lehe struktuuri tõlgendaks -- Kasuta semantilisi HTML-märgendeid parema ligipääsetavuse ja SEO jaoks. -- Organiseeri oma kood taande ja kommentaaridega. -- Vaata [MDN HTML Elementide viidet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) juhiste saamiseks. -- Mõtle, kuidas sinu paigutust saaks tulevastes ülesannetes laiendada või kujundada. +> 💡 **Meelespea**: see ülesanne keskendub HTML struktuurile ja semantikale. Ära muretse visuaalse stiili pärast – selleks on CSS! Sinu leht võib tunduda lihtne, kuid see peab olema hästi organiseeritud ja tähenduslik. --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi pingutame täpsuse tagamiseks, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Kriitilise tähtsusega teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega väärarusaamade eest. + \ No newline at end of file diff --git a/translations/et/3-terrarium/2-intro-to-css/README.md b/translations/et/3-terrarium/2-intro-to-css/README.md index 4a50c009a..0542e4516 100644 --- a/translations/et/3-terrarium/2-intro-to-css/README.md +++ b/translations/et/3-terrarium/2-intro-to-css/README.md @@ -1,284 +1,735 @@ -# Terrariumi projekt, 2. osa: Sissejuhatus CSS-i - -![Sissejuhatus CSS-i](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.et.png) -> Sketchnote autor: [Tomomi Imura](https://twitter.com/girlie_mac) +# Terrarium projekt Osa 2: Sissejuhatus CSS-i + +```mermaid +journey + title Teie CSS stiilimise teekond + section Alus + CSS-faili linkimine: 3: Student + Aru saada kaskaadist: 4: Student + Õppida pärimist: 4: Student + section Valijad + Elemendi sihtimine: 4: Student + Klassimustrid: 5: Student + ID spetsiifilisus: 5: Student + section Paigutus + Elementide positsioneerimine: 4: Student + Kasti loomine: 5: Student + Terrariumi ehitamine: 5: Student + section Viimistlus + Lisada visuaalseid efekte: 5: Student + Reageeriv disain: 5: Student + Klaasi peegeldused: 5: Student +``` +![Sissejuhatus CSS-i](../../../../translated_images/webdev101-css.3f7af5991bf53a20.et.png) +> Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) + +Kas mäletad, kuidas su HTML-terraarium nägi üsna lihtne välja? CSS on koht, kus me muudame selle tavalise struktuuri millekski visuaalselt atraktiivseks. + +Kui HTML on nagu maja karkassi ehitamine, siis CSS on kõik, mis teeb sellest koduse tunde – värvid, mööbli paigutus, valgustus ja ruumide omavaheline voog. Mõtle, kuidas Versailles’ loss sai alguse lihtsast jahimajast, kuid hoolikas kaunistus ja paigutus muutsid selle üheks maailma imelisimaks hooneks. + +Täna muudame su terraariumi funktsionaalsest viimistletuks. Õpid, kuidas elemente täpselt positsioneerida, tekitada reageerivaid paigutusi erinevatele ekraanisuurustele ja luua visuaalset atraktiivsust, mis teeb veebilehtedest kaasahaaravad. + +Selle õppetunni lõpuks näed, kuidas strateegiline CSS stiil võib oluliselt parandada su projekti. Lisame su terraariumile stiili. + +```mermaid +mindmap + root((CSS põhialused)) + Cascade + Spetsiifilisuse reeglid + Pärimine + Eelistuste järjekord + Konflikti lahendamine + Selectors + Elemendi sildid + Klassid (.class) + ID-d (#id) + Kombinaatorid + Box Model + Margin + Piir + Täide + Sisu + Layout + Positsioneerimine + Kuvatüübid + Flexbox + Võrk + Visual Effects + Värvid + Varjud + Üleminekud + Animatsioonid + Responsive Design + Meedia päringud + Paindlikud ühikud + Vaateava meta + Mobiilne esmalt +``` +## Eelõppe viktoriin -## Loengu-eelne viktoriin +[Eelõppe viktoriin](https://ff-quizzes.netlify.app/web/quiz/17) -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/17) +## CSS-iga alustamine -### Sissejuhatus +CSS-i mõistetakse tihti lihtsalt kui „asjade kauniks tegemist“, kuid sellel on palju laiem eesmärk. CSS on nagu filmi režissöör – sa kontrollid mitte ainult seda, kuidas kõik välja näeb, vaid ka seda, kuidas see liigub, kuidas reageerib interaktsioonile ja kohandub erinevates olukordades. -CSS ehk kaskaadlaadistikud lahendavad olulise veebiarenduse probleemi: kuidas muuta oma veebisait visuaalselt atraktiivseks. Rakenduste kujundamine muudab need kasutajasõbralikumaks ja ilusamaks; CSS-i abil saab luua ka reageeriva veebidisaini (Responsive Web Design, RWD) – see võimaldab rakendustel hea välja näha olenemata ekraani suurusest. CSS ei ole ainult välimuse parandamiseks; selle spetsifikatsioon hõlmab ka animatsioone ja teisendusi, mis võimaldavad luua rakendustele keerukaid interaktsioone. CSS-i töörühm aitab hoida ajakohasena praeguseid CSS-i spetsifikatsioone; nende tööd saab jälgida [World Wide Web Consortiumi lehel](https://www.w3.org/Style/CSS/members). +Kaasaegne CSS on erakordselt võimekas. Sa saad kirjutada koodi, mis automaatselt kohandab paigutust telefonidele, tahvelarvutitele ja lauaarvutitele. Võid luua sujuvaid animatsioone, mis juhivad kasutajate tähelepanu õigesse kohta. Kui kõik töötab koos, on tulemused päris muljetavaldavad. -> Pange tähele, et CSS on pidevalt arenev keel, nagu kogu veeb, ja mitte kõik brauserid ei toeta uuemaid spetsifikatsioone. Kontrollige alati oma rakendusi, kasutades [CanIUse.com](https://caniuse.com). +> 💡 **Pro Näpunäide**: CSS areneb pidevalt uute funktsioonide ja võimekustega. Kontrolli alati [CanIUse.com](https://caniuse.com), et veenduda veebilehitsejate toe olemasolus uute CSS-i funktsioonide kasutamisel tootmisprojektides. -Selles tunnis lisame oma veebitarrendile stiile ja õpime tundma mitmeid CSS-i kontseptsioone: kaskaadi, pärandamist, selektoreid, positsioneerimist ja CSS-i kasutamist paigutuste loomiseks. Selle käigus kujundame terrariumi ja loome selle tegeliku välimuse. +**Selles õppetunnis saavutatav:** +- **Luuakse** täislahendus visuaalseks disainiks su terraariumile, kasutades kaasaegseid CSS tehnikaid +- **Uuritakse** põhikontseptsioone nagu kaskaad, pärandumine ja CSS selektorid +- **Rakendatakse** reageerivaid positsioneerimis- ja paigutusstrateegiaid +- **Ehitatakse** terraariumi konteiner kasutades CSS kujundeid ja stiile -### Eeltingimus +### Eeldus -Teie terrariumi HTML peaks olema valmis ja kujundamiseks valmis. +Peaksid olema eelmisel tunnil lõpetanud HTML-struktuuri oma terraariumile ja see valmis stiilimiseks. -> Vaadake videot +> 📺 **Videoresurss**: Vaata seda kasulikku videoülevaadet +> +> [![CSS Põhitõed](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I) -> -> [![Git ja GitHubi põhialuste video](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I) +### CSS faili seadistamine -### Ülesanne +Enne stiilimist peame ühendama CSS-i meie HTML-iga. See ühendus ütleb brauserile, kust leida meie terraariumi stiilinõudeid. -Looge oma terrariumi kausta uus fail nimega `style.css`. Importige see fail `` sektsiooni: +Loo oma terraariumi kausta uus fail nimega `style.css`, seejärel lisa see oma HTML dokumendi `` sektsiooni: ```html ``` ---- +**Mis selle koodi eesmärk on:** +- **Loob** ühenduse su HTML- ja CSS-failide vahel +- **Käsib** brauseril laadida ja rakendada selles failis `style.css` olevad stiilid +- **Kasutab** atribuuti `rel="stylesheet"`, mis näitab, et tegemist on CSS failiga +- **Viitab** failile teekonnaga `href="./style.css"` -## Kaskaad +## CSS kaskaadi mõistmine -Kaskaadlaadistikud sisaldavad ideed, et stiilid "kaskaadivad", nii et stiili rakendamine sõltub selle prioriteedist. Veebisaidi autori määratud stiilid on prioriteetsemad kui brauseri määratud stiilid. "Inline" stiilid on prioriteetsemad kui välises stiililehes määratud stiilid. +Oled mõelnud, miks CSS-i nimetatakse "Cascading" Style Sheets? Stiilid voolavad nagu juga ning mõnikord võivad need üksteisega konflikti minna. -### Ülesanne +Mõtle sõjaväe käsustruktuurile – kindral korraldab, et „kõik sõdurid kannavad rohelist“, kuid konkreetne käsk sinu üksusele ütleb „kanna tseremooniaks sinist vormi“. Spetsiifilisem juhis on määrav. CSS järgib sama loogikat ja selle hierarhia mõistmine teeb silumise palju lihtsamaks. -Lisage oma `

` sildile inline-stiil "color: red": +### Katsetame kaskaadi prioriteeti -```HTML +Vaatame, kuidas kaskaad toimib, luues stiilide konflikti. Esiteks lisa oma `

` märgile inline-stiil: + +```html

My Terrarium

``` -Seejärel lisage oma `style.css` faili järgmine kood: +**Mida see kood teeb:** +- **Rakendab** otse punase värvi `

` elemendile, kasutades inline stiili +- **Kasutab** `style` atribuuti, et manustada CSS otse HTML-i +- **Loob** selle elemendi jaoks kõrgeima prioriteediga stiilireegli -```CSS +Seejärel lisa see reegel oma `style.css` faili: + +```css h1 { - color: blue; + color: blue; } ``` -✅ Milline värv kuvatakse teie veebirakenduses? Miks? Kas leiate viisi stiilide ülekirjutamiseks? Millal te seda teha tahaksite või miks mitte? +**Ülaltoodud puhul oleme:** +- **Määratlenud** CSS reegli kõigile `

` elementidele +- **Seadnud** teksti värviks sinise välimise stiililehe kaudu +- **Loonud** madalama prioriteediga reegli võrreldes inline stiilidega + +✅ **Teadmiste kontroll**: Milline värv kuvatakse sinu veebirakenduses? Miks see värv võidab? Tule meelde olukordi, kus võiksid stiile üle kirjutada? + +```mermaid +flowchart TD + A["Sirvija leiab h1 elemendi"] --> B{"Kontrolli reaalajas stiile"} + B -->|Leitud| C["style='color: red'"] + B -->|Puudub| D{"Kontrolli ID reegleid"} + C --> E["Rakenda punane värv (1000 punkti)"] + D -->|Leitud| F["#heading { color: green }"] + D -->|Puudub| G{"Kontrolli klassi reegleid"} + F --> H["Rakenda roheline värv (100 punkti)"] + G -->|Leitud| I[".title { color: blue }"] + G -->|Puudub| J{"Kontrolli elemendi reegleid"} + I --> K["Rakenda sinine värv (10 punkti)"] + J -->|Leitud| L["h1 { color: purple }"] + J -->|Puudub| M["Kasuta sirvija vaikimisi"] + L --> N["Rakenda lilla värv (1 punkt)"] + + style C fill:#ff6b6b + style F fill:#51cf66 + style I fill:#339af0 + style L fill:#9775fa +``` +> 💡 **CSS Prioriteedijärjestus (kõrgeimast madalaimani):** +> 1. **Inline stiilid** (style atribuut) +> 2. **ID-d** (#myId) +> 3. **Klassid** (.myClass) ja atribuudid +> 4. **Elemendi selektorid** (h1, div, p) +> 5. **Brauseri vaikestiilid** ---- +## CSS pärandumine praktikas -## Pärandamine +CSS pärandumine käitub nagu genetikad – elemendid pärivad teatud omadusi vanemate elementidelt. Kui määrad font-familyst body elemendile, kasutavad kõik tekstid selle sama fonti automaatselt. See on nagu Habsburgide perekonna iseloomulik lõualuu, mis ilmus põlvest põlve, ilma et seda eraldi igaühele määratletaks. -Stiilid päranduvad esivanema stiilist järeltulijale, nii et pesastatud elemendid pärivad oma vanemate stiilid. +Kuid mitte kõike ei pärandata. Teksti omadused nagu font ja värvid päranduvad, kuid paigutuse omadused nagu marginaalid ja piirid mitte. Nii nagu lapsed võivad pärida füüsilisi omadusi, kuid mitte vanemate moestiile. -### Ülesanne +### Vaadeldes fontade pärandumist -Määrake keha (body) fondiks kindel font ja kontrollige, kas pesastatud elemendi font muutub: +Vaata pärandumist praktikasse, määrates font-familyst `` elemendile: -```CSS +```css body { - font-family: helvetica, arial, sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } ``` -Avage oma brauseri konsoolis 'Elements' vahekaart ja jälgige H1 fondi. See pärib oma fondi kehast, nagu brauseris näidatud: +**Mis siin juhtub:** +- **Seab** fondiperekonna kogu lehele, suunates `` elemendile +- **Kasutab** fontide pinu koos varufontidega parema brauseri ühilduvuse tagamiseks +- **Rakendab** kaasaegseid süsteemifonte, mis näevad hea välja kõigil operatsioonisüsteemidel +- **Tagab**, et kõik alam-elemendid pärivad selle fondi, kui ei ole spetsiifiliselt muudetud -![pärandatud font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.et.png) +Ava brauseri arendajatööriistad (F12), mine Elements vaatesse ja vaata oma `

` elementi. Näed, et see pärib fondiperekonna body-lt: -✅ Kas saate muuta pesastatud stiili pärima mõne muu omaduse? +![pärandatud font](../../../../translated_images/1.cc07a5cbe114ad1d.et.png) ---- +✅ **Katsetamise aeg**: Proovi teisi pärandatavaid omadusi `` peal nagu `color`, `line-height` või `text-align`. Mis juhtub su pealkirja ja teiste elementidega? + +> 📝 **Pärandatavad omadused hõlmavad**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility` +> +> **Mittepärandatavad omadused hõlmavad**: `margin`, `padding`, `border`, `width`, `height`, `position` + +### 🔄 **Pedagoogiline kontroll** +**CSS aluste mõistmine**: Enne selektorite juurde minekut veendu, et suudad: +- ✅ Selgitada kaskaadi ja pärandumise erinevust +- ✅ Ennustada, milline stiil spetsiifilisuse konflikti võidab +- ✅ Tuvastada, millised omadused päranduvad vanemalt elemendilt +- ✅ Õigesti ühendada CSS failid HTML-iga + +**Kiire test**: Kui sul on need stiilid, mis värvi on `

` elemendi tekst sees `
`? +```css +div { color: blue; } +.special { color: green; } +h1 { color: red; } +``` +*Vastus: Punane (elemendi selektor sihib otse h1)* + +## CSS selektorite valdamine + +CSS selektorid on viis, kuidas sihtida konkreetseid elemente stiilimiseks. Need töötavad nagu täpsed juhised – selle asemel, et öelda „maja“, ütled „sinine maja punase uksega Maple tänaval“. -## CSS-i selektorid +CSS pakub erinevaid võimalusi olla spetsiifiline ja õige selektori valimine on nagu õige tööriista valik ülesande jaoks. Mõnikord tuleb stiilida kõiki uksi naabruskonnas, mõnikord vaid ühte konkreetselt ust. -### Sildid +### Elemendi selektorid (sildid) -Siiani on teie `style.css` failis ainult mõned sildid kujundatud ja rakendus näeb üsna kummaline välja: +Elemendi selektorid sihivad HTML elemente nende sildinime järgi. Need sobivad põhistiilide seadmiseks, mis kehtivad kogu leheküljele: -```CSS +```css body { - font-family: helvetica, arial, sans-serif; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; } h1 { - color: #3a241d; - text-align: center; + color: #3a241d; + text-align: center; + font-size: 2.5rem; + margin-bottom: 1rem; } ``` -Selline sildi kujundamise viis annab teile kontrolli unikaalsete elementide üle, kuid terrariumis olevate paljude taimede stiilide juhtimiseks peate kasutama CSS-i selektoreid. +**Millised stiilid need on:** +- **Seab** ühtse tüpograafia kogu veebilehele `body` selektoriga +- **Eemaldab** brauseri vaikimisi marginaalid ja täited paremaks kontrolliks +- **Stiilid** kõik päiselemendid värvi, joonduse ja vahedega +- **Kasutab** `rem` ühikuid skaleeritava ja ligipääsetava font-suuruse jaoks -### ID-d +Kuigi elemendi selektorid on head üldiseks stiilimiseks, vajad spetsiifilisemaid selektoreid, et stiilida individuaalseid komponente nagu taimed su terraariumis. -Lisage stiil, et paigutada vasak- ja parempoolsed konteinerid. Kuna on ainult üks vasak ja üks parem konteiner, on need märgitud ID-dega. Nende kujundamiseks kasutage `#`: +### ID selektorid unikaalsetele elementidele -```CSS +ID selektorid kasutavad `#` sümbolit ja sihivad elemente konkreetsete `id` atribuutidega. Kuna ID-d peavad olema lehel unikaalsed, sobivad nad hästi individuaalsete erielementide stiilimiseks, näiteks meie vasak- ja parempoolsete taimede konteinerid. + +Loome meie terraariumi külgkontainerite stiilid, kuhu taimed elama lähevad: + +```css #left-container { - background-color: #eee; - width: 15%; - left: 0px; - top: 0px; - position: absolute; - height: 100%; - padding: 10px; + background-color: #f5f5f5; + width: 15%; + left: 0; + top: 0; + position: absolute; + height: 100vh; + padding: 1rem; + box-sizing: border-box; } #right-container { - background-color: #eee; - width: 15%; - right: 0px; - top: 0px; - position: absolute; - height: 100%; - padding: 10px; + background-color: #f5f5f5; + width: 15%; + right: 0; + top: 0; + position: absolute; + height: 100vh; + padding: 1rem; + box-sizing: border-box; } ``` -Siin olete paigutanud need konteinerid absoluutse positsioneerimisega ekraani vasakule ja paremale küljele ning määranud nende laiuse protsentides, et need saaksid väiksemate mobiiliekraanide jaoks skaleeruda. +**Mida see kood saavutab:** +- **Positsioneerib** konteinerid vasakule ja paremale ekraani servadele `absolute` positsioneerimise abil +- **Kasutab** `vh` ühikuid (ekraani kõrgus) reageeriva kõrguse jaoks, mis kohandub ekraanisuurusega +- **Rakendab** `box-sizing: border-box`, et täide oleks arvestatud kogulaiusesse +- **Eemaldab** mittevajalikud `px` ühikud nullväärtustelt, et kood oleks puhtam +- **Seab** õrna tausta värvi, mis on silmadele sõbralikum kui karm hall -✅ See kood kordub üsna palju, seega pole see "DRY" (Don't Repeat Yourself); kas leiate parema viisi nende ID-de kujundamiseks, võib-olla ID ja klassi abil? Peaksite muutma märgistust ja refaktoreerima CSS-i: +✅ **Koodi kvaliteedi väljakutse**: Pane tähele, kuidas see CSS rikub DRY (Don't Repeat Yourself) põhimõtet. Kas saad ümber kirjutada, kasutades nii ID-d kui klassi? +**Parendatud lähenemine:** ```html
+
``` -### Klassid +```css +.container { + background-color: #f5f5f5; + width: 15%; + top: 0; + position: absolute; + height: 100vh; + padding: 1rem; + box-sizing: border-box; +} -Eelmises näites kujundasite kaks unikaalset elementi ekraanil. Kui soovite, et stiilid rakenduksid paljudele elementidele ekraanil, saate kasutada CSS-i klasse. Tehke seda, et paigutada taimed vasak- ja parempoolsetesse konteineritesse. +#left-container { + left: 0; +} -Pange tähele, et iga taime HTML-märgistusel on ID-de ja klasside kombinatsioon. ID-sid kasutatakse siin hiljem JavaScripti abil terrariumi taimede paigutuse manipuleerimiseks. Klassid aga annavad kõigile taimedele kindla stiili. +#right-container { + right: 0; +} +``` +### Klas­si selektorid korduvate stiilide jaoks + +Klassi selektorid kasutavad `.` märki ja sobivad ideaalselt, kui tahad sama stiili rakendada mitmele elemendile. Erinevalt ID-dest saab klasse HTML-is korduvalt kasutada, mis teeb need sobivaks järjepidevate stiilide jaoks. + +Meie terraariumis vajab iga taim sarnast stiili, kuid igaüks peab olema ka individuaalselt positsioneeritud. Kasutame klasside kombinatsiooni ühiste stiilide jaoks ja ID-sid unikaalseks positsioneerimiseks. + +**Näide iga taime HTML struktuurist:** ```html
- plant + Decorative plant for terrarium
``` -Lisage oma `style.css` faili järgmine kood: +**Olulised elemendid selgitatuna:** +- **Kasutab** `class="plant-holder"` ühtseks konteineri stiiliks kõigi taimedega +- **Rakendab** `class="plant"` ühistele piltidele stiili ja käitumist +- **Sisaldab** unikaalset `id="plant1"` individuaalseks positsioneerimiseks ja JavaScripti interaktsiooniks +- **Pakub** kirjeldavat alt-teksti ekraanilugejate jaoks + +Lisa need stiilid oma `style.css` faili: -```CSS +```css .plant-holder { - position: relative; - height: 13%; - left: -10px; + position: relative; + height: 13%; + left: -0.6rem; } .plant { - position: absolute; - max-width: 150%; - max-height: 150%; - z-index: 2; + position: absolute; + max-width: 150%; + max-height: 150%; + z-index: 2; + transition: transform 0.3s ease; +} + +.plant:hover { + transform: scale(1.05); } ``` -Selles koodilõigus on märkimisväärne suhtelise ja absoluutse positsioneerimise segu, mida käsitleme järgmises jaotises. Vaadake, kuidas kõrgusi käsitletakse protsentides: +**Mis siin toimub:** +- **Luuakse** suhteline positsioneerimine taimede hoidjatele, et luua paigutuskontekst +- **Seadistatakse** iga taimede hoidja kõrguseks 13%, tagades, et kõik taimed mahuvad vertikaalselt vaatamata kerimisele +- **Liigutatakse** hoidjaid veidi vasakule, et taimed oleksid konteineris paremini tsentreeritud +- **Lubatakse** taimedele reageeriv suuruse muutmine, kasutades `max-width` ja `max-height` omadusi +- **Kasutatakse** `z-index` taimed paigutamiseks üle teiste elementide terraariumis +- **Lisatakse** õrn hover-efekt CSS üleminekutega, et parandada kasutajakogemust + +✅ **Kriitiline mõtlemine**: Miks vajame nii `.plant-holder` kui ka `.plant` selektoreid? Mis juhtuks, kui prooviksime kasutada ainult ühte? + +> 💡 **Disainimuster**: Konteiner (`.plant-holder`) kontrollib paigutust ja positsioneerimist, sisu (`.plant`) kontrollib välimust ja skaleerimist. See eraldatus teeb koodi hooldamise ja kohandamise lihtsamaks. + +## CSS positsioneerimise mõistmine + +CSS positsioneerimine on nagu lavastaja roll teatris – sa juhid, kus iga näitleja seisab ja kuidas nad laval liiguvad. Mõned jäävad tavapärasesse režiimi, teised vajavad spetsiifilist asukohta draama loomiseks. + +Positsioneerimist mõistes muutuvad paljud paigutusprobleemid lahendatavaks. Vajad navigeerimisriba, mis jääb ekraani ülaossa kerides? Positsioneerimine teeb selle võimalikuks. Tahad tööriistaekraani, mis ilmub täpsesse kohta? See on ka positsioneerimine. + +### Viis positsioneerimise väärtust + +```mermaid +quadrantChart + title CSS paigutusstrateegia + x-axis Dokumendi voog --> Eemaldatud voost + y-axis Staatiline positsioon --> Täpne kontroll + quadrant-1 Absoluutne + quadrant-2 Fikseeritud + quadrant-3 Staatiline + quadrant-4 Kleepuv + + Static: [0.2, 0.2] + Relative: [0.3, 0.6] + Absolute: [0.8, 0.8] + Fixed: [0.9, 0.7] + Sticky: [0.5, 0.9] +``` +| Positsiooniväärtus | Käitumine | Kasutusjuhtum | +|--------------------|-----------|---------------| +| `static` | Vaikimisi voog, ignoreerib top/left/right/bottom omadusi | Tavaline dokumendi paigutus | +| `relative` | Positsioneeritud oma normaalsest kohast suhteliselt | Väikesed korrigeerimised, positsioneerimiskontekst | +| `absolute` | Positsioneeritud lähima positsioneeritud vanema suhtes | Täpne paigutus, ülekattelemendid | +| `fixed` | Positsioneeritud ekraani vaatamise ala suhtes | Navigeerimisribad, ujuvad elemendid | +| `sticky` | Vahetab staatilise ja fikseeritud vahel kerimise põhjal | Jääv päis kerimise ajal | + +### Positsioneerimine meie terraariumis + +Meie terraarium kasutab positsioneerimise liikide strateegilist kombinatsiooni, et luua soovitud paigutus: + +```css +/* Container positioning */ +.container { + position: absolute; /* Removes from normal flow */ + /* ... other styles ... */ +} -Määrasite taimehoidja kõrguseks 13%, mis on hea suurus, et kõik taimed oleksid igas vertikaalses konteineris nähtavad ilma kerimiseta. +/* Plant holder positioning */ +.plant-holder { + position: relative; /* Creates positioning context */ + /* ... other styles ... */ +} -Taimehoidja on nihutatud vasakule, et taimed oleksid oma konteineris rohkem tsentreeritud. Piltidel on suur hulk läbipaistvat tausta, et neid oleks lihtsam lohistada, seega tuleb neid vasakule nihutada, et need ekraanil paremini sobituksid. +/* Plant positioning */ +.plant { + position: absolute; /* Allows precise placement within holder */ + /* ... other styles ... */ +} +``` -Seejärel on taimele määratud maksimaalne laius 150%. See võimaldab sellel brauseri suuruse muutumisel skaleeruda. Proovige oma brauseri suurust muuta; taimed jäävad oma konteineritesse, kuid skaleeruvad vastavalt. +**Mõistame positsioneerimise strateegiat:** +- **Absoluutsed konteinerid** eemaldatakse dokumendi voost ja kinnitatakse ekraani servadele +- **Suhtelised taimede hoidjad** loovad positsioneerimiskonteksti, jäädes dokumendi voogu +- **Absoluutsed taimed** saab täpselt positsioneerida oma suhteliste konteinerite sees +- **See kombinatsioon** võimaldab taimedel virnastuda vertikaalselt, olles samas individuaalselt positsioneeritavad + +> 🎯 **Miks see on oluline**: `plant` elemendid vajavad absoluutset positsioneerimist, et saaksid järgmises tunnis lohistada. Absoluutne positsioon eemaldab nad normaalsest paigutusest, muutes lohistamisinteraktsiooni võimalikuks. + +✅ **Katsetamise aeg**: Proovi muuta positsioneerimise väärtusi ja vaata tulemusi: +- Mis juhtub, kui muudad `.container` positsiooni `absolute`-lt `relative`-ks? +- Kuidas muutub paigutus, kui `.plant-holder` kasutab `absolute` asemel `relative`? +- Mis juhtub, kui vahetad `.plant` positsioneerimise `relative` vastu? + +### 🔄 **Õppekontroll** +**CSS positsioneerimise meistriklass**: Peatu ja kontrolli oma arusaamist: +- ✅ Kas suudad seletada, miks taimedele on drag-and-drop jaoks vaja absoluutset positsioneerimist? +- ✅ Kas mõistad, kuidas suhtelised konteinerid loovad positsioneerimiskonteksti? +- ✅ Miks kasutavad külgkonteinerid absoluutset positsioneerimist? +- ✅ Mis juhtuks, kui eemaldada positsioneerimise määrangud täiesti? + +**Reaalmaailma seos**: Mõtle, kuidas CSS positsioneerimine peegeldab reaalse maailma paigutust: +- **Staatiline**: Raamatud riiulis (loomulik järjekord) +- **Suhteline**: Raamatu veidi liigutamine, kuid selle koha säilitamine +- **Absoluutne**: Märkmiku panemine täpselt kindlale leheküljele +- **Fixeeritud**: Kleebis, mis jääb nähtavaks, kui lehti keerad + +## Terrariumi ehitamine CSS-iga + +Nüüd ehitame ainult CSS-iga klaaspurgi – pilte ega graafikaprogrammi pole vaja. + +Realistliku klaasi, varjude ja sügavuse efekti loomine positsioneerimise ja läbipaistvuse abil demonstreerib CSS visuaalseid võimalusi. See tehnika peegeldab, kuidas Bauhausi arhitektid kasutasid lihtsaid geomeetrilisi vorme keerukate ja ilusate struktuuride loomiseks. Kui neid põhimõtteid mõistad, tunned ära CSS-i tehnikad paljude veebidisainide taga. + +```mermaid +flowchart LR + A[Purgi kaas] --> E[Täielik terraarium] + B[Purgi seinad] --> E + C[Mulla kiht] --> E + D[Purgi põhjaosa] --> E + F[Klaasi efektid] --> E + + A1["50% laius
5% kõrgus
Üleval asend"] --> A + B1["60% laius
80% kõrgus
Ümarad nurgad
0,5 läbipaistvus"] --> B + C1["60% laius
5% kõrgus
Tumepruun
Põhjakihi"] --> C + D1["50% laius
1% kõrgus
Alumine positsioon"] --> D + F1["Õrnad varjud
Läbipaistvus
Z-indeksi kihtimine"] --> F + + style E fill:#d1e1df,stroke:#3a241d + style A fill:#e8f5e8 + style B fill:#e8f5e8 + style C fill:#8B4513 + style D fill:#e8f5e8 +``` +### Klaaspurgi komponentide loomine -Samuti on märkimisväärne z-indeksi kasutamine, mis kontrollib elemendi suhtelist kõrgust (nii et taimed asetsevad konteineri peal ja näivad olevat terrariumis sees). +Ehitage terrariumi purk tükkhaaval. Iga osa kasutab absoluutset positsioneerimist ja protsendipõhist suurust, et saavutada reageeriv disain: -✅ Miks on teil vaja nii taimehoidja kui ka taime CSS-selektorit? +```css +.jar-walls { + height: 80%; + width: 60%; + background: #d1e1df; + border-radius: 1rem; + position: absolute; + bottom: 0.5%; + left: 20%; + opacity: 0.5; + z-index: 1; + box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); +} -## CSS-i positsioneerimine +.jar-top { + width: 50%; + height: 5%; + background: #d1e1df; + position: absolute; + bottom: 80.5%; + left: 25%; + opacity: 0.7; + z-index: 1; + border-radius: 0.5rem 0.5rem 0 0; +} -Positsioneerimisomaduste (staatiline, suhteline, fikseeritud, absoluutne ja kleepuv positsioneerimine) segamine võib olla veidi keeruline, kuid õigesti tehes annab see teile hea kontrolli oma lehtede elementide üle. +.jar-bottom { + width: 50%; + height: 1%; + background: #d1e1df; + position: absolute; + bottom: 0; + left: 25%; + opacity: 0.7; + border-radius: 0 0 0.5rem 0.5rem; +} + +.dirt { + width: 60%; + height: 5%; + background: #3a241d; + position: absolute; + border-radius: 0 0 1rem 1rem; + bottom: 1%; + left: 20%; + opacity: 0.7; + z-index: -1; +} +``` -Absoluutselt positsioneeritud elemendid paigutatakse lähima positsioneeritud esivanema suhtes ja kui sellist pole, siis dokumendi keha suhtes. +**Terrariumi ehituse mõistmine:** +- **Kasutab** protsendipõhiseid mõõtmeid vastavalt ekraanisuurusele kohanemiseks +- **Paigutab** elemendid absoluutse positsioneerimisega täpselt üksteise peale ja joondades +- **Rakendab** erinevaid läbipaistvuse tasemeid klaasi läbipaistvuse efekti loomiseks +- **Kasutab** `z-index` kihistamist, et taimed paistaksid purgi sees +- **Lisab** peeneid varjutusi ja täpsemaid äärekuju nurki realistlikuma väljanägemise jaoks -Suhteliselt positsioneeritud elemendid paigutatakse CSS-i juhiste alusel, et kohandada nende asukohta algsest positsioonist. +### Reageeriv disain protsentides -Meie näites on `plant-holder` suhteliselt positsioneeritud element, mis on paigutatud absoluutse positsioneerimisega konteineri sisse. Tulemuseks on see, et külgriba konteinerid on kinnitatud vasakule ja paremale, ning taimehoidja on pesastatud, kohandades end külgribade sees, jättes ruumi taimede paigutamiseks vertikaalsesse ritta. +Pane tähele, kuidas kõik mõõtmed on protsentides, mitte fikseeritud pikslites: -> Ka `plant` ise on absoluutse positsioneerimisega, mis on vajalik selle lohistatavaks muutmiseks, nagu avastate järgmises tunnis. +**Miks see oluline on:** +- **Tagab**, et terrarium skaleerub proportsionaalselt ükskõik millisel ekraanisuurusel +- **Hoiab** purgi komponentide visuaalsed suhted +- **Pakub** ühtset kogemust nii mobiiltelefonides kui suurtel lauaarvutitel +- **Võimaldab** disainil kohaneda, murtmata paigutust -✅ Katsetage külgkonteinerite ja taimehoidja positsioneerimistüüpide vahetamist. Mis juhtub? +### CSS ühikud töös -## CSS-i paigutused +Kasutame `rem` ühikuid äärekuju nurkades (border-radius), mis skaleerub suhtes juurteksti suurusega. See loob kasutajasõbralikumaid disaine, mis austavad kasutaja fontide eelistusi. Loe [CSS suhtelistest ühikutest](https://www.w3.org/TR/css-values-3/#font-relative-lengths) ametlikust spetsifikatsioonist. -Nüüd kasutate õpitut, et luua terrarium ise, kasutades ainult CSS-i! +✅ **Visuaalne katsetamine**: Proovi muutes neid väärtusi ja jälgi muutusi: +- Muuda purgi läbipaistvust 0.5-lt 0.8-le – kuidas see klaasi välimust mõjutab? +- Kohanda mulla värv `#3a241d` pealt `#8B4513` peale – milline visuaalne efekt tekib? +- Muuda mulla `z-index` väärtuseks 2 – mis kihistusega juhtub? -Kõigepealt kujundage `.terrarium` div-i lapsed CSS-i abil ümarateks ristkülikuteks: +### 🔄 **Õppekontroll** +**CSS visuaalse disaini mõistmine**: Kinnita oma arusaamist CSS-ist: +- ✅ Kuidas protsendipõhised mõõtmed loovad reageeriva disaini? +- ✅ Miks läbipaistvus loob klaasi läbipaistvuse efekti? +- ✅ Mis roll on `z-index` kihistamisel? +- ✅ Kuidas äärekujude väärtused loovad purgi kuju? -```CSS -.jar-walls { - height: 80%; - width: 60%; - background: #d1e1df; - border-radius: 1rem; - position: absolute; - bottom: 0.5%; - left: 20%; - opacity: 0.5; - z-index: 1; -} +**Disaini põhimõte**: Pane tähele, kuidas ehitame keerukaid visuaale lihtsate kujudega: +1. **Ristkülikud** → **Ümarad ristkülikud** → **Purgi komponendid** +2. **Lamedad värvid** → **Läbipaistvus** → **Klaasi efekt** +3. **Individuaalsed elemendid** → **Kihiline koostis** → **3D välimus** -.jar-top { - width: 50%; - height: 5%; - background: #d1e1df; - position: absolute; - bottom: 80.5%; - left: 25%; - opacity: 0.7; - z-index: 1; -} +--- -.jar-bottom { - width: 50%; - height: 1%; - background: #d1e1df; - position: absolute; - bottom: 0%; - left: 25%; - opacity: 0.7; -} +## GitHub Copiloti agentide väljakutse 🚀 -.dirt { - width: 60%; - height: 5%; - background: #3a241d; - position: absolute; - border-radius: 0 0 1rem 1rem; - bottom: 1%; - left: 20%; - opacity: 0.7; - z-index: -1; -} -``` +Kasuta Agent režiimi ja täida järgmine väljakutse: -Pange tähele siin protsentide kasutamist. Kui vähendate oma brauseri suurust, näete, kuidas purk samuti skaleerub. Samuti märkate purgi elementide laiuse ja kõrguse protsente ning seda, kuidas iga element on absoluutselt paigutatud keskele, kinnitatud vaateakna põhja. +**Kirjeldus:** Loo CSS animatsioon, mis paneb terrariumi taimed õrnalt kõiglema, imiteerides looduse tuuleefekti. See aitab sul harjutada CSS animatsioone, transformatsioone ja võtmeraame, samal ajal suurendades terrariumi visuaalset ilu. -Kasutame ka `rem`-i border-radius jaoks, mis on fondiga seotud mõõtühik. Lugege selle suhtelise mõõtühiku kohta rohkem [CSS-i spetsifikatsioonist](https://www.w3.org/TR/css-values-3/#font-relative-lengths). +**Üleskutse:** Lisa CSS võtmeraami animatsioonid, mis panevad terrariumi taimed kergelt vasakule-paremale kõiglema. Loo kõikumisanimatsioon, mis pöörab iga taime veidi (2-3 kraadi) vasakule ja paremale 3-4 sekundiga ning rakenda seda `.plant` klassile. Veendu, et animatsioon korduks lõputult ja kasutaks loomuliku liikumise jaoks kerget tõmmet. -✅ Proovige muuta purgi värve ja läbipaistvust võrreldes mullaga. Mis juhtub? Miks? +Õpi veel [agendi režiimist](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). ---- +## 🚀 Väljakutse: Klaasi peegelduste lisamine -## 🚀Väljakutse +Valmis oma terrariumi täiustama realistlike klaasipeegeldustega? See tehnika lisab sügavust ja realismi disainile. -Lisage purgi vasakule alumisele alale "mull" läige, et muuta see klaasilaadsemaks. Kujundate `.jar-glossy-long` ja `.jar-glossy-short`, et need näeksid välja nagu peegeldus. See näeks välja selline: +Sa lood peened helkivad läikekujud, mis simuleerivad valguse peegeldumist klaasipindadelt. See lähenemine on sarnane Renessansi maalikunstnikele nagu Jan van Eyck, kes kasutasid valgust ja peegeldust klaasi kolme-mõõtmelise mulje loomiseks. Siin on, mida sa saavutada tahad: -![valmis terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.et.png) +![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.et.png) -Loengu-järgse viktoriini täitmiseks läbige see Learn moodul: [Kujunda oma HTML-rakendus CSS-iga](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) +**Sinu ülesanne:** +- **Loo** pehmed valged või heledat värvi ovaalsed kujundid klaasipeegeldusteks +- **Paiguta** need purgi vasakule küljele strateegiliselt +- **Rakenda** sobiv läbipaistvus ja udususe efektid valguse peegeldamiseks realistlikult +- **Kasuta** `border-radius` orgaaniliste mullilaadsete kujundite loomiseks +- **Katseta** gradientide või varjude kasutamist reaalsust suurendamaks ## Loengu-järgne viktoriin [Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/18) -## Ülevaade ja iseseisev õppimine +## Laienda oma CSS teadmisi + +CSS võib alguses tunduda keeruline, kuid põhikontseptsioonide mõistmine loob tugeva aluse keerukamate tehnikate jaoks. + +**Järgmised CSS valdkonnad:** +- **Flexbox** - lihtsustab elementide joondamist ja jaotamist +- **CSS Grid** - pakub võimsad tööriistad keerukate paigutuste loomiseks +- **CSS muutujad** - vähendab kordusi ja parandab hooldatavust +- **Reageeriv disain** - tagab saidi optimaalset töö erinevate ekraanisuurustega + +### Interaktiivsed õppematerjalid + +Harjuta neid mõisteid lõbusate ja praktiliste mängudega: +- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Õpi Flexboxi põneva väljakutse kaudu +- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - Õpi CSS Gridi virtuaalse porgandi kasvatamisega +- 🎯 [CSS Battle](https://cssbattle.dev/) - Testi oma CSS oskusi kodeerimisvõistlustel + +### Täiendav õppimine + +Täielike CSS alusteadmiste saamiseks lõpeta Microsoft Learn moodul: [Stiilita oma HTML rakendust CSS-i abil](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Ava DevTools ja kontrolli CSS stiile ükskõik millisel veebilehel Elements paneelilt +- [ ] Loo lihtne CSS fail ja seo see HTML lehega +- [ ] Proovi muuta värve eri meetoditega: heks, RGB ja nimedega +- [ ] Harjuta kastimudelit, lisades div-elemendile paddingut ja marginit + +### 🎯 **Mida suudad selle tunniga saavutada** +- [ ] Täida järeltunni viktoriin ja korrasta CSS alusteadmisi +- [ ] Stiilita oma HTML leht fontide, värvide ja ruumiga +- [ ] Loo lihtne paigutus flexboxi või gridiga +- [ ] Katseta CSS üleminekuid sujuvate efektide saavutamiseks +- [ ] Harjuta reageerivat disaini meedia päringutega + +### 📅 **Sinu nädalane CSS seiklus** +- [ ] Täida terrariumi stiilimise ülesanne loovalt +- [ ] Saa CSS Grid meister foto galeriide ehitamisega +- [ ] Õpi CSS animatsioone, et anda oma disainile elu +- [ ] Uuri CSS eeltöötlusi nagu Sass või Less +- [ ] Õpi disainipõhimõtteid ja rakenda neid CSS-is +- [ ] Analüüsi ja reprodutseeri huvitavaid veebidisainilahendusi + +### 🌟 **Sinu kuu pikkune disaini meistriklass** +- [ ] Ehita täielik reageeriv veebidisaini süsteem +- [ ] Õpi CSS-in-JS või kasuta utiliite nagu Tailwind +- [ ] Panusta avatud lähtekoodiga projektidesse CSS täiustustega +- [ ] Saa kogenenuks keerukates CSS nippides, nagu kohandatud omadused ja containment +- [ ] Loo korduvkasutatavaid komponentide raamatukogusid modulaarse CSS-iga +- [ ] Juhenda teisi CSS õppijaid ja jaga disaini teadmisi + +## 🎯 Sinu CSS meistriklassi ajaskaala + +```mermaid +timeline + title CSS õppeprotsess + + section Alused (10 minutit) + Faili ühendamine: Ühenda CSS HTML-iga + : Mõista kaskaadi reegleid + : Õpi pärimise põhialuseid + + section Selektorid (15 minutit) + Elementide sihtimine: Elemendi selektorid + : Klassimustrid + : ID spetsiifika + : Kombinaatorid + + section Kasti mudel (20 minutit) + Paigutuse alused: Marginaalid ja täitmine + : Piira omadused + : Sisu mõõtmed + : Box-sizing käitumine + + section Positsioneerimine (25 minutit) + Elemendi paigutus: Staatiline vs suhteline + : Absoluutne positsioneerimine + : Z-indeksi kihistamine + : Reageerivad ühikud + + section Visuaalne disain (30 minutit) + Stiilide valdamine: Värvid ja läbipaistvus + : Varjud ja efektid + : Üleminekud + : Transforma omadused + + section Reageeriv disain (45 minutit) + Mitme seadme tugi: Meedia päringud + : Paindlikud paigutused + : Mobiiil-eelne lähenemine + : Vaateakna optimeerimine + + section Täiustatud tehnikad (1 nädal) + Kaasaegne CSS: Flexbox paigutused + : CSS Grid süsteemid + : Kohandatud omadused + : Animatsiooni võtmeraid + + section Professionaalsed oskused (1 kuu) + CSS arhitektuur: Komponendi mustrid + : Hooldatav kood + : Tulemuslikkuse optimeerimine + : Ristbrauseri ühilduvus +``` +### 🛠️ Sinu CSS tööriistakasti kokkuvõte + +Pärast selle tunni lõpetamist saad: +- **Kaskaaditeadmised**: Kuidas stiilid päranduvad ja üksteist üle kirjutavad +- **Valijate valdamine**: Täpne sihtimine elementide, klasside ja ID-dega +- **Positsioneerimisoskused**: Strateegiline elementide paigutus ja kihistamine +- **Visuaalne disain**: Klaasi efektide, varjude ja läbipaistvuse loomine +- **Reageerivad tehnikad**: Protsendipõhised paigutused, mis kohanevad iga ekraaniga +- **Koodi organiseerimine**: Puhas ja hooldatav CSS struktuur +- **Moodne praktika**: Suhteliste ühikute ja ligipääsetavate disainimustrite kasutamine -CSS võib tunduda petlikult lihtne, kuid rakenduse täiuslikuks kujundamiseks kõigi brauserite ja ekraanisuuruste jaoks on palju väljakutseid. CSS-Grid ja Flexbox on tööriistad, mis on loodud selle töö veidi struktureeritumaks ja usaldusväärsemaks muutmiseks. Õppige nende tööriistade kohta, mängides [Flexbox Froggy](https://flexboxfroggy.com/) ja [Grid Garden](https://codepip.com/games/grid-garden/). +**Järgmised sammud**: Sinu terrariumil on nüüd nii struktuur (HTML) kui ka stiil (CSS). Viimane tund lisab interaktiivsuse JavaScriptiga! -## Ülesanne +## Kodutöö -[CSS-i refaktoreerimine](assignment.md) +[CSS Refaktoreerimine](assignment.md) --- + **Vastutusest loobumine**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta arusaamatuste või valesti tõlgenduste eest, mis võivad tekkida selle tõlke kasutamise tõttu. \ No newline at end of file +See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi kasutame täpsuse tagamiseks parimaid vahendeid, võib automaatsetes tõlgetes esineda vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta käesoleva tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/3-terrarium/2-intro-to-css/assignment.md b/translations/et/3-terrarium/2-intro-to-css/assignment.md index 4ff48ba2f..9d6864ff2 100644 --- a/translations/et/3-terrarium/2-intro-to-css/assignment.md +++ b/translations/et/3-terrarium/2-intro-to-css/assignment.md @@ -1,41 +1,136 @@ -# CSS Refaktoreerimise Ülesanne +# CSS ümberkujundamise ülesanne ## Eesmärk -Refaktoreeri terrariumi projekt, kasutades paigutuseks **Flexboxi** või **CSS Grid'i**. Uuenda HTML-i ja CSS-i vastavalt, et saavutada kaasaegne ja responsiivne disain. Sa ei pea rakendama lohistatavaid elemente—keskendu ainult paigutusele ja stiilile. +Muuda oma terrariumiprojekt kasutama kaasaegseid CSS-i paigutustehnikaid! Uuenda praegune absoluutse positsioneerimise lähenemine, et rakendada **Flexboxi** või **CSS Gridi** parema hooldatavuse ja reageerimisvõimega disaini saavutamiseks. See ülesanne kutsub sind rakendama kaasaegseid CSS-i standardeid, säilitades samal ajal oma terrariumi visuaalse atraktiivsuse. -## Juhised +Mõistmine, millal ja kuidas kasutada erinevaid paigutusmeetodeid, on kaasaegse veebiarenduse oluline oskus. See harjutus ühendab traditsioonilised positsioneerimistehnikad kaasaegsete CSS-i paigutussüsteemidega. -1. **Loo uus versioon** terrariumi rakendusest. Uuenda märgistus ja CSS, et kasutada paigutuseks Flexboxi või CSS Grid'i. -2. **Veendu, et kunst ja elemendid oleksid paigas** nagu algses versioonis. -3. **Testi oma disaini** vähemalt kahes erinevas brauseris (nt Chrome, Firefox, Edge). -4. **Tee ekraanipildid** oma terrariumist igas brauseris, et näidata ühilduvust. -5. **Esita** oma uuendatud kood ja ekraanipildid. +## Ülesande juhised + +### 1. faas: analüüs ja planeerimine +1. **Vaata üle oma praegune terrariumi kood** - Tuvasta, millised elemendid kasutavad hetkel absoluutpositsioneerimist +2. **Vali oma paigutusmeetod** - Otsusta, kas Flexbox või CSS Grid sobib sinu disainieesmärkidega paremini +3. **Joonista oma uus paigutusstruktuur** - Planeeri, kuidas konteinerid ja taimede elemendid organiseeritakse + +### 2. faas: rakendamine +1. **Loo uus versioon** oma terrariumiprojektist eraldi kaustas +2. **Uuenda HTML-struktuuri** vastavalt vajadusele, et toetada valitud paigutusmeetodit +3. **Ümberkujunda CSS**, kasutades Flexboxi või CSS Gridi absoluutpositsioneerimise asemel +4. **Säilita visuaalne järjepidevus** - Veendu, et taimed ja terrariumi klaaspurk oleksid samades positsioonides +5. **Rakenda reageerimisvõime** - Sinu paigutus peaks sujuvalt kohanema erinevate ekraanisuurustega + +### 3. faas: testimine ja dokumentatsioon +1. **Cross-browser testimine** - Kontrolli, et sinu disain töötab Chrome’is, Firefoxis, Edges ja Safaris +2. **Reageerimisvõime testimine** - Vaata oma paigutust mobiilis, tahvelarvutis ja lauaarvuti ekraanidel +3. **Dokumentatsioon** - Lisa CSS-i kommentaarid, mis selgitavad paigutuse valikuid +4. **Ekraanipildid** - Tee pildid oma terrariumist erinevates brauserites ja ekraanisuurustes + +## Tehnilised nõuded + +### Paigutuse rakendamine +- **Vali ÜKS**: rakenda kas Flexbox VõI CSS Grid (mitte mõlemat sama elementide jaoks) +- **Reageerimisvõimeline disain**: kasuta suhtelisi ühikuid (`rem`, `em`, `%`, `vw`, `vh`), mitte fikseeritud pikslit +- **Juurdepääsetavus**: säilita korralik semantiline HTML-struktuur ja alt-tekst +- **Koodikvaliteet**: kasuta järjepidevaid nimetamisstandardeid ja korralda CSS loogiliselt + +### Kaasaegsed CSS-i funktsioonid, mida lisada +```css +/* Example Flexbox approach */ +.terrarium-container { + display: flex; + flex-direction: column; + min-height: 100vh; + align-items: center; + justify-content: center; +} + +.plant-containers { + display: flex; + justify-content: space-between; + width: 100%; + max-width: 1200px; +} + +/* Example Grid approach */ +.terrarium-layout { + display: grid; + grid-template-columns: 1fr 3fr 1fr; + grid-template-rows: auto 1fr; + min-height: 100vh; + gap: 1rem; +} +``` + +### Brauserite toe nõuded +- **Chrome/Edge**: Viimased 2 versiooni +- **Firefox**: Viimased 2 versiooni +- **Safari**: Viimased 2 versiooni +- **Mobiilibrauserid**: iOS Safari, Chrome Mobile + +## Töö tulemused + +1. **Uuendatud HTML-fail** parem semantiline struktuur +2. **Ümberkujundatud CSS-fail** kasutades kaasaegseid paigutustehnikaid +3. **Ekraanipiltide kogu**, mis näitab cross-browser ühilduvust: + - Lauaarvuti vaade (1920x1080) + - Tahvelarvuti vaade (768x1024) + - Mobiilvaade (375x667) + - Vähemalt 2 erinevat brauserit +4. **README.md fail**, mis dokumenteerib: + - Sinu paigutuse valik (Flexbox vs Grid) ja põhjendused + - Ümberkujundamise käigus esinenud väljakutsed + - Brauserite ühilduvuse märkused + - Käsud koodi jooksutamiseks ## Hindamiskriteeriumid -| Kriteerium | Näidiskvaliteet | Piisav | Vajab Parandamist | -|--------------|------------------------------------------------------------------------|-------------------------------------|---------------------------------------| -| Paigutus | Täielikult refaktoreeritud, kasutades Flexboxi või CSS Grid'i; visuaalselt atraktiivne ja responsiivne | Mõned elemendid refaktoreeritud; osaline Flexboxi või Grid'i kasutamine | Vähe või üldse mitte Flexboxi või Grid'i kasutamist; paigutus muutmata | -| Brauseritevaheline ühilduvus | Ekraanipildid mitmest brauserist; ühtlane välimus | Ekraanipildid ühest brauserist; väikesed erinevused | Puuduvad ekraanipildid või suured erinevused | -| Koodi kvaliteet | Puhas, hästi organiseeritud HTML/CSS; selged kommentaarid | Mõningane organiseeritus; vähe kommentaare | Segane kood; kommentaarid puuduvad | +| Kriteerium | Näidissobiv (4) | Pädev (3) | Arenev (2) | Algusjärgus (1) | +|------------|-----------------|-----------|------------|-----------------| +| **Paigutuse rakendamine** | Meistriklass Flexbox/Gridi kasutamisel täiustatud funktsioonidega; täielikult reageeriv | Õige rakendus hea reageerimiskäitumisega | Põhiline rakendus väikeste reageerimisprobleemidega | Ebatäielik või vale paigutuse rakendus | +| **Koodi kvaliteet** | Puhas, hästi organiseeritud CSS tähendusrikaste kommentaaride ja järjepideva nimetusega | Hea organiseeritus mõne kommentaariga | Piisav organiseeritus väheste kommentaaridega | Kehv organiseeritus; raskesti mõistetav | +| **Cross-browser ühilduvus** | Täiuslik järjepidevus kõigis nõutud brauserites ekraanipiltidega | Hea ühilduvus väikeste dokumenteeritud erinevustega | Mõned ühilduvusprobleemid, mis ei mõjuta funktsionaalsust | Suured ühilduvusprobleemid või puuduv testimine | +| **Reageerimisvõime** | Erakordne mobiilist lähtuv lähenemine sujuvate murdepunktidega | Hea reageerimiskäitumine sobivate murdepunktidega | Põhilised reageerimisfunktsioonid väikeste paigutusvigadega | Piiratud või katkenud reageerimiskäitumine | +| **Dokumentatsioon** | Ulatuslik README üksikasjalike selgituste ja arusaamadega | Hea dokumentatsioon, mis hõlmab kõiki vajalikke elemente | Põhiline dokumentatsioon väheste selgitustega | Puudulik või puuduv dokumentatsioon | + +## Kasulikud ressursid + +### Paigutusmeetodi juhendid +- 📖 [Täielik juhend Flexboxile](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- 📖 [Täielik juhend CSS Gridile](https://css-tricks.com/snippets/css/complete-guide-grid/) +- 📖 [Flexbox vs Grid - vali õige tööriist](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/) + +### Brauserite testimise tööriistad +- 🛠️ [Brauseri arendustööriistade reageerimisvõime režiim](https://developer.chrome.com/docs/devtools/device-mode/) +- 🛠️ [Can I Use - Funktsioonitugi](https://caniuse.com/) +- 🛠️ [BrowserStack - mitme brauseri testimine](https://www.browserstack.com/) + +### Koodikvaliteedi tööriistad +- ✅ [CSS valideerija](https://jigsaw.w3.org/css-validator/) +- ✅ [HTML valideerija](https://validator.w3.org/) +- ✅ [WebAIM kontrastsuse kontrollija](https://webaim.org/resources/contrastchecker/) + +## Boonusväljakutsed -## Näpunäited +🌟 **Täiustatud paigutused**: Rakenda mõlemaid, nii Flexboxi kui ka Gridi erinevates disaini osades +🌟 **Animatsioonide lisamine**: Lisa CSS-i üleminekuid või animatsioone, mis töötavad uue paigutusega +🌟 **Tume režiim**: Rakenda CSS-i kohandatud omadustel põhinev teemavahetaja +🌟 **Konteineri päringud**: Kasuta kaasaegseid konteineri päringu tehnikaid komponendi tasemel reageerimiseks -- Vaata üle [Flexboxi juhend](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ja [CSS Grid'i juhend](https://css-tricks.com/snippets/css/complete-guide-grid/). -- Kasuta brauseri arendustööriistu, et testida responsiivsust. -- Kommenteeri oma koodi selguse huvides. +> 💡 **Pea meeles**: eesmärk ei ole mitte ainult see, et see tööle hakkaks, vaid mõista, MIKS sinu valitud paigutusmeetod on just selle konkreetse disainiprobleemi parim lahendus! --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud AI-tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palun pange tähele, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleb lugeda autoriteetse allikana. Tähtsa teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste ega valesti tõlgenduste eest. + \ No newline at end of file diff --git a/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md index 1c3f93c4c..6d632141d 100644 --- a/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -1,61 +1,205 @@ -# Terrariumi projekt, osa 3: DOM-i manipuleerimine ja sulund - -![DOM ja sulund](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.et.png) -> Sketš Tomomi Imura poolt [Tomomi Imura](https://twitter.com/girlie_mac) - +# Terrarium projekt Osa 3: DOM-i manipuleerimine ja JavaScripti sulud + +```mermaid +journey + title Teie JavaScripti DOM-i teekond + section Alus + Mõista DOM-i: 3: Õpilane + Õpi sulgemisi: 4: Õpilane + Ühenda elemendid: 4: Õpilane + section Interaktsioon + Sea üles lohistamise sündmused: 4: Õpilane + Jälgi koordinaate: 5: Õpilane + Hoolitse liikumise eest: 5: Õpilane + section Viimistlus + Lisa korrastamine: 4: Õpilane + Testi funktsionaalsust: 5: Õpilane + Lõpeta terrarium: 5: Õpilane +``` +![DOM ja sulud](../../../../translated_images/webdev101-js.10280393044d7eaa.et.png) +> Sketš [Tomomi Imura](https://twitter.com/girlie_mac) poolt + +Tere tulemast ühe kõige kaasahaaravama veebiarenduse aspekti juurde – asjade interaktiivseks muutmine! Document Object Model (DOM) on nagu sild sinu HTMLi ja JavaScripti vahel ning täna kasutame seda, et tuua sinu terrarium ellu. Kui Tim Berners-Lee lõi esimese veebibrauseri, nägi ta ette veebi, kus dokumendid võiksid olla dünaamilised ja interaktiivsed – DOM teeb selle visiooni teoks. + +Samuti uurime JavaScripti sulgude kontseptsiooni, mis võib alguses kõlada hirmutavalt. Mõtle sulgudele kui „mälu taskutele“, kus sinu funktsioonid saavad meeles pidada olulist infot. Nagu iga taim sinu terrariumis omaks oma andmekirje, mis jälgib tema asukohta. Selle õppetüki lõpuks mõistad, kui loomulikud ja kasulikud sulud on. + +Siin on see, mida me ehitame: terrarium, kus kasutajad saavad taimi mugavalt lohistada ükskõik kuhu nad soovivad. Sa õpid DOM-i manipuleerimisvõtteid, mis toetavad kõike alates failide lohistamisest ja üleslaadimisest kuni interaktiivsete mängudeni. Teeme sinu terrariumist elava paiga. + +```mermaid +mindmap + root((DOM & JavaScript)) + DOM Tree + Elementide valimine + Omaduste juurde pääsemine + Sündmuste käsitlemine + Dünaamilised uuendused + Events + Osutussündmused + Hiire sündmused + Puute sündmused + Sündmuste kuulajad + Closures + Privaatmuutujad + Funktsiooni ulatus + Mälu püsivus + Oleku haldamine + Drag & Drop + Positsiooni jälgimine + Koordinaatide matemaatika + Sündmuste elutsükkel + Kasutajaliides + Modern Patterns + Sündmuste delegatsioon + Tõhusus + Seadmeteülene + Juurdepääsetavus +``` ## Loengu-eelne viktoriin [Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/19) -### Sissejuhatus +## DOM mõistmine: Sinu värav interaktiivsetele veebilehtedele + +Document Object Model (DOM) on viis, kuidas JavaScript suhtleb sinu HTML-elementidega. Kui sinu brauser laeb HTML-lehe, loob see sellelt lehelt mälu põhjal struktureeritud esitluse – see ongi DOM. Mõtle sellele nagu sugupuule, kus iga HTML element on pere liige, keda JavaScript saab ligipääseda, muuta või ümber paigutada. + +DOM-i manipuleerimine muudab staatilised lehed interaktiivseteks kodulehtedeks. Iga kord, kui näed nuppu, mis hover‘i peale värvi muudab, sisu uuendamist ilma lehte värskendamata või elemente, mida saad hiirega lohistada – see kõik on DOM-i manipuleerimine töös. + +```mermaid +flowchart TD + A["Dokument"] --> B["HTML"] + B --> C["Pea"] + B --> D["Keha"] + C --> E["Pealkiri"] + C --> F["Meta Sildid"] + D --> G["H1: Minu terrarium"] + D --> H["Div: Lehe konteiner"] + H --> I["Div: Vasak konteiner"] + H --> J["Div: Parem konteiner"] + H --> K["Div: Terrarium"] + I --> L["Taimede elemendid 1-7"] + J --> M["Taimede elemendid 8-14"] + + L --> N["img#taim1"] + L --> O["img#taim2"] + M --> P["img#taim8"] + M --> Q["img#taim9"] + + style A fill:#e1f5fe + style B fill:#f3e5f5 + style D fill:#e8f5e8 + style H fill:#fff3e0 + style N fill:#ffebee + style O fill:#ffebee + style P fill:#ffebee + style Q fill:#ffebee +``` +![DOM puu kujutis](../../../../translated_images/dom-tree.7daf0e763cbbba92.et.png) + +> DOM-i ja HTML-i märgenduse kujutis, mis viitab sellele. Autor [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) + +**Siin on, mis teeb DOM-i võimsaks:** +- **Annavad** struktureeritud viisi ligipääsuks iga lehe elemendile +- **Võimaldavad** dünaamilisi sisuuuendusi ilma lehe värskenduseta +- **Lubavad** reaalajas vastamise kasutaja toimingutele nagu klikid ja lohistamine +- **Loovad** aluse tänapäevastele interaktiivsetele veebirakendustele + +## JavaScripti sulud: organiseeritud ja võimeka koodi loomine + +[JavaScripti sulud](https://developer.mozilla.org/docs/Web/JavaScript/Closures) on nagu funktsioonile oma privaatne tööruum, millel on püsiv mälu. Mõtle Darwin’i tihastele Galápagose saartel, kes igaüks arendasid spetsialiseerunud nokad vastavalt oma keskkonnale – sulud töötavad sarnaselt, luues spetsiaalseid funktsioone, mis „mäletavad“ oma konkreetset konteksti isegi pärast seda, kui nende ülemfunktsioon on lõpetanud. + +Meie terrariumis aitavad sulud igal taimedel meeles pidada oma asukoha koordinaate sõltumatult. See muster esineb professionaalses JavaScripti arenduses laialdaselt ja on väärtuslik mõista. + +```mermaid +flowchart LR + A["dragElement(taim1)"] --> B["Loomist Sulgemine"] + A2["dragElement(taim2)"] --> B2["Loomist Sulgemine"] + + B --> C["Privaatmuutujad"] + B2 --> C2["Privaatmuutujad"] + + C --> D["pos1, pos2, pos3, pos4"] + C --> E["pointerDrag funktsioon"] + C --> F["elementDrag funktsioon"] + C --> G["stopElementDrag funktsioon"] + + C2 --> D2["pos1, pos2, pos3, pos4"] + C2 --> E2["pointerDrag funktsioon"] + C2 --> F2["elementDrag funktsioon"] + C2 --> G2["stopElementDrag funktsioon"] + + H["Taim 1 mäletab oma asukohta"] --> B + H2["Taim 2 mäletab oma asukohta"] --> B2 + + style B fill:#e8f5e8 + style B2 fill:#e8f5e8 + style C fill:#fff3e0 + style C2 fill:#fff3e0 +``` +> 💡 **Sulude mõistmine**: Sulud on JavaScriptis oluline teema ja paljud arendajad kasutavad neid aastaid, enne kui kõik teoreetilised aspektid täielikult selgeks saavad. Täna keskendume praktilisele rakendusele – näed sulud loomulikult tekkimas, kui ehitame oma interaktiivseid funktsioone. Mõistmine areneb koos sellega, kuidas nad lahendavad reaalseid probleeme. -DOM-i ehk "Dokumendi Objektimudeli" manipuleerimine on veebiarenduse oluline osa. Vastavalt [MDN-i](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) definitsioonile: "Dokumendi Objektimudel (DOM) on andmete esitus, mis kujutab veebidokumendi struktuuri ja sisu objekte." DOM-i manipuleerimisega seotud väljakutsed on sageli ajendanud kasutama JavaScripti raamistikke, mitte tavalist JavaScripti, et DOM-i hallata, kuid meie saame hakkama ka ilma! +![DOM puu kujutis](../../../../translated_images/dom-tree.7daf0e763cbbba92.et.png) -Lisaks tutvustatakse selles õppetükis [JavaScripti sulundit](https://developer.mozilla.org/docs/Web/JavaScript/Closures), mida võib mõelda kui funktsiooni, mis on teise funktsiooni sees, võimaldades sisemisel funktsioonil juurdepääsu välimise funktsiooni ulatusele. +> DOM-i ja HTML-i märgenduse kujutis, mis viitab sellele. Autor [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) -> JavaScripti sulundid on ulatuslik ja keeruline teema. Selles õppetükis käsitletakse kõige põhilisemat ideed, et terrariumi koodis leidub sulund: sisemine ja välimine funktsioon, mis on konstrueeritud nii, et sisemine funktsioon pääseb välimise funktsiooni ulatusele. Täpsema teabe saamiseks külastage [põhjalikku dokumentatsiooni](https://developer.mozilla.org/docs/Web/JavaScript/Closures). +Selles õppetükis viime lõpule oma interaktiivse terrariumi projekti, luues JavaScripti, mis võimaldab kasutajal taimede asukohti lehel manipuleerida. -Me kasutame sulundit DOM-i manipuleerimiseks. +## Enne alustamist: edu tagamine -Mõelge DOM-ist kui puust, mis kujutab kõiki viise, kuidas veebilehe dokumenti saab manipuleerida. Erinevad API-d (rakendusliidesed) on loodud selleks, et programmeerijad saaksid oma valitud programmeerimiskeeles DOM-i juurde pääseda ja seda redigeerida, muuta, ümber korraldada ja muul viisil hallata. +Sul on vaja oma HTML ja CSS faile varasematest terrariumi õppetundidest – me muudame selle staatilise disaini nüüd interaktiivseks. Kui liitudes esimese korraga, on nende õppetükkide lõpetamine oluline konteksti mõistmiseks. -![DOM-i puu kujutis](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.et.png) +Siin on see, mida ehitame: +- **Sile lohistamine ja kukutamine** kõigile terrariumi taimedele +- **Koordinaatide jälgimine**, nii et taimed mäletavad oma positsioone +- **Täielik interaktiivne liides** tavalise JavaScripti abil +- **Puhas ja organiseeritud kood** sulgude mustrite abil -> DOM-i ja seda viitava HTML-i märgistuse kujutis. Autor [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) +## JavaScripti faili seadistamine -Selles õppetükis lõpetame oma interaktiivse terrariumi projekti, luues JavaScripti, mis võimaldab kasutajal lehel taimi manipuleerida. +Loome JavaScripti faili, mis teeb sinu terrariumi interaktiivseks. -### Eeltingimus +**Samm 1: loo oma skriptifail** -Sul peaks olema terrariumi HTML ja CSS valmis. Selle õppetüki lõpuks saad taimi terrariumisse ja sealt välja liigutada, neid lohistades. +Terrariumi kausta loo uus fail nimega `script.js`. -### Ülesanne +**Samm 2: lisa JavaScript oma HTML-ile** -Loo oma terrariumi kaustas uus fail nimega `script.js`. Impordi see fail `` sektsiooni: +Lisa see skripti silt oma `index.html` faili `` sektsiooni: ```html - + ``` -> Märkus: kasuta `defer`-atribuuti, kui impordid välise JavaScripti faili HTML-faili, et JavaScript käivituks alles pärast HTML-faili täielikku laadimist. Võid kasutada ka `async`-atribuuti, mis võimaldab skriptil käivituda HTML-i parsimise ajal, kuid meie puhul on oluline, et HTML-i elemendid oleksid täielikult saadaval enne, kui lohistamise skript käivitub. +**Miks `defer` atribuut on oluline:** +- **Tagab**, et sinu JavaScript ootab kuni kogu HTML on laetud +- **Väldib** vigu, kus JavaScript otsib elemente, mida veel pole +- **Kindlustab**, et kõik taimelemendid on kasutajaliidese jaoks olemas +- **Parem jõudlus** kui skripte asetada lehe lõppu + +> ⚠️ **Tähtis märkus**: `defer` atribuut hoiab ära levinud ajastusvead. Ilma selleta võib JavaScript proovida ligi pääseda HTML-elementidele enne nende laetamist, mis põhjustab vigu. + --- -## DOM-i elemendid +## JavaScripti ühendamine HTML elementidega -Esimene asi, mida pead tegema, on luua viited elementidele, mida soovid DOM-is manipuleerida. Meie puhul on need 14 taime, mis praegu külgribades ootavad. +Enne elementide lohistatavaks tegemist peab JavaScript need DOM-ist leidma. Võid mõelda sellele kui raamatukogu kataloogi süsteemile – kui sul on katalooginumber, leiad täpselt vajaliku raamatu ja pääsed ligi kogu tema sisule. -### Ülesanne +Kasutame selleks meetodit `document.getElementById()`. See on nagu täpne arhiivisüsteem – annad ID, see leiab täpselt vajaliku HTML-elemendi. -```html +### Lohistamise võimaldamine kõigile taimedele + +Lisa see kood oma `script.js` faili: + +```javascript +// Luba lohistamise funktsioon kõigi 14 taime jaoks dragElement(document.getElementById('plant1')); dragElement(document.getElementById('plant2')); dragElement(document.getElementById('plant3')); @@ -72,161 +216,556 @@ dragElement(document.getElementById('plant13')); dragElement(document.getElementById('plant14')); ``` -Mis siin toimub? Sa viitad dokumendile ja otsid selle DOM-ist elementi konkreetse Id-ga. Tuleta meelde, et HTML-i esimeses õppetükis andsid igale taimepildile individuaalse Id (`id="plant1"`)? Nüüd saad seda tööd ära kasutada. Pärast iga elemendi tuvastamist edastad selle elemendi funktsioonile `dragElement`, mille ehitad kohe. Seega muutub HTML-i element lohistatavaks või saab selleks peagi. +**Siin on see, mida see kood teeb:** +- **Leiab** iga taimelemendi DOM-ist unikaalse ID järgi +- **Hankib** JavaScripti viite igale HTML elemendile +- **Edastab** iga elemendi `dragElement` funktsioonile (mida loome järgmises sammus) +- **Valmistab** iga taime ette lohistamiseks +- **Ühendab** sinu HTML struktuuri JavaScripti funktsionaalsusega + +> 🎯 **Miks kasutada ID-sid klasside asemel?** ID-d annavad unikaalse identifikaatori konkreetsetele elementidele, samas kui CSS klassid on mõeldud gruppide stiilimiseks. Kui JavaScript peab manipuleerima üksikute elementidega, annavad ID-d täpsuse ja parema jõudluse. + +> 💡 **Nipp:** Pane tähele, kuidas me kutsume `dragElement()` iga taime kohta eraldi. See tagab, et iga taim saab oma sõltumatu lohistamise käitumise, mis on sujuva kasutajakogemuse jaoks keskne. -✅ Miks viidatakse elementidele Id järgi? Miks mitte nende CSS-klassi järgi? Võid vastuse leidmiseks viidata eelmisele CSS-i õppetükile. +### 🔄 **Pedagoogiline kontroll** +**DOM ühenduse mõistmine**: Enne lohistamise funktsionaalsusest edasi minemist kontrolli, kas saad: +- ✅ Selgitada, kuidas `document.getElementById()` HTML elemente leiab +- ✅ Mõista, miks kasutame iga taime jaoks unikaalset ID-d +- ✅ Kirjeldada `defer` atribuudi eesmärki skriptisiltides +- ✅ Tuvastada, kuidas JavaScript ja HTML ühenduvad läbi DOM-i + +**Kiire enesetest**: Mis juhtuks, kui kahel elemendil oleks sama ID? Miks `getElementById()` tagastab ainult ühe elemendi? +*Vastus: ID-d peaksid olema unikaalsed; kui neid on duplikaate, tagastatakse vaid esimene element* --- -## Sulund +## dragElement sulgu loomine + +Nüüd loome oma lohistamise funktsionaalsuse südame: sulgu, mis haldab lohistamise käitumist iga taime jaoks. See sulg sisaldab mitut sisemist funktsiooni, mis töötavad koos hiire liikumise jälgimiseks ja elemendi koordinaatide uuendamiseks. -Nüüd oled valmis looma `dragElement` sulundi, mis on välimine funktsioon, mis ümbritseb sisemist funktsiooni või funktsioone (meie puhul on neid kolm). +Sulud on selle ülesande jaoks ideaalsed, sest võimaldavad luua „privaatseid“ muutujaid, mis püsivad funktsiooni kutsete vahel, andes igale taimele iseseisva koordinaatide jälgimise süsteemi. -Sulundid on kasulikud, kui üks või mitu funktsiooni vajavad juurdepääsu välimise funktsiooni ulatusele. Siin on näide: +### Sulgude mõistmine lihtsa näite abil + +Näitan sulgusid lihtsa näitega, mis illustreerib kontseptsiooni: ```javascript -function displayCandy(){ - let candy = ['jellybeans']; - function addCandy(candyType) { - candy.push(candyType) - } - addCandy('gumdrops'); +function createCounter() { + let count = 0; // See on nagu privaatmuutuja + + function increment() { + count++; // Sisemine funktsioon mäletab välimist muutujat + return count; + } + + return increment; // Me anname tagasi sisemise funktsiooni } -displayCandy(); -console.log(candy) -``` -Selles näites ümbritseb `displayCandy` funktsioon funktsiooni, mis lisab uue kommitüübi juba olemasolevasse massiivi. Kui sa selle koodi käivitaksid, oleks `candy` massiiv määramata, kuna see on lokaalne muutuja (lokaalne sulundile). - -✅ Kuidas saaksid muuta `candy` massiivi kättesaadavaks? Proovi see sulundist välja viia. Nii muutub massiiv globaalseks, mitte ainult sulundi lokaalse ulatuse piires kättesaadavaks. +const myCounter = createCounter(); +console.log(myCounter()); // 1 +console.log(myCounter()); // 2 +``` -### Ülesanne +**Siin toimub sulgu mustri raames:** +- **Luuakse** privaatne `count` muutuja, mis eksisteerib ainult selles sulgus +- **Sisemine funktsioon** pääseb selle välisvariatsiooni ligi ja saab seda muuta (sulgu mehhanism) +- **Kui me tagastame** sisemise funktsiooni, säilitab see ühenduse privaatse andmega +- **Isegi pärast seda**, kui `createCounter()` lõpetab töö, püsib `count` muutujana ja mäletab oma väärtust + +### Miks sulud sobivad lohistamise funktsionaalsuseks + +Meie terrariumi puhul peab iga taim meeles pidama oma praeguseid asukoordinaate. Sulud on selleks täiuslik lahendus: + +**Meie projekti peamised eelised:** +- **Hoidab** privaatseid positsioonimuutujaid iga taime jaoks eraldi +- **Säilitab** koordinaadiandmeid lohistamise sündmuste vahel +- **Vältab** konfliktseid muutujaid erinevate lohistatavate elementide vahel +- **Loob** puhta ja organiseeritud koodistruktuuri + +> 🎯 **Õpieesmärk**: Sulge ei pea kohe kõike vallutama. Keskendu sellele, kuidas need aitavad meil koodi organiseerida ja säilitada olekut meie lohistamisfunktsionaalsuse jaoks. + +```mermaid +stateDiagram-v2 + [*] --> Ready: Leht laetud + Ready --> DragStart: Kasutaja vajutab alla (pointerdown) + DragStart --> Dragging: Hiir/sõrm liigub (pointermove) + Dragging --> Dragging: Jätka liigutamist + Dragging --> DragEnd: Kasutaja vabastab (pointerup) + DragEnd --> Ready: Lähtesta järgmise lohistamiseks + + state DragStart { + [*] --> CapturePosition + CapturePosition --> SetupListeners + SetupListeners --> [*] + } + + state Dragging { + [*] --> CalculateMovement + CalculateMovement --> UpdatePosition + UpdatePosition --> [*] + } + + state DragEnd { + [*] --> RemoveListeners + RemoveListeners --> CleanupState + CleanupState --> [*] + } +``` +### dragElement funktsiooni loomine -Loo `script.js`-i elementide deklaratsioonide alla funktsioon: +Nüüd ehitame peamise funktsiooni, mis haldab kogu lohistamise loogikat. Lisa see funktsioon oma taime elementide deklaratsioonide alla: ```javascript function dragElement(terrariumElement) { - //set 4 positions for positioning on the screen - let pos1 = 0, - pos2 = 0, - pos3 = 0, - pos4 = 0; - terrariumElement.onpointerdown = pointerDrag; + // Initsialiseeri asukoha jälgimise muutujad + let pos1 = 0, // Eelmine hiire X asukoht + pos2 = 0, // Eelmine hiire Y asukoht + pos3 = 0, // Praegune hiire X asukoht + pos4 = 0; // Praegune hiire Y asukoht + + // Sea üles algne lohistamise sündmuse kuulaja + terrariumElement.onpointerdown = pointerDrag; } ``` -`dragElement` saab oma `terrariumElement` objekti skripti ülaosas tehtud deklaratsioonidest. Seejärel määrad objekti jaoks mõned lokaalsed positsioonid väärtusega `0`. Need on lokaalsed muutujad, mida manipuleeritakse iga elemendi puhul, kui lisad sulundi sees lohistamisfunktsionaalsuse. Terrarium täidetakse nende lohistatud elementidega, seega peab rakendus jälgima, kuhu need paigutatakse. - -Lisaks määratakse funktsioonile `terrariumElement`, mis edastatakse sellele funktsioonile, `pointerdown` sündmus, mis on osa [veebi API-dest](https://developer.mozilla.org/docs/Web/API), mis on loodud DOM-i haldamiseks. `onpointerdown` käivitub, kui nuppu vajutatakse või meie puhul puudutatakse lohistatavat elementi. See sündmuste käsitleja töötab nii [veebi- kui mobiilibrauserites](https://caniuse.com/?search=onpointerdown), mõne erandiga. - -✅ [Sündmuste käsitlejal `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) on palju laiem tugi erinevates brauserites; miks sa ei kasutaks seda siin? Mõtle täpselt sellele ekraani interaktsioonile, mida sa siin luua üritad. +**Positsioonide jälgimise süsteemi mõistmine:** +- **`pos1` ja `pos2`**: Salvestavad vanade ja uute hiirepositsioonide erinevuse +- **`pos3` ja `pos4`**: Jälgivad hiire praeguseid koordinaate +- **`terrariumElement`**: Konkreetne taimeelement, mida me lohistame +- **`onpointerdown`**: Sündmus, mis käivitub kui kasutaja alustab lohistamist + +**Nii töötab sulgu muster:** +- **Luuakse** privaatsete positsioonimuutujatega taimeelementide jaoks sulg +- **Hoidab** neid muutujaid kogu lohistamise kestel +- **Tagab**, et iga taim jälgib oma koordinaate iseseisvalt +- **Pakub** puhtat liidest `dragElement` funktsiooni kaudu + +### Miks kasutada pointer-sündmusi? + +Võid mõelda, miks kasutame `onpointerdown` asemel tavalisemat `onclick`. Siin põhjused: + +| Sündmuse tüüp | Sobib | Konks | +|---------------|-------------|------------| +| `onclick` | Lihtsad nupuvajutused | Ei sobi lohistamiseks (ainult klikid ja vabastused) | +| `onpointerdown` | Hiir ja puuteekraanid | Uus, kuid tänapäeval hästi toetatud | +| `onmousedown` | Ainult lauaarvuti hiir | Jäetakse mobiilikasutajad ilma | + +**Miks pointer-sündmused sobivad meie ehitatava jaoks:** +- **Töötab hästi** olgu kas hiir, sõrm või isegi pliiats kasutusel +- **Tundub ühesugune** sülearvutis, tahvelarvutis või telefonis +- **Haldab** tegelikku lohistamise liikumist (mitte ainult klõpsu) +- **Tagab** sujuva kogemuse, mida kasutajad tänapäevastelt veebirakendustelt ootavad + +> 💡 **Tulevikukindlus**: Pointer-sündmused on tänapäevane viis kasutajategevuste käsitlemiseks. Selle asemel, et kirjutada eraldi kood hiire ja puute jaoks, saad mõlemad automaatselt kaasa. Lahe, eks? + +### 🔄 **Pedagoogiline kontroll** +**Sündmuste mõistmine**: Peatu ja kinnita oma arusaam sündmustest: +- ✅ Miks me kasutame pointer-sündmusi hiire sündmuste asemel? +- ✅ Kuidas sulgude muutujaid säilitatakse funktsioonide kutsumise vahel? +- ✅ Mis rolli täidab `preventDefault()` sujuvas lohistamises? +- ✅ Miks lisame event listenerid dokumendile, mitte üksikutele elementidele? + +**Tõeline elukogemus**: Mõtle drag-and-drop liidestele, mida kasutad iga päev: +- **Failide üleslaadimine**: Failide lohistamine brauseriaknasse +- **Kanban tahvlid**: Ülesannete liigutamine veergude vahel +- **Pildigaleriid**: Piltide järjekorra muutmine +- **Mobiililiidesed**: Pühkimine ja lohistamine puuteekraanidel --- -## Pointerdrag funktsioon +## pointerDrag funktsioon: lohistamise alguse tabamine -`terrariumElement` on valmis lohistamiseks; kui `onpointerdown` sündmus käivitub, kutsutakse funktsioon `pointerDrag`. Lisa see funktsioon kohe selle rea alla: `terrariumElement.onpointerdown = pointerDrag;`: +Kui kasutaja vajutab taimele alla (hiireklõpsuga või sõrmega), käivitub `pointerDrag` funktsioon. See funktsioon tabab algkoordinadid ja seadistab lohistamissüsteemi. -### Ülesanne +Lisa see funktsioon oma `dragElement` sulgu, kohe pärast rida `terrariumElement.onpointerdown = pointerDrag;`: ```javascript function pointerDrag(e) { - e.preventDefault(); - console.log(e); - pos3 = e.clientX; - pos4 = e.clientY; + // Takista brauseri vaikekäitumist (näiteks teksti valimine) + e.preventDefault(); + + // Võta kinni algne hiire/puutepositsioon + pos3 = e.clientX; // X-koordinaat, kus lohistamine algas + pos4 = e.clientY; // Y-koordinaat, kus lohistamine algas + + // Sea üles sündmuste kuulajad lohistamise protsessiks + document.onpointermove = elementDrag; + document.onpointerup = stopElementDrag; } ``` -Toimub mitu asja. Esiteks takistad vaikimisi sündmusi, mis tavaliselt pointerdown-i korral toimuvad, kasutades `e.preventDefault();`. Nii saad rohkem kontrolli liidese käitumise üle. +**Sammu-sammult, mis toimub:** +- **Vältib** brauseri vaike käitumist, mis võiks lohistamist segada +- **Salvestab** täpsed koordinaadid, kust kasutaja lohistamise alustas +- **Loo** sündmuste kuulajad jätkuvale lohistamisele +- **Valmista** süsteem jälgima hiire või sõrme liikumist üle kogu dokumendi -> Tule selle rea juurde tagasi, kui oled skriptifaili täielikult ehitanud, ja proovi seda ilma `e.preventDefault()`-ta - mis juhtub? +### Sündmuse tõrke vältimine -Teiseks ava `index.html` brauseriaknas ja inspekteeri liidest. Kui klõpsad taime, näed, kuidas 'e' sündmus salvestatakse. Uuri sündmust, et näha, kui palju teavet kogutakse ühe pointerdown-i sündmuse kohta! +Rea `e.preventDefault()` on sujuva lohistamise jaoks kriitiline: -Järgmiseks pane tähele, kuidas lokaalsed muutujad `pos3` ja `pos4` määratakse väärtuseks e.clientX. Saad leida `e` väärtused inspekteerimispaneelilt. Need väärtused salvestavad taime x- ja y-koordinaadid hetkel, mil sa seda klõpsad või puudutad. Sul on vaja peent kontrolli taimede käitumise üle, kui neid klõpsad ja lohistad, seega jälgid nende koordinaate. +**Ilma tõrketa võivad brauserid:** +- **Valida** teksti lehel lohistamise ajal +- **Käivita** konteksti menüüd parema hiireklõpsu kombel lohistamisel +- **Segada** meie kohandatud lohistamiskäitumist +- **Teha** visuaalseid artefakte lohistamise ajal -✅ Kas hakkab selgemaks saama, miks kogu rakendus on ehitatud ühe suure sulundiga? Kui see ei oleks sulund, kuidas sa säilitaksid ulatuse iga 14 lohistatava taime jaoks? +> 🔍 **Katsetamine**: Pärast selle õppetüki lõpetamist proovi `e.preventDefault()` eemaldada ja vaata, kuidas see lohistamiskogemust mõjutab. Näed kiiresti, miks see rida on nii oluline! -Lõpeta algne funktsioon, lisades veel kaks pointer-sündmuste manipuleerimist `pos4 = e.clientY` alla: +### Koordinaatide jälgimise süsteem -```html +`e.clientX` ja `e.clientY` omadused annavad meile täpsed hiire/puutekoordinaadid: + +| Omadus | Mida mõõdab | Kasutusjuht | +|---------|-------------|-------------| +| `clientX` | Horisontaalne asukoht suhtena vaateaknasse | Liikumise jälgimine vasakult paremale | +| `clientY` | Vertikaalne asukoht suhtena vaateaknasse | Liikumise jälgimine ülevalt alla | +**Koordinaatide mõistmine:** +- **Tagab** pikslitäpse positsioneerimise info +- **Uuendab** reaalajas, kui kasutaja liigutab kursori asendit +- **Jääb** ühtlaseks erinevate ekraanisuuruste ja suumitasemete puhul +- **Võimaldab** sujuva, reageeriva lohistamisinteraktsiooni + +### Dokumenditasandi sündmuste kuulajate seadistamine + +Pane tähele, kuidas sidume liikumise ja peatamise sündmused kogu `document`-iga, mitte ainult taimselemendiga: + +```javascript document.onpointermove = elementDrag; document.onpointerup = stopElementDrag; ``` -Nüüd näitad, et soovid taime lohistada koos pointeriga, kui seda liigutad, ja et lohistamise žest peatuks, kui taime valik tühistatakse. `onpointermove` ja `onpointerup` kuuluvad samasse API-sse kui `onpointerdown`. Liides viskab nüüd vigu, kuna sa pole veel määratlenud funktsioone `elementDrag` ja `stopElementDrag`, seega ehita need järgmisena. +**Miks kinnitada dokumenti:** +- **Jätkab** jälgimist ka siis, kui hiir lahkub taimselemsntist +- **Vältib** lohistamise katkestamist, kui kasutaja liigub kiiresti +- **Tagab** sujuva lohistamise kogu ekraani ulatuses +- **Käsitleb** äärmusjuhtumeid, kus kursor liigub brauseri aknast välja -## Funktsioonid elementDrag ja stopElementDrag +> ⚡ **Tõhususe märkus**: Puhastame need dokumenditasandi kuulajad, kui lohistamine lõpeb, et vältida mälulekkeid ja jõudluse probleeme. -Sulund lõpetatakse kahe sisemise funktsiooniga, mis haldavad, mis juhtub, kui taime lohistatakse ja lohistamine lõpetatakse. Soovitud käitumine on see, et saaksid igal ajal lohistada mis tahes taime ja paigutada selle ekraanil kuhu iganes. See liides on üsna paindlik (näiteks pole määratud langetustsooni), et saaksid oma terrariumi kujundada täpselt nii, nagu soovid, lisades, eemaldades ja ümber paigutades taimi. +## Lohistamissüsteemi lõpetamine: liikumine ja puhastamine -### Ülesanne +Lisame nüüd kaks funktsiooni, mis tegelevad tegeliku lohistamisliikumise ja puhastamisega lohistamise lõppedes. Need funktsioonid töötavad koos, et luua sujuv ja reageeriv taimede liigutus sinu terrariumis. -Lisa funktsioon `elementDrag` kohe pärast `pointerDrag` sulgemiskõverat: +### elementDrag funktsioon: liikumise jälgimine + +Lisa `elementDrag` funktsioon kohe pärast `pointerDrag` sulgemissulgu: ```javascript function elementDrag(e) { - pos1 = pos3 - e.clientX; - pos2 = pos4 - e.clientY; - pos3 = e.clientX; - pos4 = e.clientY; - console.log(pos1, pos2, pos3, pos4); - terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px'; - terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px'; + // Arvuta kaugus, mis on liigutud alates viimasest sündmusest + pos1 = pos3 - e.clientX; // Horisontaalne liikumiskaugus + pos2 = pos4 - e.clientY; // Vertikaalne liikumiskaugus + + // Uuenda praeguse positsiooni jälgimist + pos3 = e.clientX; // Uus praegune X asend + pos4 = e.clientY; // Uus praegune Y asend + + // Rakenda liikumine elemendi positsioonile + terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px'; + terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px'; } ``` -Selles funktsioonis teed palju algpositsioonide 1-4 redigeerimist, mille määrasid välimise funktsiooni lokaalsed muutujad. Mis siin toimub? - -Lohistamise ajal määrad `pos1` ümber, tehes selle võrdseks `pos3`-ga (mille määrasid varem `e.clientX`-ks) miinus praegune `e.clientX` väärtus. Sarnase operatsiooni teed `pos2`-ga. Seejärel määrad `pos3` ja `pos4` uuesti elemendi uutele X- ja Y-koordinaatidele. Saad neid muudatusi konsoolis jälgida, kui lohistad. Seejärel manipuleerid taime CSS-stiili, et määrata selle uus positsioon, lähtudes `pos1` ja `pos2` uutest positsioonidest, arvutades taime ülemise ja vasaku X- ja Y-koordinaadi, võrreldes selle nihkega nende uute positsioonidega. - -> `offsetTop` ja `offsetLeft` on CSS-i omadused, mis määravad elemendi positsiooni selle vanema positsiooni alusel; vanem võib olla mis tahes element, mille positsioon ei ole `static`. - -Kõik see positsioonide ümberarvutamine võimaldab sul terrariumi ja selle taimede käitumist peenhäälestada. - -### Ülesanne +**Koordinaatide matemaatika mõistmine:** +- **`pos1` ja `pos2`**: Arvutavad, kui kaugele hiir on liigutatud alates viimatisest uuendusest +- **`pos3` ja `pos4`**: Salvestavad praeguse hiire positsiooni järgmise arvutuse jaoks +- **`offsetTop` ja `offsetLeft`**: Hõivavad elemendi praeguse positsiooni lehel +- **Lahutuse loogika**: Liigutab elementi sama palju, mida hiir liikus + +```mermaid +sequenceDiagram + participant User + participant Mouse + participant JavaScript + participant Plant + + User->>Mouse: Lohistamise algus aadressil (100, 50) + Mouse->>JavaScript: pointerdown sündmus + JavaScript->>JavaScript: Salvestage algpositsioon (pos3=100, pos4=50) + JavaScript->>JavaScript: Määra move/up kuulajad + + User->>Mouse: Liigu aadressile (110, 60) + Mouse->>JavaScript: pointermove sündmus + JavaScript->>JavaScript: Arvuta: pos1=10, pos2=10 + JavaScript->>Plant: Uuenda: vasak += 10px, ülevalt += 10px + Plant->>Plant: Kuvamine uuel positsioonil + + User->>Mouse: Vabasta aadressil (120, 65) + Mouse->>JavaScript: pointerup sündmus + JavaScript->>JavaScript: Eemalda kuulajad + JavaScript->>JavaScript: Lähtesta järgmise lohistamise jaoks +``` +**Siin on liikumisaruande jaotus:** +1. **Mõõdab** vanade ja uute hiire asukohtade erinevust +2. **Arvutab**, kui palju elementi liigutada hiire liikumise põhjal +3. **Uuendab** elemendi CSS positsiooniväärtusi reaalajas +4. **Salvestab** uue positsiooni alusena järgmise liikumisarvutuse jaoks + +### Matemaatika visuaalne kujutus + +```mermaid +sequenceDiagram + participant Mouse + participant JavaScript + participant Plant + + Mouse->>JavaScript: Liigu kohast (100,50) kohale (110,60) + JavaScript->>JavaScript: Arvuta: liigutatud 10px paremale, 10px alla + JavaScript->>Plant: Uuenda asendit +10px paremale, +10px alla + Plant->>Plant: Joonista uus asend +``` +### stopElementDrag funktsioon: puhastamine -Viimane ülesanne liidese lõpetamiseks on lisada funktsioon `stopElementDrag` pärast `elementDrag` sulgemiskõverat: +Lisa puhastamisfunktsioon kohe pärast `elementDrag` sulgemissulgu: ```javascript function stopElementDrag() { - document.onpointerup = null; - document.onpointermove = null; + // Eemalda dokumendi taseme sündmuste kuulajad + document.onpointerup = null; + document.onpointermove = null; } ``` -See väike funktsioon lähtestab `onpointerup` ja `onpointermove` sündmused, et saaksid kas taime lohistamise uuesti alustada või hakata lohistama uut taime. +**Miks puhastamine on oluline:** +- **Vältib** mälu lekkeid tühjade sündmusekuulajate tõttu +- **Lõpetab** lohistamiskäitumise, kui kasutaja taime vabastab +- **Lubab** teistel elementidel sõltumatult lohistada +- **Lähtestab** süsteemi järgmise lohistamise jaoks + +**Mis juhtub ilma puhastuseta:** +- Sündmusekuulajad töötavad ka peale lohistamise lõppu edasi +- Jõudlus halveneb, kuna mittevajalikud kuulajad kuhjuvad +- Tekivad ettearvamatud käitumised teiste elementidega suhtlemisel +- Brauseris raisatakse ressursse mittevajaliku sündmusetöötluse peale + +### CSS positsiooniomaduste mõistmine + +Meie lohistamissüsteem manipuleerib kahe põhilise CSS omadusega: + +| Omadus | Mida kontrollib | Kuidas me seda kasutame | +|----------|------------------|---------------| +| `top` | Kaugus ülemisest servast | Vertikaalne positsioneerimine lohistamise ajal | +| `left` | Kaugus vasakust servast | Horisontaalne positsioneerimine lohistamise ajal | -✅ Mis juhtub, kui sa ei määra neid sündmusi nulliks? +**Olulised tähelepanekud offset-omaduste kohta:** +- **`offsetTop`**: Praegune kaugus positsioneeritud vanema ülemisest servast +- **`offsetLeft`**: Praegune kaugus positsioneeritud vanema vasakust servast +- **Positsioneerimiskontekst**: Need väärtused on seotud lähima positsioneeritud vanemaga +- **Reaalajas uuendused**: Muudatused toimuvad koheselt, kui me muudame CSS omadusi -Nüüd oled oma projekti lõpetanud! +> 🎯 **Disainifilosoofia**: See lohistamissüsteem on teadlikult paindlik – puuduvad "loobimisalad" või piirangud. Kasutajad saavad taimi asetada ükskõik kuhu, võimaldades neil täielikult loominguliselt terrariumi kujundada. -🥇Palju õnne! Oled lõpetanud oma kauni terrariumi. ![valmis terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.et.png) +## Kõik üheskoos: sinu täielik lohistamissüsteem + +Palju õnne! Sa lõid just keeruka lohistamis- ja kukutamissüsteemi, kasutades tavalist JavaScripti. Sinu täielik `dragElement` funktsioon sisaldab võimsat sulgemist, mis haldab: + +**Mida sinu sulgemine saavutab:** +- **Hoiab** iga taime jaoks eraldi privaatseid positsioonimuutujaid +- **Halb** kogu lohistamistsükli algusest lõpuni +- **Tagab** sujuva ja reageeriva liikumise üle kogu ekraani +- **Puhastab** ressursid korralikult, et vältida mälulekkeid +- **Loomise** intuitiivse ja loova liidese terrariumi kujundamiseks + +### Testi oma interaktiivset terrariumit + +Nüüd testi oma interaktiivset terrariumit! Ava oma `index.html` fail veebilehitsejas ja proovi funktsionaalsust: + +1. **Klõpsa ja hoia** suvalist taime, et alustada lohistamist +2. **Liigu hiire või sõrmega** ning vaata, kuidas taim sujuvalt järgneb +3. **Lase lahti** ja kukuta taim uude asukohta +4. **Katseta** erinevaid paigutusi ja avasta kasutajaliidest + +🥇 **Saavutus**: Sa lõid täisfunktsionaalse interaktiivse veebirakenduse, kasutades põhikontseptsioone, mida professionaalsed arendajad igapäevaselt kasutavad. See lohistamisfunktsionaalsus põhineb samadel printsiipidel, mida kasutatakse failide üleslaadimisel, kanban-tahvlitel ja paljudes muudes interaktiivsetes liidestes. + +### 🔄 **Pedagoogiline paus** +**Täieliku süsteemi mõistmine**: Kontrolli, kas sul on terviklik arusaam kogu lohistamissüsteemist: +- ✅ Kuidas sulgemised hoiavad iga taime sõltumatut olekut? +- ✅ Miks on koordinaatide matemaatiline arvutus vajalik sujuva liikumise jaoks? +- ✅ Mis juhtub, kui me unustame kuulajate puhastamise? +- ✅ Kuidas see mustrit keerukamate interaktsioonide puhul skaleerub? + +**Koodi kvaliteedi refleksioon**: Vaata üle oma täielik lahendus: +- **Mooduldisain**: Iga taim saab oma sulgemisinstantsi +- **Sündmustõhusus**: Kuulajate nõuetekohane seadistamine ja otsa puhastamine +- **Seadmeülene tugi**: Töötab nii lauaarvutis kui mobiilis +- **Jõudluse teadlikkus**: Puuduvad mälulekked või tarbetud arvutused + +![valmis terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.et.png) --- -## 🚀Väljakutse +## GitHub Copilot Agent väljakutse 🚀 + +Kasuta Agent režiimi, et lahendada järgmine väljakutse: -Lisa oma sulundisse uus sündmuste käsitleja, et taimedele midagi veel teha; näiteks topeltklõpsa taime, et tuua see ettepoole. Ole loov! +**Kirjeldus:** Täienda terrariumiprojekti, lisades lähtestusfunktsionaalsuse, mis viib kõik taimed sujuvate animatsioonidega tagasi nende algasendisse. -## Loengu-järgne viktoriin +**Käsk:** Loo lähtestamisnupp, mis klikitult animeerib kõik taimed tagasi nende algsetesse küljeribal asukohtadesse, kasutades CSS üleminekuid. Funktsioon peaks salvestama algpositsioonid lehe laadimisel ja sujuvalt taimede algasendisse viima ühe sekundi jooksul, kui lähtestusnuppu vajutatakse. -[Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/20) +Tutvu Agent režiimiga siit: [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). -## Ülevaade ja iseseisev õppimine +## 🚀 Lisaväljakutse: Arenda oma oskusi + +Kas oled valmis viima oma terrariumi uuele tasemele? Proovi järgmisi täiustusi: + +**Loomingulised laiendused:** +- **Topelklikita** taime pealmiseks toomiseks (z-indeksi manipuleerimine) +- **Lisa visuaalne tagasiside**, nt õrn kuma, kui taime kohal hoida +- **Rakenda piirid**, et vältida taimede lohistamist terrariumist välja +- **Loo salvestusfunktsioon**, mis mäletab taimede asukohti localStorage’i abil +- **Lisa heliefektid** taime tõstmiseks ja asetamiseks + +> 💡 **Õppimisvõimalus**: Iga neist väljakutsetest õpetab sulle uusi aspekte DOM manipuleerimisest, sündmuste käitlemisest ja kasutajakogemuse disainist. + +## Pärastloengu test + +[Pärastloengu test](https://ff-quizzes.netlify.app/web/quiz/20) + +## Ülevaade & Iset õppimine: süvendame arusaamist + +Oled omandanud DOM manipuleerimise ja sulgemiste põhialused, kuid avastada on veel palju! Siin on mõned teed oma teadmiste ja oskuste laiendamiseks. + +### Alternatiivsed lohistamis- ja kukutamisviisid + +Me kasutasime maksimaalse paindlikkuse jaoks pointer sündmusi, kuid veebiarendus pakub mitmeid teisi võimalusi: + +| Lähenemine | Parim kasutusala | Õppeväärtus | +|----------|----------|----------------| +| [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | Failide üleslaadimine, ametlikud lohistamisalad | Mõistmine, kuidas brauserid lohistamist natiivselt toetavad | +| [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) | Mobiilspetsiifilised interaktsioonid | Mobiilse esmane arendusmustrid | +| CSS `transform` omadused | Sujuvad animatsioonid | Jõudluse optimeerimise tehnikad | + +### Täiustatud DOM Manipulatsiooni Teemad + +**Järgmised sammud sinu õpiteekonnal:** +- **Sündmuste delegatsioon**: Käsitleda efektiivselt mitme elemendi sündmusi +- **Intersection Observer**: Tuvastada, millal elemendid sisenevad või lahkuvad vaateväljast +- **Mutation Observer**: Jälgida muutusi DOM struktuuris +- **Veebikomponendid**: Luua taaskasutatavad ja kapseldatud kasutajaliidese elemendid +- **Virtuaalne DOM**: Mõista, kuidas raamistikud optimeerivad DOM uuendusi + +### Olulised ressursid edasiseks õppeks + +**Tehniline dokumentatsioon:** +- [MDN Pointer Events juhend](https://developer.mozilla.org/docs/Web/API/Pointer_events) - põhjalik pointer sündmuste viide +- [W3C Pointer Events spetsifikatsioon](https://www.w3.org/TR/pointerevents1/) - ametlik standardidokumentatsioon +- [JavaScript sulgemiste süvitsi](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - edasijõudnud sulgemismustrid + +**Brauserite ühilduvus:** +- [CanIUse.com](https://caniuse.com/) - kontrolli funktsioonide tuge brauserites +- [MDN Browser Compatibility Data](https://github.com/mdn/browser-compat-data) - detailne ühilduvusteave + +**Praktikavõimalused:** +- **Loo** puslemäng, kasutades sarnaseid lohistamismehhanisme +- **Loo** kanban-tahvel ülesannete lohistamiseks +- **Disaini** pildigalerii koos lohistatavate fotode paigutusega +- **Katseta** puutetundlikku juhtimist mobiilseadmetes + +> 🎯 **Õppestrateegia**: Neid kontseptsioone kinnistad kõige paremini praktikas. Proovi luua mitmesuguseid lohistatavaid liideseid – iga projekt õpetab sulle midagi uut kasutajaliidese ja DOM manipuleerimise kohta. + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Ava brauseri DevTools ja trüki konsooli `document.querySelector('body')` +- [ ] Proovi muuta veebilehe teksti, kasutades `innerHTML` või `textContent` +- [ ] Lisa klõpsu sündmuse kuulaja suvalisele nupule või lingile +- [ ] Uuri DOM-puu struktuuri Elements paneelil + +### 🎯 **Mida saad saavutada selle tunni jooksul** +- [ ] Täida pärastloengu test ja korrasta DOM manipuleerimise kontseptsioone +- [ ] Loo interaktiivne veebileht, mis reageerib kasutaja klikkidele +- [ ] Harjuta sündmuste töötlemist erinevate sündmustüüpidega (click, mouseover, keypress) +- [ ] Ehita lihtne ülesannete nimekiri või loendur DOM manipuleerimise abil +- [ ] Uuri HTML elementide ja JavaScripti objektide seoseid + +### 📅 **Sinu nädalapikkune JavaScripti õpiteekond** +- [ ] Lõpeta interaktiivne terrarium projekt koos lohistamisfunktsionaalsusega +- [ ] Valda sündmuste delegatsiooni tõhusaks sündmuste käitlemiseks +- [ ] Õpi tundma sündmuste tsüklit ja asünkroonset JavaScripti +- [ ] Harjuta sulgemisi, luues mooduleid privaatse olekuga +- [ ] Avastada kaasaegsed DOM API-d nagu Intersection Observer +- [ ] Ehita interaktiivseid komponente ilma raamistiketa + +### 🌟 **Sinu kuu pikkune JavaScripti meistritase** +- [ ] Loo keerukas ühe lehe rakendus tavalise JavaScripti abil +- [ ] Õpi kaasaegset raamistikku (React, Vue või Angular) ja võrdle seda tavalise DOM manipuleerimisega +- [ ] Panusta avatud lähtekoodiga JavaScripti projektidesse +- [ ] Valda keerukaid kontseptsioone nagu veebikomponendid ja kohandatud elemendid +- [ ] Ehita jõudlusrikkaid veebirakendusi optimaalse DOM struktuuriga +- [ ] Õpeta teisi DOM manipuleerimisest ja JavaScripti alustest + +## 🎯 Sinu JavaScript DOM meisterlikkuse ajaskaala + +```mermaid +timeline + title DOM & JavaScript õppe edenemine + + section Alus (15 minutit) + DOM arusaamine: Elemendi valimise meetodid + : Puu struktuuri navigeerimine + : Atribuutide ligipääsu mustrid + + section Sündmuste käsitlemine (20 minutit) + Kasutaja interaktsioon: Osutussündmuste alused + : Sündmuse kuulaja seadistamine + : Seadmetevaheline ühilduvus + : Sündmuste ennetamise tehnikad + + section Sulgemised (25 minutit) + Ulatusjuhtimine: Privaatsete muutujate loomine + : Funktsiooni püsivus + : Oleku haldamise mustrid + : Mäluefektiivsus + + section Lohistamissüsteem (30 minutit) + Interaktiivsed funktsioonid: Koordinaatide jälgimine + : Asukoha arvutamine + : Liikumise matemaatika + : Puhastusprotseduurid + + section Täiustatud mustrid (45 minutit) + Professionaalsed oskused: Sündmuste delegatsioon + : Töökindluse optimeerimine + : Vigade käsitlemine + : Juurdepääsetavuse kaalutlused + + section Raamistiku mõistmine (1 nädal) + Kaasaegne arendus: Virtuaalne DOM kontseptsioonid + : Oleku haldamise raamatukogud + : Komponendi arhitektuurid + : Build-tööriista integreerimine + + section Eksperdi tase (1 kuu) + Täiustatud DOM API-d: Intersection Observer + : Mutation Observer + : Kohandatud elemendid + : Veebikomponendid +``` +### 🛠️ Sinu JavaScripti tööriistakasti kokkuvõte -Kuigi elementide lohistamine ekraanil tundub triviaalne, on selleks palju viise ja palju karisid, sõltuvalt soovitud efektist. Tegelikult on olemas terve [lohistamise ja langetamise API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API), mida saad proovida. Me ei kasutanud seda selles moodulis, kuna soovitud efekt oli veidi erinev, kuid proovi seda API-d oma projektis ja vaata, mida suudad saavutada. +Pärast selle õppetunni lõpetamist valdavad sind: +- **DOM meisterlikkus**: Elemendi valik, omaduste muutmine ja puu navigeerimine +- **Sündmuste kogemus**: Seadmeülene interaktsioonide käitlemine pointer sündmustega +- **Sulgemiste tundmine**: Privaatse oleku haldamine ja funktsioonide püsivus +- **Interaktiivsed süsteemid**: Täielik lohistamis- ja kukutamissüsteemi realiseerimine nullist +- **Tõhususe teadlikkus**: Õige sündmuste puhastus ja mäluhalduse kontroll +- **Kaasaegsed mustrid**: Koodi organiseerimise tehnikad, mida kasutatakse professionaalses arenduses +- **Kasutajakogemus**: Intuitiivsete ja reageerivate liideste loomine -Leia rohkem teavet pointer-sündmuste kohta [W3C dokumentatsioonist](https://www.w3.org/TR/pointerevents1/) ja [MDN veebidokumentidest](https://developer.mozilla.org/docs/Web/API/Pointer_events). +**Professionaalsed oskused**: Sa ehitasid funktsioone kasutades samu tehnikaid nagu: +- **Trello/Kanban lauad**: Kaardi lohistamine veergude vahel +- **Failide üleslaadimise süsteemid**: Loositav failihaldus +- **Pildigalerii**: Fotode paigutamise liidese lahendused +- **Mobiilirakendused**: Puutekäsitluse mustrid -Kontrolli alati brauseri võimekust [CanIUse.com](https://caniuse.com/) abil. +**Järgmine tase**: Oled valmis avastama kaasaegseid raamistikke nagu React, Vue või Angular, mis põhinevad neil põhilistel DOM manipuleerimise kontseptsioonidel! -## Ülesanne +## Kodutöö -[Tee DOM-iga veidi rohkem tööd](assignment.md) +[Tee natuke rohkem tööd DOM-iga](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame saavutada täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada lõplikuks allikaks. Olulise info puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega väärinterpreteerimiste eest. + \ No newline at end of file diff --git a/translations/et/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/et/3-terrarium/3-intro-to-DOM-and-closures/assignment.md index 41e9902a7..fceafb5a9 100644 --- a/translations/et/3-terrarium/3-intro-to-DOM-and-closures/assignment.md +++ b/translations/et/3-terrarium/3-intro-to-DOM-and-closures/assignment.md @@ -1,25 +1,139 @@ -# Töötame DOM-iga veidi rohkem +# DOM elementi uurimise ülesanne + +## Ülevaade + +Nüüd, kui oled ise DOM-i manipuleerimise jõudu kogenud, on aeg avastada DOM-i liideste laiemat maailma. See ülesanne süvendab sinu arusaamist sellest, kuidas erinevad veebitehnoloogiad suhtlevad DOM-iga, mitte ainult elementide lohistamise kaudu. + +## Õpieesmärgid + +Selle ülesande täitmisel sa: +- **Uurid** ja mõistad põhjalikult kindlat DOM-i liidest +- **Analüüsid** reaalse maailma DOM-i manipuleerimise rakendusi +- **Ühendad** teoreetilisi mõisteid praktiliste rakendustega +- **Arendad** oskusi tehnilises dokumenteerimises ja analüüsis ## Juhised -Uuri DOM-i veidi põhjalikumalt, 'adopteerides' ühe DOM-i elemendi. Külastage MDN-i [DOM-liideste loendit](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) ja valige üks. Leidke selle kasutus mõnel veebilehel ja kirjutage selgitus, kuidas seda kasutatakse. +### Samm 1: Vali oma DOM-i liides + +Külasta MDN-i põhjalikku [DOM-i liideste nimekirja](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) ja vali üks liides, mis sind huvitab. Mitmekesistamiseks võid valida järgmistest kategooriatest: + +**Algajale sobivad valikud:** +- `Element.classList` – CSS-klasside dünaamiline haldamine +- `Document.querySelector()` – Täpsem elementide valimine +- `Element.addEventListener()` – Sündmuste käsitlemine peale pointer-sündmuste +- `Window.localStorage` – Kliendipoolne andmete salvestamine + +**Kesktaseme väljakutsed:** +- `Intersection Observer API` – Elementide nähtavuse tuvastamine +- `MutationObserver` – DOM-i muutuste jälgimine +- `Drag and Drop API` – Alternatiiv meie pointeril baseeruvale lähenemisele +- `Geolocation API` – Kasutaja asukoha määramine + +**Edasijõudnutele:** +- `Web Components` – Kohandatud elemendid ja shadow DOM +- `Canvas API` – Programmihalduslik graafika +- `Web Workers` – Taustaprotsessid +- `Service Workers` – Võrguta funktsionaalsus + +### Samm 2: Uuri ja dokumenteeri + +Koosta põhjalik analüüs (300-500 sõna), mis sisaldab: + +#### Tehniline ülevaade +- **Määra**, mida sinu valitud liides teeb selgelt ja algajasõbralikult +- **Selgita**, millised on peamised meetodid, omadused või sündmused +- **Kirjelda**, milliseid probleeme see on loodud lahendama + +#### Reaalse maailma rakendus +- **Leia** veebisait, mis kasutab sinu valitud liidest (jalananalüüsi või uurides näiteid) +- **Dokumenteeri** konkreetne rakendus koos koodilõikudega, kui võimalik +- **Analüüsi**, miks arendajad selle lähenemise valisid +- **Selgita**, kuidas see parandab kasutajakogemust + +#### Praktiline rakendus +- **Võrdle** oma liidest meie terrariumi projekti kasutatud tehnikatega +- **Paku** ideid, kuidas sinu liides võiks terrariumi funktsionaalsust parandada või laiendada +- **Tuvasta** teised projektid, kus see liides võiks kasulik olla + +### Samm 3: Koodinäide + +Lisa lihtne ja toimiv koodinäide, mis demonstreerib sinu liidese kasutamist. See peaks olema: +- **Funktsionaalne** – kood töötab tõeliselt testimisel +- **Kommenteeritud** – selgita, mida iga osa teeb +- **Asjakohane** – seotud realistliku kasutusjuhtumiga +- **Algajasõbralik** – arusaadav veebiarendusega alustavale inimesele + +## Töö esitamise vorming + +Struktureeri oma töö selgete peatükkidega: + +```markdown +# [Interface Name] DOM Investigation + +## What It Does +[Technical overview] + +## Real-World Example +[Website analysis and implementation details] + +## Code Demonstration +[Your working example with comments] + +## Reflection +[How this connects to our terrarium project and future applications] +``` ## Hindamiskriteeriumid -| Kriteerium | Silmapaistev | Piisav | Vajab parandamist | -| ---------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | -| | Esitatud on lõik koos näitega | Esitatud on lõik ilma näiteta | Lõik puudub | +| Kriteerium | Suurepärane (A) | Hea (B) | Arenev (C) | Vajab parandamist (D) | +|------------|-----------------|----------|-------------|----------------------| +| **Tehniline arusaam** | Näitab sügavat mõistmist, täpsed seletused ja õige terminoloogia | Näitab head mõistmist enamjaolt täpsete seletustega | Põhiline arusaam, mõned eksimused | Piiratud arusaamine ja tõsised vead | +| **Reaalse maailma analüüs** | Tuvastab ja põhjalikult analüüsib tegelikku rakendust konkreetsete näidetega | Leiab reaalse näite adekvaatse analüüsiga | Leiab näite, kuid analüüs on pindmine | Ebamäärane või ebatäpne seos reaalse maailmaga | +| **Koodinäide** | Töötav, hästi kommenteeritud kood, mis selgelt demonstreerib liidest | Funktsionaalne kood adekvaatsete kommentaaridega | Kood töötab, kuid dokumentatsioon vajab parandamist | Kood on vigane või selgitused puudulikud | +| **Kirjutise kvaliteet** | Selge, kaasahaarav kirjutis, korralik struktuur ja tehniline suhtlus | Hästi organiseeritud, hea tehniline kirjutamine | Piisav organiseeritus ja selgus | Kehv organiseeritus või ebaselge suhtlus | +| **Kriitiline mõtlemine** | Teeb mõistlikke seoseid ja pakub uuenduslikke rakendusi | Näitab head analüütilist mõtlemist ja asjakohaseid seoseid | Mõningane analüüs, võiks olla põhjalikum | Piiratud kriitilise mõtlemise tõendid | + +## Edu soovitused + +**Uurimisstrateegiad:** +- **Alusta** MDN-i dokumentatsioonist usaldusväärse info saamiseks +- **Otsi** koodinäiteid GitHubist või CodePenist +- **Kontrolli** populaarseid veebisaite brauseri arendustööriistadega +- **Vaata** õpetusvideosid visuaalseks selgituseks + +**Kirjutamisjuhised:** +- **Kasuta** oma sõnu, mitte dokumentatsiooni kopeerimist +- **Lisa** spetsiifilisi näiteid ja koodilõike +- **Selgita** tehnilisi mõisteid nagu õpetaksid sõbrale +- **Ühenda** oma liides laiemate veebiarenduse mõistetega + +**Koodinäite ideed:** +- **Loo** lihtne demo, mis näitab liidese põhifunktsioone +- **Tugevda** terrariumi projekti kontseptsioonide peal, kui asjakohane +- **Fokusseeri** funktsionaalsusele, mitte visuaalsele kujundusele +- **Testi** oma koodi, et tagada õige toimimine + +## Töö esitamise tähtaeg + +[Siin sisesta tähtaeg] + +## Küsimused? + +Kui vajad täiendavaid selgitusi selle ülesande kohta, ära kõhkle küsida! See uurimus süvendab sinu arusaamist, kuidas DOM võimaldab igapäevaseid interaktiivseid veebikogemusi. --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algkeeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame täpsuse tagamiseks, palume arvestada, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega tõlgenduste eest. + \ No newline at end of file diff --git a/translations/et/3-terrarium/README.md b/translations/et/3-terrarium/README.md index 37ea4f8f5..f63dc1383 100644 --- a/translations/et/3-terrarium/README.md +++ b/translations/et/3-terrarium/README.md @@ -1,45 +1,30 @@ -# Minu Terrarium: Projekt HTML-i, CSS-i ja DOM-i manipuleerimise õppimiseks JavaScripti abil 🌵🌱 +## Laadige oma Terrarium üles -Väike lohistamise ja kodeerimise harjutus. Natukese HTML-i, JS-i ja CSS-i abil saad luua veebiliidese, kujundada seda ja lisada mitmesuguseid interaktsioone vastavalt oma soovile. +Saate oma Terrariumi veebis avaldada, kasutades **Azure Static Web Apps** teenust. -![minu terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.et.png) +1. Haruge see hoidla -# Õppetunnid +2. Vajutage seda nuppu 👇 -1. [Sissejuhatus HTML-i](./1-intro-to-html/README.md) -2. [Sissejuhatus CSS-i](./2-intro-to-css/README.md) -3. [Sissejuhatus DOM-i ja JS-i sulgudesse](./3-intro-to-DOM-and-closures/README.md) +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) -## Autorid - -Kirjutatud ♥️-ga [Jen Looper](https://www.twitter.com/jenlooper) poolt. - -CSS-i abil loodud terrarium on inspireeritud Jakub Mandra klaaspurgi [Codepenist](https://codepen.io/Rotarepmi/pen/rjpNZY). - -Kunstiteosed on käsitsi joonistatud [Jen Looper](http://jenlooper.com) poolt Procreate'i abiga. - -## Terrariumi avaldamine - -Sa saad oma terrariumi veebis avaldada, kasutades Azure Static Web Apps'i. - -1. Forki see repo - -2. Vajuta sellele nupule - -[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp) - -3. Järgi juhiseid oma rakenduse loomiseks. Veendu, et määrad rakenduse juureks kas `/solution` või oma koodibaasi juure. Selles rakenduses API-d ei ole, seega selle pärast ei pea muretsema. Forkitud repositooriumisse luuakse GitHubi kaust, mis aitab Azure Static Web Apps'i ehitusteenustel sinu rakenduse ehitada ja avaldada uuel URL-il. +3. Järgige häälestusviisardi juhiseid oma rakenduse loomiseks. + - Määrake **App root** kas `/solution` või oma koodibaasi juur. + - Selles rakenduses pole API-d, seega võite API konfiguratsiooni vahele jätta. + - `.github` kaust luuakse automaatselt, et aidata Azure Static Web Apps-l teie rakendust ehitada ja avaldada. --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algkeeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tekkida võivate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/3-terrarium/solution/README.md b/translations/et/3-terrarium/solution/README.md index 5f3089b17..ed0b1c4ee 100644 --- a/translations/et/3-terrarium/solution/README.md +++ b/translations/et/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Väike lohistamise ja kodeerimise harjutus. Natukese HTML-i, JS-i ja CSS-i abil saad luua veebiliidese, kujundada selle ja lisada interaktsiooni. -![minu terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.et.png) +![minu terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.et.png) ## Autorid diff --git a/translations/et/4-typing-game/README.md b/translations/et/4-typing-game/README.md index db4bfceb9..cc79212d5 100644 --- a/translations/et/4-typing-game/README.md +++ b/translations/et/4-typing-game/README.md @@ -1,44 +1,290 @@ -# Sündmustepõhine programmeerimine - Loo trükimäng +# Sündmustepõhine programmeerimine - Ehita tippimismäng +```mermaid +journey + title Teie trükkimismängu arenduslugu + section Alus + Määra mängu struktuur: 3: Student + Kujunda kasutajaliides: 4: Student + Sea üles HTML elemendid: 4: Student + section Funktsionaalsus + Töötle kasutaja sisendit: 4: Student + Jälgi aega: 5: Student + Arvuta täpsus: 5: Student + section Omadused + Lisa visuaalne tagasiside: 5: Student + Rakenda mängulogiika: 5: Student + Lihvi kogemust: 5: Student +``` ## Sissejuhatus -Trükkimine on üks arendaja kõige alahinnatumaid oskusi. Võime kiiresti mõtteid oma peast redaktorisse kanda võimaldab loovusel vabalt voolata. Üks parimaid viise õppimiseks on mängimine! +Siin on midagi, mida iga arendaja teab, aga harva räägib: kiirelt tippimine on supervõime! 🚀 Mõtle selle peale – mida kiiremini suudad oma ideed ajust koodiredaktorisse viia, seda rohkem saab su loovus voolata. See on nagu otsetee su mõtete ja ekraani vahel. -> Niisiis, loome trükimängu! +```mermaid +pie title Mängu Funktsioonid + "Reaalajas Tagasiside" : 25 + "Tulemuste Jälgimine" : 20 + "Interaktiivne Kasutajaliides" : 20 + "Taimerisüsteem" : 15 + "Tsitaatide Haldamine" : 10 + "Tulemuste Kuvamine" : 10 +``` +Tahad teada üht parimat viisi selle oskuse arendamiseks? Arvasid õigesti – hakkame mängu ehitama! -Sa kasutad seni omandatud JavaScripti, HTML-i ja CSS-i oskusi, et luua trükimäng. Mäng esitab mängijale juhusliku tsitaadi (kasutame [Sherlock Holmesi](https://en.wikipedia.org/wiki/Sherlock_Holmes) tsitaate) ja mõõdab, kui kaua mängijal kulub selle täpseks sisestamiseks. Sa kasutad seni omandatud JavaScripti, HTML-i ja CSS-i oskusi, et luua trükimäng. +```mermaid +flowchart LR + A[Mängija alustab mängu] --> B[Juhuslik tsitaat kuvatud] + B --> C[Mängija sisestab tähed] + C --> D{Kas täht on õige?} + D -->|Jah| E[Roheline esiletõst] + D -->|Ei| F[Punane esiletõst] + E --> G[Täpsuse uuendamine] + F --> G + G --> H{Tsitaat valmis?} + H -->|Ei| C + H -->|Jah| I[Sõnade arv minutis arvutatud] + I --> J[Tulemuste kuvamine] + J --> K[Kas mängida uuesti?] + K -->|Jah| B + K -->|Ei| L[Mäng läbi] + + style A fill:#e1f5fe + style D fill:#fff3e0 + style E fill:#e8f5e8 + style F fill:#ffebee + style I fill:#f3e5f5 +``` +> Loome koos laheda tippimismängu! +Oled valmis panema kogu selle JavaScripti, HTMLi ja CSSi oskuse tööle, mida oled õppinud? Me ehitame tippimismängu, mis paneb sind proovile juhuslike tsitaatidega legendaarse detektiivi [Sherlock Holmesi](https://en.wikipedia.org/wiki/Sherlock_Holmes) loomingust. Mäng jälgib, kui kiiresti ja täpselt sa tippida suudad – ja usu mind, see on palju sõltuvust tekitavam, kui arvad! + +```mermaid +mindmap + root((Tippimise mängu arendus)) + User Interface + Input Elements + Visual Feedback + Responsive Design + Accessibility + Game Logic + Quote Selection + Timer Management + Accuracy Tracking + Score Calculation + Event Handling + Keyboard Input + Button Clicks + Real-time Updates + Game State Changes + Performance Metrics + Words Per Minute + Character Accuracy + Error Tracking + Progress Display + User Experience + Immediate Feedback + Clear Instructions + Engaging Content + Achievement System +``` ![demo](../../../4-typing-game/images/demo.gif) -## Eeldused +## Mida sul peab olema oskusteavet -See õppetund eeldab, et oled tuttav järgmiste mõistetega: +```mermaid +flowchart TD + A[Kasutaja Tegevus] --> B{Sündmuse Tüüp?} + B -->|Vajutuse Klahv| C[Klaviatuuri Sündmus] + B -->|Nupu Klikk| D[Hiire Sündmus] + B -->|Taimer| E[Aja Sündmus] + + C --> F[Tähe Kontrollimine] + D --> G[Mängu Algus/Reset] + E --> H[Taimeri Uuendamine] + + F --> I{Õige?} + I -->|Jah| J[Esile Roheline] + I -->|Ei| K[Esile Punane] + + J --> L[Skoori Uuendamine] + K --> L + L --> M[Mängu Seisu Kontrollimine] + + G --> N[Uue Tsitaadi Loomine] + H --> O[Aja Kuvamine] + + M --> P{Mäng Lõpetatud?} + P -->|Jah| Q[Tulemuste Kuvamine] + P -->|Ei| R[Mängu Jätkamine] + + style A fill:#e1f5fe + style F fill:#e8f5e8 + style I fill:#fff3e0 + style Q fill:#f3e5f5 +``` +Enne sukeldumist veendu, et tunneksid neid kontseptsioone (ära muretse, kui vajad kiiret värskendust – me kõik oleme seal olnud!): - Tekstisisendi ja nupukontrollide loomine -- CSS ja stiilide määramine klasside abil -- JavaScripti põhialused - - Massiivi loomine - - Juhusliku numbri genereerimine +- CSS ja stiilide määramine klasside abil +- JavaScripti alused + - Massiivide loomine + - Juhuslike arvude genereerimine - Praeguse aja hankimine -## Õppetund +Kui mõni neist tundub pisut roostes, pole see üldse probleem! Mõnikord on parim viis oma teadmisi tugevdada see, kui sukeldud projekti ja hakkad asju lahendama jooksvalt. + +### 🔄 **Pedagoogiline kontrollpunkt** +**Põhioskuste hindamine**: Enne arenduse alustamist veendu, et mõistad: +- ✅ Kuidas HTML vormid ja sisendi elemendid töötavad +- ✅ CSS klassid ja dünaamiline stiilimine +- ✅ JavaScripti sündmuste kuulajad ja käsitlejad +- ✅ Massiivide manipuleerimine ja juhuslik valik +- ✅ Aja mõõtmine ja arvutused + +**Kiire enesetest**: Kas suudad selgitada, kuidas need kontseptsioonid interaktiivses mängus koos toimivad? +- **Sündmused** käivituvad, kui kasutajad elementidega suhtlevad +- **Käsitlejad** töötlevad neid sündmusi ja uuendavad mängu seisundit +- **CSS** annab visuaalset tagasisidet kasutaja tegevustele +- **Ajastus** võimaldab mõõta sooritust ja mängu edenemist + +```mermaid +quadrantChart + title Trükkimise mängu oskuste arendamine + x-axis Algaja --> Ekspert + y-axis Staatiline --> Interaktiivne + quadrant-1 Täiustatud mängud + quadrant-2 Reaalajas rakendused + quadrant-3 Põhilised lehed + quadrant-4 Interaktiivsed saidid + + HTML Forms: [0.3, 0.2] + CSS Styling: [0.4, 0.3] + Event Handling: [0.7, 0.8] + Game Logic: [0.8, 0.9] + Performance Tracking: [0.9, 0.7] +``` +## Hakakem seda asja ehitama! + +[Tippimismängu loomine sündmustepõhise programmeerimise abil](./typing-game/README.md) + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Ava oma brauseri konsool ja proovi kuulata klaviatuuri sündmusi `addEventListener` abil +- [ ] Loo lihtne HTML leht sisendväljaga ja testi tippimise tuvastamist +- [ ] Harjuta stringide manipuleerimist, võrreldes tippitud teksti sihttekstiga +- [ ] Katseta `setTimeout`i, et aru saada ajafunktsioonidest + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida peatunni test ja saa aru sündmustepõhisest programmeerimisest +- [ ] Ehita lihtne versioon tippimismängust koos sõnade valideerimisega +- [ ] Lisa visuaalne tagasiside korrektsel ja valel tippimisel +- [ ] Rakenda lihtne punktisüsteem kiiruse ja täpsuse põhjal +- [ ] Stiilita oma mäng CSS-iga, et muuta see visuaalselt atraktiivseks + +### 📅 **Sinu nädalane mänguarendus** +- [ ] Valmista terve tippimismäng koos kõigi funktsioonide ja lihviga +- [ ] Lisa raskusastmed erineva sõnakompleksusega +- [ ] Rakenda kasutajastatistika jälgimist (WPM, täpsus aja jooksul) +- [ ] Loo heliefektid ja animatsioonid parema kasutajakogemuse jaoks +- [ ] Tee mäng mobiilseadmete jaoks puutetundlikuks +- [ ] Jaga oma mängu internetis ja kogu kasutajate tagasisidet + +### 🌟 **Sinu kuu pikkune interaktiivne arendus** +- [ ] Ehitada mitu mängu, mis uurivad erinevaid interaktsioonimustreid +- [ ] Õpi mängutsüklitest, seisundihaldusest ja jõudluse optimeerimisest +- [ ] Panusta avatud lähtekoodiga mänguarendusprojektidesse +- [ ] Valda keerukaid ajastamise kontseptsioone ja sujuvaid animatsioone +- [ ] Koosta portfoolio erinevatest interaktiivsetest rakendustest +- [ ] Juhenda teisi, kes on huvitatud mänguarendusest ja kasutajate interaktsioonist + +## 🎯 Sinu tippimismängu meisterlikkuse ajagraafik + +```mermaid +timeline + title Mänguarenduse õppimise edenemine + + section Seadistamine (10 minutit) + Projekti struktuur: HTML alus + : CSS kujunduse seadistamine + : JavaScript faili loomine + + section Kasutajaliides (20 minutit) + Interaktiivsed elemendid: Sisendväljad + : Nupuvajutuse juhtelemendid + : Kuvamisalad + : Reageeriv paigutus + + section Sündmuste käitlemine (25 minutit) + Kasutaja interaktsioon: Klaviatuuri sündmused + : Hiire sündmused + : Reaalajas tagasiside + : Oleku haldamine + + section Mänguloogika (30 minutit) + Põhifunktsionaalsus: Tsitaatide genereerimine + : Tähemärkide võrdlus + : Täpsuse arvutamine + : Taimeri rakendamine + + section Jõudluse jälgimine (35 minutit) + Mõõdikud & analüütika: Sõnade minutis arvutamine + : Vigade jälgimine + : Edenemise visualiseerimine + : Tulemuste kuvamine + + section Viimistlus & täiustamine (45 minutit) + Kasutajakogemus: Visuaalne tagasiside + : Heliefektid + : Animatsioonid + : Juurdepääsetavuse funktsioonid + + section Täiustatud omadused (1 nädal) + Laiendatud funktsionaalsus: Raskeaste tasemed + : Tabelid + : Kohandatud tsitaadid + : Mitmikmängu võimalused + + section Professionaalsed oskused (1 kuu) + Mänguarendus: Jõudluse optimeerimine + : Koodi arhitektuur + : Testimise strateegiad + : Deploy mustrid +``` +### 🛠️ Sinu mänguarenduse tööriistakasti kokkuvõte + +Pärast selle projekti lõpetamist oled valdanud: +- **Sündmustepõhine programmeerimine**: reageerivad kasutajaliidesed, mis vastavad sisendile +- **Reaalajas tagasiside**: kohesed visuaalsed ja jõudluslikud uuendused +- **Jõudluse mõõtmine**: täpsed ajastus- ja punktisüsteemid +- **Mänguseisundi haldus**: rakenduse voo ja kasutajakogemuse kontrollimine +- **Interaktiivne disain**: kaasahaaravate ja sõltuvusttekitavate kasutajakogemuste loomine +- **Moodne veebipõhine API**: brauserivõimaluste kasutamine rikkalike interaktsioonide jaoks +- **Juurdepääsetavuse mustrid**: kaasav disain kõigile kasutajatele + +**Reaalmaailma rakendused**: Need oskused kehtivad otseselt järgmistes valdkondades: +- **Veebirakendused**: igasugused interaktiivsed liidesed või juhtpaneelid +- **Haridustarkvara**: õppimisplatvormid ja oskuste hindamise tööriistad +- **Tootlikkustööriistad**: tekstiredaktorid, IDEd ja koostöö tarkvara +- **Mängutööstus**: brauserimängud ja interaktiivne meelelahutus +- **Mobiiliarendus**: puutetundlikud liidesed ja žestide käsitlemine -[Sündmustepõhise programmeerimise abil trükimängu loomine](./typing-game/README.md) +**Järgmine tase**: oled valmis avastama keerukamaid mänguraamistikke, reaalajas mitmikmängusüsteeme või keerulisi interaktiivseid rakendusi! -## Autorid +## Tänusõnad -Kirjutatud ♥️-ga [Christopher Harrison](http://www.twitter.com/geektrainer) poolt +Kirjutas ♥️ [Christopher Harrison](http://www.twitter.com/geektrainer) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame täpsust, tuleb arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti tõlgendamise eest. + \ No newline at end of file diff --git a/translations/et/4-typing-game/typing-game/README.md b/translations/et/4-typing-game/typing-game/README.md index 15a722038..ed6a9842b 100644 --- a/translations/et/4-typing-game/typing-game/README.md +++ b/translations/et/4-typing-game/typing-game/README.md @@ -1,88 +1,154 @@ # Mängu loomine sündmuste abil -## Loengu-eelne viktoriin +Kas oled kunagi mõelnud, kuidas veebisaidid teavad, millal sa klõpsad nuppu või tippid tekstikasti? See on sündmustepõhise programmeerimise võlu! Mis oleks parem viis selle olulise oskuse õppimiseks, kui ehitada midagi kasulikku – tippimiskiiruse mäng, mis reageerib iga su tehtud klahvivajutuse peale. -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/21) +Sa näed ise, kuidas veebibrauserid "räägivad" su JavaScript koodiga. Iga kord, kui sa klõpsad, tipsid või lohistad hiirt, saadab brauser sinu koodile väikeseid sõnumeid (me nimetame neid sündmusteks), ja sina otsustad, kuidas reageerida! + +Siin lõpus oled ehitanud pärismaailma tippimismängu, mis jälgib su kiirust ja täpsust. Veelgi olulisem on see, et sa saad aru põhimõistetest, mis juhivad iga interaktiivset veebisaiti, mida sa oled kasutanud. Hakkame pihta! + +## Enne loengut test + +[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/21) ## Sündmustepõhine programmeerimine -Veebirakenduse loomisel pakume kasutajale graafilist kasutajaliidest (GUI), mille abil ta saab meie loodud rakendusega suhelda. Kõige tavalisem viis brauseriga suhtlemiseks on klõpsamine ja erinevates elementides kirjutamine. Väljakutse, millega arendajana silmitsi seisame, on see, et me ei tea, millal kasutaja neid toiminguid teeb! +Mõtle oma lemmikrakendusele või veebisaidile – mis teeb selle elavaks ja reageerivaks? Kõik saab alguse sellest, kuidas see reageerib su tegevustele! Iga koputus, klõps, libistus või klahvivajutus tekitab seda, mida me nimetame "sündmuseks", ja just siin toimub veebiarenduse tõeline võlu. + +See teeb veebiprogrammeerimise väga huvitavaks: me ei tea kunagi, millal keegi selle nupu klõpsab või tekstikasti hakkab tippima. Nad võivad klõpsata kohe, oodata viis minutit või võib-olla ei klõpsa üldse! See ettearvamatus nõuab, et me mõtleksime teisiti koodi kirjutamisele. -[Sündmustepõhine programmeerimine](https://en.wikipedia.org/wiki/Event-driven_programming) on programmeerimisviis, mida vajame oma GUI loomiseks. Kui seda fraasi veidi lahti mõtestada, näeme, et keskne sõna siin on **sündmus**. [Sündmus](https://www.merriam-webster.com/dictionary/event), Merriam-Websteri järgi, on defineeritud kui "midagi, mis juhtub". See kirjeldab meie olukorda täiuslikult. Me teame, et midagi juhtub, millele tahame koodi täitmisega reageerida, kuid me ei tea, millal see juhtub. +Selle asemel, et kirjutada kood, mis jookseb ülevalt alla nagu retsept, kirjutame koodi, mis ootab kannatlikult, kuni midagi juhtub. See on nagu 1800. aastate telegraafitöötajad, kes istusid oma masinate kõrval valmis, et kohe reageerida, kui sõnum traat läbi tuli. -Viis, kuidas me tähistame koodiosa, mida tahame täita, on funktsiooni loomine. Kui mõtleme [protseduuripõhisele programmeerimisele](https://en.wikipedia.org/wiki/Procedural_programming), kutsutakse funktsioone kindlas järjekorras. Sama kehtib ka sündmustepõhise programmeerimise puhul. Erinevus seisneb selles, **kuidas** funktsioone kutsutakse. +Mis on siis täpsemalt "sündmus"? Lihtsalt öeldes: see on midagi, mis juhtub! Kui sa klõpsad nuppu – see on sündmus. Kui sa tippid tähe – see on sündmus. Kui sa liigutad hiirt – see on teine sündmus. -Sündmuste (nupu klõpsamine, kirjutamine jne) käsitlemiseks registreerime **sündmuste kuulajad**. Sündmuste kuulaja on funktsioon, mis ootab sündmuse toimumist ja täidab koodi vastuseks. Sündmuste kuulajad võivad värskendada kasutajaliidest, teha serverikõnesid või teha muid vajalikke toiminguid vastuseks kasutaja tegevusele. Sündmuste kuulaja lisamiseks kasutame [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) ja anname ette funktsiooni, mida täita. +Sündmustepõhine programmeerimine laseb meil seadistada koodi kuulama ja reageerima. Loome spetsiaalsed funktsioonid, mida nimetatakse **sündmusekõrvutajateks (event listeners)**, mis ootavad kannatlikult konkreetsete sündmuste juhtumist ja reageerivad kohe, kui see juhtub. -> **NOTE:** Tasub rõhutada, et sündmuste kuulajate loomiseks on mitmeid viise. Võite kasutada anonüümseid funktsioone või luua nimelisi funktsioone. Võite kasutada erinevaid otseteid, näiteks määrata `click` omaduse või kasutada `addEventListener`. Meie harjutuses keskendume `addEventListener`-ile ja anonüümsetele funktsioonidele, kuna see on tõenäoliselt kõige levinum tehnika, mida veebiarendajad kasutavad. See on ka kõige paindlikum, kuna `addEventListener` töötab kõigi sündmuste puhul ja sündmuse nime saab anda parameetrina. +Mõtle sündmusekõrvutaja peale nagu uksekella oma koodi jaoks. Sa seadistad uksekella (`addEventListener()`), ütled, millist heli kuulata (näiteks 'click' või 'keypress'), ja määrad, mis peaks juhtuma, kui keegi selle helistab (sinu kohandatud funktsioon). + +**Nii toimivad sündmusekõrvutajad:** +- **Kuulavad** konkreetseid kasutaja tegevusi nagu klõpsud, klahvivajutused või hiire liigutused +- **Käivitatakse** sinu kohandatud kood, kui määratud sündmus toimub +- **Reageerivad** kohe kasutaja interaktsioonidele, luues sujuva kogemuse +- **Haldavad** mitut sündmust sama elemendi peal erinevate kõrvutajate kaudu + +> **MÄRKUS:** Tasub rõhutada, et sündmusekõrvutajaid on mitut moodi luua. Võid kasutada anonüümseid funktsioone või luua nimelisi. Sa võid kasutada erinevaid otseteid, nagu `click` omaduse seadistamine või `addEventListener()`. Meie ülesandes keskendume `addEventListener()` ja anonüümsete funktsioonide kasutamisele, kuna see on tõenäoliselt kõige tavalisem tehnika veebiarendajate seas. Samuti on see kõige paindlikum, sest `addEventListener()` töötab kõigi sündmustega ja sündmuse nimi saab olla parameetrina. ### Levinumad sündmused -Rakenduse loomisel on saadaval [kümneid sündmusi](https://developer.mozilla.org/docs/Web/Events), mida saate kuulata. Põhimõtteliselt tõstab iga kasutaja tegevus lehel esile sündmuse, mis annab teile palju võimalusi tagada, et nad saavad soovitud kogemuse. Õnneks vajate tavaliselt ainult väikest hulka sündmusi. Siin on mõned levinumad (sealhulgas kaks, mida kasutame oma mängu loomisel): +Kuigi veebibrauserid pakuvad mitmekümneid erinevaid sündmusi, mida kuulata, toetuvad enamus interaktiivseid rakendusi vaid mõnele olulisemale sündmusele. Nende põhielementide mõistmine annab sulle vundamendi keerukamate kasutajaliideste loomiseks. + +On olemas [kümneid sündmusi](https://developer.mozilla.org/docs/Web/Events), mida saad rakenduses kuulata. Peaaegu iga kasutaja tegevus lehel tekitab sündmuse, mis annab sulle palju võimu tagada soovitud kasutajakogemus. Õnneks vajad sa tavaliselt vaid väikest valikut sündmusi. Siin on mõned levinumad (sealhulgas kaks, mida kasutame oma mängu loomisel): -- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): Kasutaja klõpsas millelgi, tavaliselt nupul või hüperlingil -- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): Kasutaja klõpsas parema hiireklahviga -- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): Kasutaja valis teksti -- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): Kasutaja sisestas teksti +| Sündmus | Kirjeldus | Levinumad kasutusjuhtumid | +|---------|-----------|----------------------------| +| `click` | Kasutaja klõpsas millegi peal | Nupud, lingid, interaktiivsed elemendid | +| `contextmenu` | Kasutaja klõpsas parema hiirenupuga | Kohandatud paremklõpsumenüüd | +| `select` | Kasutaja märgistas teksti | Tekstiredigeerimine, kopeerimine | +| `input` | Kasutaja sisestas teksti | Vormide valideerimine, reaalajas otsing | + +**Nende sündmustüüpide mõistmine:** +- **Käivitub**, kui kasutajad suhtlevad konkreetsete elementidega sinu lehel +- **Pakkuvad** detailset infot kasutaja tegevuse kohta sündmuse objektide kaudu +- **Võimaldavad** sul luua vastutulelikke ja interaktiivseid veebiäppe +- **Töötavad** järjekindlalt erinevates brauserites ja seadmetes ## Mängu loomine -Loome mängu, et uurida, kuidas sündmused JavaScriptis töötavad. Meie mäng testib mängija kirjutamisoskust, mis on üks kõige alahinnatumaid oskusi, mida kõik arendajad peaksid omama. Me kõik peaksime harjutama oma kirjutamisoskust! Mängu üldine voog näeb välja järgmine: +Nüüd, kui sa tead, kuidas sündmused töötavad, paneme selle teadmise praktikasse, luues midagi kasulikku. Loome tippimiskiiruse mängu, mis demonstreerib sündmuste käsitlemist ja aitab sul arendada olulist arendaja oskust. + +Me hakkame looma mängu, et uurida, kuidas JavaScriptis sündmused töötavad. Meie mäng testib mängija tippimisoskust, mis on üks alahinnatud oskusi, mida iga arendaja peaks valdama. Huvitav fakt: klaviatuuripaigutus QWERTY, mida me tänapäeval kasutame, töötati tegelikult välja 1870. aastatel kirjutusmasinate jaoks – ja head tippimisoskused on programmeerijatele tänaseni väga väärtuslikud! Mängu üldine voog näeb välja järgmine: + +```mermaid +flowchart TD + A[Mängija klikib Alusta] --> B[Juhuslik tsitaat kuvatakse] + B --> C[Mängija sisestab tekstikasti] + C --> D[Sõna lõpuni?] + D -->|Jah| E[Esile tõsta järgmine sõna] + D -->|Ei| F[Kuni nüüd korrektne?] + F -->|Jah| G[Hoia normaalset stiili] + F -->|Ei| H[Näita veast stiili] + E --> I[Tsitaat lõpetatud?] + I -->|Ei| C + I -->|Jah| J[Kuva edusõnum ajaga] + G --> C + H --> C +``` +**Mäng töötab nii:** +- **Algab**, kui mängija klõpsab start nupul ja kuvab juhusliku tsitaadi +- **Jälgib** mängija tippimise edenemist sõna haaval reaalajas +- **Tõstab esile** praeguse sõna, et juhatada mängija tähelepanu +- **Anname** kohese visuaalse tagasiside tippimisvigade kohta +- **Arvutab** ja kuvab koguaega, kui tsitaat on lõpetatud -- Mängija klõpsab nuppu "Start" ja talle kuvatakse tsitaat, mida kirjutada -- Mängija kirjutab tsitaadi nii kiiresti kui võimalik tekstikasti - - Kui iga sõna on lõpetatud, tõstetakse järgmine esile - - Kui mängija teeb kirjavea, muutub tekstikast punaseks - - Kui mängija lõpetab tsitaadi, kuvatakse edukuse sõnum koos kulunud ajaga +Teeme ära ja õpime sündmuste kohta! -Hakkame oma mängu looma ja õpime sündmuste kohta! +### Failide struktuur -### Failistruktuur +Enne kui hakkame koodi kirjutama, tehkem endale selgeks failistruktuur! Alates algusest korras olev failistruktuur säästab hiljem peavalu ja teeb su projekti professionaalsemaks. 😊 -Meil on vaja kokku kolme faili: **index.html**, **script.js** ja **style.css**. Alustame nende seadistamisest, et muuta töö lihtsamaks. +Hoidke asjad lihtsana kolme failiga: `index.html` meie lehe struktuuri jaoks, `script.js` kogu mängu loogika jaoks ja `style.css`, et kõik ilus välja näeks. See on klassikaline trioon, mis paneb suurema osa veebist tööle! -- Looge oma töö jaoks uus kaust, avades konsooli või terminali akna ja sisestades järgmise käsu: +**Loo uus kaust oma töö jaoks, avades konsooli või terminali ning käivitades järgmise käsu:** ```bash -# Linux or macOS +# Linux või macOS mkdir typing-game && cd typing-game # Windows md typing-game && cd typing-game ``` -- Avage Visual Studio Code +**Need käsud teevad järgmist:** +- **Loovad** uue kausta nimega `typing-game` sinu projekti failide jaoks +- **Liiguvad** automaatselt äsja loodud kausta +- **Seadistavad** puhta tööruumi sinu mänguarenduseks + +**Ava Visual Studio Code:** ```bash code . ``` -- Lisage kausta Visual Studio Code'is kolm faili järgmiste nimedega: - - index.html - - script.js - - style.css +**See käsk:** +- **Avab** Visual Studio Code'i praeguses kaustas +- **Laeb** sinu projekti kausta redaktoris +- **Pakkuvab** juurdepääsu kõikidele vajalikele arendusvahenditele + +**Lisa Visual Studio Codes kausta kolm faili järgmiste nimedega:** +- `index.html` – sisaldab mängu struktuuri ja sisu +- `script.js` – haldab kogu mängu loogikat ja sündmusekõrvutajaid +- `style.css` – määratleb visuaalse välimuse ja stiilid ## Kasutajaliidese loomine -Kui uurime nõudeid, teame, et vajame HTML-lehel mitmeid elemente. See on natuke nagu retsept, kus vajame mõningaid koostisosi: +Korteri ehitamiseks leiame nüüd ruumi, kus kogu meie mängutegelane toimub! Mõtle sellele kui kosmoselaeva juhtpaneeli kujundamine – me peame tagama, et kõik, mida mängijad vajavad, on täpselt seal, kus nad seda ootavad. -- Koht, kus kuvada tsitaati, mida kasutaja peaks kirjutama -- Koht, kus kuvada sõnumeid, näiteks edukuse sõnumit -- Tekstikast kirjutamiseks -- Start-nupp +Vaatame, mida meie mäng tegelikult vajab. Kui sa mängiksid tippimismängu, mida sa tahaksid ekraanil näha? Siin on, mida me vajame: -Igal neist peab olema ID, et saaksime nendega JavaScriptis töötada. Samuti lisame viited CSS- ja JavaScripti failidele, mida loome. +| Kasutajaliidese element | Eesmärk | HTML element | +|-------------------------|---------|--------------| +| Tsitaadi kuvamine | Kuvab teksti, mida tippida | `

` koos `id="quote"` | +| Sõnumiala | Kuvab staatuse ja edusõnumeid | `

` koos `id="message"` | +| Tekstisisestus | Koht, kuhu mängijad tsitaati tipivad | `` koos `id="typed-value"` | +| Start-nupp | Algatab mängu | ` + +``` -### Laiendi HTML-i loomine +**Seda vormi tehakse:** +- **Loomine** semantilise vormi struktuur koos korrektselt seotud sildiste ja sisenditega +- **Lubamine** brauseri automaatse täitmise funktsioonile paremaks kasutajakogemuseks +- **Nõutakse** mõlema välja täitmist enne vormi esitamist, kasutades atribuuti `required` +- **Korraldamine** sisendid kirjeldavate klassinimedega stiilimiseks ja JavaScripti valimiseks +- **Juhiste pakkumine** kasutajatele, kes täidavad laienduse esimest korda -Sellel laiendil on kaks vaadet. Üks API-võtme ja piirkonna koodi kogumiseks: +### Tulemuste kuvamise loomine -![Ekraanipilt valmis laiendist, mis on avatud brauseris ja kuvab vormi piirkonna nime ja API-võtme sisestamiseks.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.et.png) +Järgmine, loo tulemuste ala, mis kuvab süsiniku jalajälje andmeid. Lisa see HTML vormi alla: -Ja teine piirkonna süsinikukasutuse kuvamiseks: +```html +

+
loading...
+
+
+
+

Region:

+

Carbon Usage:

+

Fossil Fuel Percentage:

+
+ +
+``` -![Ekraanipilt valmis laiendist, mis kuvab süsinikukasutuse ja fossiilkütuste protsendi väärtusi US-NEISO piirkonna jaoks.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.et.png) +**See struktuur teeb võimalikult:** +- **`loading`**: kuvab laadimise sõnumi, kuni API päring on töös +- **`errors`**: näitab veateateid, kui API kõned ebaõnnestuvad või andmed on vigased +- **`data`**: hoiab tooraineandmeid silumiseks arenduse ajal +- **`result-container`**: esitab kasutajatele vormindatud süsiniku jalajälje info +- **`clear-btn`**: võimaldab kasutajatel regiooni muuta ja laiendust uuesti seadistada -Alustame vormi HTML-i loomisega ja selle stiilimisega CSS-i abil. +### Build protsessi seadistamine -Kaustas `/dist` ehitad vormi ja tulemuste ala. Failis `index.html` täida määratud vormiala: +Nüüd paigaldame projekti sõltuvused ja testime build protsessi: -```HTML -
-
-

New? Add your Information

-
-
- - -
-
- - -
- -
+```bash +npm install ``` -See on vorm, kuhu salvestatud teave sisestatakse ja salvestatakse kohalikku salvestusse. -Järgmiseks loo tulemuste ala; lisa lõpliku vormi sildi alla mõned div-id: +**Seda paigaldusprotsessi tehakse:** +- **Laeb alla** Webpacki ja muud arendussõltuvused, mis on määratud `package.json`-is +- **Seadistab** build tööriistakomplekti kaasaegse JavaScripti kompileerimiseks +- **Valmistab** arenduskeskkonna ette laienduse ehitamiseks ja testimiseks +- **Lubab** koodi pakendamise, optimeerimise ja mitme brauseriga ühilduvuse omadused -```HTML -
-
loading...
-
-
-
-

Region:

-

Carbon Usage:

-

Fossil Fuel Percentage:

-
- -
-``` -Sel hetkel võid proovida ehitust. Veendu, et paigaldad selle laiendi paketisõltuvused: +> 💡 **Build protsessi mõistmine**: Webpack pakendab sinu lähtekoodi failist `/src/index.js` faili `/dist/main.js`. See protsess optimeerib koodi tootmiseks ja tagab brauseri ühilduvuse. -``` -npm install -``` +### Oma edenemise testimine -See käsk kasutab npm-i, Node Package Manager'it, et paigaldada webpack sinu laiendi ehitusprotsessi jaoks. Webpack on komplekteerija, mis haldab koodi kompileerimist. Selle protsessi väljundit näed, vaadates `/dist/main.js` - näed, et kood on komplekteeritud. +Nüüd saad oma laiendust testida: +1. **Käivita** build-käsk, et kompileerida oma kood +2. **Laadi** laiendus brauserisse arendajarežiimi abil +3. **Kontrolli**, et vorm kuvatakse õigesti ja näeb professionaalne välja +4. **Veendu**, et kõik vormielemendid on korralikult joondatud ja funktsionaalsed -Praegu peaks laiend ehituma ja kui juurutad selle Edge'i brauserisse laiendina, näed vormi kenasti kuvatuna. +**Mida oled saavutanud:** +- **Ehitanud** laienduse aluseks oleva HTML struktuuri +- **Loonud** nii konfiguratsiooni- kui ka tulemuste liidesed õige semantilise märgistusega +- **Määranud** kaasaegse arendusvoo tööstusharu standardseid vahendeid kasutades +- **Valmistanud** aluse interaktiivse JavaScript funktsionaalsuse lisamiseks -Palju õnne, oled astunud esimesed sammud brauserilaiendi loomise suunas. Järgmistes õppetundides teed selle funktsionaalsemaks ja kasulikumaks. +### 🔄 **Pedagoogiline kontroll** +**Laienduse arendamise edenemine**: Kinnita oma arusaam enne jätkamist: +- ✅ Kas suudad selgitada iga projekti struktuuri faili eesmärki? +- ✅ Kas mõistad, kuidas build-protsess teisendab sinu lähtekoodi? +- ✅ Miks me eraldame konfiguratsiooni ja tulemused erinevatesse kliendiliidese osadesse? +- ✅ Kuidas vormi struktuur toetab nii kasutatavust kui ligipääsetavust? ---- +**Arendusvoo mõistmine**: Nüüd peaksid suutma: +1. **Muuta** HTMLi ja CSSi oma laienduse liidese jaoks +2. **Käivita** build-käsk, et koostada muudatused +3. **Laadi** laiendus uuesti brauseris, et testida uuendusi +4. **Siluda** probleeme brauseri arendajatööriistade abil + +Oled lõpetanud esimese etapi brauserilaienduse arendamises. Nagu Wrighti vennad pidid muuseas mõistma aerodünaamikat enne lendu, valmistab nende aluseks olevate kontseptsioonide tundmine sind ette keerukamate interaktiivsete funktsioonide loomisele järgmises õppetükis. + +## GitHub Copiloti agendi väljakutse 🚀 + +Kasuta agendi režiimi, et lahendada järgmine väljakutse: + +**Kirjeldus:** Täienda brauserilaiendust, lisades vormi valideerimise ja kasutajatagasiside funktsioonid, et parandada kasutajakogemust API võtmete ja piirkonnakoodide sisestamisel. + +**Prompt:** Loo JavaScripti valideerimisfunktsioonid, mis kontrollivad, kas API võtmepaik sisaldab vähemalt 20 märki ning kas piirkonnakood vastab õigele vormingule (nt „US-NEISO“). Lisa visuaalne tagasiside, muutes sisendi servavärvi roheliseks kehtiva sisendi puhul ja punaseks kehtetu puhul. Lisa ka lüliti funktsioon API võtme näitamiseks/peitmiseks turvalisuse tagamiseks. + +Õpi rohkem [agendi režiimi](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kohta siit. ## 🚀 Väljakutse -Vaata brauserilaiendite poodi ja paigalda üks oma brauserisse. Saad selle faile huvitaval viisil uurida. Mida avastad? +Vaata ringi mõnes brauserilaienduste poest ja installeeri üks oma brauserisse. Sa saad selle faile huvitavalt uurida. Mida avastad? -## Järelloengu viktoriin +## Loengu järgne test -[Järelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/24) +[Loengu järgne test](https://ff-quizzes.netlify.app/web/quiz/24) -## Ülevaade ja iseseisev õpe +## Ülevaade ja iseseisev õppimine -Selles õppetunnis õppisid veidi veebibrauseri ajaloost; kasuta seda võimalust, et õppida, kuidas World Wide Web'i loojad kujutasid ette selle kasutamist, lugedes rohkem selle ajaloost. Mõned kasulikud saidid on: +Selles õppetükis õppisid veidi veebibrauseri ajaloost; kasuta võimalust ja loe rohkem selle ajaloost ning kuidas Maailma Terviku Veebi looja selle kasutust ette kujutas. Mõned kasulikud leheküljed on: [Veebibrauserite ajalugu](https://www.mozilla.org/firefox/browsers/browser-history/) [Veebi ajalugu](https://webfoundation.org/about/vision/history-of-the-web/) -[Intervjuu Tim Berners-Lee'ga](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want) +[Intervjuu Tim Berners-Leega](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want) + +### ⚡ **Mida saad järgmise 5 minutiga teha** +- [ ] Ava Chrome/Edge laienduste leht (chrome://extensions) ja vaata, mis sul paigaldatud on +- [ ] Vaata oma brauseri DevToolsi Network vahekaarti veebilehe laadimisel +- [ ] Proovi veebilehe allikat vaadata (Ctrl+U), et näha HTML struktuuri +- [ ] Inspekteeri suvalist veebilehe elementi ja muuda selle CSSi DevToolsis + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida loengu järgne test ja mõista brauserite põhialuseid +- [ ] Loo lihtne manifest.json fail brauserilaienduse jaoks +- [ ] Ehita lihtne „Hello World“ laiendus, mis kuvab hüpikakna +- [ ] Testi laienduse laadimist arendajarežiimis +- [ ] Uuri sihtbrauseri laienduste dokumentatsiooni + +### 📅 **Sinu nädala pikkune laienduste arendusretk** +- [ ] Loo funktsionaalne brauserilaiendus, millel on kasulik otstarve +- [ ] Õpi sisu skripte, taustaskripte ja hüpikakende interaktsioone +- [ ] Saavuta meisterlikkus brauseri APIde nagu storage, tabs ja messaging kasutamises +- [ ] Kujunda kasutajasõbralikud liidesed oma laiendusele +- [ ] Testi laiendust erinevatel veebisaitidel ja olukordades +- [ ] Avalda oma laiendus brauseri laienduste poes + +### 🌟 **Sinu kuu pikkune brauseriarenduse teekond** +- [ ] Ehita mitmeid laiendusi, mis lahendavad erinevaid kasutajaprobleeme +- [ ] Õpi edasijõudnud brauseri APIsid ja turvalise arenduse parimaid praktikaid +- [ ] Panusta avatud lähtekoodiga brauserilaienduste projektidesse +- [ ] Saavuta meisterlikkus ristbrauseri ühilduvuses ja progressiivses täiendamises +- [ ] Loo laienduste arendamise tööriistu ja malle teistele +- [ ] Saa brauserilaienduste ekspert, kes aitab teisi arendajaid + +## 🎯 Sinu brauserilaienduse meistriklassi ajajoon + +```mermaid +timeline + title Brauserilaienduse arenduse edenemine + + section Alus (15 minutit) + Brauseri mõistmine: Põhiarhitektuur + : Renderdusprotsess + : Laienduse integreerimise punktid + + section Seadistamine (20 minutit) + Arenduskeskkond: Projekti struktuur + : Tööriistade konfiguratsioon + : Brauseri arendajarežiim + : Laienduse laadimise protsess + + section Liidese disain (25 minutit) + Kasutajakogemus: HTML struktuur + : CSS stiilimine + : Vormide valideerimine + : Reageeriv disain + + section Põhifunktsioonid (35 minutit) + JavaScripti integratsioon: Sündmuste käitlemine + : API suhtlused + : Andmete salvestamine + : Vigade käsitlemine + + section Brauseri API-d (45 minutit) + Platvormi integratsioon: Loadude süsteem + : Salvestuse API-d + : Vahelehtede haldamine + : Kontekstimenüüd + + section Täiustatud funktsioonid (1 nädal) + Professionaalsed laiendused: Taustaskriptid + : Sisuskirjed + : Ristbrauseri ühilduvus + : Jõudluse optimeerimine + + section Avaldamine (2 nädalat) + Levitate: Poe esitus + : Ülevaatamisprotsess + : Kasutajate tagasiside + : Uuenduste haldamine + + section Eksperdistasand (1 kuu) + Laienduste ökosüsteem: Täiustatud API-d + : Turvalisuse parimad tavad + : Ettevõtte funktsioonid + : Raamistiku integratsioon +``` +### 🛠️ Sinu laienduse arendustööriistade kokkuvõte + +Pärast selle õppetüki lõpetamist oled omandanud: +- **Brauseri arhitektuuri teadmised**: arusaam renderdusmootoritest, turvemudelitest ja laienduste integreerimisest +- **Arenduskeskkond**: kaasaegne tööriistade komplekt Webpackiga, NPM ja silumiste võimalustega +- **UI/UX alused**: semantiline HTML struktuur progressiivsed paljastamise mustrid +- **Turvateadlikkus**: arusaam brauseri õigustest ja turvalisest arendamisest +- **Ristbrauseri kontseptsioonid**: teadmised ühilduvusnõuetest ja testimisviisidest +- **API integreerimine**: alus väliste andmeallikatega töötamiseks +- **Professionaalne arendusvoog**: tööstusharu standardite järgi arendamine ja testimine + +**Reaalsetes ülesannetes** rakendatavad oskused: +- **Veebiarendus**: ühelt lehelt rakendused ja progressiivsed veebirakendused +- **Lauaarvutirakendused**: Electron ja veebipõhised lauaarvuti tarkvaralahendused +- **Mobiiliarendus**: hübriidrakendused ja veebipõhised mobiililahendused +- **Ettevõtte tööriistad**: sisemised tootlikkuse rakendused ja töövoo automatiseerimine +- **Avatud lähtekood**: panustamine brauserilaienduste projektidesse ja veebistandarditesse + +**Järgmine tasand**: oled valmis lisama interaktiivset funktsionaalsust, töötama brauseri APIdega ja looma laiendusi, mis lahendavad reaalseid kasutajaprobleeme! -## Ülesanne +## Kodutöö -[Muuda oma laiendi stiili](assignment.md) +[Muuda oma laienduse stiili](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti tõlgendamise eest. + \ No newline at end of file diff --git a/translations/et/5-browser-extension/1-about-browsers/assignment.md b/translations/et/5-browser-extension/1-about-browsers/assignment.md index 34f939150..3d19ac9e6 100644 --- a/translations/et/5-browser-extension/1-about-browsers/assignment.md +++ b/translations/et/5-browser-extension/1-about-browsers/assignment.md @@ -1,25 +1,146 @@ -# Kohanda oma laiendust +# Ülesanne: Muuda oma brauserilaiend stiililisemaks + +## Ülevaade + +Nüüd, kui oled loonud oma süsinikujalajälje brauserilaiendi HTML-struktuuri, on aeg muuta see visuaalselt atraktiivseks ja kasutajasõbralikuks. Hea disain parandab kasutajakogemust ning muudab su laiendi professionaalsemaks ja kaasahaaravamaks. + +Sinu laiendil on põhiline CSS-stiil, kuid see ülesanne kutsub sind looma unikaalse visuaalse identiteedi, mis peegeldab sinu isiklikku stiili ja samas säilitab suurepärase kasutusmugavuse. ## Juhised -Selle laienduse koodibaas sisaldab valmis stiile, kuid sa ei pea neid kasutama; muuda oma laiendus unikaalseks, kohandades selle CSS-faili. +### 1. osa: Analüüsi olemasolevat disaini + +Enne muutmist vaata üle olemasolev CSS-struktuur: + +1. **Leia** CSS-failid oma laiendusprojekti kaustast +2. **Uuri** praegust stiililahendust ja värviskeemi +3. **Tuvasta** parandamist vajavad kohad paigutuses, tüpograafias ja visuaalses hierarhias +4. **Mõtle** sellele, kuidas disain toetab kasutajate eesmärke (lihtne vormi täitmine ja andmete selge kuvamine) + +### 2. osa: Loo oma kohandatud stiil + +Koosta ühtne visuaalne kujundus, mis hõlmab: + +**Värviskeem:** +- Vali peamine värvipalett, mis peegeldab keskkonna temaatikat +- Tagada piisav kontrastsus juurdepääsetavuse jaoks (kasuta tööriistu nagu WebAIM kontrastitesti) +- Mõtle, kuidas värvid toimivad erinevates brauseriteemades + +**Tüpograafia:** +- Vali loetavad fondid, mis toimivad hästi väikestes laiendi mõõtmetes +- Loo selge hierarhia sobivate fondisuuruste ja -kaaludega +- Tagada teksti loetavus nii heledates kui ka tumedates brauseriteemades + +**Paigutus ja ruumid:** +- Paranda vormielementide ja andmete kuvamise visuaalset korraldust +- Lisa sobivaid täite- ja vahede suuruseid, et muuta lugemine lihtsamaks +- Võta arvesse reageeriva disaini põhimõtteid erinevate ekraanisuuruste jaoks + +### 3. osa: Rakenda oma disain + +Muuda CSS-faile, et rakendada oma disaini: + +```css +/* Example starting points for customization */ + +.form-data { + /* Style the configuration form */ + background: /* your choice */; + padding: /* your spacing */; + border-radius: /* your preference */; +} + +.result-container { + /* Style the data display area */ + background: /* complementary color */; + border: /* your border style */; + margin: /* your spacing */; +} + +/* Add your custom styles here */ +``` + +**Peamised stiilialad:** +- **Vormielemendid**: sisestusväljad, sildid ja esitamise nupp +- **Tulemuste kuvamine**: andmekonteiner, tekstistiilid ja laadimise olekud +- **Interaktiivsed elemendid**: hiirega üle liikumise efektid, nupu olekud ja üleminekud +- **Üldine paigutus**: konteineri vahed, taustavärvid ja visuaalne hierarhia + +### 4. osa: Testi ja täienda + +1. **Koosta** oma laiend käsklusega `npm run build` +2. **Laadi** uuendatud laiend oma brauserisse +3. **Testi** kõiki visuaalseid olekuid (vormi täitmine, laadimine, tulemuste kuvamine, vead) +4. **Kontrolli** juurdepääsetavust brauseri arendustööriistadega +5. **Paranda** stiile vastavalt tegelikule kasutuskogemusele + +## Loovad väljakutsed + +### Algajatele +- Uuenda värve ja fonte, et luua ühtne teema +- Paranda vahed ja joondus kogu liidese ulatuses +- Lisa nõrgad hiirega üle liikumise efektid interaktiivsetele elementidele + +### Kesktase +- Kujunda kohandatud ikoone või graafikat oma laiendi jaoks +- Rakenda sujuvad üleminekud erinevate olekute vahel +- Loo unikaalne laadimisanimatsioon API-kõnede jaoks + +### Edasijõudnutele +- Kujunda mitu temavalikut (hele/tume/kõrge kontrastsus) +- Rakenda reageeriv disain erinevate brauseriakende suuruste jaoks +- Lisa mikrointeraktsioonid, mis parandavad kasutajakogemust + +## Töötulemuste esitamistsoon + +Sinu lõpetatud ülesanne peaks sisaldama: + +- **Muudetud CSS-faile** oma kohandatud stiiliga +- **Ekraanipilte**, mis näitavad su laiendit erinevates olekutes (vorm, laadimine, tulemused) +- **Lühikirjeldust** (2-3 lauset), mis selgitab su disainivalikuid ja kuidas need parandavad kasutajakogemust ## Hindamiskriteeriumid -| Kriteerium | Näidislik | Piisav | Vajab parandamist | -| ---------- | -------------------------------------------- | -------------------- | ----------------- | -| | Kood on esitatud toimivate uute stiilidega | Stiilid on puudulikud | Stiilid on vigased | +| Kriteerium | Silmapaistev (4) | Pädev (3) | Edenev (2) | Algaja (1) | +|------------|------------------|-----------|------------|------------| +| **Visuaalne disain** | Loominguline, ühtne kujundus, mis parandab kasutusmugavust ja peegeldab tugevaid disainipõhimõtteid | Head kujundusvalikud, järjepidev stiil ja selge visuaalne hierarhia | Põhilised disainiparandused mõningate järjepidevuse probleemidega | Vähemtähtsad stiilimuudatused või ebajärjekindel disain | +| **Funktsionaalsus** | Kõik stiilid töötavad laitmatult erinevates olekutes ja brauserites | Stiilid töötavad hästi väikeste probleemidega äärejuhtudel | Enamik stiile funktsioneerib, esineb mõned kuvamisprobleemid | Märkimisväärsed stiiliprobleemid, mis segavad kasutamist | +| **Koodi kvaliteet** | Puhtad, hästi organiseeritud CSS-id tähenduslike klassinimede ja tõhusate selektoritega | Hea CSS-struktuur, sobiv selektorite ja omaduste kasutus | Vastuvõetav CSS mõningate korraldusprobleemidega | Nõrk CSS-struktuur või liiga keerukas stiil | +| **Juurdepääsetavus** | Suurepärane värvikontrastsus, loetavad fondid ja puudega kasutajate arvestamine | Head juurdepääsetavuse tavad väikeste täiustamisvõimalustega | Põhilised juurdepääsetavuse kaalutlused mõningate probleemidega | Piiratud tähelepanu juurdepääsetavusele | + +## Edu soovitused + +> 💡 **Disaininipp**: Alusta väikestest muudatustest ja laienda järk-järgult efektsemate stiilideni. Väikesed parendused tüpograafias ja ruumides avaldavad sageli suurt mõju tajutavale kvaliteedile. + +**Parimad praktikad:** +- **Testi** oma laiendit nii heledates kui tumedates brauseriteemades +- **Kasuta** suhtelisi ühikuid (em, rem) parema skaleeritavuse tagamiseks +- **Hoidke** järjepidevad vahed CSS-i kohandatud omadustega +- **Mõtle** sellele, kuidas su disain paistab kasutajatele, kellel on erinevad nägemisvajadused +- **Valideeri** oma CSS-i, veendumaks, et see järgib korrektset süntaksit + +> ⚠️ **Levinud viga**: Ära ohverda kasutusmugavust visuaalse välimuse nimel. Sinu laiend peab olema nii ilus kui ka funktsionaalne. + +**Pea meeles:** +- **Hoia** oluline info kergesti loetavana +- **Tagada**, et nupud ja interaktiivsed elemendid oleksid hõlpsasti klikitavad +- **Säilita** selge visuaalne tagasiside kasutaja tegevustele +- **Testi** oma disaini reaalsete andmetega, mitte ainult kohatäitetekstidega + +Õnne loomingulise ja silmapaistva funktsionaalse brauserilaiendi loomisel! --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüdleme täpsuse poole, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle algkeeles tuleks pidada usaldusväärseks allikaks. Olulise info puhul soovitatakse professionaalset inimtõlget. Me ei vastuta ühegi tõlgenduse või eksimuse eest, mis võivad tekkida selle tõlke kasutamisest. + \ No newline at end of file diff --git a/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md index d392c85a6..c65c4539e 100644 --- a/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -1,37 +1,114 @@ -# Brauserilaiendi projekt, osa 2: API kasutamine ja kohalik salvestus - -## Eelloengu viktoriin - -[Eelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/25) - -### Sissejuhatus - -Selles tunnis õpid, kuidas API-d kasutada, esitades oma brauserilaiendi vormi ja kuvades tulemused laiendis. Lisaks õpid, kuidas salvestada andmeid brauseri kohalikku salvestusse, et neid hiljem kasutada. - -✅ Järgi nummerdatud segmente vastavates failides, et teada, kuhu oma kood paigutada. - -### Laiendi elementide seadistamine: - -Selleks ajaks oled juba loonud HTML-vormi ja tulemuste `
` oma brauserilaiendi jaoks. Edaspidi tuleb töötada `/src/index.js` failis ja ehitada laiendit järk-järgult. Vaata [eelmist tundi](../1-about-browsers/README.md), et saada juhiseid projekti seadistamise ja ehitamise protsessi kohta. - -Töötades `index.js` failis, alusta mõne `const` muutujaga, et hoida väärtusi, mis on seotud erinevate väljadega: - -```JavaScript -// form fields +# Brauserilaiendi projekt Osa 2: API kõne tegemine, lokaalse salvestuse kasutamine + +```mermaid +journey + title Teie API integreerimise ja salvestamise teekond + section Alus + Määra DOM-i viited: 3: Student + Lisa sündmuste kuulajad: 4: Student + Töötle vormi esitamine: 4: Student + section Andmehaldus + Rakenda kohalik salvestus: 4: Student + Koosta API päringud: 5: Student + Töötle asünkroonne tegevused: 5: Student + section Kasutajakogemus + Lisa veahaldus: 5: Student + Loo laadimise olekud: 4: Student + Viimine interaktsioone: 5: Student +``` +## Eel-loengu viktoriin + +[Eel-loengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/25) + +## Sissejuhatus + +Kas mäletad seda brauserilaiendit, mida hakkasid ehitama? Praegu on sul ilus vorm, kuid see on sisuliselt staatiline. Täna anname sellele elu, ühendades selle tõelise andmeallikaga ja andes sellele mälu. + +Mõtle Apollo missioonikontrolli arvutitele – nad ei näidanud vaid fikseeritud teavet. Nad suhtlesid pidevalt kosmoselaevadega, uuendasid telemeetria andmeid ning mäletasid olulisi missiooni parameetreid. Just sellist dünaamilist käitumist me täna loome. Sinu laiend võtab internetist päris keskkonnateavet ja mäletab sinu seadeid järgmiseks korraks. + +API integreerimine võib tunduda keeruline, kuid see on lihtsalt õpetamine sinu koodile, kuidas suhelda teiste teenustega. Olgu see siis ilmastikuandmete, sotsiaalmeedia voogude või süsiniku jalajälje info pärimine nagu täna teeme — kõik seisneb nende digitaalsete ühenduste loomises. Vaatame ka, kuidas brauserid suudavad teavet salvestada — sarnaselt sellele, kuidas raamatukogud kasutasid kaardikatalooge raamatute asukoha meelespidamiseks. + +Selle tunni lõpuks on sul brauserilaiend, mis toob tavalise andmetest, salvestab kasutajaelistused ja pakub sujuvat kasutuskogemust. Alustame! + +```mermaid +mindmap + root((Dünaamilised laiendused)) + DOM Manipulation + Element Selection + Event Handling + State Management + UI Updates + Local Storage + Andmete säilitamine + Võtme-väärtuse paarid + Seansi haldamine + Kasutaja eelistused + API Integration + HTTP Requests + Authentication + Data Parsing + Error Handling + Async Programming + Promises + Async/Await + Error Catching + Non-blocking Code + User Experience + Laadimisolekud + Veateated + Sujuvad üleminekud + Andmete valideerimine +``` +✅ Järgi nummerdatud segmentide juhiseid vastavates failides, et teada, kuhu oma koodi paigutada + +## Määratle laiendi elemendid, mida manipuleerida + +Enne kui su JavaScript saab kasutajaliidest muuta, vajab see viiteid konkreetsetele HTML elementidele. Võid seda mõelda nagu teleskoop, mis peab olema suunatud kindlatele tähtedele – enne kui Galileo võis uurida Jupiteri kuid, pidi ta esmalt Jupiteri üles leidma ja fookusesse seadma. + +Sinu `index.js` failis loome `const` muutujad, mis salvestavad viited igale olulisemale vormi elemendile. See on nagu teadlased, kes märgistavad oma seadmed — selle asemel, et otsida kogu labori ulatuses, saavad nad otse ligi sellele, mida vajavad. + +```mermaid +flowchart LR + A[JavaScript Kood] --> B[document.querySelector] + B --> C[CSS Valijad] + C --> D[HTML Elemendid] + + D --> E[".form-data"] + D --> F[".region-name"] + D --> G[".api-key"] + D --> H[".loading"] + D --> I[".errors"] + D --> J[".result-container"] + + E --> K[Vormi Element] + F --> L[Sisestusväli] + G --> M[Sisestusväli] + H --> N[Kasutajaliidese Element] + I --> O[Kasutajaliidese Element] + J --> P[Kasutajaliidese Element] + + style A fill:#e1f5fe + style D fill:#e8f5e8 + style K fill:#fff3e0 + style L fill:#fff3e0 + style M fill:#fff3e0 +``` +```javascript +// vormiväljad const form = document.querySelector('.form-data'); const region = document.querySelector('.region-name'); const apiKey = document.querySelector('.api-key'); -// results +// tulemused const errors = document.querySelector('.errors'); const loading = document.querySelector('.loading'); const results = document.querySelector('.result-container'); @@ -41,194 +118,538 @@ const myregion = document.querySelector('.my-region'); const clearBtn = document.querySelector('.clear-btn'); ``` -Kõik need väljad viitavad nende CSS klassidele, nagu sa HTML-is eelmises tunnis seadistasid. - -### Lisage kuulajad - -Järgmisena lisa vormile ja tühjendusnupule sündmuste kuulajad, et midagi juhtuks, kui kasutaja esitab vormi või klõpsab tühjendusnuppu. Lisa ka rakenduse initsialiseerimise kutse faili lõppu: - -```JavaScript +**See kood teeb järgmist:** +- **Püüab kinni** vormi elemendid kasutades `document.querySelector()` koos CSS klassi selektoritega +- **Loodab** viited sisendväljadele regiooni nime ja API võtme jaoks +- **Ühendab** tulemite kuvamise elementidega süsiniku kasutusandmete jaoks +- **Seadistab** juurdepääsu kasutajaliidese elementidele nagu laadimisindikaatorid ja tõrketeated +- **Salvestab** iga elemendi viite `const` muutujatesse, et neid oleks lihtne kogu koodis korduvkasutada + +## Lisa sündmuste kuulajad + +Nüüd paneme laiendi reageerima kasutaja tegevustele. Sündmuste kuulajad on su koodi viis jälgida kasutaja interaktsioone. Võid neid mõelda nagu varased telefonivahetuskeskuse operaatorid — nad kuulasid saabuvat kõnet ja ühendasid õiged traatkeskused, kui keegi soovis ühendust luua. + +```mermaid +sequenceDiagram + participant User + participant Form + participant JavaScript + participant API + participant Storage + + User->>Form: Täidab piirkonna/API võtme + User->>Form: Vajutab esita + Form->>JavaScript: Käivitab esita sündmuse + JavaScript->>JavaScript: handleSubmit(e) + JavaScript->>Storage: Salvesta kasutaja eelistused + JavaScript->>API: Hangi süsinikuandmed + API->>JavaScript: Tagastab andmed + JavaScript->>Form: Uuenda kasutajaliidest tulemustega + + User->>Form: Vajutab tühjenda nuppu + Form->>JavaScript: Käivitab klikisündmuse + JavaScript->>Storage: Kustuta salvestatud andmed + JavaScript->>Form: Lähtesta algseisundisse +``` +```javascript form.addEventListener('submit', (e) => handleSubmit(e)); clearBtn.addEventListener('click', (e) => reset(e)); init(); ``` -✅ Pane tähele lühendatud süntaksit, mida kasutatakse submit- või click-sündmuse kuulamiseks, ja kuidas sündmus edastatakse handleSubmit või reset funktsioonidele. Kas suudad kirjutada selle lühendatud süntaksi pikemas vormis? Kumb variant sulle rohkem meeldib? +**Nende mõistete selgitus:** +- **Lisab** esitamissündmuse kuulaja vormile, mis käivitub, kui kasutaja vajutab Enter või klõpsab esita nuppu +- **Seob** klikikuulaja tühjendusnupuga, et vormi lähtestada +- **Annetab** sündmuse objekti `(e)` käsitlejafunktsioonidele täiendavaks kontrolliks +- **Kutsutakse** `init()` funktsioon kohe algsesse seisu seadmiseks + +✅ Pane tähele siin kasutatud noolefunktsiooni süntaksit. See kaasaegne JavaScripti lähenemine on organiseeritum kui traditsioonilised funktsioonid, kuid mõlemad töötavad võrdselt hästi! + +### 🔄 **Pedagoogiline kontrollpunkt** +**Sündmuste käsitlemise mõistmine**: Enne initsialiseerimise juurde liikumist kontrolleeri, kas sa suudad: +- ✅ Selgitada, kuidas `addEventListener` ühendab kasutaja tegevused JavaScripti funktsioonidega +- ✅ Mõista, miks me edastame sündmuse objekti `(e)` käsitlejatele +- ✅ Erinevustada `submit` ja `click` sündmusi +- ✅ Kirjeldada, millal ja miks `init()` funktsioon käivitatakse + +**Kiire enese-test**: Mis juhtub, kui unustad vormi esitamises `e.preventDefault()`? +*Vastus: Leht laeb ümber, kaotades kogu JavaScripti oleku ja katkestades kasutajakogemuse* + +## Ehita initsialiseerimise ja lähtestamise funktsioonid -### Ehita init() ja reset() funktsioonid: +Loome nüüd initsialiseerimisloogika sinu laiendile. `init()` funktsioon on nagu laeva navigatsioonisüsteem, mis kontrollib oma instrumente – ta määrab praeguse seisundi ja kohandab liidest vastavalt. Ta kontrollib, kas keegi on sinu laiendit juba kasutanud, ja laadib nende eelmised seaded. -Nüüd ehitad funktsiooni, mis initsialiseerib laiendi, mida nimetatakse init(): +`reset()` funktsioon annab kasutajatele võimaluse alustada nullist — nagu teadlased, kes lähtestavad seadmed katsete vahel, et tagada puhtad andmed. -```JavaScript +```javascript function init() { - //if anything is in localStorage, pick it up + // Kontrolli, kas kasutaja on varem salvestanud API mandaadid const storedApiKey = localStorage.getItem('apiKey'); const storedRegion = localStorage.getItem('regionName'); - //set icon to be generic green - //todo + // Sea laienduse ikoon üldiseks roheliseks (kohatäide tulevase tunni jaoks) + // TODO: Rakenda ikooni uuendus järgmisel tunnil if (storedApiKey === null || storedRegion === null) { - //if we don't have the keys, show the form + // Esmakordne kasutaja: näita seadistuse vormi form.style.display = 'block'; results.style.display = 'none'; loading.style.display = 'none'; clearBtn.style.display = 'none'; errors.textContent = ''; } else { - //if we have saved keys/regions in localStorage, show results when they load - displayCarbonUsage(storedApiKey, storedRegion); + // Tagasi tulev kasutaja: laadige nende salvestatud andmed automaatselt + displayCarbonUsage(storedApiKey, storedRegion); results.style.display = 'none'; form.style.display = 'none'; clearBtn.style.display = 'block'; } -}; +} function reset(e) { e.preventDefault(); - //clear local storage for region only + // Tühjenda salvestatud piirkond, et lubada kasutajal valida uus asukoht localStorage.removeItem('regionName'); + // Taaskäivita initsialiseerimisprotsess init(); } - ``` -Selles funktsioonis on huvitav loogika. Lugedes seda, kas näed, mis toimub? - -- Kaks `const` muutujat on seadistatud kontrollima, kas kasutaja on salvestanud APIKey ja piirkonna koodi kohalikku salvestusse. -- Kui üks neist on null, kuvatakse vorm, muutes selle stiili 'block'-iks. -- Peidetakse tulemused, laadimisala ja clearBtn ning tühjendatakse veatekst. -- Kui olemas on võti ja piirkond, alustatakse rutiini: - - API kutsumine, et saada süsiniku kasutuse andmeid. - - Tulemuste ala peitmine. - - Vormi peitmine. - - Tühjendusnupu kuvamine. - -Enne edasi liikumist on kasulik õppida brauserites saadaval olevast olulisest kontseptsioonist: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage on kasulik viis stringide salvestamiseks brauseris `key-value` paarina. Seda tüüpi veebisalvestust saab JavaScripti abil manipuleerida, et hallata andmeid brauseris. LocalStorage ei aegu, samas kui SessionStorage, teine veebisalvestuse tüüp, kustutatakse brauseri sulgemisel. Erinevatel salvestustüüpidel on nende kasutamisel plusse ja miinuseid. - -> Märkus - sinu brauserilaiendil on oma kohalik salvestus; peamine brauseriaken on eraldi instants ja käitub eraldi. - -Sa seadistad oma APIKey stringiväärtusega, näiteks, ja näed, et see on Edge'is seadistatud, kui "inspekteerid" veebilehte (saad brauseris paremklõpsuga inspekteerida) ja lähed rakenduste vahekaardile, et näha salvestust. - -![Kohaliku salvestuse paneel](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.et.png) +**Siin toimub:** +- **Hangitakse** salvestatud API võti ja regioon brauseri lokaalsest salvestusest +- **Kontrollitakse**, kas kasutaja on esimene kord (puuduvad salvestatud andmed) või korduvkasutaja +- **Kuvatakse** seadistusvorm uutele kasutajatele ja peidetakse teised liidese elemendid +- **Laetakse** automaatselt salvestatud andmed korduvkasutajatele ning kuvatakse lähtestamise võimalus +- **Haldatakse** kasutajaliidese seisundit vastavalt olemasolevatele andmetele + +**Lokaalse salvestuse peamised mõisted:** +- **Püsib** andmed brauseri sessioonide vahel (vastandina session storage’i) +- **Salvestab** andmeid võtme-väärtuse paaridena kasutades `getItem()` ja `setItem()` meetodeid +- **Tagastab** `null`, kui vastavat võtit ei leita +- **Pakkuge** lihtsat viisi kasutajaelistuste ja seadete meelespidamiseks + +> 💡 **Brauseri salvestuse mõistmine**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) on nagu laiendi püsiv mälu. Mõtle vanale Aleksandria raamatukogule, mis hoidis käsikirju – info jäi kättesaadavaks isegi siis, kui teadlased lahkusid ja tagasi tulid. +> +> **Peamised omadused:** +> - **Püsib** andmed ka pärast brauseri sulgemist +> - **Üle elab** arvuti taaskäivitused ja brauseri kokkujooksmised +> - **Pakub** märkimisväärset salvestusmahtu kasutajaelistustele +> - **Annab** viivitamatu juurdepääsu ilma võrgu viivitusteta + +> **Tähelepanu**: Sinu brauserilaiendil on oma isoleeritud lokaalne salvestus, mis on eraldatud tavapärastest veebilehtedest. See tagab turvalisuse ja takistab konflikte teiste veebisaitidega. + +Sa saad oma salvestatud andmeid vaadata, avades brauseri arendajatööriistad (F12), liikudes vahekaardile **Application** ja avades sektsiooni **Local Storage**. + +```mermaid +stateDiagram-v2 + [*] --> CheckStorage: Laiendus käivitub + CheckStorage --> FirstTime: Salvestatud andmeid pole + CheckStorage --> Returning: Andmed leitud + + FirstTime --> ShowForm: Kuvab seadistuse vormi + ShowForm --> UserInput: Kasutaja sisestab andmed + UserInput --> SaveData: Salvestab localStorage'i + SaveData --> FetchAPI: Hangib süsinikuandmed + + Returning --> LoadData: Loeb localStorage'ist + LoadData --> FetchAPI: Hangib süsinikuandmed + + FetchAPI --> ShowResults: Kuvab andmed + ShowResults --> UserAction: Kasutaja suhtleb + + UserAction --> Reset: Tühjenda nuppu vajutati + UserAction --> ShowResults: Kuvab andmed + + Reset --> ClearStorage: Eemaldab salvestatud andmed + ClearStorage --> FirstTime: Tagasi seadistusse +``` +![Lokaalse salvestuse paneel](../../../../translated_images/localstorage.472f8147b6a3f8d1.et.png) -✅ Mõtle olukordadele, kus sa EI tahaks salvestada andmeid LocalStorage'is. Üldiselt on API võtmete salvestamine LocalStorage'is halb idee! Kas näed, miks? Meie puhul, kuna meie rakendus on ainult õppimiseks ja seda ei avaldata rakenduste poes, kasutame seda meetodit. +> ⚠️ **Turvalisuse kaalutlus**: Produktionsrakendustes tähendab API võtmete salvestamine LocalStorage’is turvariske, sest JavaScript saab neid andmeid lugeda. Õppimise eesmärgil see lähenemine sobib, aga päris rakendustes tuleb tundlikud võtmed hoida turvaliselt serveripoolses salvestuses. -Pane tähele, et kasutad veebirakenduse API-d LocalStorage'i manipuleerimiseks, kas `getItem()`, `setItem()` või `removeItem()` abil. See on laialdaselt toetatud erinevates brauserites. +## Töötle vormi esitamist -Enne `displayCarbonUsage()` funktsiooni loomist, mida kutsutakse `init()` sees, loome funktsionaalsuse, mis käsitleb esialgset vormi esitust. +Nüüd vaatame, mis juhtub, kui keegi esitab su vormi. Vaikimisi laadib brauserid pärast vormi esitamist lehe uuesti, aga me püüame selle käitumise kinni, et luua sujuvam kogemus. -### Vormiesituse käsitlemine +See lähenemine sarnaneb missioonikontrolli suhtlemisele kosmoselaevadega – selle asemel, et kogu süsteemi iga saatmise järel lähtestada, hoitakse pidevat tööd ja töödeldakse uusi andmeid. -Loo funktsioon nimega `handleSubmit`, mis võtab argumendiks sündmuse `(e)`. Peata sündmuse levik (antud juhul tahame peatada brauseri värskendamise) ja kutsu uut funktsiooni `setUpUser`, edastades argumendid `apiKey.value` ja `region.value`. Sel viisil kasutad kahte väärtust, mis tuuakse esialgse vormi kaudu, kui vastavad väljad on täidetud. +Loo funktsioon, mis püüab vormi esitamise sündmuse ja võtab kasutaja sisendi: -```JavaScript +```javascript function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); } ``` -✅ Värskenda oma mälu - HTML, mille sa eelmises tunnis seadistasid, sisaldab kahte sisendvälja, mille `values` on haaratud `const` abil, mille sa faili alguses seadistasid, ja need on mõlemad `required`, nii et brauser takistab kasutajatel sisestamast nullväärtusi. +**Ülal oleme:** +- **Takistanud** vormi vaikimisi esitamiskäitumise, mis värskendaks lehte +- **Eraldanud** kasutajasisendi API võtme ja regiooni väljadest +- **Edastanud** vormi andmed `setUpUser()` funktsioonile töötlemiseks +- **Hoianud** ühe lehe rakenduse käitumist ilma lehe laadimisteta -### Kasutaja seadistamine +✅ Pea meeles, et sinu HTML-vormi väljad sisaldavad atribuuti `required`, seega brauser kontrollib automaatselt, et kasutaja sisestab nii API võtme kui regiooni enne selle funktsiooni käivitumist. -Liikudes edasi `setUpUser` funktsiooni juurde, siin seadistad kohalikus salvestuses väärtused apiKey ja regionName jaoks. Lisa uus funktsioon: +## Määra kasutaja eelistused -```JavaScript +`setUpUser` funktsioon vastutab kasutaja mandaadi salvestamise eest ja käivitab esimese API päringu. See loob sujuva ülemineku seadistamisest tulemite kuvamiseni. + +```javascript function setUpUser(apiKey, regionName) { + // Salvesta kasutaja mandaadid tulevasteks sessioonideks localStorage.setItem('apiKey', apiKey); localStorage.setItem('regionName', regionName); + + // Uuenda kasutajaliidest laadimisoleku kuvamiseks loading.style.display = 'block'; errors.textContent = ''; clearBtn.style.display = 'block'; - //make initial call + + // Hangige süsiniku kasutamise andmed kasutaja mandaatidega displayCarbonUsage(apiKey, regionName); } ``` -See funktsioon kuvab laadimissõnumi, kuni API-d kutsutakse. Selleks ajaks oled jõudnud selle brauserilaiendi kõige olulisema funktsiooni loomiseni! - -### Süsiniku kasutuse kuvamine - -Lõpuks on aeg API-d pärida! - -Enne edasi liikumist peaksime arutama API-sid. API-d ehk [Rakenduste Programmeerimisliidesed](https://www.webopedia.com/TERM/A/API.html) on veebiarendaja tööriistakasti kriitiline element. Need pakuvad standardseid viise programmide omavaheliseks suhtlemiseks ja liidestamiseks. Näiteks, kui ehitad veebisaiti, mis vajab andmebaasi päringut, võib keegi olla loonud API, mida saad kasutada. Kuigi API-sid on palju erinevaid tüüpe, on üks populaarsemaid [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/). - -✅ Termin 'REST' tähistab 'Representational State Transfer' ja hõlmab erinevalt konfigureeritud URL-ide kasutamist andmete hankimiseks. Tee veidi uurimistööd erinevate API tüüpide kohta, mis arendajatele saadaval on. Milline formaat sulle kõige rohkem meeldib? - -Selles funktsioonis on olulisi asju, mida tähele panna. Esiteks, pane tähele [`async` märksõna](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Funktsioonide kirjutamine nii, et need töötavad asünkroonselt, tähendab, et nad ootavad tegevuse, näiteks andmete tagastamise, lõpetamist enne jätkamist. - -Siin on kiire video `async` kohta: - -[![Async ja Await lubaduste haldamiseks](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async ja Await lubaduste haldamiseks") - -> 🎥 Klõpsa ülaloleval pildil, et vaadata videot async/await kohta. - -Loo uus funktsioon, et pärida C02Signal API-d: - -```JavaScript -import axios from '../node_modules/axios'; +**Samm-sammult toimub:** +- **Salvestab** API võtme ja regiooni nime lokaalsesse salvestusse tulevaks kasutamiseks +- **Kuvab** laadimisindikatsiooni, et teada anda, et andmeid hangitakse +- **Kustutab** kõik varasemad tõrketeated kuvast +- **Näitab** tühjendusnuppu, et kasutajad saaksid oma seadeid hiljem lähtestada +- **Käivitab** API päringu, et tuua päris süsiniku kasutusandmed + +See funktsioon loob sujuva kasutajakogemuse, haldades nii andmete püsivust kui ka kasutajaliidese värskendusi koordineeritult. + +## Kuvage süsiniku kasutusandmed + +Nüüd ühendame su laiendi väliste andmeallikatega API-de abil. See muudab su laiendi iseseisvast tööriistast midagi, mis saab ligi reaalajas infole kogu internetist. + +**API mõistmine** + +[API-d](https://www.webopedia.com/TERM/A/API.html) on viis, kuidas erinevad rakendused omavahel suhtlevad. Võid neid mõelda nagu telegraafisüsteemi, mis ühendas 19. sajandil kaugeid linnu — operaatorid saatsid päringuid kaugetejaamadele ja said vastuseid soovitud teabega. Iga kord, kui kontrollid sotsiaalmeediat, küsid häälassistendilt või kasutad kullerirakendust, vahendavad API-d neid andmevahetusi. + +```mermaid +flowchart TD + A[Teie laiendus] --> B[HTTP päring] + B --> C[CO2 signaali API] + C --> D{Kehtiv päring?} + D -->|Jah| E[Päringu andmebaasist] + D -->|Ei| F[Tagasta viga] + E --> G[Süsinikandmed] + G --> H[JSON vastus] + H --> I[Teie laiendus] + F --> I + I --> J[Uuenda kasutajaliidest] + + subgraph "API päring" + K[Päised: auth-token] + L[Parameetrid: riigiKood] + M[Meetod: GET] + end + + subgraph "API vastus" + N[Süsiniku intensiivsus] + O[Fossiilkütuse %] + P[Aja mark] + end + + style C fill:#e8f5e8 + style G fill:#fff3e0 + style I fill:#e1f5fe +``` +**REST API põhimõtted:** +- **REST** tähendab 'Representational State Transfer' +- **Kasutab** tavalisi HTTP meetodeid (GET, POST, PUT, DELETE) andmetega suhtlemiseks +- **Tagastab** andmed prognoositavas vormingus, tavaliselt JSON-is +- **Pakub** järjekindlaid, URL-põhiseid lõpp-punkte erinevate päringute jaoks + +✅ [CO2 Signal API](https://www.co2signal.com/), mida täna kasutame, pakub reaalajas süsiniku intensiivsuse andmeid elektrivõrkudest üle maailma. See aitab kasutajatel mõista nende elektritarbimise keskkonnamõju! + +> 💡 **Asünkroonse JavaScripti mõistmine**: [`async` märksõna](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) võimaldab su koodil korraga mitut toimingut hallata. Kui küsid serverist andmeid, ei taha sa, et kogu allalaadimine seisaks — see oleks nagu lennujuhtimise peatamine ühe lennuki ootamise ajal. +> +> **Peamised eelised:** +> - **Hoiab** laiendi reageerimisvõimelisena andmete laadimise ajal +> - **Lubab** muul koodil jätkata töötamist võrgu päringute käigus +> - **Parandab** koodi loetavust võrreldes traditsiooniliste tagasiside-põhiste mustritega +> - **Võimaldab** elegantset tõrkehalduse lahendust võrgu probleemide korral + +Siin on lühike video async kohta: + +[![Async ja Await lubade haldamiseks](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async ja Await lubade haldamiseks") + +> 🎥 Vajuta ülalpildil videole async/await teemal. + +### 🔄 **Pedagoogiline kontrollpunkt** +**Asünkroonse programmeerimise mõistmine**: Enne API funktsiooni süübimist veendu, et sa mõistad: +- ✅ Miks kasutame `async/await` asemel kogu laiendi blokeerimist +- ✅ Kuidas `try/catch` plokid võrgutõrkeid ilusasti käsitlevad +- ✅ Milline on erinevus sünkroonse ja asünkroonse toimingu vahel +- ✅ Miks API-kõned võivad ebaõnnestuda ja kuidas neid juhtida + +**Igapäevased asünkroonsed näited**: +- **Tellige toitu**: Sa ei oota köögi juures - saad kviitungi ja tegeled muude tegevustega +- **Saatke e-kirju**: Sinu e-posti rakendus ei jää saatmise ajal tardunuks - saad jätkata kirjade kirjutamist +- **Laadige veebilehti**: Pildid laadivad järk-järgult, samal ajal kui teksti näed kohe + +**API autentimisvoog**: +```mermaid +sequenceDiagram + participant Ext as Laiendus + participant API as CO2 Signaali API + participant DB as Andmebaas + + Ext->>API: Päring koos autendimärgiga + API->>API: Märgi valideerimine + API->>DB: Süsinikuandmete päring + DB->>API: Andmete tagastamine + API->>Ext: JSON vastus + Ext->>Ext: Kasutajaliidese värskendamine +``` +Loo funktsioon süsiniku kasutusandmete toomiseks ja kuvamiseks: +```javascript +// Kaasaegne fetch API lähenemine (väliseid sõltuvusi pole vaja) async function displayCarbonUsage(apiKey, region) { try { - await axios - .get('https://api.co2signal.com/v1/latest', { - params: { - countryCode: region, - }, - headers: { - 'auth-token': apiKey, - }, - }) - .then((response) => { - let CO2 = Math.floor(response.data.data.carbonIntensity); - - //calculateColor(CO2); - - loading.style.display = 'none'; - form.style.display = 'none'; - myregion.textContent = region; - usage.textContent = - Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)'; - fossilfuel.textContent = - response.data.data.fossilFuelPercentage.toFixed(2) + - '% (percentage of fossil fuels used to generate electricity)'; - results.style.display = 'block'; - }); + // Hangi süsiniku intensiivsuse andmed CO2 Signaali API-st + const response = await fetch('https://api.co2signal.com/v1/latest', { + method: 'GET', + headers: { + 'auth-token': apiKey, + 'Content-Type': 'application/json' + }, + // Lisa päringuparameetrid konkreetse piirkonna jaoks + ...new URLSearchParams({ countryCode: region }) && { + url: `https://api.co2signal.com/v1/latest?countryCode=${region}` + } + }); + + // Kontrolli, kas API päring õnnestus + if (!response.ok) { + throw new Error(`API request failed: ${response.status}`); + } + + const data = await response.json(); + const carbonData = data.data; + + // Arvuta ümardatud süsiniku intensiivsuse väärtus + const carbonIntensity = Math.round(carbonData.carbonIntensity); + + // Uuenda kasutajaliidest hangitud andmetega + loading.style.display = 'none'; + form.style.display = 'none'; + myregion.textContent = region.toUpperCase(); + usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`; + fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`; + results.style.display = 'block'; + + // TODO: calculateColor(carbonIntensity) - rakenda järgmises õppetükis + } catch (error) { - console.log(error); + console.error('Error fetching carbon data:', error); + + // Näita kasutajasõbralikku veateadet loading.style.display = 'none'; results.style.display = 'none'; - errors.textContent = 'Sorry, we have no data for the region you have requested.'; + errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.'; } } ``` -See on suur funktsioon. Mis siin toimub? - -- Parimate tavade järgimiseks kasutad `async` märksõna, et muuta see funktsioon asünkroonseks. Funktsioon sisaldab `try/catch` plokki, kuna see tagastab lubaduse, kui API tagastab andmed. Kuna sul pole kontrolli API vastamise kiiruse üle (see ei pruugi üldse vastata!), pead seda ebakindlust käsitlema, kutsudes seda asünkroonselt. -- Pärid co2signal API-d, et saada oma piirkonna andmeid, kasutades oma API võtit. Selle võtme kasutamiseks pead kasutama autentimist oma päise parameetrites. -- Kui API vastab, määrad selle vastuse andmete erinevad elemendid ekraaniosadele, mille seadistasid nende andmete kuvamiseks. -- Kui tekib viga või kui tulemust pole, kuvad veateate. - -✅ Asünkroonsete programmeerimismustrite kasutamine on veel üks väga kasulik tööriist sinu tööriistakastis. Loe [erinevatest viisidest](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function), kuidas seda tüüpi koodi konfigureerida. - -Palju õnne! Kui ehitad oma laiendi (`npm run build`) ja värskendad seda laiendite paneelil, on sul töötav laiend! Ainus asi, mis ei tööta, on ikoon, ja selle parandad järgmises tunnis. +**Mis siin toimub:** +- **Kasutab** kaasaegset `fetch()` API-t ega vaja lisaraamatukogusid nagu Axios, muutes koodi puhtamaks ja sõltumatuks +- **Rakendab** õiget veakontrolli `response.ok` abil, et varakult tuvastada API tõrked +- **Halda** asünkroonseid toiminguid `async/await` abil koodi loetavuse tõstmiseks +- **Autendib** CO2 Signal API:ga kasutades `auth-token` päist +- **Parsib** JSON vastust ja eraldab süsiniku intensiivsusandmeid +- **Uuendab** mitut kasutajaliidese elementi vormindatud keskkonnaandmetega +- **Pakub** kasutajasõbralikke veateateid, kui API-kutsed ebaõnnestuvad + +**Näidatud kaasaegsed JavaScripti mõisted:** +- **Mallistamisliteralid** `${}` süntaksiga puhtaks stringide vormindamiseks +- **Tõrkehaldus** `try/catch` plokkidega robustsete rakenduste jaoks +- **Async/await** muster võrgupäringute ilusti käsitlemiseks +- **Objekti destruktureerimine** API vastuste andmete eraldamiseks +- **Meetodite kettimine** mitme DOM manipulatsiooni jaoks + +✅ See funktsioon demonstreerib mitmeid olulisi veebiarenduse kontseptsioone — suhtlemist väliste serveritega, autentimist, andmetöötlust, kasutajaliidese uuendamist ja tõrgete haldamist. Need on põhilised oskused, mida professionaalsed arendajad regulaarselt kasutavad. + +```mermaid +flowchart TD + A[Alusta API-kõnet] --> B[Päringu toomine] + B --> C{Võrguühendus õnnestus?} + C -->|Ei| D[Võrguviga] + C -->|Jah| E{Vastus okei?} + E -->|Ei| F[API viga] + E -->|Jah| G[Analüüsi JSON] + G --> H{Kehtivad andmed?} + H -->|Ei| I[Andmeviga] + H -->|Jah| J[Uuenda kasutajaliidest] + + D --> K[Näita veateadet] + F --> K + I --> K + J --> L[Peida laadimine] + K --> L + + style A fill:#e1f5fe + style J fill:#e8f5e8 + style K fill:#ffebee + style L fill:#f3e5f5 +``` +### 🔄 **Pedagoogiline kontrollpunkt** +**Täielik süsteemimõistmine**: Kontrolli oma valdamist kogu tööprotsessist: +- ✅ Kuidas DOM viited võimaldavad JavaScriptil liidest kontrollida +- ✅ Miks lokaalne salvestus loob püsivuse brauseri sessioonide vahel +- ✅ Kuidas async/await võimaldab API-kõnesid ilma laiendi tardumiseta +- ✅ Mis juhtub API-kõnede ebaõnnestumisel ja kuidas tõrkeid käsitletakse +- ✅ Miks kasutajakogemus sisaldab laadimise staate ja veateateid + +🎉 **Sinu saavutus:** Sa oled loonud brauserilaiendi, mis: +- **Ühendub** internetiga ja hangib päris keskkonnateavet +- **Püsib** kasutaja seadetes sessioonide vahel +- **Haldb** tõrkeid ilusti, ilma et äpp kokku jookseks +- **Pakub** sujuvat, professionaalset kasutajakogemust + +Testi oma tööd, käivitades `npm run build` ja värskendades laiendit brauseris. Sul on nüüd toimiv süsiniku jalajälje jälgija. Järgmine tund lisab dünaamilise ikoonifunktsionaalsuse, et laiend täiendada. --- -## 🚀 Väljakutse +## GitHub Copilot Agenti väljakutse 🚀 -Oleme nendes tundides arutanud mitut tüüpi API-sid. Vali üks veebirakenduse API ja uuri põhjalikult, mida see pakub. Näiteks vaata brauserites saadaval olevaid API-sid, nagu [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). Mis teeb sinu arvates API suurepäraseks? +Kasuta agent-režiimi, et täita järgmine väljakutse: +**Kirjeldus:** Täienda brauserilaiendit, lisades veahaldust parandavaid funktsioone ja kasutajakogemuse täiustusi. See väljakutse aitab sul harjutada API-de, kohaliku salvestuse ja DOM-i manipuleerimisega tänapäevaste JavaScripti mustrite abil. -## Järelloengu viktoriin +**Ülesanne:** Loo täiustatud versioon funktsioonist displayCarbonUsage, mis hõlmab: 1) Edasilükkamise mehhanismi ebaõnnestunud API-päringute korral koos eksponentsiaalse tagasilöögiga, 2) Sisevuse valideerimine piirkonna koodi jaoks enne API-päringut, 3) Laadimisanimatsioon edenemisindikaatoritega, 4) API vastuste vahemällu salvestamine localStorage-s koos aegumistähtaegadega (vahemälu kestab 30 minutit) ning 5) Võimalus kuvada ajaloolisi andmeid varasematest API-päringutest. Lisa ka korrektsete TypeScript-stiilis JSDoc kommentaaride abil dokumentatsioon kõigile funktsiooni parameetritele ja tagastustüüpidele. -[Järelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/26) +Lisateavet leiad aadressilt [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). -## Ülevaade ja iseseisev õppimine +## 🚀 Väljakutse -Selles tunnis õppisid LocalStorage'i ja API-de kohta, mis mõlemad on professionaalse veebiarendaja jaoks väga kasulikud. Kas suudad mõelda, kuidas need kaks asja koos töötavad? Mõtle, kuidas arhitektiksid veebisaiti, mis salvestaks esemeid, mida API kasutaks. +Suurenda oma arusaamist API-dest, uurides rohkelt brauseripõhiseid API-sid, mis on veebiarenduseks kättesaadavad. Vali üks neist brauseri API-dest ja loo väike demonstratsioon: + +- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - Kasutaja praeguse asukoha määramine +- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - Lauaarvuti teavituste saatmine +- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - Interaktiivsete lohistamisliideste loomine +- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - Täiustatud kohaliku salvestuse tehnikad +- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - Kaasaegne alternatiiv XMLHttpRequest-ile + +**Uurimisküsimused, mida kaaluda:** +- Milliseid reaalse maailma probleeme see API lahendab? +- Kuidas API käsitleb vigu ja servajuhtumeid? +- Millised turvaküsimused tuleb selle API kasutamisel arvesse võtta? +- Kui laialdaselt on see API erinevates brauserites toetatud? + +Pärast uurimist mõtle, millised omadused muudavad API arendajasõbralikuks ja usaldusväärseks. + +## Loengu järgne viktoriin + +[Loengu järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/26) + +## Kordamine ja iseseisev õpe + +Selles õppetükis õppisid LocalStorage’i ja API-de kohta, mis on mõlemad professionaalse veebiarendaja jaoks väga kasulikud. Kas oskad mõelda, kuidas need kaks koos töötavad? Mõtle, kuidas kavandaksid veebisaiti, mis salvestab elemente, mida API kasutab. + +### ⚡ **Mida saad teha järgmise 5 minuti jooksul** +- [ ] Ava arendajatööriistades vahekaart Application ja uuri localStorage’i suvalisel veebisaidil +- [ ] Loo lihtne HTML-vorm ja testi vormi valideerimist brauseris +- [ ] Proovi salvestada ja laadida andmeid localStorage’i abil brauseri konsoolis +- [ ] Kontrolli võrgukaardil vormiandmete esitamist + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida loengu järgne viktoriin ja mõista vormi käsitlemise kontseptsioone +- [ ] Loo brauserilaiendi vorm, mis salvestab kasutaja eelistusi +- [ ] Rakenda kliendipoolne vormi valideerimine kasulike veateadetega +- [ ] Harjuta chrome.storage API kasutamist laienduse andmete püsivuseks +- [ ] Loo kasutajaliides, mis reageerib salvestatud kasutajaseadetega + +### 📅 **Sinu nädala pikkune laiendi ehitamise plaan** +- [ ] Loo täielikult funktsioneeriv brauserilaiendi vormi funktsionaalsusega +- [ ] Omandi erinevad salvestusvõimalused: local, sync ja session storage +- [ ] Rakenda täiustatud vormifunktsioone nagu automaattäitmine ja valideerimine +- [ ] Lisa kasutajaandmete importimise/eksportimise funktsionaalsus +- [ ] Testi oma laiendust põhjalikult erinevates brauserites +- [ ] Viimistle laiendi kasutajakogemust ja veakäsitlust + +### 🌟 **Sinu kuu pikkune veeb API meistriklass** +- [ ] Ehita keerukaid rakendusi, kasutades erinevaid brauseri salvestuse API-sid +- [ ] Õpi offline-eelse arenduse mustreid +- [ ] Panusta avatud lähtekoodiga projektidesse, mis käsitlevad andmete püsivust +- [ ] Omandi privaatsuskeskse arenduse ja GDPR-i nõuete tundmaõppimine +- [ ] Loo korduvkasutatavaid raamatukogusid vormide käsitlemiseks ja andmete haldamiseks +- [ ] Jaga teadmisi veeb API-de ja laienduste arendamise kohta + +## 🎯 Sinu laiendi arenduse meistriklassi ajakava + +```mermaid +timeline + title API integratsiooni ja salvestuse õppe edenemine + + section DOM põhitõed (15 minutit) + Elementide viited: querySelector meisterlikkus + : Sündmuste kuulaja seadistamine + : Oleku haldamise alused + + section Kohalik salvestus (20 minutit) + Andmete püsivus: Võtme-väärtuse salvestus + : Seansi haldamine + : Kasutaja eelistuste käsitlemine + : Salvestuse kontrollimise tööriistad + + section Vormide töötlemine (25 minutit) + Kasutaja sisend: Vormide valideerimine + : Sündmuste takistamine + : Andmete väljavõtmine + : Kasutajaliidese oleku üleminekud + + section API integratsioon (35 minutit) + Väline suhtlus: HTTP päringud + : Autentimismustrid + : JSON andmete parsimine + : Vastuste töötlemine + + section Asünkroonne programmeerimine (40 minutit) + Moodne JavaScript: Lubaduste haldamine + : Async/await mustrid + : Vigade haldamine + : Mittekonkurentsivõimelised toimingud + + section Vigade käsitlemine (30 minutit) + Tugevad rakendused: Try/catch plokid + : Kasutajasõbralikud sõnumid + : Sujuv degradeerumine + : Silumistehnikad + + section Täiustatud mustrid (1 nädal) + Professionaalne areng: Vahemälu strateegiad + : Piirangu määramine + : Taastamise mehhanismid + : Tulemuslikkuse optimeerimine + + section Tootmisoskus (1 kuu) + Ettevõtte funktsioonid: Turvalisuse parimad tavad + : API versioonihaldus + : Jälgimine ja logimine + : Laiendatav arhitektuur +``` +### 🛠️ Sinu täisfunktsionaalne arenduskomplekti kokkuvõte + +Pärast selle õppetüki lõpetamist on sul nüüd: +- **DOM oskuslikkus**: Täpne elementide suunamine ja manipuleerimine +- **Salvestuskogemus**: Andmete püsiv haldamine localStorage abil +- **API integreerimine**: Reaalajas andmete päring ja autentimine +- **Asünkroonne programmeerimine**: Mitteblokeerivad toimingud tänapäevase JavaScriptiga +- **Veahaldus**: Vastupidavad rakendused, mis suudavad ebaõnnestumisi väärikalt käsitleda +- **Kasutajakogemus**: Laadimisolekud, valideerimine ja sujuvad interaktsioonid +- **Kaasaegsed mustrid**: fetch API, async/await ja ES6+ omadused + +**Omandatud professionaalsed oskused**: Sa oled rakendanud mustreid, mida kasutatakse: +- **Veebirakendustes**: Ühelehelised rakendused väliste andmeallikatega +- **Mobiiliarenduses**: API-põhised rakendused offline-võimalustega +- **Lauarakendustes**: Electron-rakendused püsiva salvestusega +- **Ettevõttesüsteemides**: Autentimine, vahemällu salvestamine ja veahaldus +- **Kaasaegsetes raamistikudes**: React/Vue/Angular andmehalduse mustrid + +**Järgmine tase**: Sa oled valmis uurima keerukamaid teemasid, nagu vahemällu salvestamise strateegiad, reaalajas WebSocket ühendused või keerukas oleku haldus! ## Ülesanne @@ -236,5 +657,7 @@ Selles tunnis õppisid LocalStorage'i ja API-de kohta, mis mõlemad on professio --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsel tõlkel võivad esineda vead või ebatäpsused. Originaaldokument selle esmases keeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/5-browser-extension/2-forms-browsers-local-storage/assignment.md b/translations/et/5-browser-extension/2-forms-browsers-local-storage/assignment.md index 8ebe19e86..b747ce2f0 100644 --- a/translations/et/5-browser-extension/2-forms-browsers-local-storage/assignment.md +++ b/translations/et/5-browser-extension/2-forms-browsers-local-storage/assignment.md @@ -1,25 +1,109 @@ -# Kasuta API-d +# Hangi API + +## Ülevaade + +API-d avavad lõputud võimalused loovaks veebi arendamiseks! Selles ülesandes valid välise API ja ehitad brauserilaiendi, mis lahendab reaalse probleemi või pakub kasutajatele väärtuslikku funktsionaalsust. ## Juhised -API-dega mängimine võib olla väga lõbus. Siin on [paljude tasuta API-de nimekiri](https://github.com/public-apis/public-apis). Vali üks API ja loo brauserilaiendus, mis lahendab mingi probleemi. See võib olla nii väike probleem nagu lemmikloomapiltide puudus (proovi näiteks [dog CEO API-d](https://dog.ceo/dog-api/)) või midagi suuremat – naudi protsessi! +### 1. samm: vali oma API +Vali API sellest kureeritud [tasuliste avalike API-de nimekirjast](https://github.com/public-apis/public-apis). Mõtle nende kategooriate peale: + +**Populaarsed valikud algajatele:** +- **Meelelahutus**: [Dog CEO API](https://dog.ceo/dog-api/) juhuslike koerte piltide jaoks +- **Ilm**: [OpenWeatherMap](https://openweathermap.org/api) praeguse ilmaandmete jaoks +- **Tsitaadid**: [Quotable API](https://quotable.io/) inspireerivate tsitaatide jaoks +- **Uudised**: [NewsAPI](https://newsapi.org/) praeguste pealkirjade jaoks +- **Lõbusad faktid**: [Numbers API](http://numbersapi.com/) huvitavate numbrifaktide jaoks + +### 2. samm: planeeri oma laiend +Enne kodeerimist vasta neile planeerimisküsimustele: +- Millise probleemi sinu laiend lahendab? +- Kes on sinu sihtkasutaja? +- Milliseid andmeid salvestad kohalikku salvestusse? +- Kuidas käsitled API rikkeid või kasutuspiiranguid? + +### 3. samm: ehita oma laiend +Sinu laiend peaks sisaldama: + +**Nõutavad funktsioonid:** +- Vormisisendid vajalike API parameetrite jaoks +- API integratsioon koos korraliku veahaldusega +- Kohalik salvestus kasutaja eelistuste või API võtmete jaoks +- Puhas, reageeriv kasutajaliides +- Laadimise seisundid ja kasutajate tagasiside + +**Koodi nõuded:** +- Kasuta kaasaegseid JavaScripti (ES6+) funktsioone +- Rakenda async/await API kutsumiste jaoks +- Sisalda korralik veahaldus try/catch plokkidega +- Lisa sisukad kommentaarid oma koodi selgitamiseks +- Järgi ühtlast koodi vormistust + +### 4. samm: testi ja lihvi +- Testi oma laiendit erinevate sisenditega +- Käsitle äärejuhtumeid (puuduv internet, vigased API vastused) +- Veendu, et laiend töötab ka pärast brauseri taaskäivitust +- Lisa kasutajasõbralikud veateated + +## Boonus väljakutsed + +Viige oma laiend järgmisele tasemele: +- Lisa mitu API lõpp-punkti rikkaliku funktsionaalsuse jaoks +- Rakenda andmete vahemällu salvestamist API kutsude vähendamiseks +- Loo klaviatuuri otseteed tavapäraste tegevuste jaoks +- Lisa andmete eksportimise/importimise funktsioonid +- Rakenda kasutaja kohandamise võimalusi + +## Esitamise nõuded + +1. **Töötav brauserilaiend**, mis edukalt integreerub valitud API-ga +2. **README fail**, mis selgitab: + - Millise API sa valisid ja miks + - Kuidas paigaldada ja kasutada laiendit + - Mis tahes API võtmed või seadistused + - Kuvatõmmised laiendi töös +3. **Puhas, kommenteeritud kood**, mis järgib kaasaegseid JavaScripti parimaid tavasid ## Hindamiskriteeriumid -| Kriteerium | Näidislik | Piisav | Vajab Parandamist | -| ---------- | -------------------------------------------------------------------------- | -------------------------------------- | ----------------------- | -| | Esitatud on täielik brauserilaiendus, mis kasutab ülaltoodud nimekirja API-d | Esitatud on osaline brauserilaiendus | Esitatud lahenduses on vigu | +| Kriteerium | Suurepärane (90-100%) | Hea (80-89%) | Arendamisel (70-79%) | Algaja (60-69%) | +|------------|-----------------------|--------------|----------------------|-----------------| +| **API integratsioon** | Täiuslik API integratsioon koos põhjaliku veahalduse ja äärejuhtude käsitlemisega | Edukas API integratsioon põhiveahaldusega | API töötab, aga veahaldus piiratud | API integratsioonis olulised probleemid | +| **Koodi kvaliteet** | Puhas, hästi kommenteeritud kaasaegne JavaScript, mis järgib parimaid tavasid | Hea koodistruktuur sobivate kommentaaridega | Kood töötab, kuid vajab paremat organiseerimist | Kehv koodi kvaliteet minimaalsete kommentaaridega | +| **Kasutajakogemus** | Sile kasutajaliides koos suurepäraste laadimisseisundite ja kasutajate tagasisidega | Hea liides põhikasutajate tagasisidega | Põhiline liides, mis toimib adekvaatselt | Kehv kasutajakogemus, segane liides | +| **Kohalik salvestus** | Arukas kohaliku salvestuse kasutus andmete valideerimise ja haldusega | Korralik kohaliku salvestuse rakendus võtmefunktsioonide jaoks | Põhjalik kohalik salvestuse rakendus | Minimaalne või vale kohaliku salvestuse kasutus | +| **Dokumentatsioon** | Ulatuslik README koos seadistusjuhiste ja kuvatõmmistega | Hea dokumentatsioon, mis katab enamuse nõuetest | Põhidokumentatsioon, millelt mõned detailid puuduvad | Kehv või puuduv dokumentatsioon | + +## Alustamiseks näpunäited + +1. **Alusta lihtsalt**: vali API, mis ei vaja keerulist autentimist +2. **Loe dokumentatsiooni**: mõista põhjalikult valitud API lõpp-punkte ja vastuseid +3. **Planeeri oma kasutajaliidest**: joonista oma laiendi kasutajaliidese visand enne kodeerimist +4. **Testi sageli**: ehita järk-järgult ja testi iga funktsiooni lisamisel +5. **Käsitle vigu**: arvesta alati, et API kutsed võivad ebaõnnestuda ning planeeri vastavalt + +## Ressursid + +- [Brauserilaiendite dokumentatsioon](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions) +- [Fetch API juhend](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch) +- [Kohaliku salvestuse juhend](https://developer.mozilla.org/docs/Web/API/Window/localStorage) +- [JSON-i analüüs ja käsitlemine](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) + +Loo midagi kasulikku ja loovat mängides! 🚀 --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Tähelepanek**: +See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi me püüdleme täpsuse poole, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks käsitleda autoriteetse allikana. Olulise teabe puhul soovitatakse kasutada professionaalset inimese tõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md index 1501f0b9e..1fab4c08c 100644 --- a/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md @@ -1,176 +1,597 @@ -# Brauserilaiendi projekt, osa 3: Taustülesanded ja jõudlus - -## Eelloengu viktoriin - -[Eelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/27) - -### Sissejuhatus - -Eelmistes kahes selle mooduli tunnis õppisite, kuidas luua vormi ja kuvamisala API-st saadud andmete jaoks. See on väga tavaline viis veebis kohaloleku loomiseks. Õppisite isegi, kuidas käsitleda andmete asünkroonset toomist. Teie brauserilaiend on peaaegu valmis. - -Jäänud on hallata mõningaid taustülesandeid, sealhulgas laiendi ikooni värvi värskendamist, mistõttu on suurepärane aeg rääkida, kuidas brauser selliseid ülesandeid haldab. Mõelgem nende brauseri ülesannete peale teie veebivarade jõudluse kontekstis, kui te neid loote. - -## Veebi jõudluse põhitõed - -> "Veebisaidi jõudlus seisneb kahes asjas: kui kiiresti leht laadib ja kui kiiresti sellel olev kood töötab." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) - -Teema, kuidas muuta oma veebisaidid välkkiireks igasugustel seadmetel, igasuguste kasutajate jaoks ja igasugustes olukordades, on ootuspäraselt ulatuslik. Siin on mõned punktid, mida tasub meeles pidada, kui loote kas tavalist veebiprojekti või brauserilaiendit. - -Esimene asi, mida peate tegema, et tagada oma saidi tõhus toimimine, on koguda andmeid selle jõudluse kohta. Esimene koht selleks on teie veebibrauseri arendustööriistad. Edge'is saate valida "Seaded ja veel" nupu (kolme punkti ikoon brauseri paremas ülanurgas), seejärel navigeerida Veel tööriistad > Arendustööriistad ja avada Jõudluse vahekaart. Samuti saate arendustööriistade avamiseks kasutada klaviatuuri otseteid `Ctrl` + `Shift` + `I` Windowsis või `Option` + `Command` + `I` Macis. - -Jõudluse vahekaart sisaldab profiilimise tööriista. Avage veebisait (proovige näiteks [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) ja klõpsake nuppu "Salvesta", seejärel värskendage saiti. Salvestuse saate igal ajal peatada ja näete rutiine, mis genereeritakse saidi "skriptimiseks", "renderdamiseks" ja "maalimiseks": - -![Edge profiilija](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.et.png) - -✅ Külastage [Microsofti dokumentatsiooni](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) Edge'i jõudluse paneeli kohta - -> Näpunäide: et saada täpne ülevaade oma veebisaidi käivitamise ajast, tühjendage oma brauseri vahemälu - -Valige profiili ajajoone elemendid, et suumida sündmustele, mis toimuvad teie lehe laadimise ajal. - -Saage ülevaade oma lehe jõudlusest, valides osa profiili ajajoonest ja vaadates kokkuvõtte paneeli: - -![Edge profiilija kokkuvõte](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.et.png) - -Kontrollige sündmuste logi paneeli, et näha, kas mõni sündmus kestis kauem kui 15 ms: - -![Edge sündmuste logi](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.et.png) - -✅ Tutvuge oma profiilijaga! Avage sellel saidil arendustööriistad ja vaadake, kas esineb kitsaskohti. Mis on kõige aeglasemalt laadiv vara? Kõige kiiremini laadiv? - -## Profiilimise kontrollid - -Üldiselt on mõned "probleemsed valdkonnad", mida iga veebiarendaja peaks saidi loomisel jälgima, et vältida ebameeldivaid üllatusi, kui on aeg tootmisse juurutada. - -**Varade suurused**: Veeb on viimastel aastatel muutunud "raskemaks" ja seega aeglasemaks. Osa sellest raskusest on seotud piltide kasutamisega. - -✅ Vaadake [Interneti arhiivi](https://httparchive.org/reports/page-weight) ajaloolise ülevaate saamiseks lehe kaalust ja muust. - -Hea tava on tagada, et teie pildid oleksid optimeeritud ja tarnitud õiges suuruses ja resolutsioonis teie kasutajatele. - -**DOM-i läbimised**: Brauser peab looma oma dokumendiobjektimudeli (DOM) teie kirjutatud koodi põhjal, seega on hea lehe jõudluse huvides hoida sildid minimaalsed, kasutades ja stiilides ainult seda, mida leht vajab. Selle punkti juurde kuulub ka lehega seotud liigse CSS-i optimeerimine; stiilid, mida on vaja kasutada ainult ühel lehel, ei pea olema kaasatud peamisse stiililehte. +# Brauserilaiendi projekt Osa 3: Õpi taustaprotsesside ja jõudluse kohta + +```mermaid +journey + title Teie jõudluse optimeerimise teekond + section Alused + Õppige brauseri tööriistu: 3: Student + Mõistke profileerimist: 4: Student + Tuvastage pudelikaelad: 4: Student + section Laiendatud funktsioonid + Looge värvisüsteem: 4: Student + Looge taustatööd: 5: Student + Uuendage ikoone dünaamiliselt: 5: Student + section Optimeerimine + Jälgige jõudlust: 5: Student + Siluge probleemid: 4: Student + Viimistlege kogemust: 5: Student +``` +Kas oled kunagi mõelnud, mis teeb mõne brauserilaiendi kiiremaks ja reageerivamaks, samas kui teised tunduvad aeglased? Saladus peitub selles, mis toimub lava taga. Kui kasutajad klikivad sinu laiendi kasutajaliideses, juhib kogu maailm taustal vaikselt andmete pärimist, ikoonide uuendamist ja süsteemiresursse. -**JavaScript**: Iga JavaScripti arendaja peaks jälgima "renderdamist blokeerivaid" skripte, mis tuleb laadida enne, kui ülejäänud DOM-i saab brauseris läbida ja maalida. Kaaluge `defer` kasutamist oma sisemiste skriptidega (nagu tehakse Terrariumi moodulis). +See on meie viimane õppetund brauserilaiendite seerias ja me teeme sinu süsiniku jalajälje jälgija sujuvalt toimivaks. Sa lisad dünaamilisi ikooni uuendusi ja õpid, kuidas tuvastada jõudlusprobleeme enne, kui need saavad tõsiseks. See on nagu võidusõiduauto häälestamine – pisikesed optimeerimised võivad teha tohutu erinevuse selles, kuidas kõik töötab. -✅ Proovige mõningaid saite [veebisaidi kiirustesti veebisaidil](https://www.webpagetest.org/), et saada rohkem teavet levinud kontrollide kohta, mida tehakse saidi jõudluse määramiseks. +Kui lõpetame, on sul lihvitud laiend ning sa mõistad jõudluse põhimõtteid, mis eristavad häid veebirakendusi suurepärastest. Sukeldume brauseri optimeerimise maailma. -Nüüd, kui teil on aimu, kuidas brauser renderdab varasid, mida te sellele saadate, vaatame viimaseid asju, mida peate tegema, et oma laiend valmis saada: +## Enne loengut test -### Funktsiooni loomine värvi arvutamiseks +[Enne loengut test](https://ff-quizzes.netlify.app/web/quiz/27) -Töötades failis `/src/index.js`, lisage funktsioon nimega `calculateColor()` pärast `const` muutujate seeriat, mille määrasite DOM-ile juurdepääsu saamiseks: +### Sissejuhatus -```JavaScript +Eelmistes õppetundides ehitasid vormi, ühendasid selle API-ga ja tegid asünkroonset andmete pärimist. Sinu laiend on kenasti vormistumas. + +Nüüd tuleb lisada viimased lihvid – näiteks muuta laiendi ikooni värvi süsinikuandmete põhjal. See meenutab mulle, kuidas NASA pidi optimeerima iga süsteemi Apollo kosmoselaeval. Nad ei saanud endale lubada raisatud tsükleid või mälu, sest elu sõltus jõudlusest. Kuigi meie brauserilaiend pole täiesti nii kriitiline, kehtivad samad põhimõtted – tõhus kood loob parema kasutajakogemuse. + +```mermaid +mindmap + root((Jõudlus ja taustategevused)) + Browser Performance + Rendering Pipeline + Asset Optimization + DOM Manipulation + JavaScript Execution + Profiling Tools + Developer Tools + Performance Tab + Timeline Analysis + Bottleneck Detection + Extension Architecture + Background Scripts + Content Scripts + Message Passing + Icon Management + Optimization Strategies + Code Splitting + Lazy Loading + Caching + Resource Compression + Visual Feedback + Dynamic Icons + Color Coding + Real-time Updates + User Experience +``` +## Veebijõudluse alused + +Kui su kood töötab tõhusalt, tunnevad inimesed tõesti *vahet*. Sa tead seda hetke, kui leht laeb koheselt või animatsioon voolab sujuvalt? See ongi hea jõudlus töös. + +Jõudlus ei seisne ainult kiiruses – see on veebikogemuste loomine, mis tunduvad loomulikud, mitte kohmakad ja pettumust valmistavad. Arvutamise algusaegadel hoidis Grace Hopper legendaarset nanosekundit (juhet umbes jalapikkusega) laual, et näidata, kui kaugele valgus jõuab ühe miljardi sekundiosaga. See oli tema viis selgitada, miks iga mikrosekund on arvutamisel oluline. Vaatleme detektiivivahendeid, mis aitavad sul välja selgitada, mis aeglustab asju. + +> "Veebisaidi jõudlus on kaks asja: kui kiiresti leht laeb ja kui kiiresti kood sellel töötab." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) + +Teema, kuidas teha oma veebileht kõigil seadmetel, kasutajatel ja olukordades kiiresti, on loomulikult tohutu. Siin on mõned punktid, mida meeles pidada, kui ehitad kas standardset veebiprojekti või brauserilaiendit. + +Esimene samm saidi optimeerimisel on mõista, mis tegelikult kapoti all toimub. Õnneks on sinu brauserisse ehitatud võimsad detektiivivahendid. + +```mermaid +flowchart LR + A[HTML] --> B[Analüüsi] + B --> C[DOM Puu] + D[CSS] --> E[Analüüsi] + E --> F[CSSOM] + G[JavaScript] --> H[Täitmine] + + C --> I[Kuvamispuu] + F --> I + H --> I + + I --> J[Paigutus] + J --> K[Värvimine] + K --> L[Komposiit] + L --> M[Ekraan] + + subgraph "Kriitiline kuvamistee" + N["1. HTML analüüs"] + O["2. CSS analüüs"] + P["3. JS täitmine"] + Q["4. Kuvamispuu koostamine"] + R["5. Elementide paigutus"] + S["6. Pikslite värvimine"] + T["7. Kihtide komposiit"] + end + + style M fill:#e8f5e8 + style I fill:#fff3e0 + style H fill:#ffebee +``` +Edge arendajatööriistade avamiseks klõpsa paremas ülanurgas kolmele punktile, seejärel vali Rohkem tööriistu > Arendajatööriistad. Või kasuta klaviatuuri otseteed: `Ctrl` + `Shift` + `I` Windowsis või `Option` + `Command` + `I` Macis. Kui oled seal, klõpsa vahekaardil Jõudlus – siin oledki uurimisajal. + +**Siin on su jõudlusdetektiivi tööriistakomplekt:** +- **Ava** arendajatööriistad (kasutad neid arendajana kogu aeg!) +- **Mine** vahekaardile Jõudlus – mõtle sellele kui oma veebirakenduse vormijälgijale +- **Vajuta** nuppu Salvestus ja vaata, mis lehel toimub +- **Uuri** tulemusi, et leida, mis asju aeglustab + +Proovime seda. Ava veebileht (näiteks Microsoft.com sobib hästi) ja vajuta 'Salvestus' nuppu. Nüüd värskenda lehte ja jälgi, kuidas profiler kõike jäädvustab. Kui salvestuse lõpetad, näed detailset ülevaadet sellest, kuidas brauser saidi 'skriptib', 'renderdab' ja 'maalib'. See meenutab missioonikontrolli, mis jälgib iga süsteemi raketi stardi ajal – saad reaalajas andmeid täpselt, mis toimub ja millal. + +![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.et.png) + +✅ [Microsofti dokumentatsioonis](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on veel palju detaile, kui tahad süvitsi minna + +> Nõuanne: Puhasta enne testimist oma brauseri vahemälu, et näha, kuidas su sait toimib esmakordsetel külastajatel – see on tavaliselt üsna erinev korduvkülastajatest! + +Vali profiili ajajoone osad, et suumida sündmusi, mis lehe laadimise ajal toimuvad. + +Saavuta oma lehe jõudlusest kiire ülevaade, valides ajajoone osa ja vaadates kokkuvõttepaneeli: + +![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.et.png) + +Vaata Sündmuste logi paneeli, et näha, kas mõni sündmus kestis kauem kui 15 ms: + +![Edge event log](../../../../translated_images/log.804026979f3707e0.et.png) + +✅ Tutvu oma profileriga! Ava sellel saidil arendajatööriistad ja vaata, kas on kitsaskohti. Milline ressurss laeb kõige aeglasemalt? Mis kiiremini? + +```mermaid +flowchart TD + A[Ava DevTools] --> B[Liigu vahekaardile Performance] + B --> C[Klõpsa Salvestamise Nupul] + C --> D[Tee Tegevused] + D --> E[Peata Salvestus] + E --> F{Analüüsi Tulemusi} + + F --> G[Vaata Ajajoont] + F --> H[Ülevaade Võrgustikust] + F --> I[Uuri Skripte] + F --> J[Tuvasta Värvimissündmused] + + G --> K{Pikad Ülesanded?} + H --> L{Suur Suvandid?} + I --> M{Renderdamise Blokeerimine?} + J --> N{Kallid Värvimised?} + + K -->|Jah| O[Optimeeri JavaScripti] + L -->|Jah| P[Surve Suvandid] + M -->|Jah| Q[Lisa Async/Defer] + N -->|Jah| R[Lihtsusta Stiile] + + O --> S[Testi Uuesti] + P --> S + Q --> S + R --> S + + style A fill:#e1f5fe + style F fill:#fff3e0 + style S fill:#e8f5e8 +``` +## Mida jälgida profiiili tegemisel + +Profili jooksutamine on alles algus – tõeline oskus on mõista, mida need värvilised graafikud sulle tegelikult räägivad. Ära muretse, sa õpid neid lugema. Kogenud arendajad oskavad enne probleemi tekkimist hoiatavaid märke märgata. + +Räägime tavapärastest kahtlastest isikutest – jõudlusprobleemidest, mis kipuvad veebiprojektidesse hiilima. Nii nagu Marie Curie pidi hoolikalt jälgima kiirguse taset laboris, peame ka meie jälgima mustreid, mis viitavad probleemide tekkimisele. Nende varane avastamine säästab sind (ja kasutajaid) palju pettumust. + +**Ressursside suurused**: Veebisaidid on aastate jooksul "rasvemaks" muutunud ja suur osa sellest lisakaalust tuleb piltidest. See on nagu paneksime üha rohkem ja rohkem digikotti. + +✅ Vaata [Internet Archive'i](https://httparchive.org/reports/page-weight), kuidas lehekülje suurused aja jooksul kasvanud on – see on päris kõnekas. + +**Kuidas hoida ressursid optimeerituna:** +- **Komprimeeri** pilte! Tänapäeva formaadid nagu WebP saavad failisuurust märkimisväärselt vähendada +- **Serveeri** iga seadme jaoks sobivat pildisuurust – tavalised suured desktopi pildid pole telefonidele vajalikud +- **Minimeeri** CSS-i ja JavaScripti – iga bait loeb +- **Kasuta** laisklaadimist, nii et pilte laaditakse alles, kui kasutaja neid kerib + +**DOM-liikumised**: Brauser peab ehitama dokumentide objektimudeli (DOM) sinu kirjutatud koodi põhjal, seega tuleb hea lehe jõudluse huvides hoida oma sildid minimaalsena, kasutades ja stiilides ainult seda, mida leht vajab. Seetõttu saab üleliigse CSS-i, mis on seotud ühe lehega, optimeerida; näiteks stiilid, mida kasutatakse vaid ühel lehel, ei pea olema peamisel stiililehel. + +**DOM optimeerimise põhistrateegiad:** +- **Minimeerib** HTML elementide arvu ja pesastustasemeid +- **Eemaldab** kasutamata CSS reeglid ja ühendab stiililehed tõhusalt +- **Korraldab** CSS-i laadima vaid seda, mida iga leht vajab +- **Struktureerib** HTML semantiliselt, et brauser saaks paremini töödelda + +**JavaScript**: Iga JavaScripti arendaja peaks jälgima 'renderdamist blokeerivat' skripti, mida tuleb laadida enne, kui DOM suudab edasi liikuda ja lehte maalida. Kaalu kasutusele võtmist `defer` inline skriptide puhul (nagu Terrariumi moodulis). + +**Moodsa JavaScripti optimeerimise tehnikad:** +- **Kasutab** `defer` atribuuti skriptide laadimiseks pärast DOM-i parsimist +- **Rakendab** koodijagamist, et laadida ainult vajalik JavaScript +- **Kasutab** laisklaadimist vähem olulise funktsionaalsuse puhul +- **Minimeerib** raskete raamistike ja teekide kasutamist, kui võimalik + +✅ Proovi mõnda saiti [Site Speed Test veebilehel](https://www.webpagetest.org/), et õppida, milliseid tavalisi kontrollimisi tehakse saidi jõudluse määramiseks. + +### 🔄 **Pedagoogiline vahekokkuvõte** +**Jõudluse mõistmine**: Enne laienduse funktsioonide ehitamist kontrolli, et sa: +- ✅ Suudad selgitada kriitilist renderdamisteed HTML-ist piksliteni +- ✅ Tunned ära tavalised jõudluskitsaskohad veebirakendustes +- ✅ Kasutad brauseri arendajatööriistu lehe jõudluse profiilimiseks +- ✅ Mõistad, kuidas ressursi suurus ja DOM-i keerukus mõjutavad kiirust + +**Kiirtest iseendale**: Mis juhtub, kui sul on renderdamist blokeeriv JavaScript? +*Vastus: Brauser peab selle skripti alla laadima ja täitma enne, kui saab jätkata HTML-i parsimist ja lehe renderdamist* + +**Reaalne jõudluse mõju:** +- **100 ms viivitus**: kasutajad märkavad aeglustust +- **1 sekund viivitus**: kasutajad hakkavad keskendumist kaotama +- **3+ sekundit**: 40% kasutajatest lahkub lehelt +- **Mobiilsed võrgud**: jõudlus loeb veelgi rohkem + +Nüüd, kui sul on ülevaade, kuidas brauser renderdab su saadetavaid ressursse, vaatame viimaseid samme, mida oma laiendi lõpuleviimiseks vaja teha: + +### Loo funktsioon värvuse arvutamiseks + +Nüüd loome funktsiooni, mis muudab arvulised andmed tähenduslikeks värvideks. Mõtle sellele kui valgusfoorsiüsteemile – roheline puhta energia jaoks, punane kõrge süsinikuintensiivsuse jaoks. + +See funktsioon võtab meie API-st CO2 andmed ja määrab, milline värv kõige paremini esindab keskkonnamõju. Sarnaselt teadlastele, kes kasutavad kuumakaartidel värvikodeeringut keeruliste andmemustrite visualiseerimiseks – alates ookeanitemperatuuridest kuni tähtede moodustumiseni. Lisame selle faili `/src/index.js`, kohe pärast neid konstante, mida me varem defineerisime: + +```mermaid +flowchart LR + A[CO2 Väärtus] --> B[Leia Kõige Lähem Skaalapunkt] + B --> C[Hangi Skaala Indeks] + C --> D[Seosta Värviga] + D --> E[Saada Tausta] + + subgraph "Värviskaala" + F["0-150: Roheline (Puhas)"] + G["150-600: Kollane (Mõõdukas)"] + H["600-750: Oranž (Kõrge)"] + I["750+: Pruun (Väga Kõrge)"] + end + + subgraph "Sõnumite Edastamine" + J[Sisu Skript] + K[chrome.runtime.sendMessage] + L[Taustaskript] + M[Ikooni Uuendus] + end + + style A fill:#e1f5fe + style D fill:#e8f5e8 + style E fill:#fff3e0 +``` +```javascript function calculateColor(value) { - let co2Scale = [0, 150, 600, 750, 800]; - let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; + // Määra CO2 intensiivsuse skaala (grammi kWh kohta) + const co2Scale = [0, 150, 600, 750, 800]; + // Vastavad värvid rohelisest (puhas) tumepruunini (kõrge süsinikuheidetega) + const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; - let closestNum = co2Scale.sort((a, b) => { + // Leia sisendi lähim skaala väärtus + const closestNum = co2Scale.sort((a, b) => { return Math.abs(a - value) - Math.abs(b - value); })[0]; - console.log(value + ' is closest to ' + closestNum); - let num = (element) => element > closestNum; - let scaleIndex = co2Scale.findIndex(num); - - let closestColor = colors[scaleIndex]; + + console.log(`${value} is closest to ${closestNum}`); + + // Leia värvikaardistuse indeks + const num = (element) => element > closestNum; + const scaleIndex = co2Scale.findIndex(num); + + const closestColor = colors[scaleIndex]; console.log(scaleIndex, closestColor); + // Saada värvi uuendamise sõnum taustaskripti chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } }); } ``` -Mis siin toimub? Te edastate väärtuse (süsiniku intensiivsuse) API-kõnest, mille te eelmises tunnis lõpetasite, ja seejärel arvutate, kui lähedal on selle väärtus värvide massiivis esitatud indeksile. Seejärel saadate selle lähima värviväärtuse edasi Chrome'i runtime'ile. - -Chrome.runtime'il on [API](https://developer.chrome.com/extensions/runtime), mis haldab igasuguseid taustülesandeid, ja teie laiend kasutab seda: - -> "Kasutage chrome.runtime API-d, et hankida taustaleht, tagastada manifesti üksikasjad ning kuulata ja vastata rakenduse või laiendi elutsükli sündmustele. Samuti saate seda API-d kasutada URL-ide suhteliste radade teisendamiseks täielikult kvalifitseeritud URL-ideks." - -✅ Kui arendate seda brauserilaiendit Edge'i jaoks, võib teid üllatada, et kasutate Chrome'i API-d. Uuemad Edge'i brauseri versioonid töötavad Chromiumi brauserimootoril, seega saate neid tööriistu kasutada. +**Lähme selle nutika väikese funktsiooni koomale:** +- **Seadistab** kaks massiivi – ühe CO2 tasemetele, teise värvidele (roheline = puhas, pruun = must!) +- **Leiab** lähima vaste tegelikule CO2 väärtusele käepärase massiivi sortimise abil +- **Haagib** vastava värvi `findIndex()` meetodi abil +- **Saadab** sõnumi Chrome taustaskripti valitud värviga +- **Kasutab** mallistringe (need tagurpidi kriipsud) puhtama stringivorminduse jaoks +- **Hoidab** kõik korrektselt konstandi deklaratsioonidega organiseeritud + +`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) on nagu su laiendi närvisüsteem – see haldab kõiki lava taga toimuvaid suhtlusi ja protsesse: + +> "Kasuta chrome.runtime API-d, et saada kätte taustaleht, tagastada manifesti üksikasju ja kuulata ning reageerida rakenduse või laiendi elutsükli sündmustele. Sa saad kasutada seda API-d ka URL-ide suhteliste teede teisendamiseks täielikult kvalifitseeritud URL-ideks." + +**Miks on Chrome Runtime API nii kasulik:** +- **Laseb** sinu laiendi eri osadel omavahel suhelda +- **Haldb** taustatööd ilma kasutajaliidest külmutamata +- **Haldb** sinu laiendi elutsükli sündmusi +- **Mugav** sõnumite edastamine skriptide vahel + +✅ Kui arendad seda brauserilaiendit Edge jaoks, võib sind üllatada, et kasutad Chrome API-d. Uuemad Edge brauseri versioonid töötavad Chromiumi mootoril, seega saad neid tööriistu kasutada. + +```mermaid +architecture-beta + group browser(logos:chrome)[Brauser] + + service popup(logos:html5)[Hüpikaken UI] in browser + service content(logos:javascript)[Sisu skript] in browser + service background(database)[Taustskript] in browser + service api(logos:api)[Väline API] in browser + + popup:R -- L:content + content:R -- L:background + background:T -- B:api + content:T -- B:api + + junction junctionCenter in browser + popup:R -- L:junctionCenter + junctionCenter:R -- L:background +``` +> **Nõuanne**: Kui soovid profiilida brauserilaiendit, ava arendajatööriistad otse laiendist, sest see on omaette brauseriprotsess. See annab sulle ligipääsu laienduspõhistele jõudlusmõõdikutele. -> Märkus: kui soovite profiilida brauserilaiendit, käivitage arendustööriistad laiendi enda seest, kuna see on omaette brauseri instants. +### Sea ikoonile vaikimisi värv -### Vaikimisi ikooni värvi määramine +Enne, kui hakkame pärima päris andmeid, anname oma laiendile lähtepunkti. Keegi ei taha vaadata tühja või katkenud ikooni. Alustame rohelisest värvist, et kasutajad teadaksid kohe, kui laiend on paigaldatud, et see töötab. -Nüüd määrake `init()` funktsioonis ikooni algvärviks üldine roheline, kutsudes taas Chrome'i `updateIcon` tegevust: +Sinu `init()` funktsioonis seadistame vaikimisi rohelist ikooni: -```JavaScript +```javascript chrome.runtime.sendMessage({ action: 'updateIcon', - value: { - color: 'green', - }, + value: { + color: 'green', + }, }); ``` -### Funktsiooni kutsumine ja kõne täitmine +**Mida see algseadistus saavutab:** +- **Seadistab** neutraalse rohelise värvi vaikeseisundiks +- **Annab** vahetu visuaalse tagasiside laiendi laadimisel +- **Määrab** suhtlusmustri taustaskriptiga +- **Tagab**, et kasutajad näevad toimivat laiendit enne andmete laekumist -Järgmisena kutsuge just loodud funktsioon, lisades selle C02Signal API tagastatud lubadusele: +### Kutsu funktsioon tööle, käivita see -```JavaScript -//let CO2... +Nüüd ühendame kõik kokku, nii et kui tuleb värske CO2 andmestik, uuendab su ikoon automaatselt õiget värvi. See on nagu viimase ahela ühendamine elektroonikaseadmes – kõik komponendid hakkavad korraga töötama. + +Lisa see rida kohe pärast seda, kui saad API-st CO2 andmed: + +```javascript +// Pärast CO2 andmete saamist API-st +// lase CO2 = data.data[0].intensity.actual; calculateColor(CO2); ``` -Ja lõpuks, failis `/dist/background.js`, lisage kuulaja nende taustatoimingute kõnede jaoks: +**See integratsioon saavutab:** +- **Seob** API andmevoo visuaalse indikaatoriga +- **Käivitab** ikooni uuendused automaatselt uute andmete saabumisel +- **Tagab** reaalajas visuaalse tagasiside praeguse süsinikuintensiivsuse põhjal +- **Hoiab** andmete pärimise ja kuvamise loogika selgelt lahus + +Ja lõpuks, faili `/dist/background.js` lisa kuulaja nende taustategevuste käsklustele: -```JavaScript +```javascript +// Kuula sõnumeid sisutekstist chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); -//borrowed from energy lollipop extension, nice feature! + +// Joonista dünaamiline ikoon kasutades Canvas API-d +// Laenatud energy lollipop laiendusest - tore omadus! function drawIcon(value) { - let canvas = new OffscreenCanvas(200, 200); - let context = canvas.getContext('2d'); + // Loo ekraaniväline lõuend parema jõudluse jaoks + const canvas = new OffscreenCanvas(200, 200); + const context = canvas.getContext('2d'); + // Joonista värvitud ring, mis kujutab süsiniku intensiivsust context.beginPath(); context.fillStyle = value.color; context.arc(100, 100, 50, 0, 2 * Math.PI); context.fill(); + // Tagasta brauseri ikooni pildidata return context.getImageData(50, 50, 100, 100); } ``` -Selles koodis lisate kuulaja kõigile sõnumitele, mis jõuavad taustülesannete haldurisse. Kui seda nimetatakse 'updateIcon', siis käivitatakse järgmine kood, et joonistada õige värviga ikoon Canvas API abil. - -✅ Õpite Canvas API kohta rohkem [Kosmosemängu tundides](../../6-space-game/2-drawing-to-canvas/README.md). - -Nüüd, ehitage oma laiend uuesti (`npm run build`), värskendage ja käivitage oma laiend ning jälgige värvi muutumist. Kas on hea aeg teha mõni majapidamistöö? Nüüd teate! - -Palju õnne, olete loonud kasuliku brauserilaiendi ja õppinud rohkem, kuidas brauser töötab ja kuidas selle jõudlust profiilida. +**Mida see taustaskript teeb:** +- **Kuulab** sõnumeid sinu peaskriptist (nagu vastuvõtja kõnesid vastu võttes) +- **Töötleb** need 'updateIcon' taotlused, et muuta tööriistariba ikooni +- **Loodab** uusi ikoone jooksvalt Canvas API abil +- **Joonistab** lihtsa värvilise ringi, mis näitab hetke süsinikuintensiivsust +- **Uuendab** sinu brauseri tööriistariba värske ikooniga +- **Kasutab** OffscreenCanvas'e sujuvaks jõudluseks (ilma kasutajaliidese blokeerimiseta) + +✅ Canvas API-st õpid rohkem [Taeva mängu õppetundides](../../6-space-game/2-drawing-to-canvas/README.md). + +```mermaid +sequenceDiagram + participant CS as Sisu skript + participant BG as Taustaskript + participant Canvas as OffscreenCanvas + participant Browser as Brauseri ikoon + + CS->>BG: sendMessage({action: 'uuendaIkoon', värv}) + BG->>Canvas: new OffscreenCanvas(200, 200) + Canvas->>Canvas: getContext('2d') + Canvas->>Canvas: beginPath() + fillStyle + arc() + Canvas->>Canvas: fill() + getImageData() + Canvas->>BG: Tagasta pildiandmed + BG->>Browser: chrome.action.setIcon(imageData) + Browser->>Browser: Tööriistariba ikooni uuendamine +``` +### 🔄 **Pedagoogiline vahekokkuvõte** +**Laiendi süsteemi täielik mõistmine**: Kontrolli oma valmidust tervikuna: +- ✅ Kuidas sõnumite edastamine töötab eri laiendusskriptide vahel? +- ✅ Miks kasutame OffscreenCanvas'i tavapärase Canvas'i asemel jõudluse pärast? +- ✅ Mis rolli mängib Chrome Runtime API laienduse arhitektuuris? +- ✅ Kuidas värvustamise algoritm seob andmed visuaalse tagasisidega? ---- +**Jõudluse kaalutlused**: Sinu laiendus näitab nüüd: +- **Tõhus sõnumivahetus**: Selge suhtlus skriptide kontekstide vahel +- **Optimeeritud renderdamine**: OffscreenCanvas hoiab kasutajaliidese blokeerimise ära +- **Reaalajas uuendused**: Dünaamilised ikoonimuutused vastavalt elavale andmestikule +- **Mälu haldamine**: Korralik koristus ja ressursihaldus -## 🚀 Väljakutse +**On aeg oma laiendust testida:** +- **Koosta** kõik käsuga `npm run build` +- **Laadi** oma laiendus uuesti brauseris (ära unusta seda sammu) +- **Ava** oma laiendus ja vaata, kuidas ikoon värve muudab +- **Kontrolli**, kuidas see reageerib maailma erinevate paikade tegelikele süsinikuandmetele -Uurige mõningaid avatud lähtekoodiga veebisaite, mis on olnud olemas juba pikka aega, ja proovige nende GitHubi ajaloo põhjal kindlaks teha, kuidas neid aastate jooksul jõudluse jaoks optimeeriti, kui üldse. Mis on kõige levinum valupunkt? +Nüüd näed pilguheitena, kas on hea aeg pesu pesemiseks või peaksid ootama puhtama energia saabumist. Sa just lõid midagi tõeliselt kasulikku ja õppisid teekonna jooksul brauseri jõudlusest. -## Järelloengu viktoriin +## GitHub Copilot Agendi Väljakutse 🚀 -[Järelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/28) +Kasuta Agendi režiimi, et täita järgmine väljakutse: -## Ülevaade ja iseseisev õppimine +**Kirjeldus:** Täienda brauserilaienduse jõudlusmonitooringu võimeid, lisades funktsiooni, mis jälgib ja kuvab erinevate laienduse komponentide laadimisaegu. -Kaaluge registreerumist [jõudluse uudiskirja](https://perf.email) saamiseks. +**Päring:** Loo jõudlusmonitooringu süsteem brauserilaiendusele, mis mõõdab ja logib CO2 andmete API-st toomise, värvide arvutamise ja ikoone uuendamise aegasid. Lisa funktsioon nimega `performanceTracker`, mis kasutab Performance API-d nende operatsioonide mõõtmiseks ja kuvab tulemused brauseri konsoolis koos ajatemplite ja kestuse mõõdikuga. -Uurige mõningaid viise, kuidas brauserid hindavad veebijõudlust, vaadates nende veebitööriistade jõudluse vahekaarte. Kas leiate mingeid olulisi erinevusi? +Lisateavet leiad [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) lehelt. -## Ülesanne +## 🚀 Väljakutse -[Analüüsige saidi jõudlust](assignment.md) +Siin on huvitav detektiivitöö: vali mõned avatud lähtekoodiga veebisaidid, mis on olnud olemas juba aastaid (mõtle Wikipedia, GitHub või Stack Overflow) ja uurige nende commit ajalugu. Kas suudad märgata kohti, kus nad tegid jõudluse parandusi? Millised probleemid kordusid? + +**Sinu uurimisstrateegia:** +- **Otsi** commit sõnumeid sõnadega nagu "optimize", "performance", või "faster" +- **Vaata** mustreid – kas nad parandavad pidevalt samu tüüpi probleeme? +- **Tuvasta** levinud põhjused, mis veebisaite aeglustavad +- **Jaga** oma avastusi – teised arendajad õpivad pärismaailma näidetest + +## Loengu järgne viktoriin + +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28) + +## Kordamine ja iseseisev õppimine + +Kaalu tellimust saada [jõudluse uudiskirja](https://perf.email/) + +Uuri, kuidas brauserid mõõdavad veebijõudlust, vaadates nende arendajate tööriistade jõudluse vahekaarti. Kas märkad suuri erinevusi? + +### ⚡ **Mida saad järgmise 5 minutiga teha** +- [ ] Ava brauseri ülesannete haldur (Shift+Esc Chrome’is), et näha laienduste ressursikasutust +- [ ] Kasuta DevTools jõudluse vahekaarti, et salvestada ja analüüsida veebilehe jõudlust +- [ ] Kontrolli brauseri laienduste lehte, et näha, millised laiendused mõjutavad käivitusaega +- [ ] Proovi ajutiselt laiendused keelata, et näha jõudluse erinevusi + +### 🎯 **Mida saad selle tunniga saavutada** +- [ ] Täida loengu järgne viktoriin ja mõista jõudluskontseptsioone +- [ ] Rakenda oma brauserilaienduse jaoks taustaskript +- [ ] Õpi kasutama browser.alarms efektiivsete taustatööde jaoks +- [ ] Harjuta sõnumiedastust sisuskriptide ja taustaskriptide vahel +- [ ] Mõõda ja optimeeri oma laienduse ressursikasutust + +### 📅 **Sinu nädala pikkune jõudlusretk** +- [ ] Loo kõrge jõudlusega brauserilaiendus taustafunktsioonidega +- [ ] Valda teenusetöötajaid ja kaasaegset laienduse arhitektuuri +- [ ] Rakenda tõhusaid andmete sünkroniseerimise ja vahemällu salvestamise strateegiaid +- [ ] Õpi edasijõudnud silumisvõtteid laienduste jõudluse tõhustamiseks +- [ ] Optimeeri oma laiendust nii funktsionaalsuse kui ressursitõhususe jaoks +- [ ] Loo põhjalikud testid laienduse jõudlusstsenaariumite jaoks + +### 🌟 **Sinu kuu pikkune optimeerimismeisterlikkus** +- [ ] Koosta ettevõtte tasemel brauserilaiendusi optimaalse jõudlusega +- [ ] Õpi Web Workers’i, Service Workers’i ja tänapäevase veebijõudluse kohta +- [ ] Panusta avatud lähtekoodiga projektidesse, mis keskenduvad jõudluse optimeerimisele +- [ ] Valda brauseri sisemust ja edasijõudnud silumisvõtteid +- [ ] Loo jõudluse monitooringutööriistu ja parimate tavade juhendeid +- [ ] Saa jõudluse ekspertiks, kes aitab veebirakenduste optimeerimisel + +## 🎯 Sinu brauserilaienduse meisterlikkuse ajaskaala + +```mermaid +timeline + title Laienduse arendamise täielik edenemine + + section Tulemuslikkuse alused (20 minutit) + Brauseri profiilimine: DevToolsi valdamine + : Ajajoone analüüs + : Kitsaskohtade tuvastamine + : Kriitilise renderdamisrada + + section Taustategevused (25 minutit) + Laienduse arhitektuur: Sõnumite edastamine + : Taustskriptid + : Runtime API kasutamine + : Kontekstidevaheline suhtlus + + section Visuaalne tagasiside (30 minutit) + Dünaamiline kasutajaliides: Värvilahenduste algoritmid + : Canvas API integreerimine + : Ikoonide genereerimine + : Reaalajas uuendused + + section Tulemuslikkuse optimeerimine (35 minutit) + Tõhus kood: Asünkroonsed operatsioonid + : Mälu haldamine + : Ressursside puhastamine + : Tulemuslikkuse jälgimine + + section Tootmiskõlbulik (45 minutit) + Lõpetamine & testimine: Ristbrauseri ühilduvus + : Veahaldus + : Kasutajakogemus + : Tulemuslikkuse valideerimine + + section Täiustatud funktsioonid (1 nädal) + Laienduse ökosüsteem: Chrome'i veebipood + : Kasutajate tagasiside + : Analüütika integreerimine + : Uuenduste haldamine + + section Professionaalne areng (2 nädalat) + Ettevõttesisene laiendus: Meeskonnatöö + : Koodikontrollid + : CI/CD torud + : Turvaauditid + + section Eksperdi valdamine (1 kuu) + Platvormi ekspertteadmised: Täiustatud Chrome'i API-d + : Tulemuslikkuse optimeerimine + : Arhitektuuri mallid + : Avatud lähtekoodiga panus +``` +### 🛠️ Sinu täielik laienduse arenduskomplekt + +Pärast selle triloogia läbimist valdad nüüd: +- **Brauseri arhitektuur**: Sügav arusaam, kuidas laiendused integreeruvad brauseri süsteemidega +- **Jõudlusprofiilimine**: Võime tuvastada ja parandada pudelikaelu arendajatööriistade abil +- **Asünkroonne programmeerimine**: Kaasaegsed JavaScript’i mustrid reageerivateks ja mitteblokeerivateks operatsioonideks +- **API integratsioon**: Välistest allikatest andmete pärimine koos autentimise ja veahaldusega +- **Visuaalne kujundus**: Dünaamilised UI uuendused ja Canvase-põhine graafikate loomine +- **Sõnumite edastamine**: Skriptidevaheline suhtlus laienduse arhitektuuris +- **Kasutajakogemus**: Laadimisolekud, veahaldus ja intuitiivsed interaktsioonid +- **Tootmise oskused**: Testimine, silumine ja optimeerimine pärismaailma juurutuseks + +**Reaalsed rakendused**: Sinu laienduse arendamise oskused kehtivad otseselt: +- **Progressiivsed veebirakendused**: Sarnased arhitektuuri- ja jõudlusmustrid +- **Electroni töölauarakendused**: Platvormideülene veebitehnoloogiate kasutamine +- **Mobiilsed hübriidrakendused**: Cordova/PhoneGapi arendus veebipõhiste API-de abil +- **Ettevõtte veebirakendused**: Komplekssete juhtpaneelide ja tootlikkuse tööriistade loomine +- **Chrome DevTools laiendused**: Edasijõudnud arendajatööriistad ja silumine +- **Veebipõhiste API-de integratsioon**: Igasuguste väliste teenustega suhtlevad rakendused + +**Professionaalne mõju**: Sa saad nüüd: +- **Luua** tootmisvalmis brauserilaiendusi ideest juurutuseni +- **Optimeerida** veebirakenduste jõudlust tööstusstandardsete profiilimistööriistade abil +- **Arhitektuurida** skaleeritavaid süsteeme õige vastutuse jaotusega +- **Siluda** keerulisi asünkroonseid operatsioone ja kontekstidevahelist kommunikatsiooni +- **Panustada** avatud lähtekoodiga laiendusprojektidesse ja brauseristandarditesse + +**Järgmise taseme võimalused**: +- **Chrome Web Store arendaja**: Avalda laiendusi miljonitele kasutajatele +- **Veebijõudluse insener**: Specialiseeru optimeerimisele ja kasutajakogemusele +- **Brauseriplatvormi arendaja**: Panusta brauseri mootorite arengusse +- **Laiendusraamistike looja**: Ehita tööriistu, mis aitavad teistel arendajatel +- **Arendajasuhete spetsialist**: Jaga teadmisi õpetamise ja sisuloomega + +🌟 **Saavutus saadud**: Sa oled loonud täieliku ja funktsionaalse brauserilaienduse, mis demonstreerib professionaalseid arenduspraktikaid ja tänapäevaseid veebistandardeid! + +## Kodutöö + +[Analüüsi saidi jõudlust](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüame täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks lugeda ametlikuks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste ega valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/5-browser-extension/3-background-tasks-and-performance/assignment.md b/translations/et/5-browser-extension/3-background-tasks-and-performance/assignment.md index 823f4cd7c..d14a0dbb1 100644 --- a/translations/et/5-browser-extension/3-background-tasks-and-performance/assignment.md +++ b/translations/et/5-browser-extension/3-background-tasks-and-performance/assignment.md @@ -1,23 +1,109 @@ -# Analüüsi veebisaidi jõudlust +# Analüüsi saidi jõudlust -Esita üksikasjalik aruanne veebisaidi kohta, tuues välja valdkonnad, kus jõudlus on probleemne. Analüüsi, miks sait on aeglane ja mida saaks teha selle kiirendamiseks. Ära tugine ainult brauseri tööriistadele, vaid tee uurimistööd ka teiste tööriistade kohta, mis võivad sinu aruannet täiendada. +## Ülesande ülevaade + +Jõudluse analüüs on kaasaegsete veebiarendajate jaoks oluline oskus. Selles ülesandes viid läbi põhjaliku reaalse veebisaidi jõudluse audit, kasutades nii brauseripõhiseid tööriistu kui ka kolmanda osapoole teenuseid, et tuvastada kitsaskohad ning pakkuda optimeerimisstrateegiaid. + +Sinu ülesanne on esitada üksikasjalik jõudlusaruanne, mis demonstreerib sinu arusaamist veebijõudluse põhimõtetest ja võimet kasutada professionaalseid analüüsitööriistu tõhusalt. + +## Ülesande juhised + +**Vali analüüsitav veebisait** – vali üks järgmistest valikutest: +- Populaarne sait, mida tihti kasutad (uudiste sait, sotsiaalmeedia, e-kaubandus) +- Avatud lähtekoodiga projekti veebisait (GitHubi lehed, dokumentatsioonisaidid) +- Kohaliku ettevõtte veebisait või portfoolio +- Omaenda projekt või varasem kursusetöö + +**Tee mitmetööriistaline analüüs** vähemalt kolmel erineval viisil: +- **Brauseri arendustööriistad** – kasuta Chrome/Edge Performance vahekaarti detailsseks profiilimiseks +- **Veebipõhised auditeerimistööriistad** – kasuta Lighthouse’i, GTmetrixi või WebPageTesti +- **Võrguanalüüs** – vaata ressursi laadimist, failisuurusi ja päringumustreid + +**Dokumenteeri oma leid** põhjalikus aruandes, mis sisaldab: + +### Jõudlusmõõdikute analüüs +- **Laadimisaja mõõtmised** mitmetest tööriistadest ja vaatenurkadest +- **Core Web Vitals'i** skoorid (LCP, FID, CLS) ja nende tähendus +- **Ressursside jaotus** näidates, millised varad mõjutavad kõige rohkem laadimisaega +- **Võrgu „kaskaadanalüüs“** blokeerivate ressursside tuvastamiseks + +### Probleemide tuvastamine +- **Spetsiifilised jõudluse kitsaskohad** koos toetavate andmetega +- **Põhjalik juurpõhjuste analüüs**, miks iga probleem tekib +- **Kasutajamõju hindamine**, kuidas probleemid mõjutavad päris kasutajaid +- **Prioriteedijärjestus** probleemide raskuse ja lahendamistiiside põhjal + +### Optimeerimissoovitused +- **Konkreetseid, teostatavaid parendusi** koos oodatava mõjuga +- **Rakendamisstrateegiad** iga soovitatud muudatuse jaoks +- **Kaasaegsed parimad praktikad** (nt aeglane laadimine, kompressioon jne) +- **Tööriistad ja meetodid** jõudluse pidevaks jälgimiseks + +## Uurimisnõuded + +**Ära piirdu ainult brauseri tööriistadega** – laienda analüüsi kasutades: + +**Kolmanda osapoole auditeerimisteenuseid:** +- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) – põhjalikud auditeerimised +- [GTmetrix](https://gtmetrix.com/) – jõudluse ja optimeerimise ülevaated +- [WebPageTest](https://www.webpagetest.org/) – pärismaailma testimistingimused +- [Pingdom](https://tools.pingdom.com/) – globaalne jõudluse jälgimine + +**Spetsialiseeritud analüüsitööriistad:** +- [Bundle Analyzer](https://bundlephobia.com/) – JavaScripti paketi suuruse analüüs +- [Image optimization tools](https://squoosh.app/) – pildivara optimeerimisvõimalused +- [Security headers analysis](https://securityheaders.com/) – turvapealkirjade mõju jõudlusele + +## Tulemustes esitatav vorming + +Koosta professionaalne aruanne (2–3 lehekülge), mis sisaldab: + +1. **Juhtkokkuvõte** – peamised leiud ja soovituste ülevaade +2. **Metoodika** – kasutatud tööriistad ja testimisviis +3. **Praegune jõudluse hinnang** – alusnäitajad ja mõõtmised +4. **Tuvastatud probleemid** – detailne probleemide analüüs koos toetavate andmetega +5. **Soovitused** – prioriseeritud parendusstrateegiad +6. **Rakendusplaan** – samm-sammuline optimeerimise kava + +**Lisa visuaalne tõendusmaterjal:** +- Ekraanipildid jõudlustööriistadest ja mõõdikutest +- Jõudluse andmeid näitavad tabelid või graafikud +- Võimalusel enne/järgne olukorra võrdlused +- Võrgu kaskaadid ja ressursside jaotused ## Hindamiskriteeriumid -| Kriteerium | Näidislik | Piisav | Vajab parandamist | -| ---------- | --------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------- | -| | Esitatakse aruanne, mis sisaldab üksikasju mitte ainult brauseri tööriistadest, vaid ka kolmandate osapoolte tööriistadest, kui need on saadaval | Esitatakse põhjalik aruanne | Esitatakse minimaalne aruanne | +| Kriteerium | Näidustav (90-100%) | Piisav (70-89%) | Vajab parandamist (50-69%) | +| -------- | ------------------- | ----------------- | -------------------------- | +| **Analüüsi sügavus** | Põhjalik analüüs 4+ tööriistaga, detailsete mõõdikutega, juurpõhjuste analüüs ja kasutajamõju hindamine | Hea analüüs 3 tööriistaga selgete mõõdikutega ja baastasemel probleemide tuvastamine | Põhiline analüüs 2 tööriistaga, piiratud sügavusega ja minimaalsete probleemide tuvastamisega | +| **Tööriistade mitmekesisus** | Kasutab brauseri tööriistu + 3+ kolmanda osapoole teenust võrdleva analüüsi ja igast saadud teadmistega | Kasutab brauseri tööriistu + 2 kolmanda osapoole teenust mõningase võrdleva analüüsiga | Kasutab brauseri tööriistu + 1 kolmanda osapoole teenust piiratud võrdlusega | +| **Probleemide tuvastamine** | Tuvastab 5+ konkreetset jõudlusprobleemi detailse juurpõhjuste analüüsi ja kvantifitseeritud mõjuga | Tuvastab 3-4 jõudlusprobleemi hea analüüsi ja osalise mõjuhinnanguga | Tuvastab 1-2 jõudlusprobleemi põhianalüüsiga | +| **Soovitused** | Esitab konkreetseid, teostatavaid soovitusi rakendusdetailidega, oodatava mõjuga ja kaasaegsete parimate praktikatega | Esitab häid soovitusi mõningate rakendusjuhiste ja oodatavate tulemustega | Esitab põhilisi soovitusi piiratud rakendusdetailidega | +| **Professionaalne esitus** | Hästi organiseeritud aruanne selge struktuuri, visuaalse tõenduse, juhtkokkuvõtte ja professionaalse vormindusega | Hea organiseeritus, mõningane visuaalne tõendus ja selge struktuur | Põhiline organiseeritus minimaalse visuaalse tõendusega | + +## Õpitulemused + +Selle ülesande täitmisel demonstreerid oma võimet: +- **Rakendada** professionaalseid jõudluse analüüsitööriistu ja –metoodikaid +- **Tuvastada** jõudluse kitsaskohti andmepõhise analüüsi abil +- **Analüüsida** koodi kvaliteedi ja kasutajakogemuse seost +- **Soovitada** konkreetseid ja teostatavaid optimeerimisstrateegiaid +- **Suhelda** tehnilisi leide professionaalses vormis + +See ülesanne kinnistab õpitud jõudluse kontseptsioone, arendades praktilisi oskusi, mida kasutad kogu veebiarenduskarjääri jooksul. --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algkeeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, tuleb arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument halduskeeles tuleks lugeda autoriteetseks allikaks. Kriitilise tähtsusega teabe jaoks on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/5-browser-extension/README.md b/translations/et/5-browser-extension/README.md index 271b8bfdf..9f9f64ec2 100644 --- a/translations/et/5-browser-extension/README.md +++ b/translations/et/5-browser-extension/README.md @@ -23,7 +23,7 @@ Seda laiendit saab kasutaja vajadusel käivitada, kui vormi sisestatakse API-võ ### Tunnustused -![roheline brauserilaiend](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![roheline brauserilaiend](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Tunnustused diff --git a/translations/et/5-browser-extension/solution/README.md b/translations/et/5-browser-extension/solution/README.md index d4733ee6e..3c6b5a25d 100644 --- a/translations/et/5-browser-extension/solution/README.md +++ b/translations/et/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow CO2 Signal API-d elektritarbimise jälgimiseks, looge brauserilaiendus, mis tuletab teile meelde, kui suur on teie piirkonna elektritarbimine. Selle laienduse juhuslik kasutamine aitab teil teha teadlikke otsuseid oma tegevuste kohta, lähtudes sellest teabest. -![laienduse ekraanipilt](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![laienduse ekraanipilt](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris paigaldamiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakkimata', et laadida uus laiendus. Avage 'dist' kaust, kui seda küsitakse, ja laiendus laaditakse. Selle kasutamiseks vajate CO2 Signal API jaoks API-võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map](https://www.electricitymap.org/map) kaardile (näiteks Bostonis kasutan 'US-NEISO'). -![paigaldamine](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.et.png) +![paigaldamine](../../../../translated_images/install-on-edge.78634f02842c4828.et.png) Kui API-võti ja piirkonna kood on laienduse liidesesse sisestatud, peaks brauserilaienduse ribal olev värviline täpp muutuma, et kajastada teie piirkonna energiatarbimist, ning andma teile vihjeid, millised energiamahukad tegevused oleksid sobivad. Selle 'täpi' süsteemi idee sain [Energy Lollipop laiendusest](https://energylollipop.com/) California heitkoguste jaoks. diff --git a/translations/et/5-browser-extension/solution/translation/README.fr.md b/translations/et/5-browser-extension/solution/translation/README.fr.md index 858e1bc2f..a187f63b7 100644 --- a/translations/et/5-browser-extension/solution/translation/README.fr.md +++ b/translations/et/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow CO2 Signal API-d elektritarbimise jälgimiseks, looge brauserilaiend, mis annab teile otse brauseris meeldetuletuse teie piirkonna elektritarbimise kohta. Selle ad hoc laiendi kasutamine aitab teil teha teadlikke otsuseid oma tegevuste kohta, tuginedes nendele andmetele. -![laiendi ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![laiendi ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakitud laiend' uue laiendi laadimiseks. Avage 'dist' kaust, kui seda küsitakse, ja laiend laetakse. Kasutamiseks vajate API-võtit CO2 Signal API jaoks ([hankige see e-posti teel siit](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [koodi oma piirkonna jaoks](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map'ile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO'). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.et.png) +![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) Kui API-võti ja piirkond on sisestatud laiendi liidesesse, peaks värviline punkt brauseri laienduste ribal muutuma, et kajastada teie piirkonna energiatarbimist ja anda teile märku, milliseid energiamahukaid tegevusi oleks sobiv teha. Selle 'punktide' süsteemi idee sain [Energy Lollipop laiendist](https://energylollipop.com/) California heitkoguste jaoks. diff --git a/translations/et/5-browser-extension/solution/translation/README.hi.md b/translations/et/5-browser-extension/solution/translation/README.hi.md index 8400ab085..1153a9bfb 100644 --- a/translations/et/5-browser-extension/solution/translation/README.hi.md +++ b/translations/et/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Elektritarbimise jälgimiseks kasutades tmrow CO2 Signal API-d, on loodud brauserilaiend, mis tuletab teile meelde, kui intensiivne on teie piirkonna elektritarbimine. Selle laiendi kasutamine aitab teil teha otsuseid oma tegevuste kohta, tuginedes sellele teabele. -![Laiendi ekraanipilt ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![Laiendi ekraanipilt ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat "kolme punkti" menüüd, et leida laiendite paneel. Sealt valige "Laadi lahti pakitud" ja avage 'dist' kaust, kui seda küsitakse. Laiend laaditakse. Selle kasutamiseks vajate CO2 Signal API-d ([saate API võtme e-posti teel siit](https://www.co2snal.com/) – sisestage oma e-post selle lehe kastikesse) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones) [Electricity Map](https://www.electricitymap.org/map) lehelt (näiteks Bostonis kasutan 'US-NEISO'). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.et.png) +![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) Kui API võti ja piirkond on laiendi liidesesse sisestatud, peaks brauserilaiendi ribal olev värviline täpp muutuma, et kajastada teie piirkonna energiatarbimist, ning andma teile indikatsiooni, millised energiamahukad tegevused sobivad teie kasutuseks. Selle "täpi" süsteemi idee sain California heitkoguste jaoks loodud [Energy Lollipop laiendist](https://energylollipop.com/). diff --git a/translations/et/5-browser-extension/solution/translation/README.it.md b/translations/et/5-browser-extension/solution/translation/README.it.md index 000f2f5b9..a390052db 100644 --- a/translations/et/5-browser-extension/solution/translation/README.it.md +++ b/translations/et/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutame tmrow Signal CO2 API-d, et jälgida elektritarbimist ja luua brauserilaiend, mis annab otse brauseris meeldetuletuse selle kohta, kui suur on elektritarbimise koormus teie piirkonnas. Selle spetsiaalse laiendi kasutamine aitab hinnata oma tegevusi nende andmete põhjal. -![laiendi ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![laiendi ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauserisse installimiseks kasutage brauseri paremas ülanurgas asuvat "kolme punkti" menüüd, et leida laiendite paneel. Kui see pole veel aktiveeritud, lülitage sisse arendajarežiim (vasakus alanurgas). Valige "Laadi lahti pakitud", et laadida uus laiend. Avage viipas kaust "dist" ja laiend laaditakse. Kasutamiseks vajate CO2 Signal API võtmet (saate selle [siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [elektrikaardile](https://www.electricitymap.org/map) (näiteks Bostonis on see "US-NEISO"). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.et.png) +![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) Kui API võti ja piirkond on laiendi liideses sisestatud, peaks brauserilaiendi tööriistaribal olev värviline punkt muutuma, et kajastada piirkonna energiatarbimist, ning andma vihjeid selle kohta, millised suure energiatarbimisega tegevused oleksid sobivad. Selle "punktisüsteemi" kontseptsioon on inspireeritud [Energy Lollipop laiendist](https://energylollipop.com/), mis jälgib California heitkoguseid. diff --git a/translations/et/5-browser-extension/solution/translation/README.ja.md b/translations/et/5-browser-extension/solution/translation/README.ja.md index 6f3ab10ad..ba89ca002 100644 --- a/translations/et/5-browser-extension/solution/translation/README.ja.md +++ b/translations/et/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ehita brauserilaiendus, mis kasutab tmrow CO2 Signal API-d, et jälgida elektritarbimist ja kuvada meeldetuletusena, kui palju energiat sinu piirkonnas kasutatakse. Selle laienduse ad hoc kasutamine võimaldab sul oma tegevusi vastavalt sellele teabele planeerida. -![laienduse ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![laienduse ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i installimiseks leia brauseri paremas ülanurgas olevast "kolme punkti" menüüst "Laiendused" paneel. Sealt vali "Load Unpacked" ja laadi uus laiendus. Kui avaneb prompt, ava "dist" kaust, et laiendus laadida. Kasutamiseks vajad CO2 Signal API API-võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisesta oma e-post selle lehe kastikesse) ja [Electricity Map](https://www.electricitymap.org/map) vastavat [koodi oma piirkonna jaoks](http://api.electricitymap.org/v3/zones) (näiteks Bostonis kasutatakse 'US-NEISO'). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.et.png) +![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) Kui sisestad API-võtme ja piirkonna laienduse liidesesse, muutub brauseri laiendusribal kuvatav värviline täpp, mis peegeldab sinu piirkonna energiatarbimist ja annab märku, milliseid energiat nõudvaid tegevusi on sobiv teha. Selle "täpi" süsteemi idee sain California osariigi emissioonide jaoks loodud [Energy Lollipop laiendusest](https://energylollipop.com/). diff --git a/translations/et/5-browser-extension/solution/translation/README.ms.md b/translations/et/5-browser-extension/solution/translation/README.ms.md index 1cf02a197..a1622c091 100644 --- a/translations/et/5-browser-extension/solution/translation/README.ms.md +++ b/translations/et/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow CO2 Signaali API-d elektritarbimise jälgimiseks, loo brauserilaiendus, mis annab sulle brauseris märguandeid selle kohta, kui suur on sinu piirkonna elektritarbimise koormus. Selle laienduse kasutamine aitab sul teha teadlikumaid otsuseid oma tegevuste osas, tuginedes sellele teabele. -![brauserilaienduse ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![brauserilaienduse ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i paigaldamiseks kasuta brauseri paremas ülanurgas asuvat kolme punktiga menüüd, et leida Laienduste paneel. Sealt vali 'Load Unpacked', et laadida uus laiendus. Ava 'dist' kaust, kui seda küsitakse, ja laiendus laaditakse. Kasutamiseks vajad CO2 Signaali API võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisesta oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Mapile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO'). -![allalaadimine](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.et.png) +![allalaadimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) Kui API võti ja piirkond on laienduse liidesesse sisestatud, muutub brauserilaienduse tööriistaribal olev värviline punkt, et kajastada sinu piirkonna energiatarbimist, ning annab sulle soovitusi, milliseid tegevusi on sobiv teha. Selle 'punktisüsteemi' kontseptsiooni sain inspiratsiooniks [Energy Lollipop brauserilaiendusest](https://energylollipop.com/) California heitkoguste jaoks. diff --git a/translations/et/5-browser-extension/start/README.md b/translations/et/5-browser-extension/start/README.md index 0d04af545..d135e25bb 100644 --- a/translations/et/5-browser-extension/start/README.md +++ b/translations/et/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow'i CO2 Signal API-d elektritarbimise jälgimiseks, loo brauserilaiendus, mis annab sulle otse brauseris meeldetuletuse selle kohta, kui suur on sinu piirkonna elektritarbimise koormus. Selle laienduse juhuslik kasutamine aitab sul teha teadlikke otsuseid oma tegevuste osas, lähtudes sellest infost. -![laienduse ekraanipilt](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.et.png) +![laienduse ekraanipilt](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris paigaldamiseks kasuta brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida Laienduste paneel. Sealt vali 'Laadi lahti pakkimata', et laadida uus laiendus. Avanevas dialoogis vali 'dist' kaust ja laiendus laetakse. Kasutamiseks vajad CO2 Signal API jaoks API-võtit ([hankige see e-posti teel siit](https://www.co2signal.com/) - sisesta oma e-post sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map](https://www.electricitymap.org/map) andmetele (näiteks Bostonis kasutan 'US-NEISO'). -![paigaldamine](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.et.png) +![paigaldamine](../../../../translated_images/install-on-edge.78634f02842c4828.et.png) Kui API-võti ja piirkonna kood on sisestatud laienduse liidesesse, peaks brauserilaienduse ribal olev värviline täpp muutuma, et kajastada sinu piirkonna energiatarbimist. See annab sulle vihje, millised energiamahukad tegevused oleksid sobivad. Selle 'täpi' süsteemi idee sain [Energy Lollipop laiendusest](https://energylollipop.com/) California heitmete jaoks. diff --git a/translations/et/6-space-game/1-introduction/README.md b/translations/et/6-space-game/1-introduction/README.md index 56a9ac16d..3695ff7fb 100644 --- a/translations/et/6-space-game/1-introduction/README.md +++ b/translations/et/6-space-game/1-introduction/README.md @@ -1,50 +1,142 @@ -# Kosmosemängu loomine, 1. osa: Sissejuhatus - -![video](../../../../6-space-game/images/pewpew.gif) - +# Kosmose mängu loomine Osa 1: Sissejuhatus + +```mermaid +journey + title Sinu Mänguarenduse Teekond + section Alus + Õpi mängu arhitektuuri: 3: Student + Mõista pärimist: 4: Student + Uuri koostist: 4: Student + section Kommunikatsioon + Ehita pub/sub süsteem: 4: Student + Kujunda sündmuste voog: 5: Student + Ühenda komponendid: 5: Student + section Rakendus + Loo mänguobjekte: 5: Student + Rakenda mustreid: 5: Student + Planeeri mängu struktuur: 5: Student +``` +![Kosmose mängu animatsioon, mis näitab mängu käiku](../../../../6-space-game/images/pewpew.gif) + +Nii nagu NASA missioonikontroll koordineerib mitut süsteemi kosmoselennu ajal, ehitame me kosmose mängu, mis näitab, kuidas programmi erinevad osad sujuvalt koos töötada saavad. Loo midagi, mida saad ka päriselt mängida, ja samal ajal õpid olulisi programmeerimiskontseptsioone, mis kehtivad igale tarkvaraprojektile. + +Uurime kahte põhilist lähenemist koodi organiseerimisel: pärimist ja kompositsiooni. Need pole pelgalt akadeemilised mõisted – need on samad mustrid, mis juhivad kõike alates videomängudest kuni pangandussüsteemideni. Rakendame ka kommunikatsioonisüsteemi nimega pub/sub, mis töötab nagu kosmoselaevade sidevõrgustikud, võimaldades komponentidel infot jagada ilma omavahelisi sõltuvusi tekitamata. + +Selle sarja lõpuks saad aru, kuidas luua rakendusi, mis võivad skaleeruda ja areneda – olgu tegemist mängude, veebirakenduste või mõne muu tarkvarasüsteemiga. + +```mermaid +mindmap + root((Mängu arhitektuur)) + Object Organization + Pärandamine + Kompositsioon + Klasside hierarhiad + Käitumise segamine + Communication Patterns + Pub/Sub süsteem + Sündmuste saatjad + Sõnumite edastamine + Õhuke seotus + Game Objects + Omadused (x, y) + Käitumised (liigu, põrku) + Elutsükli haldus + Oleku haldus + Design Patterns + Tehase funktsioonid + Vaataja muster + Komponentide süsteem + Sündmustest juhitud arhitektuur + Scalability + Moodulpõhine disain + Hooldatav kood + Testimise strateegiad + Jõudluse optimeerimine +``` ## Eelloengu viktoriin [Eelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/29) -### Pärimine ja kompositsioon mänguarenduses +## Pärimine ja kompositsioon mänguarenduses -Varasemates tundides ei olnud vaja palju muretseda rakenduste arhitektuuri kujundamise pärast, kuna projektid olid väga väikese ulatusega. Kuid kui rakendused kasvavad suuruse ja ulatuse poolest, muutuvad arhitektuurilised otsused olulisemaks. JavaScriptis on suuremate rakenduste loomiseks kaks peamist lähenemisviisi: *kompositsioon* või *pärimine*. Mõlemal on omad plussid ja miinused, kuid selgitame neid mängu kontekstis. +Kui projektid muutuvad keerukamaks, muutub koodi organiseerimine kriitiliseks. See, mis algab lihtsa skriptina, võib muutuda raskesti hooldatavaks ilma korraliku struktuurita – nagu Apollo missioonid nõudsid tuhandete komponentide hoolikat koordineerimist. -✅ Üks kuulsamaid programmeerimisraamatuid räägib [disainimustritest](https://en.wikipedia.org/wiki/Design_Patterns). +Uurime kahte põhilist lähenemist koodi organiseerimisel: pärimist ja kompositsiooni. Igal on erinevad eelised ning mõlema mõistmine aitab valida sobiva lähenemise erinevates olukordades. Näitame neid kontseptsioone meie kosmose mängu näitel, kus kangelased, vaenlased, võimed ja teised objektid peavad tõhusalt suhtlema. -Mängus on `mänguobjektid`, mis on ekraanil eksisteerivad objektid. See tähendab, et neil on asukoht kaardil, mida iseloomustavad `x` ja `y` koordinaadid. Mängu arendades märkad, et kõigil mänguobjektidel on standardne omadus, mis on ühine igale mängule, nimelt elemendid, mis on: +✅ Üks kuulsamaid programmeerimisraamatuid käsitleb [disainimustreid](https://en.wikipedia.org/wiki/Design_Patterns). -- **asukohapõhised** Enamik, kui mitte kõik, mänguelemendid on asukohapõhised. See tähendab, et neil on asukoht, `x` ja `y`. -- **liikuvad** Need on objektid, mis saavad liikuda uude asukohta. Tavaliselt on need kangelased, koletised või NPC-d (mitte-mängija tegelased), kuid mitte näiteks staatilised objektid nagu puud. -- **isehävitavad** Need objektid eksisteerivad ainult teatud aja jooksul, enne kui nad end kustutamiseks ette valmistavad. Tavaliselt esindab seda `dead` või `destroyed` boolean, mis annab mängumootorile märku, et seda objekti ei tohiks enam renderdada. -- **jahtumisaeg** 'Jahtumisaeg' on tüüpiline omadus lühiajaliste objektide seas. Tüüpiline näide on tekst või graafiline efekt, nagu plahvatus, mida peaks nägema vaid mõne millisekundi jooksul. +Igas mängus on sul `mänguobjektid` – interaktiivsed elemendid, mis täidavad sinu mängumaailma. Kangelased, vaenlased, võimed ja visuaalsed efektid on kõik mänguobjektid. Igaüks asub ekraanil kindlatel `x` ja `y` koordinaatidel, nagu punkti kandmine koordinaatteljel. -✅ Mõtle mängule nagu Pac-Man. Kas suudad tuvastada neli ülaltoodud objektitüüpi selles mängus? +Hoolimata visuaalsetest erinevustest jagavad need objektid sageli põhilisi käitumisi: -### Käitumise väljendamine +- **Nad eksisteerivad kuskil** – Iga objekti x ja y koordinaadid ütlevad, kus mäng seda joonistab +- **Paljud suudavad liikuda** – Kangelased jooksid, vaenlased jooksevad taga, kuulid lendavad üle ekraani +- **Neil on eluiga** – Mõned jäävad igaveseks, teised (näiteks plahvatused) ilmuvad lühidalt ja kaovad +- **Nad reageerivad sündmustele** – Kui asjad kokku põrkuvad, võimed kogutakse, terviseribad uuenevad -Kõik, mida me ülal kirjeldasime, on käitumised, mida mänguobjektid võivad omada. Kuidas me neid kodeerime? Me saame väljendada seda käitumist meetoditena, mis on seotud kas klasside või objektidega. +✅ Mõtle mängule nagu Pac-Man. Kas suudad selles mängus tuvastada ülaltoodud nelja objekti tüüpi? -**Klassid** +```mermaid +classDiagram + class GameObject { + +x: number + +y: number + +type: string + +exists_somewhere() + } + + class MovableObject { + +liiguSiia(x, y) + +saab_liikuda() + } + + class TemporaryObject { + +eluaeg: number + +omab_eluaega() + } + + class InteractiveObject { + +kokkupõrkel() + +reaktsioneerib_asjadele() + } + + GameObject <|-- MovableObject + GameObject <|-- TemporaryObject + GameObject <|-- InteractiveObject + + MovableObject <|-- Hero + MovableObject <|-- Enemy + MovableObject <|-- Bullet + + TemporaryObject <|-- PowerUp + TemporaryObject <|-- Explosion + + InteractiveObject <|-- Collectible + InteractiveObject <|-- Obstacle +``` +### Käitumise väljendamine koodi kaudu -Idee on kasutada `klasse` koos `pärimisega`, et lisada klassile teatud käitumine. +Nüüd, kui mõistad, milliseid ühiseid käitumisi mänguobjektid jagavad, uurime, kuidas neid käitumisi JavaScriptis rakendada. Objektide käitumist saab väljendada meetodite kaudu, mis on seotud kas klasside või üksikute objektidega, ja valida on mitme lähenemise vahel. -✅ Pärimine on oluline kontseptsioon, mida mõista. Loe rohkem [MDN-i artiklist pärimise kohta](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). +**Klassipõhine lähenemine** -Koodis väljendatuna võib mänguobjekt tavaliselt välja näha selline: +Klassid ja pärimine pakuvad struktureeritud lähenemist mänguobjektide organiseerimiseks. Nagu Carl Linnaeuse taksonoomiline klassifikatsioonisüsteem, alustad baas-klassi omadustega ning loome spetsialiseeritud klasse, mis pärivad neid põhifunktsioone ja lisavad spetsiifilised võimed. -```javascript +✅ Pärimine on oluline mõiste, mida mõista. Loe rohkem [MDN artiklist pärimise kohta](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). -//set up the class GameObject +Siin on, kuidas saad mänguobjekte klasside ja pärimise abil rakendada: + +```javascript +// Samm 1: Loo baas GameObject klass class GameObject { constructor(x, y, type) { this.x = x; @@ -52,187 +144,519 @@ class GameObject { this.type = type; } } +``` -//this class will extend the GameObject's inherent class properties +**Võtame selle samm-sammult lahti:** +- Loome põhitempli, mida iga mänguobjekt saab kasutada +- Konstruktor salvestab, kus objekt asub (`x`, `y`) ja mis tüüpi see on +- See saab aluseks, millele kõik sinu mänguobjektid toetuvad + +```javascript +// 2. samm: Lisa liikumisvõimalus pärimise kaudu class Movable extends GameObject { - constructor(x,y, type) { - super(x,y, type) + constructor(x, y, type) { + super(x, y, type); // Kutsu vanema konstruktor } -//this movable object can be moved on the screen + // Lisa võime liikuda uude positsiooni moveTo(x, y) { this.x = x; this.y = y; } } +``` -//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits +**Ülal kandisime ellu:** +- **Laiendasime** GameObject klassi, et lisada liikumisfunktsionaalsus +- **Kutsusime** vanema konstruktori `super()` abil pärandatud omaduste initsialiseerimiseks +- **Lisatasime** `moveTo()` meetodi, mis uuendab objekti asukohta + +```javascript +// Samm 3: Loo spetsiifilised mänguobjektide tüübid class Hero extends Movable { - constructor(x,y) { - super(x,y, 'Hero') + constructor(x, y) { + super(x, y, 'Hero'); // Määra tüüp automaatselt } } -//this class, on the other hand, only inherits the GameObject properties class Tree extends GameObject { - constructor(x,y) { - super(x,y, 'Tree') + constructor(x, y) { + super(x, y, 'Tree'); // Puudel pole liikumist vaja } } -//a hero can move... -const hero = new Hero(); -hero.moveTo(5,5); +// Samm 4: Kasuta oma mänguobjekte +const hero = new Hero(0, 0); +hero.moveTo(5, 5); // Kangelane saab liikuda! -//but a tree cannot -const tree = new Tree(); +const tree = new Tree(10, 15); +// tree.moveTo() tekitaks vea - puud ei saa liikuda ``` -✅ Võta paar minutit, et kujutada ette Pac-Mani kangelast (näiteks Inky, Pinky või Blinky) ja kuidas seda JavaScriptis kirjutada. +**Nende kontseptsioonide mõistmine:** +- **Loodab** spetsialiseeritud objektitüüpe, mis pärivad sobivad käitumised +- **Näitab**, kuidas pärimine võimaldab valida, milliseid funktsioone kaasata +- **Kuvab**, et kangelased võivad liikuda, samas puuduvad puudel see võimekus +- **Illustreerib**, kuidas klassihierarhia takistab sobimatuid toiminguid + +✅ Võta mõni minut ja kujuta ette Pac-Man kangelast (näiteks Inky, Pinky või Blinky) ja kuidas seda JavaScriptis kirjutada. -**Kompositsioon** +**Kompositsioonilähenemine** -Teine viis objektide pärimise käsitlemiseks on kasutada *kompositsiooni*. Siis väljendavad objektid oma käitumist järgmiselt: +Kompositsioon järgib modulaarset disainifilosoofiat, sarnaselt inseneridele, kes kujundavad kosmoselaevu vahetatavate komponentidega. Läbi vanema klassi pärimise asemel kombineerid spetsiifilisi käitumisi, et luua objekt, millel on täpselt vajalikud funktsioonid. See lähenemine pakub paindlikkust ilma jäikade hierarhiliste piiranguteta. ```javascript -//create a constant gameObject +// 1. samm: Loo baas käitumise objektid const gameObject = { x: 0, y: 0, type: '' }; -//...and a constant movable const movable = { moveTo(x, y) { this.x = x; this.y = y; } -} -//then the constant movableObject is composed of the gameObject and movable constants -const movableObject = {...gameObject, ...movable}; +}; +``` + +**See kood teeb järgmist:** +- **Defineerib** baasmänguobjekti positsiooni ja tüübi omadustega +- **Loo** eraldi `movable` käitumisobjekti liikumisfunktsiooniga +- **Eraldab** vastutused hoides positsiooniandmed ja liikumisloogika sõltumatuna + +```javascript +// Samm 2: Koosta objekte, kombineerides käitumisi +const movableObject = { ...gameObject, ...movable }; -//then create a function to create a new Hero who inherits the movableObject properties +// Samm 3: Loo erinevate objektitüüpide jaoks tehasefunktsioonid function createHero(x, y) { return { ...movableObject, x, y, type: 'Hero' - } + }; } -//...and a static object that inherits only the gameObject properties + function createStatic(x, y, type) { return { - ...gameObject + ...gameObject, x, y, type - } + }; } -//create the hero and move it -const hero = createHero(10,10); -hero.moveTo(5,5); -//and create a static tree which only stands around -const tree = createStatic(0,0, 'Tree'); ``` -**Millist mustrit peaksin kasutama?** +**Ülal tegime järgmist:** +- **Kombineerisime** baasiomadused ja liikumiskäitumise leviku süntaksi abil +- **Loomis** tehasefunktsioonid, mis tagastavad kohandatud objekte +- **Võimaldas** paindliku objektide loomise ilma jäikade klassihierarhiateta +- **Lubas** objektidel omada täpselt vajalikke käitumisi -Valik on sinu. JavaScript toetab mõlemat paradigmat. +```javascript +// Samm 4: Loo ja kasuta oma kombineeritud objekte +const hero = createHero(10, 10); +hero.moveTo(5, 5); // Töötas suurepäraselt! --- +const tree = createStatic(0, 0, 'Tree'); +// tree.moveTo() on määratlemata - liikumiskäitumist ei loodud +``` -Teine mänguarenduses levinud muster käsitleb mängu kasutajakogemuse ja jõudluse haldamise probleemi. +**Olulised punktid:** +- **Komponib** objekte, segades käitumisi pärimise asemel +- **Pakub** suuremat paindlikkust kui jäigad pärimishierarhiad +- **Lubab** objektidel olla täpselt vajalikud omadused +- **Kasutab** kaasaegset JavaScripti leviku süntaksit puhtaks objektide kombineerimiseks +``` -## Pub/sub muster +**Which Pattern Should You Choose?** + +**Which Pattern Should You Choose?** + +```mermaid +quadrantChart + title Code Organization Patterns + x-axis Simple --> Complex + y-axis Rigid --> Flexible + quadrant-1 Advanced Composition + quadrant-2 Hybrid Approaches + quadrant-3 Basic Inheritance + quadrant-4 Modern Composition + + Class Inheritance: [0.3, 0.2] + Interface Implementation: [0.6, 0.4] + Mixin Patterns: [0.7, 0.7] + Pure Composition: [0.8, 0.9] + Factory Functions: [0.5, 0.8] + Prototype Chain: [0.4, 0.3] +``` -✅ Pub/Sub tähistab 'publish-subscribe' (avaldamine-tellimine). +> 💡 **Näpunäide**: Mõlemal mustril on oma koht moodsa JavaScripti arenduses. Klassid sobivad hästi selgete hierarhiate jaoks, kompositsioon tõuseb esile maksimaalse paindlikkuse puhul. +> +**Millal kumbagi kasutada:** +- **Vali** pärimine kui sul on selged "on-üks-..." suhted (näiteks kangelane *on-üks* liigutatav objekt) +- **Kasuta** kompositsiooni, kui vajad "omab-" suhteid (näiteks kangelane *omab* liikumisvõimet) +- **Arvesta** oma meeskonna eelistustega ja projekti nõuetega +- **Pea meeles**, et võid sama rakenduse sees mõlemat lähenemist kombineerida + +### 🔄 **Pedagoogiline seisak** +**Objektide organiseerimise arusaam**: Enne kommunikatsioonimustrite juurde liikumist veendu, et oskad: +- ✅ Selgitada erinevust pärimise ja kompositsiooni vahel +- ✅ Tuvastada, millal kasutada klasse versus tehasefunktsioone +- ✅ Mõista, kuidas pärimisel töötab `super()` märksõna +- ✅ Tunda ära iga lähenemise eeliseid mänguarenduses + +**Kiire enese test**: Kuidas looksid lendava vaenlase, kes nii liigub kui lendab? +- **Pärimise lähenemine**: `class FlyingEnemy extends Movable` +- **Kompositsiooni lähenemine**: `{ ...movable, ...flyable, ...gameObject }` + +**Tegelik maailm**: Need mustrid on kõikjal: +- **React komponendid**: Props (kompositsioon) vs klassipärimine +- **Mängumootorid**: Entiteedi-komponendi süsteemid kasutavad kompositsiooni +- **Mobiilirakendused**: UI raamistikud kasutavad sageli pärimishierarhiaid + +## Kommunikatsioonimustrid: Pub/Sub süsteem + +Kui rakendused muutuvad keerukaks, muutub komponentidevaheline kommunikatsioon keerukaks hallata. Avaldamise- tellimise muster (pub/sub) lahendab selle probleemi, kasutades sama põhimõtet nagu raadiolainete levitus – üks saatja võib jõuda mitme vastuvõtjani ilma, et ta teaks kes kuulavad. + +Mõtle, mis juhtub, kui kangelane saab vigastuse: terviseriba uuendatakse, mängitakse heliefekte, ilmub visuaalne tagasiside. Pub/sub võimaldab kangelasel avaldada "vigastuse saamine" sõnumit. Iga süsteem, mis peab reageerima, saab sellisele sõnumile tellida ja vastavalt tegutseda. + +✅ **Pub/Sub** tähendab 'publish-subscribe' ehk avalda-telli + +```mermaid +flowchart TD + A[Sankari Saab Kahju] --> B[Avalda: HERO_DAMAGED] + B --> C[Sündmuste Süsteem] + + C --> D[Tervise Riba Tellija] + C --> E[Helisüsteemi Tellija] + C --> F[Visuaalefektide Tellija] + C --> G[Saalime Süsteemi Tellija] + + D --> H[Uuenda Tervise Kuvamist] + E --> I[Mängi Kahju Heli] + F --> J[Näita Punast Vilkumist] + G --> K[Kontrolli Ellujäämise Saavutusi] + + style A fill:#ffebee + style B fill:#e1f5fe + style C fill:#e8f5e8 + style H fill:#fff3e0 + style I fill:#fff3e0 + style J fill:#fff3e0 + style K fill:#fff3e0 +``` +### Pub/Sub arhitektuuri mõistmine + +Pub/sub muster hoiab sinu rakenduse eri osad lahtiselt seotud, mis tähendab, et need võivad töötada koos ilma otseste sõltuvusteta. See lahutus teeb su koodi paremini hooldatavaks, testitavaks ja paindlikuks muutuste osas. -See muster käsitleb ideed, et sinu rakenduse erinevad osad ei peaks üksteisest teadlikud olema. Miks? See muudab üldise ülevaate saamise palju lihtsamaks, kui erinevad osad on eraldatud. Samuti muudab see käitumise äkilise muutmise lihtsamaks, kui seda vaja on. Kuidas me seda saavutame? Me teeme seda, luues mõned kontseptsioonid: +**Olulised osalejad pub/sub-is:** +- **Sõnumid** – Lihtsad tekstisildid nagu `'PLAYER_SCORED'`, mis kirjeldavad, mis juhtus (pluss lisainfo) +- **Avaldajad** – Objektid, kes hüüavad "Midagi juhtus!" kõigile, kes kuulavad +- **Tellijad** – Objektid, kes ütlevad "Mind huvitab see sündmus" ja reageerivad, kui see toimub +- **Sündmuste süsteem** – Vahepealne, mis tagab, et sõnumid jõuavad õigete kuulajateni -- **sõnum**: Sõnum on tavaliselt tekstistring, millele on lisatud valikuline sisu (andmed, mis selgitavad, millest sõnum räägib). Tüüpiline sõnum mängus võib olla `KEY_PRESSED_ENTER`. -- **avaldaja**: See element *avaldab* sõnumi ja saadab selle kõigile tellijatele. -- **tellija**: See element *kuulab* konkreetseid sõnumeid ja täidab selle sõnumi vastuvõtmise tulemusena mingi ülesande, näiteks laseb laserit. +### Sündmuste süsteemi loomine -Rakendus on küll väike, kuid muster on väga võimas. Siin on, kuidas seda saab rakendada: +Teeme lihtsa, kuid võimsa sündmuste süsteemi, mis demonstreerib neid kontseptsioone: ```javascript -//set up an EventEmitter class that contains listeners +// Samm 1: Loo EventEmitter klass class EventEmitter { constructor() { - this.listeners = {}; + this.listeners = {}; // Säilita kõik sündmuste kuulajad } -//when a message is received, let the listener to handle its payload + + // Registreeri kuulaja konkreetse sõnumitüübi jaoks on(message, listener) { if (!this.listeners[message]) { this.listeners[message] = []; } this.listeners[message].push(listener); } -//when a message is sent, send it to a listener with some payload + + // Saada sõnum kõigile registreeritud kuulajatele emit(message, payload = null) { if (this.listeners[message]) { - this.listeners[message].forEach(l => l(message, payload)) + this.listeners[message].forEach(listener => { + listener(message, payload); + }); } } } - ``` -Ülaltoodud koodi kasutamiseks saame luua väga väikese rakenduse: +**Eraldame siin toimuvat:** +- **Loodud** keskne sündmuste haldussüsteem lihtsa klassi abil +- **Hoiab** kuulajaid objektis, mis on korraldatud sõnumitüübi järgi +- **Registreerib** uusi kuulajaid `on()` meetodi kaudu +- **Saadab** sõnumeid kõikidele huvitatud kuulajatele `emit()` abil +- **Toetab** valikulisi andmepakette asjakohase info edastamiseks + +### Kõike koos: praktiline näide + +Vaatame seda toimimas! Loome lihtsa liikumissüsteemi, mis näitab, kui puhas ja paindlik pub/sub võib olla: ```javascript -//set up a message structure +// Samm 1: Määratle oma sõnumitüübid const Messages = { - HERO_MOVE_LEFT: 'HERO_MOVE_LEFT' + HERO_MOVE_LEFT: 'HERO_MOVE_LEFT', + HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT', + ENEMY_SPOTTED: 'ENEMY_SPOTTED' }; -//invoke the eventEmitter you set up above + +// Samm 2: Loo oma sündmuste süsteem ja mänguobjektid const eventEmitter = new EventEmitter(); -//set up a hero -const hero = createHero(0,0); -//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it +const hero = createHero(0, 0); +``` + +**See kood teeb järgmist:** +- **Defineerib** konstantide objekti, et vältida kirjavigu sõnuminimedes +- **Loo** sündmuste emitteri instantsi kogu kommunikatsiooni haldamiseks +- **Alustab** kangelase objektiga stardiasukohas + +```javascript +// Samm 3: Seadistage sündmuste kuulajad (tellijad) eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { - hero.move(5,0); + hero.moveTo(hero.x - 5, hero.y); + console.log(`Hero moved to position: ${hero.x}, ${hero.y}`); }); -//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left -window.addEventListener('keyup', (evt) => { - if (evt.key === 'ArrowLeft') { - eventEmitter.emit(Messages.HERO_MOVE_LEFT) - } +eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => { + hero.moveTo(hero.x + 5, hero.y); + console.log(`Hero moved to position: ${hero.x}, ${hero.y}`); }); ``` -Ülal ühendame klaviatuuri sündmuse, `ArrowLeft`, ja saadame `HERO_MOVE_LEFT` sõnumi. Kuulame seda sõnumit ja liigutame selle tulemusena `kangelast`. Selle mustri tugevus seisneb selles, et sündmuste kuulaja ja kangelane ei tea üksteisest. Sa saad `ArrowLeft` ümber kaardistada `A` klahvile. Lisaks oleks võimalik teha `ArrowLeft`-iga midagi täiesti erinevat, tehes mõned muudatused eventEmitteri `on` funktsioonis: +**Ülal tegime järgmist:** +- **Registreerisime** sündmuste kuulajad, mis reageerivad liikumissõnumitele +- **Uuendasime** kangelase positsiooni liikumissuuna põhjal +- **Lisatasime** konsoolilogimise, et jälgida kangelase positsiooni muutusi +- **Eraldasime** liikumisloogika sisendi käsitlemisest ```javascript -eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { - hero.move(5,0); +// Samm 4: Ühenda klaviatuuri sisend sündmustega (väljastajad) +window.addEventListener('keydown', (event) => { + switch(event.key) { + case 'ArrowLeft': + eventEmitter.emit(Messages.HERO_MOVE_LEFT); + break; + case 'ArrowRight': + eventEmitter.emit(Messages.HERO_MOVE_RIGHT); + break; + } }); ``` -Kui asjad muutuvad keerulisemaks, kui sinu mäng kasvab, jääb see muster sama keerukuse tasemele ja sinu kood jääb puhtaks. Seda mustrit on tõesti soovitatav kasutada. +**Mõistame järgmisi kontseptsioone:** +- **Ühendab** klaviatuurisisendi mängusündmustega ilma tugeva sidumiseta +- **Võimaldab** sisendsüsteemil mänguobjektidega kaudselt suhelda +- **Lubab** mitmel süsteemil sama klaviatuurisündmusele reageerida +- **Lihtsustab** klahvikomplektide muutmist või uute sisendimeetodite lisamist + +```mermaid +sequenceDiagram + participant User + participant Keyboard + participant EventEmitter + participant Hero + participant SoundSystem + participant Camera + + User->>Keyboard: Vajutab ArrowLeft + Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT') + EventEmitter->>Hero: Liigu vasakule 5 pikslit + EventEmitter->>SoundSystem: Mängi sammude heli + EventEmitter->>Camera: Jälgi kangelast + + Hero->>Hero: Uuenda asukohta + SoundSystem->>SoundSystem: Mängi heli + Camera->>Camera: Kohanda vaateakent +``` +> 💡 **Näpunäide**: Selle mustri ilu on paindlikkus! Saad lihtsalt lisada heliefekte, ekraani värinat või osakeste efekte – lisa ainult uusi sündmuste kuulajaid, ilma et peaks olemasolevat klaviatuuri või liikumise koodi muutma. +> +**Miks see lähenemine on suurepärane:** +- Uute funktsioonide lisamine on ülilihtne – lihtsalt kuula sind huvitavaid sündmusi +- Mitmed asjad saavad samale sündmusele reageerida ilma segamise riskita +- Testimine muutub märksa lihtsamaks, sest iga osa töötab iseseisvalt +- Kui midagi katki läheb, tead täpselt, kust otsida + +### Miks pub/sub tõhusalt skaleerub + +Pub/sub muster hoiab lihtsuse alles, kui rakendused muutuvad keerukaks. Olgu tegemist kümnete vaenlastega, dünaamilise kasutajaliidese värskendustega või helisüsteemidega – muster käitleb kasvavat ulatust ilma arhitektuurilisi muudatusi tegemata. Uued funktsioonid integreeruvad olemasolevasse sündmuste süsteemi, mõjutamata senist funktsionaalsust. + +> ⚠️ **Levinud viga**: Ära loo liiga palju erisõnumi tüüpe varakult. Alusta üldistest kategooriatest ja täpsusta neid vastavalt mängu vajadustele. +> +**Parimad praktikad:** +- **Grupi** seotud sõnumid loogilistesse kategooriatesse +- **Kasuta** kirjelduvaid nimesid, mis selgelt näitavad, mis juhtus +- **Hoidke** sõnumi andmepaketid lihtsad ja keskendunud +- **Dokumenteerige** oma sõnumitüübid meeskonnatöö jaoks + +### 🔄 **Pedagoogiline seisak** +**Sündmustepõhise arhitektuuri mõistmine**: Kontrolli oma arusaamist kogu süsteemist: +- ✅ Kuidas pub/sub muster takistab tugevat sidumist komponentide vahel? +- ✅ Miks on ürituspõhise arhitektuuriga lihtsam uusi funktsioone lisada? +- ✅ Millist rolli mängib EventEmitter kommunikatsioonis? +- ✅ Kuidas sõnumikonstandid aitavad vältida vigu ja parandavad hooldatavust? + +**Disain väljakutse**: Kuidas lahendaksid järgmised mängustsenaariumid pub/sub abil? +1. **Vaenlane sureb**: Uuenda skoori, mängi heli, genereeri võime, eemalda ekraanilt +2. **Tase lõpetatud**: Peata muusika, näita kasutajaliidest, salvesta edenemine, laadi järgmine tase +3. **Võime korjatud**: Paranda võimed, uuenda kasutajaliidest, mängi efekti, alusta taimerit + +**Professionaalne seos**: See muster on olemas: +- **Eesliidese raamistikud**: React/Vue sündmusesüsteemid +- **Tagatöö teenused**: Mikroteenuste kommunikatsioon +- **Mängumootorid**: Unity sündmuste süsteem +- **Mobiiliarendus**: iOS/Android teatamissüsteemid --- -## 🚀 Väljakutse - -Mõtle, kuidas pub-sub muster võiks mängu täiustada. Millised osad peaksid sündmusi avaldama ja kuidas peaks mäng neile reageerima? Nüüd on sinu võimalus olla loov, mõeldes välja uue mängu ja kuidas selle osad võiksid käituda. +## GitHub Copilot Agendi väljakutse 🚀 -## Järelloengu viktoriin +Kasuta agendi režiimi, et täita järgmine väljakutse: -[Järelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/30) +**Kirjeldus:** Loo lihtne mänguobjektide süsteem, kasutades nii pärimist kui pub/sub mustrit. Rakenda põhimäng, kus erinevad objektid saavad sündmuste kaudu omavahel suhelda ilma, et tunneksid otseselt üksteist. -## Ülevaade ja iseseisev õppimine +**Päring:** Loo JavaScripti mängusüsteem järgmiste nõuetega: 1) Loo baas GameObject klass, millel on x, y koordinaadid ja tüübiväli. 2) Loo Hero klass, mis pärib GameObjecti ja saab liikuda. 3) Loo Enemy klass, mis pärib GameObjecti ja suudab kangelast taga ajada. 4) Rakenda EventEmitter klass pub/sub mustri jaoks. 5) Sea sündmuste kuulajad nii, et kui kangelane liigub, saavad lähistel olevad vaenlased sündmuse 'HERO_MOVED' ning uuendavad oma asukohta liikudes kangelas poole. Lisa konsoolilogid, mis näitavad objektidevahelist suhtlust. -Õpi pub/sub mustri kohta rohkem, [lugedes selle kohta](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon). +Loe rohkem [agendi režiim](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kohta siin. -## Ülesanne +## 🚀 Väljakutse +Kaaluge, kuidas pub-sub muster saab täiustada mängu arhitektuuri. Määrake, millised komponendid peaksid sündmusi genereerima ja kuidas süsteem peaks neile reageerima. Mõelge välja mängukontseptsioon ja kaardistage selle komponentidevahelised suhtlemismustrid. + +## Loengu järeltest + +[Loengu järeltest](https://ff-quizzes.netlify.app/web/quiz/30) + +## Ülevaade ja iseõpe + +Õppige Pub/Sub kohta rohkem, [lugedes sellest](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon). + +### ⚡ **Mida saate teha järgmise 5 minutiga** +- [ ] Avage mõni HTML5 mäng veebis ja uurige selle koodi DevToolsi abil +- [ ] Looge lihtne HTML5 Canvas element ja joonistage põhiline kuju +- [ ] Katsetage `setInterval` kasutamist lihtsa animatsiooniloopi loomiseks +- [ ] Uurige Canvas API dokumentatsiooni ja proovige mõnda joonistamismeetodit + +### 🎯 **Mida saate selle tunni jooksul saavutada** +- [ ] Täitke loengu järgne test ja mõistke mänguarenduse kontseptsioone +- [ ] Määrake oma mänguprojekti struktuur HTML-, CSS- ja JavaScripti failidega +- [ ] Looge põhjalik mängutsükkel, mis uuendab ja renderdab pidevalt +- [ ] Joonistage oma esimesed mängusprite'id canvasele +- [ ] Tehke lihtne varade laadimine piltide ja helide jaoks + +### 📅 **Teie nädala pikkune mänguloomisülesanne** +- [ ] Valmis täielik kosmose-mäng kõigi planeeritud funktsioonidega +- [ ] Lisage lihvitud graafika, heliefektid ja sujuvad animatsioonid +- [ ] Rakendage mängu olekud (alguskuva, mäng, mängu lõpp) +- [ ] Looge skoorisüsteem ja mängija edenemise jälgimine +- [ ] Muutke mäng reageerivaks ja ligipääsetavaks erinevates seadmetes +- [ ] Jagage oma mängu veebis ja koguge tagasisidet mängijatelt + +### 🌟 **Teie kuu pikkune mänguarendus** +- [ ] Arendage mitu mänge, uurides erinevaid žanre ja mehhaanikat +- [ ] Õppige mänguarendusraamistikku, näiteks Phaser või Three.js +- [ ] Andke panus avatud lähtekoodiga mänguarendusprojektidesse +- [ ] Valmistuge õppima edasijõudnud mänguprogrammeerimise mustreid ja optimeerimist +- [ ] Looge portfoolio, mis demonstreerib teie mänguarenduse oskusi +- [ ] Mentorige teisi, kes on huvitatud mänguarendusest ja interaktiivsest meediast + +## 🎯 Teie mänguarendusmeistrivõistluste ajakava + +```mermaid +timeline + title Mängu arhitektuuri õppimise areng + + section Objektimustrid (20 minutit) + Koodi organiseerimine: Klassipärand + : Kompositsioonimustrid + : Tegurfunktsioonid + : Käitumise segamine + + section Kommunikatsioonisüsteemid (25 minutit) + Sündmuste arhitektuur: Pub/Sub rakendus + : Sõnumite kujundus + : Sündmuse käivitajad + : Laisk sidumine + + section Mängu objekti disain (30 minutit) + Entiteedisüsteemid: Omaduste haldus + : Käitumise kompositsioon + : Oleku haldus + : Elutsükli haldus + + section Arhitektuuri mustrid (35 minutit) + Süsteemi disain: Komponendi süsteemid + : Observer muster + : Käskude muster + : Oleku masinad + + section Arendatud kontseptsioonid (45 minutit) + Skaalautuv arhitektuur: Jõudluse optimeerimine + : Mälu haldus + : Mooduldisain + : Testimise strateegiad + + section Mängumootori kontseptsioonid (1 nädal) + Professionaalne areng: Stseenide graafikud + : Ressursside haldus + : Renderdamise torujuhtmed + : Füüsika integreerimine + + section Raamistiku valdamine (2 nädalat) + Moodne mänguarendus: React mängumustrid + : Canvas optimeerimine + : WebGL põhialused + : PWA mängud + + section Tööpraktikad (1 kuu) + Professionaalsed oskused: Meeskonnatöö + : Koodi ülevaatused + : Mängudisaini mustrid + : Jõudluse profilimine +``` +### 🛠️ Teie mängu arhitektuuri tööriistakasti kokkuvõte + +Pärast selle õppetunni lõpetamist on teil: +- **Disainimustri valdamine**: Pärimise ja kompositsiooni kompromisside mõistmine +- **Sündmustepõhine arhitektuur**: Pub/sub rakendamine skaleeritava suhtluse jaoks +- **Objekti-orienteeritud disain**: Klasside hierarhiad ja käitumise kompositsioon +- **Moodne JavaScript**: Tegutsemisfunktsioonid, spreadi süntaks ja ES6+ mustrid +- **Skaleeritav arhitektuur**: Lahtise sidumise ja mooduldisaini põhimõtted +- **Mänguarenduse alus**: Entiteedi süsteemid ja komponendi mustrid +- **Professionaalsed mustrid**: Töö tööstusharu-koodi organiseerimise lähenemised + +**Tegeliku maailma rakendused**: Need mustrid kehtivad otse: +- **Eesliideseraamistikud**: React/Vue komponendi arhitektuur ja olekute haldamine +- **Tagaplaaniteenused**: Mikroteenuste suhtlus ja sündmustepõhised süsteemid +- **Mobiiliarendus**: iOS/Android rakenduste arhitektuur ja teavitussüsteemid +- **Mängumootorid**: Unity, Unreal ja veebipõhine mänguarendus +- **Ettevõttesüsteemid**: Sündmuste allikad ja hajutatud süsteemide disain +- **API disain**: RESTful teenused ja reaalajas suhtlus + +**Omandatud professionaalsed oskused**: Te oskate nüüd: +- **Disainida** skaleeritavaid tarkvaraarhitektuure kasutades tõestatud mustreid +- **Rakendada** sündmustepõhiseid süsteeme keerukate interaktsioonide haldamiseks +- **Valida** sobiva koodi organiseerimise strateegia erinevate stsenaariumite jaoks +- **Siluda** ja hooldada lahtise sidumisega süsteeme tõhusalt +- **Suhelda** tehnilisi otsuseid tööstusharu standardite terminoloogiaga + +**Järgmine tase**: Olete valmis neid mustreid rakendama pärismängus, uurima arenenumat mänguarendust või kasutama neid arhitektuurikontsepte veebirakendustes! + +🌟 **Saavutuse avamine**: Olete valdanud fundamentaalsed tarkvaraarhitektuuri mustrid, mis jõustavad kõike alates lihtsatest mängudest kuni keerukate ettevõttesüsteemideni! + +## Kodune ülesanne [Mock up a game](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Loaandmine**: +See dokument on tõlgitud kasutades tehisintellekti tõlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma emakeeles tuleks lugeda autoriteetseks allikaks. Olulise info puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/1-introduction/assignment.md b/translations/et/6-space-game/1-introduction/assignment.md index 35622981b..18aa0d1f8 100644 --- a/translations/et/6-space-game/1-introduction/assignment.md +++ b/translations/et/6-space-game/1-introduction/assignment.md @@ -1,25 +1,102 @@ -# Loo mängu prototüüp +# Mängu kavandamine: Disainimustrite rakendamine + +## Ülesande ülevaade + +Pane oma äsjane disainimustrite tundmine proovile, luues lihtsa mängu prototüübi! See ülesanne aitab sul harjutada nii arhitektuurimustreid (pärimine või kompositsioon) kui ka pub/sub kommunikatsioonisüsteemi, mida sa õppetükis õppisid. ## Juhised -Kasutades tunnis antud koodinäiteid, loo esitus mängust, mis sulle meeldib. See peab olema lihtne mäng, kuid eesmärk on kasutada kas klassi või kompositsioonimustrit ning pub/sub mustrit, et näidata, kuidas mäng võiks käivituda. Ole loov! +Loo lihtne mängu kujutus, mis demonstreerib selle õppetüki disainimustreid. Sinu mäng peaks olema funktsionaalne, kuid keerulisi graafikaid pole vaja – keskendu alusstruktuurile ja kommunikatsioonimustritele. + +### Nõuded + +**Vali oma arhitektuurimuster:** +- **Variant A**: Kasuta klassipõhist pärimist (nt `GameObject` → `Movable` → `Hero` näide) +- **Variant B**: Kasuta kompositsiooni (nt tehasefunktsiooni lähenemine segatud käitumistega) + +**Rakenda kommunikatsioon:** +- **Lisa** `EventEmitter` klass pub/sub sõnumside jaoks +- **Sea üles** vähemalt 2–3 erinevat sõnumitüüpi (nt `PLAYER_MOVE`, `ENEMY_SPAWN`, `SCORE_UPDATE`) +- **Ühenda** kasutajasisend (klaviatuur/hiir) mängusündmustega läbi sündmuste süsteemi + +**Mänguelemendid, mida lisada:** +- Vähemalt üks mängijakontrolli all olev tegelane +- Vähemalt üks teine mänguobjekt (vaenlane, kogutav ese või keskkonnaelement) +- Põhiline objektide vaheline interaktsioon (kokkupõrge, kogumine või suhtlus) + +### Soovitatud mänguideed + +**Lihtsad mängud, mida kaaluda:** +- **Mao mäng** – mao sektorid järgivad pead, toit ilmub juhuslikult +- **Pongi variatsioon** – rekett reageerib sisendile, pall põrkab seintelt +- **Kogumise mäng** – mängija liigub ja kogub esemeid, vältides takistusi +- **Tornikaitse algus** – tornid tuvastavad ja tulistavad liikuvate vaenlaste pihta + +### Koodi struktuuri juhised + +```javascript +// Näidise algusstruktuur +const Messages = { + // Määratle siin oma mängusõnumid +}; + +class EventEmitter { + // Sinu sündmussüsteemi rakendus +} + +// Vali kas klassipõhine VÕI kompositsioonil põhinev lähenemine +// Klassipõhine näide: +class GameObject { /* base properties */ } +class Player extends GameObject { /* player-specific behavior */ } + +// Või kompositsiooni näide: +const gameObject = { /* base properties */ }; +const movable = { /* movement behavior */ }; +function createPlayer() { /* combine behaviors */ } +``` + +### Oma rakenduse testimine + +**Kontrolli oma koodi toimimist järgmistega:** +- **Testi**, et objektid liiguvad või muutuvad sündmuste käivitumisel +- **Veendu**, et mitu objekti saavad sama sündmuse peale reageerida +- **Kontrolli**, et saad lisada uusi käitumisi ilma olemasolevat koodi muutmata +- **Tagamaks**, et klaviatuuri/hiire sisend käivitab mängusündmused korrektselt + +## Esitamise juhised + +**Sinu esitus peaks sisaldama:** +1. **JavaScript faili(de)** sinu mängu rakendusega +2. **HTML faili**, et mängu käivitada ja testida (võib olla lihtne) +3. **Kommentaare** selle kohta, millise mustri valisid ja miks +4. **Lühikest dokumentatsiooni** sõnumitüüpide kohta ja mida nad teevad ## Hindamiskriteeriumid -| Kriteerium | Silmapaistev | Piisav | Vajab parandamist | -| ---------- | ------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------- | -| | Kolm elementi on ekraanil ja neid saab manipuleerida | Kaks elementi on ekraanil ja neid saab manipuleerida | Üks element on ekraanil ja seda saab manipuleerida | +| Kriteerium | Näidismenukas (3 punkti) | Piisav (2 punkti) | Vajab paranemist (1 punkt) | +|------------|--------------------------|-------------------|----------------------------| +| **Arhitektuurimuster** | Rakendab õigesti kas pärimist VÕI kompositsiooni selge klassi/objekti hierarhiaga | Kasutab valitud mustrit mõningate puudustega või ebajärjekindlusega | Püüab mustrit kasutada, kuid rakendusel on tõsised vead | +| **Pub/Sub rakendus** | EventEmitter töötab korrektselt mitme sõnumitüübiga ja korraliku sündmuste vooga | Põhiline pub/sub süsteem töötab mõne sündmusetöötlusega | Sündmuste süsteem olemas, kuid ei tööta usaldusväärselt | +| **Mängu funktsionaalsus** | Kolm või enam interaktiivset elementi, mis suhtlevad sündmuste kaudu | Kaks interaktiivset elementi põhilise sündmuste suhtlusega | Üks element reageerib sündmustele või põhitasemel interaktsioon | +| **Koodi kvaliteet** | Puhas, hästi kommenteeritud kood loogilise korraldusega ja moodsa JavaScriptiga | Üldiselt hästi organiseeritud kood sobivate kommentaaridega | Kood töötab, kuid puudub korraldus või selged kommentaarid | + +**Boonuspunkte:** +- **Loomingulised mängumehhaanika lahendused**, mis näitavad mustrite huvitavaid kasutusviise +- **Mitmed sisendmeetodid** (klaviatuur JA hiire sündmused) +- **Laiendatav arhitektuur**, mida oleks lihtne uute funktsioonidega täiendada --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles tuleks pidada autoriteetseks allikaks. Oluliste andmete puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta ühegi arusaamatuse või valesti tõlgendamise eest, mis tuleneb selle tõlke kasutamisest. + \ No newline at end of file diff --git a/translations/et/6-space-game/2-drawing-to-canvas/README.md b/translations/et/6-space-game/2-drawing-to-canvas/README.md index f6955d907..ca6c6dbe2 100644 --- a/translations/et/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/et/6-space-game/2-drawing-to-canvas/README.md @@ -1,230 +1,624 @@ -# Kosmosemängu loomine, osa 2: Kangelase ja koletiste joonistamine lõuendile +# Kogu kosmose mängu osa 2: Joonista kangale kangelane ja koletised + +```mermaid +journey + title Teie Canvas graafikuteekond + section Alus + Mõista Canvas API-d: 3: Student + Õpi koordinaatsüsteemi: 4: Student + Joonista põhilisi kujundeid: 4: Student + section Pildi töötlemine + Laadi mängu varad: 4: Student + Töötle asünkroonset laadimist: 5: Student + Paiguta sprite'id: 5: Student + section Mängu renderdamine + Loo mängu ekraan: 5: Student + Ehita formaadid: 5: Student + Optimeeri jõudlust: 4: Student +``` +Canvas API on üks veebiarenduse võimsamaid vahendeid dünaamiliste, interaktiivsete graafikute loomiseks otse sinu brauseris. Selles tunnis muudame tühja HTML `` elemendi mängumaailmaks täis kangelasi ja koletisi. Mõtle kangale kui oma digitaalsele kunstipaneelile, kus kood muutub nähtavaks. + +Me ehitame edasi eelmistel tundidel õpitu peale ja nüüd sukeldume visuaalsetesse aspektidesse. Õpid kuidas laadida ja kuvada mängu sprite'e, paigutada elemente täpselt ning luua oma kosmosemängu visuaalne alus. See sillutab teed staatiliste veebilehtede ja dünaamiliste, interaktiivsete kogemuste vahel. + +Selle tunni lõpuks on sul täielik mängustseen, kus kangelase laev on õigesse kohta paigutatud ja vaenlased rivistatud lahinguks valmis. Sa mõistad, kuidas tänapäevased mängud kuvavad graafikat brauserites ning omandad oskused luua oma interaktiivseid visuaalseid elamusi. Uurime canvas-graafikat ja toome sinu kosmosemängu ellu! + +```mermaid +mindmap + root((Canvas Graafika)) + Canvas Element + HTML5 Funktsioon + 2D Kontekst + Koordinaatsüsteem + Pikslite Kontroll + Drawing Operations + Põhivormid + Teksti Joonistamine + Pildi Kuvamine + Raja Joonistamine + Asset Management + Pildi Laadimine + Asünkroonsed Operatsioonid + Vigade Käsitlemine + Tulemuslikkus + Game Rendering + Sprite Positsioneerimine + Formatsiooni Paigutus + Stseeni Koostis + Kaadri Uuendused + Visual Effects + Värvid & Stiilid + Transformatsioonid + Animatsioonid + Kihtimine +``` +## Eel-loengu viktoriin -## Loengu-eelne viktoriin +[Eel-loengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/31) -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/31) +## Canvas -## Lõuend +Mis see `` element täpsemalt on? See on HTML5 lahendus dünaamiliste graafikute ja animatsioonide loomiseks veebibrauserites. Erinevalt tavalistest staatilistest piltidest või videotest annab canvas sulle pikslitase kontrolli kõige üle, mis ekraanil kuvatakse. See teeb sellest ideaalse vahendi mängude, andmete visualiseerimise ja interaktiivse kunsti jaoks. Mõtle sellele kui programmeeritavale joonistuspinnale, kus JavaScript on su pintsel. -Lõuend on HTML-element, millel vaikimisi pole sisu; see on tühi leht. Sellele tuleb ise midagi joonistada. +Vaikimisi näeb canvas-element välja nagu tühi, läbipaistev ristkülik sinu lehel. Kuid just siin peitub selle võimekus! Selle tegelik jõud avaldub, kui kasutad JavaScripti kujundite joonistamiseks, piltide laadimiseks, animatsioonide loomiseks ja asjade kasutajate tegevustele reageerimiseks. See on sarnane 1960ndatel Bell Labsis arvutigraafika pioneeri tööviisile, kus iga piksel tuli käsitsi programmeerida, et luua esimesed digitaalsed animatsioonid. -✅ Loe [Canvas API kohta rohkem](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN-is. +✅ Loe [Canvas API-st lähemalt](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN-is. -Tavaliselt deklareeritakse see lehe keha osana järgmiselt: +Tavaliselt deklareeritakse see nii, osana lehe body-st: ```html ``` -Ülal määrame `id`, `width` ja `height`. - -- `id`: määrake see, et saaksite sellele viidata, kui peate sellega töötama. -- `width`: see on elemendi laius. -- `height`: see on elemendi kõrgus. - -## Lihtgeomeetria joonistamine - -Lõuend kasutab kartesiaanlikku koordinaatsüsteemi asjade joonistamiseks. Seega kasutatakse x-telge ja y-telge, et väljendada, kus miski asub. Asukoht `0,0` on vasak ülemine nurk ja parem alumine nurk vastab lõuendi määratud LAIUSELE ja KÕRGUSELE. - -![lõuendi ruudustik](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.et.png) -> Pilt [MDN-ist](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) - -Lõuendile joonistamiseks tuleb järgida järgmisi samme: - -1. **Hankige viide** lõuendi elemendile. -1. **Hankige viide** konteksti elemendile, mis asub lõuendi elemendil. -1. **Tehke joonistamisoperatsioon** konteksti elemendi abil. +**See kood teeb järgmist:** +- **Määrab** `id` atribuudi, et saaksid sellele konkreetsele canvas elemendile JavaScriptis viidata +- **Määrab** `width` pikslites, et kontrollida kanga laiust +- **Seab** `height` pikslites, et määrata kanga kõrgust + +## Lihtsa geomeetria joonistamine + +Nüüd kui tead, mis on canvas element, vaatame, kuidas seal joonistada! Canvas kasutab koordinaatsüsteemi, mis võib tunduda matemaatikast tuttav, kuid arvutigraafika jaoks on üks oluline erinõks. + +Canvas kasutab ristkoordinaate koos x-telje (horisontaalne) ja y-telje (vertikaalne) asukoha määramiseks. Kuid põhiline erinevus on see, et erinevalt matemaatikast, kus koordinaatide alguspunkt (0,0) on tavaolemusena all vasakul, canvas'is on origin (0,0) üleval vasakul, kus x väärtused suurenevad paremale liikumisel ja y väärtused allapoole liikumisel. See lähtub varajastest arvutiekraanidest, kus elektronkiired skaneerisid pilti ülalt alla, muutes vasaku ülanurga loomulikuks alguspunktiks. + +```mermaid +quadrantChart + title Lõuendi koordinaatsüsteem + x-axis Vasak --> Parem + y-axis Ülemine --> Alumine + quadrant-1 Kvadrant 1 + quadrant-2 Kvadrant 2 + quadrant-3 Kvadrant 3 + quadrant-4 Kvadrant 4 + + Origin Point: [0.1, 0.1] + Hero Center: [0.5, 0.8] + Enemy Formation: [0.3, 0.2] + Power-up: [0.7, 0.6] + UI Elements: [0.9, 0.1] +``` +![canvas'i võrk](../../../../translated_images/canvas_grid.5f209da785ded492.et.png) +> Pilt pärit [MDN-ist](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) + +Canvas elemendi joonistamiseks järgid kolme sammuga protsessi, mis moodustab kõigi canvas graafika aluse. Kui seda mõned korrad teha, saab see loomuomaseks: + +```mermaid +flowchart LR + A[HTML Canvas elemendi] --> B[Saada lõuendi viide] + B --> C[Saada 2D kontekst] + C --> D[Joonistamise operatsioonid] + + D --> E[Joonista kujud] + D --> F[Joonista tekst] + D --> G[Joonista pildid] + D --> H[Rakenda stiilid] + + E --> I[Renderda ekraanile] + F --> I + G --> I + H --> I + + style A fill:#e1f5fe + style C fill:#e8f5e8 + style I fill:#fff3e0 +``` +1. **Leia viide** oma canvas elemendile DOM-ist (nagu iga teise HTML elemendi puhul) +2. **Hangi 2D joonistamiskontekst** – see pakub kõiki joonistamismeetodeid +3. **Alusta joonistamist!** Kasuta konteksti sisseehitatud meetodeid graafika loomiseks -Ülaltoodud sammude kood näeb tavaliselt välja selline: +Siin on koodinäide: ```javascript -// draws a red rectangle -//1. get the canvas reference -canvas = document.getElementById("myCanvas"); +// Samm 1: Hangi lõuendi element +const canvas = document.getElementById("myCanvas"); -//2. set the context to 2D to draw basic shapes -ctx = canvas.getContext("2d"); +// Samm 2: Hangi 2D joonistamiskontekst +const ctx = canvas.getContext("2d"); -//3. fill it with the color red +// Samm 3: Sea täitevärv ja joonista ristkülik ctx.fillStyle = 'red'; - -//4. and draw a rectangle with these parameters, setting location and size -ctx.fillRect(0,0, 200, 200) // x,y,width, height +ctx.fillRect(0, 0, 200, 200); // x, y, laius, kõrgus ``` -✅ Canvas API keskendub peamiselt 2D-kujunditele, kuid veebilehele saab joonistada ka 3D-elemente; selleks võite kasutada [WebGL API-d](https://developer.mozilla.org/docs/Web/API/WebGL_API). +**Läheme selle läbi samm-sammult:** +- Me **võtame** canvas elemendi selle ID järgi ja salvestame muutuja sisse +- Me **saame** 2D joonistamiskonteksti – see on meie joonistamisvahendite komplekt +- Me **määrame** värviks punase, kasutades `fillStyle` omadust +- Me **joonistame** ristküliku, mis algab punktist (0,0), on 200 pikslit lai ja kõrge -Canvas API abil saab joonistada mitmesuguseid asju, näiteks: +✅ Canvas API keskendub peamiselt 2D kujunditele, kuid veebis 3D elementide joonistamiseks võib kasutada [WebGL API-d](https://developer.mozilla.org/docs/Web/API/WebGL_API). -- **Geomeetrilised kujundid**, me juba näitasime, kuidas joonistada ristkülikut, kuid on palju muud, mida saab joonistada. -- **Tekst**, saate joonistada teksti mis tahes fondi ja värviga. -- **Pildid**, saate joonistada pilti, mis põhineb pildifailil, näiteks .jpg või .png. +Canvas API abil võid joonistada väga palju erinevaid asju, näiteks: -✅ Proovi ise! Teate, kuidas joonistada ristkülikut, kas saate joonistada lehele ringi? Vaadake mõningaid huvitavaid Canvas joonistusi CodePenis. Siin on [eriti muljetavaldav näide](https://codepen.io/dissimulate/pen/KrAwx). +- **Geomeetrilisi kujundeid**, nagu näiteks ristkülikuid, kuid ka palju muud. +- **Teksti**, mis võib olla mis tahes fonti ja värvi. +- **Pilte**, kus saad joonistada pilte .jpg või .png failidest. -## Pildiressursi laadimine ja joonistamine +✅ Proovi joonistada! Sa juba tead, kuidas joonistada ristkülikut, kas oskad joonistada ka ringi? Vaata huvitavaid Canvas joonistusi CodePen'is. Siin on [eriti muljetavaldav näide](https://codepen.io/dissimulate/pen/KrAwx). -Pildiressurssi laadimiseks loote `Image` objekti ja määrate selle `src` atribuudi. Seejärel kuulate `load` sündmust, et teada saada, millal see on kasutamiseks valmis. Kood näeb välja selline: +### 🔄 **Õppekontroll** +**Canvas'i alused**: Enne piltide laadimisse minekut veendu, et saad: +- ✅ Selgitada, kuidas canvas'i koordinaatsüsteem erineb matemaatilistest koordinaatidest +- ✅ Mõista kolmeastmelist protsessi canvas joonistamise operatsioonides +- ✅ Teada, mida 2D joonistamiskontekst pakub +- ✅ Kirjeldada, kuidas `fillStyle` ja `fillRect` töötavad koos -### Ressursi laadimine +**Kiire enesetest**: Kuidas joonistaksid sinise ringi positsioonil (100, 50) raadiusega 25? +```javascript +ctx.fillStyle = 'blue'; +ctx.beginPath(); +ctx.arc(100, 50, 25, 0, 2 * Math.PI); +ctx.fill(); +``` + +**Canvas joonistamismeetodid, mida nüüd tead:** +- **fillRect()**: Joonistab täidetud ristkülikuid +- **fillStyle**: Määrab värvid ja mustrid +- **beginPath()**: Alustab uut joonistusrada +- **arc()**: Loob ringe ja kaareid + +## Laadi ja joonista pildiressurss + +Põhikujundite joonistamine on hea algus, kuid enamik mänge vajab tegelikke pilte! Sprite'id, taustad ja tekstuurid annavad mängule visuaalse atraktiivsuse. Piltide laadimine ja kuvamine canvas'e'il on natuke erinev kujundite joonistamisest, kuid kui protsessi mõista, on see üsna lihtne. + +Me peame looma `Image` objekti, laadima pildifaili (see toimub asünkroonselt ehk "taustal") ja siis joonistama selle canvas'ile, kui see on valmis. See lähenemine tagab, et pildid kuvatakse korrektselt ega blokeeri sinu rakendust laadimise ajal. + +```mermaid +sequenceDiagram + participant JS as JavaScript + participant Img as Pildi objekt + participant Server as Failiserver + participant Canvas as Lõuendi kontekst + + JS->>Img: new Image() + JS->>Img: Määra src omadus + Img->>Server: Palu pildifaili + Server->>Img: Tagasta pildidata + Img->>JS: Käivita onload sündmus + JS->>Canvas: drawImage(img, x, y) + Canvas->>Canvas: Joonista ekraanile + + Note over JS,Canvas: Asünkroonne laadimine takistab kasutajaliidese blokeerimist +``` +### Pildi põhilaadimine ```javascript const img = new Image(); img.src = 'path/to/my/image.png'; img.onload = () => { - // image loaded and ready to be used -} + // Pilt on laaditud ja valmis kasutamiseks + console.log('Image loaded successfully!'); +}; ``` -### Ressursi laadimise muster +**Selles koodis toimub:** +- Loome uue Image objekti, mis hoiab sprite'i või tekstuuri +- Määrame, millist pildifaili laadida, seades allika tee +- Kuulame laadimise sündmust, et teaksime, millal pilt on kasutuskõlblik + +### Parem viis piltide laadimiseks -Soovitatav on ülaltoodut mähkida konstruktsiooni, nagu allpool näidatud, et seda oleks lihtsam kasutada ja et prooviksite seda manipuleerida ainult siis, kui see on täielikult laaditud: +Siin on tugevam viis piltide laadimise käsitlemiseks, mida tavapäraselt kasutavad professionaalsed arendajad. Pakime piltide laadimise Promise-põhisesse funktsiooni – see, mis populaarsust kogus koos JavaScripti Promise'idega ES6 standardis –, teeb sinu koodi organiseeritumaks ja vigade haldamise sujuvamaks: ```javascript function loadAsset(path) { - return new Promise((resolve) => { + return new Promise((resolve, reject) => { const img = new Image(); img.src = path; img.onload = () => { - // image loaded and ready to be used resolve(img); - } - }) + }; + img.onerror = () => { + reject(new Error(`Failed to load image: ${path}`)); + }; + }); } -// use like so - -async function run() { - const heroImg = await loadAsset('hero.png') - const monsterImg = await loadAsset('monster.png') +// Kaasaegne kasutus async/await abil +async function initializeGame() { + try { + const heroImg = await loadAsset('hero.png'); + const monsterImg = await loadAsset('monster.png'); + // Pildid on nüüd kasutusvalmis + } catch (error) { + console.error('Failed to load game assets:', error); + } } - ``` -Mänguressursside ekraanile joonistamiseks näeks teie kood välja selline: +**Mida siin tegime:** +- Pakisime kogu piltide laadimise loogika Promise'i sisse, et seda paremini hallata +- Lisame vigade haldamise, mis tegelikult teavitab meid probleemidest +- Kasutasime tänapäevast async/await süntaksit, mis on palju loetavam +- Lisasime try/catch plokid, et laadimishäireid sõbralikult käsitleda + +Kui pildid on laetud, on nende canvas'ile joonistamine üsna lihtne: ```javascript -async function run() { - const heroImg = await loadAsset('hero.png') - const monsterImg = await loadAsset('monster.png') - - canvas = document.getElementById("myCanvas"); - ctx = canvas.getContext("2d"); - ctx.drawImage(heroImg, canvas.width/2,canvas.height/2); - ctx.drawImage(monsterImg, 0,0); +async function renderGameScreen() { + try { + // Laadi mängu varad + const heroImg = await loadAsset('hero.png'); + const monsterImg = await loadAsset('monster.png'); + + // Saa kanga ja kontekst + const canvas = document.getElementById("myCanvas"); + const ctx = canvas.getContext("2d"); + + // Joonista pildid kindlatele positsioonidele + ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2); + ctx.drawImage(monsterImg, 0, 0); + } catch (error) { + console.error('Failed to render game screen:', error); + } } ``` -## Nüüd on aeg hakata oma mängu ehitama +**Käime selle samm-sammult läbi:** +- Laeme kangelase ja koletise pildid taustal, kasutades await'i +- Võtame canvas elemendi ja hankime 2D joonistamiskonteksti +- Paigutame kangelase pildi kenasti keskele, kasutades lihtsaid koordinaatide arvutusi +- Paneme koletise pildi algusesse vasakule, et alustada vaenlaste formaati +- Püüame kinni kõik laadimise või joonistamise vead + +```mermaid +flowchart TD + A[Laadi varad] --> B{Kas kõik pildid on laaditud?} + B -->|Ei| C[Näita laadimist] + B -->|Jah| D[Saa lõuendi kontekst] + C --> B + D --> E[Tühjenda ekraan] + E --> F[Joonista taust] + F --> G[Joonista vaenlase vormatsioon] + G --> H[Joonista kangelase laev] + H --> I[Kasuta visuaalseid efekte] + I --> J[Renderda kaader] + + subgraph "Renderdamise torujuhe" + K[Varade haldamine] + L[Stseeni koostamine] + M[Joonistamise toimingud] + N[Kaadri väljund] + end + + style A fill:#e1f5fe + style J fill:#e8f5e8 + style I fill:#fff3e0 +``` +## Nüüd on aeg alustada oma mängu ehitamist + +Nüüd paneme kõik osad kokku, et luua sinu kosmosemängu visuaalne alus. Sul on tugev arusaam canvas'i alustest ja piltide laadimise tehnikatest, seega juhib see praktiline osa sind läbi terve mänguekraani ehitamise õigesti paigutatud sprite'idega. ### Mida ehitada -Loote veebilehe lõuendi elemendiga. See peaks kuvama musta ekraani `1024*768`. Oleme teile andnud kaks pilti: +Ehitad veebilehe Canvas elemendiga. See kuvab musta taustaga ekraani mõõtmetega `1024*768`. Me oleme varustanud sind kahe pildiga: - Kangelase laev - ![Kangelase laev](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.et.png) + ![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b.et.png) -- 5*5 koletis +- 5×5 koletise laev - ![Koletise laev](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.et.png) + ![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2.et.png) -### Soovitatavad sammud arenduse alustamiseks +### Soovitatud arengusammud -Leidke failid, mis on teie jaoks loodud kaustas `your-work`. See peaks sisaldama järgmist: +Leia starter-failid kaustast `your-work`. Sinu projekti struktuur peaks sisaldama: ```bash --| assets - -| enemyShip.png - -| player.png --| index.html --| app.js --| package.json +your-work/ +├── assets/ +│ ├── enemyShip.png +│ └── player.png +├── index.html +├── app.js +└── package.json ``` -Avage selle kausta koopia Visual Studio Code'is. Teil peaks olema seadistatud kohalik arenduskeskkond, eelistatavalt Visual Studio Code koos NPM-i ja Node'iga. Kui teil pole `npm` arvutis seadistatud, [siin on juhised selle tegemiseks](https://www.npmjs.com/get-npm). +**See on sinu töövahend:** +- **Mängu sprite'id** asuvad kaustas `assets/`, et kõik oleks organiseeritud +- **Sinu põhiline HTML fail** seab üles canvas elemendi ja valmistab kõik ette +- **JavaScripti fail**, kuhu kirjutad kogu oma mängu joonistamiskoodi +- **package.json**, mis seab sisse arendusserveri, et saaksid lokaalselt testida -Alustage oma projekti, navigeerides kausta `your_work`: +Ava see kaust Visual Studio Code'is ja alusta arendamist. Sul on vaja kohalikku arenduskeskkonda koos Visual Studio Code, NPM ja Node.js installeeritud. Kui sul pole `npm` arvutisse seadistatud, siis [vaata siit, kuidas seda installida](https://www.npmjs.com/get-npm). + +Alusta oma arendusserverit, navigeerides kausta `your-work`: ```bash cd your-work npm start ``` -Ülaltoodud käivitab HTTP-serveri aadressil `http://localhost:5000`. Avage brauser ja sisestage see aadress. Praegu on see tühi leht, kuid see muutub. +**See käsk teeb päris toredaid asju:** +- **Käivitab** lokaalse serveri aadressil `http://localhost:5000`, et saaksid oma mängu testida +- **Serveerib** kõik failid korralikult, nii et brauser suudab neid laadida +- **Jälgib** faile muutuste osas, et su arendus sujuks mugavalt +- **Annan** sulle professionaalse arenduskeskkonna kõigi testide jaoks + +> 💡 **Märkus**: Alguses näed brauseris tühja lehte – see ongi ootuspärane! Kõigele koodi lisades värskenda lehte, et näha muutusi. See iteratiivne arendus annab sulle võimaluse nagu NASA Apollo juhitarkvara – katsetada iga komponent enne suuremasse süsteemi integreerimist. -> Märkus: ekraanil muudatuste nägemiseks värskendage brauserit. +### Lisa kood -### Koodi lisamine +Lisa vajalik kood faili `your-work/app.js`, et täita järgmised ülesanded: -Lisage vajalik kood faili `your-work/app.js`, et lahendada alljärgnev: +1. **Joonista musta taustaga canvas** + > 💡 **Kuidas teha**: Otsi /app.js faili TODO kommentaari ja lisa kaks rida. Sea `ctx.fillStyle` mustaks, seejärel kasuta `ctx.fillRect()` alguspunktiga (0,0) ja oma canvas'i mõõtmetega. Lihtne! -1. **Joonistage** lõuend musta taustaga - > vihje: lisage kaks rida vastava TODO alla `/app.js` failis, määrates `ctx` elemendi mustaks ja ülemise/vasaku koordinaadi väärtuseks 0,0 ning kõrguse ja laiuse lõuendi mõõtmeteks. -2. **Laadige** tekstuurid - > vihje: lisage mängija ja vaenlase pildid, kasutades `await loadTexture` ja edastades pildi tee. Te ei näe neid veel ekraanil! -3. **Joonistage** kangelane ekraani keskele alumises pooles - > vihje: kasutage `drawImage` API-d, et joonistada heroImg ekraanile, määrates `canvas.width / 2 - 45` ja `canvas.height - canvas.height / 4)`; -4. **Joonistage** 5*5 koletised - > vihje: nüüd saate ekraanile koletiste joonistamise koodi lahti kommenteerida. Järgmisena minge funktsiooni `createEnemies` ja täiendage seda. +2. **Laadi mängu tekstuurid** + > 💡 **Kuidas teha**: Kasuta `await loadAsset()` oma mängija ja vaenlase piltide laadimiseks. Salvesta need muutujatesse, et hiljem joonistada. Pane tähele – pildid ise ei kuvata enne, kui neid joonistad! - Kõigepealt seadistage mõned konstandid: +3. **Joonista kangelase laev keskmise alumise positsiooni peale** + > 💡 **Kuidas teha**: Kasuta `ctx.drawImage()` kangelase pildi paigutamiseks. X-koordinaadil proovi `canvas.width / 2 - 45`, et see oleks keskendatud, ja Y-koordinaadil `canvas.height - canvas.height / 4`, et asetada see alumisse ossa. + +4. **Joonista 5×5 vaenlaste formaati** + > 💡 **Kuidas teha**: Otsi funktsioon `createEnemies` ja kirjuta sinna pesastatud tsüklid. Pead tegema natuke matemaatikat ruumi ja positsiooni arvutamiseks, kuid ära muretse – ma näitan täpselt, kuidas! + +Alustuseks määra konstandid korrektse vaenlaste rivistuse paigutamiseks: + +```javascript +const ENEMY_TOTAL = 5; +const ENEMY_SPACING = 98; +const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING; +const START_X = (canvas.width - FORMATION_WIDTH) / 2; +const STOP_X = START_X + FORMATION_WIDTH; +``` - ```javascript - const MONSTER_TOTAL = 5; - const MONSTER_WIDTH = MONSTER_TOTAL * 98; - const START_X = (canvas.width - MONSTER_WIDTH) / 2; - const STOP_X = START_X + MONSTER_WIDTH; - ``` +**Selgitus, mida need konstandid teevad:** +- Määrame 5 vaenlast reas ja veerus (kena 5×5 ruudustik) +- Määrame, kui palju ruumi vaenlaste vahel on, et nad poleks liiga kokku surutud +- Arvutame, kui lai kogu formaad on +- Leiame, kust alustada ja kus lõpetada, et formaat oleks kenasti keskel + +```mermaid +flowchart LR + A["Lõuendi laius: 1024px"] --> B["Formatsioon laiusega: 490px"] + B --> C["Algus X: 267px"] + C --> D["Vaenlase vahe: 98px"] + + subgraph "5x5 Vaenlase Formatsioon" + E["Rida 1: Y=0"] + F["Rida 2: Y=50"] + G["Rida 3: Y=100"] + H["Rida 4: Y=150"] + I["Rida 5: Y=200"] + end + + subgraph "Veeru Vahe" + J["Vea 1: X=267"] + K["Vea 2: X=365"] + L["Vea 3: X=463"] + M["Vea 4: X=561"] + N["Vea 5: X=659"] + end + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 +``` +Seejärel loo pesastatud tsüklid, et joonistada vaenlaste formaadi: - seejärel looge tsükkel, et joonistada koletiste massiiv ekraanile: +```javascript +for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { + for (let y = 0; y < 50 * 5; y += 50) { + ctx.drawImage(enemyImg, x, y); + } +} +``` - ```javascript - for (let x = START_X; x < STOP_X; x += 98) { - for (let y = 0; y < 50 * 5; y += 50) { - ctx.drawImage(enemyImg, x, y); - } - } - ``` +**See pesastatud tsükkel teeb järgmist:** +- Välimine tsükkel liigub vasakult paremale +- Sisemine tsükkel liigub ülevalt alla, luues korrapäraseid ridu +- Joonistame iga vaenlase sprite'i täpselt arvutatud x,y koordinaatidele +- Kõik on kenasti jaotatud ja organiseeritud professionaalse ilmega + +### 🔄 **Õppekontroll** +**Mängu joonistamise meistriklass**: Kontrolli oma terviklikku arusaamist renderdussüsteemist: +- ✅ Kuidas asünkroonne piltide laadimine takistab UI blokeerimist mängu käivitamisel? +- ✅ Miks arvutame vaenlaste positsioonid konstantide abil, mitte ei hardkodeeri neid? +- ✅ Milline on 2D joonistamiskonteksti roll joonistamisoperatsioonides? +- ✅ Kuidas pesastatud tsüklid loovad korraldatud sprite'ide vormistusi? + +**Jõudluse kaalutlused**: Sinu mäng demonstreerib nüüd: +- **Tõhusat ressursi laadimist**: Promise-põhine piltide haldus +- **Organiseeritud joonistamist**: Struktureeritud joonistamisoperatsioonid +- **Matemaatilist positsioneerimist**: Arvutatud sprite'i paigutus +- **Vigade haldamist**: Sujuvat vigade käsitlemist + +**Visuaalse programmeerimise kontseptsioonid**: Oled õppinud: +- **Koordinaatsüsteemid**: Matemaatika teisendamine ekraaniasenditeks +- **Sprite’i haldamine**: Mängugraafika laadimine ja kuvamine +- **Formatsiooni algoritmid**: Matemaatilised mustrid organiseeritud paigutusteks +- **Asünkroonsed operatsioonid**: Moodne JavaScript sujuvaks kasutajakogemuseks ## Tulemus -Valmis tulemus peaks välja nägema selline: +Lõpetatud tulemus peaks välja nägema selline: -![Must ekraan kangelase ja 5*5 koletistega](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.et.png) +![Musta taustaga ekraan kangelase ja 5*5 monsterdega](../../../../translated_images/partI-solution.36c53b48c9ffae2a.et.png) ## Lahendus -Proovige kõigepealt ise lahendada, kuid kui jääte hätta, vaadake [lahendust](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) +Proovi esmalt ise lahendada, kuid kui jääd hätta, vaata [lahendust](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) --- -## 🚀 Väljakutse +## GitHub Copilot Agenti Väljakutse 🚀 + +Kasuta Agendi režiimi, et täita järgmine väljakutse: -Olete õppinud joonistama 2D-keskse Canvas API-ga; vaadake [WebGL API-d](https://developer.mozilla.org/docs/Web/API/WebGL_API) ja proovige joonistada 3D-objekt. +**Kirjeldus:** Täienda oma kosmosemängu lõuendit, lisades visuaalseid efekte ja interaktiivseid elemente Canvas API tehnikate abil, mida oled õppinud. -## Loengu-järgne viktoriin +**Üleskutse:** Loo uus fail nimega `enhanced-canvas.html`, kus lõuendis kuvatakse animatsiooniga taustast säravad tähed, kangelase laeva pulsseeriv eluriba ja vaenlase laevad, mis aeglaselt allapoole liiguvad. Lisa JavaScripti kood, mis joonistab vilkuvaid tähti juhuslike positsioonide ja läbipaistvusega, rakendab eluriba, mis muudab värvi tervise taseme põhjal (roheline > kollane > punane), ja animeerib vaenlase laevade sujuva liikumise allapoole eri kiirustel. -[Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/32) +Lisateave [agendi režiimi](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kohta. -## Ülevaade ja iseseisev õppimine +## 🚀 Väljakutse -Õppige Canvas API kohta rohkem, [lugedes selle kohta](https://developer.mozilla.org/docs/Web/API/Canvas_API). +Oled õppinud 2D-le suunatud Canvas API-ga joonistamist; vaata ka [WebGL API-d](https://developer.mozilla.org/docs/Web/API/WebGL_API) ja proovi joonistada 3D-objekti. + +## Loengu Järgne Test + +[Loengu järel test](https://ff-quizzes.netlify.app/web/quiz/32) + +## Ülevaade & Iseõpe + +Õpi Canvas API kohta rohkem, [lugedes selle kohta](https://developer.mozilla.org/docs/Web/API/Canvas_API). + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Ava brauseri konsool ja loo lõuendi element käsuga `document.createElement('canvas')` +- [ ] Proovi joonistada ristkülikut `fillRect()` meetodiga lõuendi kontekstis +- [ ] Katseta erinevate värvidega, kasutades `fillStyle` omadust +- [ ] Joonista lihtne ring kasutades `arc()` meetodit + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida loengu lõpu test ja saa aru lõuendi aluspõhimõtetest +- [ ] Loo lõuendi joonistusrakendus mitme kujundi ja värviga +- [ ] Rakenda piltide laadimist ja sprite’ide renderdamist oma mängus +- [ ] Ehita lihtne animatsioon, mis liigutab objekte lõuendil +- [ ] Harjuta lõuendi teisendusi nagu skaleerimine, pööramine ja nihutamine + +### 📅 **Sinu nädala pikkune lõuendi teekond** +- [ ] Lõpeta kosmosemäng uhkete graafika ja sprite-animatsioonidega +- [ ] Õpi keerukaid lõuendi tehnikaid nagu gradientid, mustrid ja kompositsioon +- [ ] Loo interaktiivseid visualiseeringuid andmete esitamiseks lõuendil +- [ ] Õpi lõuendi optimeerimistehnikaid sujuvuse tagamiseks +- [ ] Ehita joonistus- või maalimisrakendus erinevate tööriistadega +- [ ] Uuri loomingulist kodeerimist ja generatiivset kunsti lõuendil + +### 🌟 **Sinu kuu pikkune graafikateadmiste valdamine** +- [ ] Ehita keerukaid visuaalseid rakendusi Canvas 2D ja WebGL abil +- [ ] Õpi graafikaprogrammeerimise põhimõtteid ja shader’ite aluseid +- [ ] Panusta avatud lähtekoodi graafikateekidesse ja visualiseerimistööriistadesse +- [ ] Valda jõudluse optimeerimist graafikamahukate rakenduste jaoks +- [ ] Loo hariduslikku materjali lõuendiprogrammeerimisest ja arvutigraafikast +- [ ] Saa graafikaprogrammeerimise eksperdiks, kes aitab teisi visuaalsete kogemuste loomisel + +## 🎯 Sinu lõuendi graafikateadmiste meisterlikkuse ajaskaala + +```mermaid +timeline + title Canvas API õppimise edenemine + + section Canvas põhialused (15 minutit) + Põhitoimingud: Elemendi viide + : 2D konteksti ligipääs + : Koordinaatsüsteem + : Lihtsa kujundi joonistamine + + section Joonistamistehnikad (20 minutit) + Graafika algelemendid: Ristkülikud ja ringid + : Värvid ja stiilid + : Teksti renderdamine + : Raja toimingud + + section Pildi käsitlemine (25 minutit) + Varade haldamine: Pildiobjekti loomine + : Asünkroonne laadimise mustrid + : Vea käitlemine + : Tõhususe optimeerimine + + section Mängugraafika (30 minutit) + Spriti renderdamine: Positsioneerimisalgoritmid + : Formatsiooni arvutused + : Stseeni koostamine + : Kaadri renderdamine + + section Täiustatud tehnikad (40 minutit) + Visuaalsed efektid: Transformatsioonid + : Animatsioonid + : Kihistamine + : Oleku haldamine + + section Tõhusus (35 minutit) + Optimeerimine: Tõhus joonistamine + : Mälu haldamine + : Kaadrisageduse kontroll + : Varade vahemällu salvestamine + + section Professionaalsed oskused (1 nädal) + Tootmiskgraafika: WebGL integratsioon + : Canvas teegid + : Mängumootorid + : Platvormideülene kaalutlus + + section Täiustatud graafika (1 kuu) + Spetsialiseeritud rakendused: Andmete visualiseerimine + : Interaktiivne kunst + : Reaalajas efektid + : 3D graafika +``` +### 🛠️ Sinu lõuendi graafikatehnikate kokkuvõte + +Pärast selle tunni lõpetamist oled omandanud: +- **Canvas API valdamine**: Täielik arusaamine 2D graafikaprogrammeerimisest +- **Koordinaatide matemaatika**: Täpsed positsioneerimis- ja paigutusalgoritmid +- **Varade haldus**: Professionaalne piltide laadimine ja vigade käsitlemine +- **Renderdus-pipeline**: Struktureeritud lähenemine stseenide koostamisele +- **Mängugraafika**: Sprite’ide positsioneerimine ja formatsioonide arvutamine +- **Asünkroonne programmeerimine**: Moodsad JavaScripti mustrid sujuvaks tööks +- **Visuaalne programmeerimine**: Matemaatika tõlkimine ekraanikujutisteks + +**Reaalmaailma rakendused**: Sinu lõuendi oskused sobivad otse järgmiste jaoks: +- **Andmete visualiseerimine**: Graafikud, diagrammid ja interaktiivsed juhtpaneelid +- **Mänguarendus**: 2D-mängud, simulatsioonid ja interaktiivsed kogemused +- **Digitaalne kunst**: Loominguline kodeerimine ja generatiivsed kunstiprojektid +- **UI/UX disain**: Kohandatud graafika ja interaktiivsed elemendid +- **Haridustarkvara**: Visuaalsed õppimisvahendid ja simulatsioonid +- **Veebirakendused**: Dünaamilised graafikud ja reaalajas visualiseeringud + +**Saadud professionaalsed oskused**: Nüüd oskad: +- **Ehita** kohandatud graafilahendusi ilma väliste teekideta +- **Optimeeri** renderdusjõudlust sujuva kasutajakogemuse tagamiseks +- **Debugi** keerulisi visuaalseid probleeme brauseri arendajatööriistadega +- **Disaini** skaleeritavaid graafikasüsteeme matemaatiliste põhimõtete alusel +- **Integreeri** Canvas graafikat kaasaegsete veebi-rakendusraamistikega + +**Canvas API meetodid, mida valdad**: +- **Elemendi haldus**: getElementById, getContext +- **Joonistusoperatsioonid**: fillRect, drawImage, fillStyle +- **Varade laadimine**: Pildiobjektid, Promise-mustrid +- **Matemaatiline positsioneerimine**: Koordinaatarvutused, formaationalgoritmid + +**Järgmine tase**: Oled valmis lisama animatsiooni, kasutajaliidest, kokkupõrke tuvastust või uurima 3D graafikat WebGL-iga! + +🌟 **Saavutus omandatud**: Oled loonud täieliku mängu renderdamissüsteemi, kasutades Canvas API põhitehnikaid! ## Ülesanne -[Mängige Canvas API-ga](assignment.md) +[Mängi Canvas API-ga](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüdleme täpsuse poole, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument oma emakeeles tuleks lugeda autoriteetseks allikaks. Olulise info puhul on soovitatav kasutada professionaalse inimese tehtud tõlget. Me ei vastuta käesoleva tõlke kasutamisest tulenevate arusaamatuste ega valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/2-drawing-to-canvas/assignment.md b/translations/et/6-space-game/2-drawing-to-canvas/assignment.md index 38994e420..693436f0c 100644 --- a/translations/et/6-space-game/2-drawing-to-canvas/assignment.md +++ b/translations/et/6-space-game/2-drawing-to-canvas/assignment.md @@ -1,25 +1,83 @@ -# Mäng Canvas API-ga +# Ülesanne: Uuri Canvas API-d + +## Õpieesmärgid + +Selle ülesande täitmisega näitad oma arusaamist Canvas API põhitõdedest ning rakendad loomingulist probleemide lahendamist, et luua visuaalseid elemente kasutades JavaScripti ja HTML5 canvas elementi. ## Juhised -Vali üks element Canvas API-st ja loo selle ümber midagi huvitavat. Kas suudad luua väikese galaktika korduvatest tähtedest? Kas suudad luua huvitava tekstuuri värvilistest joontest? Inspiratsiooni saamiseks võid vaadata CodePeni (aga ära kopeeri). +Vali üks Canvas API aspekt, mis sind huvitab, ja loo selle ümber kaasahaarav visuaalne projekt. See ülesanne julgustab sind katsetama oma joonistamisvõimalusi ning ehitama midagi unikaalselt enda oma. + +### Projektide ideed inspiratsiooniks + +**Geomeetrilised mustrid:** +- **Loo** galaktika animeeritud vilkuvate tähtedega juhuslike asukohtadega +- **Kujunda** huvitav tekstuur korduvate geomeetriliste kujunditega +- **Ehita** kaleidoskoobi efekt pöörlevate ja värvikirevate mustritega + +**Interaktiivsed elemendid:** +- **Arenda** joonistusriist, mis reageerib hiire liikumisele +- **Rakenda** kujundid, mis muudavad värvi klikimisel +- **Kujunda** lihtne animatsiooni tsükkel liikuvate elementidega + +**Mängudega seotud graafika:** +- **Loo** keriv taust ruumimängule +- **Valmista** osakeste efektid nagu plahvatused või maagilised võlud +- **Loo** animeeritud sprite'id mitme kaadriga + +### Arendusjuhised + +**Uurimine ja inspiratsioon:** +- **Sirvi** CodePeni loomingulisi canvas näiteid (inspiratsiooniks, mitte kopeerimiseks) +- **Uuri** [Canvas API dokumentatsiooni](https://developer.mozilla.org/docs/Web/API/Canvas_API) täiendavate meetodite kohta +- **Katseta** erinevaid joonistusmeetodeid, värve ja animatsioone + +**Tehnilised nõuded:** +- **Kasuta** õiget canvas seadistust koos `getContext('2d')` +- **Lisa** olulised kommentaarid oma lähenemise selgitamiseks +- **Testi** oma koodi põhjalikult, et see töötaks veatult +- **Rakenda** kaasaegset JavaScripti süntaksit (const/let, nooled-funktsioonid) + +**Loominguline väljendus:** +- **Keskendu** ühele Canvas API funktsioonile, kuid uuri seda põhjalikult +- **Lisa** oma loominguline nüanss, et teha projekt isiklikuks +- **Mõtle** kuidas võiks su loomingust saada osa suuremast rakendusest + +### Esitamise juhised + +Esita oma valmis projekt ühes HTML-failis koos manustatud CSS-i ja JavaScriptiga või eraldi failidena kaustas. Lisa lühike kommentaar oma loominguliste valikute ja Canvas API funktsioonide kohta, mida uurisid. ## Hindamiskriteeriumid -| Kriteerium | Silmapaistev | Piisav | Vajab parandamist | -| ---------- | --------------------------------------------------------- | ---------------------------------- | --------------------- | -| | Esitatud kood näitab huvitavat tekstuuri või kuju | Kood on esitatud, kuid ei tööta | Koodi ei ole esitatud | +| Kriteerium | Silmapaistev | Piisav | Vajab parendamist | +|------------|---------------|--------|-------------------| +| **Tehniline teostus** | Canvas API kasutamine loominguliselt mitme funktsiooniga, kood töötab laitmatult, rakendatud kaasaegne JavaScripti süntaks | Canvas API korrektne kasutus, kood töötab väikeste probleemidega, põhiline teostus | Canvas API kasutamise katse, kuid koodis on vead või see ei käivitu | +| **Loomingulisus ja disain** | Väga originaalne kontseptsioon lihvitud visuaalse atraktiivsusega, näitab sügavat Canvas-funktsiooni uurimist | Canvas funktsioonide hea kasutus mõne loomingulise elemendiga, solidne visuaalne tulemus | Põhiline teostus minimaalse loomingulisuse või visuaalse atraktiivsusega | +| **Koodi kvaliteet** | Hästi organiseeritud, kommenteeritud kood, mis järgib parimaid tavasid, tõhusad algoritmid | Puhas kood mõne kommentaariga, järgib põhilisi kodeerimisstandardeid | Kood on ebaorganiseeritud, minimaalsed kommentaarid, ebatõhus teostus | + +## Refleksiooniküsimused + +Pärast oma projekti lõpetamist mõtle järgmistele küsimustele: + +1. **Millise Canvas API funktsiooni valisid ja miks?** +2. **Milliste väljakutsetega projekti loomisel kokku puutusid?** +3. **Kuidas võiksid seda projekti laiendada suuremaks rakenduseks või mänguks?** +4. **Milliseid teisi Canvas API funktsioone sooviksid järgmiseks uurida?** + +> 💡 **Kasulik näpunäide**: Alusta lihtsast ning lisa keerukust järk-järgult. Hästi teostatud lihtne projekt on parem kui üleambitsioonikas projekt, mis ei tööta korralikult! --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/3-moving-elements-around/README.md b/translations/et/6-space-game/3-moving-elements-around/README.md index 986775a4b..d19e6d934 100644 --- a/translations/et/6-space-game/3-moving-elements-around/README.md +++ b/translations/et/6-space-game/3-moving-elements-around/README.md @@ -1,114 +1,283 @@ -# Kosmosemängu loomine, 3. osa: Liikumise lisamine +# Ruumu mängu loomine, 3. osa: liikumise lisamine + +```mermaid +journey + title Sinu Mängu Animatsiooni Teekond + section Liikumise Põhitõed + Mõista liikumise põhimõtteid: 3: Student + Õpi koordinaatide uuendamist: 4: Student + Rakenda põhilist liikumist: 4: Student + section Mängija Juhtnupud + Töötle klaviatuuri sündmusi: 4: Student + Takista vaikimisi käitumist: 5: Student + Loo reageerivad juhtnupud: 5: Student + section Mängusüsteemid + Ehita mängutsükkel: 5: Student + Halda objekti elutsüklit: 5: Student + Rakenda pub/sub mustrit: 5: Student +``` +Mõtle oma lemmikmängudele – mis teeb neist kaasahaaravad, ei ole ainult ilusad graafika, vaid see, kuidas kõik liigub ja reageerib sinu tegevustele. Praegu on sinu ruumu mäng nagu ilus maal, aga me hakkame lisama liikumist, mis toob selle ellu. + +Kui NASA insenerid programmeerisid Apollo missioonide juhtrauakompuutrit, seisid nad silmitsi sarnase väljakutsega: kuidas saada kosmoselaev reageerima piloodi sisendile, samal ajal automaatselt teed parandades? Täna õpitud põhimõtted kajastavad samu kontseptsioone – mängija juhitud liikumise ja automaatsete süsteemsete käitumiste juhtimist. + +Selles õppetükis õpid, kuidas lasta kosmoselaevadel ekraanil sujuvalt libiseda, reageerida mängija käsklustele ja luua voolavaid liikumismustreid. Me jagame kõik kontseptsioonid hallatavateks osadeks, mis ehituvad üksteisele loomulikult peale. + +Lõpuks lendavad mängijad oma kangelase laevaga ümber ekraani, samal ajal kui vaenlase laevad patrulleerivad üleval. Veelgi olulisem on see, et saad aru mängu liikumissüsteemide põhiprintsiipidest. + +```mermaid +mindmap + root((Mängu Animatsioon)) + Liikumise Tüübid + Mängija Kontrollib + Automaatne Liikumine + Füüsikal põhinev + Skriptitud Rajad + Sündmuste Töötlemine + Klaviatuuri Sisend + Hiire Sündmused + Puute Kontrollid + Vaikimisi Takistamine + Mängu Tsükkel + Loogika Uuendamine + Kaadri Joonistamine + Lõuendi Puhastamine + Kaadrisageduse Kontroll + Objektide Halduse + Asukoha Uuendused + Kokkupõrke Tuvastamine + Elutsükli Haldus + Oleku Jälgimine + Kommunikatsioon + Pub/Sub Muster + Sündmuste Tekitajad + Sõnumite Edastamine + Lahtise Sidumise +``` +## Eelkursuse viktoriin -## Eelloengu viktoriin +[Eelkursuse viktoriin](https://ff-quizzes.netlify.app/web/quiz/33) -[Eelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/33) +## Mängu liikumise mõistmine -Mängud ei ole eriti lõbusad, kuni ekraanil hakkavad tulnukad ringi liikuma! Selles mängus kasutame kahte tüüpi liikumist: +Mängud ärkavad ellu, kui asjad hakkavad ümberringi liikuma, ja põhimõtteliselt saab seda teha kahel moel: -- **Klaviatuuri/hiire liikumine**: kui kasutaja suhtleb klaviatuuri või hiirega, et liigutada objekti ekraanil. -- **Mängu poolt tekitatud liikumine**: kui mäng liigutab objekti kindla ajavahemiku järel. +- **Mängija juhitud liikumine**: Kui vajutad klahvi või klikid hiirega, liigub midagi. See on otsene side sinu ja mängumaailma vahel. +- **Automaatne liikumine**: Kui mäng otsustab ise midagi liigutada – näiteks need vaenlase laevad, mis peavad patrulleerima ekraani põhjal, olenemata sellest, kas sina midagi teed või mitte. -Kuidas siis asju ekraanil liigutada? Kõik põhineb ristkoordinaatidel: me muudame objekti asukohta (x, y) ja joonistame ekraani uuesti. +Arvutiekraanil objektide liigutamine on lihtsam, kui tundub. Mäletad x- ja y-koordinate matemaatikatunnist? Täpselt nendega me siin töötame. Kui Galileo jälgis 1610. aastal Jupiteri kuu tiiru, tegi ta sisuliselt sama – asukohtade plottimine aja jooksul liikumismustrite mõistmiseks. -Tavaliselt on liikumise saavutamiseks ekraanil vaja järgmisi samme: +Asjade liigutamine ekraanil on nagu flipbook animatsiooni loomine – tuleb järgida neid kolme lihtsat sammu: + +```mermaid +flowchart LR + A["Kaader N"] --> B["Uuenda positsioone"] + B --> C["Tühjenda lõuend"] + C --> D["Joonista objektid"] + D --> E["Kaader N+1"] + E --> F{Jätkata?} + F -->|Jah| B + F -->|Ei| G["Mäng läbi"] + + subgraph "Animatsiooni tsükkel" + H["1. Arvuta uued positsioonid"] + I["2. Kustuta eelmine kaader"] + J["3. Joonista uus kaader"] + end + + style B fill:#e1f5fe + style C fill:#ffebee + style D fill:#e8f5e8 +``` +1. **Uuenda asukohta** – muuda, kuhu su objekt peaks minema (näiteks liiguta seda 5 pikslit paremale) +2. **Kustuta vana joonis** – puhasta ekraan, et mitte näha kummitusradade järelmaid +3. **Joonista uus joonis** – pane oma objekt uude kohta -1. **Määra objektile uus asukoht**; see on vajalik, et tajuda objekti liikumist. -2. **Puhasta ekraan**, ekraan tuleb joonistuste vahel puhastada. Seda saab teha, joonistades ristküliku, mille täidame taustavärviga. -3. **Joonista objekt uuesti** uues asukohas. Sellega saavutame lõpuks objekti liikumise ühest asukohast teise. +Tee seda piisavalt kiiresti ja boom! Sul on sujuv liikumine, mis tundub mängijatele loomulik. -Näiteks võib see koodis välja näha järgmiselt: +Siin on, kuidas see võib koodis välja näha: ```javascript -//set the hero's location +// Määra kangelase asukoht hero.x += 5; -// clear the rectangle that hosts the hero +// Puhasta ristkülik, kus kangelane asub ctx.clearRect(0, 0, canvas.width, canvas.height); -// redraw the game background and hero -ctx.fillRect(0, 0, canvas.width, canvas.height) +// Joonista mängu taust ja kangelane uuesti +ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "black"; ctx.drawImage(heroImg, hero.x, hero.y); ``` -✅ Kas oskad mõelda põhjusele, miks kangelase korduv joonistamine mitmel kaadril sekundis võib tekitada jõudluskulusid? Loe [alternatiive sellele mustrile](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas). +**Siin on, mida see kood teeb:** +- **Uuendab** kangelase x-koordinaati 5 piksliga, et liigutada horisontaalselt +- **Puhastab** kogu lõuendi ala, et eemaldada eelmine joonis +- **Täidab** lõuendi musta taustavärviga +- **Joonistab uuesti** kangelase pildi uues asukohas + +✅ Kas suudad mõelda, miks kangelast mitu korda sekundis uuesti joonistades võib jõudlus kannatada? Loe [alternatiividest sellele mustrile](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas). ## Klaviatuuri sündmuste käsitlemine -Sündmusi käsitletakse, sidudes konkreetseid sündmusi koodiga. Klaviatuuri sündmused käivitatakse kogu aknas, samas kui hiire sündmused, nagu `click`, saab siduda konkreetse elemendi klõpsamisega. Kasutame kogu projekti vältel klaviatuuri sündmusi. +Siin ühendame mängija sisendi mängu tegevusega. Kui keegi vajutab tühikuklahvi laseri tulistamiseks või nooleklahvi asteroidist põgenemiseks, peab mäng selle sisendi ära tundma ja reageerima. + +Klaviatuuri sündmused toimuvad akna tasandil, mis tähendab, et kogu brauseriaken kuulab neid klahvivajutusi. Hiireklõpsud seevastu võidakse siduda spetsiifiliste elementidega (nt nupu klõps). Meie ruumumängus keskendume klaviatuurikontrollidele, sest need annavad mängijale traditsioonilise arcade tunde. -Sündmuse käsitlemiseks tuleb kasutada akna `addEventListener()` meetodit ja anda sellele kaks sisendparameetrit. Esimene parameeter on sündmuse nimi, näiteks `keyup`. Teine parameeter on funktsioon, mida tuleks sündmuse toimumise tulemusena käivitada. +See meenutab mulle, kuidas 1800ndatel pidid telegraafi operaatorid morse-koodi tõlgendama mõtestatud sõnumiteks – me teeme midagi sarnast, tõlgime klahvivajutused mängukäsklusteks. + +Sündmuse käsitlemiseks tuleb kasutada akna `addEventListener()` meetodit ja anda sellele kaks sisendparameetrit. Esimene parameeter on sündmuse nimi, näiteks `keyup`. Teine parameeter on funktsioon, mida kutsutakse, kui sündmus toimub. Näide: ```javascript window.addEventListener('keyup', (evt) => { - // `evt.key` = string representation of the key + // evt.key = võtme stringiesitus if (evt.key === 'ArrowUp') { - // do something + // tee midagi } -}) +}); ``` -Klaviatuuri sündmuste puhul on sündmusel kaks omadust, mida saab kasutada, et näha, millist klahvi vajutati: +**Lahti seletatud, mis siin juhtub:** +- **Kuulab** klaviatuuri sündmusi kogu aknas +- **Tabab** sündmuse objekti, mis sisaldab infot, millist klahvi vajutati +- **Kontrollib**, kas vajutatud klahv vastab kindlale klahvile (siin nooleklahv üles) +- **Täidab** koodi, kui tingimus on täidetud -- `key`, see on vajutatud klahvi stringiline esitus, näiteks `ArrowUp` -- `keyCode`, see on numbriline esitus, näiteks `37`, mis vastab `ArrowLeft`. +Klahvi sündmuste puhul on sündmusel kaks omadust, mida saab kasutada, et näha, milline klahv vajutati: -✅ Klaviatuuri sündmuste manipuleerimine on kasulik ka väljaspool mänguarendust. Milliseid muid kasutusviise oskad sellele tehnikale mõelda? +- `key` – stringi kujul vajutatud klahv, näiteks `'ArrowUp'` +- `keyCode` – numbriline kujutis, näiteks `37`, mis vastab `ArrowLeft`-le -### Erilised klahvid: hoiatus +✅ Klahvi sündmuste manipuleerimine on kasulik ka väljaspool mängude arendust. Milliseid muid kasutusvõimalusi oskad selle tehnikaga seostada? -On mõned *erilised* klahvid, mis mõjutavad akent. See tähendab, et kui kuulad `keyup` sündmust ja kasutad neid erilisi klahve kangelase liigutamiseks, toimub ka horisontaalne kerimine. Seetõttu võib olla vajalik *väljalülitada* see sisseehitatud brauseri käitumine, kui oma mängu arendad. Selleks on vaja sellist koodi: +```mermaid +sequenceDiagram + participant User + participant Browser + participant EventSystem + participant GameLogic + participant Hero + + User->>Browser: Vajutab nooleklahvi üles + Browser->>EventSystem: keydown sündmus + EventSystem->>EventSystem: preventDefault() + EventSystem->>GameLogic: emit('KEY_EVENT_UP') + GameLogic->>Hero: hero.y -= 5 + Hero->>Hero: Positsiooni uuendamine + + Note over Browser,GameLogic: Sündmuste voog takistab brauseri vaikimisi toiminguid + Note over GameLogic,Hero: Pub/sub muster võimaldab puhast suhtlust +``` +### Eriklahvid: hoiatus! + +Mõned klahvid omavad brauseri sisseehitatud käitumisi, mis võivad segada sinu mängu. Nooleklahvid kerivad lehte ja tühikuklahv hüppab allapoole – käitumised, mida sa ei taha, kui keegi püüab oma kosmoselaeva juhtida. + +Saame need vaikimisi käitumised ära keelata ja lasta mängul sisendit töödelda. See sarnaneb sellega, kuidas varased arvutiprograamijad pidid süsteemi katkestusi ülekirjutama spetsiaalsete käitumiste loomiseks – meie teeme seda lihtsalt brauseri tasandil. Näiteks: ```javascript -let onKeyDown = function (e) { +const onKeyDown = function (e) { console.log(e.keyCode); switch (e.keyCode) { case 37: case 39: case 38: - case 40: // Arrow keys + case 40: // Nooleklahvid case 32: e.preventDefault(); - break; // Space + break; // Tühik default: - break; // do not block other keys + break; // ära blokeeri teisi klahve } }; window.addEventListener('keydown', onKeyDown); ``` -Ülaltoodud kood tagab, et nooleklahvid ja tühikuklahv ei täida oma *vaikimisi* käitumist. *Väljalülitamise* mehhanism toimub, kui kutsume `e.preventDefault()`. +**Seda vältimist selgitav kood:** +- **Kontrollib** spetsiifilisi klahvikoodid, mis võivad põhjustada soovimatut brauserikäitumist +- **Tõkestab** vaikimisi brauseritoimingud nooleklahvide ja tühiku puhul +- **Lubab** teistel klahvidel töötada tavapäraselt +- **Kasutab** `e.preventDefault()` brauseri vaikimisi käitumise peatamiseks + +### 🔄 **Pedagoogiline kontrollpunkt** +**Sündmuste käsitlemise mõistmine**: Enne automaatse liikumise juurde liikumist veendu, et sa suudad: +- ✅ Selgitada vahet `keydown` ja `keyup` sündmuste vahel +- ✅ Mõista, miks me takistame vaikimisi brauserikäske +- ✅ Kirjeldada, kuidas sündmuse kuulajad seovad kasutaja sisendi mängu loogikaga +- ✅ Tuvastada, millised klahvid võivad segada mängujuhtimist -## Mängu poolt tekitatud liikumine +**Kiire enesekontroll**: Mis juhtub, kui sa ei takista nooleklahvide vaikimisi käitumist? +*Vastus: Brauser kerib lehte, segades mängu liikumist* -Saame asju ise liikuma panna, kasutades taimerit, näiteks `setTimeout()` või `setInterval()` funktsiooni, mis uuendab objekti asukohta iga ajavahemiku järel. Näiteks võib see välja näha järgmiselt: +**Sündmussüsteemi arhitektuur**: Sa saad nüüd aru: +- **Aknatasandi kuulamine**: sündmuste tabamine brauseri tasandil +- **Sündmuse objekti omadused**: `key` stringid vs `keyCode` numbrid +- **Vaikimisi käitumise tõkestamine**: soovimatute brauseritoimingute peatamine +- **Tingimusloogika**: reageerimine kindlatele klahvikombinatsioonidele + +## Mängu poolt põhjustatud liikumine + +Räägime nüüd objektidest, mis liiguvad ilma mängija sisendita. Mõtle vaenlase laevadele, mis kruiisivad mööda ekraani, kuulidele, mis lendavad sirgjooneliselt, või pilvedele, mis taustal triivivad. See autonoomne liikumine paneb su mängumaailma elama isegi siis, kui keegi kontrollerit ei puutu. + +Me kasutame JavaScripti sisseehitatud taimerit, et perioodiliselt positsioone uuendada. See kontseptsioon sarnaneb pendelkella tööpõhimõttega – regulaarne mehaanism, mis tekitab järjepidevaid, ajastatud toiminguid. Niimoodi see lihtne on: ```javascript -let id = setInterval(() => { - //move the enemy on the y axis +const id = setInterval(() => { + // Move the enemy on the y axis enemy.y += 10; -}) +}, 100); ``` -## Mängu tsükkel +**See liikumiskood teeb järgmist:** +- **Luuakse** taimer, mis töötab iga 100 millisekundi tagant +- **Uuendab** vaenlase y-koordinaati iga kord 10 pikslit +- **Salvestab** intervalli ID, et saaks vajadusel peatada +- **Liigutab** vaenlast automaatselt allapoole ekraanil + +## Mängutsükkel -Mängu tsükkel on kontseptsioon, mis sisuliselt tähendab funktsiooni, mida kutsutakse regulaarselt. Seda nimetatakse mängu tsükliks, kuna kõik, mis peaks olema kasutajale nähtav, joonistatakse tsüklisse. Mängu tsükkel kasutab kõiki mängu objekte, mis on mängu osa, joonistades need kõik, välja arvatud juhul, kui mingil põhjusel ei peaks need enam mängu osa olema. Näiteks kui objekt on vaenlane, keda laseriga tabati ja kes plahvatab, ei ole see enam praeguse mängu tsükli osa (õpid sellest rohkem järgnevates tundides). +See on kontseptsioon, mis seob kõik kokku – mängutsükkel. Kui sinu mäng oleks film, siis mängutsükkel oleks filmiprojektor, mis näitab järjestikku kaadreid nii kiiresti, et kõik tundub sujuvalt liikuvat. -Näiteks võib mängu tsükkel koodis välja näha järgmiselt: +Iga mängus jookseb üks selline tsükkel taga. See on funktsioon, mis uuendab kõiki mänguobjekte, joonistab ekraani uuesti ja kordab seda. See hoiab silma peal kangelasel, kõigil vaenlastel, lendavatel laseritel – kogu mängu seisundil. +See kontseptsioon meenutab mulle, kuidas varased filmianimaatorid, näiteks Walt Disney, pidid tegelasi kaadri kaupa uuesti joonistama, et luua liikumise illusioon. Me teeme sama, aga koodiga, mitte pliiatsitega. + +Siin on, kuidas tüüpiline mängutsükkel võib koodis välja näha: + +```mermaid +flowchart TD + A["Alusta Mängusilmust"] --> B["Tühjenda Lõuend"] + B --> C["Värvi Taust"] + C --> D["Uuenda Mänguobjekte"] + D --> E["Joonista Kangelane"] + E --> F["Joonista Vaenlased"] + F --> G["Joonista Kasutajaliidese Elemendid"] + G --> H["Oota Järgmise Kaadri Järgi"] + H --> I{Kas Mäng Jookseb?} + I -->|Jah| B + I -->|Ei| J["Lõpeta Mäng"] + + subgraph "Kaadri Suhtarvukontroll" + K["60 FPS = 16.67ms"] + L["30 FPS = 33.33ms"] + M["10 FPS = 100ms"] + end + + style B fill:#ffebee + style D fill:#e1f5fe + style E fill:#e8f5e8 + style F fill:#e8f5e8 +``` ```javascript -let gameLoopId = setInterval(() => +const gameLoopId = setInterval(() => { function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "black"; @@ -116,21 +285,33 @@ let gameLoopId = setInterval(() => drawHero(); drawEnemies(); drawStaticObjects(); + } + gameLoop(); }, 200); ``` -Ülaltoodud tsüklit kutsutakse iga `200` millisekundi järel, et lõuend uuesti joonistada. Sul on võimalus valida parim intervall, mis sobib sinu mängule. +**Mängutsükli struktuuri mõistmine:** +- **Puhastab** kogu lõuendi, et eemaldada eelmine kaader +- **Täidab** tausta ühevärviliselt +- **Joonistab** kõik mänguobjektid nende praegustes asukohtades +- **Kordab** seda protsessi iga 200 millisekundi tagant, et luua sujuv animatsioon +- **Halda** kaadrisagedust intervallide ajastamisega + +## Ruumu mängu jätkamine + +Nüüd lisame liikumise staatilisele stseenile, mille varem viisid ellu. Muudame selle ekraanipildist interaktiivseks kogemuseks. Läbime samm-sammult kõik osad, et iga tükk ehiks loomulikult eelmisele peale. -## Kosmosemängu jätkamine +Võta kood koos eelmisest õppetükist (või alusta värskelt [Part II- starter](../../../../6-space-game/3-moving-elements-around/your-work) kaustast, kui vajad algust). -Võta olemasolev kood ja laienda seda. Alusta kas koodiga, mille lõpetasid esimeses osas, või kasuta [II osa algkoodi](../../../../6-space-game/3-moving-elements-around/your-work). +**Täna ehitame välja:** +- **Kangelase juhtimine**: nooleklahvid juhivad sinu kosmoselaeva ümber ekraani +- **Vaenlaste liikumine**: need tulnukate laevad alustavad oma rünnakut -- **Kangelase liigutamine**: lisad koodi, et saaksid kangelast nooleklahvide abil liigutada. -- **Vaenlaste liikumine**: lisad koodi, et vaenlased liiguksid ülalt alla kindla kiirusega. +Alustame funktsioonide rakendamist. ## Soovitatud sammud -Leia failid, mis on sinu jaoks loodud kaustas `your-work`. See peaks sisaldama järgmist: +Leia faile, mis on loodud sinu jaoks `your-work` alamkaustas. Seal peaks olema järgmised: ```bash -| assets @@ -141,25 +322,29 @@ Leia failid, mis on sinu jaoks loodud kaustas `your-work`. See peaks sisaldama j -| package.json ``` -Alusta oma projekti kaustas `your_work`, sisestades: +Alusta oma projekti `your-work` kaustas, tippides: ```bash cd your-work npm start ``` -Ülaltoodud käivitab HTTP serveri aadressil `http://localhost:5000`. Ava brauser ja sisesta see aadress, praegu peaks see kuvama kangelase ja kõik vaenlased; miski ei liigu - veel! +**Mis see käsk teeb:** +- **Navigeerib** sinu projekti kataloogi +- **Käivtab** HTTP serveri aadressil `http://localhost:5000` +- **Serverdab** sinu mängufailid, et saaksid neid brauseris testida + +Ülaltoodud käsk käivitab HTTP serveri aadressil `http://localhost:5000`. Ava brauser ja sisesta see aadress, praegu peaksid nägema kangelast ja kõiki vaenlasi; aga liikumist veel ei toimu! ### Lisa kood -1. **Lisa spetsiaalsed objektid** `kangelase`, `vaenlase` ja `mängu objekti` jaoks, neil peaks olema `x` ja `y` omadused. (Tuleta meelde osa [Pärand või kompositsioon](../README.md)). +1. **Lisa eraldi objektid** `hero`, `enemy` ja `game object` jaoks, neil peaksid olema `x` ja `y` omadused. (Mäleta osa [Pärilus või kompositsioon](../README.md)). + + *NÕUANNE* `game object` peaks olema see, millel on `x` ja `y` ning võime lõpetada lõuendile joonistamist. - *VIHJE* `mängu objekt` peaks olema see, millel on `x` ja `y` ning võime end lõuendile joonistada. + > **Vihje**: Alusta uue `GameObject` klassi lisamisest koos alljärgneva konstruktoriga ja siis joonista see lõuendile: - >vihje: alusta uue GameObject klassi lisamisega, mille konstruktor on määratletud allpool, ja joonista see lõuendile: - ```javascript - class GameObject { constructor(x, y) { this.x = x; @@ -177,12 +362,58 @@ npm start } ``` - Nüüd laienda seda GameObjecti, et luua kangelane ja vaenlane. + **See baas klass teeb:** + - **Määratleb** üldised omadused, mida kõik mänguobjektid jagavad (positsioon, suurus, pilt) + - **Sisaldab** `dead` lippu, et jälgida, kas objekt tuleks eemaldada + - **Pakku** `draw()` meetodi, mis joonistab objekti lõuendile + - **Seab** vaikimisi väärtused kõigile omadustele, mida lapsklassid saavad üle kirjutada + +```mermaid +classDiagram + class GameObject { + +x: number + +y: number + +dead: boolean + +type: string + +width: number + +height: number + +img: Image + +draw(ctx) + } + + class Hero { + +speed: number + +type: "Kangelane" + +width: 98 + +height: 75 + } + + class Enemy { + +type: "Vaenlane" + +width: 98 + +height: 50 + +setInterval() + } + + GameObject <|-- Hero + GameObject <|-- Enemy + + class EventEmitter { + +listeners: object + +on(message, listener) + +emit(message, payload) + } +``` + Nüüd laienda seda `GameObject`-i, et luua `Hero` ja `Enemy`: ```javascript class Hero extends GameObject { constructor(x, y) { - ...it needs an x, y, type, and speed + super(x, y); + this.width = 98; + this.height = 75; + this.type = "Hero"; + this.speed = 5; } } ``` @@ -191,129 +422,173 @@ npm start class Enemy extends GameObject { constructor(x, y) { super(x, y); - (this.width = 98), (this.height = 50); + this.width = 98; + this.height = 50; this.type = "Enemy"; - let id = setInterval(() => { + const id = setInterval(() => { if (this.y < canvas.height - this.height) { this.y += 5; } else { - console.log('Stopped at', this.y) + console.log('Stopped at', this.y); clearInterval(id); } - }, 300) + }, 300); } } ``` -2. **Lisa klaviatuuri sündmuste käsitlejad**, et käsitleda kangelase liikumist (liiguta kangelast üles/alla vasakule/paremale). + **Peamised mõisted nendes klassides:** + - **Pärineb** `GameObject`-ist, kasutades `extends` märksõna + - **Kutsub** vanema konstruktorit `super(x, y)` abil + - **Seab** spetsiifilised mõõtmed ja omadused iga objekti tüübi jaoks + - **Rakendab** automaatse liikumise vaenlastele, kasutades `setInterval()` - *MEENUTA* see on ristkoordinaatide süsteem, vasak ülemine nurk on `0,0`. Samuti ära unusta lisada koodi, et peatada *vaikimisi käitumine*. +2. **Lisa klahvi sündmuste käitlejad**, mis juhivad kangelase liikumist üles/alla vasakule/paremale - >vihje: loo oma onKeyDown funktsioon ja kinnita see aknale: + *MÄRKA*, et tegemist on kordinaatsüsteemiga, kus vasak ülemine nurgas on `(0,0)`. Ära unusta lisada koodi vaikimisi käitumise peatamiseks. - ```javascript - let onKeyDown = function (e) { - console.log(e.keyCode); - ...add the code from the lesson above to stop default behavior - } - }; + > **Vihje**: Loo oma `onKeyDown` funktsioon ja seo see aknaga: - window.addEventListener("keydown", onKeyDown); + ```javascript + const onKeyDown = function (e) { + console.log(e.keyCode); + // Lisa ülaltoodud tunni kood vaikimisi käitumise peatamiseks + switch (e.keyCode) { + case 37: + case 39: + case 38: + case 40: // Nooleklahvid + case 32: + e.preventDefault(); + break; // Tühik + default: + break; // ära blokeeri teisi klahve + } + }; + + window.addEventListener("keydown", onKeyDown); ``` - Kontrolli oma brauseri konsooli selles punktis ja vaata, kuidas klahvivajutused logitakse. + **Mis see sündmuse käitleja teeb:** + - **Kuulab** kogu aknale klahvivajutusi (keydown) + - **Logib** klahvikoodi, et aidata siluda vajutatud klahve + - **Tõkestab** brauseri vaikimisi käitumise nooleklahvide ja tühiku puhul + - **Lubab** teistel klahvidel töötada tavaliselt + + Jälgi brauseri konsooli selle punkti juures ja vaata klahvivajutuste logisid. -3. **Rakenda** [Pub sub muster](../README.md), see hoiab su koodi puhtana, kui järgmistest osadest edasi liigud. +3. **Rakenda** [Pub sub mustrit](../README.md), see hoiab su koodi puhtana järgnevate osade töötlemisel. - Selle viimase osa tegemiseks saad: + Avaldamise-Tellimise (Publish-Subscribe) muster aitab organiseerida su koodi, eraldades sündmuste tabamise sündmuste käsitlemisest. See muudab su koodi modularsemaks ja kergemaks hooldada. - 1. **Lisa sündmuste kuulaja** aknale: - - ```javascript - window.addEventListener("keyup", (evt) => { - if (evt.key === "ArrowUp") { - eventEmitter.emit(Messages.KEY_EVENT_UP); - } else if (evt.key === "ArrowDown") { - eventEmitter.emit(Messages.KEY_EVENT_DOWN); - } else if (evt.key === "ArrowLeft") { - eventEmitter.emit(Messages.KEY_EVENT_LEFT); - } else if (evt.key === "ArrowRight") { - eventEmitter.emit(Messages.KEY_EVENT_RIGHT); - } - }); - ``` - - 1. **Loo EventEmitter klass**, et sõnumeid avaldada ja tellida: - - ```javascript - class EventEmitter { - constructor() { - this.listeners = {}; - } - - on(message, listener) { - if (!this.listeners[message]) { - this.listeners[message] = []; - } - this.listeners[message].push(listener); - } - - emit(message, payload = null) { - if (this.listeners[message]) { - this.listeners[message].forEach((l) => l(message, payload)); - } - } - } - ``` - - 1. **Lisa konstandid** ja seadista EventEmitter: - - ```javascript - const Messages = { - KEY_EVENT_UP: "KEY_EVENT_UP", - KEY_EVENT_DOWN: "KEY_EVENT_DOWN", - KEY_EVENT_LEFT: "KEY_EVENT_LEFT", - KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT", - }; - - let heroImg, - enemyImg, - laserImg, - canvas, ctx, - gameObjects = [], - hero, - eventEmitter = new EventEmitter(); - ``` + Viimase sammu tegemiseks saad: - 1. **Initsialiseeri mäng** + 1. **Lisada sündmuse kuulaja** aknale: - ```javascript - function initGame() { - gameObjects = []; - createEnemies(); - createHero(); - - eventEmitter.on(Messages.KEY_EVENT_UP, () => { - hero.y -=5 ; - }) + ```javascript + window.addEventListener("keyup", (evt) => { + if (evt.key === "ArrowUp") { + eventEmitter.emit(Messages.KEY_EVENT_UP); + } else if (evt.key === "ArrowDown") { + eventEmitter.emit(Messages.KEY_EVENT_DOWN); + } else if (evt.key === "ArrowLeft") { + eventEmitter.emit(Messages.KEY_EVENT_LEFT); + } else if (evt.key === "ArrowRight") { + eventEmitter.emit(Messages.KEY_EVENT_RIGHT); + } + }); + ``` + + **See sündmussüsteem teeb:** + - **Tabab** klaviatuuri sisendi ja muudab selle kohandatud mängusündmusteks + - **Eraldab** sisendi tabamise mänguloogikast + - **Lihtsustab** juhtimissüsteemide hilisemat muutmist, mõjutamata mängu koodi + - **Lubab** mitmel süsteemil reageerida samale sisendile + +```mermaid +flowchart TD + A["Klaviatuuri sisend"] --> B["Akna sündmuste kuulaja"] + B --> C["Sündmuste väljastaja"] + C --> D["VÕTI_SÜNDMUS_ÜLES"] + C --> E["VÕTI_SÜNDMUS_ALLA"] + C --> F["VÕTI_SÜNDMUS_VASAKULE"] + C --> G["VÕTI_SÜNDMUS_PAREMALE"] - eventEmitter.on(Messages.KEY_EVENT_DOWN, () => { - hero.y += 5; - }); + D --> H["Kangelase liikumine"] + D --> I["Helisüsteem"] + D --> J["Visuaalsed efektid"] - eventEmitter.on(Messages.KEY_EVENT_LEFT, () => { - hero.x -= 5; - }); + E --> H + F --> H + G --> H - eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => { - hero.x += 5; - }); - } - ``` + style A fill:#e1f5fe + style C fill:#e8f5e8 + style H fill:#fff3e0 +``` + 2. **Loo EventEmitter klass**, et sõnumeid avaldada ja tellida: -1. **Seadista mängu tsükkel** + ```javascript + class EventEmitter { + constructor() { + this.listeners = {}; + } + + on(message, listener) { + if (!this.listeners[message]) { + this.listeners[message] = []; + } + this.listeners[message].push(listener); + } + + 3. **Lisa konstantid** ja sea üles EventEmitter: - Refaktoreeri window.onload funktsioon, et initsialiseerida mäng ja seadistada mängu tsükkel sobiva intervalliga. Lisad ka laserkiire: + ```javascript + const Messages = { + KEY_EVENT_UP: "KEY_EVENT_UP", + KEY_EVENT_DOWN: "KEY_EVENT_DOWN", + KEY_EVENT_LEFT: "KEY_EVENT_LEFT", + KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT", + }; + + let heroImg, + enemyImg, + laserImg, + canvas, ctx, + gameObjects = [], + hero, + eventEmitter = new EventEmitter(); + ``` + + **Ülesseade mõistmine:** + - **Määratleb** sõnumi konstantid, et vältida kirjavigu ja lihtsustada refaktoreerimist + - **Deklaratsioonid** piltide, lõuendi konteksti ja mänguseisu jaoks + - **Loob** globaalse sündmuste levitaja pub-sub süsteemile + - **Initsialiseerib** massiivi, kuhu salvestatakse kõik mänguobjektid + + 4. **Initsialiseeri mäng** + + ```javascript + function initGame() { + gameObjects = []; + createEnemies(); + createHero(); + + eventEmitter.on(Messages.KEY_EVENT_UP, () => { + hero.y -= 5; + }); + + eventEmitter.on(Messages.KEY_EVENT_DOWN, () => { + hero.y += 5; + }); + + eventEmitter.on(Messages.KEY_EVENT_LEFT, () => { + hero.x -= 5; + }); + +4. **Seadista mängutsükkel** + + Refaktoreeri `window.onload` funktsioon, et initsialiseerida mäng ja seadistada mängutsükkel sobival intervallil. Samuti lisad laserkiire: ```javascript window.onload = async () => { @@ -324,19 +599,25 @@ npm start laserImg = await loadTexture("assets/laserRed.png"); initGame(); - let gameLoopId = setInterval(() => { + const gameLoopId = setInterval(() => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "black"; ctx.fillRect(0, 0, canvas.width, canvas.height); drawGameObjects(ctx); - }, 100) - + }, 100); }; ``` -5. **Lisa kood**, et vaenlased liiguksid kindla intervalliga + **Mängu seadistuse mõistmine:** + - **Ootab**, kuni leht täielikult laeb enne algust + - **Hangi** canvas-element ja selle 2D rendering-kontekst + - **Laeb** kõik pildifailid asünkroonselt, kasutades `await` + - **Käivitab** mängutsükli, mis töötab 100ms intervallidega (10 FPS) + - **Puhastab** ja joonistab kogu ekraani iga kaadri järel uuesti - Refaktoreeri `createEnemies()` funktsioon, et luua vaenlased ja lisada need uude gameObjects klassi: +5. **Lisa kood** vaenlaste liigutamiseks kindlal intervallil + + Refaktoreeri `createEnemies()` funktsioon, et luua vaenlased ja lisada nad uude gameObjects klassi: ```javascript function createEnemies() { @@ -354,8 +635,70 @@ npm start } } ``` + + **Mida vaenlaste loomine teeb:** + - **Arvutab** positsioonid, et vaenlased oleksid ekraani keskel + - **Loomise** vaenlaste võru, kasutades pesastatud silmuseid + - **Määrab** iga vaenlase objektile vaenlase pildi + - **Lisab** iga vaenlase globaalsesse mänguobjektide massiivi - ja lisa `createHero()` funktsioon, et teha sarnane protsess kangelase jaoks. + ja lisa `createHero()` funktsioon, mis teeb sarnase protsessi kangelase jaoks. + + ```javascript + function createHero() { + hero = new Hero( + canvas.width / 2 - 45, + canvas.height - canvas.height / 4 + ); + hero.img = heroImg; + gameObjects.push(hero); + } + ``` + + **Mida kangelase loomine teeb:** + - **Paigutab** kangelase ekraani põhja keskele + - **Määrab** kangelase objektile kangelase pildi + - **Lisab** kangelase mänguobjektide massiivi kuvamiseks + + ja lõpuks lisa `drawGameObjects()` funktsioon, et alustada joonistamist: + + ```javascript + function drawGameObjects(ctx) { + gameObjects.forEach(go => go.draw(ctx)); + } + ``` + + **Joonistamisfunktsiooni mõistmine:** + - **Käib läbi** kõik mänguobjektid massiivis + - **Kutsutakse** iga objekti `draw()` meetodit + - **Edastab** canvas-konteksti, et objektid saaksid ennast kuvada + + ### 🔄 **Õppe kontrollpunkt** + **Terve mängusüsteemi mõistmine**: Kontrolli oma arusaamist kogu arhitektuurist: + - ✅ Kuidas päranduvus võimaldab Hero ja Enemy jagada ühiseid GameObject omadusi? + - ✅ Miks teeb pub/sub muster sinu koodi paremini hooldatavaks? + - ✅ Millist rolli mängib mängutsükkel sujuva animatsiooni loomisel? + - ✅ Kuidas seovad sündmuste kuularid kasutaja sisendi mänguobjektide käitumisega? + + **Süsteemi integratsioon**: Sinu mäng demonstreerib nüüd: + - **Objektorienteeritud disaini**: Baasklassid spetsialiseeritud pärandusega + - **Sündmuspõhist arhitektuuri**: Pub/sub muster lahtise sidumise jaoks + - **Animatsiooniraamistikku**: Mängutsükkel koos järjepidevate kaadrid värskendustega + - **Sisendi töötlemist**: Klaviatuuri sündmused koos vaikimisi käitumise tõkestamisega + - **Varahalduse**: Piltide laadimine ja sprite'ide kuvamine + + **Professionaalsed mustrid**: Sa oled rakendanud: + - **Huvide eraldamist**: Sisend, loogika ja kuvamine on eraldi + - **Polümorfismi**: Kõik mänguobjektid jagavad ühist joonistamisliidest + - **Sõnumite edastamist**: Puhtad suhtlusmeetodid komponentide vahel + - **Ressursside haldamist**: Tõhus sprite'ide ja animatsioonide käsitlus + + Sinu vaenlased peaksid hakkama sinu kangelase kosmoselaeva poole liikuma! + } + } + ``` + + and add a `createHero()` function to do a similar process for the hero. ```javascript function createHero() { @@ -380,23 +723,177 @@ npm start --- +## GitHub Copilot Agent Challenge 🚀 + +Siin on väljakutse, mis aitab sinu mängule lisada viimistlust: piirid ja sujuv juhtimine. Praegu võib su kangelane ekraanilt välja lennata ja liikumine võib tunduda katkendlik. + +**Sinu ülesanne:** Tee oma kosmoselaev realistlikumaks, rakendades ekraani piire ja sujuvat liikumist. See on sarnane NASA lennujuhtimissüsteemidega, mis takistavad kosmoselaevadel ohutust ületada. + +**Mida ehitada:** Loo süsteem, mis hoiab kangelase kosmoselaeva ekraanil ning teeb juhtimise sujuvaks. Kui mängija hoiab nooleklahvi all, peaks laev libisema pidevalt, mitte liigutama käikudena. Mõtle ka visuaalsele tagasisidele, kui laev jõuab piiridesse – näiteks õrn efekt, mis näitab mänguala serva. + +Loe rohkem [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kohta. + ## 🚀 Väljakutse -Nagu näha, võib su kood muutuda "spagetikoodiks", kui hakkad lisama funktsioone, muutujaid ja klasse. Kuidas saaksid oma koodi paremini organiseerida, et see oleks loetavam? Joonista süsteem, kuidas oma koodi organiseerida, isegi kui see jääb ühte faili. +Koodi organiseerimine muutub projektide kasvades järjest olulisemaks. Võib-olla oled märganud, et fail on täis funktsioone, muutujaid ja klasse segamini. See meenutab mulle, kuidas Apollo missiooni insenerid pidid looma selged ja hooldatavad süsteemid, mille kallal said korraga mitu meeskonda töötada. + +**Sinu ülesanne:** +Mõtle nagu tarkvara arhitekt. Kuidas korraldaksid oma koodi nii, et kuue kuu pärast suudad sina või su tiimiliige sellest aru saada? Isegi kui kõik jääb ühte faili, võid paremini organiseerida: -## Järelloengu viktoriin +- **Rühmitades omavahel seotud funktsioonid** selgete kommentaaridega päiste all +- **Eraldades huvide valdkonnad** - hoia mängulogiika eraldi kuvamisest +- **Kasuta järjepidevaid nimetamisstandardeid** muutujatele ja funktsioonidele +- **Loo mooduleid** või nimesid, et organiseerida erinevaid mängu aspekte +- **Lisa dokumentatsiooni**, mis selgitab iga suurema osa eesmärki -[Järelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/34) +**Peegeldavad küsimused:** +- Millised osad sinu koodist on raskemini mõistetavad, kui nendega hiljem uuesti tegeleda? +- Kuidas korraldada oma koodi, et keegi teine saaks hõlpsamalt panustada? +- Mida juhtuks, kui tahaksid lisada uusi funktsioone nagu lisa-tugevdused või erinevat tüüpi vaenlased? -## Ülevaade ja iseseisev õppimine +## Post-Loengu Test -Kuigi kirjutame oma mängu ilma raamistikke kasutamata, on palju JavaScripti-põhiseid lõuendi raamistikke mänguarenduseks. Võta aega, et [lugeda nende kohta](https://github.com/collections/javascript-game-engines). +[Post-loengu test](https://ff-quizzes.netlify.app/web/quiz/34) -## Ülesanne +## Ülevaade & Iset õppimine + +Oleme ehitanud kõike nullist, mis on suurepärane õppimiseks, aga siin on väike saladus – olemas on imelisi JavaScripti raamistikke, mis saavad sinu eest palju rasket tööd ära teha. Kui tunned end põhitõdede osas kindlamalt, tasub [uurida, mis saadaval on](https://github.com/collections/javascript-game-engines). + +Raamistikud on nagu hästi varustatud tööriistakast, mitte iga tööriista käsitsi valmistamine. Nad lahendavad palju organiseerimisprobleeme ja pakuvad funktsioone, mis muidu võtaksid nädalaid enda kirjutada. + +**Tähtsad uurimisteemad:** +- Kuidas mängumootorid korrastavad koodi – oled üllatunud nutikate mustrite üle +- Jõudluse nipid, kuidas teha canvas-mängud sujuvaks +- Uued JavaScripti võimalused, mis muudavad koodi puhtamaks ja paremini hooldatavaks +- Erinevad meetodid mänguobjektide ja nende suhete haldamiseks + +## 🎯 Sinu Mängu Animatsiooni Meistriklassi Ajakava + +```mermaid +timeline + title Mängu animatsiooni ja interaktsiooni õppimise edenemine + + section Liikumise alused (20 minutit) + Animatsiooni põhimõtted: Kaadri-põhine animatsioon + : Positsiooni uuendused + : Koordinaatsüsteemid + : Sujuv liikumine + + section Sündmuste süsteemid (25 minutit) + Kasutaja sisend: Klaviatuuri sündmuste käsitlemine + : Vaikimisi käitumise tõkestamine + : Sündmuse objekti omadused + : Akna tasemel kuulamine + + section Mängu arhitektuur (30 minutit) + Objektide disain: Pärimismustrid + : Baasklassi loomine + : Spetsialiseeritud käitumised + : Polümorfne liides + + section Kommunikatsiooni mustrid (35 minutit) + Pub/Sub teostus: Sündmuste väljastajad + : Sõnumi konstandid + : Lahtine sidumine + : Süsteemi integratsioon + + section Mängutsükli valdamine (40 minutit) + Reaalajas süsteemid: Kaadrisageduse kontroll + : Uuendamise/renderdamise tsükkel + : Oleku haldamine + : Jõudluse optimeerimine + + section Täiustatud tehnikad (45 minutit) + Professionaalsed funktsioonid: Kokkupõrke tuvastamine + : Füüsika simulatsioon + : Oleku masinad + : Komponentide süsteemid + + section Mängumootori kontseptsioonid (1 nädal) + Raamistiku mõistmine: Entiteedi-komponendi süsteemid + : Stseenigraafikud + : Vara töövood + : Jõudluse profiilimine + + section Tootmise oskused (1 kuu) + Professionaalne areng: Koodi organiseerimine + : Meeskonnatöö + : Testimise strateegiad + : Juhtimise optimeerimine +``` +### 🛠️ Sinu mänguarenduse tööriistakomplekti kokkuvõte + +Pärast selle õppetüki lõpetamist oled valdanud: +- **Animatsiooni põhimõtted**: Kaadripõhine liikumine ja sujuvad üleminekud +- **Sündmustepõhine programmeerimine**: Klaviatuurisisendi töötlemine koos õigete sündmuste haldamistega +- **Objektorienteeritud disain**: Päranduva hierarhia ja polümorfsete liideste kasutamine +- **Suhtlusmustrid**: Pub/sub arhitektuur hooldatava koodi jaoks +- **Mängutsükli arhitektuur**: Reaalaegne uuendus- ja kuvamistsüklid +- **Sisendsüsteemid**: Kasutaja juhtimise kaardistamine koos vaikimisi käitumise tõkestamisega +- **Varahalduse**: Sprite'ide laadimine ja tõhus kuvamine + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Ava brauseri konsool ja proovi `addEventListener('keydown', console.log)`, et näha klaviatuuri sündmusi +- [ ] Loo lihtne div-element ja liiguta seda nooleklahvidega +- [ ] Katseta `setInterval` abil pideva liikumise loomist +- [ ] Proovi sündmuse vaikimisi käitumise tõkestamist `event.preventDefault()` abil + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Lõpeta post-loengu test ja mõista sündmustepõhist programmeerimist +- [ ] Ehita liikuv kangelase kosmoselaev täis klaviatuurijuhtimisega +- [ ] Rakenda sujuvat vaenlaste liikumismustrit +- [ ] Lisa piirid, mis takistavad mänguobjektide ekraanilt väljumist +- [ ] Loo põhjalik kokkupõrke tuvastus mänguobjektide vahel + +### 📅 **Sinu nädala pikkune animatsioonireis** +- [ ] Lõpeta täielik kosmose-mäng koos lihvitud liikumise ja interaktsioonidega +- [ ] Lisa keerukad liikumismustrid nagu kõverad, kiirendus ja füüsika +- [ ] Rakenda sujuvad üleminekud ja aeglustamise funktsioonid +- [ ] Loo osakeseefektid ja visuaalse tagasiside süsteemid +- [ ] Optimeeri mängu jõudlust sujuvaks 60fps mängimiseks +- [ ] Lisa mobiilseadmete puutejuhtimine ja reageeriv disain + +### 🌟 **Sinu kuu pikkune interaktiivne areng** +- [ ] Ehita keerukaid interaktiivseid rakendusi koos arenenud animatsioonisüsteemidega +- [ ] Õpi animatsiooniraamatukogusid nagu GSAP või loo oma animatsioonimootor +- [ ] Panusta avatud lähtekoodiga mänguarenduse ja animatsiooniprojektidesse +- [ ] Saavuta jõudluse optimeerimine graafikamahukate rakenduste jaoks +- [ ] Loo hariduslikku materjali mänguarenduse ja animatsiooni teemadel +- [ ] Koosta portfoolio, mis demonstreerib arenenud interaktiivse programmeerimise oskusi + +**Reaalse maailma rakendused**: sinu mänguanimatsiooni oskused kehtivad otseselt: +- **Interaktiivsed veebirakendused**: dünaamilised juhtpaneelid ja reaalaja liidesed +- **Andmete visualiseerimine**: animeeritud diagrammid ja interaktiivsed graafikud +- **Hariduslik tarkvara**: interaktiivsed simulatsioonid ja õppevahendid +- **Mobiiliarendus**: puutepõhised mängud ja žestide töötlemine +- **Töölauarakendused**: Electron rakendused sujuvate animatsioonidega +- **Veebi animatsioonid**: CSS ja JavaScripti animatsiooniraamatukogud + +**Sinu poolt omandatud professionaalsed oskused**: +- **Arhitekteeri** sündmustepõhiseid süsteeme, mis kasvavad koos keerukusega +- **Rakenda** sujuvaid animatsioone matemaatiliste põhimõtete abil +- **Veadi** keerukaid interaktsioonisüsteeme brauseri arendajatööriistade abil +- **Optimeeri** mängu jõudlust erinevate seadmete ja brauserite jaoks +- **Kujunda** hooldatavaid koodistruktuure tõestatud mustritega + +**Mänguarenduse kontseptsioonide valdamine**: +- **Kaadritiheduse juhtimine**: FPS ja ajastuse kontrolli mõistmine +- **Sisendi töötlemine**: platvormideülene klaviatuuri ja sündmuste süsteem +- **Objektide elutsükkel**: loomine, uuendamine ja hävitamise mustrid +- **Seisundi sünkroniseerimine**: mänguseisundi järjepidevus kaadrite vahel +- **Sündmusarhitektuur**: sidumata suhtlus mängusüsteemide vahel + +**Järgmine tase**: oled valmis lisama kokkupõrke tuvastust, punktisüsteemi, heliefekte või uurima kaasaegseid mänguraamistikke nagu Phaser või Three.js! + +🌟 **Saavutuse saavutamine**: oled loonud täieliku interaktiivse mängusüsteemi professionaalsete arhitektuurimustritega! + +## Kodune ülesanne [Kommenteeri oma koodi](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleb pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlkega kaasnevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/3-moving-elements-around/assignment.md b/translations/et/6-space-game/3-moving-elements-around/assignment.md index aba96f0a6..d61eb3c70 100644 --- a/translations/et/6-space-game/3-moving-elements-around/assignment.md +++ b/translations/et/6-space-game/3-moving-elements-around/assignment.md @@ -1,8 +1,8 @@ +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüame täpsust, palun arvestage, et automatiseeritud tõlgetes võib esineda vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud väärarusaamade või valesti tõlgendamise eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/4-collision-detection/README.md b/translations/et/6-space-game/4-collision-detection/README.md index 9ed7449f0..622e50e94 100644 --- a/translations/et/6-space-game/4-collision-detection/README.md +++ b/translations/et/6-space-game/4-collision-detection/README.md @@ -1,131 +1,325 @@ -# Kosmoseteemalise mängu loomine, osa 4: Laseri lisamine ja kokkupõrgete tuvastamine - -## Loengu-eelne viktoriin +# Ehita kosmose mäng osa 4: Laserite lisamine ja kokkupõrgete tuvastamine + +```mermaid +journey + title Sinu kokkupõrke tuvastamise teekond + section Füüsika alus + Mõista ristkülikuid: 3: Student + Õpi lõike matemaatikat: 4: Student + Saa aru koordinaatsüsteemidest: 4: Student + section Mängumehhanismid + Rakenda laseri tulistamine: 4: Student + Lisa objekti elutsükkel: 5: Student + Loo kokkupõrke reeglid: 5: Student + section Süsteemi integreerimine + Ehita kokkupõrke tuvastus: 5: Student + Optimeeri jõudlust: 5: Student + Testi interaktsioonisüsteeme: 5: Student +``` +## Eel-loengu viktoriin + +[Eel-loengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/35) + +Mõtle hetk Star Warsist, kui Luke'i prootonitorpeedod tabasid Surmatähe väljalaskesuuna avaust. See täpne kokkupõrgete tuvastus muutis galaktika saatust! Mängudes töötab kokkupõrgete tuvastus samamoodi – see määrab, millal objektid suhtlevad ja mis edasi juhtub. + +Selles õppetükis lisad oma kosmosemängule laserrelvad ja rakendad kokkupõrgete tuvastust. Nagu NASA missiooni planeerijad arvutavad kosmoseaparaatide trajektoore, et vältida kosmoseprügi, õpid sa tuvastama, millal mänguobjektid üksteisega ristuvad. Jagame selle hallatavateks sammudeks, mis ehitavad üksteisele tuginedes edasi. + +Lõpetuseks on sul toimiv lahingusüsteem, kus laserid hävitavad vaenlasi ja kokkupõrked käivitavad mängusündmusi. Samad kokkupõrdepõhimõtted kehtivad kõikjal alates füüsikatehnikatest kuni interaktiivsete veebiliideste jahtumiseni. + +```mermaid +mindmap + root((Kokkupõrke tuvastamine)) + Physics Concepts + Ristküliku piirid + Ülekattumise testimine + Koordinaatsüsteemid + Lahususkohustus + Game Objects + Laserlahingud + Vihamere laevad + Kangelase tegelane + Kokkupõrke tsoonid + Lifecycle Management + Objektide loomine + Liikumise uuendused + Hävitamise märgistamine + Mälu puhastamine + Event Systems + Klaviatuuri sisend + Kokkupõrke sündmused + Mängu oleku muutused + Audio/Visuaalsed efektid + Performance + Tõhusad algoritmid + Kaadri kiiruse optimeerimine + Mälu haldamine + Ruumi jaotamine +``` +✅ Tee väike uurimistöö ajaloo esimese arvutimängu kohta. Milline oli selle funktsionaalsus? -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/35) +## Kokkupõrgete tuvastamine -Selles õppetunnis õpid, kuidas JavaScripti abil lasereid tulistada! Lisame oma mängule kaks asja: +Kokkupõrgete tuvastamine töötab nagu Apollo kuuülemineku mooduli lähedussensorid – see kontrollib pidevalt kauguseid ja annab hoiatuse, kui objektid liiga lähedale satuvad. Mängudes määrab see süsteem, millal objektid omavahel suhtlevad ja mis järgmiseks juhtub. -- **Laser**: see laser tulistatakse sinu kangelase laevast vertikaalselt ülespoole. -- **Kokkupõrgete tuvastamine**: osana laseri tulistamise funktsionaalsusest lisame ka mõned mängureeglid: - - **Laser tabab vaenlast**: vaenlane hävib, kui laser teda tabab. - - **Laser tabab ekraani ülemist osa**: laser hävitatakse, kui see tabab ekraani ülemist osa. - - **Vaenlase ja kangelase kokkupõrge**: vaenlane ja kangelane hävitatakse, kui nad üksteist tabavad. - - **Vaenlane tabab ekraani alumist osa**: vaenlane ja kangelane hävitatakse, kui vaenlane jõuab ekraani alumisse ossa. +Me kasutame lähenemist, kus iga mänguobjekt käsitletakse ristkülikuna, sarnaselt lennuliikluse kontrollisüsteemidega, mis kasutavad lihtsustatud geomeetrilisi kujundeid lennukite jälgimiseks. See ristküliku meetod võib tunduda lihtsana, kuid on arvutuslikult efektiivne ja sobib hästi enamiku mängustsenaariumide jaoks. -Lühidalt öeldes pead sina – *kangelane* – hävitama kõik vaenlased laseriga enne, kui nad jõuavad ekraani alumisse ossa. +### Ristküliku esitus -✅ Uuri veidi esimese arvutimängu kohta, mis kunagi kirjutati. Milline oli selle funktsionaalsus? +Iga mänguobjektil peab olema koordinaatidega piire, nagu Marsi Pathfinder rover määras oma asukoha Marsi pinnal. Siin on, kuidas me defineerime need piirikoordinaadid: -Olge kangelased koos! +```mermaid +flowchart TD + A["🎯 Mängu objekt"] --> B["📍 Asukoht (x, y)"] + A --> C["📏 Mõõtmed (laius, kõrgus)"] + + B --> D["Ülaosa: y"] + B --> E["Vasak: x"] + + C --> F["Alaosa: y + kõrgus"] + C --> G["Parem: x + laius"] + + D --> H["🔲 Ristküliku piirjooned"] + E --> H + F --> H + G --> H + + H --> I["Kokkupõrke tuvastamine valmis"] + + style A fill:#e3f2fd + style H fill:#e8f5e8 + style I fill:#fff3e0 +``` +```javascript +rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width + } +} +``` -## Kokkupõrgete tuvastamine +**Selgitus:** +- **Ülemine serv**: See on objekti vertikaalne alguskoht (tema y positsioon) +- **Vasak serv**: Kus see horisontaalselt algab (tema x positsioon) +- **Alumine serv**: Liidad kõrguse y positsioonile - nüüd tead, kus see lõpeb! +- **Parem serv**: Liidad laiuse x positsioonile - ja sul on piiri täpne asukoht -Kuidas tuvastada kokkupõrkeid? Peame mõtlema oma mängu objektidest kui liikuvatest ristkülikutest. Miks? Sest mänguobjekti joonistamiseks kasutatav pilt on ristkülik: sellel on `x`, `y`, `laius` ja `kõrgus`. +### Ühistamise algoritm -Kui kaks ristkülikut, näiteks kangelane ja vaenlane, *lõikuvad*, toimub kokkupõrge. Mis siis juhtub, sõltub mängureeglitest. Kokkupõrgete tuvastamiseks on vaja järgmist: +Ristkülikute ristumise tuvastus kasutab loogikat, mis on sarnane Hubble'i kosmoseteleskoobi meetodile, kuidas see kindlaks teeb taevakehade kattumise vaateväljas. Algoritm kontrollib eraldatust: -1. Viis, kuidas saada mänguobjekti ristkülikukujuline esitus, midagi sellist: +```mermaid +flowchart LR + A["Ristkülik 1"] --> B{"Eraldamise Testid"} + C["Ristkülik 2"] --> B + + B --> D["R2 vasak > R1 parem?"] + B --> E["R2 parem < R1 vasak?"] + B --> F["R2 üleval > R1 all?"] + B --> G["R2 all < R1 üleval?"] + + D --> H{"Kas mõni on tõene?"} + E --> H + F --> H + G --> H + + H -->|Jah| I["❌ Kokkupõrget ei ole"] + H -->|Ei| J["✅ Kokkupõrge tuvastatud"] + + style B fill:#e3f2fd + style I fill:#ffebee + style J fill:#e8f5e8 +``` +```javascript +function intersectRect(r1, r2) { + return !(r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top); +} +``` - ```javascript - rectFromGameObject() { - return { - top: this.y, - left: this.x, - bottom: this.y + this.height, - right: this.x + this.width - } - } - ``` +**Eraldamise test töötab nagu radarisüsteemid:** +- Kas ristkülik 2 on täiesti ristkülikust 1 paremal? +- Kas ristkülik 2 on täiesti ristkülikust 1 vasakul? +- Kas ristkülik 2 on täiesti ristkülikust 1 all? +- Kas ristkülik 2 on täiesti ristkülikust 1 üleval? -2. Võrdlusfunktsioon, mis võib välja näha selline: +Kui ükski nendest tingimustest ei kehti, peavad ristkülikud kattuma. See lähenemine peegeldab seda, kuidas radarioperaatorid määravad, kas kaks lennukit on ohutult eraldatud. - ```javascript - function intersectRect(r1, r2) { - return !(r2.left > r1.right || - r2.right < r1.left || - r2.top > r1.bottom || - r2.bottom < r1.top); - } - ``` +## Objektide elutsükli haldamine -## Kuidas asju hävitada +Kui laser tabab vaenlast, tuleb mõlemad objektid mängust eemaldada. Kuid objektide kustutamine silmuse keskel võib põhjustada süsteemi jäätumist – raske õppetund varajastest arvutisüsteemidest nagu Apollo juhitarkvara puhul. Selle asemel kasutame "märgi kustutamiseks" meetodit, mis eemaldab objektid ohutult kaadrite vahel. -Asjade hävitamiseks mängus pead mängule teada andma, et see ei peaks enam seda objekti ekraanil joonistama. Üks viis seda teha on märkida mänguobjekt *surnuks*, kui midagi juhtub, näiteks nii: +```mermaid +stateDiagram-v2 + [*] --> Active: Objekt Loodud + Active --> Collided: Kokkupõrge Tuvastatud + Collided --> MarkedDead: Määra dead = true + MarkedDead --> Filtered: Järgmine Kaader + Filtered --> [*]: Objekt Eemaldatud + + Active --> OutOfBounds: Lahkub Ekraanilt + OutOfBounds --> MarkedDead + + note right of MarkedDead + Ohutu jätkata + praegune kaader + end note + + note right of Filtered + Objektid eemaldatud + kaadrite vahel + end note +``` +Nii märgime midagi eemaldamiseks: ```javascript -// collision happened -enemy.dead = true +// Märgi objekt eemaldamiseks +enemy.dead = true; ``` -Seejärel saad *surnud* objektid enne ekraani uuesti joonistamist välja sorteerida, näiteks nii: +**Miks see töötab:** +- Märgime objekti kui "surnud", kuid ei kustuta kohe +- See laseb praegusel mängukaadril ohutult lõpuni saada +- Ei teki tõrkeid, sest ei kasutata enam olemasolematut! + +Siis filtreerime märgitud objektid välja enne järgmist joonistamistsüklit: ```javascript -gameObjects = gameObject.filter(go => !go.dead); +gameObjects = gameObjects.filter(go => !go.dead); ``` -## Kuidas laserit tulistada +**Mida see filtreerimine teeb:** +- Loob värske objektilisti ainult "elavate" objektidega +- Eemaldab kõik, mis on märgitud surnuks +- Hoiab mängu sujuvalt käimas +- Vältab mäluprobleeme, mis tekivad hävinenud objektide kuhjumisel + +## Laseri mehaanika rakendamine -Laseri tulistamine tähendab reageerimist klahvivajutusele ja objekti loomist, mis liigub kindlas suunas. Selleks peame tegema järgmised sammud: +Lasertorpeedod mängudes töötavad samal põhimõttel nagu Star Treki footonitorpeedod – need on üksikud objektid, mis liiguvad sirgjooneliselt, kuni tabavad midagi. Iga tühiku vajutamine loob uue laserobjekti, mis liigub ekraanil. -1. **Loo laseri objekt**: kangelase laeva ülemisest osast, mis hakkab loomishetkel liikuma ülespoole ekraani ülemise osa suunas. -2. **Lisa kood klahvivajutuse sündmusele**: peame valima klaviatuuril klahvi, mis tähistab mängija laseri tulistamist. -3. **Loo mänguobjekt, mis näeb välja nagu laser**, kui klahv on vajutatud. +Selle toimimiseks peame koordineerima mitu erinevat osa: -## Laseri tulistamise intervall +**Põhilised komponendid rakendamiseks:** +- **Loo** laserobjektid, mis tekivad kangelase asukohast +- **Käsitle** klaviatuuri sisendit, mis käivitab laseri loomise +- **Halda** laseri liikumist ja elutsüklit +- **Rakenda** laseri visuaalne kujutus -Laser peab tulistama iga kord, kui vajutad klahvi, näiteks *tühikut*. Et vältida liiga paljude laserite kiiret loomist, peame selle parandama. Lahendus on rakendada nn *intervalli*, taimerit, mis tagab, et laserit saab tulistada ainult teatud sagedusega. Seda saab rakendada järgmiselt: +## Tulistamise kiiruse kontrolli rakendamine +Piiramatu tulistamiskiirus koormaks mängumootorit ja muudaks mängimise liiga lihtsaks. Tõelised relvasüsteemid silmitsi samade piirangutega – isegi USS Enterprise'i lasereid tuli vahel laadida. + +Rakendame jahutusaja süsteemi, mis takistab kiirspämmimist, säilitades samal ajal reageerimisvõime: + +```mermaid +sequenceDiagram + participant Player + participant Weapon + participant Cooldown + participant Game + + Player->>Weapon: Vajuta tühikut + Weapon->>Cooldown: Kontrolli, kas jahe + + alt Relv on valmis + Cooldown->>Weapon: jahe = tõene + Weapon->>Game: Loo laser + Weapon->>Cooldown: Alusta uut jahutust + Cooldown->>Cooldown: jahe = väär + + Note over Cooldown: Oota 500ms + + Cooldown->>Cooldown: jahe = tõene + else Relv on jahutusel + Cooldown->>Weapon: jahe = väär + Weapon->>Player: Ei mingit tegevust + end +``` ```javascript class Cooldown { constructor(time) { this.cool = false; setTimeout(() => { this.cool = true; - }, time) + }, time); } } class Weapon { - constructor { + constructor() { + this.cooldown = null; } + fire() { if (!this.cooldown || this.cooldown.cool) { - // produce a laser + // Loo laseri lask this.cooldown = new Cooldown(500); } else { - // do nothing - it hasn't cooled down yet. + // Relv on veel jahtumas } } } ``` -✅ Vaata kosmoseteemalise mängu sarja esimest õppetundi, et meenutada, kuidas *intervallid* töötavad. +**Kuidas jahutusaeg töötab:** +- Loomise hetkel on relv “kuum” (ei saa veel tulistada) +- Pärast tähtaega muutub relv “jahtunuks” (valmis tulistamiseks) +- Tulistamise eel kontrollime: “Kas relv on jahtunud?” +- See takistab spämmi, hoides samal ajal kontrollid reageerivad + +✅ Vaata meelde äratamiseks esimese osa ruumi mängu sarjast jahutusaegade kohta. + +## Kokkupõrkesüsteemi loomine + +Laiendad oma olemasolevat kosmosemängu koodi, et luua kokkupõrgete tuvastamise süsteem. Nagu Rahvusvahelise Kosmosejaama automaatne kokkupõrgete vältimise süsteem, jälgib sinu mäng pidevalt objektide asukohti ja reageerib ristumistele. + +Varasema õppetüki koodist alates lisad kokkupõrgete tuvastamise koos konkreetsete reeglitega, mis juhivad objektide omavahelist suhtlust. -## Mida ehitada +> 💡 **Proftiip**: Laseri pilt on juba su vara kaustas olemas ja koodis viidatud, valmis kasutamiseks. -Pead võtma olemasoleva koodi (mille sa peaksid olema juba puhastanud ja refaktoreerinud) eelmisest õppetunnist ja seda laiendama. Alusta kas II osa koodist või kasuta koodi [III osa - algus](../../../../../../../../../your-work). +### Rakendatavad kokkupõrkeseadused -> vihje: laser, millega töötad, on juba sinu varade kaustas ja viidatud sinu koodis. +**Mängu mehhanismid lisamiseks:** +1. **Laser tabab vaenlast**: Vaenlane hävitatakse, kui teda laser tabab +2. **Laser tabab ekraani piiri**: Laser eemaldatakse, kui see jõuab ekraani ülemisse serva +3. **Vaenlane ja kangelane põrkuvad**: Mõlemad objektid hävitatakse ristumisel +4. **Vaenlane jõuab alla**: Mäng läbi tingimus, kui vaenlased jõuavad ekraani alla -- **Lisa kokkupõrgete tuvastamine**, kui laser põrkub millegagi, peaksid kehtima järgmised reeglid: - 1. **Laser tabab vaenlast**: vaenlane hävib, kui laser teda tabab. - 2. **Laser tabab ekraani ülemist osa**: laser hävitatakse, kui see tabab ekraani ülemist osa. - 3. **Vaenlase ja kangelase kokkupõrge**: vaenlane ja kangelane hävitatakse, kui nad üksteist tabavad. - 4. **Vaenlane tabab ekraani alumist osa**: vaenlane ja kangelane hävitatakse, kui vaenlane jõuab ekraani alumisse ossa. +### 🔄 **Pedagoogiline kontroll** +**Kokkupõrgete tuvastamise alused**: Enne rakendamist veendu, et sa mõistad: +- ✅ Kuidas ristküliku piirid defineerivad kokkupõrke tsoone +- ✅ Miks eraldamise testimine on tõhusam kui ristumise arvutamine +- ✅ Kuidas objektide elutsükli haldamine mängutsüklis on oluline +- ✅ Kuidas sündmuspõhine süsteem koordineerib kokkupõrgete reageerimisi -## Soovitatavad sammud +**Kiire enesehindamine**: Mis juhtuks, kui kustutaksid objekte koheselt märkimise asemel? +*Vastus: Silmuse keskel kustutamine võib põhjustada tõrkeid või jätta mõned objektid vahele* -Leia failid, mis on sinu jaoks loodud kaustas `your-work`. Need peaksid sisaldama järgmist: +**Füüsikateadmised**: Sa nüüd mõistad: +- **Koordinaatsüsteeme**: Kuidas asukoht ja mõõtmed loovad piire +- **Ristumise loogikat**: Matemaatilisi põhimõtteid kokkupõrgete tuvastamiseks +- **Jõudluse optimeerimist**: Miks tõhusad algoritmid on reaalajas kasutamiseks olulised +- **Mäluhaldust**: Ohutuid objekti elutsükli mustreid stabiilsuse tagamiseks + +## Arenduskeskkonna seadistamine + +Hea uudis – enamus alustööd on juba tehtud! Kõik sinu mängu varad ja põhistruktuurid asuvad alamkaustas `your-work`, valmis lahedaid kokkupõrke funktsioone lisama. + +### Projekti struktuur ```bash -| assets @@ -137,175 +331,446 @@ Leia failid, mis on sinu jaoks loodud kaustas `your-work`. Need peaksid sisaldam -| package.json ``` -Alusta oma projekti kaustas `your_work`, sisestades: +**Failistruktuuri mõistmine:** +- **Sisaldab** kõiki sprite-pilte, mida mänguobjektid vajavad +- **Sisaldab** põhidokumente HTML ja JavaScript rakendust +- **Pakub** pakettide konfiguratsiooni kohaliku arenduserveri jaoks + +### Arenduserveri käivitamine + +Mine oma projekti kausta ja alusta kohalikku serverit: ```bash cd your-work npm start ``` -Ülaltoodu käivitab HTTP serveri aadressil `http://localhost:5000`. Ava brauser ja sisesta see aadress, praegu peaks see kuvama kangelase ja kõik vaenlased, kuid miski ei liigu - veel :). +**See käskude jada:** +- **Vahetab** töökaustaks sinu projektikausta +- **Käivitab** kohalikku HTTP-serverit aadressil `http://localhost:5000` +- **Teenindab** sinu mängufailid testimiseks ja arendamiseks +- **Võimaldab** reaalajas arendust automaatse taaskäivitusega + +Ava oma brauser ja mine aadressile `http://localhost:5000`, et näha, kuidas sinu praegune mäng olukorras on, kus kangelane ja vaenlased on ekraanil. + +### Samm-sammuline rakendamine + +Nagu NASA süsteemne lähenemine Voyageri kosmosesondi programmeerimisel, viime kokku põrgete tuvastuse samm-sammult ellu. + +```mermaid +flowchart TD + A["1. Ristküliku piirid"] --> B["2. Ühenduspunkte tuvastamine"] + B --> C["3. Laseerisüsteem"] + C --> D["4. Sündmuste haldamine"] + D --> E["5. Kokkupõrke reeglid"] + E --> F["6. Jahutussüsteem"] + + G["Objekti piirjooned"] --> A + H["Füüsika algoritm"] --> B + I["Laskemoona loomine"] --> C + J["Klaviatuuri sisend"] --> D + K["Mänguloogika"] --> E + L["Kiiruse piiramine"] --> F + + F --> M["🎮 Täielik mäng"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec + style M fill:#e1f5fe +``` +#### 1. Lisa ristkülikute kokkupõrke piirid + +Õpeta esmalt mänguobjektidele, kuidas oma piire kirjeldada. Lisa see meetod oma `GameObject` klassi: + +```javascript +rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width, + }; + } +``` + +**See meetod teeb:** +- **Luuakse** ristküliku objekt täpsete piiri koordinatsioonidega +- **Arvutatakse** alumine ja parem serv positsiooni ja mõõtmete baasil +- **Tagastatakse** objekt valmis kokkupõrke algoritmidena kasutamiseks +- **Pakutakse** standardiseeritud liidest kõigile mänguobjektidele + +#### 2. Rakenda ristumiste tuvastamine + +Loo nüüd kokkupõrkerakurdi detektiiv – funktsioon, mis ütleb, millal kaks ristkülikut ristuvad: + +```javascript +function intersectRect(r1, r2) { + return !( + r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top + ); +} +``` + +**See algoritm töötab nii:** +- **Testib** nelja eraldamise tingimust ristkülikute vahel +- **Tagastab** `false`, kui ükski eraldustingimus on tõene +- **Näitab** kokkupõrget, kui eraldust pole +- **Kasutab** eituse loogikat efektiivseks ristumise testimiseks + +#### 3. Rakenda laseri tulistamissüsteem + +Siin läheb põnevaks! Seadistame laseri tulistamissüsteemi. -### Lisa kood +##### Sõnumikonstandid -1. **Loo mänguobjekti ristkülikukujuline esitus kokkupõrgete tuvastamiseks**. Allolev kood võimaldab saada `GameObject`-i ristkülikukujulise esituse. Muuda oma GameObject klassi, et seda laiendada: +Esmalt defineerime mõned sõnumitüübid, et erinevad mängu osad saaksid üksteisega suhelda: - ```javascript - rectFromGameObject() { - return { - top: this.y, - left: this.x, - bottom: this.y + this.height, - right: this.x + this.width, - }; +```javascript +KEY_EVENT_SPACE: "KEY_EVENT_SPACE", +COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER", +COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", +``` + +**Need konstandid pakuvad:** +- **Standardiseerivad** sündmuste nimetusi rakenduses +- **Võimaldavad** järjepidevat suhtlust mängusüsteemide vahel +- **Vältida** trükivigu sündmuste registreerimisel + +##### Klaviatuuri sisendi käitlemine + +Lisa tühiku klahvi avastamine ürituste kuulajasse: + +```javascript +} else if(evt.keyCode === 32) { + eventEmitter.emit(Messages.KEY_EVENT_SPACE); +} +``` + +**See sisendikäitleja:** +- **Tuvastab** tühiku klahvi vajutamise koodiga 32 +- **Saadab** standardiseeritud sündmuse sõnumi +- **Võimaldab** lahtise seotud tulistamisloogikat + +##### Sündmuste kuulaja seadistamine + +Registreeri tulistamiskäitumine oma `initGame()` funktsioonis: + +```javascript +eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { + if (hero.canFire()) { + hero.fire(); + } +}); +``` + +**See sündmuste kuulaja:** +- **Reageerib** tühiku klahvi sündmustele +- **Kontrollib** tulistamise jahutust +- **Käivitab** laseri loomise, kui lubatud + +Lisa kokkupõrgete käitlemine laser-vaenlase vastasseisus: + +```javascript +eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { + first.dead = true; + second.dead = true; +}); +``` + +**See kokkupõrke käitleja:** +- **Saab** kokkupõrkejõude mõlema objekti kohta +- **Märgib** mõlemad objektid eemaldamiseks +- **Tagab** nõuetekohase puhastuse pärast kokkupõrget + +#### 4. Loo Laser klass + +Rakenda laserprojektile, mis liigub ülespoole ja haldab oma elutsüklit: + +```javascript +class Laser extends GameObject { + constructor(x, y) { + super(x, y); + this.width = 9; + this.height = 33; + this.type = 'Laser'; + this.img = laserImg; + + let id = setInterval(() => { + if (this.y > 0) { + this.y -= 15; + } else { + this.dead = true; + clearInterval(id); } - ``` - -2. **Lisa kood, mis kontrollib kokkupõrkeid**. See on uus funktsioon, mis testib, kas kaks ristkülikut lõikuvad: - - ```javascript - function intersectRect(r1, r2) { - return !( - r2.left > r1.right || - r2.right < r1.left || - r2.top > r1.bottom || - r2.bottom < r1.top - ); - } - ``` - -3. **Lisa laseri tulistamise funktsionaalsus** - 1. **Lisa klahvivajutuse sõnum**. *Tühiku* klahv peaks looma laseri otse kangelase laeva kohal. Lisa kolm konstanti Messages objekti: - - ```javascript - KEY_EVENT_SPACE: "KEY_EVENT_SPACE", - COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER", - COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", - ``` - - 1. **Käsitle tühiku klahvi**. Muuda `window.addEventListener` keyup funktsiooni, et käsitleda tühikut: - - ```javascript - } else if(evt.keyCode === 32) { - eventEmitter.emit(Messages.KEY_EVENT_SPACE); - } - ``` - - 1. **Lisa kuulajad**. Muuda `initGame()` funktsiooni, et tagada, et kangelane saab tulistada, kui tühiku klahvi vajutatakse: - - ```javascript - eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { - if (hero.canFire()) { - hero.fire(); - } - ``` - - ja lisa uus `eventEmitter.on()` funktsioon, et tagada käitumine, kui vaenlane põrkub laseriga: - - ```javascript - eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { - first.dead = true; - second.dead = true; - }) - ``` - - 1. **Liiguta objekti**, tagades, et laser liigub järk-järgult ekraani ülemise osa suunas. Loo uus Laser klass, mis laiendab `GameObject`-i, nagu oled varem teinud: - - ```javascript - class Laser extends GameObject { - constructor(x, y) { - super(x,y); - (this.width = 9), (this.height = 33); - this.type = 'Laser'; - this.img = laserImg; - let id = setInterval(() => { - if (this.y > 0) { - this.y -= 15; - } else { - this.dead = true; - clearInterval(id); - } - }, 100) - } + }, 100); + } +} +``` + +**See klassi rakendus:** +- **Pikendab** GameObjecti, pärides põhifunktsionaalsuse +- **Seab** laseri sprite sobivad mõõtmed +- **Loo automaatse liikumise ülespoole `setInterval()` abil** +- **Haldab** enesehävitamist, kui jõuab ekraani ülemisse ossa +- **Jälgib** oma animatsiooni ajastamist ja puhastust + +#### 5. Rakenda kokkupõrgete tuvastussüsteem + +Loo põhjalik kokkupõrgete tuvastamise funktsioon: + +```javascript +function updateGameObjects() { + const enemies = gameObjects.filter(go => go.type === 'Enemy'); + const lasers = gameObjects.filter(go => go.type === "Laser"); + + // Testi laseri ja vaenlase kokkupõrkeid + lasers.forEach((laser) => { + enemies.forEach((enemy) => { + if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) { + eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, { + first: laser, + second: enemy, + }); } - ``` - - 1. **Käsitle kokkupõrkeid**, rakenda laseri kokkupõrke reeglid. Lisa `updateGameObjects()` funktsioon, mis testib kokkupõrkeid objektide vahel: - - ```javascript - function updateGameObjects() { - const enemies = gameObjects.filter(go => go.type === 'Enemy'); - const lasers = gameObjects.filter((go) => go.type === "Laser"); - // laser hit something - lasers.forEach((l) => { - enemies.forEach((m) => { - if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) { - eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, { - first: l, - second: m, - }); - } - }); - }); - - gameObjects = gameObjects.filter(go => !go.dead); - } - ``` - - Veendu, et lisad `updateGameObjects()` oma mängu tsüklisse `window.onload`-is. - - 4. **Rakenda laseri intervall**, et seda saaks tulistada ainult teatud sagedusega. - - Lõpuks muuda Hero klassi, et see saaks intervalli rakendada: - - ```javascript - class Hero extends GameObject { - constructor(x, y) { - super(x, y); - (this.width = 99), (this.height = 75); - this.type = "Hero"; - this.speed = { x: 0, y: 0 }; - this.cooldown = 0; - } - fire() { - gameObjects.push(new Laser(this.x + 45, this.y - 10)); - this.cooldown = 500; - - let id = setInterval(() => { - if (this.cooldown > 0) { - this.cooldown -= 100; - } else { - clearInterval(id); - } - }, 200); - } - canFire() { - return this.cooldown === 0; - } + }); + }); + + // Eemalda hävitatud objektid + gameObjects = gameObjects.filter(go => !go.dead); +} +``` + +**See kokkupõrkesüsteem:** +- **Filtreerib** mänguobjektid tüübi järgi efektiivseks testimiseks +- **Testib** iga laseri kõigi vaenlastega ristumisi +- **Saadab välja** kokkupõrke sündmusi, kui ristumised esinevad +- **Puhastab** hävinenud objektid pärast kokkupõrgete töötlemist + +> ⚠️ **Oluline**: Lisa `updateGameObjects()` oma põhimängu tsüklisse `window.onload` sees, et lubada kokkupõrgete tuvastust. + +#### 6. Lisa jahutussüsteem Hero klassi + +Täienda kangelase klassi tulistamise mehhanismi ja kiiruse piiramisega: + +```javascript +class Hero extends GameObject { + constructor(x, y) { + super(x, y); + this.width = 99; + this.height = 75; + this.type = "Hero"; + this.speed = { x: 0, y: 0 }; + this.cooldown = 0; + } + + fire() { + gameObjects.push(new Laser(this.x + 45, this.y - 10)); + this.cooldown = 500; + + let id = setInterval(() => { + if (this.cooldown > 0) { + this.cooldown -= 100; + } else { + clearInterval(id); } - ``` + }, 200); + } + + canFire() { + return this.cooldown === 0; + } +} +``` + +**Mõistmine täiustatud Hero klassist:** +- **Initsialiseerib** jahutustimeri nullist (valmis tulistama) +- **Loo** laserobjektid, mis paiknevad kangelase laeva kohal +- **Seab** jahutusperioodi, et vältida kiiret tulistamist +- **Vähendab** jahutustimerit intervallipõhiste värskendustega +- **Pakub** tulistamisvalmiduse kontrolli `canFire()` meetodi kaudu + +### 🔄 **Pedagoogiline kontroll** +**Täielik süsteemimõistmine**: Kontrolli oma oskust kokkupõrkesüsteemi alal: +- ✅ Kuidas ristküliku piirid võimaldavad efektiivset kokkupõrgete tuvastust? +- ✅ Miks on objekti elutsükli haldamine kriitiline mängu stabiilsuse jaoks? +- ✅ Kuidas jahutussüsteem takistab jõudluse langust? +- ✅ Millist rolli mängib sündmuspõhine arhitektuur kokkupõrgete käitlemisel? + +**Süsteemi integratsioon**: Sinu kokkupõrkesüsteem demonstreerib: +- **Matemaatilist täpsust**: ristküliku ristumiste algoritmid +- **Jõudluse optimeerimist**: tõhusad kokkupõrketestimise mustrid +- **Mäluhaldust**: ohutu objektide loomine ja hävitamine +- **Sündmuste koordineerimist**: lahutatud süsteemidevaheline suhtlus +- **Reaalajas töötlemist**: kaadritel põhinevad uuendus tsüklid + +**Professionaalsed mustrid**: Oled rakendanud: +- **Kohustuste eristamist**: füüsika, rendering ja sisend eraldi +- **Objekti-orienteeritud disaini**: pärimine ja polümorfism +- **Olekute haldust**: objektide elutsükkel ja mängu oleku jälgimine +- **Jõudluse optimeerimist**: efektiivsed algoritmid reaalaja kasutuseks + +### Oma rakenduse testimine + +Sinu kosmosemäng sisaldab nüüd täielikku kokkupõrgete tuvastust ja lahingumehhanisme. 🚀 Testi neid uusi võimeid: +- **Liigu** noolenuppudega, et kontrollida liikumist +- **Tulista lasega** tühikunupuga – märka, kuidas jahutusaeg takistab spämmi +- **Jälgi kokkupõrkeid** laserite ja vaenlaste vahel, põhjustades eemaldamise +- **Kontrolli puhastust**, kui hävitatud objektid kaovad mängust + +Oled edukalt rakendanud kokkupõrgete tuvastussüsteemi, kasutades samu matemaatilisi põhimõtteid, mis juhivad kosmoseaparaatide navigatsiooni ja robotite tööd. + +### ⚡ **Mida teha järgmise 5 minutiga** +- [ ] Ava brauseri DevToolsid ja sea murdepunkte oma kokkupõrke tuvastusfunktsiooni +- [ ] Proovi muuta laseri kiirust või vaenlase liikumist, et näha kokkupõrke mõju +- [ ] Eksperimenteeri erinevate jahutusajaga tulistamiskiiruste testimiseks +- [ ] Lisa `console.log` laused kokkupõrgete reaalajas jälgimiseks + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida lõputest ja mõista kokkupõrgete tuvastamise algoritme +- [ ] Lisa visuaalseid efekte, nagu plahvatused, kokkupõrgete korral +- [ ] Rakenda erinevat tüüpi projektiile, millel on erinevad omadused +- [ ] Loo võimsuse lisad, mis ajutiselt tõstavad mängija võimeid +- [ ] Lisa heliefekte, et kokkupõrked oleksid nauditavamad + +### 📅 **Sinu nädalane füüsikaprogrammeerimine** +- [ ] Valmista täielik kosmose-mäng lihvitud kokkupõrkesüsteemidega lõpetatuks +- [ ] Rakenda täiustatud kokkupõrkejooned, mis ulatuvad ristkülikutest kaugemale (ringid, hulknurgad) +- [ ] Lisa osakesesüsteemid realistlike plahvatuste jaoks +- [ ] Loo keerukas vaenlase käitumine kokkupõrgete vältimiseks +- [ ] Optimeeri kokkupõrgete tuvastamist hästi suure objektide arvuga esinemiseks +- [ ] Lisa füüsika simulatsioon nagu impulss ja realistlik liikumine + +### 🌟 **Sinu kuuajaline mängufüüsika meistriks saamine** +- [ ] Arenda mänge põhjalike füüsikamootorite ja realistlike simulatsioonidega +- [ ] Õpi 3D kokkupõrgete tuvastamist ja ruumilist jaotust +- [ ] Panusta avatud lähtekoodiga füüsikateeki ja mängumootoritesse +- [ ] Valda jõudluse optimeerimist graafika-rasketele rakendustele +- [ ] Loo hariduslikku materjali mängufüüsika ja kokkupõrgete tuvastamisest +- [ ] Koosta portfoolio, mis tutvustab sinu arenenud füüsikaprogrammeerimise oskusi + +## 🎯 Sinu kokkupõrgete tuvastamise meistriklassi ajakava + +```mermaid +timeline + title Kokkupõrke Tuletamine & Mängufüüsika Õppimise Protsess + + section Alus (10 minutit) + Ristküliku Matemaatika: Koordinaatsüsteemid + : Piiride arvutamine + : Asukoha jälgimine + : Mõõtmete haldamine + + section Algoritmi Kujundus (20 minutit) + Lõikumiskohad: Eraldamise testimine + : Ülekattumise tuvastamine + : Tõhususe optimeerimine + : Nurgajuhtude käsitlemine + + section Mängu Rakendamine (30 minutit) + Objektisüsteemid: Elutsükli haldamine + : Sündmuste koordineerimine + : Oleku jälgimine + : Mälu puhastamine + + section Interaktiivsed Funktsioonid (40 minutit) + Võitluse Mehhanismid: Projektiilisüsteemid + : Relva jahutusajad + : Kahju arvutamine + : Visuaalne tagasiside + + section Täiustatud Füüsika (50 minutit) + Reaalajas Süsteemid: Kaadrisageduse optimeerimine + : Ruumi jaotus + : Kokkupõrke reaktsioon + : Füüsikasimulaator + + section Professionaalsed Võtted (1 nädal) + Mängumootori Mõisted: Komponendisüsteemid + : Füüsikatorud + : Tõhususe analüüs + : Platvormideülene optimeerimine + + section Tööstuse Rakendused (1 kuu) + Tootmisoskused: Suuremastaabiline optimeerimine + : Meeskonnatöö + : Mootori arendus + : Platvormi juurutamine +``` +### 🛠️ Sinu mängufüüsika tööriistakasti kokkuvõte + +Pärast selle õppetunni läbimist oled omandanud: +- **Kokkupõrgete matemaatika**: ristkülikute lõikumisalgoritmid ja koordinaatsüsteemid +- **Jõudluse optimeerimine**: efektiivne kokkupõrgete tuvastamine reaalajas rakendustele +- **Objekti elutsükli haldus**: ohutud loomise, uuendamise ja hävitamise mustrid +- **Sündmuspõhine arhitektuur**: sidumata süsteemid kokkupõrke reageerimiseks +- **Mängutsükli integreerimine**: kaadripõhised füüsikauuendused ja renderdamise koordineerimine +- **Sisendsüsteemid**: reageerivad juhtnupud piirangute ja tagasisidega +- **Mälu haldamine**: efektiivne objektide taaskasutus ja koristamise strateegiad + +**Reaalmaailma rakendused**: sinu kokkupõrgete tuvastamise oskused leiavad kasutust otse: +- **Interaktiivsed simulatsioonid**: teaduslikud mudelid ja õppevahendid +- **Kasutajaliidese disain**: lohista-ja-panna toimingud ja puutetuvastus +- **Andmete visualiseerimine**: interaktiivsed diagrammid ja klikitavad elemendid +- **Mobiilne arendus**: puutekäskluste äratundmine ja kokkupõrgete käsitlemine +- **Robotprogrammimine**: marsruudiplaan ja takistuste vältimine +- **Arvutigraafika**: kiirte jälgimine ja ruumialgsed algoritmid + +**Professionaalsed oskused**: nüüd oskad: +- **Kujundada** tõhusaid algoritme reaalaja kokkupõrgete tuvastamiseks +- **Rakendada** füüsikasüsteeme, mis skaleeruvad objekti keerukuse järgi +- **Siluda** keerukaid interaktsioonisüsteeme matemaatiliste põhimõtete abil +- **Optimeerida** jõudlust erinevate riist- ja brauserivõimaluste korral +- **Arhitektuuri** hooldatavaid mängusüsteeme, rakendades tõestatud disainimustreid -Nüüd on sinu mängul juba mõningane funktsionaalsus! Sa saad navigeerida nooleklahvidega, tulistada laserit tühiku klahviga ja vaenlased kaovad, kui neid tabad. Tubli töö! +**Mänguarenduse mõisted, mida valdad**: +- **Füüsikasimulatsioon**: reaalaja kokkupõrgete tuvastamine ja reageerimine +- **Jõudluse inseneritus**: optimeeritud algoritmid interaktiivsetele rakendustele +- **Sündmussüsteemid**: lahtised suhtluskanalid mängukomponentide vahel +- **Objektihaldus**: efektiivsed elutsükli mustrid dünaamilise sisu jaoks +- **Sisendikäitlemine**: reageerivad juhtnupud sobiva tagasisidega + +**Järgmine tase**: oled valmis uurima täiustatud füüsikamootoreid nagu Matter.js, rakendama 3D kokkupõrgete tuvastust või ehitama keerukaid osakesesüsteeme! + +🌟 **Saavutatud**: oled loonud täieliku füüsikal põhineva interaktsioonisüsteemi professionaalse kokkupõrgete tuvastamisega! + +## GitHub Copiloti agendi väljakutse 🚀 + +Kasuta agendi režiimi, et lahendada järgmine ülesanne: + +**Kirjeldus:** Täienda kokkupõrgete tuvastamise süsteemi, rakendades võimsuse lisasid (power-ups), mis tekivad juhuslikult ja annavad kangelasilale ajutised võimed. + +**Üleskutse:** Loo PowerUp klass, mis laiendab GameObjecti, ja rakenda kokkupõrgete tuvastamist kangelase ning võimusuuruste vahel. Lisa vähemalt kaks tüüpi võimsusi: üks suurendab tulekiirust (lühendab taastumisaega) ja teine loob ajutise kilbi. Kaasa generaator, mis loob võimsused juhuslikel ajavahemikel ja positsioonidel. --- + + ## 🚀 Väljakutse -Lisa plahvatus! Vaata mängu varasid [Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) ja proovi lisada plahvatus, kui laser tabab tulnukat. +Lisa plahvatus! Vaata mänguressursse [the Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) ja proovi lisada plahvatus, kui laser tabab tulnukat -## Loengu-järgne viktoriin +## Loengu järgne test -[Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/36) +[Loengu järgne test](https://ff-quizzes.netlify.app/web/quiz/36) ## Ülevaade ja iseseisev õppimine -Katseta oma mängus seni kasutatud intervalle. Mis juhtub, kui neid muuta? Loe rohkem [JavaScripti ajastamise sündmuste kohta](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). +Katseta oma mängus seni kasutatud ajavahemikke. Mis juhtub nende muutmisel? Loe lisaks [JavaScripti ajastussündmuste](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) kohta. -## Ülesanne +## Kodutöö [Uuri kokkupõrkeid](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud kasutades tehisintellekti tõlke teenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Meie ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/4-collision-detection/assignment.md b/translations/et/6-space-game/4-collision-detection/assignment.md index 34b31ddb0..f7791b7eb 100644 --- a/translations/et/6-space-game/4-collision-detection/assignment.md +++ b/translations/et/6-space-game/4-collision-detection/assignment.md @@ -1,8 +1,8 @@ +**Vastutusest loobumine**: +See dokument on tõlgitud tehisintellekti tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame täpsust, tuleb arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles on autoriteetne allikas. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tekkivate arusaamatuste ega väärtõlgenduste eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/5-keeping-score/README.md b/translations/et/6-space-game/5-keeping-score/README.md index 6ee95b4b9..2f2d265f3 100644 --- a/translations/et/6-space-game/5-keeping-score/README.md +++ b/translations/et/6-space-game/5-keeping-score/README.md @@ -1,23 +1,89 @@ -# Kosmosemängu loomine, osa 5: Punktid ja elud - -## Eelloengu viktoriin - -[Eelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/37) - -Selles tunnis õpid, kuidas lisada mängule punktisüsteemi ja arvutada elusid. +# Ehita kosmose mäng Osa 5: Skoreerimine ja Elud + +```mermaid +journey + title Sinu mängudisaini teekond + section Mängijate tagasiside + Mõista punktisüsteemi psühholoogiat: 3: Student + Õpi visuaalset kommunikatsiooni: 4: Student + Kujunda tasusüsteemid: 4: Student + section Tehniline teostus + Canvas teksti kuvamine: 4: Student + Oleku haldus: 5: Student + Sündmustel põhinevad uuendused: 5: Student + section Mängu viimistlemine + Kasutajakogemuse disain: 5: Student + Tasakaalusta väljakutset ja tasu: 5: Student + Loo kaasahaarav mängukäik: 5: Student +``` +## Eel-loengu viktoriin + +[Eel-loengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/37) + +Oled valmis panema oma kosmosemängu tõeliselt mänguliseks? Lisame punktisüsteemi ja elu haldamise - põhimehhaanika, mis muutis varased arcade-mängud nagu Space Invaders lihtsatest demonstratsioonidest sõltuvust tekitavaks meelelahutuseks. Siin hakkab su mäng tõeliselt mängitavaks muutuma. + +```mermaid +mindmap + root((Mängu tagasiside süsteemid)) + Visuaalne kommunikatsioon + Teksti renderdamine + Ikoonide kuvamine + Värvide psühholoogia + Layout'i disain + Punktide mehhaanikad + Punktiväärtused + Tasude ajastus + Edusammude jälgimine + Saavutussüsteemid + Eluhaldus + Risk vs tasu + Mängija agentuur + Raske tasakaal + Taastumise mehhaanikad + Kasutajakogemus + Kohene tagasiside + Selge info + Emotsionaalne vastus + Pühendumistsüklid + Rakendamine + Canvas API + Staadi haldus + Sündmussüsteemid + Jõudlus +``` +## Teksti joonistamine ekraanile - sinu mängu hääl -## Teksti kuvamine ekraanil +Skoori kuvamiseks peame õppima, kuidas teksti canvas'ele joonistada. `fillText()` meetod on sinu peamine tööriist - sama tehnika, mida kasutati klassikalistes arcade-mängudes skoori ja staatuse kuvamiseks. -Et mängu punktisüsteemi ekraanil kuvada, pead teadma, kuidas teksti ekraanile paigutada. Vastus on `fillText()` meetodi kasutamine canvas-objektil. Samuti saad kontrollida teisi aspekte, nagu millist fonti kasutada, teksti värvi ja isegi joondust (vasak, parem, keskel). Allpool on näide koodist, mis kuvab teksti ekraanil. +```mermaid +flowchart LR + A["📝 Teksti sisu"] --> B["🎨 Stiilimine"] + B --> C["📍 Paigutus"] + C --> D["🖼️ Lõuendi renderdamine"] + + E["Kiri"] --> B + F["Fondisuurus"] --> B + G["Värv"] --> B + H["Joondus"] --> B + + I["X koordinaat"] --> C + J["Y koordinaat"] --> C + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +Sul on täielik kontroll teksti välimuse üle: ```javascript ctx.font = "30px Arial"; @@ -26,22 +92,74 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ Loe rohkem [teksti lisamise kohta canvas'ile](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) ja tee oma versioon veelgi stiilsemaks! +✅ Süvene lähemalt [teksti lisamisse canvas'ele](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) – võid üllatuda, kui loominguline saad olla fontide ja stiilidega! -## Elu kui mängu kontseptsioon +## Elud - rohkem kui lihtsalt number -Elu kontseptsioon mängus on lihtsalt number. Kosmosemängu kontekstis on tavaks määrata kindel arv elusid, mis vähenevad ükshaaval, kui sinu laev saab kahjustada. Tore oleks, kui saaksid seda graafiliselt kujutada, näiteks väikeste laevade või südametega, mitte ainult numbriga. +Mängudisainis tähistab "elu" mängija eksimisruumi. See kontseptsioon pärineb flipperimängudest, kus said mängida mitme palliga. Varastes videomängudes nagu Asteroids andsid elud mängijale loa riske võtta ja vigadest õppida. -## Mida ehitada +```mermaid +flowchart TD + A["🎮 Mängija tegevus"] --> B{"Riskide hindamine"} + + B --> C["Kõrge risk, kõrge tasu"] + B --> D["Ohutu strateegia"] + + C --> E{"Tulemus"} + D --> F["Stabiilne edenemine"] + + E -->|Õnnestumine| G["🏆 Suured punktid"] + E -->|Ebaõnnestumine| H["💔 Kaota elu"] + + H --> I{"Elud alles?"} + I -->|Jah| J["🔄 Proovi uuesti"] + I -->|Ei| K["💀 Mäng läbi"] + + J --> B + G --> B + F --> B + + style C fill:#ffebee + style D fill:#e8f5e8 + style G fill:#e3f2fd + style H fill:#fff3e0 +``` +Visuaalne esitlus on väga oluline – laevaikoonide kuvamine selle asemel, et lihtsalt öelda "Elud: 3", loob kohe visuaalse äratundmise, nagu varased arcade-aparaadid kasutasid ikoonide abil suhtlemiseks keeltest üle. -Lisame mängule järgmised elemendid: +## Ehita oma mängu tasustamissüsteem -- **Mängu punktisüsteem**: Iga vaenlase laeva hävitamise eest peaks kangelane saama punkte, soovitame 100 punkti laeva kohta. Punktisüsteem peaks olema kuvatud ekraani vasakus allnurgas. -- **Elud**: Sinu laeval on kolm elu. Kaotad ühe elu iga kord, kui vaenlase laev sinuga kokku põrkub. Elude arv peaks olema kuvatud ekraani paremas allnurgas ja kujutatud järgmise graafikaga ![elu pilt](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.et.png). +Nüüd rakendame põhifunktsioonid, mis hoiavad mängijaid kaasatud: + +```mermaid +sequenceDiagram + participant Player + participant GameEngine + participant ScoreSystem + participant LifeSystem + participant Display + + Player->>GameEngine: Tulistab vaenlast + GameEngine->>ScoreSystem: Annab punkte + ScoreSystem->>ScoreSystem: +100 punkti + ScoreSystem->>Display: Uuenda skoori + + Player->>GameEngine: Puudutab vaenlast + GameEngine->>LifeSystem: Kaotab elu + LifeSystem->>LifeSystem: -1 elu + LifeSystem->>Display: Uuenda elusid + + alt Elud > 0 + LifeSystem->>Player: Jätka mängimist + else Elud = 0 + LifeSystem->>GameEngine: Mäng läbi + end +``` +- **Skoorisüsteem**: Iga hävitatud vaenlase laev annab 100 punkti (ümarad numbrid on mängijatele kergemini vaimselt arvutatavad). Skoor kuvatakse vasakus alanurgas. +- **Elude lugur**: Sinu kangelane alustab kolme eluga - see on varaste arcade-mängude poolt kehtestatud standard mängimise väljakutse ja tasakaalu jaoks. Iga kokkupõrge vaenlasega maksab ühe elu. Jääke näitame paremas alanurgas laevaikoonidega ![elu pilt](../../../../translated_images/life.6fb9f50d53ee0413.et.png). -## Soovitatud sammud +## Hakame ehitama! -Leia failid, mis on sinu jaoks loodud kaustas `your-work`. See peaks sisaldama järgmist: +Kõigepealt seadista oma tööruum. Liigu vahekausta `your-work` ja peaksid nägema järgmisi faile: ```bash -| assets @@ -53,24 +171,49 @@ Leia failid, mis on sinu jaoks loodud kaustas `your-work`. See peaks sisaldama j -| package.json ``` -Alusta oma projekti kaustas `your_work`, sisestades: +Mängu testimiseks käivita arendusserver kaustast `your_work`: ```bash cd your-work npm start ``` -Ülaltoodud käsk käivitab HTTP-serveri aadressil `http://localhost:5000`. Ava brauser ja sisesta see aadress. Praegu peaksid nägema kangelast ja kõiki vaenlasi, ning kui vajutad vasak- ja paremnoolt, liigub kangelane ja saab vaenlasi tulistada. +See käivitab kohaliku serveri aadressil `http://localhost:5000`. Ava see oma brauseris, et oma mängu näha. Testi juhtnuppe nooleklahvidega ja proovi vaenlasi tulistada, et veenduda, et kõik töötab. -### Koodi lisamine +```mermaid +flowchart TD + A["1. Varade laadimine"] --> B["2. Mängu muutujad"] + B --> C["3. Kokkupõrke tuvastamine"] + C --> D["4. Kangelase täiustamine"] + D --> E["5. Kuvamisfunktsioonid"] + E --> F["6. Sündmuste käsitlejad"] + + G["Eluikooni pilt"] --> A + H["Punktide ja elude jälgimine"] --> B + I["Kangelase-vaenlase lõiked"] --> C + J["Punktide ja elude meetodid"] --> D + K["Teksti ja ikooni joonistamine"] --> E + L["Tasu ja karistuse loogika"] --> F + + F --> M["🎮 Täielik mäng"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec + style M fill:#e1f5fe +``` +### Aeg kodeerimiseks! -1. **Kopeeri vajalikud ressursid** kaustast `solution/assets/` kausta `your-work`; lisad sinna `life.png` ressursi. Lisa `lifeImg` funktsiooni window.onload: +1. **Hangi vajalikud visuaalsed ressursid**. Kopeeri `life.png` fail kaustast `solution/assets/` oma `your-work` kausta. Seejärel lisa lifeImg oma window.onload funktsiooni: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` -1. Lisa `lifeImg` ressursside nimekirja: +1. Ära unusta lisada `lifeImg` oma varade nimekirja: ```javascript let heroImg, @@ -80,9 +223,9 @@ npm start eventEmitter = new EventEmitter(); ``` -2. **Lisa muutujad**. Lisa kood, mis esindab sinu punktisummat (0) ja allesjäänud elusid (3), ning kuva need ekraanil. +2. **Seadista mängu muutujad**. Lisa kood, mis jälgib sinu koguskoori (alustades 0-st) ja järelejäänud elusid (alustades 3). Kuvame need ekraanil, et mängijad teaksid alati oma seisukohta. -3. **Laienda funktsiooni `updateGameObjects()`**. Laienda funktsiooni `updateGameObjects()`, et käsitleda vaenlaste kokkupõrkeid: +3. **Rakenda kokkupõrke tuvastus**. Laienda oma `updateGameObjects()` funktsiooni, et tuvastada, millal vaenlased põrkuvad sinu kangelasega: ```javascript enemies.forEach(enemy => { @@ -93,19 +236,19 @@ npm start }) ``` -4. **Lisa elud ja punktid**. - 1. **Initsialiseeri muutujad**. Lisa `this.cooldown = 0` alla klassis `Hero` elud ja punktid: +4. **Lisa elu ja punktide jälgimine oma Kangelasele**. + 1. **Algata loendurid**. Pane `this.cooldown = 0` alusel Hero klassis elude ja punktide initsialiseerimine: ```javascript this.life = 3; this.points = 0; ``` - 1. **Kuva muutujad ekraanil**. Kuva need väärtused ekraanil: + 1. **Näita neid väärtusi mängijale**. Loo funktsioonid, mis joonistavad need väärtused ekraanile: ```javascript function drawLife() { - // TODO, 35, 27 + // TEHA, 35, 27 const START_POS = canvas.width - 180; for(let i=0; i < hero.life; i++ ) { ctx.drawImage( @@ -128,18 +271,34 @@ npm start ``` - 1. **Lisa meetodid mängutsüklisse**. Veendu, et lisad need funktsioonid oma window.onload funktsiooni `updateGameObjects()` alla: + 1. **Ühenda kõik oma mängutsükliga**. Lisa need funktsioonid window.onload funktsiooni kohe pärast `updateGameObjects()` kutsumist: ```javascript drawPoints(); drawLife(); ``` -1. **Rakenda mängureeglid**. Rakenda järgmised mängureeglid: +### 🔄 **Pedagoogiline kontrollpunkt** +**Mängudisaini mõistmine**: Enne tagajärgede rakendamist veendu: +- ✅ Kuidas visuaalne tagasiside suhtleb mängija seisundiga +- ✅ Miks on kasutajaliidese elementide järjepidev asetamine oluline kasutusmugavuse jaoks +- ✅ Punktiväärtuste ja elude haldamise psühholoogia +- ✅ Kuidas canvas teksti renderdamine erineb HTML tekstist + +**Kiire enesetest**: Miks kasutavad arcade-mängud tavaliselt ümaraid numbreid punktide vormistamiseks? +*Vastus: Ümarad numbrid on mängijatele vaimselt kergemini arvutatavad ja loovad rahuldust pakkuva psühholoogilise preemia* + +**Kasutajakogemuse põhimõtted**: Rakendad nüüd: +- **Visuaalne hierarhia**: Oluline info on nähtavalt esitatud +- **Kohene tagasiside**: Mängija tegevustest reaalajas värskendused +- **Kognitiivne koormus**: Lihtne ja selge info esitlus +- **Emotsionaalne disain**: Ikoonid ja värvid, mis loovad mängijaga sideme - 1. **Iga kangelase ja vaenlase kokkupõrke korral** vähenda elu. +1. **Rakenda mängu tagajärjed ja tasud**. Lisame nüüd tagasisidesüsteemid, mis teevad mängija tegevused tähendusrikkaks: - Laienda klassi `Hero`, et seda vähendamist teha: + 1. **Kokkupõrked maksavad elusid**. Iga kord, kui sinu kangelane põrkab vaenlasega, kaotad ühe elu. + + Lisa see meetod oma `Hero` klassile: ```javascript decrementLife() { @@ -150,9 +309,9 @@ npm start } ``` - 2. **Iga laseri, mis tabab vaenlast, korral** suurenda punktisummat 100 punkti võrra. + 2. **Vaenlaste tulistamine annab punkte**. Iga edukas tabamus annab 100 punkti, pakkudes kohest positiivset tagasisidet täpsele tulistamisele. - Laienda klassi `Hero`, et seda suurendamist teha: + Laienda oma Hero klassi selle punktide suurendamise meetodiga: ```javascript incrementPoints() { @@ -160,7 +319,7 @@ npm start } ``` - Lisa need funktsioonid oma kokkupõrke sündmuste emitentidesse: + Nüüd ühenda need funktsioonid oma kokkupõrke sündmustega: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { @@ -175,29 +334,177 @@ npm start }); ``` -✅ Uuri, milliseid teisi mänge on loodud JavaScripti/Canvas'i abil. Millised on nende ühised omadused? - -Selle töö lõpus peaksid nägema väikeseid "elu" laevu paremas allnurgas, punkte vasakus allnurgas, ning sinu elude arv peaks vähenema, kui põrkad vaenlastega, ja punktid peaksid suurenema, kui tulistad vaenlasi. Tubli töö! Sinu mäng on peaaegu valmis. +✅ Huvitab, milliseid teisi mänge on JavaScripti ja Canvas'iga tehtud? Uuri ringi - võid olla üllatunud, kui palju on võimalik! + +Pärast nende funktsioonide rakendamist testi oma mängu täieliku tagasisidesüsteemi nägemiseks tegevuses. Peaksid nägema elu ikoone paremas alanurgas, oma skoori vasakus alanurgas ja jälgima, kuidas kokkupõrked vähendavad elusid, samal ajal kui edukad tabamised suurendavad skoori. + +Sinu mängul on nüüd põhimehhaanika, mis muutsid varased arcade-mängud niivõrd kaasahaaravaks - selged eesmärgid, kohene tagasiside ja tähenduslikud tagajärjed mängija tegevustele. + +### 🔄 **Pedagoogiline kontrollpunkt** +**Täielik mängudisaini süsteem**: Kontrolli oma mängijat tagasiside süsteemide valdamist: +- ✅ Kuidas skoorimehhaanika loob mängijale motivatsiooni ja kaasatust? +- ✅ Miks on visuaalne järjepidevus kasutajaliidese disaini jaoks oluline? +- ✅ Kuidas elusüsteem tasakaalustab väljakutset ja mängija hoidmist? +- ✅ Millist rolli mängib kohene tagasiside rahuldustpakkuva mängukogemuse loomisel? + +**Süsteemi integratsioon**: Sinu tagasisidesüsteem demonstreerib: +- **Kasutajakogemuse disain**: Selge visuaalne kommunikatsioon ja infohierarhia +- **Sündmustepõhine arhitektuur**: Mängija tegevustele reageerivad uuendused +- **Seisundi haldus**: Dünaamilise mänguinfo jälgimine ja kuvamine +- **Canvase valdamine**: Teksti renderdamine ja sprite’ide positsioneerimine +- **Mängu psühholoogia**: Mängija motivatsiooni ja kaasatuse mõistmine + +**Professionaalsed mustrid**: Oled rakendanud: +- **MVC arhitektuur**: Mänguloogika, andmete ja esituse eraldamine +- **Observer muster**: Sündmustepõhised uuendused mänguoleku muutustele +- **Komponentide disain**: Taaskasutatavad funktsioonid renderdamiseks ja loogikaks +- **Tõhususe optimeerimine**: Efektiivne renderdamine mängutsüklites + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Katseta erinevate fontide suuruste ja värvidega skoori kuvamisel +- [ ] Muuda punktiarve ja vaata, kuidas see mängutunnetust mõjutab +- [ ] Lisa console.log laused punktide ja elude muutuste jälgimiseks +- [ ] Testi äärmuslikke juhtumeid, näiteks elude lõppemist või kõrget skoori + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täida post-õppe viktoriin ja mõista mängudisaini psühholoogiat +- [ ] Lisa heliefektid skoorimiseks ja elude kaotamiseks +- [ ] Rakenda kõrge skoori süsteem localStorage kasutades +- [ ] Loo erinevate vaenlaste tüüpide jaoks erinevad punktisummad +- [ ] Lisa visuaalsed efektid nagu ekraani värin elu kaotamisel + +### 📅 **Sinu nädalane mängudisaini teekond** +- [ ] Viimiusta kosmosemäng täpsete tagasisidesüsteemidega +- [ ] Rakenda edasijõudnud skoorimehhaanikaid nagu kombomultiplierid +- [ ] Lisa saavutusi ja avatud sisu +- [ ] Loo raskusastme progresseerumise ja tasakaalu süsteemid +- [ ] Kujunda kasutajaliidesed menüüdele ja mängu lõppkuvadele +- [ ] Õpi teistelt mängudelt nende kaasatusmehhanisme + +### 🌟 **Sinu kuuajaline mänguarenduse meistritase** +- [ ] Ehita täismahus mänge keerukate progresseerumise süsteemidega +- [ ] Õpi mänguanalüütikat ja mängijate käitumise mõõtmist +- [ ] Panusta avatud lähtekoodiga mänguarendusprojektidesse +- [ ] Valda edasijõudnud mängudisaini mustreid ja monetiseerimist +- [ ] Loo hariduslikku sisu mängudisaini ja kasutajakogemuse kohta +- [ ] Koosta portfoolio, mis näitab mängudisaini ja arendusoskusi + +## 🎯 Sinu mängudisaini meistritabel + +```mermaid +timeline + title Mängudisaini ja mängijate tagasiside õppimise areng + + section Alused (10 minutit) + Visuaalne kommunikatsioon: Teksti kuvamine + : Ikooni disain + : Kujundusprintsiibid + : Värvide psühholoogia + + section Mängija psühholoogia (20 minutit) + Motivatsioonisüsteemid: Punktiväärtused + : Risk vs tasu + : Edusammude tagasiside + : Saavutuste disain + + section Tehniline teostus (30 minutit) + Kanvaasimeisterlikkus: Teksti positsioneerimine + : Sprite'i kuvamine + : Seisundi haldamine + : Jõudluse optimeerimine + + section Mängu tasakaalustamine (40 minutit) + Raskusastme disain: Elude haldamine + : Punktiskoori kõverad + : Mängijate hoidmine + : Juurdepääsetavus + + section Kasutajakogemus (50 minutit) + Liidese disain: Infovõimaluste hierarhia + : Reageeriv tagasiside + : Emotsionaalne disain + : Kasutatavuse testimine + + section Täiustatud süsteemid (1 nädal) + Mängumehaanika: Arengusüsteemid + : Analüütika integreerimine + : Monetiseerimise disain + : Kogukonna funktsioonid + + section Tööstusharu oskused (1 kuu) + Professionaalne areng: Meeskonnatöö + : Disainidokumentatsioon + : Mängijauuringud + : Platvormi optimeerimine +``` +### 🛠️ Sinu mängudisaini tööriistakast kokkuvõte + +Pärast selle õppetunni lõpetamist valdad nüüd: +- **Mängija psühholoogia**: Motivatsiooni mõistmine, riskide ja tasude mehhanismid ning kaasatusening +- **Visuaalne kommunikatsioon**: Tõhus UI disain teksti, ikoonide ja paigutusega +- **Tagasisidesüsteemid**: Mängija tegevustele ja sündmustele reaalajas reageerimine +- **Seisundihaldus**: Dünaamilise mänguandmete jälgimine ja efektiivne kuvamine +- **Canvase tekstirenderdus**: Professionaalne tekst kuvamine stiili ja positsioneerimisega +- **Sündmuste integratsioon**: Kasutaja tegevuste ühendamine tähenduslike mängu tagajärgedega +- **Mängu tasakaal**: Väljakutsete kõverate ja mängijate progresseerumise süsteemide disain + +**Tegelikud rakendused**: Sinu mängudisaini oskused sobivad otse: +- **Kasutajaliidese disain**: Köitvate ja intuitiivsete liideste loomine +- **Tootearendus**: Kasutajamotivatsiooni ja tagasiside mehhanismide mõistmine +- **Haridustehnoloogia**: Gamifikatsioon ja õppimise kaasatavuse süsteemid +- **Andmete visualiseerimine**: Keeruka info kättesaadavaks ja kaasahaaravaks muutmine +- **Mobiilirakenduste arendus**: Säilituse mehhanismid ja kasutajakogemuse disain +- **Turundustehnoloogia**: Kasutajakäitumise ja konversiooni optimeerimise mõistmine + +**Omandatud professionaalsed oskused**: Sa oskad nüüd: +- **Disainida** kasutajakogemusi, mis motiveerivad ja kaasavad kasutajaid +- **Rakendada** tagasisidesüsteeme, mis juhivad kasutajate käitumist tõhusalt +- **Tasakaalustada** väljakutset ja ligipääsetavust interaktiivsetes süsteemides +- **Luuа** visuaalset kommunikatsiooni, mis toimib eri kasutajarühmade seas +- **Analüüsida** kasutajakäitumist ja täiustada disaini iteratiivselt + +**Valda mänguarenduse põhimõisteid**: +- **Mängija motivatsioon**: Mõista, mis juhib kaasatust ja hoidmist +- **Visuaalne disain**: Loo selge, atraktiivne ja funktsionaalne liides +- **Süsteemi integratsioon**: Ühenda mitu mängusüsteemi sujuvaks kogemuseks +- **Tõhususe optimeerimine**: Efektiivne renderdamine ja seisundihaldus +- **Ligipääsetavus**: Kujunda erinevate oskustega ja vajadustega mängijatele + +**Järgmine tase**: Oled valmis uurima edasijõudnud mängudisaini mustreid, rakendama analüütikasüsteeme või õppima mängude monetiseerimise ja mängijate hoidmise strateegiaid! + +🌟 **Saavutuse saavutamine**: Oled ehitanud täieliku mängija tagasisidesüsteemi professionaalsete mängudisaini põhimõtetega! --- +## GitHub Copiloti agendi väljakutse 🚀 + +Kasuta Agendi režiimi, et täita järgmine väljakutse: + +**Kirjeldus:** Täienda kosmose mängu skoorisüsteemi kõrgete skooride funktsiooniga, mis kasutab püsivat salvestust ja boonuspunktide mehhanisme. + +**Prompt:** Loo kõrge skoori süsteem, mis salvestab mängija parima skoori localStorage'i. Lisa boonuspunkte järjestikuste vaenlaste tapmise eest (kombo süsteem) ja rakenda erinevaid punktiväärtusi erinevate vaenlaste tüüpidele. Näita visuaalset indikaatorit, kui mängija saavutab uue kõrge skoori, ning kuva praegust kõrget skoori mängu ekraanil. + + + ## 🚀 Väljakutse -Sinu kood on peaaegu valmis. Kas suudad ette kujutada järgmisi samme? +Sul on nüüd toimiv mäng skoorimise ja eludega. Mõtle, millised täiendavad funktsioonid võiksid mängijakogemust parandada. -## Järelloengu viktoriin +## Järgmisel viktoriinil -[Järelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/38) +[Järgnev viktoriin](https://ff-quizzes.netlify.app/web/quiz/38) -## Ülevaade ja iseseisev õppimine +## Kordamine & iseseisev õpe -Uuri mõningaid viise, kuidas mängus punkte ja elusid suurendada ja vähendada. On olemas huvitavaid mängumootoreid, nagu [PlayFab](https://playfab.com). Kuidas nende kasutamine võiks sinu mängu täiustada? +Tahad rohkem avastada? Uuri erinevaid lähenemisi skooride ja elusüsteemide loomisel. Seal on põnevaid mängumootoreid nagu [PlayFab](https://playfab.com), mis haldavad skoorimist, edetabeleid ja mängijate progresseerumist. Kuidas võiks sellise süsteemi integreerimine viia sinu mängu uuele tasemele? -## Ülesanne +## Kodune ülesanne -[Loo punktisüsteemiga mäng](assignment.md) +[Ehita skoorimäng](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutühendus**: +See dokument on tõlgitud kasutades tehisintellektil põhinevat tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, tuleb arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või väärinterpretatsioonide eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/6-end-condition/README.md b/translations/et/6-space-game/6-end-condition/README.md index b739edd6c..38b2827dc 100644 --- a/translations/et/6-space-game/6-end-condition/README.md +++ b/translations/et/6-space-game/6-end-condition/README.md @@ -1,41 +1,163 @@ -# Kosmoseteemalise mängu loomine, osa 6: Lõpp ja taaskäivitamine +# Ehita kosmosemäng osa 6: Lõpp ja taaskäivitamine + +```mermaid +journey + title Sinu mängu lõpetamise teekond + section Lõpptingimused + Määra võidu/kadumise seisundid: 3: Student + Rakenda tingimuste kontrollimine: 4: Student + Halda seisundite üleminekuid: 4: Student + section Mängija kogemus + Kujunda tagasisidesüsteemid: 4: Student + Loo taaskäivitamise mehhanismid: 5: Student + Viimi kasutajaliides: 5: Student + section Süsteemi integratsioon + Halda mängutsüklit: 5: Student + Halda mälu puhastamist: 5: Student + Loo täielik kogemus: 5: Student +``` +Iga suurepärane mäng vajab selgeid lõpptingimusi ja sujuvat taaskäivitamise mehhanismi. Sa oled loonud muljetavaldava kosmosemängu, kus saab liikuda, võidelda ja punkte teenida – nüüd on aeg lisada viimased tükid, mis teevad selle mängu täielikuks. + +Sinu mäng jookseb hetkel lõputult, nagu NASA Voyageri sondid, mis saadeti teele 1977. aastal – nad reisivad jätkuvalt läbi kosmose kümneid aastaid hiljem. Kuigi see sobib kosmoseuuringuteks, vajavad mängud määratletud lõpp-punkte, et pakkuda rahuldustpakkuvat kogemust. + +Täna viime ellu nõuetekohased võidu/kaotuse tingimused ja taaskäivitussüsteemi. Selle tunni lõpuks on sul lihvitud mäng, mida mängijad saavad lõpetada ja uuesti mängida, just nagu klassikalised arcade-mängud, mis määratlesid selle meediumi. + +```mermaid +mindmap + root((Mängu lõpetamine)) + Lõpetingimused + Võiduseisundid + Kaotustingimused + Edusammude jälgimine + Seisundi valideerimine + Mängija tagasiside + Visuaalsed sõnumid + Värvi psühholoogia + Selge suhtlus + Emotsionaalne vastus + Seisundi haldus + Mängutsükli juhtimine + Mälu puhastamine + Objektide elutsükkel + Sündmuste käsitlemine + Taaskäivitus süsteemid + Sisendi käsitlemine + Seisundi lähtestamine + Värske algus + Kasutajakogemus + Viimistlemise elemendid + Sõnumite kuvamine + Sujuvad üleminekud + Vigade vältimine + Juurdepääsetavus +``` +## Eelloengu viktoriin + +[Eelloengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/39) + +## Mängu lõpptingimuste mõistmine -## Loengu-eelne viktoriin +Millal peaks su mäng lõppema? See fundamentaalne küsimus on kujundanud mängudisaini juba varajastest arcade-aegadest alates. Pac-Man lõpeb siis, kui sa vaimude kätte jääd või kõik punktid korjad, samas Space Invaders lõpeb, kui tulnukad jõuavad põhja või sa hävitad kõik. + +Mängu loojana määratled võidu ja kaotuse tingimused. Meie kosmosemängu jaoks on siin tõestatud lähenemised, mis loovad kaasahaarava mängukogemuse: + +```mermaid +flowchart TD + A["🎮 Mängu algus"] --> B{"Kontrolli tingimusi"} + + B --> C["Vastaste arv"] + B --> D["Kangelase elud"] + B --> E["Punkti lävend"] + B --> F["Taseme edenemine"] + + C --> C1{"Vastaste arv = 0?"} + D --> D1{"Elud = 0?"} + E --> E1{"Punkte ≥ siht?"} + F --> F1{"Eesmärgid täidetud?"} + + C1 -->|Jah| G["🏆 Võit"] + D1 -->|Jah| H["💀 Kaotus"] + E1 -->|Jah| G + F1 -->|Jah| G + + C1 -->|Ei| B + D1 -->|Ei| B + E1 -->|Ei| B + F1 -->|Ei| B + + G --> I["🔄 Taaskäivitamise valik"] + H --> I + + style G fill:#e8f5e8 + style H fill:#ffebee + style I fill:#e3f2fd +``` +- **`N` vaenlase laeva hävitamine**: Kui mäng jaguneb erinevateks tasemeteks, on tavapärane vajada `N` vaenlase laeva hävitamist, et tase lõpetada. +- **Sinu laev on hävitatud**: On mänge, kus kaotad, kui su laev hävitatakse. Teine levinud lähenemine on elu mõiste olemasolu. Iga kord, kui su laev hävitatakse, kaotad ühe elu. Kui kõik elud on otsas, kaotad mängu. +- **Oled kogunud `N` punkti**: Teine levinud lõpptingimus on punktide kogumine. Punkte saad olenevalt tegevusest, näiteks vaenlase laeva hävitamisest või esemete kogumisest, mis langevad hävitamisel. +- **Taseme lõpetamine**: See võib hõlmata mitut tingimust, nagu `X` vaenlase laeva hävitamine, `Y` punktide kogumine või teatud eseme korjamine. -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/39) +## Mängu taaskäivitamise funktsionaalsuse rakendamine -Mängus on erinevaid viise, kuidas väljendada *lõpu tingimust*. Mängu loojana on sinu otsustada, miks mäng lõpeb. Siin on mõned põhjused, kui eeldame, et räägime kosmoseteemalisest mängust, mida oled seni ehitanud: +Head mängud soodustavad korduvmängimist sujuvate taaskäivitamismehhanismidega. Kui mängijad mängu lõpetavad (või kaotavad), tahavad nad sageli kohe uuesti proovida – kas siis punkte ületada või sooritust parandada. -- **`N` vaenlase laeva on hävitatud**: On üsna tavaline, et mäng jagatakse erinevateks tasemeteks, kus pead hävitama `N` vaenlase laeva, et tase läbida. -- **Sinu laev on hävitatud**: On mänge, kus kaotad, kui sinu laev hävitatakse. Teine levinud lähenemine on elude kontseptsioon. Iga kord, kui sinu laev hävitatakse, kaotad ühe elu. Kui kõik elud on otsas, kaotad mängu. -- **Oled kogunud `N` punkti**: Teine levinud lõpu tingimus on punktide kogumine. Kuidas punkte koguda, on sinu otsustada, kuid sageli antakse punkte erinevate tegevuste eest, näiteks vaenlase laeva hävitamise või esemete kogumise eest, mida hävitatud objektid maha jätavad. -- **Tase on läbitud**: See võib hõlmata mitmeid tingimusi, näiteks `X` vaenlase laeva hävitamine, `Y` punkti kogumine või võib-olla konkreetse eseme kogumine. +```mermaid +stateDiagram-v2 + [*] --> Playing: Mäng algab + Playing --> Victory: Kõik vaenlased hävitatud + Playing --> Defeat: Elud = 0 + + Victory --> MessageDisplay: Võiduteade kuvatakse + Defeat --> MessageDisplay: Kaotusteade kuvatakse + + MessageDisplay --> WaitingRestart: Vajuta Enteri vihje + WaitingRestart --> Resetting: Enteri klahv vajutatud + + Resetting --> CleanupMemory: Ajastite tühjendamine + CleanupMemory --> ClearEvents: Kuulajate eemaldamine + ClearEvents --> InitializeGame: Värske algus + InitializeGame --> Playing: Uus mäng algab + + note right of MessageDisplay + Värvikoodiga tagasiside: + Roheline = Võit + Punane = Kaotus + end note + + note right of Resetting + Oleku täielik lähtestamine + takistab mäluleket + end note +``` +Tetris on selle suurepäraseks näiteks: kui plokid jõuavad tippu, saad kohe uue mängu alustada ilma keerulistest menüüdest läbi minemata. Me ehitame sarnase taaskäivitussüsteemi, mis puhastab mängu oleku ja võimaldab mängijatel kiiresti tegevusse sukelduda. -## Taaskäivitamine +✅ **Mõtisklus**: Mõtle mängudele, mida oled mänginud. Millal need lõppevad ja kuidas sind taaskäivitamisele kutsutakse? Mis teeb taaskäivitamise kogemuse sujuvaks või frustreerivaks? -Kui inimestele meeldib sinu mäng, tahavad nad seda tõenäoliselt uuesti mängida. Kui mäng mingil põhjusel lõpeb, peaksid pakkuma võimalust see uuesti käivitada. +## Mida sa ehitad -✅ Mõtle veidi, millistel tingimustel mäng sinu arvates lõpeb ja kuidas sind taaskäivitamisele suunatakse. +Sa rakendad viimased funktsioonid, mis muudavad sinu projekti täielikuks mängukogemuseks. Need elemendid eristavad lihvitud mänge lihtsatest prototüüpidest. -## Mida ehitada +**Täna lisame:** -Sa lisad oma mängule järgmised reeglid: +1. **Võidutingimus**: Hävita kõik vaenlased ja saa vääriline tähistamine (sa oled selle ära teeninud!) +2. **Kaotustingimus**: Kui elud on otsas, näita kaotuse ekraani +3. **Taaskäivitamise mehhanism**: Vajuta Enter ja alusta uuesti – sest üks mäng ei ole kunagi piisav +4. **Olekute haldus**: Iga kord puhas leht – ei vaenlasi ega kummalisi vigu eelmise mängu järgi -1. **Mängu võitmine**. Kui kõik vaenlase laevad on hävitatud, võidad mängu. Lisaks kuvatakse mingi võiduteade. -1. **Taaskäivitamine**. Kui kõik sinu elud on otsas või mäng on võidetud, peaks olema võimalus mäng uuesti käivitada. Pea meeles! Pead mängu uuesti initsialiseerima ja eelmise mängu oleku tühjendama. +## Alustame -## Soovitatavad sammud +Valmistame su arenduskeskkonna ette. Sul peaksid olema olemas kõik kosmosemängu failid eelmistest tundidest. -Leia failid, mis on sinu jaoks loodud kaustas `your-work`. See peaks sisaldama järgmist: +**Sinu projekt võiks välja näha umbes nii:** ```bash -| assets @@ -47,190 +169,516 @@ Leia failid, mis on sinu jaoks loodud kaustas `your-work`. See peaks sisaldama j -| app.js -| package.json ``` - -Alusta oma projekti kaustas `your_work`, tippides: + +**Alusta oma arendusserverit:** ```bash cd your-work npm start ``` - -Ülaltoodu käivitab HTTP serveri aadressil `http://localhost:5000`. Ava brauser ja sisesta see aadress. Sinu mäng peaks olema mängitavas seisundis. -> vihje: et vältida hoiatusteateid Visual Studio Code'is, muuda `window.onload` funktsiooni nii, et see kutsuks `gameLoopId` ilma `let`-ita, ja deklareeri gameLoopId faili alguses eraldi: `let gameLoopId;` +**See käsk:** +- Käivitab lokaalse serveri aadressil `http://localhost:5000` +- Teenindab faile korralikult +- Värskendab automaatselt, kui muudatusi teed -### Lisa kood +Ava oma brauseris aadress `http://localhost:5000` ja veendu, et mäng jookseb. Sa peaksid saama liikuda, tulistada ja vaenlastega suhelda. Kui see on toimimas, võime minna implimentatsiooni juurde. -1. **Lõpu tingimuse jälgimine**. Lisa kood, mis jälgib vaenlaste arvu või seda, kas kangelase laev on hävitatud, lisades need kaks funktsiooni: +> 💡 **Pro näpunäide**: Vältimaks hoiatuste ilmumist Visual Studio Code'is, deklareeri `gameLoopId` faili alguses `let gameLoopId;` asemel, et seda teha `window.onload` funktsiooni sees. See järgib kaasaegseid JavaScripti muutujate deklareerimise parimaid tavasid. - ```javascript - function isHeroDead() { - return hero.life <= 0; - } +```mermaid +flowchart TD + A["1. Tingimuste Jälgimine"] --> B["2. Sündmuste Käsitlejad"] + B --> C["3. Sõnumi Konstandid"] + C --> D["4. Taaskäivituse Kontrollid"] + D --> E["5. Sõnumi Kuvamine"] + E --> F["6. Süsteemi Lähtestamine"] + + G["isHeroDead()\nisEnemiesDead()"] --> A + H["Kokkupõrke Sündmused\nMängu Lõpu Sündmused"] --> B + I["GAME_END_WIN\nGAME_END_LOSS"] --> C + J["Enter Klahv\nTaaskäivituse Käivitaja"] --> D + K["Võit/Kaotus\nVärvikodeeritud Tekst"] --> E + L["Oleku Puhastus\nVärske Initsialiseerimine"] --> F + + F --> M["🎮 Mõttetäielik Mäng"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec + style M fill:#e1f5fe +``` +## Rakendamise sammud + +### Samm 1: Loo lõpptingimuste jälgimise funktsioonid - function isEnemiesDead() { - const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead); - return enemies.length === 0; +Me vajame funktsioone, mis jälgivad, millal mäng peaks lõppema. Nagu rahvusvahelise kosmosejaama sensorid, mis pidevalt olulisi süsteeme kontrollivad, hoiavad need funktsioonid mängu olekut silma peal. + +```javascript +function isHeroDead() { + return hero.life <= 0; +} + +function isEnemiesDead() { + const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead); + return enemies.length === 0; +} +``` + +**Ikka põhjalikult selgitatuna:** +- **Kontrollib**, kas meie kangelane on elud otsas (ai!) +- **Lugedes**, mitu vaenlast veel elus on +- **Tagastab** `true`, kui lahinguväli on vaenlastest tühi +- **Kasutab** lihtsat tõene/vale loogikat, et hoida asjad mõistlikud +- **Filtreerib** läbi kõik mängu objektid, et leida ellujääjad + +### Samm 2: Uuenda sündmuste töötlejaid lõpptingimuste jaoks + +Nüüd ühendame need tingimuste kontrollid mängu sündmuste süsteemiga. Iga kokkupõrke korral hindab mäng, kas see käivitab lõpptingimuse. See loob kohese tagasiside olulistele mängusündmustele. + +```mermaid +sequenceDiagram + participant Collision + participant GameLogic + participant Conditions + participant EventSystem + participant Display + + Collision->>GameLogic: Laseri tabamus vaenlasele + GameLogic->>GameLogic: Objektide hävitamine + GameLogic->>Conditions: Kontrolli isEnemiesDead() + + alt Kõik vaenlased alistatud + Conditions->>EventSystem: Saada GAME_END_WIN + EventSystem->>Display: Näita võidu teadet + else Vaenlased alles + Conditions->>GameLogic: Jätka mängu + end + + Collision->>GameLogic: Vaenlane tabab kangelast + GameLogic->>GameLogic: Elude vähendamine + GameLogic->>Conditions: Kontrolli isHeroDead() + + alt Elud = 0 + Conditions->>EventSystem: Saada GAME_END_LOSS + EventSystem->>Display: Näita kaotuse teadet + else Elud alles + GameLogic->>Conditions: Kontrolli isEnemiesDead() + alt Kõik vaenlased alistatud + Conditions->>EventSystem: Saada GAME_END_WIN + end + end +``` +```javascript +eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { + first.dead = true; + second.dead = true; + hero.incrementPoints(); + + if (isEnemiesDead()) { + eventEmitter.emit(Messages.GAME_END_WIN); } - ``` - -1. **Lisa loogika sõnumite töötlejatele**. Muuda `eventEmitter`-it, et see töötleks neid tingimusi: - - ```javascript - eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { - first.dead = true; - second.dead = true; - hero.incrementPoints(); - - if (isEnemiesDead()) { - eventEmitter.emit(Messages.GAME_END_WIN); - } - }); - - eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => { - enemy.dead = true; - hero.decrementLife(); - if (isHeroDead()) { - eventEmitter.emit(Messages.GAME_END_LOSS); - return; // loss before victory - } - if (isEnemiesDead()) { - eventEmitter.emit(Messages.GAME_END_WIN); - } - }); - - eventEmitter.on(Messages.GAME_END_WIN, () => { - endGame(true); - }); - - eventEmitter.on(Messages.GAME_END_LOSS, () => { - endGame(false); - }); - ``` - -1. **Lisa uued sõnumitüübid**. Lisa need sõnumid constants objekti: +}); + +eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => { + enemy.dead = true; + hero.decrementLife(); + if (isHeroDead()) { + eventEmitter.emit(Messages.GAME_END_LOSS); + return; // kaotus enne võitu + } + if (isEnemiesDead()) { + eventEmitter.emit(Messages.GAME_END_WIN); + } +}); - ```javascript - GAME_END_LOSS: "GAME_END_LOSS", - GAME_END_WIN: "GAME_END_WIN", - ``` +eventEmitter.on(Messages.GAME_END_WIN, () => { + endGame(true); +}); -2. **Lisa taaskäivitamise kood**, mis käivitab mängu uuesti valitud nupu vajutamisel. +eventEmitter.on(Messages.GAME_END_LOSS, () => { + endGame(false); +}); +``` - 1. **Kuula klahvivajutust `Enter`**. Muuda oma akna eventListener-it, et see kuulaks seda klahvivajutust: +**Mida siin tehakse:** +- **Laseri tabamus vaenlasele**: Mõlemad kaovad, saad punkte ja kontrollime, kas oled võitnud +- **Vaenlane tabab sind**: Kaotad elu ja kontrollime, kas oled veel elus +- **Nutikas järjekord**: Kontrollime esmalt kaotust (keegi ei taha korraga võita ja kaotada!) +- **Kohesed reaktsioonid**: Niipea kui tähtis asi juhtub, saab mäng sellest teada - ```javascript - else if(evt.key === "Enter") { - eventEmitter.emit(Messages.KEY_EVENT_ENTER); - } - ``` - - 1. **Lisa taaskäivitamise sõnum**. Lisa see sõnum oma Messages konstandile: +### Samm 3: Lisa uued sõnumikonstandid - ```javascript - KEY_EVENT_ENTER: "KEY_EVENT_ENTER", - ``` - -1. **Rakenda mängureeglid**. Rakenda järgmised mängureeglid: +Sul tuleb lisada uued sõnumitüübid `Messages` konstandi objekti. Need konstandid aitavad säilitada järjepidevust ja vältida kirjavigu sündmuste süsteemis. - 1. **Mängija võidutingimus**. Kui kõik vaenlase laevad on hävitatud, kuva võiduteade. +```javascript +GAME_END_LOSS: "GAME_END_LOSS", +GAME_END_WIN: "GAME_END_WIN", +``` - 1. Kõigepealt loo funktsioon `displayMessage()`: +**Ülalolevas oleme:** +- **Lisanud** mängu lõpu sündmuste konstante järjepidevuse tagamiseks +- **Kasutanud** kirjeldavaid nimesid, mis selgelt näitavad sündmuse eesmärki +- **Järgnenud** olemasolevat sõnumitüüpide nimetamisstiili - ```javascript - function displayMessage(message, color = "red") { - ctx.font = "30px Arial"; - ctx.fillStyle = color; - ctx.textAlign = "center"; - ctx.fillText(message, canvas.width / 2, canvas.height / 2); - } - ``` - - 1. Loo funktsioon `endGame()`: +### Samm 4: Rakenda taaskäivitamise juhtimine + +Nüüd lisad klaviatuuri juhtnupud, mis lubavad mängijatel mängu uuesti alustada. Enter-klahv on loomulik valik, kuna seda seostatakse tavaliselt toimingu kinnitamise ja uue mängu alustamisega. + +**Lisa Enter-klahvi avastamine olemasolevale keydown sündmuse kuulajale:** + +```javascript +else if(evt.key === "Enter") { + eventEmitter.emit(Messages.KEY_EVENT_ENTER); +} +``` + +**Lisa uus sõnumikonstant:** + +```javascript +KEY_EVENT_ENTER: "KEY_EVENT_ENTER", +``` + +**Mida peaksid teadma:** +- **Laiendab** olemasolevat klaviatuurisündmuste haldussüsteemi +- **Kasutab** Enter-klahvi taaskäivituse käivitamiseks intuitiivse kasutajakogemuse jaoks +- **Saadab** kohandatud sündmuse, mida mängu teised osad kuulata saavad +- **Järgib** sama mustrit nagu teised klaviatuurikontrollid + +### Samm 5: Loo sõnumi kuvamise süsteem + +Sinu mäng peab selgelt mängijatele tulemusi edastama. Loome sõnumisüsteemi, mis kuvab võidu ja kaotuse olekuid värvikooditud tekstina, sarnaselt varaste arvutisüsteemide terminalidele, kus roheline tähendas edukust ja punane vigu. + +**Loo funktsioon `displayMessage()`:** + +```javascript +function displayMessage(message, color = "red") { + ctx.font = "30px Arial"; + ctx.fillStyle = color; + ctx.textAlign = "center"; + ctx.fillText(message, canvas.width / 2, canvas.height / 2); +} +``` + +**Samm-sammult toimub siin:** +- **Seab** fonte suuruse ja perekonna selge ja loetava teksti jaoks +- **Kasutab** värviparameetrit, milleks vaikimisi on punane hoiatussõnumeid jaoks +- **Joondab** teksti vastavalt vertikaalselt ja horisontaalselt lõuendil +- **Kasutab** kaasaegseid JavaScripti vaikimisi parameetreid paindliku värvivaliku jaoks +- **Rakendab** lõuendi 2D konteksti otseseks teksti joonistamiseks + +**Loo funktsioon `endGame()`:** + +```javascript +function endGame(win) { + clearInterval(gameLoopId); + + // Määra viivitus, et tagada kõik ootel renderdused lõpetatuks + setTimeout(() => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + if (win) { + displayMessage( + "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew", + "green" + ); + } else { + displayMessage( + "You died !!! Press [Enter] to start a new game Captain Pew Pew" + ); + } + }, 200) +} +``` + +**Mis see funktsioon teeb:** +- **Jäädvustab** kõik paigale – laevad ja laserid enam ei liigu +- **Võtab** väikese pausi (200ms), et viimane kaader jõuaks joonistada +- **Puhastab** ekraani ja maalib selle dramaatilise efektina mustaks +- **Näitab** erinevaid sõnumeid võitjatele ja kaotajatele +- **Värvikoodib** teavitused – roheline hea jaoks, punane mitte nii hea jaoks +- **Räägib** mängijatele täpselt, kuidas uuesti mängu minna + +### 🔄 **Pedagoogiline kontroll** +**Mängu oleku haldus**: Enne lähtestamise funktsionaalsuse rakendamist veendu, et mõistad: +- ✅ Kuidas lõpptingimused loovad selged mängueesmärgid +- ✅ Miks visuaalne tagasiside on mängija mõistmise jaoks oluline +- ✅ Korraliku koristamise tähtsust mälu lekkete vältimiseks +- ✅ Kuidas sündmustest juhitav arhitektuur võimaldab puhtaid olekuelemendi üleminekuid + +**Kiire enesehindamine**: Mis juhtub, kui sa ei puhasta sündmuse kuulajaid lähtestamise ajal? +*Vastus: Mälu lekked ja topelt sündmuse töötlejad põhjustavad ettearvamatut käitumist* + +**Mängudisaini põhimõtted**: Sa rakendad nüüd: +- **Selged eesmärgid**: Mängijad teavad täpselt, mis on edu ja ebaedu +- **Kohene tagasiside**: Mängu oleku muutused edastatakse viivitamatult +- **Kasutajajuhtimine**: Mängijad saavad uuesti alustada, kui ise valmis on +- **Süsteemi usaldusväärsus**: Korralik koristamine hoiab ära vigade ja jõudlusprobleemide tekkimise + +### Samm 6: Rakenda mängu lähtestamise funktsionaalsus + +Lähtestamissüsteem peab täielikult puhastama praeguse mängu oleku ja alustama uut mängu sessiooni. See tagab, et mängijad saavad puhast algust ilma eelmise mängu andmeteta. + +**Loo funktsioon `resetGame()`:** + +```javascript +function resetGame() { + if (gameLoopId) { + clearInterval(gameLoopId); + eventEmitter.clear(); + initGame(); + gameLoopId = setInterval(() => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + drawPoints(); + drawLife(); + updateGameObjects(); + drawGameObjects(ctx); + }, 100); + } +} +``` + +**Mõistame iga osa:** +- **Kontrollib**, kas mängu silmus on juba käimas enne lähtestamist +- **Tühjendab** olemasoleva mängusilmuse, peatades kõik aktiivsed tegevused +- **Eemaldab** kõik sündmuste kuulajad, et vältida mälu lekkimist +- **Algatab** mängu oleku uuesti koos uute objektide ja muutujatega +- **Käivitab** uue mängusilmuse kõigi vajalike mängufunktsioonidega +- **Hoidub** samal 100ms intervallil järjepideva jõudluse saavutamiseks + +**Lisa Enter-klahvi sündmuse töötleja oma `initGame()` funktsiooni:** + +```javascript +eventEmitter.on(Messages.KEY_EVENT_ENTER, () => { + resetGame(); +}); +``` + +**Lisa `clear()` meetod EventEmitter klassi:** - ```javascript - function endGame(win) { - clearInterval(gameLoopId); +```javascript +clear() { + this.listeners = {}; +} +``` + +**Peamised punktid:** +- **Seob** Enter-klahvi vajutuse mängu taaskäivitamise funktsiooniga +- **Registreerib** selle sündmuse kuulaja mängu algatamise ajal +- **Pakub** puhtat viisi kõigi sündmuste kuulajate eemaldamiseks lähtestamisel +- **Vältib** mälu lekkimist, puhastades sündmuste töötlejad mängude vahel +- **Lähtestab** kuulajate objekti tühjaks, et alustada uuesti + +## Palju õnne! 🎉 + +👽 💥 🚀 Sa oled edukalt ehitanud täiesti funktsionaalse mängu algusest lõpuni. Nagu programmiarendajad 1970. aastate esimestes videomängudes, oled sa muutnud koodijupid interaktiivseks kogemuseks, millel on korralikud mängumehhanismid ja kasutajate tagasiside. 🚀 💥 👽 + +**Sa saavutasid:** +- **Rakendasid** täielikud võidu- ja kaotustingimused koos kasutajate tagasisidega +- **Lõid** sujuva taaskäivitussüsteemi pidevaks mänguks +- **Disainisid** selge visuaalse kommunikatsiooni mängu olekute jaoks +- **Haldasid** keerukaid mängu oleku üleminekuid ja koristamist +- **Koondasid** kõik komponendid ühtseks mänguks + +### 🔄 **Pedagoogiline kontroll** +**Täielik mänguarendussüsteem**: Tähista oma oskust täisdana mänguarenduse tsükli osas: +- ✅ Kuidas lõpptingimused loovad mängijale rahuldustpakkuva kogemuse? +- ✅ Miks on õige oleku haldus mängu stabiilsuse jaoks kriitiline? +- ✅ Kuidas visuaalne tagasiside tugevdab mängija arusaamist? +- ✅ Mis rolli mängib taaskäivitussüsteem mängija hoidmisel? + +**Süsteemi meistriklass**: Sinu täielik mäng demonstreerib: +- **Täielikku mänguarendust**: Graafika, sisendi ja oleku haldust +- **Professionaalset arhitektuuri**: Sündmustest juhitavad süsteemid koos korraliku koristamisega +- **Kasutajakogemuse disaini**: Selge tagasiside ja intuitiivsed juhid +- **Jõudluse optimeerimist**: Tõhus renderdamine ja mälu haldus +- **Lihvi ja täielikkust**: Kõik detailid, mis muudavad mängu lõpetatuks + +**Tööstusvalmis oskused**: Sa oled rakendanud: +- **Mängu silmuse arhitektuuri**: Reaalaegsed süsteemid järjepideva jõudlusega +- **Sündmustest juhitud programmeerimise**: Lahtised süsteemid, mis skaleeruvad hästi +- **Olekute haldust**: Keerulised andmete käsitlemine ja elutsükli juhtimine +- **Kasutajaliidese disaini**: Selge kommunikatsioon ja reageerivad juhid +- **Testimist ja silumist**: Iteratiivne arendus ja probleemide lahendamine + +### ⚡ **Mida saad teha järgmise 5 minutiga** +- [ ] Mängida oma täielikku mängu ja testida kõiki võidu- ja kaotustingimusi +- [ ] Katsetada erinevaid lõpptingimuste parameetreid +- [ ] Proovida lisada console.log avaldusi mängu oleku muutuste jälgimiseks +- [ ] Jagada oma mängu sõpradega ja koguda tagasisidet + +### 🎯 **Mida saad selle tunni jooksul saavutada** +- [ ] Täita postloengu viktoriin ja mõtiskleda oma mänguarenduse teekonnal +- [ ] Lisada heliefekte võidu ja kaotuse olekutele +- [ ] Mahutada täiendavad lõpptingimused nagu aega piirangud või boonuseesmärgid +- [ ] Luua erinevad raskusastmed, kus vaenlaste arv varieerub +- [ ] Lihvida visuaalset esitust paremate fontide ja värvidega + +### 📅 **Sinu nädala pikkune mänguarenduse meisterlikkus** +- [ ] Lõpetada täiustatud kosmosemäng mitme taseme ja edasijõudmistega +- [ ] Lisada arenenud omadusi nagu võimsus-upid, erinevat tüüpi vaenlased ja erirelvad +- [ ] Luua kõrge skoori süsteem püsiva andmesalvestusega +- [ ] Disainida kasutajaliidesed menüüde, seadete ja mängu valikute jaoks +- [ ] Optimeerida jõudlust erinevate seadmete ja brauserite jaoks +- [ ] Avaldada oma mäng veebis ja jagada seda kogukonnaga +### 🌟 **Teie kuuajaline mänguarenduse karjäär** +- [ ] Looge mitu täielikku mängu, uurides erinevaid žanre ja mehaanikaid +- [ ] Õppige arenenud mänguarendusraamistikke nagu Phaser või Three.js +- [ ] Panustage avatud lähtekoodiga mänguarendusprojektidesse +- [ ] Uurige mängudisaini põhimõtteid ja mängijapsühholoogiat +- [ ] Looge portfoolio, mis tutvustab teie mänguarenduse oskusi +- [ ] Looge ühendus mänguarenduse kogukonnaga ja jätkake õppimist + +## 🎯 Teie täielik mänguarenduse meistriklassi ajagraafik + +```mermaid +timeline + title Täielik mänguarenduse õppimise edenemine + + section Alus (Tunnid 1-2) + Mängu arhitektuur: Projekti struktuur + : Varade haldamine + : Lõuendi põhitõed + : Sündmuste süsteemid - // set a delay so we are sure any paints have finished - setTimeout(() => { - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = "black"; - ctx.fillRect(0, 0, canvas.width, canvas.height); - if (win) { - displayMessage( - "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew", - "green" - ); - } else { - displayMessage( - "You died !!! Press [Enter] to start a new game Captain Pew Pew" - ); - } - }, 200) - } - ``` - - 1. **Taaskäivitamise loogika**. Kui kõik elud on otsas või mängija on mängu võitnud, kuva teade, et mängu saab taaskäivitada. Lisaks käivita mäng uuesti, kui vajutatakse *taaskäivitamise* klahvi (saad ise otsustada, milline klahv taaskäivitamisele vastab). - - 1. Loo funktsioon `resetGame()`: - - ```javascript - function resetGame() { - if (gameLoopId) { - clearInterval(gameLoopId); - eventEmitter.clear(); - initGame(); - gameLoopId = setInterval(() => { - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = "black"; - ctx.fillRect(0, 0, canvas.width, canvas.height); - drawPoints(); - drawLife(); - updateGameObjects(); - drawGameObjects(ctx); - }, 100); - } - } - ``` - - 1. Lisa `eventEmitter`-i kõne mängu taaskäivitamiseks funktsiooni `initGame()`: + section Interaktsiooni süsteemid (Tunnid 3-4) + Mängija juhtimine: Sisendi haldamine + : Liikumismehhanismid + : Kokkupõrke tuvastamine + : Füüsikase simulatsioon + + section Mängumehhanismid (Tund 5) + Tagasisidesüsteemid: Skoorimismehhanismid + : Elude haldamine + : Visuaalne suhtlemine + : Mängija motivatsioon + + section Mängu lõpetamine (Tund 6) + Viimistlus & voolavus: Lõputingimused + : Oleku haldamine + : Taaskäivitussüsteemid + : Kasutajakogemus + + section Täiustatud funktsioonid (1 nädal) + Täiendamisoskused: Helintegreerimine + : Visuaalsed efektid + : Taseme edenemine + : Jõudluse optimeerimine + + section Professionaalne areng (1 kuu) + Tööstuse valmidus: Raamistiku valdamine + : Meeskonnatöö + : Portfoolio arendamine + : Kogukonna kaasamine + + section Karjääriedendus (3 kuud) + Spetsialiseerumine: Täiustatud mängumootorid + : Platvormi juurutamine + : Monetiseerimisstrateegiad + : Tööstuse võrgustike loomine +``` +### 🛠️ Teie täieliku mänguarenduse tööriistakasti kokkuvõte - ```javascript - eventEmitter.on(Messages.KEY_EVENT_ENTER, () => { - resetGame(); - }); - ``` - - 1. Lisa EventEmitter-ile funktsioon `clear()`: +Pärast kogu seda kosmose mänguseeriat olete nüüd valdanud: +- **Mängu arhitektuuri**: sündmustepõhised süsteemid, mängutsüklid ja olekute haldus +- **Graafika programmeerimist**: Canvas API, sprite'i kuvamine ja visuaalsed efektid +- **Sisendsüsteeme**: klaviatuuri töötlus, kokkupõrke tuvastus ja reageerivad juhtimised +- **Mängudisaini**: mängija tagasiside, edenemissüsteemid ja kaasahaaravad mehaanika +- **Tulemuse optimeerimist**: tõhus joonistamine, mälu haldus ja kaadritempo juhtimine +- **Kasutajakogemust**: selge suhtlus, intuitiivsed juhtimised ja viimased detailid +- **Professionaalseid mustreid**: puhas kood, silumisvõtted ja projektikorraldus - ```javascript - clear() { - this.listeners = {}; - } - ``` - -👽 💥 🚀 Palju õnne, kapten! Sinu mäng on valmis! Tubli töö! 🚀 💥 👽 +**Tegelikud rakendused**: Teie mänguarenduse oskused kehtivad otseselt: +- **Interaktiivsetele veebirakendustele**: dünaamilised liidesed ja reaalajas süsteemid +- **Andmete visualiseerimisele**: animeeritud graafikud ja interaktiivsed kujutised +- **Haridustehnoloogiale**: mängustamine ja kaasahaaravad õppimiskogemused +- **Mobiiliarendusele**: puudutusele reageerivad interaktsioonid ja jõudluse optimeerimine +- **Simulatsioonitarkvarale**: füüsikamootorid ja reaalajas modelleerimine +- **Loovatele tööstusharudele**: interaktiivne kunst, meelelahutus ja digikogemused ---- +**Omandatud professionaalsed oskused**: Nüüd saate: +- **Kujundada** keerukaid interaktiivseid süsteeme nullist +- **Siluda** reaalajas rakendusi süsteemsete meetoditega +- **Optimeerida** jõudlust sujuvaks kasutajakogemuseks +- **Disainida** kaasahaaravaid kasutajaliideseid ja interaktsioonimustreid +- **Töötada koostöös** tehnilistes projektides korraliku koodi organiseerimisega + +**Valdamisjärgus mänguarenduse kontseptsioonid**: +- **Reaalaja süsteemid**: mängutsüklid, kaadritihedus ja jõudlus +- **Sündmustepõhine arhitektuur**: lahusolevad süsteemid ja sõnumivahetus +- **Olekute haldus**: keerukas andmete käitlemine ja elutsükli juhtimine +- **Kasutajaliidese programmeerimine**: Canvas graafika ja reageeriv disain +- **Mängudisaini teooria**: mängijapsühholoogia ja kaasahaaravad mehaanika + +**Järgmine tase**: olete valmis uurima arenenud mänguraamistikke, 3D graafikat, mitmikmängusüsteeme või siirduma professionaalseks mänguarendajaks! + +🌟 **Saavutus lukustatud lahti**: olete lõpetanud kogu mänguarendusreisi ja loonud nullist professionaalse kvaliteediga interaktiivse kogemuse! + +**Tere tulemast mänguarenduse kogukonda!** 🎮✨ + +## GitHub Copilot Agendi väljakutse 🚀 + +Kasutage agendi režiimi järgmise väljakutse lõpetamiseks: + +**Kirjeldus:** täiustage kosmosemängu, rakendades taseme edenemissüsteemi, kus raskusaste kasvab ja on boonuselemendid. + +**Üleskutse:** Looge mitmetasemeline kosmosemängu süsteem, kus igal tasemel on rohkem vaenlasi, kellel on kõrgem kiirus ja eluvara. Lisage punktide kordaja, mis suureneb iga tasemega, ning rakendage täiustusi (nt kiire tulistamine või kilp), mis ilmuvad juhuslikult, kui vaenlased hävitatakse. Lisage taseme lõpetamise boonus ja kuvage praegune tase ekraanil koos olemasoleva punktide ja elude näiduga. + +Lisateavet leiate siit [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode). + +## 🚀 Vabatahtlik täiustamise väljakutse + +**Lisage oma mängule heli**: täiustage mängukogemust, rakendades heliefekte! Mõelge lisada heli: + +- **Laseripursked** mängija tulistamisel +- **Vaenlaste hävitamine**, kui laevad saavad tabamuse +- **Kangelase kahjustused**, kui mängija saab tabamuse +- **Võidumuusika**, kui mäng võidetakse +- **Kaotuse heli**, kui mäng kaotatakse + +**Heli rakendamise näide:** + +```javascript +// Loo heliobjekte +const laserSound = new Audio('assets/laser.wav'); +const explosionSound = new Audio('assets/explosion.wav'); + +// Mängusündmuste ajal helide esitamine +function playLaserSound() { + laserSound.currentTime = 0; // Lähtesta algusesse + laserSound.play(); +} +``` -## 🚀 Väljakutse +**Mida vaja teada:** +- **Luuakse** Audio objektid erinevate heliefektide jaoks +- **Taastatakse** `currentTime`, et võimaldada kiiret tulistamisheli +- **Käsitletakse** brauseri automaatse taasesituse poliitikaid, käivitades helid kasutaja interaktsioonidest +- **Juhtimist** heli helitugevuse ja ajastuse üle parema mängukogemuse jaoks -Lisa heli! Kas suudad lisada heli, et mängukogemust täiustada, näiteks kui laser tabab, kangelane sureb või võidab? Vaata seda [liivakasti](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), et õppida, kuidas JavaScripti abil heli esitada. +> 💡 **Õppematerjal**: Uurige seda [heli proovituba](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play), et õppida heli rakendamist JavaScripti mängudes. -## Loengu-järgne viktoriin +## Lõpu loengu viktoriin -[Loengu-järgne viktoriin](https://ff-quizzes.netlify.app/web/quiz/40) +[Lõpu loengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/40) -## Ülevaade ja iseseisev õppimine +## Ülevaade & Iseseisev õpe -Sinu ülesanne on luua uus näidismäng, seega uuri mõningaid huvitavaid mänge, et näha, millist tüüpi mängu võiksid ehitada. +Teie ülesanne on luua uus proovimäng, seega uurige mõningaid huvitavaid mänge, et näha, millist tüüpi mängu võiksite luua. ## Ülesanne -[Loo näidismäng](assignment.md) +[Ehita proovimäng](assignment.md) --- -**Lahtiütlus**: -See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest. \ No newline at end of file + +**Vastutusest loobumine**: +See dokument on tõlgitud AI-tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Originaaldokument selle emakeeles tuleb pidada autoriteetseks allikaks. Olulise info puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/6-space-game/6-end-condition/assignment.md b/translations/et/6-space-game/6-end-condition/assignment.md index 3f014dd81..7bb1f8b90 100644 --- a/translations/et/6-space-game/6-end-condition/assignment.md +++ b/translations/et/6-space-game/6-end-condition/assignment.md @@ -1,33 +1,173 @@ -# Ehita näidis mäng +# Ehita Näidismäng -## Juhised +## Ülesande Ülevaade -Proovi luua väike mäng, kus harjutad erinevaid lõppetingimusi. Muuda tingimusi, näiteks punktide kogumine, kangelase elude kaotus või kõigi koletiste alistamine. Ehita midagi lihtsat, näiteks konsoolipõhine seiklusmäng. Kasuta allolevat mängu voogu inspiratsiooniks: +Nüüd, kui oled oma kosmosemängus valdanud mängu lõpptingimused ja taaskäivitamise funktsionaalsuse, on aeg rakendada neid kontseptsioone täiesti uues mängukogemuses. Sa kavandad ja ehitad oma mängu, mis demonstreerib erinevaid lõpptingimuste mudeleid ja taaskäivitamise mehhanisme. + +See ülesanne paneb sind loovalt mõtlema mängudisaini üle, samas harjutades õpitud tehnilisi oskusi. Sa uurid erinevaid võidu ja kaotuse stsenaariume, rakendad mängija edenemist ja lood kaasahaaravaid taaskäivitamise kogemusi. + +## Projekti Nõuded + +### Põhimängu Omadused + +Sinu mäng peab sisaldama järgmisi olulisi elemente: + +**Lõpptingimuste Mitmekesisus**: Rakenda vähemalt kahte erinevat mängu lõppemist viisi: +- **Punktipõhine võit**: Mängija saavutab sihtpunktisumma või kogub kindlaid esemeid +- **Eludepõhine kaotus**: Mängija kaotab kõik saadaolevad elud või elupunktid +- **Eesmärgi täitmine**: Kõik vaenlased alistatud, kindlad esemed kogutud või eesmärgid saavutatud +- **Ajapõhine**: Mäng lõpeb pärast määratud kestust või taimer jõuab nulli + +**Taaskäivitamise Funktsionaalsus**: +- **Mänguoleku puhastamine**: Eemalda kõik varasemad mänguobjektid ja lähtesta muutujad +- **Süsteemide uuesti initsialiseerimine**: Alusta uuesti uute mängija näitajate, vaenlaste ja eesmärkidega +- **Kasutajasõbralikud juhised**: Paku selged juhised mängu taaskäivitamiseks + +**Mängija Tagasiside**: +- **Võiduteated**: Tähista mängija saavutusi positiivse tagasisidega +- **Kaotusteated**: Paku julgustavaid sõnumeid, mis motiveerivad uuesti mängima +- **Edenemise näitajad**: Näita jooksvaid skoori, elusid või eesmärgi olekut + +### Mänguideed ja Inspiratsioon + +Vali üks järgmistest mängukontseptidest või loo oma: + +#### 1. Konsooli seiklusmäng +Loo tekstipõhine seiklus koos võitlusmehhaanikaga: ``` Hero> Strikes with broadsword - orc takes 3p damage -Orc> Hits with club - hero takes 2p damage +Orc> Hits with club - hero takes 2p damage Hero> Kicks - orc takes 1p damage Game> Orc is defeated - Hero collects 2 coins Game> ****No more monsters, you have conquered the evil fortress**** ``` -## Hindamiskriteeriumid +**Olulised funktsioonid rakendamiseks:** +- **Pöördepõhine võitlus** erinevate ründevõimalustega +- **Elupunktid** nii mängijale kui vaenlastele +- **Varustussüsteem** müntide või esemete kogumiseks +- **Mitmed vaenlase tüübid** erineva raskusastmega +- **Võidu tingimus** kui kõik vaenlased on alistatud + +#### 2. Kogumismäng +- **Eesmärk**: Kogu kindlaid esemeid, vältides takistusi +- **Lõpptingimused**: Saavuta sihtkogus või kaota kõik elud +- **Edenemine**: Esmed muutuvad raskemini kättesaadavaks mängu edenedes + +#### 3. Puslemäng +- **Eesmärk**: Lahenda järjest keerukamaid mõistatusi +- **Lõpptingimused**: Lõpeta kõik tasemed või kasuta ära kõik käigud/taimer +- **Taaskäivitamine**: Lähtesta edusammud ja alusta esimesest tasemest uuesti + +#### 4. Kaitsemäng +- **Eesmärk**: Kaitse oma baasi vaenlaste lainete eest +- **Lõpptingimused**: Elu kõik lained üle (võit) või baas hävib (kaotus) +- **Edenemine**: Vaenlaste lained muutuvad raskemaks ja arvukamaks + +## Rakendamisjuhised + +### Algus + +1. **Plaani oma mängudisaini**: + - Joonista põhiline mängutsükkel + - Määra oma lõpptingimused selgelt + - Tuvasta, millised andmed tuleb taaskäivitamisel lähtestada + +2. **Sea üles projekti struktuur**: + ``` + my-game/ + ├── index.html + ├── style.css + ├── game.js + └── README.md + ``` + +3. **Loo oma põhimängutsükkel**: + - Initsialiseeri mänguolek + - Tööta kasutajasisendiga + - Uuenda mänguloogikat + - Kontrolli lõpptingimusi + - Kuvada jooksvat olekut + +### Tehnilised Nõuded + +**Kasuta kaasaegset JavaScripti**: +- Rakenda muutujate deklareerimisel `const` ja `let` +- Kasuta noolefunktsioone, kus sobib +- Rakenda ES6+ omadusi nagu templaatstringid ja destruktureerimine + +**Sündmuspõhine Arhitektuur**: +- Loo sündmuste töötlejad kasutajaliidese interaktsioonide jaoks +- Rakenda mänguoleku muutusi sündmuste kaudu +- Kasuta sündmuse kuulajaid taaskäivitamise funktsionaalsuseks + +**Puhtakoodi Praktikad**: +- Kirjuta funktsioonid ühe ülesandega +- Kasuta kirjeldavaid muutujate ja funktsioonide nimesid +- Lisa kommentaare, mis selgitavad mänguloogikat ja reegleid +- Järjesta kood loogilistesse sektsioonidesse + +## Esitamise Nõuded + +### Esitatud Failid + +1. **Täielikud mängufailid**: Kõik HTML, CSS ja JavaScripti failid, mida mänguks vaja +2. **README.md**: Dokumentatsioon, mis selgitab: + - Kuidas mängu mängida + - Millised lõpptingimused on rakendatud + - Juhised taaskäivitamiseks + - Spetsiaalsed omadused või mehhaanikad +3. **Koodi kommentaarid**: Selged selgitused mänguloogika ja algoritmide kohta + +### Testimise Kontrollnimekiri + +Enne esitmist veendu, et su mäng: + +- [ ] **Jookseb ilma vigadeta** brauseri konsoolis +- [ ] **Rakendab mitu lõpptingimust** nagu nõutud +- [ ] **Taaskäivitub korralikult** ja puhastab oleku +- [ ] **Annavad mängijale selget tagasisidet** mängu oleku kohta +- [ ] **Kasutab kaasaegset JavaScripti** süntaksit ja parimaid tavasid +- [ ] **Sisaldab põhjalikku dokumentatsiooni** README.md-s + +## Hindamisjuhend + +| Kriteerium | Suurepärane (4) | Hea (3) | Arenguaste (2) | Algus (1) | +|------------|-----------------|---------|----------------|-----------| +| **Mängu funktsionaalsus** | Täielik mäng mitme lõpptingimusega, sujuva taaskäivitusprotsessiga ja hästi lihvitud mängukogemusega | Täielik mäng, baastasemel lõpptingimused ja toimiv taaskäivitamine | Osaline mäng, mõned lõpptingimused rakendatud, taaskäivitamisel väikesed vead | Mittetäielik mäng piiratud funktsionaalsusega ja oluliste vigadega | +| **Koodi kvaliteet** | Puhas, hästi organiseeritud kood kaasaegsete JavaScripti praktikatega, põhjalike kommentaaridega ja suurepärase struktuuriga | Hea koodi organiseerimine kaasaegse süntaksiga, piisavate kommentaaridega ja selge ülesehitusega | Põhiline koodi organiseerimine, mõned kaasaegsed praktikad, minimaalsed kommentaarid | Kehv koodi organiseerimine, ajale jalgu jäänud süntaks, kommentaarideta ja struktuur puudulik | +| **Kasutajakogemus** | Intuitiivne mäng koos selgete juhiste, suurepärase tagasiside ja kaasahaarava lõpu/taaskäivitus kogemusega | Hea mäng koos piisavate juhiste ja tagasisidega, toimiv lõpp/taaskäivitus | Baastasemel mäng, minimaalsete juhistega, piiratud tagasiside mänguoleku kohta | Segane mäng, ebaselged juhised ja halb kasutajate tagasiside | +| **Tehniline rakendus** | Näitab mänguarenduse kontseptsioonide, sündmuste käsitlemise ja oleku haldamise valdamist | Tugev arusaam mängukontseptsioonidest hea rakendusega | Põhiline arusaam ja vastuvõetav rakendus | Piiratud arusaam ja kehv rakendus | +| **Dokumentatsioon** | Põhjalik README koos selgete juhiste, hästi dokumenteeritud koodi ja põhjalike testimisandmetega | Hea dokumentatsioon koos selgete juhiste ja piisavate kommentaaridega | Põhjalik dokumentatsioon minimaalse juhistete ja kommentaaridega | Kehv või puuduv dokumentatsioon | + +### Hindamisskaala +- **Suurepärane (16-20 punkti)**: Ületab ootusi loominguliste omaduste ja lihvitud rakendusega +- **Hea (12-15 punkti)**: Vastab kõigile nõuetele korraliku täitmisega +- **Arengujärgne (8-11 punkti)**: Vastab enamikele nõuetele väikeste puudustega +- **Algus (4-7 punkti)**: Vastab mõnele nõudele, kuid vajab olulist parandamist + +## Täiendavad Õppematerjalid + +- [MDN mänguarenduse juhend](https://developer.mozilla.org/en-US/docs/Games) +- [JavaScript-i mänguarenduse õpikud](https://developer.mozilla.org/en-US/docs/Games/Tutorials) +- [Canvas API dokumentatsioon](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) +- [Mängudisaini põhimõtted](https://www.gamasutra.com/blogs/) -| Kriteerium | Näidislik | Piisav | Vajab parandamist | -| ---------- | --------------------- | -------------------------- | -------------------------- | -| | täismäng on esitatud | mäng on osaliselt esitatud | osaline mäng sisaldab vigu | +> 💡 **Kasulik näpunäide**: Alusta lihtsaga ja lisa funktsioone järk-järgult. Hästi lihvitud lihtne mäng on parem kui keerukas vigadega mäng! --- -**Lahtiütlus**: -See dokument on tõlgitud, kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks lugeda autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valede tõlgenduste eest. \ No newline at end of file + +**Vastutusest vabastamine**: +See dokument on tõlgitud kasutades tehisintellekti tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi me püüame täpsust, tuleb arvestada, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. + \ No newline at end of file diff --git a/translations/et/7-bank-project/1-template-route/README.md b/translations/et/7-bank-project/1-template-route/README.md index 33208a94b..52ea9c79c 100644 --- a/translations/et/7-bank-project/1-template-route/README.md +++ b/translations/et/7-bank-project/1-template-route/README.md @@ -1,31 +1,96 @@ -# Pangaäpi loomine, 1. osa: HTML-mallid ja marsruudid veebirakenduses - -## Loengu-eelne viktoriin - -[Loengu-eelne viktoriin](https://ff-quizzes.netlify.app/web/quiz/41) - -### Sissejuhatus - -Alates JavaScripti tulekust brauseritesse on veebilehed muutunud interaktiivsemaks ja keerukamaks kui kunagi varem. Veebitehnoloogiaid kasutatakse nüüd sageli täielikult funktsionaalsete rakenduste loomiseks, mis töötavad otse brauseris ja mida nimetatakse [veebirakendusteks](https://en.wikipedia.org/wiki/Web_application). Kuna veebirakendused on väga interaktiivsed, ei soovi kasutajad oodata, kuni kogu leht iga toimingu järel uuesti laaditakse. Seetõttu kasutatakse JavaScripti HTML-i otse värskendamiseks DOM-i abil, et pakkuda sujuvamat kasutajakogemust. +# Ehita pangarakendus osa 1: HTML mallid ja marsruudid veebirakenduses + +```mermaid +journey + title Teie Panga Rakenduse Arenduse Teekond + section SPA Põhitõed + Mõista ühe lehe rakendusi: 3: Student + Õpi mallide kontseptsioone: 4: Student + Valda DOM-i manipuleerimist: 4: Student + section Marsruutimise Süsteemid + Rakenda kliendipoolset marsruutimist: 4: Student + Käsitle brauseri ajalugu: 5: Student + Loo navigeerimissüsteemid: 5: Student + section Professionaalsed Musterid + Ehita modulaarne arhitektuur: 5: Student + Rakenda parimaid praktikaid: 5: Student + Loo kasutajakogemusi: 5: Student +``` +Kui Apollo 11 juhtimisarvuti navigeeris 1969. aastal Kuule, pidi see lülituma erinevate programmide vahel ilma kogu süsteemi taaskäivitamata. Kaasaegsed veebirakendused töötavad sarnaselt – nad muudavad nähtavat sisu ilma kõike algusest laadimata. See loob sujuva, reageerimisvõimelise kogemuse, mida kasutajad täna ootavad. + +Erinevalt traditsioonilistest veebisaitidest, mis laadivad iga toimingu puhul terve lehe uuesti, uuendavad kaasaegsed veebirakendused vaid vajalikke osi. See lähenemine, nagu missioonijuhtimine, mis vahetab ekraane, hoides samal ajal pidevat suhtlust, loob voolava kasutajakogemuse, mida oleme harjunud ootama. + +Siin on, mis muudab vahe nii märkimisväärseks: + +| Traditsioonilised mitmeleheküljelised rakendused | Kaasaegsed üheleheküljelised rakendused | +|----------------------------|-------------------------| +| **Navigatsioon** | Iga ekraani puhul kogu lehe uuesti laadimine | Kohene sisu vahetamine | +| **Tõhusus** | Aeglasem, kuna laaditakse kogu HTML | Kiirem, osaliste uuendustega | +| **Kasutajakogemus** | Lehe järsud välgatuse efektid | Sujuvad, rakendusetaolised üleminekud | +| **Andmete jagamine** | Raskendatud lehekülgede vahel | Lihtne oleku haldus | +| **Arendus** | Mitmed HTML failid haldamiseks | Üks HTML dünaamiliste mallidega | + +**Evolutsiooni mõistmine:** +- **Traditsioonilised rakendused** nõuavad iga navigeerimise jaoks serveripäringut +- **Kaasaegsed SPAd** laadivad ühe korra ja uuendavad sisu dünaamiliselt JavaScripti abil +- **Kasutaja ootused** soosivad nüüd kohest ja sujuvat interaktsiooni +- **Tõhususe eelised** hõlmavad vähendatud andmeedastusmahtu ja kiirust + +Selles õppetükis loome pangarakenduse mitme ekraaniga, mis sujuvalt üksteisega liituvad. Nagu teadlased kasutavad modulaarseid instrumente, mida saab katseteks ümber seadistada, kasutame ka HTML malle taaskasutatavate komponentidena, mida kuvatakse vastavalt vajadusele. + +Sa töötad HTML mallide (taaskasutatavad ekraanide plaanid), JavaScripti marsruutimise (süsteem, mis lülitab ekraanide vahel) ja brauseri ajaloo API-ga (mis hoiab nupu „tagasi“ ootuspäraselt toimimas). Need on samad põhimõtted, mida kasutavad ka React, Vue ja Angular raamistiku lahendused. + +Õppetüki lõpuks on sul toimiv pangarakendus, mis demonstreerib professionaalse üheleheküljelise rakenduse põhimõtteid. + +```mermaid +mindmap + root((Ühelehele Rakendused)) + Architecture + Template System + Client-side Routing + State Management + Event Handling + Templates + Taaskasutatavad Komponendid + Dünaamiline Sisu + DOM-i Manipulatsioon + Sisu Vahetus + Routing + URL-i Halduse + Ajaloo API + Navigeerimisloogika + Brauseri Integratsioon + User Experience + Kiire Navigeerimine + Sujuvad Üleminekud + Järjepidev Olekuhaldus + Moodne Interaktsioon + Performance + Vähendatud Serveripäringud + Kiirem Lehekülje Vahetus + Tõhus Ressursside Kasutus + Parem Reageerimisvõime +``` +## Eel-loengu viktoriin -Selles õppetükis loome aluse panga veebirakenduse loomiseks, kasutades HTML-malle mitme ekraani loomiseks, mida saab kuvada ja värskendada ilma kogu HTML-lehte uuesti laadimata. +[Eel-loengu viktoriin](https://ff-quizzes.netlify.app/web/quiz/41) -### Eeltingimus +### Mida sul vaja läheb -Selle õppetüki veebirakenduse testimiseks on sul vaja kohalikku veebiserverit. Kui sul seda pole, saad paigaldada [Node.js](https://nodejs.org) ja kasutada käsku `npx lite-server` oma projekti kaustast. See loob kohaliku veebiserveri ja avab sinu rakenduse brauseris. +Me vajame kohalikku veebiserverit, et testida meie pangarakendust – ära muretse, see on lihtsam kui kõlab! Kui sul veel pole paigaldatud, siis installi lihtsalt [Node.js](https://nodejs.org) ja käivita projektikaustas `npx lite-server`. See mugav käsklus käivitab kohalik serveri ja avab su rakenduse automaatselt brauseris. ### Ettevalmistus -Loo oma arvutis kaust nimega `bank` ja selle sees fail nimega `index.html`. Alustame sellest HTML-i [mallist](https://en.wikipedia.org/wiki/Boilerplate_code): +Loo oma arvutis kaust nimega `bank` ja selle sisse fail `index.html`. Alustame sellest HTML [boilerplate’st](https://en.wikipedia.org/wiki/Boilerplate_code): ```html @@ -41,30 +106,77 @@ Loo oma arvutis kaust nimega `bank` ja selle sees fail nimega `index.html`. Alus ``` +**See boilerplate sisaldab:** +- **Määrab** HTML5 dokumendi struktuuri koos korrektse DOCTYPE deklaratsiooniga +- **Seab** märgistusena UTF-8 rahvusvahelise teksti toe +- **Lubab** mobiilisõbralikku disaini vaateakna meta-täpi abil +- **Seadistab** kirjeldusega tiitli, mis ilmub brauseri vahekaardil +- **Loodab** puhta body sektsiooni, kuhu ehitame oma rakenduse + +> 📁 **Projekti struktuuri eelvaade** +> +> **Selle õppetüki lõpuks sisaldab su projekt:** +> ``` +> bank/ +> ├── index.html +> ├── app.js +> └── style.css +> ``` +> +> **Failide ülesanded:** +> - **index.html**: sisaldab kõiki malle ja määrab rakenduse struktuuri +> - **app.js**: haldab marsruute, navigeerimist ja mallide juhtimist +> - **Mallid**: määratlevad sisselogimise, juhtpaneeli ja teiste ekraanide kasutajaliidese + --- -## HTML-mallid +## HTML mallid + +Mallid lahendavad veebiarenduses põhiprobleemi. Kui Gutenberg leiutas 1440ndatel liikuvate trükikujutiste meetodi, mõistis ta, et terveid lehti pole vaja raiuda, vaid ta saab luua taaskasutatavad täheplokid ja korraldada neid vastavalt vajadusele. HTML mallid töötavad sama põhimõtte järgi – selle asemel, et teha iga ekraani jaoks eraldi HTML faile, defineerid taaskasutatavad struktuurid, mida saab vajadusel kuvada. + +```mermaid +flowchart TD + A["📋 Malli määratlus"] --> B["💬 Peidetud DOM-is"] + B --> C["🔍 JavaScript leiab malli"] + C --> D["📋 Klooni malli sisu"] + D --> E["🔗 Lisa nähtavasse DOM-i"] + E --> F["👁️ Kasutaja näeb sisu"] + + G["Sisselogimise mall"] --> A + H["Armatuurlaua mall"] --> A + I["Tulevased mallid"] --> A + + style A fill:#e3f2fd + style D fill:#e8f5e8 + style F fill:#fff3e0 + style B fill:#f3e5f5 +``` +Mõtle mallidele kui plaanidele sinu rakenduse erinevate osade jaoks. Nii nagu arhitekt loob ühe plaani ja kasutab seda mitmel korral, selle asemel et joonistada identsed ruumid uuesti, loome ka mallid ühekordselt ja käivitame neid vastavalt vajadusele. Brauser hoiab need mallid peidetuna kuni JavaScript nad aktiveerib. -Kui soovid luua veebilehele mitu ekraani, võiks üheks lahenduseks olla iga ekraani jaoks eraldi HTML-faili loomine. Kuid see lahendus toob kaasa mõningaid ebamugavusi: +Kui tahad veebilehe jaoks luua mitu ekraani, võib üks lahendus olla igale ekraanile eraldi HTML faili tegemine. Kuid see lahendus toob kaasa mõned ebamugavused: -- Kogu HTML tuleb ekraani vahetamisel uuesti laadida, mis võib olla aeglane. +- Ekraani vahetades tuleb kogu HTML uuesti laadida, mis võib olla aeglane. - Andmete jagamine erinevate ekraanide vahel on keeruline. -Teine lähenemine on kasutada ainult ühte HTML-faili ja määratleda mitu [HTML-malli](https://developer.mozilla.org/docs/Web/HTML/Element/template) `