JavaScript on tänapäeva veebiarenduses saavutamatu. See võimaldab sul luua interaktiivseid veebilehti ja dünaamilisi sisu. Selles juhendis õpid, kuidas rakendada klikievents ja töötada muutujatega. Keskendume lihtsale, praktilisele lähenemisele, et saaksid kohe alustada.
Peamised teadlikkused
- Õpid, kuidas töötada nuppude või muude elementide klikkide JavaScriptis.
- Sa saad teada, kuidas salvestada ja hiljem väärtusi muutujates.
- Kombinatsioon klikievents'ist ja muutujatest pakub sulle mitmekesiseid võimalusi veebiarenduses.
Klikkide alused JavaScriptis
Et muuta nupp interaktiivseks, peaksid sul olema esmalt HTML ja JavaScripti põhiraam. Selles etapis näitan sulle, kuidas luua nupp, mis kuvab häiret, kui seda klikitakse.
Järgmiseks pead sa pöörduma selle nupu poole oma JavaScripti failis ja määrama sellele funktsiooni, mis käivitatakse, kui sa sellele klikkid. Selleks kasutatakse getElementById meetodit, et valida nupp.
Nüüd saad rakendada klikiürituse.
Antud näites näitab häire, et nupp on õnnestunult klikitud. Proovis oma rakendust ja veendu, et häire ilmub, kui sa nuppu klikid.
Muutujate kasutamine
Muutujad on programmeerimise keskne kontseptsioon. Need võimaldavad sul andmeid salvestada ja hiljem uuesti kasutada. Loome muutuja ja vaatame, kuidas saame seda kasutada seoses sinu eelmise rakendusega.
Loo uus muutuja, mis salvestab kindla väärtuse.
Sellist muutujat saad kasutada, et muuta oma häire tekst.
Nüüd muudame häiret nii, et fikseeritud numbri asemel kuvatakse muutuja väärtus.
Kui nüüd klikkida nuppu, näeb häire välja nii: „Väärtus on: 15“. Katseta julgelt muutuja väärtusega ja vaata, mis juhtub.
Interaktiivsete veebilehtede kujundamine
Vaata nüüd, kuidas saame klikiürituste ja muutujate abil kujundada interaktiivset veebilehte. Võib-olla soovid muuta H1 elemendi teksti, kui sa oma nuppu klikid.
Oma JavaScriptis saad seejärel värskendada selle H1 elemendi sisemist HTML-sisu uue muutujaga.
Kui nüüd klikkid nuppu, muutub pealkirja tekst. See muudab lehe interaktiivseks ja atraktiivsemaks kasutajate jaoks.
Muutujate kasutamine erinevate andmetüüpidega
Veel üks oluline aspekt on erinevad andmetüübid JavaScriptis. Numbrite kõrval saad salvestada ka teksti või loogilisi väärtusi. Mõned näited:
See, kuidas sa muutuja määratled, mõjutab seda, kuidas sa seda hiljem kasutada saad.
Kui sa nuppu klikid, muutub pealkirja tekst vastavalt uueTeksti sisule.
Kokkuvõte – JavaScripti klikke ja muutujaid tõhusalt kasutada
Oled õppinud, kuidas rakendada klikiüritusi JavaScriptis ja kasutada muutujat, et luua dünaamilisi interaktiivseid elemente. Kui jätkad katsetamist ja süvened kontseptsioonidesse, suudad arendada keerukamaid funktsioone.
Sageli küsitud küsimused
Mis on erinevus numbri ja stringi vahel JavaScriptis?Number töödeldakse numbrilise väärtusena, samas kui string on tekst, mis on pandud jutumärkidesse.
Kuidas ma saan muutuja väärtust muuta?Sa saad muutuja väärtuse lihtsalt määramise kaudu üle kirjutada, nt minuMuutuja = 20.
Kas mul on vaja punkti ja koma rea lõpuks JavaScriptis?Enamasti on soovitatav kasutada punkte ja komasid, sest need määratlevad selgemalt, kus käsk lõpeb.
Mis juhtub muutujatega, kui ma lehte uuesti laadida?Kui lehte uuesti laaditakse, lähtestatakse muutujad ja kaotavad oma sisu, kuna nad eksisteerivad ainult jooksvate sessioonide kontekstis.
Kuidas ma saan oma funktsioonis kasutada mitut parameetrit?Sa saad lihtsalt funktsiooni kutsumisel määrata täiendavad parameetrid, nt: function minuFunktsioon(param1, param2).
