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: <p>to jest <b>mój</b> <i>obrazek</i>:</p> <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. <b>, a zamykamy pisząc nazwę tagu poprzedzoną slashem też w nawiasach, np. </b>. 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: 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. AGS 2013-05-18 Zajęcia nr 15 JavaScript 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. AGS 2013-05-18 Zajęcia nr 15 JavaScript 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 AGS 2013-05-18 Zajęcia nr 15 JavaScript 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 agsamek@gmail.com Informacje o kolejnym kółku znajdziesz na stronie kółka: www.atinea.pl/kolko AGS 2013-05-18 Zajęcia nr 15 JavaScript 5 / 5