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,