Zajęcia nr 15 JavaScript – wprowadzenie do JavaScript

Transkrypt

Zajęcia nr 15 JavaScript – wprowadzenie do JavaScript
Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko
Wprowadzenie do jsfiddle.net
Uruchom Chrome i wejdź na stronę http://jsfiddle.net . Ekran jest podzielony na parę części:
1. Pasek na górze z przyciskami:
a. Run – uruchamia program
b. Save lub Update – zapisuje program. W pasku adresu pojawia się nowy adres, który
należy zapamiętać lub zapisać (np. http://jsfiddle.net/88f22/ ).
c. TidyUp – ładnie formatuje nasz program
2. Po lewej Menu z dużą ilością opcji (na początku mało interesujące).
3. Cztery główne pola po prawej:
a. HTML – tutaj wpisujemy szablon strony WWW do wyświetlenia.
b. CSS – tutaj wpisujemy style (na początku mało interesujące).
c. JavaScript – tutaj wpisujemy program
d. Result – tutaj pojawia się strona WWW i wynik działania programu
Prosta strona WWW
Zacznijmy od stworzenia prostej strony WWW. W okienku HTML wpiszmy:
To jest mój obrazek:
<canvas id="RysunekID" width="400" height="300" style="border: solid 1px">
</canvas>
Następnie naciśnij Run. Zobacz co pojawiło się w okienku result. Powinno to wyglądać mniej
więcej tak:
To jest mój obrazek:
Języka HTML składa się z tekstu (tutaj „To jest mój obrazek”) i tzw. tagów, które piszemy w
nawiasach trójkątnych. Tagi otwieramy pisząc w nawiasach nazwę tagu, np. , a zamykamy
pisząc nazwę tagu poprzedzoną slashem też w nawiasach, np. . Niektóre tagi mają parametry,
które umieszczamy przy otwieraniu tagu, np. tag canvas ma parametr width="400", który określa
jego szerokość. Parametr style określa style, np. style="border: solid 1px" mówi, że element ma
mieć ramkę ciągłą o grubości 1px.
Więcej tagów może poznać szukając w Internecie haseł: html lista tagów
Przy nauce programowania w JavaScript i HTML będziemy bardzo często używali wyszukiwarek,
żeby poszerzać naszą wiedzę. Będę podawał hasła, których warto wyszukiwać. Uruchom wtedy
wyszukiwarkę (np. Google), wpisz te hasła i przejrzyj kilka pierwszych stron. Wybierz tą, która
najbardziej ci pasuje. Następnie poeksperymentuj ze znalezionymi wynikami w twoim programie.
AGS 2013-05-18 Zajęcia nr 15 JavaScript
1/5
Przykładowy program w JavaScript rysujący na Canvas
Na naszej stronie WWW użyliśmy tagu Canvas. Wygląda on jak prostokąt, gdyż określiliśmy mu
odpowiedni styl ramki. Tag Canvas tworzy element, na którym można rysować. Do okienka
JavaScript wpisz następujący program:
var c = document.getElementById('RysunekID').getContext('2d');
c.font = '10px Arial';
c.fillStyle = 'rgb(0, 255, 0)';
var i = 0;
while (i < 10) {
c.fillText('hello ' + i, i * 30, i * 10 + 20);
i = i + 1;
}
Przed uruchomieniem programu warto wywołać konsolę Chrome wciskając przycisk menu w
prawym górnym rogu Chrome (trzy kreski), następnie Narzędzia i Konsola JavaScript. Można też
użyć kombinacji Shift+Ctrl+J.
Na konsoli pokażą się komunikaty o ewentualnych błędach w programie. Zawsze warto mieć ją
włączoną.
Uruchom program wciskając Run. Program powinien wygenerować następujący wynik:
Zobaczmy co się dzieje w programie:
Ta instrukcja tworzy zmienną c i przypisuje do niej obiekt do rysowania, wyciągnięty z tagu, który
ma parametr id=”RysunekID”. Zmienne w JavaScript mogą przechowywać liczby, napisy i obiekty.
Obiekty to bardzo różne rzeczy, które udostępniają nam tzw. metody. Na razie skupimy się na
obiekcie do rysowania.
2/5
Mamy więc zmienną c i przypisaną do niego referencję do obiektu rysowania. W skrócie możmy
powiedzieć, że zmianna c to obiekt rysowania. Dalej:
c.font = "10px Arial";
c.fillStyle = "rgb(0, 255, 0)";
Te dwie instrukcje nadają atrybuty obiektowi, do którego referencja jest trzymana w zmiennej c. W
skrócie nadajemy atrybuty obiektowi c. Atrybut font określa, jaką czcionką będziemy pisać. Tutaj
jest to Arial o wielkości 10 pikseli. Atrybut fillStyle mówi, że będziemy rysowali kolorem
zielonym.
Więcej nazw czcionek możesz znaleźć szukając w Google: html font list
Wybór kolorów możesz dokonać szukając: rgb color
var i = 0;
while (i < 10) {
...
i = i + 1;
}
Ten kod powinien być w miarę zrozumiały – deklarujemy zmienną i, przypisujemy do niej 0 i
robimy pętlę przechodzącą od 0 do 9.
c.fillText('hello ' + i, i * 30, i * 10 + 20);
Ta instrukcja pisze tekst. Dokładnie robi to metoda fillText. Przyjmuje ona trzy parametry:
•
tekst, który chcemy wypisać, tutaj: 'hello ' + i
•
pozycję w poziomie na rysunku, tutaj: i * 30
•
pozycję w pionie na rysunku, tutaj: i * 10 + 20
Zauważ, że symbol „+” w wyrażeniu 'hello ' + i nie jest operacją dodawania liczb, a łączenia
napisów. W JavaScript symbol plus jest używany zarówno do dodawania liczb, jak i łączenia
napisów.
Więcej metod obiektu canvas znajdziesz szukając: javascript canvas metody
W tym wyszukiwaniu każde słowo jest istotne. „javascript” mówi, o jaki język chodzi. Jeśli nie
użyjesz tego słowa to dostaniesz opis obiektów canvas w wielu innych językach, gdyż jest to bardzo
popularna nazwa na obiekty. W każdym języku jednak taki obiekt będzie miał inny zestaw metod.
Słowo „canvas” w wyszukiwaniu mówi nam właśnie o jaki obiekt chodzi, a słowo „metody”
spowoduje dwie rzeczy: dostaniemy listę metod oraz głównie strony w języku polskim. Wpisz w
wyszukiwarkę samo „javascript canvas”, a dostaniesz głównie strony w języku angielskim.
Zadania
Zadanie 1
Zapełnij cały obiekt Canvas literkami „X”.
Zadanie 2
Napisz zdanie „Prawy dolny róg”, tak żeby było na samym dole Canvasu i dosunięte do prawej, ale
nie może wychodzić poza Canvas.
3/5
Zadanie 3
Wypełnij cały Canvas kolorem niebieskim i napisz na nim swoje imię kolorem żółtym. Wyszukaj w
internecie nazwy metody wypełniającej prostokąt oraz sprawdź w internecie jaki kod ma kolor
niebieski, a jaki kolor żółty.
Rysowanie linii na Canvas
Wpisz poniższy program:
c.fillStyle = 'rgb(0, 255, 0)';
c.beginPath();
c.moveTo(10, 10);
c.lineTo(100, 20);
c.lineTo(30, 200);
c.fill();
c.strokeStyle = 'rgb(0, 0, 255)';
c.lineWidth = 5;
c.stroke();
I zobacz jak działa. Użyte metody:
• fillStyle – atrybut określający kolor (lub styl) kolejno rysowanych wypełnień.
• beginPath() - bez parametrów, rozpoczyna „ścieżkę” czyli figurę.
• moveTo(x,y) – przesuwa do podanej pozycji, bez rysowania linii
• lineTo(x,y) – rysuje linię od ostatniego punktu do podanej pozycji
• fill() - bez parametrów, wypełnia figurę
• strokeStyle – atrybut określający kolor (lub styl) kolejno rysowanym liniom.
• lineWidth – atrybut określający szerokość rysowanych kolejno linii
• stroke() - metoda, które rysuje linie na określonej ścieżce.
Zadania
Zadanie 5.
Zapełnij cały canvas kwadratami:
Zadanie 5.
Zapełnij cały canvas kwadratami w różnych kolorach. Napis określający kolor możesz
wygenerować pisząc, np.:
var kolor = 'rgb(' + x + ',' + x + ',' + x + ')';
c.fillStyle = kolor;
Ta instrukcja przypisze do zmiennej kolor napisz „rgb(123,123,123)”, jeśli w zmiennej x będzie
4/5
wartość 123. A następnie określi styl wypełnienia na kolor. Poeksperymentuj z innymi zmiennymi.
Pamiętaj, że wartości kolorów rgb powinny być pomiędzy 0 a 255.
W domu zrób rysunek, z którego będziesz dumny, pokazujący nowe metody rysowania, które
wyszukałeś w internecie.
Rozwiązania zadań domowych wyślij na adres email [email protected]
Informacje o kolejnym kółku znajdziesz na stronie kółka: www.atinea.pl/kolko
5/5

Zajęcia nr 15 JavaScript – wprowadzenie do JavaScript

Transkrypt

Podobne dokumenty

Dodatkowe zdjęcia produktu Dostępne kolory: Koszulka BELLA+

Detekcja pluginów w przeglądarce

1 Wstęp