JavaScript Academy · Oppitunti

Syötearvojen lukeminen

Käyttäkää teksti-, valintaruutu- ja select-syötteiden arvoja.

Oppitunti 1/413 vaihetta

Syötearvojen lukeminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Lomaketietojen käsittely

Lomakkeet keräävät käyttäjän syötteitä tekstikentistä, valintaruuduista, valintanapeista ja pudotusvalikoista. Kukin kenttä tarjoaa tietonsa hieman eri tavalla.

input.value

Tekstityyppiset syötekentät tarjoavat nykyisen sisältönsä value-ominaisuuden kautta, aina merkkijonona.

const name = document.querySelector("#name");
console.log(name.value);

value on aina merkkijono

Myös numerokentät palauttavat merkkijonon. Muuntakaa arvo erikseen, kun tarvitsette numeron.

const age = document.querySelector("#age");
const n = Number(age.value);

valueAsNumber

Numero- ja päivämääräkentät tarjoavat valueAsNumber-ominaisuuden, joka palauttaa numeron suoraan tai tyhjän tai virheellisen arvon tapauksessa NaN-arvon.

const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);

checkbox.checked

Valintaruudut ilmoittavat tilansa totuusarvoisella checked-ominaisuudella, eivät value-ominaisuudella.

const agree = document.querySelector("#agree");
console.log(agree.checked); // true or false

Valintanapit

Etsikää valintanappiryhmästä valittu nappi. checked-ominaisuus ilmaisee valitun vaihtoehdon.

const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");

select-elementin value

Yhden vaihtoehdon pudotusvalikko tarjoaa valitun vaihtoehdon value-ominaisuuden kautta.

const country = document.querySelector("#country");
console.log(country.value);

Usean vaihtoehdon valinta

Jos useita vaihtoehtoja voi valita, lukekaa selectedOptions ja muuntakaa sen alkiot arvoiksi.

const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);

input-tapahtuma

Kuunnelkaa input-tapahtumaa, jos haluatte reagoida jokaiseen näppäinpainallukseen tai muutokseen reaaliajassa.

name.addEventListener("input", (e) => {
  console.log(e.target.value);
});

change-tapahtuma

change-tapahtuma laukeaa, kun kentän fokus poistuu sen arvon muututtua, tai heti valintaruutujen ja pudotusvalikoiden kohdalla.

country.addEventListener("change", (e) => {
  console.log("chose " + e.target.value);
});

FormData

FormData kerää lomakkeen kaikki nimetyt kentät kerralla, joten se sopii erinomaisesti palvelimelle lähettämiseen.

const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));

Pikatarkistus

Lukekaa valintaruutu oikein.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Lukekaa tekstikentät value-ominaisuuden kautta. Se on aina merkkijono, joten käyttäkää numeroille valueAsNumber-ominaisuutta. Lukekaa valintaruudut ja valintanapit checked-ominaisuuden kautta ja pudotusvalikot value- tai selectedOptions-ominaisuuden kautta. Reagoikaa input-tapahtumalla jokaiseen muutokseen tai change-tapahtumalla arvon vahvistamiseen. Kerätkää kaikki tiedot kerralla FormData-objektilla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Syötearvojen lukeminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Syötearvojen lukeminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Syötearvojen lukeminen”?

Käyttäkää teksti-, valintaruutu- ja select-syötteiden arvoja. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Syötearvojen lukeminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy