Autor artykułu: mgr Jerzy Wałaszek, wersja1.0
©2010 mgr
Jerzy Wałaszek
I LO w Tarnowie
|
|
Autor artykułu: mgr Jerzy Wałaszek, wersja1.0 |
©2010 mgr
Jerzy Wałaszek
|
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:
W jaki sposób można wprowadzić dane dla skryptu z poziomu strony WWW?
Jak uruchomić obliczenia?
Jak wyprowadzić wyniki na stronę WWW?
Do tego celu wykorzystamy 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. Najpierw umieszczamy formularz na stronie WWW. W tym celu w edytorze NVU wybierz z paska narzędzi opcję Formularz. Na ekranie pojawi się okno dialogowe Ustawienia Formularza. W oknie tym wypełnij jedynie pole Nazwa formularza - wpisz tam frm_dane oraz wybierz metodę POST (nie musisz teraz wiedzieć, co to znaczy).
Jeśli pojawią się jakieś ostrzeżenia, zignoruj je - naszego formularza nie będziemy używali do wymiany danych z serwerem HTTP, a jedynie ze skryptem. Na edytowanej stronie WWW pojawi się prostokąt obwiedziony linią przerywaną, to jest pole naszego formularza. Ustaw kolor tła formularza na jasnoszary - lepiej będzie na nim widać elementy, które tam umieścimy.
Wewnątrz formularza umieść i sformatuj następujący tekst:
Teraz ustaw kursor za tekstem Pierwsza liczba = i, wykorzystując strzałeczkę przy opcji Formularz na pasku narzędziowym, wstaw Pole formularza. Na ekranie pojawi się okno dialogowe tego pola, w którym wpisz to, co widzisz poniżej:
Nazwa pola umożliwi nam dostęp z poziomu skryptu. Ja wybrałem nazwę inp_od.
Wartość początkowa pojawi się w okienku pola. Wybrałem 1. Okienko zatwierdź klikając w przycisk OK.
To samo powtórz za tekstem Ostatnia liczba =, jednakże teraz nadaj polu nazwę inp_do, a wartości początkowej 100. Twój formularz powinien przyjąć wygląd następujący:
Uruchom notatnik i wpisz do niego poniższy kod:
function licz()
{
}
To jest pusta funkcja JavaScript. Plik notatnika zapisz w tym samym katalogu co strona WWW z formularzem. Nadaj nazwę plikowi licz.js.
Teraz w edytorze NVU kliknij na spodzie ekranu zakładkę Źródło. Wewnątrz sekcji <head> ... </head> dopisz:
<script type="text/javascript" src="licz.js"></script>
Przełącz się na widok normalny, umieść kursor na formularzu pod polami tekstowymi i kliknij na pasku narzędziowym strzałkę obok opcji formularza. Z menu wybierz opcję Pole formularza. W okienku dialogowym zmień Typ pola na Przycisk (na końcu listy). Nazwę pola ustaw na btn_licz, a Wartość pola na WYKONAJ OBLICZENIA.
Teraz kliknij przycisk Edycja zaawansowana... Pojawi się Zaawansowany edytor właściwości (to chyba błąd tłumaczenia z angielskiego - powinno być Edytor zaawansowanych właściwości, ale niech będzie...). W okienku klikamy u góry zakładkę Zdarzenia JavaScript. Następnie na dole wybieramy z listy Atrybut onclick. W polu Wartość wpisujemy nazwę naszej funkcji licz(). Zatwierdzamy okienko przyciskiem OK.
Na formularzu powinien pojawić się przycisk.
Jeśli zaglądniesz do kodu HTML, to zobaczysz następujący znacznik przycisku:
<input onclick="licz()" name="btn_licz" value="WYKONAJ OBLICZENIA" type="button">
W znaczniku umieszczona jest obsługa zdarzenia onclick - kliknięcie myszką w obiekt. Kliknięcie w ten przycisk uruchamia funkcję licz(), która będzie mogła wykonać obliczenia. Funkcja ta znajduje się w pliku licz.js.
W edytorze NVU kliknij zakładkę Źródło i na końcu formularza za znacznikiem przycisku dopisz tekst na czerwono:
... <input onclick="licz()" name="btn_licz" value="WYKONAJ OBLICZENIA" type="button"> <p id="t_wy">.</p> </div></form></body></html>
Zapisz stronę na dysku - pod przyciskiem powinna się pojawić kropka - to nasz dopisany akapit. W znaczniku p umieściliśmy atrybut id="t_wy". Atrybut ten nadał znacznikowi identyfikator, dzięki któremu łatwo odszukamy ten paragraf w obiektach HTML naszej strony WWW.
Mamy już wszystkie niezbędne elementy interfejsu dla naszego skryptu:
Formularz : frm_dane
Pola danych : inp_od i inp_do
Przycisk : btn_licz, którego kliknięcie spowoduje wykonanie naszej funkcji licz()
Paragraf : t_wy, w którym umieścimy tekst wynikowy.
Dostęp do pól danych uzyskamy w kodzie JavaScript następująco:
document.frm_dane.inp_od.value - zawartość pierwszego pola jako tekst
document.frm_dane.inp_do.value - zawartość drugiego pola jako tekst
document.getElementById("t_wy").innerHTML - tutaj wstawimy tekst, który ma się pojawić na stronie jako wynik pracy skryptu
Dane możemy odczytać jako liczbę całkowitą wykorzystując funkcję parseInt(). Funkcja ta przetwarza podany jako argument tekst na odpowiadającą mu liczbę całkowitą. Jeśli tekstu nie da się zinterpretować jako liczbę, to zwracana jest specjalna wartość NaN (ang. Not a Number - nie liczba). Wynik konwersji możemy później sprawdzić funkcją isNaN(), która zwraca true, jeśli jej argument ma wartość NaN.
Załaduj do notatnika plik licz.js. Wprowadź następujący kod i zapisz go na dysku w pliku licz.js:
function licz()
{
a = parseInt(document.frm_dane.inp_od.value)
b = parseInt(document.frm_dane.inp_do.value)
if(isNaN(a) || isNaN(b)) t = "<font color=red><b>POPRAW DANE!!!</b></font>"
else if(a > b) t = "<font color=red><b>od .. do ?</b></font>"
else if(b - a > 2000) t = "<font color=red><b>ZA WIELE LICZB!!!</b></font>"
else
{
t = ""
for(i = a; i <= b; i++) t += i + " "
}
document.getElementById("t_wy").innerHTML = t
}
Uruchom stronę w przeglądarce Internet Explorer lub innej i pobaw się formularzem zmieniając dane dla skryptu. Spróbuj wprowadzić zamiast liczb jakieś napisy. Spróbuj podać wartość początkową większą od końcowej.
Wstaw do kodu strony następujący formularz (do utworzenia formularza wykorzystaj poprzedni przykład):
Na formularzu frm_dane powinny się znaleźć następujące elementy:
Pole formularza, nazwa wsp_a, wartość 1
Pole formularza, nazwa wsp_b, wartość -2
Pole formularza, nazwa wsp_c, wartość 1
Przycisk, nazwa btn_licz, ze zdarzeniem onclick="licz()"
Paragraf o id="t_wy"
W bloku nagłówka <head>...</head> należy umieścić znacznik skryptu, który wskazuje na plik licz.js
W pliku licz.js umieszczamy następujący kod:
function licz()
{
a = parseFloat(document.frm_dane.wsp_a.value)
b = parseFloat(document.frm_dane.wsp_b.value)
c = parseFloat(document.frm_dane.wsp_c.value)
if(isNaN(a) || isNaN(b) || isNaN(c)) t = "<font color=red><b>POPRAW DANE!!!</b></font>"
else
{
delta = b * b - 4 * a * c;
if(delta < 0) t = "BRAK PIERWIASTKÓW RZECZYWISTYCH"
else
{
x1 = (-b - Math.sqrt(delta)) / 2 / a
x2 = (-b + Math.sqrt(delta)) / 2 / a
t = "x<sub>1</sub> = " + x1 + " x<sub>2</sub> = " + x2
}
}
document.getElementById("t_wy").innerHTML = t
}
Do odczytu współczynników wykorzystaliśmy funkcję parseFloat(). Funkcja ta traktuje argument jako zapis liczby rzeczywistej. Jeśli tekstu nie można zinterpretować jako liczbę rzeczywistą, zwracana jest wartość NaN.
Algorytm obliczania pierwiastków równania kwadratowego wymaga funkcji pierwiastkowej. Dostęp do funkcji matematycznych w JavaScript wykonywany jest przez obiekt Math. Funkcja sqrt() tego obiektu oblicza pierwiastek kwadratowy swojego 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"
Zaprojektuj strony WWW, które będą wyliczały:
Pole trójkąta na podstawie długości boków a, b i c.
Wysokość trójkąta na podstawie długości boków a, b i c, gdzie bok a jest podstawą.
Czas spadku swobodnego ciała z wysokości h. Przyjąć g = 9,81 [m/s2].
Pułap wzlotu pocisku wystrzelonego pionowo w górę z daną prędkością początkową V0. Przyjąć przyspieszenie g = 9,81 [m/s2].
Liczbę obrotów na sekundę kół pojazdu o promieniu r po czasie t, gdy pojazd rozpędza się od stanu spoczynku ze stałym przyspieszeniem a.
 | I Liceum Ogólnokształcące |
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