최적화 프로그램을 위한 JavaScript: 입력 필드 작업

버튼의 색상 이상을 테스트하고 싶으십니까? 그런 다음 JavaScript를 배워야 합니다. 저는 JavaScript를 사용하여 웹사이트에서 성공적인 실험을 설정할 수 있는 실용적인 단계별 방법을 다루는 시리즈를 시작했습니다.

시리즈의 각 기사에서는 가상 사례로 웹사이트에 모범 사례를 적용하여 설명하는 다양한 JavaScript 방법을 다룹니다.

비즈니스 사례: UX 개선을 위해 입력 필드 최적화

이 장의 가상 사례는 사용자 경험을 개선하기 위해 입력 필드로 작업하는 것 입니다.

연구에 따르면 사용자는 수신 동의 양식을 실망시키는 경향이 있습니다. 영향을 완화하기 위해 변경하려는 특정 입력 필드를 식별합니다.

이 가상 시나리오에서 다음 가설에 도달합니다.

이 가설을 테스트하기 위해 아래 변경 사항을 적용합니다.

실험에 사용된 코드

이제 재미있는 부분을 위해!

변경 사항을 실행하기 위해 테스트 페이지에서 다음 JavaScript 코드를 실행합니다. 실제로 작동하는 모습을 직접 확인해보세요!

 var testForm = document.querySelector(".testForm");
var firstNameInput = testForm.childNodes[3];
var 이메일 입력 = testForm.childNodes[8];
var maleRadio = document.getElementById("남성");
var 여성 라디오 = document.getElementById("여성");
var rangeSlider = document.getElementsByClassName("슬라이더");
var googleSelector = document.getElementById("구글");

기능 addPlaceholder(inputField, placeHolderText) {
  inputField.setAttribute("자리 표시자", placeHolderText);
}
addPlaceholder(firstNameInput, "Jeroen");
addPlaceholder(emailInput, "[email protected]");

function changeRadioSelection(oldButton, newButton) {
  oldButton.removeAttribute("선택됨");
  newButton.setAttribute("체크됨", "체크됨");
}
changeRadioSelection(maleRadio, femaleRadio);

함수 changeRangeValue(범위, 값) {
  범위[0].setAttribute("값", 값);
}
changeRangeValue(범위슬라이더, "50");

함수 addExtraSelectOption(selectDiv, optionName, optionValue) {
  var newOption = document.createElement("옵션");
  var newOptionNode = document.createTextNode(옵션 이름);
  newOption.appendChild(newOptionNode);
  newOption.setAttribute("값", 옵션값);
  selectDiv.appendChild(newOption);
}
addExtraSelectOption(googleSelector, "구글 스프레드시트", "gs");

코드 분석

1. 새로운 구문

분석은 위의 예에서 모든 새로운 구문 을 살펴보는 것으로 시작됩니다. 이 기사는 시리즈의 일부이므로 이전 기사에서 구문에 대한 전체 문서를 확인하십시오.

.childNodes[index]는 자식 노드의 배열을 반환하는 속성입니다. 인덱스를 사용하여 배열의 특정 노드에 액세스할 수 있습니다. 배열의 노드 요소는 숫자 0에서 시작합니다. 배열의 첫 번째 노드에 액세스하려면 대괄호 사이에 0을 넣어야 합니다.

CSS 선택기 대신 이 속성을 사용하여 자식 노드를 선택할 수 있습니다. 이 속성을 사용할 때의 추가 이점은 텍스트 노드를 선택하는 것입니다.

다음은 예입니다.

ChildNodes[0]은 H1 요소를 선택하고 배열의 자식을 수집합니다. 다음 배열을 반환합니다.

 [자식노드, 자식노드2, 자식노드3]

H1의 유일한 자식은 텍스트 자체입니다. H1의 텍스트는 인덱스 0에 있습니다. 텍스트 노드는 속성에 의해 반환됩니다.

document.getElementById(id)는 일치하는 id 속성을 가진 요소를 반환하는 메서드입니다. id를 문자열로 전달해야 합니다. 이 예제는 querySelector 메소드의 단순 버전입니다. 단일 ID에 대해 이 방법을 사용할 수 있습니다.

querySelector 메서드가 있는 경우 이것이 존재하는 이유를 자문할 수 있습니다. 이 메소드는 JavaScript 작성자가 이전 버전의 JavaScript에 getElementById 메소드를 추가했기 때문에 존재합니다. 작성자는 나중에 요소를 더 쉽게 선택할 수 있도록 querySelector 메서드를 추가했습니다.

대부분의 브라우저가 querySelector 메서드를 지원하지만 대부분의 브라우저에서 지원하는지 확인하는 데 도움이 될 수 있습니다.

