Twoja przeglądarka nie wspiera Canvas!

Instrukcje

Lekcja marzec 2018

W trakcie tej lekcji nauczysz się: Stosować instrukcje pętli i warunkowe języka, metody losowej JavaScript. Publikować efekty na stronie internetowej.
URL:
https://canvas-2d.blogspot.com/2018/03/instrukcje.html
Autor:
Radosław Kowaluk

Wykład

Instrukcja jest to najmniejszy samodzielny element języka programowania. Najważniejsze to instrukcje warunkowe i pętle.

Pętla for i blok

Przykładem pętli jest instrukcji for, która powtarza wykonie instrukcji, dopóki warunek jest prawdziwy. W warunku często wykorzystujemy operator mniejszy niż <
Zanalizujmy aktywnie przykłady.
Zastosowanie pętli for.

Przetestuj przykład zmieniając kod w lewym prostokącie np. wartość zmiennej i, warunek.
Jeśli ma być wykonane kilka instrukcji tworzymy z nich blok za pomocą nawiasów { }.
Zastosowanie bloku { }.

Zmień kod przykładu.
Często w insrukcji pętli
W przykładzie zastosowano operator ++.

Zmień kod przykładu.

Podsumowując, możemy przyjąć następujące definicje.
for([wyrażenieInicjalizacji]; [warunek]; [wyrażenieInkrementacji])
Instrukcja ECMAScript, definiująca pętlę.
<
Operator ECMAScript, mniejszy niż.
{ }
Blok ECMAScript, definiujący ciąg instrukcji.
++
Operator ECMAScript, powiększa argument o jeden.

Instrukcja if

if(warunek) instrukcja
Instrukcja ECMAScript, powoduje wykonanie kodu instrukcja tylko wtedy, gdy warunek jest spełniony.

W przykładzie zastosowano instrukcję if.

Zmień warunek instrukcji if.
Napisany kod możemy opublikować na stronie internetowej lub blogu.
Zastosowanie pętli.

Zmień kod przykładu.

Metoda Math.random()

Math.random()
Metoda ECMAScript obiektu Math, zwraca liczbę losową równą lub większą od zera i mniejszą od jedynki.
Math.random() =
Zastosowanie losowości w połączeniu z pętlami daje bardzo ciekawe rezultaty.
W przykładzie zastosowano metodę Math.random().

Zmień kod przykładu.
Zastosowanie pętli.

Zmień kod przykładu.

Ćwiczenia

  1. Wykonaj lekcje 11-15 z kursu Kodujący Stwór

Zadania

  1. Utwórz stronę internetową zawierającą element canvas o dowolnym rozmiarze, zawierający tło i kompozycję losowych prostokątów.

Inspiracja

Ilość prostokątów: Maksymalna szerokość: wysokość:

Szukaj

Kurs

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