Bagaimana Anda bisa mengirimkan formulir menggunakan javascript untuk sistem pengumpulan data pengguna?

Formulir diperkenalkan secara singkat sebagai cara untuk mengirimkan informasi yang diberikan oleh pengguna melalui HTTP. Mereka dirancang untuk Web pra-JavaScript, dengan asumsi bahwa interaksi dengan server selalu terjadi dengan menavigasi ke halaman baru

Table of Contents Show

Bidang yang dinonaktifkan
Bentuk secara keseluruhan
Bidang teks
Kotak centang dan tombol radio
Pilih bidang
Bidang file
Menyimpan data sisi klien
Meja kerja JavaScript
Pelengkapan otomatis
Permainan Kehidupan Conway
Bagaimana Anda bisa mengirimkan formulir menggunakan JavaScript?
Bagaimana cara mengumpulkan data formulir dengan JavaScript?
Bagaimana cara menangani pengiriman formulir dalam JavaScript?
Bagaimana cara mendapatkan nilai pengiriman formulir dalam JavaScript?

Tetapi elemen mereka adalah bagian dari DOM seperti halaman lainnya, dan elemen DOM yang mewakili bidang formulir mendukung sejumlah properti dan peristiwa yang tidak ada pada elemen lain. Ini memungkinkan untuk memeriksa dan mengontrol bidang input tersebut dengan program JavaScript dan melakukan hal-hal seperti menambahkan fungsionalitas ke formulir tradisional atau menggunakan formulir dan bidang sebagai blok penyusun dalam aplikasi JavaScript

Bidang

Formulir web terdiri dari sejumlah kolom input yang dikelompokkan dalam tag

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

3. HTML memungkinkan sejumlah gaya bidang yang berbeda, mulai dari kotak centang aktif/nonaktif sederhana hingga menu tarik-turun dan bidang untuk input teks. Buku ini tidak akan mencoba untuk membahas secara komprehensif semua jenis bidang, tetapi kita akan mulai dengan gambaran kasar

Banyak jenis bidang menggunakan tag

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

4. Atribut

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

5 tag ini digunakan untuk memilih gaya bidang. Ini adalah beberapa jenis

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

_4 yang umum digunakan

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

7Bidang teks baris tunggal

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

8Sama seperti

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

7 tetapi menyembunyikan teks yang diketik

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_0Sakelar hidup/mati

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

1(Bagian dari) bidang pilihan ganda

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

2Memungkinkan pengguna untuk memilih file dari komputer mereka

Bidang formulir tidak harus muncul dalam tag

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

3. Anda dapat menempatkannya di mana saja di halaman. Bidang seperti itu tidak dapat dikirimkan (hanya formulir secara keseluruhan yang dapat), tetapi ketika menanggapi masukan dengan JavaScript, kita sering kali tidak ingin mengirimkan bidang kita secara normal.

<p><input type="text" value="abc"> (text)</p>
<p><input type="password" value="abc"> (password)</p>
<p><input type="checkbox" checked> (checkbox)</p>
<p><input type="radio" value="A" name="choice">
   <input type="radio" value="B" name="choice" checked>
   <input type="radio" value="C" name="choice"> (radio)</p>
<p><input type="file"> (file)</p>

Antarmuka JavaScript untuk elemen tersebut berbeda dengan jenis elemen. Kami akan membahasnya masing-masing nanti di bab ini

Bidang teks multibaris memiliki tagnya sendiri,

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

4, sebagian besar karena menggunakan atribut untuk menentukan nilai awal multibaris akan terasa canggung.

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_4 memerlukan tag penutup

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

6 yang cocok dan menggunakan teks di antara keduanya, alih-alih menggunakan atribut

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

7, sebagai teks awal

<textarea>
one
two
three
</textarea>

Terakhir, tag

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

8 digunakan untuk membuat bidang yang memungkinkan pengguna memilih dari sejumlah opsi yang telah ditentukan sebelumnya

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

Setiap kali nilai bidang formulir berubah, itu memicu peristiwa

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

Fokus

Tidak seperti kebanyakan elemen dalam dokumen HTML, bidang formulir bisa mendapatkan fokus keyboard. Saat diklik—atau diaktifkan dengan cara lain—mereka menjadi elemen aktif saat ini, penerima utama input keyboard

Jika dokumen memiliki bidang teks, teks yang diketik akan berakhir di sana hanya bila bidang tersebut difokuskan. Bidang lain merespons aktivitas keyboard secara berbeda. Misalnya, menu

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_8 mencoba berpindah ke opsi yang berisi teks yang diketik pengguna dan merespons tombol panah dengan menggerakkan pilihannya ke atas dan ke bawah

Kita dapat mengontrol fokus dari JavaScript dengan metode

<input type="text" autofocus>

1 dan

<input type="text" autofocus>

2. Yang pertama memindahkan fokus ke elemen DOM yang dipanggil, dan yang kedua menghilangkan fokus. Nilai dalam

<input type="text" autofocus>

_3 sesuai dengan elemen yang saat ini difokuskan

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

Untuk beberapa halaman, pengguna diharapkan ingin segera berinteraksi dengan bidang formulir. JavaScript dapat digunakan untuk memfokuskan bidang ini saat dokumen dimuat, tetapi HTML juga menyediakan atribut

<input type="text" autofocus>

4, yang menghasilkan efek yang sama tetapi memberi tahu browser apa yang ingin kita capai. Ini memungkinkan browser untuk menonaktifkan perilaku saat tidak sesuai, seperti saat pengguna memfokuskan sesuatu yang lain

<input type="text" autofocus>

Browser secara tradisional juga memungkinkan pengguna untuk memindahkan fokus melalui dokumen dengan menekan tombol Tab. Kita dapat memengaruhi urutan di mana elemen menerima fokus dengan atribut

<input type="text" autofocus>

5. Dokumen contoh berikut akan membiarkan fokus melompat dari input teks ke tombol OK, daripada melalui tautan bantuan terlebih dahulu

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

Secara default, sebagian besar jenis elemen HTML tidak dapat difokuskan. Namun Anda dapat menambahkan atribut

<input type="text" autofocus>

_5 ke elemen apa pun, yang akan membuatnya dapat difokuskan

Bidang yang dinonaktifkan

Semua bidang formulir dapat dinonaktifkan melalui atribut

<input type="text" autofocus>

7 mereka, yang juga ada sebagai properti pada objek DOM elemen

<button>I'm all right</button>
<button disabled>I'm out</button>

Bidang yang dinonaktifkan tidak dapat difokuskan atau diubah, dan tidak seperti bidang yang aktif, bidang tersebut biasanya terlihat abu-abu dan pudar

Ketika sebuah program sedang dalam proses penanganan tindakan yang disebabkan oleh beberapa tombol atau kontrol lain, yang mungkin memerlukan komunikasi dengan server dan dengan demikian memerlukan waktu, sebaiknya nonaktifkan kontrol hingga tindakan selesai. Dengan begitu, saat pengguna menjadi tidak sabar dan mengkliknya lagi, mereka tidak akan mengulangi tindakannya secara tidak sengaja

Bentuk secara keseluruhan

Saat sebuah bidang dimuat dalam elemen

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

3, elemen DOM-nya akan memiliki properti

<input type="text" autofocus>

9 yang menautkan kembali ke elemen DOM formulir. Elemen

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

3, pada gilirannya, memiliki properti yang disebut

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

1 yang berisi kumpulan bidang seperti array di dalamnya

Atribut

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

_2 bidang formulir menentukan cara nilainya akan diidentifikasi saat formulir dikirimkan. Itu juga dapat digunakan sebagai nama properti saat mengakses properti

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

1 formulir, yang berfungsi baik sebagai objek seperti array (dapat diakses dengan nomor) dan peta (dapat diakses dengan nama)

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

Sebuah tombol dengan atribut

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

5 dari

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

5 akan, ketika ditekan, menyebabkan formulir dikirimkan. Menekan Enter saat bidang formulir difokuskan memiliki efek yang sama

Mengirimkan formulir biasanya berarti browser menavigasi ke halaman yang ditunjukkan oleh atribut

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

6 formulir, menggunakan permintaan

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

7 atau

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

8. Namun sebelum itu terjadi, peristiwa

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

_9 dipicu. Acara ini dapat ditangani oleh JavaScript, dan penangan dapat mencegah perilaku default dengan memanggil

<button>I'm all right</button>
<button disabled>I'm out</button>

0 pada objek acara

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

Mencegat

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

9 acara di JavaScript memiliki berbagai kegunaan. Kami dapat menulis kode untuk memverifikasi bahwa nilai yang dimasukkan pengguna masuk akal dan segera menampilkan pesan kesalahan alih-alih mengirimkan formulir saat tidak. Atau kita dapat menonaktifkan cara biasa mengirimkan formulir seluruhnya, seperti pada contoh sebelumnya, dan meminta program kita menangani input, kemungkinan menggunakan

<button>I'm all right</button>
<button disabled>I'm out</button>

2 untuk mengirimkannya ke server tanpa memuat ulang halaman

Bidang teks

Bidang yang dibuat oleh

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

4 tag dengan jenis

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

7 atau

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

8, serta

<button>I'm all right</button>
<button disabled>I'm out</button>

6 tag, berbagi antarmuka umum. Elemen DOM mereka memiliki properti

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_7 yang menyimpan konten mereka saat ini sebagai nilai string. Menyetel properti ini ke string lain akan mengubah konten bidang

Properti

<button>I'm all right</button>
<button disabled>I'm out</button>

_8 dan

<button>I'm all right</button>
<button disabled>I'm out</button>

9 bidang teks memberi kita informasi tentang kursor dan pemilihan dalam teks. Saat tidak ada yang dipilih, kedua properti ini memiliki angka yang sama, yang menunjukkan posisi kursor. Misalnya, 0 menunjukkan awal teks, dan 10 menunjukkan kursor setelah karakter ke-10. Saat bagian dari bidang dipilih, kedua properti akan berbeda, memberi kita awal dan akhir dari teks yang dipilih. Seperti

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_7, properti ini juga dapat ditulis ke

Sebagai contoh, bayangkan Anda sedang menulis artikel tentang Khasekhemwy tetapi kesulitan mengeja namanya. Kode berikut menyambungkan tag

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_4 dengan event handler yang, saat Anda menekan F2, menyisipkan string "Khasekhemwy" untuk Anda

<textarea></textarea>
<script>
  var textarea = document.querySelector("textarea");
  textarea.addEventListener("keydown", function(event) {
    // The key code for F2 happens to be 113
    if (event.keyCode == 113) {
      replaceSelection(textarea, "Khasekhemwy");
      event.preventDefault();
    }
  });
  function replaceSelection(field, word) {
    var from = field.selectionStart, to = field.selectionEnd;
    field.value = field.value.slice(0, from) + word +
                  field.value.slice(to);
    // Put the cursor after the word
    field.selectionStart = field.selectionEnd =
      from + word.length;
  }
</script>

Fungsi

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

_2 menggantikan bagian yang dipilih saat ini dari konten bidang teks dengan kata yang diberikan, lalu memindahkan kursor setelah kata tersebut sehingga pengguna dapat terus mengetik

Acara

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_9 untuk bidang teks tidak diaktifkan setiap kali ada sesuatu yang diketik. Sebaliknya, itu menyala ketika bidang kehilangan fokus setelah kontennya diubah. Untuk segera menanggapi perubahan dalam bidang teks, Anda harus mendaftarkan penangan untuk peristiwa

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

4 sebagai gantinya, yang aktif setiap kali pengguna mengetik karakter, menghapus teks, atau memanipulasi konten bidang

Contoh berikut menampilkan bidang teks dan penghitung yang menunjukkan panjang teks yang dimasukkan saat ini

<textarea>
one
two
three
</textarea>

Kotak centang dan tombol radio

Bidang kotak centang adalah toggle biner sederhana. Nilainya dapat diekstraksi atau diubah melalui properti

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

5, yang memegang nilai Boolean

<textarea>
one
two
three
</textarea>

Tag

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

6 digunakan untuk mengaitkan sepotong teks dengan kolom input. Atribut

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

_7 harus merujuk ke

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

8 dari bidang. Mengklik label akan mengaktifkan bidang, yang memfokuskannya dan mengubah nilainya saat itu adalah kotak centang atau tombol radio

Tombol radio mirip dengan kotak centang, tetapi secara implisit ditautkan ke tombol radio lain dengan atribut

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

2 yang sama sehingga hanya satu dari tombol tersebut yang dapat aktif kapan saja

<textarea>
one
two
three
</textarea>

Metode

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

_0 memberi kita semua elemen dengan atribut

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

2 yang diberikan. Contoh loop di atasnya (dengan loop

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

7 reguler, bukan

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

3, karena koleksi yang dikembalikan bukan array nyata) dan mendaftarkan event handler untuk setiap elemen. Ingatlah bahwa objek acara memiliki properti

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

_4 yang mengacu pada elemen yang memicu acara tersebut. Ini sering berguna dalam penangan acara seperti ini, yang akan dipanggil pada elemen yang berbeda dan memerlukan beberapa cara untuk mengakses target saat ini

Pilih bidang

Pilih bidang secara konseptual mirip dengan tombol radio—mereka juga memungkinkan pengguna untuk memilih dari serangkaian opsi. Namun jika tombol radio menempatkan tata letak opsi di bawah kendali kami, tampilan tag

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

8 ditentukan oleh browser

Bidang pilih juga memiliki varian yang lebih mirip dengan daftar kotak centang, daripada kotak radio. Saat diberi atribut

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

6, tag

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

8 akan memungkinkan pengguna untuk memilih sejumlah opsi, bukan hanya satu opsi

<textarea>
one
two
three
</textarea>

Ini akan, di sebagian besar browser, tampil berbeda dari bidang pilih non-

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

6, yang umumnya digambar sebagai kontrol tarik-turun yang menampilkan opsi hanya saat Anda membukanya

Atribut

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

_9 ke tag

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

8 digunakan untuk mengatur jumlah opsi yang terlihat pada saat yang sama, yang memberi Anda kontrol eksplisit atas tampilan drop-down. Misalnya, menyetel atribut

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

_9 ke

<textarea></textarea>
<script>
  var textarea = document.querySelector("textarea");
  textarea.addEventListener("keydown", function(event) {
    // The key code for F2 happens to be 113
    if (event.keyCode == 113) {
      replaceSelection(textarea, "Khasekhemwy");
      event.preventDefault();
    }
  });
  function replaceSelection(field, word) {
    var from = field.selectionStart, to = field.selectionEnd;
    field.value = field.value.slice(0, from) + word +
                  field.value.slice(to);
    // Put the cursor after the word
    field.selectionStart = field.selectionEnd =
      from + word.length;
  }
</script>

2 akan membuat bidang menampilkan tiga baris, apakah opsi

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

6 diaktifkan atau tidak

Setiap

<textarea></textarea>
<script>
  var textarea = document.querySelector("textarea");
  textarea.addEventListener("keydown", function(event) {
    // The key code for F2 happens to be 113
    if (event.keyCode == 113) {
      replaceSelection(textarea, "Khasekhemwy");
      event.preventDefault();
    }
  });
  function replaceSelection(field, word) {
    var from = field.selectionStart, to = field.selectionEnd;
    field.value = field.value.slice(0, from) + word +
                  field.value.slice(to);
    // Put the cursor after the word
    field.selectionStart = field.selectionEnd =
      from + word.length;
  }
</script>

_4 tag memiliki nilai. Nilai ini dapat ditentukan dengan atribut

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

7, tetapi jika tidak diberikan, teks di dalam opsi akan dihitung sebagai nilai opsi. Properti

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_7 dari elemen

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

8 mencerminkan opsi yang saat ini dipilih. Untuk bidang

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

6, properti ini tidak berarti banyak karena hanya akan memberikan nilai dari salah satu opsi yang dipilih saat ini

Tag

<textarea></textarea>
<script>
  var textarea = document.querySelector("textarea");
  textarea.addEventListener("keydown", function(event) {
    // The key code for F2 happens to be 113
    if (event.keyCode == 113) {
      replaceSelection(textarea, "Khasekhemwy");
      event.preventDefault();
    }
  });
  function replaceSelection(field, word) {
    var from = field.selectionStart, to = field.selectionEnd;
    field.value = field.value.slice(0, from) + word +
                  field.value.slice(to);
    // Put the cursor after the word
    field.selectionStart = field.selectionEnd =
      from + word.length;
  }
</script>

_4 untuk bidang

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

8 dapat diakses sebagai objek seperti array melalui properti

<textarea>
one
two
three
</textarea>

01 bidang. Setiap opsi memiliki properti yang disebut

<textarea>
one
two
three
</textarea>

_02, yang menunjukkan apakah opsi tersebut sedang dipilih. Properti juga dapat ditulis untuk memilih atau membatalkan pilihan

Contoh berikut mengekstrak nilai yang dipilih dari bidang pilih

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

6 dan menggunakannya untuk menyusun bilangan biner dari masing-masing bit. Tahan Ctrl (atau Command di Mac) untuk memilih beberapa opsi

<textarea>
one
two
three
</textarea>

Bidang file

Bidang file awalnya dirancang sebagai cara untuk mengunggah file dari mesin browser melalui formulir. Di browser modern, mereka juga menyediakan cara untuk membaca file semacam itu dari program JavaScript. Lapangan bertindak sebagai penjaga gerbang. Skrip tidak bisa begitu saja mulai membaca file pribadi dari komputer pengguna, tetapi jika pengguna memilih file di bidang seperti itu, browser menafsirkan tindakan itu berarti bahwa skrip dapat membaca file tersebut.

