JavaScript yra neatsiejama šiuolaikinės žiniatinklio kūrimo dalis. Ji leidžia jums kurti interaktyvias svetaines ir dinamišką turinį. Šiame vadove išmoksite, kaip įgyvendinti paspaudimų įvykius ir dirbti su kintamaisiais. Dėmesys skiriamas paprastam, praktiniam naudojimui, kad galėtumėte iš karto pradėti.
Pagrindinės įžvalgos
- Išmoksite, kaip tvarkyti paspaudimus ant mygtukų arba kitų elementų JavaScript.
- Sužinosite, kaip su kintamaisiais saugoti vertes ir jas vėl gauti.
- Paspaudimų įvykių ir kintamųjų kombinacija suteikia jums daugybę galimybių žiniatinklio kūrime.
Paspaudimų pagrindai JavaScript
Norėdami padaryti mygtuką interaktyvų, pirmiausia turėtumėte turėti HTML ir JavaScript struktūrą. Šiame žingsnyje parodysiu, kaip sukurti mygtuką, kuris rodys alert'ą, kai jis bus paspaustas.
Kitame žingsnyje turite kreiptis į šį mygtuką savo JavaScript faile ir priskirti jam funkciją, kuri bus iškviesta, kai paspausite ant jo. Šiuo atveju bus naudojama getElementById metodas, kad pasirinktumėte mygtuką.
Dabar galite įgyvendinti paspaudimo įvykį.
Šiame pavyzdyje alert'as rodo, kad mygtukas buvo sėkmingai paspaustas. Dabar išbandykite savo įgyvendinimą ir įsitikinkite, kad alert'as pasirodo, kai paspausite ant mygtuko.
Kintamųjų naudojimas
Kintamieji yra centrinis programavimo konceptas. Jie leidžia jums saugoti duomenis ir vėliau juos panaudoti. Sukurkime kintamąjį ir pažiūrėkime, kaip galime jį panaudoti su jūsų ankstesniu įgyvendinimu.
Sukurkite naują kintamąjį, kuris saugo tam tikrą vertę.
Šį kintamąjį galite naudoti, kad pakeistumėte tekstą savo alert'e.
Dabar pakeisime alert'ą, kad vietoj fiksuoto skaičiaus būtų rodomas kintamojo vertė.
Jei dabar paspausite mygtuką, alert'as atrodys taip: „Vertė yra: 15“. Eksperimentuokite su kintamojo verte ir pažiūrėkite, kas atsitiks.
Interaktyvių svetainių kūrimas
Dabar pažvelkite, kaip su paspaudimų įvykiais ir kintamaisiais galime sukurti interaktyvią svetainę. Galbūt norite pakeisti H1 elemento tekstą, kai paspausite ant savo mygtuko.
Jūsų JavaScript faile galite atnaujinti šio H1 elemento vidinį HTML turinį su nauju kintamuoju.
Dabar, jei paspausite mygtuką, antraštės tekstas pasikeis. Tai padaro puslapį interaktyvesnį ir patrauklesnį vartotojams.
Kintamųjų naudojimas su skirtingais duomenų tipais
Dar vienas svarbus aspektas yra įvairūs duomenų tipai JavaScript. Be skaičių, galite saugoti ir tekstą, arba loginės vertes. Kai kurie pavyzdžiai:
Kai kuriate kintamąjį, jo apibrėžimo būdas daro įtaką tam, kaip galiausiai galėsite jį naudoti.
Paspaudus mygtuką, antraštės tekstas pasikeis pagal naujoTeksto turinį.
Apibendrinimas – efektyvus JavaScript paspaudimų ir kintamųjų naudojimas
Išmokote pagrindus, kaip įgyvendinti paspaudimų įvykius JavaScript ir kaip naudoti kintamuosius, norint kurti dinamiškus interaktyvius elementus. Jei toliau eksperimentuosite ir gilinsitės į šiuos konceptus, būsite pajėgūs kurti sudėtingesnes funkcijas.
Dažnai užduodami klausimai
Koks skirtumas tarp skaičiaus ir eilutės JavaScript?Skaičius apdorojamas kaip skaitinė vertė, tuo tarpu eilutė yra tekstas, kuris yra įtrauktas į kabutes.
Kaip galiu pakeisti kintamojo vertę?Galite tiesiog perrašyti kintamojo vertę priskyrimu, pvz., manoKintamasis = 20.
Ar man reikia kabliataškio eilutės pabaigoje JavaScript?Didžiojoje dalyje atvejų rekomenduojama naudoti kabliataškius, nes jie aiškiau apibrėžia, kur baigiasi komanda.
Kas nutinka su kintamaisiais, kai atnaujinu puslapį?Jei puslapis atnaujinamas, kintamieji bus atstatyti ir praras savo turinį, nes jie egzistuoja tik veikiančios sesijos kontekste.
Kaip galiu naudoti kelis parametrus savo funkcijoje?Galite lengvai apibrėžti papildomus parametrus funkcijos kvietime, pvz.: function manoFunkcija(param1, param2).
