Informatyka dla klas III

Programujemy w języku JavaScript

Proste skrypty w języku JavaScript

JavaScript jest pełnoprawnym językiem programowania, który można z powodzeniem wykorzystywać do wszelkich obliczeń o rozsądnej złożoności. Typowy program obliczeniowy działa wg poniższego schematu:

obrazek

Chcąc zaprojektować stronę WWW, która za pomocą JavaScript przeprowadza jakieś obliczenia, musimy rozwiązać trzy problemy:

W jaki sposób można wprowadzić dane dla skryptu z poziomu strony WWW?
Jak uruchomić obliczenia?
Jak wyprowadzić wyniki na stronę WWW?

Tworzenie przykładowej strony ze skryptem

Do odczytania danych ze strony WWW wykorzystamy tzw. formularze. Formularz jest obiektem HTML, który udostępnia różnego rodzaju pola tekstowe dla użytkownika. W polach tych można umieszczać swoje dane.

Uruchom edytor Bluefish, utwórz nowy katalog projektowy oraz wybierz opcję menu:

Plik → Nowy z szablonu → HTML 5

W edytorze pojawi się tekst źródłowy strony WWW:

obrazek

Plik ten zapisz w przygotowanym katalogu pod nazwą index.html. Teraz krok po kroku wpiszemy odpowiedni kod dla strony. Nasza strona będzie odczytywała od użytkownika dwie wartości liczbowe, które posłużą do wygenerowania na stronie ciągu kolejnych liczb naturalnych. Specjalnie nie tworzymy skomplikowanego kodu, aby skupić się na elementach interfejsu,

W znaczniku <title> wpisz tytuł strony:

obrazek

W znaczniku <body> wstaw znacznik <div>:

obrazek

Kliknij znacznik <div> prawym przyciskiem myszki i z menu kontekstowego wybierz opcję Edytuj znacznik.

obrazek

Pojawi się okienko dialogowe Div:

obrazek

W okienku Div kliknij przycisk Styl. Style definiują wygląd elementów strony WWW. Po kliknięciu przycisku Styl pojawi się okienko definiowania stylu dla naszego znacznika <div>:

obrazek

W polu własność kliknij strzałkę w dół i z listy wybierz styl text-align i ustaw jego wartość na center:

obrazek

Następnie kliknij w przycisk Dodaj. Wybrany styl pojawi się na liście. Ten styl powoduje, że elementy objęte znacznikiem <div> będą standardowo wyśrodkowane.

W podobny sposób dodajemy kolejny styl background-color. Tutaj jednakże klikamy w przycisk Kolor i wybieramy odpowiedni kolor tła w oknie dialogowym:

obrazek

Wybierz jakiś jasny kolor na tło i zatwierdź go, klikając w przycisk OK. Gdy wrócisz do poprzedniego okienka dialogowego, ponownie kliknij przycisk Dodaj. Na liście stylów pojawi się styl koloru tła:

obrazek

Zatwierdź okna dialogowe, klikając w przyciski OK. Wybrane style zostaną osadzone w znaczniku <div>:

obrazek

Oczywiście, style można wpisywać ręcznie, jeśli zna się ich nazwy oraz wartości parametrów. Okienka dialogowe służą nam tutaj pomocą.

Teraz do znacznika <div> wpisujemy znacznik <form>, w którym dodatkowo umieszczamy parametr name określający jego nazwę w dokumencie strony:

obrazek

W znaczniku <form> wpisujemy akapit z treścią:

obrazek

Ponieważ na pewno się niecierpliwisz, aby zobaczyć efekt swojej pracy, to zapisz plik na dysku (Ctrl + S), a następnie kliknij ikonę kuli ziemskiej, która znajduje się u góry na pasku narzędziowym. Zostanie uruchomiona przeglądarka i w niej będzie otwarty nasz plik strony. Powinno to wyglądać na tym etapie następująco:

obrazek

Teraz dodamy do formularza elementy czynne. Najpierw wybierz zakładkę Formularze. Uzyskasz w ten sposób dostęp do typowych elementów formularzy, takich jak przyciski akcji, pola tekstowe, listy, elementy wyboru, itp. Nie wszystkie z nich będziemy dzisiaj potrzebować.

Pod wpisanym paragrafem wpisz kolejny paragraf z tekstem Od:

obrazek

Po słówku Od wpisz jedną spację, po czym kliknij w ikonę przycisku tekst na liście elementów formularza: obrazek

Pojawi się okienko dialogowe, które wypełnij treścią:

obrazek

Nazwa będzie umożliwiała odwołanie się do elementu formularza. Wartość określa to, co pojawi się w polu tekstowym. Zatwierdź okienko przyciskiem OK. W paragrafie pojawi się znacznik <input> z odpowiednimi parametrami, które definiują nasze pole tekstowe. W polu tym będziemy umieszczać wartość początkową dla generowanego ciągu liczb.

obrazek

Wciśnij Enter i w nowej linijce dopisz dalszą część formularza. Wpisz słowo do ze spacją, po czym ponownie kliknij w ikonę przycisku tekst. Nazwa pola to inp_to, a wartość 100. Po zatwierdzeniu powinieneś otrzymać kod:

obrazek

