Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

Zespół Szkół Ogólnokształcących w Bobowej

JavaScript, to podstawowy język programowania stosowany na stronach internetowych. Zapewnia interakcję poprzez reagowanie na zdarzenia, sprawdzania danych wprowadzanych do formularzy i tworzenie złożonych efektów graficznych, w tym reklam i gier.

Moje scenariusze lekcji, to nie podręcznik JavaScript zawierający wszystkie możliwe odpowiedzi i rozwiązania. To raczej zestaw ćwiczeń, które krok po kroku wprowadzają w świat programowania na stronach WWW. Prawie 2 lata zbierania materiałów i tworzenia scenariuszy, 20 lekcji, ponad 200 programów z objaśnieniami, kilkaset godzin twórczo "zmarnowanych" przy komputerze i ponad 300 000 wklepanych znaczków, dokumentacja w pdf i w postaci strony internetowej. (mgr inż. Wacław Libront)

Każdy początkujący programista wyobraża sobie, że po kilku minutach i kilkunastu kliknięciach napisze grę komputerową, którą zachwyci cały świat. Rzeczywistość jest brutalna – prawie w każdym języku programowania naukę rozpoczyna się od matematycznych obliczeń i logicznego myślenia. Skopiowanie gotowego, wymyślonego przez kogoś kodu jest pożądane, ale tylko wtedy, gdy zrozumiemy, co kryje się pod "dziwnymi krzaczkami na białym tle".

Moje scenariusze lekcji, to nie podręcznik C++ zawierający wszystkie możliwe odpowiedzi i rozwiązania. To raczej zestaw ćwiczeń, które krok po kroku wprowadzają w świat programowania. 12 lekcji, kilkadziesiąt rozwiązanych programów, kilkaset godzin twórczo "zmarnowanych" przy komputerze i ponad 300 000 wklepanych znaczków. (mgr inż. Wacław Libront)

Czytaj więcej: JavaScript 20 - Animacja i zderzeniaObiektami SVG można zarządzać za pomocą JavaScript, co pozwala na zmianę rozmiaru, kształtu i położenia. Obliczając odległości pomiędzy nimi można także określać oddziaływania, co przydaje się do tworzenia interaktywnych prezentacji, czy gier. Napiszemy prostą grę, w której za pomocą odbijającej się kulki sterowanej klawiaturą będziemy zbijać przeszkody (cała lekcja do pobrania).

Multithumb found errors on this page:

There was a problem loading image 'pliki/js/js19usmiech.svg'
There was a problem loading image 'pliki/js/js19usmiech.svg'
There was a problem loading image 'pliki/js/tarcza.svg'
There was a problem loading image 'pliki/js/tarcza.svg'

Czytaj więcej: JavaScript 19 - SVG a CSS Czytaj więcej: JavaScript 19 - SVG a CSSObiekty SVG można poddać kontroli Kaskadowych Arkuszy Stylów CSS. Ma to duże znaczenie między innymi w tworzeniu map i diagramów, gdzie wymagana jest skalowalność obiektów bez utraty jakości Możemy też kontrolować zachowanie obiektów, na przykład po wskazaniu myszką. Tworzenie skomplikowanych kształtów może być jednak trudne, jeśli posługujemy się „pokratkowaną kartką papieru” i próbujemy ręcznie wyliczać położenie punktów. Każdy program do obróbki grafiki wektorowej, w tym też darmowy Inkscape ma możliwość wyeksportowania rysunku w postaci pliku svg. Najwygodniej jednak kopiować poszczególne krzywe i uzupełniać je o niezbędne informacje już w notatniku.

