Lekcja 1

Canvas, kwadraty i kolory w JS

1. canvas
2. zmienne
3. komentarze
4. prostokąty
5. kolory
6. pętla for
7. sklejanie

JavaScript, to profesjonalny, skryptowy język programowania, za pomocą którego możemy tworzyć praktycznie dowolne aplikacje na stronach WWW. A ponieważ ten zestaw scenariuszy nie ma ambicji nauczyć "wszystkiego", ale tylko podstaw programowania przy użyciu JavaScript, dlatego z praktycznych i wizualnych powodów, naukę rozpoczniemy od "rysowania" po stronie WWW.

Canvas
Canvas (płótno) pozwala rysować po ekranie. Piksele płótna tworzą układ współrzędnych: lewy górny róg, to punkt o współrzędnych (0,0). Aby stworzyć obszar canvas na stronie WWW korzystamy z instrukcji HTML canvas oraz funkcji getContext(„2d”) w JS:

<canvas width="200" height="200" id="can"></canvas>
<script>
  var c = can.getContext("2d");
	//możemy rysować

</script>

Zmienne
Zmienna jest „pudełkiem”, w którym przechowujemy jakieś dane. Bez zmiennych nie można sobie wyobrazić działania jakiegokolwiek programu: przechowujemy w nich informacje, wykonujemy z ich pomocą różnorodne działania i poprawiamy czytelność naszych skryptów. Jak nazywać zmienne?

• Zaczynamy się zawsze od litery lub znaku podkreślenia

• Duże i małe litery są rozróżnialne

• Nie stosujemy polskich znaków

• Musi to być jeden wyraz

• Nie może być to słowo zastrzeżone w JS

Typy zmiennych
Proste typy zmiennych to liczbowe, tekstowe i logiczne. JS nie wymaga deklaracji typu zmiennej – system sam rozpoznaje typ podczas deklaracji. Można też w dowolny sposób zmieniać typ zmiennej w trakcie działania programu. JS ma problem z dodawaniem zmiennych – automatycznie traktuje dwie zmienne jak teksty i je skleja. Najlepiej w takim przypadku zdeklarować zmienną o konkretnym typie (np. liczbowym). Podczas odejmowania, mnożenia, czy dzielenia wszystkie działania wykonywane są poprawnie. Typy złożone to tablica i obiekt. Tablica to ponumerowany (0,1,2…) zestaw komórek pod jedną nazwą. Obiekt zaś to taki sam zestaw komórek, ale każda z nich nosi konkretną nazwę. Więcej o tych obiektach w dalszej części. Pozostałe konstrukcje JS (warunki logiczne, pętle, funkcje, itp.) zostaną omówione w kolejnych lekcjach.

Przykłady deklaracji zmiennych

var Nr = new Number(20); //liczba
var Text = new String('tekst'); //tekst
var Bol = new Boolean(true); //typ logiczny
var Tablica = []; //tablica
var Obiekt = {}; //obiekt

Komentarze
Komentarz, to taka "notatka na marginesie", która służy prawdziwemu programiście do opisania tego, o czym myślał podczas pisania tego fragmentu kodu. Po co się to robi? Jeśli za jakiś czas trzeba będzie wrócić do programu i coś poprawić, komentarze okażą się błogosławieństwem!

Komentarz nie jest brany pod uwagę, podczas pracy przeglądarki i nie wyświetlany jest na stronie WWW. Komentarz rozpoczynamy podwójnym ukośnikiem "//". Jeśli komentarz ma obejmować kilka wierszy kody, wygodniej jest wstawić na początku "/*" i na końcu "*/".

Prostokąty

<canvas width="200" height="200" id="can"></canvas>
<script>
  var c = can.getContext("2d");
  
  //wypełniony niebieski kwadrat
  c.fillStyle="blue";
  c.fillRect(25,25,100,100);
  //wycinamy środek
  c.clearRect(45,45,60,60);
  //czerwona kwadratowa ramka
  c.strokeStyle="red";
  c.strokeRect(50,50,50,50);
  //wypełniony czarny prostokąt
  c.fillStyle="black";
  c.fillRect(55,65,40,20);

</script>

• fillRect(x,y,s,w) rysuje wypełniony prostokąt
• strokeRect(x,y,s,w) rysuje obramowanie prostokąta
• clearRect(x,y,s,w) czyści określony obszar
• fillStyle=kolor kolor wypełnienia
• strokeStyle=kolor kolor ramki

Kolory
Do określania kolorów możemy używać angielskich nazw kolorów stosowanych w HTML: „black”, „red”, „blue”, „green”, „yellow”, „white”, „grey”, itd. Aby wykorzystać pełną paletę barw stosujemy instrukcję rgb(R,G,B), w której trzy parametry mogą przyjmować wartości 0..255.

Do określania przeźroczystości stosujemy instrukcję rgba(R,G,B,A) – ostatni parametr (alfa) określa przeźroczystość i może przyjmować wartości od 0 do 1 (np. 0.5).

//półprzeźroczyste kolorowe kwadraty
var bok = 80;
c.fillStyle ="rgba(255, 0, 0, 0.5)";
c.fillRect(20, 20, bok, bok);
c.fillStyle ="rgba(0, 0, 255, 0.5)";
c.fillRect(80, 80, bok, bok);

Pętla FOR
Pętla FOR powtarza instrukcje określoną ilość razy. Pętla FOR korzysta z dodatkowej zmiennej (sterującej), która przyjmuje określone w pętli wartości. W pętli nie powinno „wytwarzać się” konkretnych wartości. Pętla powinna sterować (numerować), a wartości niezbędne do działania programu tworzymy wewnątrz. Lepiej czyta się program i mniej możliwości popełnienia błędów.

Rysujemy trzy przesunięte kwadraty

• pętla "zakręci się" trzy razy

• zmienna "i" przyjmuje wartości: 0, 1, 2

• zmienna "x" przyjmuje wartości: 20 (przed pętlą) i 80, 140, 200 (w pętli)

• pierwszy kwadrat: (20, 20, 80, 80)

• drugi kwadrat: (80, 80, 80, 80)

• trzeci kwadrat: (140, 140, 80, 80)

//trzy przesunięte kwadraty
var sz = 80;
var x = 20;
var skok = 60;
c.fillStyle ="RGBA(255,0,0,0.5)";
for (var i = 0; i < 3; i = i + 1) {
  c.fillRect(x, x, sz, sz);
  x = x + skok;
}

Przykład pętli, "brzydkiej", w której obliczamy za pomocą zmiennej sterującej

// przykład pętli „brzydkiej”
var sz = 80;
var skok = 60;
c.fillStyle ="RGBA(255,0,0,0.5)";
for (var x = 20; x < 160; x = x + skok) {
  c.fillRect(x, x, sz, sz);
}

Co oznaczają "dziwne" zapisy w pętli FOR?

• var i = 0  tzw. zmienna sterująca pętlą przyjmuje wartość początkową zero
• i < 3   pętla będzie "się kręcić" dopóki warunek logiczny jest prawdziwy - dopóki i jest mniejsze od 3
• i = i + 1  za każdym "obrotem" pętli zmienna sterująca jest zwiększana o jeden. Pętla może być też zmniejszana lub zwiększana o dowolną wartość. Zapis można skrócić do "tajemniczego" i++
• jeśli w pętli wykonywana jest tylko jedna instrukcja, nie musimy wstawiać nawiasów {}

Sklejanie tekstu z liczbami
Zmienna KOLOR powstała poprzez połączenie fragmentów tekstowych, np. "rgba(0,0," i liczbowych, np. alfa. Łączymy za pomocą operacji dodawania. Javascript skleja łańcuchy tekstowe, liczby i zawartość zmiennych bez problemu - nie musimy je poddawać konwersji.

//łączenie tekstu z liczbami
for (var i = 0; i < 10; i = i + 1) {
  var b = i * 20;
  var x = 100 + i * 10;
  var bok = i * 20;
  var alfa = 1- i * 0.1;
  var kolor = "rgba(0, 0, " + b + ", " + alfa + ")";	
  c.fillStyle = kolor;
  c.fillRect(x,x,bok,bok);
 }

Szablon

<canvas width="200" height="200" id="can"></canvas>
<script>
  var c = can.getContext("2d");



</script>