Witam!

W tym poście chciałbym przedstawić wam zasadę działania prostych stron internetowych, które oferują nam przeliczanie walut. A zatem rozpocznijmy.

Rodzaje

Zasadniczo mamy różne rodzaje takich stron. Jedne typy stron, te najprostsze oferują nam tylko jedną bądź dwie operacje. Na przykład zamianę dolarów na złotówki i odwrotnie. Zwykle autorzy takich stron decydują się jeszcze dodać do swojej strony takie dodatki jak np. kurs dolara lub co częściej jest spotykane dużo reklam, bo jak wiadomo jak można na swojej stronie zarobić to czemu nie? Zdarzają się też strony, w których mamy i kurs, i reklamy. Następnym rodzajem stron są strony, które oferują nam przeliczanie już wielu walut. Wygląda to tak, że wybieramy sobie odpowiadającą nam walutę a następnie walutę, na którą chcemy ją przeliczyć. Wpisujemy w pola tekstowe odpowiednią wartość i klikamy w przycisk, który najczęściej jest zatytułowany „Oblicz” . Po wykonaniu tych czynności ukazuje nam się wartość. I tu podobnie są strony z reklamami i z kursami, a także z jednym i z drugim.

Zasada działania

Zasada jest następująca, w przypadku zamiany np. dolara na złotówki internauta wpisuje ilość dolarów w polu tekstowym i klika oblicz. Przycisk ten rozpoczyna działanie skryptu, który pobiera wpisaną wartość z pola tekstowego, mnoży go przez wartość złotówki i otrzymany wynik podaje w określonym elemencie strony. I to wszystko. Przejdźmy teraz do zasady działania od strony kodu.

Obliczenia w JS

Skoro już używamy przykładów zamiany dolara na złotówki to zróbmy przelicznik dolara na złotówki wykorzystując język HTML i JavaScript. Jak już wspomnieliśmy potrzebne nam będzie pole tekstowe, z którego będziemy mogli pobrać wartość zawierającą ilość dolarów. Należy też nadać temu polu identyfikator aby komputer wiedział, z którego konkretnie pola ma pobrać wartość. Nazwijmy to pole np ilość.

<input type="number" id="ilość"/>

I pole już gotowe. Warto też wspomnieć, że jeśli w „type” wpiszemy „number”, to w naszym polu dozwolone będą tylko liczby a przecież o to nam chodzi. Skoro mamy już pole to pora zabrać się za napisanie funkcji. Umieścimy ją w części „head” strony. Nasz kod będzie w JS więc musimy poinformować komputer gdzie kod się zacznie a gdzie skończy.

<script type="text/javascript">...miejsce na kod...</script>

Gotowe! Możemy w tym miejscu rozpocząć pisanie w języku JavaScript. Pierwsze co musimy zrobić to utworzyć funkcję. Nazwijmy ją na przykład USDnaPLN, bo będziemy zamieniać dolary na złotówki.

function USDnaPLN() {...miejsce na kod...}

Zrobione! Teraz zabierzemy się za zawartość tej funkcji. Musimy pobrać wartość z pola tekstowego i gdzieś ją przechować. Utworzymy sobie więc zmienną np. o nazwie dolary, której wartością będzie liczba wpisana w pole o identyfikatorze ilość.

var dolary = ilość.value;

Następnie musimy stworzyć pole, w którym będzie wyświetlany wynik operacji. Również musimy nadać mu identyfikator. Nazwijmy je np. wynik. Pamiętajmy, że pole to dodajemy już w „body” jako kod HTML a nie jako część funkcji.

<p id="wynik"></p>

Teraz możemy już wrócić do naszej funkcji i ją skończyć. Teraz nadamy wartość polu o nazwie „wynik” wykonując obliczenia. Tutaj będziemy potrzebowali wiedzieć ile złotych kosztuje jeden dolar. Możemy to sprawdzić w internecie. Według obecnego kursu 1$ = 3,91030zł. Możemy więc dokończyć funkcję.

document.getElementById("wynik").innerHTML =  dolary+"dolarów to: "+dolary*3,91030+" złotych";

I tak oto skończyliśmy naszą funkcję ale czegoś nam jeszcze brakuje. Musimy też posiadać przycisk, który po kliknięciu uruchomi nam funkcję. Robimy go w następujący sposób:

<input type="button" value="Oblicz" onclick="USDnaPLN();"/>

I skończone! Teraz po kliknięciu przycisku wykona się nasz skrypt i wyświetli się wartość.

Na zakończenie

To już wszystko w tym poście. Wspólnymi siłami dobrnęliśmy do końca i zrobiliśmy własną stronę przeliczającą waluty. Dobra robota! Do następnego postu!