JavaScript · lekcja 19

Funkcje w JavaScript 4/4:
parseFloat, Math - powtórka funkcji

Plan tematu (4 godziny):

Godzina 1: własna funkcja - definicja, parametry, return
Godzina 2: funkcja wywołana przez przycisk
Godzina 3: co widzi funkcja - zmienne lokalne
Godzina 4 (dziś): parseFloat, Math - powtórka funkcji

Rozgrzewka · 3 minuty

Rozgrzewka: funkcje z lekcji 1-3

Jaki atrybut znacznika <button> wywołuje waszą funkcję po kliknięciu?
Co się dzieje ze zmienną zadeklarowaną słowem let wewnątrz funkcji, gdy funkcja się skończy?
Co zwraca funkcja, w której ciele nie ma słowa return?

Część 1 · Cały temat w jednym obrazku

Cztery godziny funkcji w JavaScript: powtórka

Trzy poprzednie godziny nauczyły was pisać własne funkcje. Ostatnia godzina pokazuje funkcje, których nie musicie pisać - są już gotowe w samym JavaScript.

Część 2 · parseFloat obcina tekst do liczby

`parseFloat`: obcina tekst do liczby z początku

Wartość z pola <input> to zawsze tekst (napis), nawet gdy pole ma typ number i wygląda jak liczba. Funkcja parseFloat(tekst) czyta napis od lewej: bierze cyfry, ewentualny znak minus i jedną kropkę dziesiętną, a zatrzymuje się na pierwszym znaku, który już do liczby nie pasuje - resztę napisu po prostu odcina.

Ciekawostka z MDN: NaN to jedyna wartość w JavaScript, która nie jest równa samej sobie - nawet NaN === NaN daje false. Dlatego do sprawdzenia, czy coś jest NaN, służy gotowa funkcja Number.isNaN(), a nie zwykłe porównanie.

MDN: Web/JavaScript/Reference/Global_Objects/parseFloat („parseFloat() picks the longest substring starting from the beginning that generates a valid number literal. If it encounters an invalid character, it returns the number represented up to that point, ignoring the invalid character and all characters following it”, tłum. własne: „parseFloat() wybiera najdłuższy fragment od początku, który tworzy poprawny zapis liczby. Gdy napotka nieprawidłowy znak, zwraca liczbę odczytaną do tego miejsca, pomijając ten znak i wszystko po nim”; „If the argument's first character can't start a legal number literal per the syntax above, parseFloat returns NaN”, tłum. własne: „Jeśli pierwszy znak argumentu nie może rozpocząć poprawnego zapisu liczby, parseFloat zwraca NaN”)

Część 3 · Math: funkcje gotowe na liczby

`Math`: gotowe funkcje, bez tworzenia obiektu

Podobnie jak w PHP round(), var_dump() czy date() z kursu PHP (lekcja 12), JavaScript ma gotowy zestaw funkcji na liczby zebrany pod nazwą Math. Nie tworzycie żadnego obiektu (nie ma new Math()) - wołacie funkcję wprost jako Math.functionName(...).

Funkcja	Co robi	Przykład
`Math.max(...)`	zwraca największą z podanych liczb	`Math.max(4, 9.4, -3.5)` → 9.4
`Math.min(...)`	zwraca najmniejszą z podanych liczb	`Math.min(4, 9.4, -3.5)` → -3.5
`Math.round(x)`	zaokrągla do najbliższej liczby całkowitej	`Math.round(9.4)` → 9
`Math.pow(a, b)`	liczy potęgę: `a` do potęgi `b`	`Math.pow(2, 10)` → 1024

MDN: Web/JavaScript/Reference/Global_Objects/Math („Unlike most global objects, Math is not a constructor. You cannot use it with the new operator or invoke the Math object as a function. All properties and methods of Math are static”, tłum. własne: „W przeciwieństwie do większości obiektów globalnych, Math nie jest konstruktorem. Nie można go użyć z operatorem new ani wywołać obiektu Math jako funkcji. Wszystkie właściwości i metody Math są statyczne”)

Część 4 · trzy narzędzia na tym samym zestawie liczb

Trzy narzędzia na tych samych liczbach

Ważna pułapka: Math.round() zawsze zaokrągla dokładną połówkę w kierunku +∞, nawet dla liczb ujemnych. Dlatego Math.round(2.5) daje 3, ale Math.round(-2.5) daje -2, nie -3.

MDN: Web/JavaScript/Reference/Global_Objects/Math/round („If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of +∞”, tłum. własne: „Jeśli część ułamkowa wynosi dokładnie 0,5, argument zaokrągla się do najbliższej liczby całkowitej w kierunku +∞”; „This differs from many languages' round() functions, which often round half-increments away from zero, giving a different result in the case of negative numbers with a fractional part of exactly 0.5”, tłum. własne: „Różni się to od funkcji round() w wielu innych językach, które często zaokrąglają dokładne połówki w kierunku od zera, co dla liczb ujemnych z częścią ułamkową równą dokładnie 0,5 daje inny wynik”)

Egzamin E.14

Tak pytają na egzaminie

1.

W formularzu dane z pola input o typie number zostały zapisane do zmiennej a, a następnie przetworzone w skrypcie JavaScript w następujący sposób:

var x = parseFloat(a);

Zmienna x będzie typu

NaN
napisowego.
zmiennoprzecinkowego.
liczbowego, całkowitego.

2.

Aby prawidłowo udokumentować linię kodu języka JavaScript, należy po znakach // wpisać komentarz:

x = Math.max(a, b, c); //

nieprawidłowe dane.
wybór losowej wartości ze zmiennych a, b i c
w zmiennej x minimalna wartość ze zmiennych a, b, c
w zmiennej x maksymalna wartość ze zmiennych a, b, c

CKE, E.14, czerwiec 2016, zadanie 26 · CKE, E.14, czerwiec 2016, zadanie 39

Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: calculate - podsumowanie tematu

W folderze ze swoją stroną otwórz page.html i script.js (te same pliki co na poprzednich lekcjach).
Dodaj pole <input type="number" id="inputValue"> i przycisk <button onclick="calculate()">Oblicz</button>.
W script.js napisz function calculate(): wczytaj wartość pola przez parseFloat, zapisz zaokrągloną wartość do zmiennej rounded (Math.round), zapisz jej kwadrat do zmiennej power (Math.pow(rounded, 2)) i wypisz obie wartości w konsoli.
Sprawdź w przeglądarce (F12, konsola): wpisz liczbę z częścią po przecinku, np. 4.6, kliknij „Oblicz”, sprawdź wynik.
Dla chętnych: wpisz w pole -2.5 i sprawdź, co pojawi się w konsoli.

Na koniec

Sprawdź się

Co zwróci parseFloat("7psów") i dlaczego akurat to?
Dlaczego przed wywołaniem Math.round() nie piszecie new Math()?
Ile wynosi Math.round(-2.5)? Czym różni się to od zaokrąglania „ze szkoły”?

To tyle na dziś - to była ostatnia godzina tematu funkcji w JavaScript.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`parseFloat(value)` do zamiany tekstu z pola na liczbę	Krótszy zapis `Number(value)` albo `+value` - ale bez „obcinania”: dla `"12abc"` zwrócą `NaN`, nie `12`.	nadal w użyciu (oba, do różnych sytuacji)
`Math.pow(rounded, 2)`	Operator potęgowania `rounded ** 2` - ten sam wynik, krótszy zapis.	rozszerzane
Wynik w `console.log`	Wynik trafia na stronę (zmiana treści elementu) - dział DOM, lekcje 20-25.	zastępowane
Liczby zmiennoprzecinkowe liczone wprost	Do pieniędzy liczy się raczej w najmniejszej jednostce (groszach) jako liczbach całkowitych - ten sam problem co przy PHP `round()` z kursu PHP (lekcja 12).	nadal w użyciu (obie metody, zależnie od zastosowania)

MDN: Web/JavaScript/Reference/Global_Objects/Math/pow („Math.pow() is equivalent to the ** operator, except Math.pow() only accepts numbers”, tłum. własne: „Math.pow() jest równoważny operatorowi **, z tą różnicą, że Math.pow() przyjmuje tylko liczby”)