HTMLとCSSとJavaScriptで商品一覧ページを作る⓶完成

Javascriptの復習をしようと、以前買った教本から再びチャレンジです。

まずはHTMLとCSSでの静的なページについてはこちらです。

このページではJavaScripのコードを表示しています。

完成品はこちらです。

興味があったらチャレンジしてみてください。また、より詳しい説明は下記の著書に書いてありますので、ご購入のご検討宜しくお願い致します。

var nodeApp = document.querySelector(‘#app’);	コンポーネントのルートノード
var nodeCheckbox = nodeApp.querySelectorAll(‘input[type=”checkbox”]’);	チェックボックスのイベントハンドラを登録
nodeCheckbox[0].addEventListener(‘change’, onCheckChanged, false);	チェックボックスのイベントハンドラを登録（セール対象）
nodeCheckbox[1].addEventListener(‘change’, onCheckChanged, false);	チェックボックスのイベントハンドラを登録（送料無料）

var nodeSelect = nodeApp.querySelector(‘.sorting’);	セレクトボックスのイベントハンドラを登録（並び替え）
nodeSelect.addEventListener(‘change’, onOrderChanged, false);

var nodeItemsOrg = nodeApp.querySelectorAll(‘.item’);

初期表示時の商品ノードリスト（保存用）これはいったん「価格が安い順」にノードを並び替えてしまうと、次に並び順を「標準」に戻したときに、元の順番がわからなくなってしまいます。そのため初期表示の商品ノードを保持しておき、「標準」が選択されたときはここから復元するようにします。

function onOrderChanged(event){	並び順の変更イベントハンドラ
var nodeList = nodeApp.querySelector(‘.list’);	商品一覧ノードを変数に代入
var nodeItems = nodeApp.querySelectorAll(‘.item’);	商品一覧ノードのリストを変数に代入
	商品ノードのリストを新しい配列に詰め替える（退避しておく場所）
var products = [];
for(var i =0; i < nodeItems.length; i++){ products.push(nodeItems[i]); }
	DOMから全ての商品ノードを削除する
while(nodeList.firstChild){ nodeList.removeChild(nodeList.firstChild) }

if(event.target.value == ‘1’){	「標準」が選択されている場合
for (var i =0; i < products.length; i++){ nodeList.appendChild(nodeItemsOrg[i]) } }	初期表示時の商品ノードを復元する

else if(event.target.value == ‘2’){	「価格が安い順」が選択されている場合
products.sort(function(a,b){	配列を並び変え
var prevPrice = parseInt(a.querySelector(‘.price span’).textContent.replace(‘,’,”));	商品価格のノードからカンマを除去した数値を読み取る
var currentPrice = parseInt(b.querySelector(‘.price span’).textContent.replace(‘,’,”));
return prevPrice – currentPrice; })
for (var i = 0; i < products.length; i++){ nodeList.appendChild(products[i]); } } }// function onOrderChanged	並び替え後の商品ノードをＤＯＭに追加する

                 

function onCheckChanged(event){	チェック状態変更イベントハンドラ
var nodeItems = nodeApp.querySelectorAll(‘.item’);	商品ノードのリスト
var nodeCount = nodeApp.querySelector(‘.count’);	商品件数のノードを変数に代入
var count = nodeItems.length;	表示件数を変数に代入
for (var i=0; i < nodeItems.length; i++){ showNode(nodeItems[i]); }	全ての商品ノードをいったん表示する
if (nodeCheckbox[0].checked){	セール対象のチェックがついている場合
for(var i=0; i < nodeItems.length; i++){	全ての商品ノードを捜査
if(!isSaleItem(nodeItems[i])){	セール対象の商品でない場合
hideNode(nodeItems[i]);	この商品を非表示にする
count–; } } }	件数のカウントを減らす
if(nodeCheckbox[1].checked){	送料無料のチェックがついている場合
for (var i=0; i < nodeItems.length; i++){	全ての商品ノードを捜査
if(!isDelvFreeItem(nodeItems[i])){	送料無料でない商品の場合
hideNode(nodeItems[i]);	この商品を非表示にする
count–; } } }	件数のカウントを減らす
nodeCount.textContent = count + ‘件’; } // function onCheckChanged	件数を更新

function isSaleItem(nodeItem){	セールかどうかを判定する関数
var node = nodeItem.querySelector(‘.status’); return(node && node.textContent == ‘SALE’); }

function isDelvFreeItem(nodeItem){ var node = nodeItem.querySelector(‘.shipping-fee’); return (node && node.textContent == ‘送料無料’) }

送料無料かどうかを判定する関数

function hideNode(node){ node.setAttribute(‘style’,’display:none;’) }

ノードを非表示にする関数

            

function showNode(node){ node.removeAttribute(‘style’); }

ノードを表示する関数

わからないことはプロフェッショナルから学ぶのが一番