Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

JS: Własności obiektu Math

środa,

JS: Własności obiektu Math

Obiekt Math zawiera własności i metody związane z funkcjami i stałymi matematycznymi. Dostępnych jest osiem własności, które przechowują wartości stałych matematycznych.

Math.EStała Eulera, podstawa logarytmu naturalnego, w przybliżeniu 2.718.
Math.LN2Logarytm naturalny liczby 2, w przybliżeniu 0.693.
Math.LN10Logarytm naturalny liczby 10, w przybliżeniu 2.302.
Math.LOG2ELogarytm o podstawie 2 z liczby E, w przybliżeniu 1.442.
Math.LOG10ELogarytm o podstawie 10 z liczby E, w przybliżeniu 0.434.
Math.PIWartość liczby Pi, w przybliżeniu 3.14159.
Math.SQRT1_2Pierwiastek kwadratowy z liczby 1/2, w przybliżeniu 0.707.
Math.SQRT2Pierwiastek kwadratowy z liczby 2, w przybliżeniu 1.414.

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;
}

Trzy miesiące temu na naszej stronie…

Artykuł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Sabayon Linux

Sabayon Linux

Artykuł: Władysław Wiśniewski

Władysław Wiśniewski

Artykuł: Quiz: Robert Lewandowski

Quiz: Robert Lewandowski

Artykuł: Bogumił Nowotny

Bogumił Nowotny

Artykuł: Stanisław Wyspiański

Stanisław Wyspiański

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły