Vaizdo pamoka: Mokytis JavaScript ir jQuery

Šiltai sveiki atvykę į galutinį „JavaScript“ ir „jQuery“ kursą.

Šiame vaizdo įraše bus paaiškinta, kas yra JavaScript ir kokią naudą jis mums atneša.

Šiame vaizdo įraše sužinosi, kokią redaktorių naudosime, ir kartu jį įdiegsime.

Šiame vaizdo įraše bus parodyta, kaip naudoti paspaudimus su JavaScript ir kaip veikia kintamieji.

If sąlyga. If (išverčiama: jeigu) yra labai dažnai naudojama programavime. Pavyzdžiui, kai norite atlikti kažką tik tada, kai yra patenkinta tam tikra sąlyga.

Šiame vaizdo įraše kalbama apie masyvus ("arrays") JavaScript kalboje. Jie leidžia mums saugoti daug informacijos viename kintamajame.

Šiame vaizdo įraše pažįstami For ciklai (lūpotojai). Jie leidžia mums daugiau kartų paleisti tam tikrą kodą iš eilės.

Funkcijos yra kaip mažos programėlės, kurias sukūrus galime kada norime vėl naudoti. Kai ant savo telefono pavyzdžiui spaudžiame "Namų" mygtuką, iškviečiama funkcija, kuri grąžina jus atgal į pradinį ekraną. Funkcijos tikrai palengvina darbą.

Čia bus rodomas iššūkio rezultatas (tiksliau - kvestas) ir taip pat bus sukurtas HTML pagrindas.

Čia yra programuojamas testo CSS (išvaizda).

Čia bus parašytas ir paaiškintas mūsų testo JavaScript.

Tu jau matėte, kaip veikia funkcijos su vienu parametru. Dabar pažiūrėsime į funkcijas su keliais parametrais. Kelias parametras reikalingas tuomet, kai norima naudoti funkciją su keliais skirtingais kintamaisiais. Matematikoje, pavyzdžiui, sudedant kelis skaičius.

Yra globalių ir vietinių kintamųjų. Trumpai tariant: globalūs kintamieji yra tie kintamieji, kuriuos sukuriate už funkcijų ribų, o vietiniai kintamieji yra tie, kuriuos sukuriate funkcijų viduje. Čia mes išsamiau pažvelgsime, kaip tai veikia.

Programavimo kalbose yra galimybė nustatyti funkcijų grąžinimo reikšmes. Iki šiol turėjome tik funkcijas, kurios tiesiog įvykdydavo kažką, bet negrąžindavo nieko, su kuo galėtume tęsti darbą. Dabar žiūrėsime į GRĮŽTAMĄJĮ.

Šiame straipsnyje aptariame matematinius operatorius ir priskyrimo operatorius. Matematinių operatorių atveju kalbama apie gana paprastus dalykus, tokius kaip sudėtis, atėmimas ir t. t., o priskyrimo operatoriais - apie galimybę gana lengvai atlikti paprastus veiksmus, pvz., padidinti 5 vienetų. Kadangi abu dalykai yra svarbūs programavime, čia aptariami šie du klausimai.

Yra trys (arba keturios) skirtingos ciklo rūšys programavime: "do-while", "while" ir "for" ciklai. Jau pažinome "for" ciklą. Dabar susitelksime į "do-while" (rankos valdomas) ir "while" ciklus (galvos valdomas).

Šiame straipsnyje kalbama apie alternatyvą „If“ sąlygoms. Ši alternatyva vadinama „Switch (Perjungiklis)“ ir „Case (Atvejis)“. Taigi, turime praktiškai perjungiklį, kuris perjungia tarp skirtingų atvejų ir liktais tuo, kuris yra aktyvus.

Mes jau kalbėjome apie masyvus, tačiau neįėjome į detales. Yra daugiau dalykų, kuriuos reikia žinoti apie masyvus. JavaScript masyvo pagrindinė savybė yra elementų skaičius (length). Tačiau masyvas turi daugiau savybių, pvz., index, kuris suteikia informaciją apie masyvo 0 padėtį.

Objektai yra labai svarbus ir įdomus konceptas daugelyje programavimo kalbų. Iš esmės galima viską aprašyti kaip objektą. Pasiimkime, pavyzdžiui, objektą, kurį dažniausiai matome gatvėse: automobilį. Automobilis turi tam tikras savybes/bruožus ir gali atlikti tam tikras veiklas.

Pažiūrėkime, kaip galime kurti objektus „JavaScript“. Tam mes sukursime konstruktoriaus funkciją ir dvi mūsų objekto instancijas mūsų "Head" žymėje. Konstruktoriaus funkcijoje, turinčioje tą patį pavadinimą kaip mūsų objektas, nurodome programai, kad parametrai, kurie perduodami kuriant objekto instanciją su konstruktoriaus funkcija, bus tiesiog objekto vertės.

Kaip pagrindą objektų funkcijoms pradedame su kodu iš paskutinio mokymo pamokos, kurioje sukūrėme kintamuosius, kurie bus generuojami kiekvieno mūsų objekto atveju.

Šiame vadove susipažinsi su Math objektu. Tai yra objektas, paremtas Math klasės, turintis daugybę stilingų savybių ir funkcijų.

Šiame vaizdo įraše kalbama apie „Date“ objektą arba „Date“ klasę. Tai yra objektai, kuriuos galima naudoti programoje įtraukti laiką. Čia neprivaloma turėti omenyje laiko ar datą, bet tai gali būti ir laiko intervalas. „Date“ objektas apima laiką, prabėgusį nuo momento 1970-01-01 00:00:00. Yra skirtingi būdai, kaip perduoti parametrus „Date“ konstruktoriui.

