Wykład 3: Tablice i funkcje - Przykład BINGO
Transkrypt
Wykład 3: Tablice i funkcje - Przykład BINGO
SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Wykład 3 1 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Przykład – „Bingo” 2 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Szkielet karty 4 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Szkielet karty 5 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Szkielet karty 6 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Bingo v. 0.19 – wykrywanie obiektów Linia 4: metoda getElementById (wywołana w linii18) przyjmuje wartość TRUE jeżeli obiekt został znaleziony. 9 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Bingo v. 0.2 13 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Bingo v. 0.25 – funkcja zwracająca wartość 14 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Bingo v. 0.3 – zabezpieczenie przed powtórzeniami 15 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Bingo v. 0.9 - pętla DO .... WHILE 17 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Bingo v. 1.0 19 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Bingo v. 1.0 20 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Obsługa wielu przycisków 22 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, I. Przekierowania Obsługa wielu przycisków 23 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania, 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 dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,