Dokonaj podglądu swojej strony WWW. Zapisz plik (Ctrl+S), przejdź do przeglądarki WWW i odśwież widok strony (F5). Powinno to wyglądać następująco:

obrazek

Teraz do formularza dodamy przycisk, którego kliknięcie wywoła funkcję o nazwie Show(). Samą funkcję zdefiniujemy za chwilę. Umieść kursor za znacznikiem </p> drugiego akapitu i wciśnij klawisz Enter, aby dodać pusty wiersz. Następnie na liście elementów formularza kliknij ikonę pierwszego przycisku, po czym w okienku dialogowym wprowadź następującą treść:

obrazek

Zatwierdź okienko dialogowe przyciskiem OK. W kodzie strony pojawi się nowy znacznik <input>:

obrazek

Formularz jest prawie gotowy. Pozostało nam jedynie dodanie na końcu paragrafu, w którym będziemy umieszczali wynik działania skryptu. Nie można tutaj zastosować metody write, ponieważ działa ona tylko przy ładowaniu strony. Dopisz ostatni akapit:

obrazek

W akapicie tym umieściliśmy parametr id, który określa identyfikator dla znacznika. Dzięki temu identyfikatorowi będziemy mogli łatwo odwołać się do tego znacznika akapitu w naszym skrypcie.

Interfejs jest gotowy i powinien wyglądać następująco:

obrazek

Teraz przystąpimy do tworzenia skryptu, który po kliknięciu w przycisk Pokaż ciąg odczyta dane z elementów formularza i wyświetli ciąg liczb naturalnych w podanych granicach.

W znaczniku <head> wpisz znacznik <script>:

obrazek

Wewnątrz skryptu wpisujemy kod funkcji Show(), która będzie wywołana po kliknięciu przycisku Pokaż ciąg na naszym formularzu:

obrazek

Przyjrzyjmy się elementom, które pojawiły się w tym skrypcie:

a, b	–	zmienne, które określają zakres generowanych liczb
parseInt()	–	funkcja, której argumentem jest tekst zawierający liczbę całkowitą. Wynikiem jest wartość tej liczby. Funkcja jest konieczna, ponieważ musi przetworzyć ciąg znaków z elementu formularza na liczbę. W przeciwnym razie zmienne a i b byłyby tekstowe, a nie o to nam chodzi.
document.nn.inp_from.value	–	odwołanie do wartości przechowywanej przez element formularza nn o nazwie inp_from
document.nn.inp_to.value	–	odwołanie do wartości przechowywanej przez element formularza nn o nazwie inp_to
t	–	zmienna tekstowa, w której budujemy tekst wynikowy.
for(...)	–	typowa pętla iteracyjna, która wykonuje kolejno numerowane obiegi od wartości a do b.
t += i + " "	–	ponieważ zmienna t jest zmienną tekstową, to operator += powoduje dołączenie do niej tekstu, który znajduje się po prawej stronie. Dodanie spacji do zmiennej i spowoduje automatyczną konwersję na tekst.
document.getElementById()	–	funkcja zwraca odwołanie do elementu strony WWW o podanym identyfikatorze. W tym przypadku jest to akapit, w którym umieściliśmy parametr id="t_out"
.innerHTML	–	własność odwołująca się do zawartości HTML elementu. U nas jest to zawartość akapitu o identyfikatorze "t_out". Zmieniamy tę zawartość na to, co zawiera zmienna t, czyli na kolejno wygenerowane liczby naturalne.

Zapisz plik na dysku, przejdź do strony WWW, odśwież ją, wpisz w pola wybrane wartości i kliknij przycisk Pokaż ciąg.

obrazek

Bardziej użyteczny skrypt - obliczanie pierwiastków równania kwadratowego

Wstaw do kodu strony następujący formularz (do utworzenia formularza wykorzystaj poprzedni przykład):

obrazek

Formularz nazwij eq2. Linię rozdzielającą uzyskasz za pomocą znacznika <hr>. Na formularzu eq2 powinny się znaleźć następujące elementy:

Pole formularza, nazwa inp_a, wartość 1
Pole formularza, nazwa inp_b, wartość -2
Pole formularza, nazwa inp_c, wartość 1
Przycisk, nazwa btn_solve, ze zdarzeniem onclick="Solve()"
Paragraf z parametrem id="t_out"

W bloku nagłówka <head>...</head> należy umieścić znacznik <script> z poniższą treścią:

obrazek

a, b, c	–	współczynniki równania kwadratowego
parseFloat()	–	funkcja, której argumentem jest tekst zawierający liczbę rzeczywistą. Wynikiem jest wartość tej liczby.
isNaN()	–	funkcja sprawdza, czy przekazany jej argument nie jest liczbą. Jeśli tak, to zwraca true. W ten sposób wyłapujemy błędnie wpisane dane.
delta	–	wyróżnik
x1,x2	–	obliczane pierwiastki
Math.sqrt()	–	funkcja zwraca pierwiastek kwadratowy argumentu

Zasada działania operatora +:

Jeśli wszystkie argumenty są liczbami, to operator wykonuje dodawanie arytmetyczne: 1 + 55 = 56

Jeśli jeden z argumentów jest tekstem, operator przekształca wszystkie liczby w tekst i łączy znaki w jeden wspólny ciąg: 1 + "55" = "155"