Šiame vaizdo įraše išmoksi, kaip sukurti interaktyvų laikrodį naudojant JavaScript kalbą.

Šiame vaizdo įraše kalbama apie paveldėjimą ir polimorfizmą. Du objektinio programavimo sąvokos.

Šiame straipsnyje aptarsime klausimą: kas yra jQuery? jQuery yra JavaScript biblioteka, kuri leidžia mums kurti dar šaunesnes interneto svetaines.

Čia tu sužinosi, kaip dar lengviau apdoroti paspaudimus su jQuery.

Šiame vadove jūs sužinosite, kaip naudojant jQuery galima keisti svetainės išvaizdą. Tam galime labai paprastai, pvz., pakeisti lauko atributą. Šiame pavyzdyje galime pakeisti Iframe nuorodą (taip pat src šaltinį), būdami virš kvadrato. Kodą galima lengvai keisti ir, pvz., padidinti kvadratą pakeitus aukštį ir plotį atributus, kai virš jo nukeliate. Bendrai šį metodą galima dabar naudoti, norint lengvai keisti svetainės išvaizdą.

Vienas iš jQuery funkcionalumų yra galimybė animuoti elementų išnykimą. Šiame pavyzdyje mes leidžiame išnykti mygtuką, kai paspaudžiame kitą mygtuką. Tai atliekame naudodami FadeOut funkciją („Išnykimo funkciją“). Norint vėl parodyti elementą, naudojame FadeIn funkciją.

Šiame vaizdo įraše nagrinėsime animaciją „jQuery“ programoje. Tai reiškia kažką, kas juda. Taigi užtikriname, kad elementas mūsų svetainėje judėtų / keistųsi. „jQuery“ šioje veikloje turi funkciją. Ji vadinasi animate() ir turi tris parametrus.

Pažiūrėkime, kas yra jQuery UI.

Akordeonas yra valdiklis, leidžiantis mums, panašiai į akordeoną, matyti tik tam tikras Visumo dalis. Tai ypač naudinga, kai norima perteikti daug informacijos, tačiau ši informacija kaip vienas didelis tekstas būtų pernelyg neaiškus.

Šiame pamokos vadove kalbama apie jQuery UI išrinkomuosius elementus. Tai yra elementai, kuriuos galima išrinkti. Tu tai žinai, jei naudojai produktyvumo svetaines kaip „Wunderlist“ ar „Trello“. Galimybė padaryti išrinkamus elementus yra labai šauni funkcija, kurią gali panaudoti įvairiose programose.

Kartais atsitinka, kad norite padaryti vartotojui keičiamą elemento dydį. Tuomet reziamieji elementai yra būtent tai, ko reikia. Jie tai tikrai leidžia. Žemiau dešinėje, prie elemento, matote mažą trikampį, kurį galite paspausti, ir tada, jei laikote paspaustą pelės žymeklį, galite didinti ar mažinti elementą.

jQuery UI leidžia labai lengvai sukurti elementą, kurį galima tempimo įvairiomis kryptimis. Kaip tai padaryti, pamatysime čia.

Krovimosi juostos arba pažangos juostos yra puikus būdas parodyti vartotojui, kaip toli jis yra tam tikrame procese. Pavyzdžiui, pardavimo procese internetinėje parduotuvėje arba apklausos metu jis padeda vartotojui žinoti, kaip toli jis yra atliekant veiksmus.

Šiame vadove noriu trumpam aptarti efektus „jQuery UI“. Iš tikrųjų yra gan keisti efektai, kurie padeda dar gražiau atrodyti tavo svetainei ir, be to, visiškai nustebinti tavo vartotojus.

Šiame vaizdo įraše matote iššūkio rezultatą. Dažniausiai užduodami klausimai.

Čia mes perkelsime DUK puslapį.

Šiame vaizdo įraše pristatoma smegenų žaidimo programa, kuri bus sukurta šiame skyriuje.

Pirmiausia rūpinsimės žaidimo struktūra ir išvaizda.

Dabar rūpinsimės kai kuriomis žaidimo funkcionalumis.

Žaidėjas jau gali atlikti pirmuosius veiksmus žaidime, tačiau dabar užtikrinsime, kad žaidimas galėtų būti tinkamai pradėtas ir baigtas iš naujo.

Dabar mums reikia tik įtraukti laikmatį į žaidimą, kad teisingai apskaičiuotume taškus ir ribotume žaidimo laiką. Be to, atliksime keletą kitų mažų žingsnių, kad baigtume žaidimą.

Čia bus pristatytas skyriaus programos. Tai yra užduočių sąrašo programa / svetainė.

Dabar sukursime pagrindą ir pažiūrėsime, kaip galime kurti ir redaguoti atitinkamą temą naudojant jQuery Mobile.

Kadangi mes laikomės objektinio programavimo (OOP) požiūrio, turime sukurti atitinkamą architektūrą. Dėl šios priežasties čia užsiimame šiuo klausimu.

Šiame vaizdo įraše pridėsime puslapius ir susitelksime į puslapį, kur kuriame užduotis.

Panašiai kaip kūrimo puslapis, taip pat reikia užpildyti redagavimo puslapį ir suteikti atitinkamą funkcionalumą.

Dabar galime dar kartą sutelkti dėmesį į architektūrą ir sukurti duomenų struktūrą.

Kadangi dabar turime savo duomenų struktūrą, galime ją gana lengvai atitinkamai iškviesti mūsų vartotojo sąsajoje.

Programuojant "paaiškinimo eigoje" buvo keletas būtinų žingsnių, kuriuos dabar galime ištaisyti. Be to, rūpinsimės duomenų nuolatiniu saugojimu ir baigėsime programėlę.