JavaScript untuk Pengoptimal: Bekerja Dengan Bidang Masukan

Ingin menguji lebih dari sekadar warna tombol? Kemudian, Anda perlu belajar JavaScript. Saya memulai seri yang membahas cara praktis langkah demi langkah Anda dapat menggunakan JavaScript untuk menyiapkan eksperimen pemenang di situs web Anda.

Setiap artikel dalam seri ini mencakup metode JavaScript yang berbeda, diilustrasikan dengan menerapkan praktik terbaik ke situs web sebagai kasus hipotetis.

Kasus Bisnis: Optimalkan Bidang Masukan untuk Meningkatkan UX

Kasus hipotetis kami untuk bab ini adalah tentang bekerja dengan bidang input untuk meningkatkan pengalaman pengguna .

Penelitian telah menunjukkan bahwa pengguna cenderung menganggap formulir keikutsertaan membuat frustrasi. Untuk mengurangi dampak, kami mengidentifikasi bidang input tertentu yang ingin kami ubah.

Dalam skenario hipotetis ini, kita sampai pada hipotesis berikut:

Untuk menguji hipotesis ini, kita akan menerapkan perubahan di bawah ini:

Kode yang Digunakan dalam Percobaan

Sekarang untuk bagian yang menyenangkan!

Untuk menjalankan perubahan, kami menjalankan kode JavaScript berikut di halaman pengujian. Cobalah sendiri untuk melihatnya beraksi!

 var testForm = document.querySelector(".testForm");
var firstNameInput = testForm.childNodes[3];
var emailInput = testForm.childNodes[8];
var maleRadio = document.getElementById("pria");
var femaleRadio = document.getElementById("perempuan");
var rangeSlider = document.getElementsByClassName("slider");
var googleSelector = document.getElementById("google");

fungsi addPlaceholder(inputField, placeHolderText) {
  inputField.setAttribute("placeholder", placeHolderText);
}
addPlaceholder(firstNameInput, "Jeroen");
addPlaceholder(emailInput, "[email protected]");

fungsi changeRadioSelection(oldButton, newButton) {
  oldButton.removeAttribute("dicentang");
  newButton.setAttribute("dicentang", "dicentang");
}
changeRadioSelection(Radio pria, Radio wanita);

fungsi changeRangeValue(rentang, nilai) {
  range[0].setAttribute("nilai", nilai);
}
changeRangeValue(rangeSlider, "50");

function addExtraSelectOption(selectDiv, optionName, optionValue) {
  var newOption = document.createElement("OPSI");
  var newOptionNode = document.createTextNode(optionName);
  newOption.appendChild(newOptionNode);
  newOption.setAttribute("nilai", optionValue);
  pilihDiv.appendChild(Opsi baru);
}
addExtraSelectOption(googleSelector, "Google Spreadsheets", "gs");

Perincian Kode

1. Sintaks Baru

Perincian dimulai dengan membahas semua sintaks baru dalam contoh di atas. Karena artikel ini adalah bagian dari seri, pastikan Anda memeriksa dokumentasi lengkap sintaks di artikel sebelumnya.

.childNodes[index] adalah properti yang mengembalikan array node anak. Anda dapat mengakses node tertentu dalam array dengan indeks. Elemen simpul dalam array dimulai dari angka nol. Mengakses node pertama dalam array akan mengharuskan Anda untuk meletakkan 0 di antara tanda kurung.

Anda dapat menggunakan properti ini sebagai ganti pemilih CSS untuk memilih node anak. Manfaat tambahan menggunakan properti ini adalah memilih node teks.

Berikut ini contohnya:

ChildNodes[0] memilih elemen H1 dan mengumpulkan anak-anaknya dalam sebuah array. Ini mengembalikan array berikut:

 [childNode, childNode2, childNode3]

Satu-satunya anak di H1 adalah teks itu sendiri. Teks dari H1 berada pada indeks 0. Node teks dikembalikan oleh properti.

document.getElementById(id) adalah metode yang mengembalikan elemen yang memiliki atribut id yang cocok. Anda harus meneruskan id sebagai string. Contoh ini adalah versi sederhana dari metode querySelector. Anda dapat menggunakan metode ini untuk satu id.

Anda mungkin bertanya pada diri sendiri mengapa ini ada jika Anda memiliki metode querySelector. Metode ini ada karena pembuat JavaScript menambahkan metode getElementById di JavaScript versi sebelumnya. Pembuat menambahkan metode querySelector nanti untuk memudahkan pemilihan elemen.

Meskipun sebagian besar browser mendukung metode querySelector, ini dapat membantu untuk memeriksa apakah sebagian besar browser mendukungnya.

