Matura - Internet

10100101
01110100
11101001
...

Tak tworzono programy w latach 40 XX wieku. Programiści byli wtedy na wagę złota. Te czasy jednak minęły. Dzisiaj już nikt tak nie programuje komputerów, gdyż jest to bardzo niewygodne i żmudne. Pierwszym usprawnieniem było zastąpienie kodów binarnych nazwami instrukcji. Program komputerowy stał się bardziej czytelny:

W ten sposób powstał język Asembler (ang. Assembly Language). Język asemblera nie jest bezpośrednio rozumiany przez mikroprocesor. Program w asemblerze jest zwykłym tekstem. Zatem tekst programu musi zostać przetworzony na odpowiednie instrukcje binarne, które potrafi wykonać mikroprocesor. Przetworzenie to nosi nazwę kompilacji i jest wykonywane przez specjalny program, który nazywamy kompilatorem (ang. compiler). Tekst programu w asemblerze przygotowujemy w edytorze tekstu, po czym przekazujemy go do kompilatora. Ten odczytuje wiersze z instrukcjami, rozpoznaje je i zamienia na odpowiednie instrukcje binarne dla mikroprocesora. Wynikiem pracy kompilatora jest plik wykonywalny, który zawiera przetworzone z tekstu instrukcje binarne. Proces ten wygląda następująco:

Asembler nazywany jest językiem niskiego poziomu (ang. Low Level Language, LLL), ponieważ odwołuje się bezpośrednio do zasobów komputera (mikroprocesora, pamięci, urządzeń we/wy). Programista musi posiadać rozległą wiedzę na temat komputera, dla którego pisze program w asemblerze. Co więcej, program asemblerowy przeznaczony jest dla konkretnego komputera, na innym komputerze nie będzie działał, jeśli procesor tego komputera posiada jednostkę centralną o innych binarnych kodach instrukcji lub inną architekturę. Z tych powodów obecnie programowaniem w asemblerze zajmują się jedynie specjaliści i pasjonaci. Zaletą asemblera jest zwięzłość kodu i szybkość, ponieważ programuje się bezpośrednio procesor komputera (zobacz do artykułu "Asembler dla Windows"). Jednakże programowanie jest wciąż żmudne i trudne.

Aby ułatwić i przyspieszyć proces programowania, wymyślono języki wysokiego poziomu (ang. High Level Languages, HLL). Język HLL oddala się od bezpośredniej konstrukcji komputera, a skupia na zadaniu do wykonania. Porównaj:

W języku asemblera każdy wiersz programu tłumaczony był na pojedynczą instrukcję binarną dla mikroprocesora. W języku HLL pojedynczy wiersz programu może być tłumaczony na wiele instrukcji procesora. Jednakże tekst programu w języku HLL jest bardziej czytelny dla człowieka. Dzięki temu program tworzony jest znacznie szybciej. Proces tworzenia kodu binarnego jest podobny do procesu kompilacji w asemblerze, tylko kompilator HLL jest bardziej skomplikowany:

Ponieważ program HLL nie odwołuje się bezpośrednio do sprzętu (robią to dołączane po kompilacji biblioteki), ten sam program można zwykle uruchomić na różnych komputerach po skompilowaniu go przy pomocy lokalnego kompilatora dla komputera docelowego.

Język kompilowany wymaga kompilatora, który przetłumaczy tekst źródłowy na postać wykonywalną, czyli na plik z binarnymi instrukcjami dla procesora komputera. Przykładem języka kompilowanego HLL jest C++.

Wraz z rozwojem komputerów powstały języki interpretowane. Wymagają one specjalnego programu zwanego interpreterem. Program w takim języku jest zwykłym tekstem utworzonym wg ustalonych zasad. Wykonanie takiego programu polega na uruchomieniu interpretera, który odczytuje wiersze programu, rozpoznaje je i wykonuje odpowiednie operacje poprzez wywoływanie funkcji zawartych w bibliotekach interpretera. Nie występuje tutaj proces kompilacji. Zaletą języka interpretowanego jest możliwość uruchomienia programu na każdym komputerze posiadającym odpowiedni interpreter.

Język JavaScript jest językiem interpretowanym. Interpreter JavaScript znajduje się na praktycznie każdej nowoczesnej przeglądarce internetowej: Firefox, Microsofr Edge, Microsoft Internet Explorer, Google Chrome, Opera i inne. Program JavaScript zapisujesz w kodzie strony WWW. Program ten może następnie zostać uruchomiony na komputerze użytkownika po pobraniu strony WWW.

Język JavaScript jest dosyć skomplikowany i opanowanie go wymaga wielu miesięcy intensywnej nauki. Tutaj opiszemy tylko najprostsze  elementy tego języka.

Utworzymy witrynę, którą będziemy stopniowo rozbudowywać. Na początek stworzymy szablon strony WWW i arkusz stylów. Uruchom Expression Web i utwórz nową witrynę z jedną stroną WWW. Zmień nazwę pliku strony na szablon.html. Tytuł strony ustaw na "JavaScript":

Załaduj stronę szablon.html do edytora, kliknij prawym przyciskiem myszki w puste miejsce na stronie (w trybie Design) i z menu kontekstowego wybierz opcję Page Properties... W oknie dialogowym własności strony wybierz zakładkę Language i ustaw w pierwszym polu tekstowym  język polski, po czym zatwierdź okno przyciskiem OK:

Zapisz stronę szablon.html do katalogu twojej witryny.

