JavaScript para otimizadores: trabalhando com campos de entrada

Quer testar mais do que apenas a cor de um botão? Então, você precisa aprender JavaScript. Comecei uma série que aborda maneiras práticas passo a passo de usar JavaScript para configurar experiências vencedoras em seu site.

Cada artigo da série aborda um método diferente de JavaScript, ilustrado pela aplicação de práticas recomendadas a sites como casos hipotéticos.

Caso de Negócios: Otimize os Campos de Entrada para Melhorar a UX

Nosso caso hipotético para este capítulo é trabalhar com campos de entrada para melhorar a experiência do usuário .

A pesquisa mostrou que os usuários tendem a achar frustrantes os formulários de inscrição. Para mitigar o impacto, identificamos campos de entrada específicos que queremos alterar.

Nesse cenário hipotético, chegamos à seguinte hipótese:

Para testar essa hipótese, vamos aplicar as alterações abaixo:

O código usado no experimento

Agora a parte divertida!

Para executar a alteração, executamos o seguinte código JavaScript na página de teste. Experimente você mesmo para vê-lo em ação!

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

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

function changeRadioSelection(oldButton, newButton) {
  oldButton.removeAttribute("checked");
  newButton.setAttribute("marcado", "marcado");
}
changeRadioSelection(maleRadio, femaleRadio);

function changeRangeValue(intervalo, valor) {
  range[0].setAttribute("valor", valor);
}
changeRangeValue(rangeSlider, "50");

function addExtraSelectOption(selectDiv, optionName, optionValue) {
  var newOption = document.createElement("OPÇÃO");
  var newOptionNode = document.createTextNode(optionName);
  newOption.appendChild(newOptionNode);
  newOption.setAttribute("value", optionValue);
  selectDiv.appendChild(newOption);
}
addExtraSelectOption(googleSelector, "Google Spreadsheets", "gs");

Divisão do Código

1. Nova Sintaxe

O detalhamento começa analisando toda a nova sintaxe no exemplo acima. Como este artigo faz parte de uma série, verifique a documentação completa da sintaxe nos artigos anteriores.

.childNodes[index] é uma propriedade que retorna uma matriz de nós filho. Você pode acessar os nós específicos na matriz com um índice. Os elementos de nó em uma matriz começam no número zero. Acessar o primeiro nó na matriz exigirá que você coloque um 0 entre os colchetes.

Você pode usar essa propriedade em vez de um seletor CSS para selecionar nós filho. Um benefício adicional de usar essa propriedade é selecionar nós de texto.

Aqui está um exemplo:

ChildNodes[0] seleciona o elemento H1 e coleta seus filhos em um array. Ele retorna a seguinte matriz:

 [childNode, childNode2, childNode3]

O único filho no H1 é o próprio texto. O texto do H1 está no índice 0. O nó de texto é retornado pela propriedade.

document.getElementById(id) é um método que retorna um elemento que possui um atributo id correspondente. Você precisa passar o id como uma string. Este exemplo é a versão simples do método querySelector. Você pode usar esse método para um único id.

Você pode se perguntar por que isso existe se você tiver o método querySelector. Esse método existe porque o criador do JavaScript adicionou o método getElementById em uma versão anterior do JavaScript. Os criadores adicionaram o método querySelector posteriormente para facilitar a seleção de elementos.

Embora a maioria dos navegadores suporte o método querySelector, pode ser útil verificar se a maioria dos navegadores os suporta.

O código não suportado pode quebrar um site em um navegador mais antigo. Um excelente site para verificar métodos JavaScript é caniuse.com.

document.getElementsByClassName(class) é um método que retorna todos os elementos com uma classe específica dentro de todo o documento. Você precisa passar a classe como uma string. Ele retorna os elementos em uma matriz.

Você também pode substituir o documento por outro elemento, para que ele veja apenas os elementos filho da seleção. Este método pode ser muito útil porque é mais eficiente. Se você usar o objeto de documento como seleção, ele precisará verificar todo o documento.

Assim como o método childNodes, ele retornará um array com uma única correspondência.

.removeAttribute(attribute) é um método que remove um atributo de um elemento. Você removerá os valores anexados ao atributo.

Quando o elemento não possui o atributo, ele executará o método sem erro. Você precisa passar o atributo como uma string.

2. Lógica

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

Nesta linha de código, atribuímos o formulário à variável testForm. Fazemos isso selecionando a classe testForm com o método querySelector.

 var firstNameInput = testForm.childNodes[3];

Em seguida, atribuímos o campo de entrada do primeiro nome à variável firstNameInput. Fazemos isso selecionando o quarto nó filho com o seletor childNodes. Observe como o terceiro índice é a quarta posição.

 var emailInput = testForm.childNodes[8];

Aqui, atribuímos o campo de entrada de correio à variável emailInput. O campo de entrada é o 9º nó da variável testForm.

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

Nesta linha, atribuímos o botão de opção com o valor masculino. Usamos o método getElementById para selecioná-lo por id simplesmente.

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

Em seguida, atribuímos o botão de opção com o valor feminino à variável femaleRadio com o método getElementById.

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

Aqui, atribuímos um array de elementos com a classe slider à variável rangeSlider. Eu usei esse método como exemplo, mas seria mais fácil usar apenas um método querySelector.

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

