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