지원되지 않는 코드는 이전 브라우저에서 웹사이트를 손상시킬 수 있습니다. JavaScript 메소드를 확인하는 훌륭한 웹사이트는 caniuse.com입니다.

document.getElementsByClassName(class)은 전체 문서 내에서 특정 클래스의 모든 요소를 ​​반환하는 메서드입니다. 클래스를 문자열로 전달해야 합니다. 배열의 요소를 반환합니다.

문서 를 다른 요소로 바꿀 수도 있으므로 선택 항목의 하위 요소만 볼 수 있습니다. 이 방법은 더 효율적이기 때문에 정말 도움이 될 수 있습니다. 문서 개체를 선택 항목으로 사용하는 경우 전체 문서를 확인해야 합니다.

childNodes 메서드와 마찬가지로 단일 일치 항목이 있는 배열을 반환합니다.

.removeAttribute(attribute)는 요소에서 속성을 제거하는 메소드입니다. 속성에 연결된 값을 제거합니다.

요소에 속성이 없으면 오류 없이 메서드를 실행합니다. 속성을 문자열로 전달해야 합니다.

2. 논리

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

이 코드 줄에서 양식을 testForm 변수에 할당합니다. querySelector 메소드로 testForm 클래스를 선택하여 이를 수행합니다.

 var firstNameInput = testForm.childNodes[3];

그런 다음 이름 입력 필드를 firstNameInput 변수에 할당합니다. childNodes 선택기로 네 번째 자식 노드를 선택하여 이를 수행합니다. 세 번째 인덱스가 네 번째 위치인 방법에 주목하십시오.

 var 이메일 입력 = testForm.childNodes[8];

여기에서 메일 입력 필드를 emailInput 변수에 할당합니다. 입력 필드는 testForm 변수의 9번째 노드입니다.

 var maleRadio = document.getElementById("남성");

이 줄에서 우리는 값 male을 가진 라디오 버튼을 할당합니다. getElementById 메소드를 사용하여 id로 간단히 선택합니다.

 var 여성 라디오 = document.getElementById("여성");

그런 다음 getElementById 메서드를 사용하여 femaleRadio 변수에 값이 여성인 라디오 버튼을 할당합니다.

 var rangeSlider = document.getElementsByClassName("슬라이더");

여기에서 슬라이더 클래스가 있는 요소 배열을 rangeSlider 변수에 할당합니다. 이 방법을 예로 들었지만 그냥 querySelector 방법을 사용하는 것이 더 쉬울 것입니다.

 var googleSelector = document.getElementById("구글");

googleSelector 변수에 google 클래스가 있는 선택 입력 필드를 할당하여 변수를 완성합니다.

 기능 addPlaceholder(inputField, placeHolderText) {

이 함수는 텍스트 입력 필드에 자리 표시자 텍스트를 추가합니다. 입력 필드를 첫 번째 인수로 전달하고 자리 표시자 텍스트를 두 번째 인수의 문자열로 전달할 수 있습니다.

 inputField.setAttribute("자리 표시자", placeHolderText);

입력 텍스트 필드에 자리 표시자 속성을 추가하여 자리 표시자 텍스트를 표시합니다. setAttribute 메소드를 사용하여 이 속성과 값을 추가할 수 있습니다.

 }

중괄호는 첫 번째 함수를 닫습니다.

 addPlaceholder(firstNameInput, "Jeroen");

이름 입력 필드에 자리 표시자로 예제 이름을 추가하기 위해 처음으로 함수를 호출합니다.

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

이메일 입력 필드에 예제 메일 주소를 추가하기 위해 두 번째로 함수를 호출합니다.

함수는 코드를 묶고 다른 개발자가 이해할 수 있도록 하는 데 유용할 수 있습니다. 예리한 눈을 가졌다면 다음 두 줄의 코드를 사용하여 함수를 모두 건너뛸 수 있다는 것을 알아차렸을 것입니다.

 firstNameInput.setAttribute("자리 표시자", "Jeroen");
emailInput.setAttribute("자리 표시자", "[email protected]");

함수를 만들고 간단한 라인을 사용해야 할 때를 알아차리는 것은 프로그래머로서 중요합니다. 이 예제는 세 줄의 코드를 절약할 수 있었습니다. 로드 속도에는 일반적으로 코드가 적을수록 좋습니다.

 function changeRadioSelection(oldButton, newButton) {

두 번째 기능은 이전 라디오 버튼의 선택을 제거하고 새 라디오 버튼을 선택합니다. 이런 식으로 페이지가 로드될 때 기본적으로 선택되는 버튼을 변경할 수 있습니다.

 oldButton.removeAttribute("선택됨");

checked 속성은 체크되는 라디오 버튼을 결정합니다. 요소에 checked="checked"가 포함되어 있으면 화면에 선택된 상태로 나타납니다. removeAttribute 메소드를 사용하여 체크된 상태를 제거합니다. 이것을 우리의 oldButton 변수에서 호출합니다.

 newButton.setAttribute("체크됨", "체크됨");

그런 다음 기본 선택을 변경하기 위해 newButton 변수에 동일한 속성과 값을 입력하기만 하면 됩니다.

 }

