Witamy już w siódmym kursie przygotowującym do Kwalifikacji E.14. Potrafimy już tworzyć proste formularze teraz nauczymy się jak można wykorzystać je do wykonywania prostych operacji z użyciem JavaScript.
Zapraszamy.
Wykonamy prosty kalkulator umożliwiający dodanie dwóch liczb.
Więc od czego zaczynamy ?
Najpierw tworzymy prosty formularz wykorzystując dwa pole tekstowe oraz przycisk.
Tworzymy również znacznik <div> w miejscu w którym ma wyświetlić się wynik.
(Używając formularza tylko do obliczeń z wykorzystaniem JavaScript nie musimy korzystać ze znacznika <form>)
| <input type=”text”>
<input type=”text”> <input type=”button” value=”Prześlij”> <div id=”wynik1″></div> |
Jednak w takiej postaci nic nam nie zadziała. Najpierw musimy nadać identyfikator polom tekstowym aby skrypt wiedział skąd pobierać dane. Trzeba jednak pamiętać że skrypt rozróżnia wielkość liter.
| <input type=”text” id=”pole1″>
<input type=”text” id=”pole2″> <input type=”button” value=”Prześlij”> <div id=”wynik1″></div> |
Teraz możemy przejść do pisania skryptu pamiętając o znacznikach <script></script>
Ponownie wracamy do naszego formularza. Aby skrypt zadziałał musimy go w jakiś sposób wywołać. Możemy dodać różne wydarzenia które będą rozpoczynać działanie skryptu. W naszym kalkulatorze chcemy aby kalkulator działał po kliknięciu na przycisk więc użyjemy onclick. W cudzysłowiu podajemy nazwę naszej funkcji.
| <input type=”text” id=”pole1″>
<input type=”text” id=”pole2″> <input type=”button” onclick=”skrypt1″ value=”Prześlij”> <div id=”wynik1″></div> |
Jeśli nie zrobiliśmy żadnych literówek to powinniśmy otrzymać działający kalkulator:
Poniżej przedstawię tabelkę ze znacznikami oraz poleceniami z których możemy skorzystać w JavaScript.
| document.getElementById(“”) | Zwraca wartość z pola o podanym ID |
| onmouseover=”” | Zdarzenie dzięki któremu po najechaniu myszą wywołujemy funkcję |
| alert(“”) | Wyświetla okienko z wpisaną treścią |
| onclick=”” | Zdarzenie dzięki któremu po kliknięciu możemy wywołać funkcję |
| function(){ } | Przeznaczone do wykonywania określonego zadania |
Gotowy plik w formacie *.txt : skrypt.txt