2">
114 document.write(genLinks(indexNames));
115 </SCRIPT>
116 </TD>
117 </TR>
118 <TR>
119 <TD VALIGN=TOP COLSPAN=2>
120 <BR><BR>
121 [ <A HREF="prefs.html">Ustawienia</A> ]
122 </TD>
123 </TR>
124 </TABLE>
125 </BODY>
126 </HTML>
Analiza ciasteczek Przyjrzyjmy się znacznikom SCRIPT. Już na podstawie ich rozmieszczenia nietrudno zgadnąć, że ta strona jest naprawdę tylko szablonem, który będzie w biegu wypełniany właściwą treścią. Pierwszym krokiem ku temu musi być przeanalizowanie zapisów z ciasteczek – wywoływana jest funkcja getAttributes(). Aby móc dynamicznie określić wygląd strony, będziemy tych informacji potrzebować szybko, jeszcze przed załadowaniem strony. Dlatego właśnie getAttributes() wywoływana jest w wierszu 35, czyli zaledwie dwa wiersze po jej zdefiniowaniu. Oto wiersze 13–
33:
function getAttributes() {
var htmlStr = GetCookie('htmlPrefs');
if (htmlStr == null) {
alert('Witaj. Najpierw musisz określić swoje preferencje.' +
'Kiedy wciśniesz OK, załadowana zostanie odowiedniednia strona.');
self.location.href = 'prefs.html';
}
var htmlArray = htmlStr.split('-->');
for (var i = 0; i < htmlArray.length; i++) {
var tagInfo = htmlArray[i].split('=');
if (tagInfo[0] != "") {
if (tagInfo[0].indexOf('newsNames') == 0) {
newsNames[newsNames.length] = tagInfo[1];
}
else if (tagInfo[0].indexOf('indexNames') == 0) {
indexNames[indexNames.length] = tagInfo[1];
}
else { eval(tagInfo[0] + ' = "' + tagInfo[1] + '"'); }
}
}
}
Zmienna lokalna otrzymuje wartość zwracaną przez funkcję GetCookie(). W pliku prefs.html potrzebne dane o formularzu były zapisane w ciasteczku prefStr, ale w dive.html będziemy potrzebować ciasteczka htmlStr. Jeśli okaże się, że htmlStr jest puste, należy przyjąć, że użytkownik jeszcze nie wprowadził swoich ustawień, więc należy go o tym poinformować i przekierować na stronę prefs.html, aby uzupełnił dane.
Jeśli wartość htmlStr nie jest pusta, rozbijemy ją funkcją split() między każdymi ogranicznikami -->, dzięki czemu otrzymamy lokalną tablicę htmlArray. Pętla for kolejno przypisze wartości wszystkim elementom. Warto zaznaczyć, że jest to niemalże identyczna konstrukcja logiczna, jak getPrefs() w pliku prefs.html. Zajrzyjmy do wierszy 110–120 w prefs.html i porównaj je z wierszami 20–32 w pliku dive.html: var htmlArray = htmlStr.split('-->');
for (var i = 0; i < htmlArray.length; i++) {
var tagInfo = htmlArray[i].split('=');
if (tagInfo[0] != "") {
if (tagInfo[0].indexOf('newsNames') == 0) {
newsNames[newsNames.length] = tagInfo[1];
}
else if (tagInfo[0].indexOf('indexNames') == 0) {
164
indexNames[indexNames.length] = tagInfo[1];
}
else { eval(tagInfo[0] + ' = "' + tagInfo[1] + '"'); }
}
}
Twarzą w twarz z nieznanym
Ciekawe getPrefs() w prefs.html wie, że będzie pracować z formularzem opisanym w formObj, przypisuje wartości, pola opcji i wybory stosownie do tego getAttributes() sprawa nie jest tak prosta – trzeba mieć przynajmniej jakieś pojęcie o tym, czego oczekiwać w ciasteczku. Wiemy na przykład, że będą tam pewne informacje o łączach do nowinek inwestycyjnych, jak również łącza do notowań giełdowych. Kto wie, ileż ich tam może być: 0, 10, a może 50? Jako że jest to niewiadoma, obie grupy danych wstawimy do osobnych tablic zdefiniowanych w wierszach 10
i 11:
var newsNames = new Array();
var indexNames = new Array();
Zmienna newsNames będzie miała dane łącz do stron z nowinkami, a indexNames takie same informacje dotyczące notowań giełdowych. Przyjrzyjmy się przykładowej wartości ciasteczka z poprzedniej sekcji. Zwróćmy uwagę na pogrubiony tekst:
investor=Not Provided-->age=Not Provided-->strategy=Moderate-->occupation=Not Provided--
> newsNames0=Barron's Online,http://www.barrons.com/--> newsNames1=CNN
Interactive,http://www.cnn.com/--> newsNames2=Fox News,http://www.foxnews.com/--
> newsNames4=The Wall Street Journal,http://www.wsj.com/--> indexNames0=Dow Jones Indexes,http://www.dowjones.com/--> indexNames2=The New York Stock
Exchange,http://www.nyse.com/-->background=images/fistthumb.gif-->face=tahoma-->size=14--> Pogrubione nazwy oznaczają informacje przeznaczone do umieszczenia we wspomnianych wyżej tablicach. Wiemy teraz, że jakieś zmienne się pojawią, ale o jakich nazwach? Ile ich będzie? Kod w dive.html nie wyjaśni żadnych tajemnic, ale to nie szkodzi. Jeśli tylko wiemy jakie są nazwy zmiennych, nie trzeba wszystkiego kodować w dive.html.
Aby to zrozumieć, przyjrzyj się jeszcze raz przykładowej wartości uzyskanej z GetCookies('htmlPrefs'), zwracając znowu uwagę na pogrubiony tekst:
investor=Not Provided--> age=Not Provided--> strategy=Moderate--> occupation=Not Provided--
>newsNames0=Barron's Online,http://www.barrons.com/-->newsNames1=CNN
Interactive,http://www.cnn.com/-->newsNames2=Fox News,http://www.foxnews.com/--
>newsNames4=The Wall Street Journal,http://www.wsj.com/-->indexNames0=Dow Jones
Indexes,http://www.dowjones.com/-->indexNames2=The New York Stock