Przejdź na zakładkę Site View.

Kliknij prawym przyciskiem myszki w puste miejsce w katalogu i z menu kontekstowego wybierz opcje:

W katalogu witryny zostanie utworzony pusty arkusz stylów. Zmień jego nazwę na style.css:

Kliknij lewym przyciskiem myszki w plik szablon.html, aby został zaznaczony:

W panelu Apply Styles kliknij w opcję Attach Style Sheet...:

W okienku dialogowym w polu URL: wpisz nazwę pliku arkusza stylów style.css:

Arkusz stylów zostaje połączony ze stroną szablon.html. Expression Web wyświetla okienko potwierdzające uaktualnienie pliku strony:

Zamknij je przyciskiem Close.

Teraz utworzymy dwa katalogi: na przyszłe skrypty JaveScript oraz na obrazki. Kliknij prawym przyciskiem myszki w puste miejsce katalogu witryny i z menu kontekstowego wybierz opcję:

Zostanie utworzony katalog. Nazwij go images.

W identyczny sposób utwórz drugi katalog i nazwij go scripts.

Kliknij dwukrotnie lewym przyciskiem myszki w nazwę pierwszej kolumny (Name). Uporządkuje to elementy katalogu witryny, katalogi znajdą się u góry, a pliki u dołu:

Przełącz się na zakładkę szablon.html i zapisz plik w katalogu witryny (gwiazdka '*' na zakładce musi zniknąć).

Teraz przygotujemy arkusz stylów. Załaduj do edytora plik style.css (wróć na zakładkę Site View i kliknij dwukrotnie lewym przyciskiem myszki w plik arkusza). Przekopiuj do arkusza poniższy tekst i zapisz arkusz w katalogu witryny:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #FFFFFF;
	background-color: #000000;
	text-align: justify;
}
a:link {
	color: #66FFFF;
	text-decoration: none;
}
a:visited {
	color: #FF99FF;
	text-decoration: none;
}
a:hover {
	color: #FF0000;
	text-decoration: underline;
}
a:active {
	color: #FF0000;
	text-decoration: none;
}

Wróć na zakładkę Site View i skopiuj sześciokrotnie plik szablon.html (przeciągaj plik szablon.html prawym przyciskiem myszki i z menu kontekstowego wybieraj opcję Copy Here) i zmień nazwy kopii na index.html i s1.html...s5.html:

Załaduj do edytora plik index.html. Przekopiuj do niego tekst:

tekst

Ustaw hiperłącza do kolejnych plików s1.html...s5.html. Zapisz plik index.html w katalogu witryny.

Sprawdź działanie hiperłączy w przeglądarce. Witryna jest gotowa do rozpoczęcia nauki podstaw języka JavaScript.

• Kliknięcie myszką w obszar strony WWW, w którym operuje znacznik HTML  (onclick).
• Wejście kursorem myszki nad taki obszar (onmouseover).
• Opuszczenie przez kursor myszki takiego obszaru (onmouseout).

Gdy dane zdarzenie wystąpi, zostaje wykonany powiązany z nim kod js. Zdarzenie i kod js wstawiamy do wnętrza znacznika w sposób następujący:

<znacznik zdarzenie="kod js">

W jednym znaczniku można wstawić kilka zdarzeń.

Załaduj do edytora Expression Web stronę s1.html. Przekopiuj do niej poniższy tekst:

Powrót

Wskaż tutaj myszką

Kliknij tutaj

Klikaj tutaj

Zaznacz myszką słowo Powrót i ustaw tutaj hiperłącze do strony index.html.

W pierwszym przykładzie będziemy zmieniali kolor tła akapitu, gdy pojawi się nad nim kursor myszki.

Ustaw kursor na wierszu Wskaż tutaj myszką. U góry okna edytora masz listę znaczników HTML, w których w danym momencie znajduje się kursor:

Wskaż myszką znacznik <p>. Wtedy po prawej stronie pojawi się strzałka w dół. Kliknij ją. Otworzy się menu związane ze znacznikiem. Wybierz z niego opcję Edit Tag... (edycja znacznika):

Zostanie uruchomiony edytor szybkich tagów (ang. Quick Tag Editor):

Edytor ten pozwala ci edytować wybrany znacznik HTML kodu strony. Przekopiuj do edytora poniższy tekst:

<p onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='black'">

W znaczniku <p> umieściliśmy dwa zdarzenia:

onmouseover - kursor myszki wchodzi nad obszar akapitu objęty znacznikiem <p>
onmouseout - kursor myszki opuszcza obszar znacznika <p>.

W języku js strona jest obiektem. Każdy znacznik strony jest elementem tego obiektu. Znaczniki same w sobie również są obiektami i posiadają różne własności. Wskaźnik this, który rozpoczyna kod js wskazuje obiekt strony, który zgłosił dane zdarzenie, w tym wypadku this jest równoważnikiem obiektu znacznika <p>, w którym zdefiniowaliśmy zdarzenia. Własność style określa aktualny styl obiektu wskazywanego przez this. Własność backgroundColor definiuje kolor tła obszaru zajętego przez znacznik. Kolor możemy definiować na różne sposoby. Tutaj jest to tekst 'red' (czerwony) i 'black' (czarny). Tekst w js występuje w cudzysłowach lub w apostrofach. Tutaj użyliśmy apostrofów, ponieważ cały kod js jest już w cudzysłowach i uniknęliśmy w ten sposób konfliktu.

