Zajęcia nr 16 JavaScript – wprowadzenie do JavaScript
Transkrypt
Zajęcia nr 16 JavaScript – wprowadzenie do JavaScript
Zajęcia nr 16 JavaScript – wprowadzenie do JavaScript Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko Przykład „Dorysuj wagonik” Uruchom Chrome i wejdź na stronę http://jsfiddle.net/bUW7W/ . Kod html: <button id="buttonLok">Dorysuj lokomotywę</button> <br /> <button id="buttonWag">Dorysuj wagonik</button> Kod JavaScript: $('#buttonLok').click(lokomotywa); $('#buttonWag').click(wagonik); function lokomotywa() { var button = $('#buttonLok'); var etykieta = button.text(); var nowaEtykieta = "lokomotywa " + etykieta; button.text(nowaEtykieta); } function wagonik() { $('#buttonWag').text($('#buttonWag').text() + " wagonik"); } Zwróć uwagę na ustawioną opcję: „jQuery 1.10.1” – włącza ona bibliotekę jQuery, która definiuje funkcję „$”. instrukcja opis $('#buttonLok').click(lokomotywa); Instaluje funkcję „lokomotywa” do obsługi kliknięcia na obiekcie o id „buttonLok” function lokomotywa() { Deklaruje funkcję „lokomotywa” i otwiera blok instrukcji var button = $('#buttonLok'); Przypisuje do zmiennej „button” obiekt o id „buttonLok” var etykieta = button.text(); Wywołuje funkcję „text” na obiekcie „button” i przypisuje wynik do zmiennej etykieta. Funkcja text wywołana bez argumentu zwraca aktualnie ustawiony tekst na obiekcie. var nowaEtykieta = "lokomotywa " + etykieta button.text(nowaEtykieta); AGS 2013-06-08 Zajęcia nr 16 JavaScript Do zmiennej nowaEtykieta przypisujemy połączenia napisów „lokomotywa ” i napisu ze zmiennej etykieta Wywołuje funkcję „text” na obiekcie „button” z argumentem nowaEtykieta. Funkcja text wywołana z jednym argumentem ustawia tekst na obiekcie. 1/3 } Zamyka blok instrukcji funkcji lokomotywa function wagonik() { Deklaruje funkcję „wagonik” i otwiera blok instrukcji $('#buttonWag').text( $('#buttonWag').text() + " wagonik" ); Robi bardzo podobną rzecz do funkcji lokomotywa, ale zamiast używać zmiennych, używa od razu wyników funkcji i obliczeń. Przykład „Piłka” Uruchom Chrome i wejdź na stronę http://jsfiddle.net/LRzsY/ . Kod html: <canvas id="canvasId" width="400" height="300" style="border: solid 1px" /> Kod JavaScript: /* Funkcja rysuj przyjmuje trzy argumenty: ctx - kontekst do rysowana na canvas x i y - pozycja piłki */ function rysuj(ctx, x, y) { // ustawiamy styl wypełnienia ctx.fillStyle = "rgb(255, 0, 0)"; // rozpoczynamy figurę ctx.beginPath(); // rysujemy pełny łuk - od 0 do 2*pi, czyli kółko // na pozycji x, y i o promieniu 10. ctx.arc(x, y, 10, 0, Math.PI * 2, true); // wypełniamy figurę ctx.fill(); } // pozycja piłki var px = 0; var py = 0; // prędkość piłki - pozioma i pionowa var vx = 5; var vy = 5; // rozmiar obrazka var mx = 400; var my = 300; // ta funkcja wylicza nową pozycję piłki, // a jak dojdziemy do ściany, to zmienia prędkość function przesun() { // nowa pozycja px = px + vx; py = py + vy; // czy dotarliśmy do prawej lub lewej ściany? if (px >= mx || px < 0) { // zmien kierunek poziomy na przeciwny vx = -vx; } // czy dotarliśmy do dolnej lub górnej ściany? if (py >= my || py < 0) { // zmień kierunek pionowy na przeciwny vy = -vy; } } AGS 2013-06-08 Zajęcia nr 16 JavaScript 2/3 // ta funkcja będzie wywoływana co 50 milisekund // czyli 20 razy na sekundę function animacja() { // pobierz kontekst rysowania // z obiektu canvas o id canvasId var ctx = document.getElementById('canvasId').getContext('2d'); // wyczyść rysunek ctx.clearRect(0, 0, mx, my); // oblicz nową pozycję piłki przesun(); // narysuj piłkę na pozycji px, py na kontekście ctx rysuj(ctx, px, py); // za 50ms wywołaj funkcję animacja jeszcze raz setTimeout(animacja, 50); } // pierwsze wywołanie funkcji animacja. Bez niego nie ruszy. animacja(); Wiele piłek: http://jsfiddle.net/K6auw/ Odbicia piłek: http://jsfiddle.net/w4TkC/ 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 AGS 2013-06-08 Zajęcia nr 16 JavaScript 3/3