オプティマイザー用のJavaScript：入力フィールドの操作

ボタンの色だけでなく、それ以上のことをテストしたいですか？ 次に、JavaScriptを学ぶ必要があります。 私は、JavaScriptを使用してWebサイトで成功する実験を設定するための実用的なステップバイステップの方法をカバーするシリーズを開始しました。

シリーズの各記事では、JavaScriptのさまざまな方法について説明し、架空の事例としてWebサイトにベストプラクティスを適用する方法を示しています。

ビジネスケース：入力フィールドを最適化してUXを改善する

この章の仮説は、ユーザーエクスペリエンスを向上させるために入力フィールドを操作することです。

調査によると、ユーザーはオプトインフォームに苛立ちを感じる傾向があります。 影響を軽減するために、変更する特定の入力フィールドを特定します。

この仮説のシナリオでは、次の仮説に到達します。

この仮説をテストするために、以下の変更を適用します。

実験で使用されたコード

さあ、楽しい部分です！

変更を実行するには、テストページで次のJavaScriptコードを実行します。 実際に試してみてください。

 var testForm = document.querySelector（ "。testForm"）;
var firstNameInput = testForm.childNodes [3];
var emailInput = testForm.childNodes [8];
var maleRadio = document.getElementById（ "male"）;
var femaleRadio = document.getElementById（ "female"）;
var rangeSlider = document.getElementsByClassName（ "slider"）;
var googleSelector = document.getElementById（ "google"）;

関数addPlaceholder（inputField、placeHolderText）{
  inputField.setAttribute（ "placeholder"、placeHolderText）;
}
addPlaceholder（firstNameInput、 "Jeroen"）;
addPlaceholder（emailInput、 "[email protected]"）;

関数changeRadioSelection（oldButton、newButton）{
  oldButton.removeAttribute（ "checked"）;
  newButton.setAttribute（ "checked"、 "checked"）;
}
changeRadioSelection（maleRadio、femaleRadio）;

関数changeRangeValue（範囲、値）{
  range [0] .setAttribute（ "value"、value）;
}
changeRangeValue（rangeSlider、 "50"）;

関数addExtraSelectOption（selectDiv、optionName、optionValue）{
  var newOption = document.createElement（ "OPTION"）;
  var newOptionNode = document.createTextNode（optionName）;
  newOption.appendChild（newOptionNode）;
  newOption.setAttribute（ "value"、optionValue）;
  selectDiv.appendChild（newOption）;
}
addExtraSelectOption（googleSelector、 "Google Spreadsheets"、 "gs"）;

コードの内訳

1.新しい構文

内訳は、上記の例のすべての新しい構文を調べることから始まります。 この記事はシリーズの一部であるため、前の記事の構文の完全なドキュメントを確認してください。

.childNodes [index]は、子ノードの配列を返すプロパティです。 インデックスを使用して、配列内の特定のノードにアクセスできます。 配列内のノード要素は、数値ゼロから始まります。 配列の最初のノードにアクセスするには、角かっこの間に0を入れる必要があります。

CSSセレクターの代わりにこのプロパティを使用して、子ノードを選択できます。 このプロパティを使用する追加の利点は、テキストノードを選択することです。

次に例を示します。

ChildNodes [0]はH1要素を選択し、その子を配列に収集します。 次の配列を返します。

 [childNode、childNode2、childNode3]

H1の唯一の子は、テキスト自体です。 H1のテキストはインデックス0にあります。テキストノードはプロパティによって返されます。

document.getElementById（id）は、一致するid属性を持つ要素を返すメソッドです。 IDを文字列として渡す必要があります。 この例は、querySelectorメソッドの単純なバージョンです。 このメソッドは、単一のIDに使用できます。

querySelectorメソッドがある場合、なぜこれが存在するのか自問するかもしれません。 このメソッドが存在するのは、JavaScriptの作成者が以前のバージョンのJavaScriptでgetElementByIdメソッドを追加したためです。 作成者は、要素を簡単に選択できるように、後でquerySelectorメソッドを追加しました。