Finalizamos nossas variáveis ​​atribuindo o campo de entrada select com a classe google à nossa variável googleSelector.

 function addPlaceholder(inputField, placeHolderText) {

Esta função adiciona um texto de espaço reservado a um campo de entrada de texto. Você pode passar o campo de entrada como o primeiro argumento e o texto do espaço reservado como uma string no segundo argumento.

 inputField.setAttribute("placeholder", placeHolderText);

Você exibe um texto de espaço reservado adicionando o atributo de espaço reservado ao campo de texto de entrada. Podemos adicionar este atributo e valor com o método setAttribute.

 }

O colchete fecha nossa primeira função.

 addPlaceholder(firstNameInput, "Jeroen");

Chamamos a função pela primeira vez para adicionar um nome de exemplo como um espaço reservado para o campo de entrada firstname.

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

Chamamos a função pela segunda vez para adicionar um endereço de e-mail de exemplo ao campo de entrada de e-mail.

As funções podem ser úteis para agrupar código e torná-lo compreensível para outros desenvolvedores. Se você tivesse um olho afiado, poderia ter notado que poderíamos ter ignorado a função usando apenas estas duas linhas de código:

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

É importante como programador perceber quando você precisa fazer uma função e usar apenas uma linha simples. Este exemplo poderia ter me poupado três linhas de código. Menos código geralmente é melhor para velocidade de carregamento.

 function changeRadioSelection(oldButton, newButton) {

A segunda função remove a seleção do botão de opção antigo e seleciona um novo botão de opção. Dessa forma, podemos alterar o botão que é verificado por padrão quando a página é carregada.

 oldButton.removeAttribute("checked");

O atributo verificado decide o botão de opção que é verificado. Quando um elemento contém check=”checked” ele aparecerá marcado na tela. Usamos o método removeAttribute para remover o estado verificado. Chamamos isso em nossa variável oldButton.

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

Em seguida, simplesmente colocamos o mesmo atributo e valor em nossa variável newButton para alterar a seleção padrão.

 }

Este colchete termina nossa segunda função.

 changeRadioSelection(maleRadio, femaleRadio);

Chamamos a função uma vez para alterar o valor padrão de nossos botões de opção para feminino.

Aqui poderíamos ter salvado 2 linhas de código novamente simplesmente escrevendo isto:

 maleRadio.removeAttribute("checked");
femaleRadio.setAttribute("marcado", "marcado");

Eu gosto de usar funções porque me permite expandir rapidamente o código no futuro. Imagine fazer isso para 20 botões com um array, por exemplo.

Com o desenvolvimento de testes, sabemos que nosso código geralmente é temporário, então 100% de perfeição não é um requisito, na minha opinião.

 function changeRangeValue(intervalo, valor) {

Esta função altera o valor padrão de um controle deslizante de intervalo. Você insere o elemento range como o primeiro argumento. O segundo argumento precisa ser uma string contendo o valor desejado dentro dos limites do intervalo.

Sabemos que o limite do nosso alcance é 50 porque tem o atributo max=”50″. Começa em 0 porque tem o atributo min=”0″. Você poderia aumentar esse limite com JavaScript usando o método setAttribute.

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

Selecionamos o intervalo com o método getElementsByClassName, o que significa que precisamos selecionar um item específico no array para acessá-lo. Podemos acessar o primeiro item do array adicionando [0] após a variável. Essa linha de código definirá o atributo value do intervalo.

 }

Este colchete termina a terceira função.

 changeRangeValue(rangeSlider, "50");

Em seguida, chamamos nossa função para alterar o valor padrão do intervalo para 50.

 function addExtraSelectOption(selectDiv, optionName, optionValue) {

Esta função anexa um elemento de opção à nossa caixa de seleção suspensa. No primeiro argumento, você passa o elemento select. Este é o pai de todos os elementos de opção.

O segundo argumento recebe o nome da nova opção como uma string. O terceiro argumento recebe o valor de nossa nova opção como uma string. O valor geralmente é usado ao enviar dados para o back-end, portanto, é essencial torná-lo um valor simples. Aqui podemos ver como adicionei siglas de valor curto a todas as nossas opções.

 var newOption = document.createElement("OPÇÃO");

Primeiro, criamos o elemento de opção com o método createElement e o atribuímos à variável newOption.

 var newOptionNode = document.createTextNode(optionName);

Em seguida, criamos um nó de texto com a variável optionName e o salvamos na variável newOptionNode.

 newOption.appendChild(newOptionNode);

Anexamos nosso nó de texto newOptionNode à nossa variável newOption.

 newOption.setAttribute("value", optionValue);

Em seguida, definimos o valor de nossa nova opção com o método setAttribute.

 selectDiv.appendChild(newOption);

Por fim, anexamos nossa nova opção à variável selectDiv. Agora ele estará visível no DOM. Como a anexamos, a opção será a última na lista suspensa.

 }

O colchete termina nossa quarta função.

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

Chamamos nossa função para adicionar nosso novo elemento de opção ao nosso menu suspenso.

3. Exercício

A melhor maneira de aprender JavaScript é experimentá-lo.

Eu quero que você use o changeRadioSelection para selecionar a outra opção. Também quero que você altere o valor do intervalo para 0 com o método changeRangeValue. E me mande uma mensagem para me dizer o que você achou!

Não consegue descobrir? Me mande uma mensagem no LinkedIn e eu te ajudo!