SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Wykład 3 1
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Przykład Bingo 2
Treść przykładu Jak wygląda karta do Bingo? Typowa karta składa się z kwadratów ułożonych w tabelę o wymiarach 5x5. Nagłówki kolumn oznaczane są literami B-l-N-G-O, a w pozostałych polach wpisywane są liczby z zakresu od I do 75. Na samym środku znajduje się pole puste, w które często wpisywane jest słowo Wolne. W poszczególnych kolumnach dopuszcza się liczby z określonego zakresu: kolumna B może zawierać liczby od I do 15; kolumna I może zawierać liczby od 16 do 30; kolumna N może zawierać liczby od 31 do 45; kolumna G może zawierać liczby od 46 do 60; kolumna O może zawierać liczby od 61 do 75. Przykład pochodzi z książki: Negrino Tom, Smith Dori, Po prostu JavaScriopt i Ajax, wydanie VI, Helion, Gliwice 2007. 3
Szkielet karty 4
Szkielet karty 5
Szkielet karty 6
Bingo v. 0.1 Math.floor funkcja zaokrąglająca w dół (obcina część po przecinku) Math.random losuje liczbę rzeczywistą z zakresu <0;1) Linia 7: identyfikator budowany jest z części square i kolejnego numeru. Otrzymujemy kolejno {square0; square1;square2...sguare23} 7
Bingo v. 0.15 - funkcje Linia 5: Funkcja setsquare() wywołana jest z parametrem i Linia 9: Definicja funkcji setsquare(thissquare) thissquerw parametr formalny 8
Bingo v. 0.19 wykrywanie obiektów Linia 4: metoda getelementbyid (wywołana w linii18) przyjmuje wartość TRUE jeżeli obiekt został znaleziony. 9
TABLICE var nazwa_tab=array(rozmiar_tablicy); np.: var tablica=array(10); tablice o niezdefiniowanej długości można tworzyć za pomocą konstruktora new np. var tab1=new Array(); var tab2=new Array("Rok","2000"); var tablica = new Array("wart1", "wart2", "wart3"); odwołania do elementów tablicy np.: tab2[0] numerowanie elementów tablicy od 0 10
TABLICE Chcemy ograniczyć zakres liczb losowych wpisywanych do konkretnej kolumny. Najprościej będzie to zrobić poprzez przypisanie do każdej kolumny osobnego numeru (B: 0, I: 1, N: 2, G: 3, O: 4) i odpowiednie obliczanie liczb, jakie mogą znaleźć się w danej kolumnie, za pomocą wzoru: (numer kolumny * 15)+ (liczba losowa z zakresu 1-15). 11
TABLICE Niestety, tabele HTML układane są w kolejności komórek, a nie w kolejności kolumn, co oznacza, że najpierw będziemy poprawiać zawartość pierwszego wiersza, następnie drugiego itd. Nie mamy możliwości poprawienia najpierw pierwszej kolumny, potem drugiej, trzeciej itd. Problem ten rozwiązać mona tworząc tablicę gdzie zapisany jest numer kolumny, do którego należy każda z interesujących nas komórek. 12
Bingo v. 0.2 13
Bingo v. 0.25 funkcja zwracająca wartość 14
Bingo v. 0.3 zabezpieczenie przed powtórzeniami 15
Bingo v. 0.3 zabezpieczenie przed powtórzeniami Jeżeli pozycja newnum w tablicy usednum ma wartość false (reprezentowana jest przez znak wykrzyknika (!) umieszczony przed wyrażeniem, który oznacza negację), to wpisujemy do niej wartość true, a do tabeli wpisujemy wylosowaną wcześniej liczbę. Jeżeli w pozycji tej jest już wartość true, to nie robimy nic, dzięki czemu na karcie nie będą pojawiały się duplikaty liczb, ale za to mogą wystąpić niewypełnione pola Dlaczego deklarowana tablica ma mieć 76 pozycji? Po prostu chcemy korzystać z wartości od 1 do 75. Jeżeli tablica zostałaby zainicjowana na 75 pozycji, to ich numeracja zaczynałaby się od 0, a kończyła na 74. Dzięki 76 pozycjom w tablicy możemy korzystać z indeksów o numerach od 1 do 75 i spokojnie ignorować pozycję zerową. Jeżeli wartości logiczne nie zostaną zainicjowane, to automatycznie otrzymają wartość fałszu. 16
Bingo v. 0.9 - pętla DO... WHILE 17
Bingo v. 0.9 - pętla DO... WHILE Instrukcja whi1e powoduje powtarzanie całego bloku do do czasu, aż wpisany w nawiasach warunek zwróci wartość false. W tym przypadku wykorzystujemy wartość newnum jako indeks w tablicy usernums[ ] aby w ten sposób sprawdzić, czy wylosowana liczba została już użyta. Jeżeli tak, to skrypt powraca na początek sekcji do i cały proces zaczyna się od początku. W końcu uda się nam wylosować liczbę, która jeszcze nie pojawiła się na karcie. W takiej sytuacji pętla zostanie zakończona, a w odpowiednim miejscu w tablicy usednums [ ] zapisana zostanie wartość true. Na koniec wylosowana liczba wpisywana jest we właściwe pole na karcie. 18
Bingo v. 1.0 19
Bingo v. 1.0 20
Bingo v. 1.0 Funkcja ta wykonuje trzy operacje: wszystkim pozycjom w tablicy usednums[ ] przypisuje wartość false (dzięki temu można ponownie losować liczby do karty); wywołuje funkcję newcard( ), która generuje nową kartę; zwraca wartość false, przez co przeglądarka nie będzie próbowała załadować strony zapisanej w atrybucie href klikniętego łącza. 21
Obsługa wielu przycisków 22
Obsługa wielu przycisków 23
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Literatura: Negrino Tom, Smith Dori, Po prostu JavaScriopt i Ajax, wydanie VI, Helion, Gliwice 2007. 24