< 4 >

Informa tyka +

Zajęcia mają na celu przeds tawienie możliwości ję zyka Java Script (JS) do wzbogacania s tron i serwis ów
WWW o elementy interaktywne i graficzne. Na wykładzie zos taną zademons trowa ne efekty wykorzys ta-
nia fragmentów języka JS na s tronach interne towych. Druga część wykładu będzie łagodnym wprowa-
dzeniem do pods tawowych konstrukcji tego języka, omówione zos taną: zmienne, ins trukcje iteracyjne
i warunkowe, liczby, napis y i tablice.

Wa rszta ty będą oka zją do praktycznego przećwiczenia wprowadzonych na wykładzie elementów języ-

ka JS. Głównym celem zajęć praktycznych będzie utworzenie wła snego programu do zaba wy w Sudoku. Pro-
gram bę dzie mógł być zintegrowany z serwis em, na którym np. mogłyby być organizowane konkurs y Sudoku.

Do wzięcia udzia łu w tych zajęciach przydatna będzie, ale nie jes t wymagana , elementarna znajomość

ję zyka HTML i programowania w jakimkolwiek ję zyku.

Planuje s ię zorganizowanie dla uczes tników Projektu Informa tyka + konkursu s erwis ów internetowych do roz-
grywek w Sudoku.

1. Wstęp

................................................................................................................................................. 5

2 . Wymagania w s tos unku do ucze stników i sprzę tu ........................................................................................ 5

3. Przebieg wars ztatów .................................................................................................................................... 6

3.1. Używanie ję zyka JS ........................................................................................................................... 6

3.2. Ins talujemy program Firebug ............................................................................................................. 6

3.3. Ins talujemy bibliotekę jQuery ............................................................................................................ 7

3.4. Za s tępowanie zawartoś ci elementów ................................................................................................. 8

3.5. Pę tla for ............................................................................................................................................. 8

3.6. Ins trukcja if ........................................................................................................................................ 9

3.7. Funkcje ............................................................................................................................................ 10

3.8. Zmienne i ich zas ięg ........................................................................................................................ 10

3.9. Obsługa napis ów i liczb .....................................................................................................................11

3.10. Tablice .............................................................................................................................................. 14

3.11. Dynamiczne nadawanie elementom wła ś ciwości .............................................................................. 15

3.12. Reagowanie na akcje użytkownika ................................................................................................... 16

3.13. Pomys ły na dals ze rozs zerzenia ...................................................................................................... 17

Literatura

............................................................................................................................................... 17

Dodatek. Lis ting programu ............................................................................................................................. 18

> Do czego można wykorzystać ję zyk Java Script

< 5 >

W trakcie wars ztatów przygotujemy przy użyciu języka Java Script program do zaba wy w Sudoku. Program zre -
alizujemy w taki sposób, aby możliwe było w miarę łatwe jego zintegrowanie z więks zym serwis em, na którym
np. mogłyby być organizowane konkurs y Sudoku.

Sudoku jes t łamigłówką logiczną. Na kwadra towej plans zy 9x9, w niektórych jej polach s ą wpis ane liczby od
1 do 9. Należy uzupe łnić plans zę liczbami od 1 do 9 tak, aby w żadnym wiers zu, w ża dnej kolumnie , ani w żad-
nym z dzie więciu głównych kwadra tów (patrz rys. 1) nie powtarzała się ta s ama liczba i aby ws zys tkie kwa-
draty były wypełnione.

Pos taramy się zaprogramować planszę poka zaną na rys. 1. :

Rysunek 1.
Przykładowa , wype łniona poprawnie plans za Sudoku

Przyjmujemy, że na s z program bę dzie miał na s tępujące funkcjonalnoś ci:

1.  Dzia ła w przeglądarce WWW.
2.  Wyś wietla za gadkę Sudoku.
3.  Umożliwia wprowadzanie rozwią zania.
4.  Spra wdza , czy rozwią zanie jes t poprawne.

Wypos a żenie i wymagania niezbędne do realizacji postawionego zadania:

1. Przeglądarka WWW, najlepiej Firefox, ze względu na to, że w nota tkach do wars ztatów używamy programu

Firebug, ale może być dowolna inna przeglądarka, byleby tylko uczes tnik wars ztatów umiał w niej debugo-
wać.

2. Dos tęp do Internetu w celu zains talowania oprogramowania jQuery i Firebug.
3. Edytor teks tu. Najleps zy byłby edytor podkre ślający s kładnię HTML i Java Script (np. Geany), a le może być

też notatnik w Windows .

< 6 >

Informa tyka +

Niezbędne są dwie rze czy:

1. Znajomoś ć HTML w pods tawowym zakresie, czyli: co to je st tabelka , formularz, odnośnik i ja k to wszys tko

zapis ać w pos taci s trony HTML.

2. Znajomoś ć pods taw programowania w dowolnym języku w zakresie: co to jes t zmienna , pętla i funkcja .

Składnię i tak będziemy poznawać na bieżąco w miarę potrzeb.

Nauczymy się pods taw korzys tania z ję zyka Java Script(JS). Spróbujmy policzyć, ile to jes t 3*(2+1). W tym celu:

■

otwieramy edytor teks tu w którym można edytować źródła HTML (np. Notatnik, edytor vim lub podobny);
wklejamy do niego teks t, który jes t poniżej; .

■

zapisujemy ten teks t w pliku pod nazwą kalkula tor.html;

■

otwieramy ten plik w przeglądarce.
Oto tekst źródłowy kalkulatora:

<html>

<head><title>kalkulator</title></head>

<body>

alert(3*(2+1));

</script>

</body>

</html>

Jeśli ws zys tko zrobiliśmy dobrze, to na s tronie powinno się poka zać okienko z napisem 9, bo 3*(2+1) = 9. Za -
uwa żmy, że to pros te ćwiczenie przekonuje nas , iż potrafimy już:

1.  Napisa ć program w JS.
2.  Wstawić program w JS do dokumetu w ję zyku HTML.
3.  Uruchomić program w JS.
4.  Wyś wietlić źródłowy teks t programu (kla wisze Ctrl+U w przeglądarce Firefox).
5.  Uruchomić program jes zcze ra z – w tym celu przeładowujemy s tronę (klawis ze Ctrl+R w Firefox).

1. Sprawdź, czy poprawnie są wykonywane pozostałe operacje arytmetyczne (+, i, *, / ).
2. Ponadto, s pra wdź:

■

Ile to jes t (11 % 3) i dlaczego?

■

Ile to jes t (11 / 3) i dlaczego?

■

Ile to jes t (Math.round(11/ 3))?

■

Ile to jes t (3+1= =4)?

■

Ile to jest (2+4/7>1)?

Mogłoby się wydawać, że teraz powinniśmy zacząć pisać nasze Sudoku, ale wstrzymajmy się z tym na chwilę. Zainsta-
lujmy najpierw program Firebug, bedący rozszerzeniem przeglądarki Firefox, który pomoże nam w debugowaniu nasze-
go programu, czyli w znajdowaniu i poprawianiu w nim błędów. Aby zainstalować program Firebug, należy wejść na stro-
nę: https://addons.mozilla.org/ pl/ firefox/addon/ 1843, nacisnąć przycisk Instaluj i postępować zgodnie z instrukcją.

Po zrestartowaniu przeglądarki zauwa żymy małego robaczka w prawym dolnym rogu – to oznacza, że pro-

