Optimize Ediciler için JavaScript: Giriş Alanlarıyla Çalışma

Bir düğmenin renginden daha fazlasını mı test etmek istiyorsunuz? Ardından, JavaScript öğrenmeniz gerekir. Web sitenizde kazanan deneyler oluşturmak için JavaScript'i kullanmanın adım adım pratik yollarını kapsayan bir dizi başlattım.

Dizideki her makale, varsayımsal durumlar olarak web sitelerine en iyi uygulamalar uygulanarak gösterilen farklı bir JavaScript yöntemini kapsar.

İş Durumu: UX'i Geliştirmek için Giriş Alanlarını Optimize Edin

Bu bölüm için varsayımsal durumumuz, kullanıcı deneyimini geliştirmek için girdi alanlarıyla çalışmakla ilgilidir.

Araştırmalar, kullanıcıların katılım formlarını sinir bozucu bulma eğiliminde olduğunu göstermiştir. Etkiyi azaltmak için değiştirmek istediğimiz belirli girdi alanlarını belirliyoruz.

Bu varsayımsal senaryoda, aşağıdaki hipoteze ulaşırız:

Bu hipotezi test etmek için aşağıdaki değişiklikleri uygulayacağız:

Deneyde Kullanılan Kod

Şimdi eğlenceli kısım için!

Değişikliği gerçekleştirmek için test sayfasında aşağıdaki JavaScript kodunu çalıştırıyoruz. Eylemde görmek için kendiniz deneyin!

 var testForm = document.querySelector(".testForm");
var firstNameInput = testForm.childNodes[3];
var emailInput = testForm.childNodes[8];
var maleRadio = document.getElementById("erkek");
var FemaleRadio = document.getElementById("female");
var rangeSlider = document.getElementsByClassName("kaydırıcı");
var googleSelector = document.getElementById("google");

function addPlaceholder(inputField, placeHolderText) {
  inputField.setAttribute("yer tutucu", placeHolderText);
}
addPlaceholder(firstNameInput, "Jeroen");
addPlaceholder(emailInput, "[email protected]");

function changeRadioSelection(eskiDüğme, yeniDüğme) {
  oldButton.removeAttribute("kontrol edildi");
  newButton.setAttribute("kontrol edildi", "kontrol edildi");
}
changeRadioSelection(maleRadio, FemaleRadio);

function changeRangeValue(aralık, değer) {
  aralık[0].setAttribute("değer", değer);
}
changeRangeValue(rangeSlider, "50");

function addExtraSelectOption(selectDiv, optionsName, optionsValue) {
  var newOption = document.createElement("OPTION");
  var newOptionNode = document.createTextNode(optionName);
  newOption.appendChild(newOptionNode);
  newOption.setAttribute("değer", seçenekValue);
  selectDiv.appendChild(newOption);
}
addExtraSelectOption(googleSelector, "Google E-Tablolar", "gs");

Kodun Dağılımı

1. Yeni Sözdizimi

Döküm, yukarıdaki örnekteki tüm yeni sözdiziminin üzerinden geçilerek başlar. Bu makale bir serinin parçası olduğundan, önceki makalelerdeki sözdiziminin tam belgelerini kontrol ettiğinizden emin olun.

.childNodes[index], bir dizi alt düğüm döndüren bir özelliktir. Dizideki belirli düğümlere bir dizin ile erişebilirsiniz. Bir dizideki düğüm öğeleri sıfırdan başlar. Dizideki ilk düğüme erişmek, parantezler arasına 0 koymanızı gerektirir.

Alt düğümleri seçmek için CSS seçici yerine bu özelliği kullanabilirsiniz. Bu özelliği kullanmanın ek bir yararı, metin düğümlerini seçmektir.

İşte bir örnek:

ChildNodes[0], H1 öğesini seçer ve alt öğelerini bir dizide toplar. Aşağıdaki diziyi döndürür:

 [childNode, childNode2, childNode3]

H1'deki tek çocuk metnin kendisidir. H1'in metni 0 dizinindedir. Metin düğümü, özellik tarafından döndürülür.

Document.getElementById(id), eşleşen bir id özniteliğine sahip bir öğeyi döndüren bir yöntemdir. Kimliği bir dize olarak iletmeniz gerekir. Bu örnek, querySelector yönteminin basit versiyonudur. Bu yöntemi tek bir kimlik için kullanabilirsiniz.

QuerySelector yönteminiz varsa, bunun neden var olduğunu kendinize sorabilirsiniz. Bu yöntem, JavaScript'in yaratıcısı, JavaScript'in önceki bir sürümünde getElementById yöntemini eklediği için mevcuttur. İçerik oluşturucular, öğeleri seçmeyi kolaylaştırmak için daha sonra querySelector yöntemini ekledi.