Zapisz stronę w katalogu witryny i sprawdź ją w przeglądarce.

W następnym wierszu będziemy reagowali na kliknięcie w tekst. W tym celu musimy owinąć tekst znacznikiem <span>. Zaznacz wyraz tutaj, po czym w panelu Toolbox kliknij prawym przyciskiem myszki w <span>:

Z menu kontekstowego wybierz opcję Wrap (owiń). Spowoduje ona "owinięcie" zaznaczonego tekstu znacznikiem <span>. Zobacz na kod strony:

<p>Kliknij <span>tutaj</span></p>

Wróć do trybu Design i umieść kursor w wyrazie tutaj. U góry okna edytora masz trzy znaczniki:

Znacznik <span> powinien być aktywny (ma nieco ciemniejsze tło). Wskaż go myszką, z prawej strony pojawi się strzałka, kliknij w nią i z menu wybierz Edit Tag...:

Przekopiuj do edytora szybkich tagów poniższy tekst:

<span onclick="this.style.backgroundColor='yellow'; this.style.color='red'">

Ten kod js jest uaktywniany po kliknięciu myszką w tekst objęty zakresem działania znacznika <span>, czyli w słowo tutaj. Kod zmienia wtedy kolor tła (własność style.bacgroundColor) i kolor tekstu (własność style.color). Po kliknięciu kolory te pozostają na stronie do momentu jej ponownego załadowania.

Zapisz stronę w katalogu witryny i sprawdź jej działanie w przeglądarce.

W ostatnim tekście będziemy zmieniali kolor tła przy każdym kliknięciu myszką. Wróć do edytora Expression Web i przejdź do tekstu Klikaj tutaj. U góry okna edytora masz dwa znaczniki: <body> i <p>. Wskaż <p>, kliknij strzałkę, która ukaże się z prawej strony i z menu wybierz opcję Edit Tag...

Przekopiuj do edytora szybkich tagów poniższy tekst:

<p onclick="if(this.style.color=='red') this.style.color='white'; else this.style.color='red'">

Tym razem kod js zawiera instrukcję warunkową if. Ma ona podobną składnię jak instrukcja if w języku C++ (js jest oparty na C++):

if(warunek) instrukcja_1; else instrukcja_2;

Instrukcja if oblicza warunek, jeśli jest on prawdziwy, to wykonuje instrukcję_1, a pomija instrukcję_2. Jeśli warunek jest fałszywy, to pomija instrukcję_1, a wykonuje instrukcję_2. W naszym kodzie sprawdzamy, czy kolor tekstu w akapicie jest czerwony. Jeśli nie, to ustawiamy go na czerwono. Jeśli tak, to kolor zmieniamy na biały. Dzięki temu kolor tekstu zmienia się przy każdym kliknięciu nań przyciskiem myszki.

Zapisz stronę w katalogu witryny i sprawdź jej działanie w przeglądarce.

Do zapamiętania:

• Osadzanie prostego kodu js w znacznikach.
• Zdarzenia onclick, onmouseover i onmouseout.
• Wskaźnik this i jego funkjcja.
• Własności style.backgroundColor i style.color.

Kod js w znaczniku pozwala wykonać tylko proste operacje, dlatego istnieje możliwość umieszczania kodu js w kodzie strony WWW przy pomocy znacznika <script>. Składnia jest następująca:

<script>
... kod js ...
</script>

Znacznik <script> wspierany jest przez większość obecnych przeglądarek stron WWW. Znacznik  <script> można umieszczać  w sekcji <head>...</head> lub w sekcji <body>...</body>. Kod w znaczniku jest wykonywany w trakcie ładowania strony WWW. Załaduj do edytora Expression Web stronę s2.html. Wpisz do niej tekst:

Powrót do menu

Następnie zrób z niego hiperłącze do strony index.html.

Przełącz się do trybu Code.

W obrębie nagłówka (<head>...</head>) wpisz:

<script>
document.write("<p>Powitanie JavaScript z nagłówka strony.</p>");
</script>

Zapisz stronę w witrynie (Ctrl+S), a następnie przeglądnij ją w przeglądarce (kliknij ikonę na pasku narzędziowym).

Teraz na końcu sekcji <body>...</body> wpisz poniższy skrypt:

<script>
document.write("<p>Pożegnanie z JavaScript z końca strony</p>");
document.write("<p>Nieco obliczeń:<br/><br/>");
for(i = 0; i < 1000; i++) document.write(i + " ");
document.write("</p>");
</script>

Przeanalizujmy, co zrobiliśmy:

W kodzie strony umieściliśmy dwa skrypty js. Pierwszy skrypt znalazł się w sekcji nagłówka, a drugi w sekcji ciała strony. Skrypt jest zwykle wykonywany przez przeglądarkę w momencie napotkania go przy ładowaniu pliku strony. Zatem najpierw został wykonany skrypt z nagłówka, a później skrypt z sekcji ciała strony.

Język JavaScript jest językiem obiektowym, który działa w środowisku strony WWW. Podstawowym obiektem strony jest obiekt o nazwie document. Obiekt ten obejmuje całą stronę WWW wraz ze wszystkimi jej znacznikami. Z poziomu kodu js odwołujemy się do obiektu poprzez jego nazwę. Wielkość liter ma znaczenie w js (podobnie jak   w C++), dlatego nazwy muszą być pisane dokładnie tak, jak zostały zdefiniowane.

Obiekt document posiada wiele własności oraz funkcji. Do własności i funkcji obiektu odwołujemy się poprzez nazwę document, kropkę i nazwę własności lub funkcji.

Funkcja document.write( ) umieszcza w kodzie strony to, co przekażemy jej jako argument. Jednakże musisz wiedzieć, iż funkcja ta działa tylko w momencie ładowania przez przeglądarkę kodu strony. Gdy strona zostanie już w całości załadowana i przetworzona przez przeglądarkę, funkcja document.write( ) przestaje działać. Wstawiany przez funkcję document.write( ) kod jest umieszczany w miejscu, w którym znajduje się zawierający ją skrypt. Jeśli skrypt jest w nagłówku, to kod ten zostanie wstawiony na początku strony WWW. W przeciwnym razie kod będzie wstawiony w miejscu strony, w którym umieszczono skrypt js. To właśnie dzieje się na stronie s2.html. Wstawiany przez document.write( ) tekst może zawierać kod HTML.

W drugim skrypcie użyliśmy pętli for do wyświetlenia 1000 liczb naturalnych. Zwróć uwagę na instrukcję:

document.write(i + " ");

Instrukcja wypisuje liczbę w zmiennej i ze spacją. W języku C++ takie coś byłoby niemożliwe. Tutaj dodanie do liczby tekstu powoduje zamianę liczby na tekst i wykonanie połączenia tekstu liczby z dodawanym tekstem. Zapamiętaj to.

Gdy strona WWW zostanie w całości załadowana i wyświetlona w przeglądarce, funkcja document.write( ) przestaje działać. Wtedy dostęp do kodu strony uzyskujemy inaczej.

W edytorze Expression Web przełącz się w tryb Code i usuń z kodu strony s2.html oba skrypty js. Następnie wpisz pod pierwszym akapitem z hiperłączem poniższy kod HTML:

<button type="button">Czyść</button>
<button type="button">Licz</button>
<p>.</p>

Znacznik <button type="button"> tworzy na stronie WWW przycisk, w który użytkownik może klikać myszką. Znacznik ten reaguje na zdarzenie onclick, które wykorzystamy do wywoływania kodu js. W tym celu musimy poznać funkcje js. Funkcja jest fragmentem kodu, który można wielokrotnie wykonywać. Definicja funkcji wygląda następująco:

function nazwa_funkcji(parametr1,parametr2...)
{
    ... kod js ...
}

Jeśli w kodzie funkcji pojawi się polecenie return, to funkcja kończy działanie i powraca do miejsca wywołania. Za return można umieścić dowolne wyrażenie, które zostanie obliczone i funkcja zwróci jego wartość. Parametry funkcji są wartościami, które funkcja otrzymała przy swoim wywołaniu. W kodzie funkcji parametry zachowują się jak zmienne lokalne.

Przykład:

function suma(a,b)
{
    return a + b
}

Funkcję js umieszczamy w znaczniku <script>. Gdy strona jest ładowana, napotkane funkcje js nie są wykonywane, lecz zapamiętywane. Dlatego można je mieszać z kodem wykonywanym. Wykonanie funkcji następuje dopiero po jej wywołaniu z kodu js. Funkcję wywołujemy przez jej nazwę.

Wyświetlanie tekstu na stronie WWW zrealizujemy poprzez zmianę zawartości znacznika akapitu umieszczonego pod przyciskami. W tym celu musimy uzyskać do niego dostęp z poziomu kodu js. Dodamy zatem do znacznika <p> własność id="t". Słowo id jest skrótem od identification, czyli identyfikacja:

<p id="t">.</p>

Spowoduje to, iż w strukturze strony ten znacznik <p> przestanie być anonimowy, stanie się on znacznikiem "t", czyli otrzyma "nazwisko". Pozwoli to odszukać znacznik i uzyskać doń dostęp przy pomocy funkcji składowej:

document.getElementById("nazwisko")

Funkcja zwraca obiekt o danym "nazwisku". Mając obiekt, możemy zmieniać jego zawartość przy pomocy własności obiekt.innerHTML. Własność ta udostępnia nam zawartość obiektu, czyli to, co obejmuje w kodzie HTML dany obiekt (u nas będzie to zawartość znacznika akapitu o nazwisku "t").

Mając te wiadomości, stwórzmy dwie funkcje js i umieśćmy je w znaczniku <script> na końcu sekcji ciała strony:

<script>
// Funkcja czyści tekst
function erase_p( )
{
    document.getElementById("t").innerHTML = ""
}

// Funkcja wypisuje 1000 liczb parzystych
function count_p( )
{
    let t ="<b>Obliczenia</b><br/><br/>"
    let i
    for(i = 0; i < 1000; i++)  t += 2*i + " "
    document.getElementById("t").innerHTML = t
}
</script>

Pierwsza funkcja erase_p( ) usuwa tekst z wnętrza obiektu o nazwie "t", czyli do akapitu objętego znacznikiem <p id="t">.

Druga funkcja count_p( ) tworzy zmienną t i wpisuje do niej początkowy tekst. Wewnątrz tekstu są znaczniki: <b>...</b> - pogrubia czcionkę oraz <br/> - przejście do nowego wiersza. Następnie w pętli for wykonywanej 1000 razy dodaje do tego tekstu kolejne liczby parzyste rozdzielone spacjami. Na koniec zawartość zmiennej t trafia do wnętrza akapitu o nazwie "t".

Teraz dodaj do przycisków zdarzenia onclick:

<button type="button" onclick="erase_p( )">Czyść</button>
<button type="button" onclick="count_p( )">Licz</button>
<p id="t">.</p>

Zapisz stronę w witrynie i sprawdź jej działanie w przeglądarce. Strona jest gotowa.

Do zapamiętania:

• Znacznik <script>.
• Obiekt document.
• Własność id="..." w znaczniku.
• Funkcje składowe obiektu document: write(...) i getElementById(...).
• Tworzenie funkcji js.
• Wywoływanie funkcji js.
• Własność obiekt.innerHTML.

Uruchom Expression Web. Z menu wybierz opcję

File → New → JavaScript

W edytorze zostanie utworzony plik Untitled_1.js. Pliki z kodem JavaScript mają standardowo rozszerzenie js, lecz są to zwykłe pliki tekstowe i możesz je tworzyć i edytować nawet w Notatniku.

Zapisz ten plik w katalogu scripts pod nazwą jsc_1.js.

Wróć do edytora na zakładkę jsc_1.js. W pliku js umieszczamy bezpośrednio kod js, bez znaczników <script>. Utworzymy dwie funkcje: erase_t( ) oraz fibo_t( ). Pierwsza funkcja będzie czyściła zawartość HTML w znaczniku o identyfikatorze t. Druga funkcja umieści w tym znaczniku 50 kolejnych liczb Fibonacciego.

Ciąg liczb Fibonacciego jest zdefiniowany następująco:

fib0 = 0
fib1 = 1
...
fibi = fibi - 2 + fibi - 1

Dwie pierwsze liczby ciągu są zdefiniowane bezpośrednio, następne są sumą dwóch poprzednich:

0 1 1 2 3 5 8 13 21 34 55 ...

Skopiuj do pliku jsc_1.js w edytorze poniższy tekst:

// Wymazuje tekst
function erase_t( )
{
    document.getElementById("t").innerHTML = ""
    return
}

// Zwraca n-tą liczbę Fibonacciego
function fibo(n)
{
    if(n < 2) return n
    let f0 = 0 // deklaracja zmiennych
    let f1 = 1 // z wartościami początkowymi
    let f2  // deklaracja zmiennej bez wartości
    for(let i = 2; i <= n; i++)
    {
        f2 = f0 + f1
        f0 = f1
        f1 = f2
    }
    return f2
}

// Wypisuje liczby fibonacciego o numerach od 0 do 50
function fibo_t( )
{
    let t = ""
    for(let i = 0; i <= 50; i++)
        t += "fibo<sub>" + i + "</sub> = " + fibo(i) + "<br/>"
    document.getElementById("t").innerHTML = t
}

Plik zapisz w witrynie (Ctrl+S).

Załaduj do edytora plik s3.html. Ustaw tryb Code i przekopiuj do sekcji <body> poniższy tekst:

<h1>Zewnętrzny plik z kodem js</h1>
<p><a href="index.html">Powrót do menu</a></p>
<button type="button" onclick="erase_t( )">Czyść</button>
<button type="button" onclick="fibo_t( )">Liczby Fibonacciego</button>
<p id="t">.</p>

Kod js w pliku dołączamy do kodu HTML strony WWW również przy pomocy znacznika <script>, tylko w tym przypadku w znaczniku umieszczamy jedynie adres URL pliku z kodem js:

<script src="adres pliku js"></script>

W sekcji nagłówka (<head>...</head>) wpisz:

<script src="scripts/jsc_1.js"></script>

Zapisz stronę w witrynie i sprawdź ją w przeglądarce.

W kodzie js pojawiło się polecenie let. Służy ono do tworzenia zmiennych. Zmienne powinny być tworzone przed pierwszym użyciem. Składnia jest następująca:

let zmienna = wyrażenie

lub

let zmienna1, zmienn2,...

W pierwszym przypadku tworzymy zmienną i nadajemy jej wartość. W drugim przypadku tworzone są zmienne, lecz nie otrzymują one żadnej wartości. Posiadają wartość undefined (niezdefiniowaną). Zmienna zadeklarowana za pomocą let ma zasięg bieżącego bloku ({ ... }). W danym bloku zmiennej takiej nie wolno ponownie definiować przy pomocy let. Jeśli musimy zmienić zawartość zmiennej, stosujemy przypisanie lub modyfikację.

Do zapamiętania:

• Tworzenie pliku z kodem js.
• Wstawianie odwołania do pliku js na stronie WWW.
• Zmienne js.

Interfejs

Poznaliśmy sposoby wyświetlania informacji w JavaScript:

• W trakcie ładowania strony, gdy przeglądarka napotyka na skrypt, zostaje on wykonany i działa funkcja składowa:
  document.write( )
• Gdy strona zostanie już w całości załadowana, funkcja document.write( ) przestaje działać i wyświetlanie tekstu opieramy na zmianie kodu HTML objętego przez wybrane znaczniki. Znaczniki te opatrujemy atrybutem id="nazwa". Dostęp do kodu HTML objętego takim znacznikiem uzyskujemy za pomocą funkcji składowej:
  document.getElementById("nazwa")

  W JavaScript każdy znacznik strony WWW jest obiektem i sam posiada różne atrybuty i własności. Funkcja:

  document.getElementById("nazwa")

  udostępnia odwołanie do tego obiektu, dlatego możemy się odwołać do jego własności innerHTML (wewnętrzny kod HTML) w sposób następujący:

  document.getElementById("nazwa").innerHTML...

  Odczyt własności daje nam dostęp do bieżącego kodu HTML objętego znacznikiem. Zapis własności zmienia kod HTML objęty znacznikiem. W ten sposób możemy wyświetlać dowolny tekst z poziomu kodu JavaScript.

Pozostaje problem odczytania danych tekstowych, które mógłby wprowadzić użytkownik. Tutaj korzystamy z elementu formularza. Formularze HTML wymyślono po to, aby zbierać różne dane od użytkownika. Dane te można wpisywać w pola tekstowe formularza, a następnie odczytywać z poziomu JavaScript.

Załaduj do edytora Expression Web stronę s4.html. Wpisz na początku wiersz:

Powrót do menu

Następnie utwórz z tego wiersza hiperłącze do strony index.html.

Teraz wstawimy formularz. W panelu Toolbox (jeśli go nie masz, to z menu wybierz opcję: Panels → Toolbox) przewiń suwakiem zawartość, aż dojdziesz do grupy Form Controls (kontrolki formularza).

Uchwyć lewym przyciskiem myszki element Form, przenieś go pod hiperłącze na stronie i upuść (zwolnij lewy przycisk myszki). W ten sposób pod hiperłączem został umieszczony formularz. W kodzie HTML formularz jest reprezentowany przez znacznik blokowy <form>:

<form action="" method="post">
</form>

Atrybutami action i method teraz się nie przejmuj, określają one sposób przesłania danych formularza. Znacznik <form> obejmuje treść formularza. Jeśli chcesz mieć dostęp do zawartości formularza z poziomu JavaScript, to formularz musi posiadać nazwę. Kliknij prawym przyciskiem myszki formularz pod hiperłączem i z menu kontekstowego wybierz opcję Form properties... (własności formularza):

W polu Form name: (nazwa formularza) wpisz frm i kliknij w przycisk OK:

Jeśli sprawdzisz kod strony, to zobaczysz, iż znacznik formularza otrzymał nowy atrybut name:

<form action="" method="post" name="frm">
</form>

document.nazwa_formularza

czyli w tym przypadku będzie to:

document.frm

W formularzu można umieszczać normalne znaczniki HTML jak również znaczniki specjalnie przeznaczone dla formularzy. Wszystkie znajdziesz w panelu Toolbox w sekcji Form controls.

Przejdź do strony s4.html w trybie Design i umieść kursor w polu formularza. Wpisz tekst:

Rozwiązywanie równań kwadratowych

ax² + bx + c = 0

a =

b =

c =

Z panelu Toolbox przeciągnij element Input (Text) i upuść go za znakiem = w "a = ". To samo powtórz dla "b = " i "c = ":

Kliknij prawym przyciskiem myszki w pierwsze pole tekstowe i z menu kontekstowego wybierz opcję:

Form Field Properties (własności pola formularza)

W okienku własności pierwszego pola tekstowego (a =) wpisz:

I zatwierdź przyciskiem OK. To samo zrób z drugim polem, tylko jako nazwę (Name) wpisz inp_b , a jako wartość początkową (Initial value) wpisz -5. W ostatnim polu wpisz nazwę inp_c i wartość początkową 3:

To odpowiada równaniu kwadratowemu: 2x² - 5x + 3 = 0.

Z poziomu kodu js dostęp do elementów formularza uzyskujemy następująco:

document.nazwa_formularza.nazwa_elementu

Umieść kursor z prawej strony za elementem inp_c i naciśnij Enter, po czym wstaw z panelu Toolbox do formularza dwa przyciski Input (Button):

Kliknij prawym przyciskiem myszki w pierwszy od lewej przycisk i z menu kontekstowego wybierz opcję Form Field Properties (własności elementu formularza). Pojawi się okienko dialogowe, w którym wpisz:

Zatwierdź okienko przyciskiem OK.

Tak samo zrób z drugim przyciskiem formularza:

Kliknij ponownie lewym przyciskiem myszki w pierwszy od lewej przycisk, aby go wybrać. Następnie ponad oknem edytora wskaż znacznik <input> i kliknij pojawiającą się przy nim strzałkę w dół. Z menu wybierz opcję: Edit Tag... W oknie Quick Tag Editor dopisz w znaczniku zdarzenie onclick:

Tak samo zrób z drugim przyciskiem:

W przyciskach formularza umieszczona została obsługa zdarzeń kliknięcia w nie myszką. Po kliknięciu pierwszego przycisku zostanie wywołana funkcja Clear( ). Po kliknięciu drugiego przycisku zostanie wywołana funkcja Solve( ). W naszym interfejsie potrzebujemy jeszcze elementu HTML, w którym będziemy wyświetlali wyniki obliczeń. Wystarczy nam zwykły akapit.

Umieść kursor po prawej stronie drugiego przycisku i wciśnij klawisz Enter. Pod przyciskami powinien zostać umieszczony akapit:

U góry okna edytora wskaż znacznik <p> i kliknij pojawiającą się strzałkę w dół. Z menu wybierz opcję Edit Tag... W oknie Quick Tag Editor dopisz w znaczniku atrybut id:

Interfejs jest gotowy. Przejrzyj kod strony s4.html. Utworzony formularz powinien posiadać następujący kod HTML (podobieństwo nie musi być idealne):

