Informatyka dla klasy IIIK

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:

  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 Microsoft Expression Web 4. W menu wybierz opcję

 

Site → New Site

 

W okienku dialogowym, które się pojawi, wybierz One Page Site, a następnie w polu Location ustal katalog, gdzie ma powstać nowa witryna. Gdy zakończysz, kliknij przycisk OK.

obrazek

Zostanie utworzona witryna w podanym katalogu. Pojawi się w nim również plik o nazwie default.html. Kliknij ten plik prawym przyciskiem myszki i wybierz z menu kontekstowego opcję Rename (zmiana nazwy), a następnie zmień nazwę na index.html. Kliknij dwukrotnie myszką w nazwę pliku, co spowoduje jego załadowanie do edytora. W edytorze wybierz na spodzie zakładkę Code, aby uzyskać dostęp do kodu strony.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>

</body>

</html>

Teraz krok po kroku utworzymy 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.

Z menu wybierz opcję:

Format → Properties...

Pojawi się okienko własności strony. Wypełnij pola wg poniższego obrazka:

obrazek

Location: określa położenie edytowanej strony na dysku komputera. Tego pola nie zmieniaj.

Title: definiuje tytuł strony, który pojawi się na zakładce strony w przeglądarce.

Page description: zawiera opis strony. Informacje te są wykorzystywane przez różne serwisy wyszukiwawcze w Internecie, np. przez Google.

Keywords: zawiera słowa kluczowe, które ułatwią użytkownikom znalezienie twojej strony w sieci.

Po wypełnieniu pól kliknij zakładkę Language. Wypełnij pola wg poniższego obrazka:

obrazek

 

Zatwierdź okienko, klikając w przycisk OK. Kod strony powinien się zmienić następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" />
<meta content="pl" http-equiv="Content-Language" />
<title>Przykładowa strona ze skryptem JS</title>
<meta content="JS, javascript, programowanie, informatyka, liceum" 
name="keywords" />
<meta content="Strona zawiera skrypt JS, który generuje na niej kolejne liczby naturalne w podanym przez użytkownika zakresie" 
name="description" />
</head>

<body>

</body>

</html>

Zapisz plik strony, naciskając klawisze Ctrl+S.

Teraz przejdziemy do tworzenia treści naszej strony. Ustaw kursor pomiędzy znacznikami <body> i </body> i wpisz <div></div>. Znacznik ten obejmuje obszar strony, w którym możesz umieszczać inne znaczniki.

<body>
<div></div>
</body>

</html>

Teraz zdefiniujemy sobie styl znacznika, czyli wygląd objętego przez niego obszaru strony WWW. Edytor Expression Web posiada wygodne narzędzia do umieszczania stylów na stronach WWW. Dzięki nim nie musisz pamiętać nazw stylów ani ich składni. Kliknij znacznik <div> prawym przyciskiem myszki i z menu kontekstowego wybierz opcję Tag properties... Pojawi się okienko modyfikacji stylu znacznika.

obrazek

Kliknij przycisk Format i wybierz opcję Paragraf.... Pojawi się nowe okienko dialogowe, w którym możesz zdefiniować sposób wyświetlania tekstu w obszarze objętym znacznikiem <div>. W polu Alignment (ułożenie) ustaw Center (na środku).

obrazek

Zatwierdź zmiany przyciskiem OK. Okienko zniknie i wrócisz do okna modyfikacji stylu. Oprócz ułożenia tekstu zmodyfikujemy również kolor tła obszaru objętego znacznikiem <div>. Ponownie kliknij w przycisk Format, a następnie wybierz Borders and Shading.... W nowym okienku wybierz zakładkę Shading i w polu Background Color zdefiniuj jakiś delikatny kolor dla tła:

obrazek

Zatwierdź okienko przyciskiem OK i tak samo zrób z okienkiem modyfikacji stylu.  W kodzie strony pojawi się:

<body>
<div style="text-align: center; background-color: #CCFFFF"></div>
</body>

Efekt tych operacji możesz podglądnąć przełączając na dole zakładkę na Design.

Pomiędzy znacznikami <div> i </div> wpisujemy znacznik <form>, w którym dodatkowo umieszczamy atrybut name określający jego nazwę w dokumencie strony:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn"></form>
</div>
</body>

Znacznik <form> tworzy na stronie WWW tzw. formularz. W formularzu możesz umieszczać różne pola danych oraz przyciski, którymi steruje użytkownik. Za pomocą formularza będziemy pobierać dane od użytkownika.

Pomiędzy znacznikami <form> i </form> wpisz znacznik <p> z następującą treścią:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
</form>
</div>
</body>

Efekt możesz zobaczyć, przełączając się u dołu na zakładkę Design lub wyświetlając stronę w przeglądarce, np. Firefox. Zapisz stronę na dysku (Ctrl+S), po czym kliknij u góry ekranu w strzałeczkę obok ikony przeglądarki i z listy wybierz odpowiednią przeglądarkę stron WWW.

obrazek

W efekcie zostanie uruchomiona wybrana przeglądarka stron WWW i zobaczysz w niej swoją stronę:

obrazek

 

Teraz dodamy do formularza elementy czynne. Będzie nam potrzebny panel z elementami formularza (można je wpisywać ręcznie, ale wtedy musisz znać ich składnię, dlatego lepiej korzystać z gotowych narzędzi). Z menu wybierz opcję:

Insert → HTML → More HTML Tags...

Powinien pojawić się panel Toolbox, w którym znajdziesz tzw. kontrolki formularza (Form Controls), czyli elementy, za pomocą których użytkownik może wprowadzać informację.

obrazek

Pod wpisanym akapitem wpisz kolejny akapit z tekstem Od:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od </p>
</form>
</div>
</body>

