[ Pobierz całość w formacie PDF ]
.c) +makeButton("d", units[qIdx].d) +'';qFrame.location.replace("javascript: parent.frames[0].nextQ");qIdx++;if(qIdx >= 2 && !stopOK) { stopOK = true; }}PrzeœledŸmy wszystko po kolei: najpierw buildQuestion() sprawdza, czy zmiennaqIdx równa jest zmiennej howMany.Jeœli tak, u¿ytkownik odpowiedzia³na ostatnie pytanie i przyszed³ czas na ocenê.Funkcja gradeTest() wywo³ywanajest w wierszu 40.Techniki jêzyka JavaScript:mieszanie zawartoœci tablicyW naszym teœcie zmieniamy przypadkowo uk³ad elementów tablicy.Jest tozachowanie po¿¹dane w przypadku tej aplikacji, ale nietrudno przychodzi te¿zapisywaæ inne, bardziej kontrolowane metody przestawiania danych w tablicy.Poni¿sza funkcja jako parametry przyjmuje kopiê tablicy do uporz¹dkowania orazliczbê ca³kowit¹, wskazuj¹c¹, co ile jej elementy maj¹ byæ porz¹dkowane:function shakeUp(formObj, stepUp) {setUp = (Math.abs(parseInt(stepUp)) > 0 ?Math.abs(parseInt(stepUp)) : 1);var nextRound = 1;var idx = 0;var tempArray = new Array();for (var i = 0; i < formObj.length; i++) {tempArray[i] = formObj[idx];if (idx + stepUp >= formObj.length) {idx = nextRound;nextRound++;}else {idx += stepUp;}}formObj = tempArray;}Jeœli na przyk³ad tablica ma 10 elementów i porz¹dkujemy je co drugi (0, 2, 4,6, 8, nastêpnie 1, 3, 5, 7, 9), wywo³ujemy shakeUp(twojaTablica, 2).Jeœliprzeka¿emy 0, domyœlny przyrost to 1.Wiêcej tego typu funkcji znajdzieszw rozdziale 6.Jeœli test jeszcze siê nie skoñczy³, buildQuestion() idzie dalej, co oznacza,¿e generowana jest treœæ nastêpnego pytania w postaci strony HTML (wiersze 43do 50).Jeœli zbada siê nextQ, mo¿na zauwa¿yæ, ¿e strona ta zawiera wskaŸniknumeru pytania i ca³kowit¹ liczbê pytañ testu.Oto wiersz 44:'Pytanie ' + (qIdx + 1) + ' z ' + howMany + ''Dalej znajdziemy otwieraj¹cy znacznik FORM, a za nim treœæ pytania.Wartopamiêtaæ, ¿e treœæ znajduje siê we w³aœciwoœci question poszczególnychelementów units.Nie nale¿y byæ zatem zaskoczonym, ¿e wiersz 45 wygl¹danastêpuj¹co:'' + '' + units[qIdx].questionW pobli¿u elementu formularza FORM znajduj¹ siê te¿ same elementy formularza.Tak naprawdê s¹ one ca³¹ reszt¹ strony HTML.Ta formatka ma tylko czteryelementy, a wszystkie s¹ opcjami radio.Zamiast kodowaæ wszystko w HTML,funkcja makeButton() te wszystkie opcje (niemal¿e identyczne) tworzy.Wystarczy jedynie przekazywaæ jej literê odpowiedzi i tekst tej odpowiedzi, cowidaæ w wierszach 46 do 49.Oto funkcja makeButton() z wierszy 55–59:function makeButton(optLtr, optAnswer) {return '' + optAnswer + '';}Funkcja po prostu zwraca tekst opisuj¹cy jedn¹ opcjê radio z odpowiednioustawionym atrybutem VALUE (a, b, c lub d) oraz tekst odpowiedzi umieszczanyna prawo od opcji.Atrybut VALUE pochodzi z optLtr, a tekst z optAnswer.Warto pamiêtaæ, ¿e test reaguje na dzia³ania u¿ytkownika, wiêc automatycznieprzechodzi dalej, kiedy tylko u¿ytkownik udzieli odpowiedzi.W jêzykuJavaScriptu oznacza to, ¿e ze zdarzeniem onClick opcji musi byæ zwi¹zanychkilka kolejnych dzia³añ.Po pierwsze – w tablicy keeper nale¿y zarejestrowaæ odpowiedŸ u¿ytkownika.Abysprawdziæ, który element nale¿y przypisaæ wyborowi, u¿ywamy poni¿szegowyra¿enia:parent.frames[0].qIdx - 1Zmienna qIdx „pamiêta” numer aktualnej odpowiedzi, wiêc œwietnie nadaje siêdo okreœlenia kolejnej odpowiedzi u¿ytkownika.Nastêpnie JavaScript musi wywo³aæ buildQuestion(), aby pokazaæ nastêpne pytanielub oceniæ test, jeœli zosta³ on zakoñczony.Zwróæmy uwagê, ¿e do keeperi do buildQuestion() odwo³ywaliœmy siê na pocz¹tku parent.frames[0].Informacja ta zostanie zapisana w ramce parent.frames[1], wiêc bêdziemymusieli dostaæ siê do górnej ramki.Kiedy ju¿ mamy gotowy formularz, trzeba jeszcze tylko (jeœli chodzi o HTML)pozamykaæ znaczniki i za³adowaæ treœæ do okna – wiersze 50 i 51:'';qFrame.location.replace("javascript: parent.frames[0].nextQ");Wartoœæ nextQ ³adowana jest do dolnej ramki.Zauwa¿my, ¿e w aplikacji u¿ywanajest metoda replace obiektu location, nie ustawiamy wiêc tym razem w³aœciwoœcilocation.href ani nie stosujemy document.write().W tej aplikacji jest toistotne.Funkcja replace() ³aduje wskazany adres URL do przegl¹darki (w naszymprzypadku adres URL to napis HTML rozwijany przez u¿ycie protoko³ujavascript:), przy czym nowa strona zastêpuje bie¿¹c¹.Dziêki temu u¿ytkowniknie mo¿e wróciæ do strony wczeœniejszej ani zmieniaæ odpowiedzi.Jeœliu¿ytkownik wciœnie w przegl¹darce przycisk Back, za³aduje siê strona, któraby³a ogl¹dana przed index.html.Ostatni¹ rzecz¹, któr¹ trzeba zrobiæ przed opuszczeniem funkcjibuildQuestion(), jest drobne uporz¹dkowanie, pokazane w wierszach 52–53:qIdx++;if(qIdx >= 2 && !stopOK) { stopOK = true; }Zwiêkszenie qIdx o 1 przygotowuje sytuacjê do nastêpnego wywo³aniabuildQuestion().Pamiêtaj, ¿e w wierszu 39 sprawdzamy, czy qIdx jest wiêkszaod liczby pytañ w teœcie (zmienna howMany); jeœli tak, czas na ocenê.Instrukcja if z wiersza 53 sprawdza, czy u¿ytkownik zamierza przerwaæ test.Kodw obecnej jego postaci wymaga udzielenia odpowiedzi na przynajmniej jednopytanie.Jeœli u¿ytkownik chce, mo¿e to ju¿ sam poprawiæ.Techniki jêzyka JavaScript:protokó³ javascript:Wczeœniej ju¿ zetknêliœmy siê z powy¿szym protoko³em w tej ksi¹¿ce.Protokó³ten pozwala JavaScriptowi ewaluowaæ dowolne wyra¿enie
[ Pobierz całość w formacie PDF ]