이 중괄호는 두 번째 기능을 종료합니다.

 changeRadioSelection(maleRadio, femaleRadio);

라디오 버튼의 기본값을 여성으로 변경하기 위해 함수를 한 번 호출합니다.

여기에 간단히 다음과 같이 작성하여 2줄의 코드를 다시 저장할 수 있습니다.

 maleRadio.removeAttribute("선택됨");
femaleRadio.setAttribute("체크됨", "체크됨");

나는 미래에 코드를 빠르게 확장할 수 있기 때문에 함수를 사용하는 것을 좋아합니다. 예를 들어 배열이 있는 20개의 버튼에 대해 이 작업을 수행한다고 상상해 보십시오.

테스트 개발을 통해 우리는 코드가 일반적으로 일시적이라는 것을 알고 있으므로 100% 완전성은 요구 사항이 아니라고 생각합니다.

 함수 changeRangeValue(범위, 값) {

이 기능은 범위 슬라이더의 기본값을 변경합니다. 범위 요소를 첫 번째 인수로 입력합니다. 두 번째 인수는 범위 제한 내에서 원하는 값을 포함하는 문자열이어야 합니다.

max=”50″ 속성이 있기 때문에 범위 제한이 50이라는 것을 알고 있습니다. min=”0″ 속성이 있으므로 0에서 시작합니다. setAttribute 메소드를 사용하여 JavaScript로 이 제한을 늘릴 수 있습니다.

 범위[0].setAttribute("값", 값);

getElementsByClassName 메소드를 사용하여 범위를 선택했습니다. 즉, 액세스하려면 배열에서 특정 항목을 선택해야 합니다. 변수 뒤에 [0]을 추가하여 배열의 첫 번째 항목에 액세스할 수 있습니다. 이 코드 줄은 범위의 값 속성을 설정합니다.

 }

이 중괄호는 세 번째 기능을 종료합니다.

 changeRangeValue(범위슬라이더, "50");

그런 다음 함수를 호출하여 범위의 기본값을 50으로 변경합니다.

 함수 addExtraSelectOption(selectDiv, optionName, optionValue) {

이 함수는 드롭다운 선택 상자에 옵션 요소를 추가합니다. 첫 번째 인수에서 선택 요소를 전달합니다. 이것은 모든 옵션 요소의 부모입니다.

두 번째 인수는 새 옵션의 이름을 문자열로 사용합니다. 세 번째 인수는 새 옵션의 값을 문자열로 취합니다. 이 값은 일반적으로 백엔드로 데이터를 보낼 때 사용되므로 간단한 값으로 만드는 것이 중요합니다. 여기에서 모든 옵션에 단기 약어를 추가한 방법을 볼 수 있습니다.

 var newOption = document.createElement("옵션");

먼저 createElement 메서드를 사용하여 옵션 요소를 만들고 newOption 변수에 할당합니다.

 var newOptionNode = document.createTextNode(옵션 이름);

그런 다음 optionName 변수를 사용하여 텍스트 노드를 만들고 newOptionNode 변수에 저장합니다.

 newOption.appendChild(newOptionNode);

newOptionNode 텍스트 노드를 newOption 변수에 추가합니다.

 newOption.setAttribute("값", 옵션값);

그런 다음 setAttribute 메서드를 사용하여 새 옵션의 값을 설정합니다.

 selectDiv.appendChild(newOption);

마지막으로 selectDiv 변수에 새 옵션을 추가합니다. 이제 DOM에서 볼 수 있습니다. 추가했기 때문에 옵션은 드롭다운의 마지막 항목이 됩니다.

 }

중괄호는 네 번째 기능을 종료합니다.

 addExtraSelectOption(googleSelector, "구글 스프레드시트", "gs");

드롭다운에 새 옵션 요소를 추가하기 위해 함수를 호출합니다.

3. 운동

JavaScript를 배우는 가장 좋은 방법은 그것을 시도하는 것입니다.

changeRadioSelection을 사용하여 다른 옵션을 선택했으면 합니다. 또한 changeRangeValue 메서드를 사용하여 범위 값을 0으로 변경하기를 바랍니다. 그리고 나에게 당신의 생각을 알려주는 메시지를 쏴!

알아낼 수 없습니까? LinkedIn에서 저에게 메시지를 보내주시면 도와드리겠습니다!