Po słówku Od wpisz jedną spację, po czym kliknij w dwukrotnie w ikonę Input (Text) na panelu Toolbox. Na pozycji kursora zostanie wstawiony znacznik <input ...>, który oznacza pole tekstowe formularza.

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od <input name="Text1" type="text" /></p>
</form>
</div>
</body>

Kliknij ten znacznik prawym przyciskiem myszki i z menu kontekstowego wybierz opcję Tag Properties.... W okienku dialogowym wypełnij pola wg poniższego obrazka:

obrazek

Pole Name pozwoli ci na dostęp do tego pola formularza z poziomu skryptu JS. Pole Initial Value określa tekst, który pojawi się początkowo w tym polu. Oczywiście użytkownik będzie go mógł sobie zmienić. Zatwierdź okienko przyciskiem OK.

Kod powinien teraz wyglądać następująco:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od <input name="inp_from" type="text" value="1" /></p>
</form>
</div>
</body>

Przejdź kursorem na koniec znacznika, wciśnij klawisz Enter i w nowym wierszu dopisz dalszą część formularza. Wpisz słowo do ze spacją, po czym ponownie kliknij w ikonę Input (Text). Wejdź do własności znacznika i zmień nazwę na inp_to, a wartość początkową (ang. Initial Value) na 100. Po zatwierdzeniu przyciskiem OK powinieneś otrzymać kod:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od <input name="inp_from" type="text" value="1" />
   do <input name="inp_to" type="text" value="100" /></p>
</form>
</div>
</body>

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 paragrafu i wciśnij klawisz Enter, aby dodać pusty wiersz. Następnie w panelu Toolbox kliknij ikonę Input (Button). W kodzie strony pojawi się następny znacznik <input...>, który reprezentuje przycisk.

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od <input name="inp_from" type="text" value="1" />
   do <input name="inp_to" type="text" value="100" /></p>
<input name="Button1" type="button" value="button" />
</form>
</div>
</body>

Kliknij ten znacznik prawym przyciskiem myszki i z menu kontekstowego wybierz opcję Tag Properties.... Ustaw pola wg poniższego obrazka:

obrazek

Zatwierdź okienko przyciskiem OK. Następnie na końcu znacznika dopisz obsługę zdarzenia onclick:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od <input name="inp_from" type="text" value="1" />
   do <input name="inp_to" type="text" value="100" /></p>
<input name="btn_show" type="button" value="Pokaż ciąg" onclick="Show()" />
</form>
</div>
</body>

Formularz jest prawie gotowy. Pozostało nam jedynie dodanie na końcu akapitu, 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:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od <input name="inp_from" type="text" value="1" />
   do <input name="inp_to" type="text" value="100" /></p>
<input name="btn_show" type="button" value="Pokaż ciąg" onclick="Show()" />
<p id="t_out">.</p>
</form>
</div>
</body>

W paragrafie tym umieściliśmy atrybut id, który określa identyfikator dla znacznika. Dzięki temu identyfikatorowi będziemy mogli łatwo odwołać się do niego 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 pod formularzem wpisz znacznik <script>:

<body>
<div style="text-align: center; background-color: #CCFFFF">
<form name="nn">
<p><b>Ciąg liczb naturalnych</b><br/>
(C)2016 I LO w Tarnowie</p>
<p>Od <input name="inp_from" type="text" value="1" />
   do <input name="inp_to" type="text" value="100" /></p>
<input name="btn_show" type="button" value="Pokaż ciąg" onclick="Show()" />
<p id="t_out">.</p>
</form>
</div>
<script language="javascript"></script>
</body>

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

<script language="javascript">
function Show()
{
  // Odczytujemy zakres liczb do wygenerowania
  a = parseInt(document.nn.inp_from.value)
  b = parseInt(document.nn.inp_to.value)
  // Sprawdzamy, czy a i b są liczbami
  if(isNaN(a) || isNaN(b)) t = "Złe dane !!!"
  else
  {
    t = "" // t będzie przechowywało tekst wynikowy
    for(i = a; i <= b; i++) t += i + " "
  }
  // wynik umieszczamy w akapicie t_out
  document.getElementById("t_out").innerHTML = t
}
</script>

 

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.
isNaN(x) is Not a Number. Jest to funkcja, która zwraca logiczną prawdę, jeśli jej argument nie jest liczbą. Przydaje się do sprawdzania, czy użytkownik poprawnie wpisał liczby w pola formularza.
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"

Na końcu strony wstaw skrypt:

<script language="javascript">
function Solve()
{
  // odczytujemy współczynniki z pól formularza
  a = parseFloat(document.eq2.inp_a.value)
  b = parseFloat(document.eq2.inp_b.value)
  c = parseFloat(document.eq2.inp_c.value)
  // sprawdzamy poprawność danych
  if(isNaN(a) || isNaN(b) || isNaN(c))
    t = "Złe dane wejściowe !!!"
  else
  {
    d = b * b - 4 * a * c
    if(d < 0) t = "Brak pierwiastków rzeczywistych"
    else
    {
      x1 = (-b - Math.sqrt(d)) / 2 / a
      x2 = (-b + Math.sqrt(d)) / 2 / a
      t = "x<sub>1</sub> = " + x1 + " &nbsp;&nbsp;&nbsp; x<sub>2</sub> = " + x2
    }
  }
  document.getElementById("t_out").innerHTML = t
}
</script>

 

a, b, c współczynniki równania kwadratowego
parseFloat() funkcja, której argumentem jest tekst zawierający liczbę rzeczywistą. Wynikiem jest wartość tej liczby lub NaN.
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.
d wyróżnik delta
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 + "abc" = "1abc"


   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