Nie jest to konieczne, ale dwa dodatkowe wiersze kodu nie zaszkodzą. W pliku prefs.html używana jest spora ilość grafiki, więc dobrze odpowiednie obrazki zawczasu załadować. Można to wykonać w wierszach 70–73: for (var i = 0; i < imageNames.length; i++) {
154
allImages[i] = new Image();
allImages[i].src = imagePath + imageNames[i] + '.gif';
}
Tabela 7.1. Zmienne zawierające informacje o stronach użytkownika
Nazwa tablicy
Zawartość
newsNames
Nazwy i adresy URL nowinek finansowych.
indexNames
Nazwy i adresy URL serwisów z notowaniami giełdowymi.
strategy
Nazwy i rodzaje strategii inwestycyjnych, w ramach których mogą się
określić użytkownicy.
background
Nazwy i adresy URL dostępnych obrazków tła.
face
Uchwyty obrazków (więcej na ten temat zaraz) i nazwy dostępnych grup
czcionek.
size
Uchwyty obrazków i nazwy dostępnych rozmiarów czcionek.
allImages
Obecnie pusta tablica, używana później do przechowywania wstępnie
załadowanych obrazków w celu ułatwienia dostępu.
imageNames
Tablica zawierająca uchwyty obrazków; napisy te pomagają ładować
wstępnie obrazki.
Każdy element imageNames jest napisem. Jest to uchwyt obrazka, który w połączeniu ze zmienną imagePath i tekstem stałym .gif umożliwi iterację przez elementy imageNames i wstępne ładowanie potrzebnych obrazków.
Zapamiętajmy, że uchwyty obrazków (takie jak courier10) nie są nazwami narzuconymi. Przyjęta konwencja nazewnictwa przyda się dalej, co jeszcze będzie omawiane.
Jeśli przejrzy resztę kodu między znacznikami SCRIPT, zauważy, że wszystko inne zdefiniowano jako funkcje. Wobec tego wszelkie fragmenty kodu są wywołane skądś indziej. Ma to miejsce dwukrotnie:
•
podczas ładowania treści HTML,
•
w obsłudze zdarzenia onLoad, w znaczniku BODY.
Przyjrzyjmy się zatem kodowi HTML za JavaScriptem (w wierszach 174–294).
Formularz ustawień użytkownika
Interfejsem jest formularz z polami tekstowymi, polami opcji i listami wyboru, w których użytkownik zaznacza preferowane ustawienia. Stworzenie pól tekstowych to kwestia ich zwykłego zakodowania (przynajmniej tym razem) i ustawienie żądanych nazw. Odpowiednio – nazwisko, wiek i zawód znajdziemy w wierszach 195, 199 i 212.
Następne zadanie to określenie preferowanej strategii gry. Kategorie obejmują cały wachlarz zachowań, od bardzo ostrożnych po wyjątkowo agresywne. Tym razem użytkownik nie wypełnia pola tekstowego, ale wybiera jedną z opcji z listy. Zamiast wstawić normalny znacznik OPTION, można użyć funkcji JavaScriptu, która dynamicznie wygeneruje odpowiednią listę. Stosujemy do tego funkcję genSelect() – wiersze 205, 247–249, 262 i 276. Wywołanie z wiersza 205 pozwala wybrać strategię inwestycyjną, tymczasem pozostałe wywołania służą do określenia tła, typu i rozmiaru czcionki. Oto funkcja genSelect() z wierszy 86–95:
function genSelect(name, select, onChangeStr) {
var optStr = "";
var arrObj = eval(name);
for (var i = 0; i < arrObj.length; i++) {
optStr += '<OPTION VALUE="' + arrObj[i][0] +
(i == select ? '" SELECTED' : '"') + '>' + arrObj[i][1];
}
return '<SELECT NAME="' + name + '"' + (onChangeStr ? ' onChange="' +
onChangeStr + ';"' : '') + '>' + optStr + '</SELECT>';
}
Podobną funkcję genSelect() widzieliśmy w rozdziale 5. Funkcja ta generowała tam listę wyboru, pozwalającą wybierać tekst reprezentujący liczbę całkowitą. Tym razem znaczniki OPTION nie są liczbami, ale zawartością tablicy.
Spójrz na wywołanie genSelect() w wierszu 205:
document.write(genSelect('strategy', 3));
Funkcja otrzymuje dwa argumenty: napis strategy oraz liczbę 3. „Zaraz – pomyślisz sobie – przecież mamy tablicę o nazwie strategy, po co więc przekazujemy taki napis?”
155 Rozdział 7 - Ustawienia użytkownika oparte na ciasteczkach
Zgadza się, mamy tablicę strategy. Może i dobrze byłoby przekazywać jako argument jej zawartość, tyle tylko, że każda lista wyboru musi mieć swoją nazwę, według której będziemy ją identyfikować. Aby sobie uprościć zadanie, każdej liście nadamy nazwę taką samą, jaką ma odpowiadająca jej tablica. Dlatego właśnie przekazujemy taki napis.
Następnie zmiennej arrObj przypisywana jest zinterpretowana wartość napisu; eval(name) oznacza
eval('strategy'), co daje nam odwołanie do tablicy strategy. Teraz genSelect() ma zarówno tablicę (arrObj) do wypełnienia znaczników OPTION, jak i nazwę listy wyboru (name).
Drugi przekazany argument jest liczbą całkowitą dostępną jako select. Wartość ta oznacza opcję wybraną domyślnie.
Jeśli wartość i równa jest select, odpowiedni znacznik OPTION otrzymuje atrybut SELECTED. Gdy select równe jest 0, domyślnie wybrana będzie pierwsza opcja; jeśli 1, druga, i tak dalej. Odpowiednie wyrażenie znajdziemy w wierszu 91:
(i == select ? '" SELECTED' : '"')
Po pobraniu z tablicy strategy wszystkich elementów i stworzeniu optStr ze znacznikami OPTION, w wierszach 93–94 całość jest sklejana z obejmującymi ją znacznikami SELECT.