Çoğu tarayıcı, querySelector yöntemini desteklese de, çoğu tarayıcının bunları destekleyip desteklemediğini kontrol etmeye yardımcı olabilir.

Desteklenmeyen kod, eski bir tarayıcıdaki bir web sitesini bozabilir. JavaScript yöntemlerini kontrol etmek için mükemmel bir web sitesi caniuse.com'dur.

Document.getElementsByClassName(class), tüm belge içindeki belirli bir sınıfa sahip tüm öğeleri döndüren bir yöntemdir. Sınıfı bir dize olarak iletmeniz gerekir. Bir dizideki öğeleri döndürür.

Belgeyi başka bir öğeyle de değiştirebilirsiniz, böylece yalnızca seçimin alt öğelerine bakar. Bu yöntem gerçekten yardımcı olabilir çünkü daha verimlidir. Seçim olarak belge nesnesini kullanırsanız, belgenin tamamını kontrol etmesi gerekir.

ChildNodes yöntemi gibi, tek eşleşmeli bir dizi döndürür.

.removeAttribute(attribute), bir öğeden bir niteliği kaldıran bir yöntemdir. Özniteliğe eklenen değerleri kaldıracaksınız.

Öğe özniteliğe sahip olmadığında, yöntemi hatasız olarak yürütür. Özniteliği bir dize olarak iletmeniz gerekir.

2. Mantık

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

Bu kod satırında, formu testForm değişkenine atadık. Bunu querySelector metodu ile testForm sınıfını seçerek yapıyoruz.

 var firstNameInput = testForm.childNodes[3];

Ardından firstNameInput değişkenine first name giriş alanını atarız. Bunu, childNodes seçicisi ile dördüncü alt düğümü seçerek yapıyoruz. Üçüncü indeksin nasıl dördüncü pozisyon olduğuna dikkat edin.

 var emailInput = testForm.childNodes[8];

Burada mail giriş alanını emailInput değişkenine atadık. Giriş alanı, testForm değişkeninin 9. düğümüdür.

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

Bu satırda radyo butonunu male değeriyle atadık. Basitçe kimliğe göre seçmek için getElementById yöntemini kullanıyoruz.

 var FemaleRadio = document.getElementById("female");

Daha sonra dişi değerine sahip radyo butonunu getElementById yöntemiyle FemaleRadio değişkenine atadık.

 var rangeSlider = document.getElementsByClassName("kaydırıcı");

Burada, rangeSlider değişkenine kaydırıcı sınıfına sahip bir dizi eleman atarız. Bu yöntemi örnek olarak kullandım, ancak sadece bir querySelector yöntemini kullanmak daha kolay olurdu.

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

google sınıfı ile select giriş alanını googleSelector değişkenimize atayarak değişkenlerimizi tamamlıyoruz.

 function addPlaceholder(inputField, placeHolderText) {

Bu işlev, bir metin giriş alanına bir yer tutucu metin ekler. Giriş alanını ilk bağımsız değişken olarak ve yer tutucu metni ikinci bağımsız değişkende bir dize olarak iletebilirsiniz.

 inputField.setAttribute("yer tutucu", placeHolderText);

Yer tutucu özniteliğini giriş metni alanına ekleyerek bir yer tutucu metni görüntülersiniz. Bu özniteliği ve değeri setAttribute metodu ile ekleyebiliriz.

 }

Kıvrımlı ayraç ilk işlevimizi kapatır.

 addPlaceholder(firstNameInput, "Jeroen");

Firstname giriş alanına yer tutucu olarak örnek bir isim eklemek için ilk defa fonksiyonu çağırıyoruz.

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

E-posta giriş alanına örnek bir mail adresi eklemek için fonksiyonu ikinci kez çağırıyoruz.

İşlevler, kodu paketlemek ve diğer geliştiriciler için anlaşılır kılmak için kullanışlı olabilir. Dikkatli bir gözünüz varsa, sadece şu iki kod satırını kullanarak işlevi tamamen atlayabileceğimizi fark etmişsinizdir:

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

Bir programcı olarak ne zaman bir fonksiyon yapmanız gerektiğini fark etmeniz ve sadece basit bir satır kullanmanız önemlidir. Bu örnek bana üç satır kod kazandırabilirdi. Daha az kod genellikle yükleme hızı için daha iyidir.

 function changeRadioSelection(eskiDüğme, yeniDüğme) {

İkinci işlev, eski radyo düğmesinin seçimini kaldırır ve yeni bir radyo düğmesi seçer. Bu sayede sayfa yüklenirken varsayılan olarak işaretli olan butonu değiştirebiliyoruz.

 oldButton.removeAttribute("kontrol edildi");

Kontrol edilen öznitelik, kontrol edilen radyo düğmesine karar verir. Bir eleman kontrol edilmiş = ”kontrol edildi” içerdiğinde, ekranda kontrol edilmiş olarak görünecektir. Denetlenen durumu kaldırmak için removeAttribute yöntemini kullanırız. Bunu oldButton değişkenimizde çağırıyoruz.

 newButton.setAttribute("kontrol edildi", "kontrol edildi");

Ardından, varsayılan seçimi değiştirmek için newButton değişkenimize aynı özniteliği ve değeri koyarız.

 }