Bidang file biasanya terlihat seperti tombol berlabel sesuatu seperti "pilih file" atau "jelajahi", dengan informasi tentang file yang dipilih di sebelahnya

<textarea>
one
two
three
</textarea>

Properti

<textarea>
one
two
three
</textarea>

_04 dari elemen bidang file adalah objek mirip-array (sekali lagi, bukan larik nyata) yang berisi file yang dipilih di bidang. Ini awalnya kosong. Alasan mengapa tidak ada properti

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_2 adalah karena bidang file juga mendukung atribut

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

6, yang memungkinkan untuk memilih beberapa file sekaligus

Objek dalam properti

<textarea>
one
two
three
</textarea>

_04 memiliki properti seperti

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

2 (nama file),

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

9 (ukuran file dalam byte), dan

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

5 (jenis media file, seperti

<textarea>
one
two
three
</textarea>

11 atau

<textarea>
one
two
three
</textarea>

12)

Yang tidak dimilikinya adalah properti yang berisi konten file. Mendapatkan itu sedikit lebih terlibat. Karena membaca file dari disk dapat memakan waktu, antarmuka harus asinkron untuk menghindari pembekuan dokumen. Anda dapat menganggap konstruktor

<textarea>
one
two
three
</textarea>

13 mirip dengan

<button>I'm all right</button>
<button disabled>I'm out</button>

2 tetapi untuk file

<textarea>
one
two
three
</textarea>

Membaca file dilakukan dengan membuat objek

<textarea>
one
two
three
</textarea>

_13, mendaftarkan event handler

<textarea>
one
two
three
</textarea>

16 untuknya, dan memanggil metode

<textarea>
one
two
three
</textarea>

17, memberikannya file yang ingin kita baca. Setelah pemuatan selesai, properti

<textarea>
one
two
three
</textarea>

18 pembaca berisi konten file

Contoh ini menggunakan

<textarea>
one
two
three
</textarea>

19 untuk mengulang array karena dalam loop normal akan terasa canggung untuk mendapatkan objek

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

2 dan

<textarea>
one
two
three
</textarea>

21 yang benar dari event handler. Variabel akan dibagi oleh semua iterasi dari loop

<textarea>
one
two
three
</textarea>

_13s juga memicu peristiwa

<textarea>
one
two
three
</textarea>

23 saat membaca file gagal karena alasan apa pun. Objek kesalahan itu sendiri akan berakhir di properti

<textarea>
one
two
three
</textarea>

24 pembaca. Jika Anda tidak ingin mengingat detail antarmuka asinkron lain yang tidak konsisten, Anda dapat membungkusnya dalam

<textarea>
one
two
three
</textarea>

25 (lihat ) seperti ini

<textarea>
one
two
three
</textarea>

Dimungkinkan untuk membaca hanya sebagian dari file dengan memanggil

<textarea>
one
two
three
</textarea>

26 di atasnya dan meneruskan hasilnya (yang disebut objek blob) ke pembaca file

Menyimpan data sisi klien

Halaman HTML sederhana dengan sedikit JavaScript dapat menjadi media yang bagus untuk “aplikasi mini”—program pembantu kecil yang mengotomatiskan hal-hal sehari-hari. Dengan menghubungkan beberapa bidang formulir dengan penangan acara, Anda dapat melakukan apa saja mulai dari mengonversi antara derajat Celcius dan Fahrenheit hingga menghitung kata sandi dari kata sandi utama dan nama situs web

Ketika aplikasi semacam itu perlu mengingat sesuatu di antara sesi, Anda tidak dapat menggunakan variabel JavaScript karena variabel tersebut dibuang setiap kali halaman ditutup. Anda dapat menyiapkan server, menyambungkannya ke Internet, dan membuat aplikasi Anda menyimpan sesuatu di sana. Kita akan melihat bagaimana melakukannya di. Tetapi ini menambah banyak pekerjaan dan kerumitan ekstra. Terkadang cukup menyimpan data di browser saja. Tapi bagaimana caranya?

Anda dapat menyimpan data string dengan cara yang bertahan dari pemuatan ulang halaman dengan meletakkannya di objek

<textarea>
one
two
three
</textarea>

27. Objek ini memungkinkan Anda untuk mengarsipkan nilai string di bawah nama (juga string), seperti dalam contoh ini

<textarea>
one
two
three
</textarea>

Nilai di

<textarea>
one
two
three
</textarea>

_27 bertahan sampai ditimpa, dihapus dengan

<textarea>
one
two
three
</textarea>