Kode yang tidak didukung dapat merusak situs web di browser lama. Situs web yang sangat baik untuk memeriksa metode JavaScript adalah caniuse.com.

document.getElementsByClassName(class) adalah metode yang mengembalikan semua elemen dengan kelas tertentu di dalam keseluruhan dokumen. Anda harus mewariskan kelas sebagai string. Ini mengembalikan elemen dalam array.

Anda juga dapat mengganti dokumen dengan elemen lain, sehingga hanya terlihat pada elemen anak pilihan. Cara ini bisa sangat membantu karena lebih efisien. Jika Anda menggunakan objek dokumen sebagai pilihan, perlu memeriksa seluruh dokumen.

Sama seperti metode childNodes, itu akan mengembalikan array dengan satu kecocokan.

.removeAttribute(attribute) adalah metode yang menghapus atribut dari suatu elemen. Anda akan menghapus nilai yang dilampirkan ke atribut.

Ketika elemen tidak memiliki atribut, itu akan mengeksekusi metode tanpa kesalahan. Anda harus mewariskan atribut sebagai string.

2. Logika

 var testForm = document.querySelector(".testForm");

Di baris kode ini, kami menetapkan formulir ke variabel testForm. Kami melakukan ini dengan memilih kelas testForm dengan metode querySelector.

 var firstNameInput = testForm.childNodes[3];

Kemudian, kami menetapkan bidang input nama depan ke variabel firstNameInput. Kami melakukan ini dengan memilih simpul anak keempat dengan pemilih childNodes. Perhatikan bagaimana indeks ketiga adalah posisi keempat.

 var emailInput = testForm.childNodes[8];

Di sini, kami menetapkan bidang input email ke variabel emailInput. Bidang input adalah simpul ke-9 dari variabel testForm.

 var maleRadio = document.getElementById("pria");

Di baris ini, kami menetapkan tombol radio dengan nilai male. Kami menggunakan metode getElementById untuk memilihnya dengan id secara sederhana.

 var femaleRadio = document.getElementById("perempuan");

Kemudian kita menetapkan radio button dengan nilai female ke variabel femaleRadio dengan metode getElementById.

 var rangeSlider = document.getElementsByClassName("slider");

Di sini, kami menetapkan array elemen dengan kelas slider ke variabel rangeSlider. Saya menggunakan metode ini sebagai contoh, tetapi akan lebih mudah menggunakan metode querySelector.

 var googleSelector = document.getElementById("google");

Kami menyelesaikan variabel kami dengan menetapkan bidang input pilih dengan kelas google ke variabel googleSelector kami.

 fungsi addPlaceholder(inputField, placeHolderText) {

Fungsi ini menambahkan teks placeholder ke bidang input teks. Anda dapat meneruskan bidang input sebagai argumen pertama dan teks placeholder sebagai string dalam argumen kedua.

 inputField.setAttribute("placeholder", placeHolderText);

Anda menampilkan teks placeholder dengan menambahkan atribut placeholder ke bidang teks input. Kita dapat menambahkan atribut dan nilai ini dengan metode setAttribute.

 }

Tanda kurung kurawal menutup fungsi pertama kita.

 addPlaceholder(firstNameInput, "Jeroen");

Kami memanggil fungsi pertama kali untuk menambahkan nama contoh sebagai pengganti ke bidang input nama depan.

 addPlaceholder(emailInput, "[email protected]");

Kami memanggil fungsi untuk kedua kalinya untuk menambahkan alamat email contoh ke bidang input email.

Fungsi dapat berguna untuk menggabungkan kode dan membuatnya dapat dimengerti oleh pengembang lain. Jika Anda memiliki mata yang tajam, Anda mungkin telah memperhatikan bahwa kami dapat melewatkan fungsi sama sekali hanya dengan menggunakan dua baris kode ini:

 firstNameInput.setAttribute("placeholder", "Jeroen");
emailInput.setAttribute("placeholder", "[email protected]");

Sangat penting sebagai programmer untuk memperhatikan ketika Anda perlu membuat fungsi dan hanya menggunakan baris sederhana. Contoh ini bisa menyelamatkan saya tiga baris kode. Lebih sedikit kode biasanya lebih baik untuk kecepatan memuat.

 fungsi changeRadioSelection(oldButton, newButton) {

Fungsi kedua menghapus pilihan tombol radio lama dan memilih tombol radio baru. Dengan cara ini, kita dapat mengubah tombol yang dicentang secara default saat halaman dimuat.

 oldButton.removeAttribute("dicentang");

Atribut yang dicentang memutuskan tombol radio yang dicentang. Ketika sebuah elemen berisi dicentang = "dicentang" itu akan muncul dicentang di layar. Kami menggunakan metode removeAttribute untuk menghapus status yang dicentang. Kami menyebutnya pada variabel oldButton kami.

 newButton.setAttribute("dicentang", "dicentang");

Kemudian kita cukup meletakkan atribut dan nilai yang sama ke variabel newButton kita untuk mengubah pilihan default.

 }