ほとんどのブラウザはquerySelectorメソッドをサポートしていますが、ほとんどのブラウザがそれらをサポートしているかどうかを確認するのに役立ちます。

サポートされていないコードは、古いブラウザでWebサイトを壊す可能性があります。 JavaScriptメソッドをチェックするための優れたWebサイトはcaniuse.comです。

document.getElementsByClassName（class）は、ドキュメント全体の中で特定のクラスを持つすべての要素を返すメソッドです。 クラスを文字列として渡す必要があります。 配列内の要素を返します。

ドキュメントを別の要素に置き換えることもできるため、選択範囲の子要素のみが表示されます。 この方法はより効率的であるため、非常に役立ちます。 ドキュメントオブジェクトを選択として使用する場合は、ドキュメント全体をチェックする必要があります。

childNodesメソッドと同様に、単一の一致を持つ配列を返します。

.removeAttribute（attribute）は、要素から属性を削除するメソッドです。 属性に付加された値を削除します。

要素に属性がない場合、エラーなしでメソッドを実行します。 属性を文字列として渡す必要があります。

2.ロジック

 var testForm = document.querySelector（ "。testForm"）;

このコード行では、フォームをtestForm変数に割り当てます。 これを行うには、querySelectorメソッドを使用してtestFormクラスを選択します。

 var firstNameInput = testForm.childNodes [3];

次に、名入力フィールドをfirstNameInput変数に割り当てます。 これを行うには、childNodesセレクターで4番目の子ノードを選択します。 3番目のインデックスが4番目の位置になっていることに注目してください。

 var emailInput = testForm.childNodes [8];

ここでは、メール入力フィールドをemailInput変数に割り当てます。 入力フィールドは、testForm変数の9番目のノードです。

 var maleRadio = document.getElementById（ "male"）;

この行では、ラジオボタンに値maleを割り当てます。 getElementByIdメソッドを使用して、IDで簡単に選択します。

 var femaleRadio = document.getElementById（ "female"）;

次に、getElementByIdメソッドを使用して、値femaleのラジオボタンをfemaleRadio変数に割り当てます。

 var rangeSlider = document.getElementsByClassName（ "slider"）;

ここでは、sliderクラスを持つ要素の配列をrangeSlider変数に割り当てます。 このメソッドを例として使用しましたが、querySelectorメソッドを使用する方が簡単です。

 var googleSelector = document.getElementById（ "google"）;

クラスgoogleのselect入力フィールドをgoogleSelector変数に割り当てることで、変数を完成させます。

 関数addPlaceholder（inputField、placeHolderText）{

この関数は、プレースホルダーテキストをテキスト入力フィールドに追加します。 入力フィールドを最初の引数として渡し、プレースホルダーテキストを文字列として2番目の引数に渡すことができます。

 inputField.setAttribute（ "placeholder"、placeHolderText）;

プレースホルダーテキストを表示するには、入力テキストフィールドにプレースホルダー属性を追加します。 この属性と値は、setAttributeメソッドを使用して追加できます。

 }

中括弧は最初の関数を閉じます。

 addPlaceholder（firstNameInput、 "Jeroen"）;

この関数を初めて呼び出して、名前の例をプレースホルダーとして名入力フィールドに追加します。

 addPlaceholder（emailInput、 "[email protected]"）;

この関数をもう一度呼び出して、電子メール入力フィールドにサンプルのメールアドレスを追加します。

関数は、コードをバンドルして他の開発者が理解できるようにするのに便利です。 鋭い目を持っていれば、次の2行のコードを使用するだけで、関数を完全にスキップできたことに気付いたかもしれません。

 firstNameInput.setAttribute（ "placeholder"、 "Jeroen"）;
emailInput.setAttribute（ "placeholder"、 "[email protected]"）;