29, atau pengguna menghapus data lokal mereka

Situs dari domain yang berbeda mendapatkan kompartemen penyimpanan yang berbeda. Itu berarti data yang disimpan di

<textarea>
one
two
three
</textarea>

_27 oleh situs web tertentu, pada prinsipnya, hanya dapat dibaca (dan ditimpa) oleh skrip di situs yang sama

Peramban juga memberlakukan batasan ukuran data yang dapat disimpan situs di

<textarea>
one
two
three
</textarea>

27, biasanya dalam urutan beberapa megabita. Pembatasan itu, bersama dengan fakta bahwa mengisi hard drive orang dengan sampah tidak terlalu menguntungkan, mencegah fitur ini menghabiskan terlalu banyak ruang

Kode berikut mengimplementasikan aplikasi pencatat sederhana. Itu membuat catatan pengguna sebagai objek, mengaitkan judul catatan dengan string konten. Objek ini dikodekan sebagai JSON dan disimpan di

<textarea>
one
two
three
</textarea>

27. Pengguna dapat memilih catatan dari bidang

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_8 dan mengubah teks catatan itu menjadi

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

4. Catatan dapat ditambahkan dengan mengklik tombol

<textarea>
one
two
three
</textarea>

Skrip menginisialisasi variabel

<textarea>
one
two
three
</textarea>

_35 ke nilai yang disimpan di

<textarea>
one
two
three
</textarea>

27 atau, jika tidak ada, ke objek sederhana dengan hanya catatan

<textarea>
one
two
three
</textarea>

37 kosong di dalamnya. Membaca bidang yang tidak ada dari

<textarea>
one
two
three
</textarea>

_27 akan menghasilkan

<textarea>
one
two
three
</textarea>

39. Melewati

<textarea>
one
two
three
</textarea>

_39 ke

<textarea>
one
two
three
</textarea>

41 akan membuatnya mengurai string

<textarea>
one
two
three
</textarea>

42 dan mengembalikan

<textarea>
one
two
three
</textarea>

39. Dengan demikian, operator

<textarea>
one
two
three
</textarea>

_44 dapat digunakan untuk memberikan nilai default dalam situasi seperti ini

Setiap kali data catatan berubah (ketika catatan baru ditambahkan atau catatan yang ada diubah), fungsi

<textarea>
one
two
three
</textarea>

45 dipanggil untuk memperbarui bidang penyimpanan. Jika aplikasi ini dimaksudkan untuk menangani ribuan catatan, bukan segelintir, ini akan menjadi terlalu mahal, dan kami harus menemukan cara yang lebih rumit untuk menyimpannya, seperti memberi masing-masing catatan tempat penyimpanannya sendiri.

Saat pengguna menambahkan catatan baru, kode harus memperbarui bidang teks secara eksplisit, meskipun bidang

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

8 memiliki penangan

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

9 yang melakukan hal yang sama. Hal ini diperlukan karena peristiwa

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_9 hanya diaktifkan saat pengguna mengubah nilai bidang, bukan saat skrip melakukannya

Ada objek lain yang mirip dengan

<textarea>
one
two
three
</textarea>

_27 disebut

<textarea>
one
two
three
</textarea>

50. Perbedaan antara keduanya adalah bahwa konten

<textarea>
one
two
three
</textarea>

50 dilupakan di akhir setiap sesi, yang bagi sebagian besar browser berarti setiap kali browser ditutup

Ringkasan

HTML dapat mengekspresikan berbagai jenis bidang formulir, seperti bidang teks, kotak centang, bidang pilihan ganda, dan pemilih file

Bidang tersebut dapat diperiksa dan dimanipulasi dengan JavaScript. Mereka memecat peristiwa

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

9 saat diubah, peristiwa

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

4 saat teks diketik, dan berbagai peristiwa keyboard. Peristiwa ini memungkinkan kami untuk mengetahui saat pengguna berinteraksi dengan bidang. Properti seperti

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

_7 (untuk bidang teks dan pilih) atau

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

5 (untuk kotak centang dan tombol radio) digunakan untuk membaca atau menyetel konten bidang

Saat formulir dikirimkan, peristiwa

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

_9 akan aktif. Penangan JavaScript dapat memanggil

<button>I'm all right</button>
<button disabled>I'm out</button>

_0 pada acara itu untuk mencegah pengiriman terjadi. Elemen bidang formulir tidak harus dibungkus dengan

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

3 tag

Saat pengguna telah memilih file dari sistem file lokal mereka di bidang pemilih file, antarmuka

<textarea>
one
two
three
</textarea>

13 dapat digunakan untuk mengakses konten file ini dari program JavaScript

Objek

<textarea>
one
two
three
</textarea>

_27 dan

<textarea>
one
two
three
</textarea>

50 dapat digunakan untuk menyimpan informasi dengan cara yang bertahan dari pemuatan ulang halaman. Yang pertama menyimpan data selamanya (atau hingga pengguna memutuskan untuk menghapusnya), dan yang kedua menyimpannya hingga browser ditutup

Latihan

Meja kerja JavaScript

Bangun antarmuka yang memungkinkan orang mengetik dan menjalankan potongan kode JavaScript

Letakkan tombol di sebelah bidang

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

4, yang ketika ditekan, menggunakan konstruktor

<textarea>
one
two
three
</textarea>

63 yang kita lihat untuk membungkus teks dalam suatu fungsi dan menyebutnya. Ubah nilai kembalian fungsi, atau kesalahan apa pun yang ditimbulkannya, menjadi string dan tampilkan setelah bidang teks

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

Gunakan

<textarea>
one
two
three
</textarea>

_64 atau

<textarea>
one
two
three
</textarea>

65 untuk mendapatkan akses ke elemen yang ditentukan dalam HTML Anda. Penangan kejadian untuk

<textarea>
one
two
three
</textarea>

_66 atau

<textarea>
one
two
three
</textarea>

67 kejadian pada tombol bisa mendapatkan properti

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

7 dari bidang teks dan memanggil

<textarea>
one
two
three
</textarea>

69 di atasnya

Pastikan Anda menggabungkan panggilan ke

<textarea>
one
two
three
</textarea>

_69 dan panggilan ke hasilnya dalam blok

<textarea>
one
two
three
</textarea>

71 sehingga Anda dapat menangkap pengecualian yang dihasilkannya. Dalam hal ini, kami benar-benar tidak tahu jenis pengecualian apa yang kami cari, jadi tangkap semuanya

Properti

<textarea>
one
two
three
</textarea>

_72 dari elemen keluaran dapat digunakan untuk mengisinya dengan pesan string. Atau, jika Anda ingin mempertahankan konten lama, buat simpul teks baru menggunakan

<textarea>
one
two
three
</textarea>

73 dan tambahkan ke elemen. Ingatlah untuk menambahkan karakter baris baru di akhir sehingga tidak semua keluaran muncul dalam satu baris

Pelengkapan otomatis

Perluas bidang teks sehingga saat pengguna mengetik, daftar nilai yang disarankan ditampilkan di bawah bidang. Anda memiliki larik nilai yang mungkin tersedia dan harus menunjukkan nilai yang dimulai dengan teks yang diketik. Saat saran diklik, ganti nilai bidang teks saat ini dengannya

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

Acara terbaik untuk memperbarui daftar saran adalah

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  var form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

4 karena itu akan langsung diaktifkan ketika konten bidang diubah

Kemudian lewati array istilah dan lihat apakah mereka mulai dengan string yang diberikan. Misalnya, Anda dapat memanggil

<textarea>
one
two
three
</textarea>

75 dan melihat apakah hasilnya nol. Untuk setiap string yang cocok, tambahkan elemen ke saran

<textarea>
one
two
three
</textarea>

76. Anda mungkin juga harus mengosongkannya setiap kali Anda mulai memperbarui saran, misalnya dengan menyetel

<textarea>
one
two
three
</textarea>

72 ke string kosong

Anda bisa menambahkan event handler

<textarea>
one
two
three
</textarea>

_66 ke setiap elemen saran atau menambahkan satu saja ke

<textarea>
one
two
three
</textarea>

76 luar yang menampungnya dan melihat properti

<form action="example/submit.html">
  Value: <input type="text" name="value">
  <button type="submit">Save</button>
</form>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    console.log("Saving value", form.elements.value.value);
    event.preventDefault();
  });
</script>

_4 dari acara tersebut untuk mengetahui saran mana yang diklik

Untuk mengeluarkan teks saran dari simpul DOM, Anda dapat melihat

<textarea>
one
two
three
</textarea>

72 atau menyetel atribut untuk menyimpan teks secara eksplisit saat Anda membuat elemen

Permainan Kehidupan Conway

Conway's Game of Life adalah simulasi sederhana yang menciptakan "kehidupan" buatan pada sebuah kisi, yang setiap selnya hidup atau tidak. Setiap generasi (giliran), aturan berikut diterapkan

