Twoja przeglądarka nie wspiera Canvas!

Wyrażenia

Lekcja marzec 2018

W trakcie tej lekcji nauczysz się: Stosować zmienne i operatory: =, +, -, *, /. Odczytywać atrybuty elementu canvas. Publikować efekty swojej pracy.
URL:
https://canvas-2d.blogspot.com/2018/03/wyrazenia.html
Autor:
Radosław Kowaluk

Wykład

Wyrażenia języka programowania składa się z operatorów, nazw zmiennych (identyfikatorów) i wartości różnego typu. Na poprzedniej lekcji poznaliśmy już operator podstawiania (=).
Operator jest funkcją, która najczęściej posiada symbol (są wyjątki). Zwraca wartość na podstawie argumentów.

Operator plus +

Operator + oznacza w języku JavaScript dodawanie jeśli argumentami są liczby.
Zanalizujmy aktywnie przykłady.
W przykładzie zastosowano operator plus + w sumie.

Przetestuj przykład zmieniając kod w lewym prostokącie.
Jeśli jednym z argumentów jest łańcuch operator + będzie łączył ciągi znaków. Wcześniej nastąpi konwersja liczby na łańcuch.
W przykładzie zastosowano operator plus + w konatenacji.

Zmień wartość zmiennej k. Usuń znaki "" w kodzie "204".

Podsumowując, możemy przyjąć następujące definicje.
+
Operator ECMAScript, dodawanie lub konkatenacja.

Operatory -, *, /

Do operatorów arytmetycznych zaliczamy funkcje sumy, różnicy, iloczynu i ilorazu.
-
Operator ECMAScript, odejmowanie lub liczba przeciwna.
*
Operator ECMAScript, mnożenie.
/
Operator ECMAScript, dzielenie.
Kolejność wykonywania działań w wyrażeniu możemy zmienić za pomocą nawiasu.
W przykładzie zastosowano operator *.

Zmień wartość zmiennej s.
W przykładzie zastosowano operator -.

Zmień wartość zmiennych a, b
W przykładzie zastosowano operator /.

Zmień wartość zmiennej s.

Szerokość i wysokość obrazu

width
Atrybut HTML, szerokość elementu canvas.
height
Atrybut HTML, wysokość elementu canvas.
Możemy w języku JavaScript odczytać (lub zmienić szerokość) i wysokość obrazu canvas w następujący sposób nazwa_zmiennej.width (analogicznie nazwa_zmiennej.height), gdzie nazwa zmiennej jest identyfikatorem elementu canvas.
Przykład zastosowania zmiennych i operatorów.

Zmień wielkość grafiki i wartości zmiennych: s.
Innym sposobem odczytu jest odwołanie w postaci nazwa_zmiennej.canvas.width (analogicznie nazwa_zmiennej.canvas.height), gdzie nazwa zmiennej jest identyfikatorem kontekstu canvas.
Przykład zastosowania zmiennych i operatorów.

Zmień wielkość grafiki i wartości zmiennych: a, x, y, s.

Ćwiczenia

  1. Wykonaj lekcje 6-10 z kursu Kodujący Stwór (Operatory i przypisanie, Więcej operatorów, Zastosowanie operatorów, Nietypowe dodawanie, Quiz: Zmienne, operatory i kolory)

Zadania

  1. Utwórz stronę internetową zawierającą element canvas o dowolnym rozmiarze, zawierający tło i kompozycję kolorowych prostokątów. Użyj wyrażeń tak, aby grafika była skalowalna.

Inspiracja

Kliknij obraz aby wygenerować ponownie!

Szukaj

Kurs

Wstęp
Kolorowe prostokąty
Wyrażenia
Instrukcje
Kolorowe linie
Funkcje
Obiekty
Transformacje
Fraktale
Animacje
Interakcje
Indeks