<form action="" method="post" name="frm">
	<p>Rozwiązywanie równań kwadratowych</p>
	<p>ax<sup>2</sup> + bx + c = 0</p>
	<p>a = <input name="inp_a" type="text" value="2" /></p>
	<p>b = <input name="inp_b" type="text" value="-5" /></p>
	<p>c = <input name="inp_c" type="text" value="3" /></p>
	<p><input name="btn_Clear" type="button" value="Czyść dane" onclick="Clear()"/>
      <input name="btn_Solve" type="button" value="Rozwiąż równanie" onclick="Solve()" /></p>
	<p id="t">&nbsp;</p>
</form>

Plik skryptu JS

Expression Web umożliwia tworzenie skryptów js, które następnie można wykorzystywać na różnych stronach WWW witryny. Kliknij w strzałkę w dół przy ikonie z lewej strony paska narzędziowego i wybierz opcję JavaScript. W edytorze zostanie utworzony pusty plik skryptu js. Plik zapisz w witrynie w katalogu scripts pod nazwą jsc_2.js.

W pliku tym zdefiniujemy funkcje Clear( ) oraz Solve( ), które wywołują zdarzenia onclick związane z przyciskami formularza.

W sekcji nagłówka (<head>...</head>) strony s4.html dodaj wpis:

<script src="scripts/jsc_2.js"></script>

Zaczniemy od prostszej funkcji Clear( ). Wpisz następujący kod:

function Clear()
{
   // Czyścimy pola tekstowe formularza
   document.frm.inp_a.value = ""
   document.frm.inp_b.value = ""
   document.frm.inp_c.value = ""
   // Czyścimy tekst wynikowy
   document.getElementById("t").innerHTML = ""
}

Kod ten czyści współczynniki równania w formularzu oraz tekst wyniku.

Funkcja Solve( ) w celu obliczenia pierwiastków równania musi najpierw odczytać wartości współczynników z pól tekstowych formularza. Dane numeryczne odczytujemy przy pomocy funkcji parseInt(...) lub parseFloat(...). Pierwsza z nich wykorzystywana jest przy liczbach całkowitych, druga przy liczbach zmiennoprzecinkowych. Parametrem funkcji jest tekst zawierający odczytywaną liczbę. Jeśli odczyt jest niemożliwy (gdyż użytkownik błędnie wpisał liczbę), to zwracana jest wartość specjalna NaN (ang. Not a Number, czyli nie-liczba). Odczytane współczynniki należy sprawdzić, czy nie zawierają wartości NaN i przerwać obliczenia, jeśli tak. Wartości NaN nie można normalnie testować operatorem porównania ==, należy użyć specjalnej funkcji isNaN(testowana wartość). Funkcja zwraca true, jeśli testowana wartość jest równa NaN i false w przypadku przeciwnym.

Algorytm rozwiązywania równań kwadratowych jest następujący (w uproszczeniu):

K01: Odczytaj współczynniki a, b i c
K02: Przerwij obliczenia,
     jeśli napotkasz w nich NaN
K03: Przerwij obliczenia,
     jeśli a = 0
K04: d = b2 - 4ac
K05: Jeśli d < 0,
     to brak pierwiastków rzeczywistych
     i koniec
K06: x1 = (-b - pierwiastek z d) / 2 / a
K07: x2 = (-b + pierwiastek z d) / 2 / a
K08: Wypisz pierwiastki
K09: Koniec

W algorytmie występuje funkcja pierwiastka kwadratowego. W js dostęp do funkcji matematycznych odbywa się poprzez obiekt Math, a do funkcji pierwiastka poprzez Math.sqrt( ) (ang. Square Root = pierwiastek kwadratowy).

Mamy wszystkie składniki, możemy przystąpić do tworzenia funkcji Solve( ). Przeanalizuj dokładnie jej kod i wpisz go do skryptu jsc_2.js:

function Solve( )
{
    // tekst wyniku
    let t = ""
    // odczytujemy współczynniki równania
    let a = parseFloat(document.frm.inp_a.value)
    let b = parseFloat(document.frm.inp_b.value)
    let c = parseFloat(document.frm.inp_c.value)
    // Testujemy NaN
    if(isNaN(a) || isNaN(b) || isNaN(c) || !a)
        t ="<b>Złe dane!!!</b>"
    else
    {
        let d = b * b - 4 * a * c // Delta
        if(d < 0)
            t ="<b>Brak pierwiastków rzeczywistych</b>"
        else
        {
            d = Math.sqrt(d) // Pierwiastek z Delta
            let x1 = (-b - d) / 2 / a
            let x2 = (-b + d) / 2 / a
            t ="x<sub>1</sub> = " + x1 + "<br/>" +
               "x<sub>2</sub> = " + x2
        }
    }
    // Wynik
    document.getElementById("t").innerHTML = t
}

Zapisz skrypt w witrynie, po czym przeglądnij stronę s4.html w przeglądarce.

Do zapamiętania:

• Wstawianie formularza na stronie WWW.
• Wstawianie elementów formularza.
• Dostęp do elementów formularza z poziomu js.
• Odczyt liczb z pól tekstowych formularza przy pomocy funkcji parseInt( ) i parseFloat( ).
• Test na wartość NaN przy pomocy funkcji isNaN( ).
• Obiekt Math i funkcja pierwiastka kwadratowego Math.sqrt( ).

Zaprojektujemy zegar cyfrowy, który będzie wyświetlał czas oraz datę. W tym celu musimy poznać kilka nowych funkcji oraz obiektów ze świata JavaScript.

Tablice w js

Tablica w języku js jest obiektem. Tablicę można utworzyć poprzez nadanie wartości kolejnym elementom:

