Akademi JavaScript · Pelajaran

Membaca Nilai Input

Akses nilai daripada input teks, kotak pilihan dan pilihan.

Pelajaran 1 daripada 413 langkah

Membaca Nilai Input ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Mengendalikan Data Borang

Borang mengumpulkan data masukan pengguna melalui medan seperti kotak teks, kotak pilihan, butang radio dan senarai juntai bawah. Setiap jenis mendedahkan datanya dengan cara yang sedikit berbeza.

input.value

Masukan yang menyerupai teks mendedahkan kandungan semasanya melalui sifat value, yang sentiasa berupa rentetan.

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

value Sentiasa Berupa Rentetan

Masukan nombor sekalipun mengembalikan rentetan. Tukarkannya secara jelas apabila Anda memerlukan nombor.

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

valueAsNumber

Masukan nombor dan tarikh menyediakan valueAsNumber, yang mengembalikan nombor secara langsung atau NaN jika kosong atau tidak sah.

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

checkbox.checked

Kotak pilihan melaporkan keadaannya melalui sifat boolean checked, bukannya value.

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

Butang Radio

Untuk kumpulan butang radio, cari butang yang ditandakan. Sifat checked mengenal pasti pilihan yang dipilih.

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

Nilai select

Senarai juntai bawah pilihan tunggal mendedahkan pilihan yang dipilih melalui value.

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

Pilihan Berbilang

Untuk pilihan berbilang, baca selectedOptions dan petakan pilihan tersebut kepada nilai.

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

Acara input

Dengarkan acara input untuk bertindak balas terhadap setiap ketukan kekunci atau perubahan dalam masa nyata.

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

Acara change

Acara change dicetuskan apabila medan kehilangan fokus selepas nilainya berubah, atau dengan serta-merta untuk kotak pilihan dan senarai pilihan.

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

FormData

FormData mengumpulkan semua medan bernama dalam borang sekali gus, sesuai untuk dihantar kepada pelayan.

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

Semakan Pantas

Baca kotak pilihan dengan betul.

Jawab dalam pelajaran interaktif

Ringkasan

Baca masukan teks melalui value (sentiasa berupa rentetan; gunakan valueAsNumber untuk nombor), serta kotak pilihan dan butang radio melalui checked. Baca senarai juntai bawah melalui value atau selectedOptions. Bertindak balas dengan acara input (setiap perubahan) atau acara change (apabila perubahan disahkan), dan kumpulkan semuanya sekali gus dengan FormData.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Membaca Nilai Input” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Membaca Nilai Input”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Membaca Nilai Input”?

Akses nilai daripada input teks, kotak pilihan dan pilihan. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Membaca Nilai Input” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript