← Lekcje
JavaScript · lekcja 05

Operatory 1/2:
liczymy w JavaScript

Dzisiaj:

  1. Pięć działań arytmetycznych: + - * / %
  2. Skrót przypisania += i podobne
  3. Licznik ++ i --: przed zmienną czy po?
  4. Ćwiczenie przy komputerze: własny kalkulator w JavaScript
Rozgrzewka · 3 minuty

Rozgrzewka: zmienne i typy

  1. Jakim słowem zadeklarujecie stałą, której wartości nie da się później zmienić?
  2. Co zwróci typeof "Ala"?
  3. Co się stanie, gdy spróbujecie przypisać nową wartość do zmiennej zadeklarowanej przez const?
Część 1 · Operatory arytmetyczne

Pięć działań na liczbach

Operator to znak działania między dwiema wartościami. Cztery z pięciu znacie z matematyki - w JavaScript działają dokładnie tak samo.

17 + 5 22 dodawanie 17 - 5 12 odejmowanie 17 * 5 85 mnożenie 17 / 5 3.4 dzielenie 17 % 5 2 reszta z dzielenia

Dzielenie / w JavaScript zawsze zwraca liczbę z częścią dziesiętną, gdy wynik się nie mieści w całości - tak jak 17 / 5 daje 3.4, nie 3.

MDN: Learn_web_development/Core/Scripting/Math (sekcja „Arithmetic operators”)
Część 2 · Znak plus

Znak + raz skleja, raz dodaje

W innych językach, na przykład w PHP, tekst skleja się znakiem ., a liczby dodaje znakiem + - dwa różne znaki. W JavaScript nie ma osobnego znaku do sklejania: + robi obie rzeczy naraz. Gdy choć jedna wartość jest tekstem, + skleja zamiast dodawać.

PHP . sklejanie: "Suma: " . 5 + dodawanie: 5 + 3 dwa różne znaki, dwie różne role JavaScript + sklejanie: "5" + 3 → "53" + dodawanie: 5 + 3 → 8 jeden znak, dwie role - zależy od typu

Przykład z MDN: let myNumber = "74"; myNumber += 3; daje tekst "743", nie liczbę 77 - bo myNumber jest zapisane jako tekst, więc += skleja.

MDN: Math (sekcja „Converting to number data types”)
Część 3 · Operatory przypisania

Skrót: x += 10

długi zapis x = x + 10; to samo skrót x += 10;
ZapisDziałaniePrzykładSkrót od
+=dodaj i zapisz z powrotemx += 4;x = x + 4;
-=odejmij i zapisz z powrotemx -= 3;x = x - 3;
*=pomnóż i zapisz z powrotemx *= 3;x = x * 3;
/=podziel i zapisz z powrotemx /= 5;x = x / 5;
MDN: Math (sekcja „Assignment operators”)
Część 4 · Inkrementacja i dekrementacja

num1++ czy ++num1?

++ zwiększa zmienną o 1, -- zmniejsza o 1 - to skrót od += 1 i -= 1. Kolejność znaku ma znaczenie: przy num1++ (post-inkrementacja) JavaScript najpierw odczytuje starą wartość, potem zwiększa; przy ++num1 (pre-inkrementacja) najpierw zwiększa, potem zwraca nową.

num1 = 4; console.log(num1++) 1. odczytaj: 4 2. zwiększ: num1 = 5 wynik: 4 num1 = 4; console.log(++num1) 1. zwiększ: num1 = 5 2. odczytaj: 5 wynik: 5

Ciekawostka z Wikipedii: nazwa języka C++ pochodzi od operatora ++, który właśnie poznajecie. C++ powstał jako rozszerzenie starszego języka C, a znak + w programowaniu od dawna oznaczał „ulepszoną wersję” - stąd C plus ++ zamiast zwykłego C.

MDN: Math (sekcja „Increment and decrement operators”); przykład zmiennej num1 z tej samej sekcji · ciekawostka: en.wikipedia.org/wiki/C%2B%2B (sekcja „History” → „Etymology”)
Egzamin EE.09 / E.14

Tak pytają na egzaminie

1. x = 0; x += 10; Który zapis w języku JavaScript daje jednakowy rezultat do przedstawionego kodu?

  1. x = 0; x++; x = x + 9;
  2. x = 0; x--; x *= 9;
  3. x = 10; x = x + 10;
  4. x = 10; x = 0;

2. Po wykonaniu skryptu napisanego w języku JavaScript zostanie wypisana wartość

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);
  1. 12,4
  2. 12,5
  3. 15,4
  4. 15,5
CKE, EE.09, styczeń 2023, zad. 4 · CKE, E.14, wrzesień 2014, zad. 37 (bank pytań, przedmiot strony, temat javascript)
Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: własny kalkulator

  1. Otwórz swój plik script.js (ten sam, w którym pracowaliście na poprzednich lekcjach).
  2. Zadeklaruj let a i let b, przypisz im dwie dowolne liczby, np. 17 i 5.
  3. Wypisz w konsoli cztery osobne wyniki: sumę (a + b), różnicę (a - b), iloczyn (a * b) i resztę z dzielenia (a % b).
  4. Dopisz let counter = 0;, zastosuj counter += 10;, potem counter--;, wypisz counter w konsoli.
  5. Zapisz plik, odśwież page.html w przeglądarce i sprawdź wynik w konsoli (F12 → Console).
  6. Dla chętnych: dopisz counter++; i sprawdź, jaką wartość pokaże teraz konsola.
Na koniec

Sprawdź się

  1. Czym różni się zapis x += 10 od zapisu x = x + 10?
  2. Co zwróci "5" + 3 w JavaScript, a co zwróci 5 + 3?
  3. Czym różni się x++ od ++x?

Na następnej lekcji: porównania == i === oraz operatory logiczne.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
+ do liczb i tekstu narazESLint, reguła no-implicit-coercion, ostrzega przed ukrytą zamianą typu (np. "" + foo) i każe pisać wprost String(foo).narzędzia
Liczba wpisana wprost w kodzie (17)Dane z formularza czy API przychodzą jako tekst - zanim policzycie, jawna zamiana Number(wartość), tak jak radzi MDN.nadal w użyciu
counter++ w konsoli++ zostaje w licznikach pętli i zdarzeń (odsłony, kliknięcia, próby logowania).nadal w użyciu
Cena jako liczba z przecinkiem (19.99)Pieniądze liczy się w groszach jako liczba całkowita, bo 0.1 + 0.2 nie daje dokładnie 0.3.float do pieniędzy: unikane
ESLint, reguła no-implicit-coercion (eslint.org/docs/latest/rules/no-implicit-coercion) · MDN: Math (sekcja „Converting to number data types”)