Tanda kurung kurawal ini mengakhiri fungsi kedua kita.

 changeRadioSelection(Radio pria, Radio wanita);

Kami memanggil fungsi sekali untuk mengubah nilai default tombol radio kami menjadi perempuan.

Di sini kita bisa menyimpan 2 baris kode lagi hanya dengan menulis ini:

 maleRadio.removeAttribute("dicentang");
femaleRadio.setAttribute("dicentang", "dicentang");

Saya suka menggunakan fungsi karena memungkinkan saya untuk memperluas kode dengan cepat di masa mendatang. Bayangkan melakukan ini untuk 20 tombol dengan array, misalnya.

Dengan pengembangan pengujian, kami tahu bahwa kode kami biasanya bersifat sementara, jadi menurut saya kesempurnaan 100% bukanlah persyaratan.

 fungsi changeRangeValue(rentang, nilai) {

Fungsi ini mengubah nilai default penggeser rentang. Anda memasukkan elemen rentang sebagai argumen pertama. Argumen kedua harus berupa string yang berisi nilai yang Anda inginkan dalam batas rentang.

Kita tahu bahwa batas jangkauan kita adalah 50 karena memiliki atribut max=”50″. Dimulai dari 0 karena memiliki atribut min="0″. Anda akan dapat meningkatkan batas ini dengan JavaScript dengan menggunakan metode setAttribute.

 range[0].setAttribute("nilai", nilai);

Kami memilih rentang dengan metode getElementsByClassName, yang berarti kami harus memilih item tertentu dalam array untuk mengaksesnya. Kita dapat mengakses item pertama dalam array dengan menambahkan [0] setelah variabel. Baris kode ini akan menetapkan atribut nilai rentang.

 }

Tanda kurung kurawal ini mengakhiri fungsi ketiga.

 changeRangeValue(rangeSlider, "50");

Kemudian kita memanggil fungsi kita untuk mengubah nilai default dari range menjadi 50.

 function addExtraSelectOption(selectDiv, optionName, optionValue) {

Fungsi ini menambahkan elemen opsi ke kotak pilihan drop-down kami. Dalam argumen pertama, Anda mewariskan elemen pilih. Ini adalah induk dari semua elemen opsi.

Argumen kedua mengambil nama opsi baru sebagai string. Argumen ketiga mengambil nilai opsi baru kami sebagai string. Nilai biasanya digunakan saat mengirim data ke backend, jadi penting untuk menjadikannya nilai yang sederhana. Di sini kita dapat melihat bagaimana saya menambahkan akronim bernilai pendek ke semua opsi kita.

 var newOption = document.createElement("OPSI");

Pertama, kita membuat elemen opsi dengan metode createElement dan menetapkannya ke variabel newOption.

 var newOptionNode = document.createTextNode(optionName);

Kemudian kita membuat simpul teks dengan variabel optionName dan menyimpannya ke variabel newOptionNode.

 newOption.appendChild(newOptionNode);

Kami menambahkan simpul teks newOptionNode kami ke variabel newOption kami.

 newOption.setAttribute("nilai", optionValue);

Kemudian kami menetapkan nilai opsi baru kami dengan metode setAttribute.

 pilihDiv.appendChild(Opsi baru);

Akhirnya, kami menambahkan opsi baru kami ke variabel selectDiv. Sekarang akan terlihat di DOM. Karena kami menambahkannya, opsi akan menjadi yang terakhir di dropdown.

 }

Tanda kurung kurawal mengakhiri fungsi keempat kita.

 addExtraSelectOption(googleSelector, "Google Spreadsheets", "gs");

Kami memanggil fungsi kami untuk menambahkan elemen opsi baru kami ke dropdown kami.

3. Latihan

Cara terbaik untuk mempelajari JavaScript adalah dengan mencobanya.

Saya ingin Anda menggunakan changeRadioSelection untuk memilih opsi lain . Saya juga ingin Anda mengubah nilai rentang menjadi 0 dengan metode changeRangeValue. Dan kirimi saya pesan untuk memberi tahu saya pendapat Anda!

Tidak bisa mengetahuinya? Kirimi saya pesan di LinkedIn dan saya akan membantu Anda!