Informatyka dla klas III

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:

 

[ Odczyt danych ] → [ Obliczenia ] → [ Wyświetlenie wyników ]

 

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

  1. W jaki sposób można wprowadzić dane dla skryptu z poziomu strony WWW?
  2. Jak uruchomić obliczenia?
  3. 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 paragraf 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ść za znacznikiem </p> drugiego paragrafu 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 paragraf:

 

obrazek

 

W paragrafie 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 paragrafu 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 paragraf, 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ść paragrafu 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:

  1. Pole formularza, nazwa inp_a, wartość 1
  2. Pole formularza, nazwa inp_b, wartość -2
  3. Pole formularza, nazwa inp_c, wartość 1
  4. Przycisk, nazwa btn_solve, ze zdarzeniem onclick="Solve()"
  5. 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"

 


   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie

©2024 mgr Jerzy Wałaszek

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe