Na przykładzie prostego skryptu można przedstawić podstawowe mechanizmy stosowane podczas programowania w języku JavaScript. Prezentowana mikroaplikacja to formularz, który pozwala obliczyć średnią z kilku liczb. Materiał ma charakter powtórkowy, nie dowiesz się z niego jak dołączać JavaScript do strony internetowej itp.

Wprowadż liczby oddzielone średnikiem:

Kod HTML

Kod HTML to standardowy formularz HTML oraz element <div>, w którym wyświetlany bedzie wynik obliczeń.

<form id="app">
	<input type="text" name="values" value="">
	<input type="submit" name="s" value="Przelicz">
</form>
<div id="result"></div>

Kod JavaScript

Dla uproszczenia kodu celowo nie zimplementowano żadnej obsługi błędów.

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 podobnie 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 [6 wiersz]).

Przy liczeniu średniej pierwszą operacją jest obliczenie sumy elementów. Początkowo suma wynosi zero (sum = 0). Wartość pobrana z pola formularza jest dzielona po znaku średnika przy pomocy metody split(';') [3 wiersz]. Otrzymana tablica liczb dzięki pętli może być zsumowana [4 wiersz]. Własność length tablicy (v.length) to ilość jej elementów. Metoda parseInt konwertuje łańcuch znaków na liczbę całkowitą.

Znając sumę elementów i ich ilość obliczenie średniej jest proste (sum/v.length) [5 wiersz]. Wynik umieszczony zostaje wewnątrz elementu o identyfikatorze "result" (document.getElementById('result').innerHTML) [5 wiersz].

document.getElementById('app').onsubmit = function() {
		var sum = 0;
		var v = document.querySelector('input[name=values]').value.split(';');
		for(i=0;i<v.length;i++) sum += parseInt(v[i]);
		document.getElementById('result').innerHTML=sum/v.length;
		return false;
	}