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:

 

 

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:

 

 

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:

 

 

W znaczniku <body> wstaw znacznik <div>:

 

 

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

 

 

Pojawi się okienko dialogowe Div:

 

 

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>:

 

 

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

 

 

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:

 

 

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:

 

 

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

 

 

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:

 

 

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

 

 

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:

 

 

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:

 

 

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

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

 

 

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.

 

 

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:

 

 

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:

 

 

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ść:

 

 

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

 

 

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:

 

 

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:

 

 

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>:

 

 

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

 

 

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.

 

 

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):

 


 

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ą:

 

 

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"

 



List do administratora Serwisu Edukacyjnego Nauczycieli I LO

Twój email: (jeśli chcesz otrzymać odpowiedź)
Temat:
Uwaga: ← tutaj wpisz wyraz  ilo , inaczej list zostanie zignorowany

Poniżej wpisz swoje uwagi lub pytania dotyczące tego rozdziału (max. 2048 znaków).

Liczba znaków do wykorzystania: 2048

 

W związku z dużą liczbą listów do naszego serwisu edukacyjnego nie będziemy udzielać odpowiedzi na prośby rozwiązywania zadań, pisania programów zaliczeniowych, przesyłania materiałów czy też tłumaczenia zagadnień szeroko opisywanych w podręcznikach.



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

©2017 mgr Jerzy Wałaszek

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