let nazwa_tablicy = [lista_wartości]

Poniższy przykład tworzy tablicę o trzech pierwszych elementach będących tekstem i trzech dalszych będących liczbami:

let tabm = ["Ola", "Agata", "Tomek", 5, 12, 48]

Z powyższego przykładu wynika, iż typ elementów tablicy nie jest na stałe określony i można go dynamicznie zmieniać, To jest ogromna zaleta.

Dostęp do elementów tablicy odbywa się poprzez ich indeksy, które, podobnie jak w języku C++ rozpoczynają się od zera. Np. dla powyższej tablicy tabm[2] zwraca tekst "Tomek", a tabm[4] zwraca liczbę 12.

Można też utworzyć pustą tablicę:

let tabm = [ ]

W takim przypadku elementy wpisujemy do takiej tablicy instrukcjami przypisania:

tabm[0] = "Ola"
tabm[1] = "Agata"
tabm[2] = "Tomek"
tabm[3] = 5
tabm[4] = 12
tabm[5] = 48

Elementy tablicy mogą być dowolnymi obiektami js, w tym i tablicami.

Obiekt Date

Dostęp do czasu i daty mamy w js poprzez obiekt Date, który tworzymy następująco:

let nazwa_obiektu = new Date( )

Po utworzeniu obiektu dostęp do poszczególnych składników daty otrzymujemy poprzez jego funkcje składowe:

getDate( )

getDay( )

getMonth( )

getFullYear( )

getHours( )

getMinutes( )

getSeconds( )

Funkcja window.setInterval(...)

Tworząc zegar musimy mieć możliwość rytmicznego wywoływania funkcji, która wyświetla godzinę. Do tego celu używamy metody obiektu window o nazwie setInterval( ). Posiada ona dwa parametry: funkcję, oraz czas w milisekundach, po upływie którego funkcja ta jest wykonywana. Metodę setInterval(...) należy wywołać na samym końcu kodu js, aby wszystkie składniki były gotowe.

Interfejs

Załaduj do edytora Expression Web stronę s5.html.

W pierwszym wierszu umieść hiperłącze do strony głównej index.html. Poniżej hiperłącza wstaw nagłówek: Zegar w JavaScript. Poniżej wstaw akapit z trzema kropkami:

W akapicie dodaj atrybut id="t":

Interfejs jest gotowy.

Skrypt js z kodem zegara

Utwórz w edytorze Expression Web plik skryptu js (File → New → JavaScript) i zapisz go w katalogu scripts pod nazwą clk.js.

Skrypt napiszemy w trzech krokach. Gdy przeglądarka analizuje plik skryptu js w czasie ładowania strony, to kod js nie będący funkcją zostaje wykonany. Na początku skryptu utworzymy dwie tablice:

months z rzymskimi numerami miesięcy (ładniej się prezentują w dacie) oraz weekdays z polskimi nazwami dni tygodnia. Wpisz na początku skryptu:

let months =
[
    "I","II","III",
    "IV","V","VI",
    "VII","VIII",
    "IX","X","XI",
    "XII"
]
let weekdays = 
[
    "Niedziela",
    "Poniedziałek",
    "Wtorek",
    "Środa",
    "Czwartek",
    "Piątek",
    "Sobota"
]

Zwróć uwagę, iż elementy tablicy przy jej definicji można umieszczać w osobnych wierszach.

W drugim kroku napiszemy kod funkcji clock( ), która będzie wywoływana cyklicznie i będzie wyświetlała bieżący czas. Funkcja w skrypcie jest wykonywana dopiero po jej wywołaniu z poziomu kodu js. Przy wczytywaniu skryptu przeglądarka tylko zapamiętuje kod funkcji. Wpisz do skryptu:

function clock()
{
    // tworzymy obiekt Date
    let d = new Date()

    // odczytujemy czas
    let h = d.getHours()
    let m = d.getMinutes()
    let s = d.getSeconds()

    // odczytujemy datę
    let yr = d.getFullYear()
    let mt = d.getMonth()
    let md = d.getDate()
    let wd = d.getDay()

    // Tworzymy dwucyfrowe liczby
    if(h < 10) h = "0" + h
    if(m < 10) m = "0" + m
    if(s < 10) s = "0" + s

    // Tworzymy tekst czasu  
    let t = h + ":" + m + ":" + s +", "

    // Dodajemy tekst daty
    t += weekdays[wd] + " - " + md + " " + months[mt] + " " + yr

    // Wyświetlamy tekst czasu i daty na stronie
    document.getElementById("t").innerHTML = t
}

Ostatnim elementem skryptu będzie wywołanie metody window.setInterval( ), która będzie cyklicznie wywoływać funkcję clock( ). Wpisz do skryptu:

window.setInterval(function(){clock()},500)

Metoda ta zostanie wywołana po zapamiętaniu kodu funkcji clock( ). Następnie po upływie każdych 500 milisekund metoda setInterval( ) będzie wywoływała swoją wewnętrzną funkcję function ( ) { ... }, a ta z kolei wywoła naszą funkcję clock( ). Nieco zawiłe, ale tak to mniej więcej działa. Przemyśl to sobie.

Zapisz skrypt w witrynie i w edytorze wróć do strony s5.html. Przejdź na widok kodu. Przed końcem sekcji <body> ... </body> wpisz następujący znacznik <script>:

<script src="scripts/clk.js"></script>

Zapisz stronę s5.html w katalogu witryny i przeglądnij ją w przeglądarce.