Wykorzystanie JavaScript w formularzu

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>

 

bez-tytulu

 

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

Dodaj komentarz