Ludzie pragną czasami się rozstawać, żeby móc tęsknić, czekać i cieszyć się z powrotem.
length < reference + offset ?
results.length : reference + offset);
for (var i = reference; i < currentRecord; i++) {
docObj.writeln('\n\n\t<DT>' + '<FONT SIZE=4>' +
'<A HREF="javascript: top.frames[1].reCall(' + results[i][0]+
', ' + results[i][1] + ')">' +
ref.categorySet[results[i][0]].prodLine[results[i][1]].name +
'</A></FONT>\t<DD>' +
ref.categorySet[results[i][0]].prodLine[results[i][1]].description +
'\t<DD>' + 'Cena: <I>$' +
ref.numberFormat(ref.categorySet[results[i][0]].
prodLine[results[i][1]].price) +
'</I> ' + 'PLU Number: <I>' +
ref.categorySet[results[i][0]].prodLine[results[i][1]].plu +
'</I><P>');
}
docObj.writeln('\n\t</DL>\n\n<!- End result set //-->\n\n');
prevNextResults(results.length, reference, offset);
docObj.writeln('<HR NOSHADE WIDTH=100%>' +
'</TD>\n</TR>\n</TABLE>\n</BODY>\n</HTML>');
docObj.close();
document.forms[0].query.select();
}
Każdy wynik zawiera nazwę produktu, jego opis, cenę i numer PLU. Funkcja przegląda elementy results i pobiera odpowiednie informacje z prodLine na podstawie liczb results[i][0] i results[i][1]. Innymi słowy, wyniki wyglądają tak:
results = new Array(
new Array(0, 1), // Pamiętaj, że element 0 oznacza
new Array(2, 2), // kategoriÄ™, element 1 oznacza numer
new Array(4, 1) // produktu
);
Zatem wynikiem jest suszarka (kategoria 0, produkt 1), torebka (kategoria 2, produkt 2) oraz frytki (kategoria 4, produkt 1). Używając takich par liczb, łatwo jest ograniczyć ilość danych i jednocześnie zarejestrować potrzebne nam fakty.
202
Techniki języka JavaScript:
Wielokrotne użycie bazy danych JavaScriptu
Szczęśliwi są ci programiści, którzy mogą użyć danych zaklętych w tablice i obiekty
JavaScriptu, a jeszcze szczęśliwsi ci, którzy mogą sięgnąć do informacji innych aplikacji
bez konieczności powtórnego kodowania wszystkiego. Tak właśnie dzieje się w
przypadku wyszukiwarki produktów w naszej aplikacji. Z uwagą na jej dość prostą
strukturę, nie trzeba przebudowywać bazy danych w celu jej przeszukiwania.
Wystarczy kilka zmienionych wierszy kodu w wyszukiwarce i wszystko działa wspaniale.
Jeśli ktoś chce sięgać do swoich danych w bazie z różnych aplikacji, musi pamiętać, że
tylko zachowanie iście spartańskiej prostoty pozwoli tych danych używać bez potrzeby
dodatkowego kodowania.
W celu wyświetlania produktów na ekranie, potrzebujemy pary liczb. Pętla for w format-
Results() pokazuje nazwy, opisy, ceny i numery PLU, używając właśnie tych liczb:
ref.categorySet[results[i][0]].prodLine[results[i][1]].name
ref.categorySet[results[i][0]].prodLine[results[i][1]].description
ref.numberFormat(ref.categorySet[results[i][0]].
prodLine[results[i][1]].price
ref.categorySet[results[i][0]].prodLine[results[i][1]].plu
Każdy wynik wyświetlany będzie jako tekst podobny do tego poniżej:
Hairdrye
Kolorowe, żółte wzornictwo, trwały kabel. Dobry zakup.
Cena: $1.15 Numer PLU: HAI1
Kod w Å‚Ä…czach
Wyniki zostały wyświetlone, ale jak teraz to zakodować, aby w łączu użyty został system nawigacyjny, o którym tyle mówiono?
W funkcji formatResults() znajdziemy następujące rozwiązanie:
'<A HREF="javascript: top.frames[1].reCall(' + results[i][0]+
', ' + results[i][1] + ')">'
W każdym łączu używany jest protokół javascript: wywołujący funkcję reCall(), będącą tą samą funkcją, która jest używana z do oglądania produktów w przypadku przeglądania wszystkich kategorii. Jak zapewne pamiętamy, funkcja reCall() oczekuje dwóch argumentów: numeru kategorii i numeru produktu. W taki sposób używaliśmy tego w naszej wyszukiwarce. Pozostaje tylko jedno: włączyć każdy z elementów z par liczb do wywołania, i gotowe. Zatem suszarka ( hairdryer) ma następujące łącze:
'<A HREF="top.frames[1].reCall(0, 1)">Hairdryer</A>
Spójrz teraz, co się dzieje z liczbami 0 i 1, kiedy pojawiają się w wywołaniu reCall():
function reCall(cReset, pReset) {
browseControl = true;
curCLoc = cReset;
curPLoc = pReset;
display(0, 0);
}
Zmienna curCLoc otrzymuje wartość kategorii z cReset, podobnie curPLoc numer produktu z pReset.
Wyszukiwarka świetnie koegzystuje z całą resztą aplikacji i naprawdę wymaga niewiele modyfikacji.
Etap 5. Zmiana zamówienia, płacenie
Kiedy użytkownik nie ma już ani grosza lub niczego więcej nie chce, czas skierować się ku drzwiom. Kliknięcie łącza Przegląd/korekta koszyka powoduje wyświetlenie ekranu podobnego, jak na rysunku 8.7. Koszyk użytkownika nie może ograniczyć się tylko do wyświetlenia swojej zawartości, ale musi też spełniać następujące wymagania:
•
Wyświetlać każdy produkt z koszyka, jego kategorię, numer PLU i cenę jednostkową.
203 RozdziaÅ‚ 8 - Shopping Bag – wózek sklepowy stworzony w JavaScripcie
•
Zapewnić interaktywny formularz, w którym można będzie zmienić ilości produktów, usuwać produkty
i przeliczać wartości.
•
Wyświetlać bieżące sumy dla określonych wielkości zakupów, sumy pośrednie i wszelkie odpowiednie podatki.
Nie powinno zatem zaskakiwać, że jest tu także kilka funkcji gotowych, aby zaraz zacząć pełnić swoje zadania w Shopping Bag. Oto one:
showBag()