プログラマーとしては、関数を作成する必要があるときに気づき、単純な行を使用することが重要です。 この例では、3行のコードを節約できたはずです。 通常、ロード速度にはコードが少ない方が適しています。

 関数changeRadioSelection（oldButton、newButton）{

2番目の関数は、古いラジオボタンの選択を削除し、新しいラジオボタンを選択します。 このようにして、ページが読み込まれるときにデフォルトでチェックされるボタンを変更できます。

 oldButton.removeAttribute（ "checked"）;

チェックされた属性は、チェックされるラジオボタンを決定します。 要素にchecked=”checked”が含まれている場合、画面上でチェック済みと表示されます。 removeAttributeメソッドを使用して、チェックされた状態を削除します。 これをoldButton変数で呼び出します。

 newButton.setAttribute（ "checked"、 "checked"）;

次に、同じ属性と値をnewButton変数に追加して、デフォルトの選択を変更します。

 }

この中括弧は、2番目の関数を終了します。

 changeRadioSelection（maleRadio、femaleRadio）;

関数を1回呼び出して、ラジオボタンのデフォルト値を女性に変更します。

ここでは、次のように記述するだけで、2行のコードを再度節約できたはずです。

 maleRadio.removeAttribute（ "checked"）;
femaleRadio.setAttribute（ "checked"、 "checked"）;

関数を使用すると、将来コードをすばやく拡張できるので、私は関数を使用するのが好きです。 たとえば、配列を使用して20個のボタンに対してこれを行うことを想像してみてください。

テスト開発では、コードは通常一時的なものであることがわかっているため、100％完全である必要はないと思います。

 関数changeRangeValue（範囲、値）{

この関数は、範囲スライダーのデフォルト値を変更します。 最初の引数として範囲要素を入力します。 2番目の引数は、範囲の範囲内で目的の値を含む文字列である必要があります。

属性max=” 50”があるため、範囲の制限は50であることがわかります。 属性min=” 0”があるため、0から始まります。 setAttributeメソッドを使用すると、JavaScriptでこの制限を増やすことができます。

 range [0] .setAttribute（ "value"、value）;

getElementsByClassNameメソッドを使用して範囲を選択しました。これは、配列内の特定の項目にアクセスするために選択する必要があることを意味します。 変数の後に[0]を追加することで、配列の最初の項目にアクセスできます。 このコード行は、範囲のvalue属性を設定します。

 }

この中括弧は、3番目の機能を終了します。

 changeRangeValue（rangeSlider、 "50"）;

次に、関数を呼び出して、範囲のデフォルト値を50に変更します。

 関数addExtraSelectOption（selectDiv、optionName、optionValue）{

この関数は、ドロップダウン選択ボックスにオプション要素を追加します。 最初の引数では、select要素を渡します。 これは、すべてのオプション要素の親です。

2番目の引数は、新しいオプションの名前を文字列として受け取ります。 3番目の引数は、新しいオプションの値を文字列として受け取ります。 この値は通常、バックエンドにデータを送信するときに使用されるため、これを単純な値にすることが重要です。 ここでは、すべてのオプションに短い値の頭字語を追加した方法を確認できます。

 var newOption = document.createElement（ "OPTION"）;

まず、createElementメソッドを使用してオプション要素を作成し、それをnewOption変数に割り当てます。

 var newOptionNode = document.createTextNode（optionName）;

次に、optionName変数を使用してテキストノードを作成し、それをnewOptionNode変数に保存します。

 newOption.appendChild（newOptionNode）;

newOptionNodeテキストノードをnewOption変数に追加します。

 newOption.setAttribute（ "value"、optionValue）;

次に、setAttributeメソッドを使用して新しいオプションの値を設定します。

 selectDiv.appendChild（newOption）;

最後に、selectDiv変数に新しいオプションを追加します。 これで、DOMに表示されます。 追加したので、オプションはドロップダウンの最後になります。

 }

中括弧は4番目の関数を終了します。

 addExtraSelectOption（googleSelector、 "Google Spreadsheets"、 "gs"）;

関数を呼び出して、新しいオプション要素をドロップダウンに追加します。

3.運動

JavaScriptを学ぶための最良の方法は、それを試すことです。

changeRadioSelectionを使用して他のオプションを選択してください。 また、changeRangeValueメソッドを使用して範囲の値を0に変更してほしい。 そして、私にメッセージを送って、あなたの考えを知らせてください！

理解できませんか？ LinkedInで私にメッセージを送ってください。私がお手伝いします！