Przetwarzanie formularzy, kalkulatory online, walidacja formularzy w JavaScript



Pobieranie 59,39 Kb.
Data02.06.2018
Rozmiar59,39 Kb.

Przetwarzanie formularzy, kalkulatory online, walidacja formularzy w JavaScript




  1. Kalkulator obliczający kwadrat i pierwiastek liczby

a) projekt formularza



  1. kod formularza i skrypt

x=id="x">



onclick="kwadrat()">






  1. Przelicznik walut

a) projekt formularza

b) kod formularza I skrypt



<form method="post" action="" name="f">

name="Text1" /> zł


onClick ="przelicz()"/>

form>


  1. Utwórz skrypt

<script type=”text/javascript”>

function przelicz()

{

zl = document.f.Text1.value;



usd = zl/3.02;

euro = zl/4.01;

alert(zl + 'zl to:\n' + usd.toFixed(2) + 'usd\n' + euro.toFixed(2) + 'euro');

}

script>



  1. Sprawdź działanie skryptu w przeglądarce



Uwagi!!!:

  • Dostęp do pól formularza identyfikowanego za pomocą atrybutów id (Formularz i zawiera pole tekstowe z atrybutem id równym Pole): document.getElementById('Pole').value;

  • Dostęp do pól formularza identyfikowanego za pomocą atrybutów name.

Jeżeli formularz ma nazwę Formularz i zawiera pole tekstowe z atrybutem name równym Pole, to aby odwołać się do wartości value tego pola, możemy skorzystać z odwołań:

document.Formularz.Pole.value

lub


document.forms['Formularz'].Pole.value


  • Funkcja toFixed(2) konwertuje liczbę zmiennoprzecinkową do dwóch miejsc po przecinku

  • Znak formatujący \n oznacza nową linię

  • Operator + dla łańcuchów tekstowych oznacza konkatenację – łączenie łańcuchów, żeby zmienna tekstowa traktowana była jak liczba należy zastosować funkcję parseFloat() dla konwersji do typu zmiennoprzecinkowego lub parseInt() przy konwersji stałoprzecinkowej

  • Funkcje matematyczne zgrupowane są w obiekcie Math np.:

    • Math.sqrt() – pierwiastek

    • Math.pow(a,b) – potęga a^b

Ciekawostka: Jak za pomocą potęgi obliczyć pierwiastek: Math.pow(a, 0.5)

Wyniki działania skryptu możemy wyświetlić na wiele sposobów:

  • za pomocą funkcji alert(x*x) – wynik pojawia się w wyskakującym okienku

  • document.write(x*x) – wynik pojawia się na nowej stronie

  • Zapis do innego pola formularza: document.getElemenById(”wynik”).value = x*x;

  • Zapis do bloku: document.getElemenById(”wynik”).innerHTML = x*x;

adania


  1. Zaprojektuj formularz przelicznika walut oraz napisz funkcję realizującą konwersję. Wyniki działań powinny znaleźć się w odpowiednich polach formularza. Nazwij pola formularza odpowiednio zl, usd, euro.

- Zastosuj funkcję konwersji do dwóch miejsc po przecinku




  1. Zaprojektuj formularz prostego kalkulatora i napisz skrypt realizujący podstawowe operacje arytmetyczne



Uwaga: do każdego przycisku napisz oddzielną funkcję:



©operacji.org 2017
wyślij wiadomość

    Strona główna