gram Firebug został zainstalowany. Zmieńmy kod programu i wpis zmy alert(3*(2+1); – usunęliśmy ostatni na-
wias zamykajacy. I nic się nie s tało. To dlatego, że Firebug nie wie, że chcemy, żeby działał. Klikamy na jego ikon-
ce (ten robaczek) i zaznaczamy pola Konsola i Skrypt, a następnie klikamy przycisk Włącz wybrane panele dla Pli-
ków lokalnych – patrz rys. 2.

> Do czego można wykorzystać ję zyk Java Script

< 7 >

Rysunek 2.
Uaktywnienie programu Firebug

Po tej zmianie zauwa żymy, że w na s zym skrypcie je st jeden błąd, a po jego kliknię ciu na polu, w którym je st
wyś wie tlana informacja o błędzie zobaczymy, na czym ten błąd polega i w którym jes t wiers zu, pa trz rys . 3.

Rysunek 3.
Sygnalizacja błędu w s krypcie JS

Zakła dam, że od tej pory ucze stnik wars ztatów sam będzie sobie radził z błędami w składni JS.

Nie będziemy pisa ć w „czys tym” języku Java Script, tylko s korzys tamy z pomocy biblioteki jQuery. Ścią ga-
my ją ze s trony http:// jquery.com/ klikając przycisk Download(jQuery), a potem jes zcze ra z na na zwie pliku
z aktualną wersją biblioteki (np.jquery-1.3.2.min.js). Na s tępnie zmieniamy na zwę ś ciągniętego pliku na jqu-
ery.js i umies zczamy go w katalogu z innymi plikami, nad którymi pracujemy. Nas ze Sudoku będzie korzys ta-
ło z jQuery.

Aby spra wdzić, czy wszys tko jes t w porzą dku, zaczniemy tworzyć na s ze Sudoku. Niech ma ono na ra-

zie nas tępującą postać:

<html>

  <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>
    <title>Sudoku</title>
    <script type=”text/javascript” src=”jquery.js”></script>
      <script type=”text/javascript”>
      $(document).ready(function(){
          alert(“Wczytane”);
      })
      </script>
  </head>
  <body>
    <div id=’plansza’>Miejsce na planszę </div>
  </body>

</html>

< 8 >

Informa tyka +

Jeśli wszys tko zrobiliśmy poprawnie , to po wczytaniu całej s trony zos tanie wyś wietlone okienko z napis em

Wczytane

. Jeśli coś jes t źle , to sprawdź za pomocą programu Firebug, czy nie popełniłeś błę du. Może nie

przegrałeś w dobre miejsce pliku jquery.js? Może źle się on na zywa?

W jaki sposób jes t wyś wie tlany napis Wczytane?

$(document).ready(function(){

alert(“Wczytane”);

})

JQuery udos tępnia funkcję $(document).ready(function(){ ... }, gdzie w miejsce trzech kropek możemy wpi-
sać dowolny program w JS, który powinien zos tać uruchomiony po załadowaniu s trony. W tym przypadku ten pro-
gram składa się z jednej ins trukcji alert(“Wczytane”), która powoduje wyś wietlenie okienka z napisem Wczy-

tane

. Teraz powinniśmy się zabrać za wyświetlenie planszy.

Najproś ciej byłoby przygotować planszę w języku HTML. Nale żałoby zrobić tabelę, s kładającą się z dziewię -
ciu wiers zy, ka żdy z nich składający się z dzie więciu kolumn a w ka żdej z kolumn je dno pole do wprowadza -
nia wyników. Czyli należa łoby napis ać coś takiego:

<tr><td><input ...><td>.....</tr>
.....

</table>

Widać, że utworzenie takiej tabeli jes t bardzo pros te. Za łóżmy, że na sza plans za byłaby mniejs za, np. taka:

Gdybyśmy od kogoś dos tali zmienną , zawierającą taką plans zę w postaci napis u, to na s zym je dynym za da -
niem byłoby spowodowanie , aby zos ta ła wyś wietlona plans za w bloku <div id=’plansza’>. Jak to zrobić
w JS? Zamieńmy skrypt, który mamy na na s tę pujący:

  plansza = “<table border=1><tr><td>1<td>2<tr><td>3<td>4</table>”
  $(document).ready(function(){
        $(“#plansza”).html(plansza);
  })

</script>

i przeładujmy s tronę. W tej chwili już nie pokazuje się okienko z napisem Wczytane. Dzieje się coś dużo ciekawsze-
go – jest wyś wietlana nasza plansza. Jak do tego doszło?

W wiers zu skryptu na zmienną plansza jes t przypis ywana wartoś ć <table> ....</table>. W wiers zach
2.-4. jes t tworzona funkcja, która zos tanie uruchomiona po wyś wie tleniu HTML. W wierszu 3. zawartoś ć ele -
mentu o identyfikatorze plansza, je st za s tępowana przez wartoś ć zmiennej plansza.

Kons trukcja $(”#identyﬁ kator”).html(wartoś ć ), us tawia wartoś ć elementu o identyfikatorze (atry-
but id w HTML) identyﬁ kator.

Tera z tylko potrzebujemy zbudowa ć plans zę.

Wyobra źmy s obie , jak na s za plansza mogłaby wygląda ć? Dobrze, gdyby była kwadratowa i gd yby ka żde jej
pole można było jednoznacznie zidentyfikowa ć. Powie dzmy, że pierws zy wiers z zawiera pola z identyfikato-

> Do czego można wykorzystać ję zyk Java Script

< 9 >

rami 11, 12, 13, ..., 19. Drugi 21, 22, ..., 29, i tak dalej, a ż do 91, 92, ..., 99. Aby zbudować taką planszę potrze -
bujemy dzie więć wierszy po dziewię ć kolumn ka żdy. Aby powtórzyć jakąś operację dziewię ć ra zy wykorzys ta -
my pętlę for, która w JS ma taką s amą pos tać jak w ję zyku Java czy C:

for(i = 1; i <= 9; i++)

Ta pętla zos tanie wykonana dziewię ć ra zy z wartoś ciami i = 1, 2, 3, ..., 9. Popa trzmy na program:

$(document).ready(function(){

  plansza = “<table border=1>”
  for(i = 1; i <= 9; i++)
  {
    plansza += “<tr>”;
    for(j = 1; j <= 9; j++)
    {
      plansza += “<td>”;
      plansza += i * 10 + j;
      plansza += “</td>”;
    }
    plansza += “</tr>”;
  }
  plansza += “</table>”
  $(“#plansza”).html(plansza);

})

Ten program zawiera dwie pę tle for. Ze wnę trzną, s terowaną zmienną i ora z wewnę trzną – s terowaną
zmienną j. Zewętrzna pętla buduje wiersze, a we wnę trzna – kolumny. Używamy w tym programie kilku cie -
kawych konstrukcji:

1. plansza += <napis> – ta ins trukcja dokleja napis do plans zy.
2. plansza += <liczba> – poniewa ż plansza jes t napisem, to liczba zos tanie

również skonwertowana do napisu i zos tanie doklejona do plans zy.

3. i++ – ta kons trukcja językowa powoduje zwięks zenie wartoś ci i o jeden. Oznacza ona to s amo,

co i = i + 1.

4. for(i = 1; i <= 9; i++) – to jes t pę tla for. Najpierw wartość i jes t us tawiana na jeden.

Na s tępnie s pra wdzane jes t, czy i jes t mniejs ze lub równe dzie więć. Jeśli tak, to jes t wykonywana
ins trukcja pętli i wartoś ći jes t zwiększana o jeden. I znowu jes t sprawdzane,
czy i <= 9, jeśli tak, to wykonywana jes t pętla, i jes t podnos zone o jeden itd.

1. Jaką wartoś ć ma zmienna plansza prze d przypis aniem jej do elementu #plansza? Możes z to s prawdzić

na co na jmniej dwa sposob y, u żywa jąc ins trukcji alert lub używając de buggera wbudowane go
w program Firebug.

2. Dodaj do planszy kolumnę i wiers z z numeracją.
3. Wyróżnij (np. za pomocą szarego tła) co drugi wiers z.

Gdy chcemy sprawić, aby fragment programu wykonał się jedynie po spe łnieniu jakie goś warunku, używamy
ins trukcji if. Jej składnia jes t podobna do składni w językach C i Java:

if (a == 0)

{

alert(‘a jest równe zero!);

}

< 10 >

Informa tyka +

Jeśli będziemy nas z program rozwijać w podobny spos ób, to za chwilę s tanie się nieczytelny. Dla te go podzie -
limy go na logiczne fra gmenty przy użyciu funkcji. Funkcje w JS zachowują się inaczej niż w typowych języ-
kach programowania . Nie jes t s prawdzane , czy do funkcji jes t przeka zywana odpowiednia liczba parame -
trów. Funkcja może zwracać s wój wynik, ale nie musi. Nie jest sprawdzany typ tego wyniku, czyli funkcja może
cza sem zwraca ć liczbę, a czas em napis.

Wydzielmy tera z z nas ze go programu funkcję budującą planszę:

function Plansza(rozmiar)

{

  plansza = “<table border=1>”
  for(i = 1; i <= rozmiar; i++)
  {
    plansza += “<tr>”;
    for(j = 1; j <= rozmiar; j++)
    {
      plansza += “<td>”;
      plansza += i * 10 + j;
      plansza += “</td>”;
    }
    plansza += “</tr>”;
  }
  plansza += “</table>”
  return plansza;

}

$(document).ready(function(){

$(“#plansza”).html(Plansza(6));
})

W nas zym programie pojawiła się funkcja Plansza. Pobiera ona jeden parametr rozmiar i zwraca zbudo-
waną plans zę za pomocą instrukcji return.

Moglibyśmy tera z wpa ś ć na pomys ł, aby podzielić funkcję budującą planszę na dwie czę ści, z których jedna
bę dzie budować wiers ze , a druga składać je w ca łoś ć. Przyjrzyjmy się na s tę pującemu programowi:

function Wiersz(numer,rozmiar)

{

  wiersz = “<tr>”;
  for(i = 1; i <= rozmiar; i++) //UWAGA: zmieniliś my j na i!
  {
    wiersz += “<td>”;
    wiersz += numer * 10 + i;
    wiersz += “</td>”;
  }
  wiersz += “</tr>”;
  return wiersz;

}

function Plansza(rozmiar)

{

  plansza = “<table border=1>”
  for(i = 1; i <= rozmiar; i++)
  {
    plansza += Wiersz(i, rozmiar)

> Do czego można wykorzystać ję zyk Java Script

< 11 >

  }
  plansza += “</table>”
  return plansza;

}

$(document).ready(function(){

$(“#plansza”).html(Plansza(6));

})

Ten program wygląda całkiem poprawnie, prawda? Nies tety ma jedną wadę. Źle działa. Co się dzieje? Otóż
ws zys tkie zmienne, których używamy wewnątrz funkcji s ą globalne. To znaczy, że zmienna i używana w pę -
tli for w funkcji Plansza, to ta sama zmienna i, która jes t używana w pętli for w funkcji Wiersz. W funk-
cji Wiersz ta zmienna zostanie podniesiona do wartoś ci 6 i pętla w funkcji Plansza zos tanie wykonana tyl-
ko ra z. Podobnie zmienne wiersz i plansza s ą globalne! Co z tym zrobić? W ję zyku JS do zdefiniowania
zmiennej lokalnej służy słowo kluczowe var. Popra wmy za tem nas z program:

function Wiersz(numer,rozmiar) //aa

{

  var wiersz = “<tr>”;
  for(var i = 1; i <= rozmiar; i++)
  {
    wiersz += “<td>”;
    wiersz += numer * 10 + i;
    wiersz += “</td>”;
  }
  wiersz += “</tr>”;
  return wiersz;

}

function Plansza(rozmiar)

{

  var plansza = “<table border=1>”
  for(var i = 1; i <= rozmiar; i++)
  {
    plansza += Wiersz(i, rozmiar)
  }
  plansza += “</table>”
  return plansza;

}

$(document).ready(function(){

$(“#plansza”).html(Plansza(6));

})

</script>

Tera z ten program powinien już działać poprawnie. Zwróćmy uwagę na kons trukcję $(“#plansza”).htm-

l(Plansza(6))

; Wywołuje ona funkcję Plansza z parametrem 6, a jej wynik przeka zuje do funkcji html,

która us tawia go jako zawartość elementu #plansza.

1. Zmodyfikuj nas z program tak, aby wyś wietlał tabliczkę mnożenia (z nagłówkiem).
2. Napis z program, który wyś wie tli trzy plans ze o bokach 5, 7 i 9, jedna pod drugą .

Czas zas tanowić się, w jaki sposób będziemy przechowywać nasze Sudoku. Ze względów technicznych (łatwość
przes yłania po sieci) dobrym formatem jes t przechowywanie Sudoku w pos taci 81 znakowego napisu (czytanego

< 12 >

Informa tyka +

od lewej do prawej z góry w dół) z zerami w miejscach, które pozostają do wype łnienia przez użytkownika. Opis Su-
doku z rys. 1 wraz z funkcją budującą plans zę mógłby mieć następująca pos tać:

var opisPlanszy =

“020730001” +

“009010047” +

“000208900” +

“000600802” +

“207853406” +

“804007000” +

“003405000” +

“640080700” +

“100072090”;

function wspolrzedne(i)

{

if (i < 0 || i > 80) alert(“wspolrzedne: zle dane”);
return Math.ﬂ oor(i/9) + 10 * (i % 9) + 11;

}

function Plansza(opis)

{

  var i;
  plansza = “<table>”;
  for(i = 0; i < opis.length; i++)
  {
    if (i % 9 == 0) plansza += “<tr>”;
    plansza += “<td class=’ﬁ eld’ id=’td”+ wspolrzedne(i) +”’>”;
    if (opis[i] == ‘0’)
    {
      plansza += “<input type=’text’ size=’1’ maxlength=’1’ id=’i”
        + wspolrzedne(i) + “’>”;
    }
    else
    {
      plansza += “<input type=’text’ size=’1’ maxlength=’1’ readonly= ‘’ id=’i”
        + wspolrzedne(i) + “’ value=’”+opis[i]+”’>”;
    }
    plansza += “</td>”;
    if (i % 9 == 8) plansza += “</tr>”;
  }
  return plansza+”</table>”;

};

$(document).ready(function(){

$(“#plansza”).html(Plansza(opisPlanszy));

})

Math

(formalnie jes t to obiekt) udos tępnia w JS nas tępujące funkcje:

■

Math.abs(a)

// warto

ś ć bezwzglę dna a

■

Math.ceil(a)

// suﬁ t a

■

Math.ﬂ oor(a)

// pod

ł oga a

■

Math.max(a,b)

// maksimum z a i b

> Do czego można wykorzystać ję zyk Java Script

< 13 >

■

Math.min(a,b)

// minimum z a i b

■

Math.pow(a,b)

// a do pot

ę gi b

■

Math.random()

// pseudolosowa liczba od 0 to 1

■

Math.round(a)

// zaokr

ą glenie a

■

Math.sqrt(a)

// pierwiastek kwadratowy z a

W funkcji wspolrzedne korzys tamy z Math.ﬂ oor(), aby policzyć współrzędne i-tej komórki.

JS udostę pnia m.in. nas tępujące funkcje do obsługi napis ów:

■

napis = “ab” + “ca”

ł ą czenie (konkatenacja) napisów

■

napis == ‘abca’

// porównanie true

■

napis[3]

// czwarta litera napisu, czyli a

■

napis.length

// d

ł ugoś ć napisu, czyli 4

■

napis.indexOf(‘b’)

pozycja pierwszego wyst

ą pienia

// ‘b’ w napisie, czyli 1

■

napis.indexOf(‘e’)

‘e’ nie wyst

ę puje w napisie,

// wi

ę c zwracane jest -1

■

napis.lastIndexOf(‘a’) //

ostatnie wyst

ą pienie ‘a’

// w napisie 3

■

napis.substr(1,2);

od pozycji 1 (czyli drugiej

// litery) zwró

ć dwie litery,

// czyli ‘bc’

1.  Zmień program tak, aby sprawdzał, czy opis plans zy zawiera jedynie cyfry.
2.  Wydziel funkcję generującą p ole input.
3.  Zmień program tak, aby nie prze chodził pętlą po napisie, ale po polach plans zy (jak w przykładach w po-

przednim punkcie).

Na s za plans za nie wygląda ła dnie . Na przykła d nie ma na niej pionowych i poziomych kresek. Spróbujemy to
zmienić. Biblioteka jQuery służy m.in. do nadawania elementom wła ś ciwości HTML. Dodajmy do programu
funkcję rysujKrawedzie i zmodyfikujmy $(document).ready tak, aby z tej funkcji korzystał:

function rysujKrawedzie()

{

  var i;
  for(i = 0; i < 81; i++)
  {
    if ((i + 1) % 3 == 0)
      $(‘#td’+wspolrzedne(i)).css(‘border-right’, ‘3px solid’);
    if (i % 9 == 0)
      $(‘#td’+wspolrzedne(i)).css(‘border-left’, ‘3px solid’);
    if (Math.ﬂ oor(i / 9) % 3 == 0)
      $(‘#td’+wspolrzedne(i)).css(‘border-top’, ‘3px solid’);
    if (i > 71)
      $(‘#td’+wspolrzedne(i)).css(‘border-bottom’, ‘3px solid’);
  }

}

$(document).ready(function(){

$(“#plansza”).html(Plansza(opisPlanszy));
rysujKrawedzie();

})

< 14 >

Informa tyka +

Widzimy tera z, że zmodyfikowaliśmy s zerokości ramki i na sze Sudoku wygląda „ładniej”. Ale jak s ię nam to
udało zrobić? Przyjrzyjmy s ię ins trukcji:

$(‘#td’+wspolrzedne(i)).css(‘border-right’, ‘3px solid’);

#td+wspolrzedne(i)

to napis identyfikujący jedną z komórek ta blicy (wcze śniej rozs ą dnie ponumero-

waliś my ws zys tkie komórki po kolei us ta wiając im wła ś ciwoś ć id), a .css, to funkcja , która us tawia wła ś ci-
woś ć CSS. W tym przypadku usta wiamy prawą ramkę. Inne wa żne wła ś ciwości elementów HTML to:

■

background-color

– kolor tła; a lis ta kolorów: http:// www.w3schools.com/ css/ css _colornames .asp

■

kolory można podawać w formacie #FFFFFF

■

font-weight

– czy czcionka ma być pogrubiona (bold)

■

text-decoration

– możliwoś ć podkre ślenia

■

margin

– cztery (top, bottom, left, right) margines y

■

border

– ra mki (np. border-top: 2px solid red)

■

pudding

– ods tę p od ramki

■

width, height

– s zerokoś ć i wys okoś ć elementu

Jak widzimy na powyżs zym przykładzie, arkuszy s tyli CSS używa się nie tylko do utrzymywania spójnego s ty-
lu na wielu różnych s tronach HTML, ale również do określania te go, w jaki s pos ób ma ją być prezentowane ele -
menty s trony HTML wtedy, gdy mamy do czynienia tylko z jedną stroną. Na leży s tarać s ię oddzielać treś ć s tro-
ny, w ję zyku HTML od jej wyglądu, w pos taci CSS.

1.  Zmień kolor wyś wietlanych liter na czerwony.
2.  Zmień kolor ra mek na ładniejs zy (chyba , że lubisz czarny).
3.  Może uda Ci s ię doprowadzić do tego, żeby teks t w polach do wpis ywania był wyśrodkowany?

Zape wne będziemy chcieli umie ć s prawdzić, czy w wiers zach, kolumnach i kwadratach nie powtarza s ię dwa
ra zy ta s ama liczba . W tym ce lu wa tro mie ć funkcje , które obliczają indeks y komóre k w pos zczególnych wier-
s za ch i kwadra tach. Funkcje te mogłyby zwraca ć ta blice (9-elementowe), za wierające te inde ks y. Napis zmy
je zate m i dołączmy je do progra mu, bo s ię za chwilę przydadzą:

function wiersz(i)

{

  if (i < 1 || i > 9) alert(“wiersz: Zł y wiersz”);
  w = new Array();
  for(k = 10; k <= 90; k+=10)
    w.push(k+i);
  return w;

}

function kolumna(i)

{

  if (i < 1 || i > 9) alert(“kolumna: Zł y argument”);
  w = new Array();
  for(k = 1; k <= 9; k++)
    w.push(i*10 + k);
  return w;

}

function kwadrat(i)

{

> Do czego można wykorzystać ję zyk Java Script

< 15 >

  if (i < 1 || i > 9) alert(“kwadrat: Zł y argument”);
  w = new Array();
  x = ((i - 1) % 3) * 3 + 1;
  y = (Math.ﬂ oor((i - 1) / 3)) * 3 + 1;
  for(dx = 0; dx <= 2; dx++)
    for(dy = 0; dy <= 2; dy++)
      w.push((x + dx) * 10 + dy + y);
  return w;

}

Ka żda z funkcji zwra ca tablicę w. Tablicę tworzymy pis ząc

■

new Array()

– tablica pusta , lub

■

new Array(rozmiar)

– tablica o początkowo us tawionym rozmiarze.

Tablice w JS s ą dynamiczne , czyli nie mają z góry określone go rozmiaru. Elementy dodajemy na konie c tablicy
za pomocą ins trukcji push(). Operacje na tablicach są nas tępujące:

■

new Array(6)

– utworzenie tablicy o s ześ ciu elementach;

■

a[3]

– czwarty element tablicy a;

■

a.length

– rozmiar tablicy a;

■

a.push(‘cd’)

– doda nie cd na konie c tablicy a;

■

a.pop()

– usunięcie elementu z końca tablicy a i jego zwrócenie;

■

a.indexOf(‘ab’)

– szukanie elementu ab w tablicy a;

■

a.splice(2,5)

– usunię cie pięciu elementów począ wszy od trzeciego elementu z tablicy a;

Zadania do s amodzielnego wykonania

1. Wszys tkie zmienne w powyżs zych funkcjach są globa lne. Popraw to.
2. Jak działa wybieranie k-tego kwadratu?

Załóżmy, że chcielibyśmy mieć podś wie tlony wiers z i kolumnę , nad którą znajduje się wska źnik mys zy. Moż-
na to zrobić us ta wiając odpowiednim elementom wartość background-color na zielony. Ale jak to zrobić?
Z pomocą przychodzi nam znowu biblioteka jQuery. Nadaliśmy już ws zys tkim komórkom klas ę .ﬁ eld. Tera z
wys tarczy, aby po znalezieniu się wska źnika myszy nad jakimś elementem kla s y ﬁ eld zos ta ła podś wietlona
odpowiednia kolumna i odpowiedni wiers z. W tym celu nale ży przygotowa ć funkcję podswietl(element),
która podś wie tla wiersz, kolumnę i kwadra t w którym znajduje się element. Zakładając, że mamy już przy-
gotowane funkcje podswietl i wygas, wys tarczy dołączyć ich obsługę do $(document).ready. Popatrz-
my na nowy fra gment programu.

function podswietlTablice(t)

{

  for(i = 0; i < 9; i++)
  {
    $(‘#td’+t[i]).css(‘background-color’, ‘green’);
  }

}

function podswietl(i)

{

  podswietlTablice(wiersz(i % 10));
  podswietlTablice(kolumna(Math.ﬂ oor(i/10)));
  podswietlTablice(kwadrat(1 + Math.ﬂ oor((i-10)/30) + 3
    * Math.ﬂ oor(((i % 10)-1)/3)));

}

< 16 >

Informa tyka +

function wygas()

{

$(“.ﬁ eld”).css(‘background-color’, ‘transparent’);

}

$(document).ready(function(){

        $(“#plansza”).html(Plansza(opisPlanszy));
        rysujKrawedzie();
        $(“.ﬁ eld”).mouseover(function(){
                podswietl($(this).attr(‘id’).substr(2,2));
        });
        $(“.ﬁ eld”).mouseout(function(){
                wygas();
        });

})

1. Podś wietlanie jes t zrealizowane poprze z us ta wia nie odpowiedniej wła ś ciwości css.
2. Funkcje mouseover i mouseout s ą wykonywane w momencie naje chania wska źnika mys zy na element ta -

blicy i zje chania z nie go.

3. $(this) zwraca element w kontekś cie którego jes t wykonywana funkcja (w na s zym przypadku naje chał lub

zjechał z niego wska źnik mys zy).

4. Bez funkcji wygas tablica po pewnym cza sie cała sta łaby s ię zielona .
5. Kolor tła transparent oznacza bra k koloru, czyli pole jes t przeźroczyste.

1. Niech kolumny i wiersze będą podś wie tlone innym kolorem niż kwadraty.
2. Program dzia łałby bardziej intuicyjnie, gdyby podś wietlane były te pola, które odnoszą się do wybrane go

elementu (mającego focus), a nie tego, nad którym jes t wska źnik mys zy. Odpowiednie zdarzenia (zamia st

mouseover

i mouseout) na zywają się focus i blur.

Pozostało nam jes zcze spra wdzenie , czy Sudoku jes t poprawnie rozwią zane. Rozwią za nie popra wne to ta -
kie , w którym w ka żdym wierszu, kolumnie i kwadracie jes t dzie więć różnych liczb. Musimy jes zcze us talić,
w którym momencie powinniśmy spra wdzać rozwią zanie. Dodamy w tym celu do nas zej s trony link sprawdz,
a je go zdarzenie click (czyli moment w którym na niego klikamy) podepniemy do funkcji, która sprawdza
poprawnoś ć rozwią zania:

function poprawnaTablica(t)

{

  var o = “”
  var result = true;
  for(i = 0; i < 9; i++)
  {
    var v = $(‘#i’ + t[i]).val();
    if (!(v >= ‘1’ && v <= ‘9’)) return false;
    if (o.indexOf(v) != -1) result = false;
    o += v;
  }
  return result;

}

function poprawneRozwiazanie()

{

> Do czego można wykorzystać ję zyk Java Script

< 17 >

  $(“#debug”).html(“”);
  var i;
  for(i = 1; i <= 9; i++)
  {
    if (!poprawnaTablica(wiersz(i))) return false;
    if (!poprawnaTablica(kolumna(i))) return false;
    if (!poprawnaTablica(kwadrat(i))) return false;
  }
  return true;

}

$(document).ready(function(){

        $(“#plansza”).html(Plansza(opisPlanszy));
        rysujKrawedzie();
        $(“.ﬁ eld input”).focus(function(){
                podswietl($(this).parent().attr(‘id’).substr(2,2));
        });
        $(“.ﬁ eld input”).blur(function(){
                wygas();
        });
        $(“#sprawdz”).click(function(event){
                if (poprawneRozwiazanie())
                        alert(“Dobrze”);
                else
                        alert(“Niedobrze”);
        });

})

</script>

</head>

<body>

<div id=’plansza’>Miejsce na planszę </div>
<a href=”#” id=”sprawdz”>Sprawdz</a>

</body>

</html>

Tak przygotowany program powinien sprawdzać poprawnoś ć rozwią zania .

1. Spowoduj, aby program wypis ywał, gdzie i dlacze go je st błąd w rozwią zaniu.

Program można w tym momencie rozs zerzać w wielu kierunkach. Wymienimy klika z nich:

1.  To Sudoku nie wygląda ładnie. Popracuj nad jego wyglądem.
2.  Przydatny byłby licznik cza su, najlepiej taki, który udos tępnia łby funkcję STOP (pauza).
3.  Ciekawy byłby portal, na  którym byłoby wiele Sudoku do rozwią zania.

1. Crockford D., Ja vaScript – mocne strony, Helion, Gliwice 2009
2. Powers S., Ja va Script. Wprowadzenie, Helion, Gliwice 2007

< 18 >

Informa tyka +

Oto pełny lis ting programu, który pis aliś my:

<html>

var opisPlanszy =

“020730001” +

“009010047” +

“000208900” +

“000600802” +

“207853406” +

“804007000” +

“003405000” +

“640080700” +

“100072090”;

function wspolrzedne(i)

{

if (i < 0 || i > 80) alert(“wspolrzedne: zle dane”);
return Math.ﬂ oor(i/9) + 10 * (i % 9) + 11;

}

function Plansza(opis)

{

};

function rysujKrawedzie()

{

var i;
for(i = 0; i < 81; i++)

> Do czego można wykorzystać ję zyk Java Script

< 19 >

  {
    if ((i + 1) % 3 == 0)
      $(‘#td’+wspolrzedne(i)).css(‘border-right’, ‘3px solid’);
    if (i % 9 == 0)
      $(‘#td’+wspolrzedne(i)).css(‘border-left’, ‘3px solid’);
    if (Math.ﬂ oor(i / 9) % 3 == 0)
      $(‘#td’+wspolrzedne(i)).css(‘border-top’, ‘3px solid’);
    if (i > 71)
      $(‘#td’+wspolrzedne(i)).css(‘border-bottom’, ‘3px solid’);
  }

}

function wiersz(i)

{

  if (i < 1 || i > 9) alert(“wiersz: Zł y wiersz”);
  w = new Array();
  for(k = 10; k <= 90; k+=10)
    w.push(k+i);
  return w;
  }

function kolumna(i)

{

  if (i < 1 || i > 9) alert(“kolumna: Zł y argument”);
  w = new Array();
  for(k = 1; k <= 9; k++)
    w.push(i*10 + k);
  return w;

}

function kwadrat(i)

{

}

function podswietlTablice(t)

{

  for(i = 0; i < 9; i++)
  {
    $(‘#td’+t[i]).css(‘background-color’, ‘green’);
  }

}

function podswietl(i)

{

podswietlTablice(wiersz(i % 10));
podswietlTablice(kolumna(Math.ﬂ oor(i/10)));

< 20 >

Informa tyka +

podswietlTablice(kwadrat(1 + Math.ﬂ oor((i-10)/30) + 3
* Math.ﬂ oor(((i % 10)-1)/3)));

}

function wygas()

{

$(“.ﬁ eld”).css(‘background-color’, ‘transparent’);

}

function poprawnaTablica(t)

{

}

function poprawneRozwiazanie()

{

}

return true;

}

$(document).ready(function(){

})

</script>

> Do czego można wykorzystać ję zyk Java Script

< 21 >

  </head>
  <body>
    <div id=’plansza’>Miejsce na planszę </div>
    <a href=”#” id=”sprawdz”>Sprawdz</a>
  </body>

</html>