Przykład

Obliczanie pola koła z wykorzystaniem własności Math.PI.

Kod HTML

Kod HTML to standardowy formularz HTML oraz element <div>, w którym wyświetlany bedzie wynik obliczeń. Dzięki atrybutowi pattern elementu input wymuszono poprawny format danych. Jedynym błędem może być wprowadzenie wartości 0 (zero), ponieważ nie ma koła o promieniu zero, jednak ta nieprawidłowość została obsłużona w kodzie JavaScript.

<form id="app">
	<input type="text" name="values" value=""
          required  pattern="([0-9]*[(.|,)])?[0-9]+"
          placeholder="Wprowadź promień koła, np. 2.55">
	<input type="submit" name="s" value="Oblicz">
</form>
<div id="result"></div>

Kod JavaScript

Dostęp do wybranych elementów strony umożliwiają metody obsługi drzewa DOM (Document Object Model). W skrypcie wykorzystano metody document.getElementById() oraz document.querySelector(). Pierwsza działa zgodnie z nazwą i powinna być zrozumiała. Druga wykorzystuje mechanizm selektorów w podobny sposób jak w języku CSS.

Formularz nie powinien zostać wysłany (obliczenia prowadzone są po stronie klienta), dlatego należy przechwycić odpowiednie zdarzenie (event), którym jest onsubmit [1 wiersz] i zatrzymać wysyłkę (return false [5 wiersz]).

[wiersz 2]

Funkcja parseFloat() przetwarza wartość pobraną z pola formularza w postaci łańcucha znaków i zwraca liczbę zmiennoprzecinkową. W języku JavaScript (i większości innych) separatorem dziesiętnym jest kropka. Polscy użytkownicy będą wprowadzali w tym miejscu przecinek, dlatego przy pomocy metody replace() zniwelowano ten problem (zamieniono przecinek na kropkę).

[wiersz 3]

Jeśli użytkownik wprowadził zero, nie są wykonywane obliczenia i wyświetlony zostanie odpowiedni komunikat. W przeciwnym wypadku wartość pobrana z formularza zostaje podstawiona do wzoru i obliczane jest pole.

[wiersz 4]

Wynik umieszczony zostaje wewnątrz elementu o identyfikatorze "result" (document.getElementById('result').innerHTML).

document.getElementById('app').onsubmit = function() {
	var r = parseFloat(document.querySelector('input[name=values]').value.replace(',','.'));
	var result = (r == 0 ? 'Błędne dane' : r*r*Math.PI);
	document.getElementById('result').innerHTML=result;
	return false;
}