Grafika SVG na stronach internetowych jest tworzona wektorowo, a to oznacza że może być skalowana bez utraty jakości, jak to ma miejsce w grafice rastrowej, czyli w typowych fotkach. Umiejętność rysowania podstawowych figur połączymy z możliwościami, które daje animacja (pierwsze lekcje tego kursu) i stworzymy wskazówkowy zegar, pokazujący aktualny czas. Tarcza, to tylko kwadraty i koła, animacja, to zaledwie 2 znane już instrukcje. Nowością są metody, za pomocą których można "dostać się" w głąb elementu SVG. Czy uwierzycie, że to tylko 60 linijek kodu!? A więc do dzieła! (cała lekcja do pobrania)

Multithumb found errors on this page:

There was a problem loading image 'pliki/js/wiatry.svg'
There was a problem loading image 'pliki/js/wiatry.svg'

Czytaj więcej: JavaScript 17 - SVG TransformacjePodobnie jak w canvas, obiekty svg można również transformować, tzn. przesuwać, skalować i obracać (cała lekcja).

Multithumb found errors on this page:

There was a problem loading image 'pliki/js/znak.svg'
There was a problem loading image 'pliki/js/znak.svg'

Czytaj więcej: JavaScript 16 - SVG Grafika wektorowaGrafika tworzona za pomocą składni SVG jest grafiką wektorową – oznacza to, że utworzone w ten sposób obiekty można powiększać bez utraty jakości obrazu. Kiedy stosować CANVAS, a kiedy SVG? SVG, to matematyczny opis tego co znajdzie się na stronie. Canvas, to obraz składający się z pojedynczych pikseli. SVG nie powinien być wykorzystywany, gdy obraz jest skomplikowany i dynamiczny (np. gry) – procesor jest zbyt zajęty analizą obrazu (cała lekcja).

Czytaj więcej: JavaScript 15 - PikselePiksele w w obszarze canvas rezprezentowane są przez obiekt ImageData. Jest to jednowymiarowa tablica, w której każde kolejne 4 komórki reprezentują składowe [R,G,B,A]. Operacji na tym obiekcie możemy dokonywać trzema metodami: createImageData – tworzymy pusty obiekt, getImageData - pobieramy obiekt z canvas, putImageData - utworzony lub pobrany obiekt możemy ponownie umieścić w canvas. Niestety tablica pikseli jest jednowymiarowa i musimy posługiwać się dodatkowymi obliczeniami, aby „dostać się” do każdego piksela i jego składowych kolorów (cała lekcja, islandia).

var kwa=c.createImageData(256,256);
for (var y=0;y<256;y++){
for (var x=0;x<256;x++){
  var i=(x+y*256)*4;
  kwa.data[i+0]=y;
  kwa.data[i+1]=x;
  kwa.data[i+2]=y-x;
  kwa.data[i+3]=255;
}}
c.putImageData(kwa,0,0);

Za pomocą HTML i znacznika <img> potrafimy wyświetlać grafiki na stronie WWW. Wykorzystując JavaScript będziemy mogli podmieniać grafiki na inne i dokonywać wielu różnorodnych przekształceń. Służy do tego instrukcja DrawImage (cała lekcja, obrazki do lekcji). 

Potrafimy rysować geometryczne obiekty w obszarze canvas za pomocą linii, prostokątów, łuków i przeprowadzać na nich skomplikowane obliczenia niezbędne do ich animowania. Do obszaru canvas można również wczytać dowolne grafiki bitmapowe. Na początku zajmiemy się tzw efektem rollover, czyli zamianą jednego obrazka na inny po najechaniu (kliknięciu) na niego myszką (cała lekcja, obrazki), zsologo).

 

var Tnaz = new Array( 'cd','dr','fd','hd','gr','mu','kl','md','mo','my','pa','pl','po','pr','sk');
var Tobr=new Array();
for (i=0; i<Tnaz.length; i++) {
  Tobr[i] = new Array(); 
  Tobr[i][0] = new Image();
  Tobr[i][0].src='obrazki/'+Tnaz[i]+'.gif';
  Tobr[i][1] = new Image();
  Tobr[i][1].src='obrazki/'+Tnaz[i]+'_.gif'
}
Zobacz tutaj