Bu küme ayracı ikinci işlevimizi sonlandırıyor.

 changeRadioSelection(maleRadio, FemaleRadio);

Radyo düğmelerimizin varsayılan değerini dişi olarak değiştirmek için işlevi bir kez çağırıyoruz.

Burada sadece şunu yazarak 2 satırlık kodu tekrar kaydedebilirdik:

 maleRadio.removeAttribute("kontrol edildi");
dişiRadio.setAttribute("kontrol edildi", "kontrol edildi");

İşlevleri kullanmayı seviyorum çünkü gelecekte kodu hızla genişletmeme izin veriyor. Örneğin, bunu bir dizi ile 20 düğme için yaptığınızı hayal edin.

Test geliştirme ile kodumuzun genellikle geçici olduğunu biliyoruz, bu yüzden bence %100 mükemmellik bir gereklilik değil.

 function changeRangeValue(aralık, değer) {

Bu işlev, bir aralık kaydırıcısının varsayılan değerini değiştirir. İlk argüman olarak aralık öğesini girersiniz. İkinci argüman, aralığın sınırları içinde istediğiniz değeri içeren bir dize olmalıdır.

Menzilimizin limitinin 50 olduğunu biliyoruz çünkü max=”50″ özniteliğine sahip. 0'dan başlar çünkü min=”0″ özelliğine sahiptir. setAttribute yöntemini kullanarak JavaScript ile bu sınırı artırabilirsiniz.

 aralık[0].setAttribute("değer", değer);

Aralığı getElementsByClassName yöntemiyle seçtik; bu, diziye erişmek için dizideki belirli bir öğeyi seçmemiz gerektiği anlamına gelir. Değişkenden sonra [0] ekleyerek dizideki ilk öğeye erişebiliriz. Bu kod satırı, aralığın değer niteliğini belirleyecektir.

 }

Bu küme ayracı üçüncü işlevi sona erdirir.

 changeRangeValue(rangeSlider, "50");

Ardından, aralığın varsayılan değerini 50 olarak değiştirmek için işlevimizi çağırırız.

 function addExtraSelectOption(selectDiv, optionsName, optionsValue) {

Bu işlev, açılır seçim kutumuza bir seçenek öğesi ekler. İlk bağımsız değişkende, seçim öğesini aktarırsınız. Bu, tüm seçenek öğelerinin ebeveynidir.

İkinci argüman, yeni seçeneğin adını bir dize olarak alır. Üçüncü argüman, yeni seçeneğimizin değerini bir dizge olarak alır. Değer genellikle arka uca veri gönderilirken kullanılır, bu nedenle bunu basit bir değer yapmak önemlidir. Burada tüm seçeneklerimize kısa değerli kısaltmaları nasıl eklediğimi görebiliriz.

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

İlk olarak createElement yöntemiyle seçenek öğesini oluşturuyoruz ve onu newOption değişkenine atadık.

 var newOptionNode = document.createTextNode(optionName);

Ardından optionsName değişkeniyle bir metin düğümü oluşturur ve onu newOptionNode değişkenine kaydederiz.

 newOption.appendChild(newOptionNode);

newOptionNode metin düğümümüzü newOption değişkenimize ekliyoruz.

 newOption.setAttribute("değer", seçenekValue);

Ardından setAttribute yöntemi ile yeni seçeneğimizin değerini ayarlıyoruz.

 selectDiv.appendChild(newOption);

Son olarak, yeni seçeneğimizi selectDiv değişkenine ekliyoruz. Şimdi DOM'da görünecek. Eklediğimiz için, seçenek açılır menüdeki son seçenek olacaktır.

 }

Kıvrımlı ayraç dördüncü işlevimizi sonlandırıyor.

 addExtraSelectOption(googleSelector, "Google E-Tablolar", "gs");

Yeni seçenek öğemizi açılır listemize eklemek için işlevimizi çağırıyoruz.

3. Egzersiz

JavaScript öğrenmenin en iyi yolu denemektir.

Diğer seçeneği seçmek için changeRadioSelection'ı kullanmanızı istiyorum. Ayrıca changeRangeValue yöntemiyle aralığın değerini 0 olarak değiştirmenizi istiyorum. Ve bana ne düşündüğünü bildirmek için bir mesaj at!

Anlayamıyor musun? LinkedIn'de bana bir mesaj gönderin, size yardımcı olayım!