Setiap sel hidup dengan kurang dari dua atau lebih dari tiga tetangga hidup akan mati
Setiap sel hidup dengan dua atau tiga tetangga hidup akan hidup sampai generasi berikutnya
Setiap sel mati dengan tepat tiga tetangga hidup menjadi sel hidup

Tetangga didefinisikan sebagai setiap sel yang berdekatan, termasuk sel yang berdekatan secara diagonal

Perhatikan bahwa aturan ini diterapkan ke seluruh kisi sekaligus, bukan satu kotak sekaligus. Itu berarti penghitungan tetangga didasarkan pada situasi di awal generasi, dan perubahan yang terjadi pada sel tetangga selama generasi ini seharusnya tidak memengaruhi keadaan baru sel tertentu.

Terapkan game ini menggunakan struktur data mana pun yang menurut Anda sesuai. Gunakan

<textarea>
one
two
three
</textarea>

_82 untuk mengisi grid dengan pola acak pada awalnya. Menampilkannya sebagai petak bidang kotak centang, dengan tombol di sebelahnya untuk melanjutkan ke generasi berikutnya. Saat pengguna mencentang atau menghapus centang pada kotak centang, perubahannya harus disertakan saat menghitung generasi berikutnya

<select>
  <option>Pancakes</option>
  <option>Pudding</option>
  <option>Ice cream</option>
</select>

Untuk mengatasi masalah terjadinya perubahan secara konseptual pada saat yang sama, cobalah untuk melihat perhitungan generasi sebagai fungsi murni, yang mengambil satu kisi dan menghasilkan kisi baru yang mewakili giliran berikutnya.

Mewakili kisi dapat dilakukan dengan salah satu cara yang ditunjukkan di Bab dan. Menghitung tetangga langsung dapat dilakukan dengan dua loop bersarang, mengulang pada koordinat yang berdekatan. Berhati-hatilah untuk tidak menghitung sel di luar bidang dan abaikan sel di tengah, yang tetangganya sedang kita hitung

Membuat perubahan pada kotak centang berlaku pada generasi berikutnya dapat dilakukan dengan dua cara. Penangan kejadian dapat melihat perubahan ini dan memperbarui kisi saat ini untuk mencerminkannya, atau Anda dapat membuat kisi baru dari nilai di kotak centang sebelum menghitung giliran berikutnya

Jika Anda memilih untuk menggunakan event handler, Anda mungkin ingin melampirkan atribut yang mengidentifikasi posisi yang sesuai dengan setiap kotak centang sehingga mudah untuk mengetahui sel mana yang akan diubah

Untuk menggambar kisi kotak centang, Anda dapat menggunakan elemen

<textarea>
one
two
three
</textarea>

83 (lihat ) atau cukup letakkan semuanya dalam elemen yang sama dan letakkan elemen

<textarea>
one
two
three
</textarea>

84 (jeda baris) di antara baris

Bagaimana Anda bisa mengirimkan formulir menggunakan JavaScript?

Saat kita mengklik tautan, fungsi submitForm() akan dijalankan. Fungsi ini akan mendapatkan objek elemen menggunakan metode DOM getElementById() dengan meneruskan form id ke metode ini, kemudian formulir akan dikirimkan menggunakan metode submit(). Contoh. Buat formulir dan kirimkan menggunakan pendekatan di atas

Bagaimana cara mengumpulkan data formulir dengan JavaScript?

Metode serializeArray() membuat larik objek (nama dan nilai) dengan membuat serialisasi nilai formulir . Metode ini dapat digunakan untuk mendapatkan data formulir. Parameter. Itu tidak menerima parameter apa pun. Nilai Pengembalian. Ini mengembalikan semua nilai yang ada di dalam kolom input.

Bagaimana cara menangani pengiriman formulir dalam JavaScript?

Pengiriman Formulir JavaScript. Acara Penyerahan Dasar. Validasi Formulir Dasar. Kode JavaScript untuk Memvalidasi Email. .

Daftar dapat diatur dengan font-size dan font-family yang sesuai

Warna RGB latar belakang. #D8F1F8

Fokus input dan area kirim dapat ditentukan sesuai kebutuhan

Bagaimana cara mendapatkan nilai pengiriman formulir dalam JavaScript?

Gunakan FormData Constructor untuk mendengarkan acara pengiriman formulir dan dapatkan nilainya saat kami mengirim . Kami pertama kali mendapatkan elemen formulir dengan dokumen. querySelector. Kemudian kami memanggil addEventListener untuk menambahkan pendengar acara kirim ke formulir.