SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. ł ęść. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,

Transkrypt

1 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania ł ęść 1

2 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania 2

3 I. Aimowany baner Animowany Baner 3

4 I. Aimowany baner Animowany Baner Jak przygotować grafikę 4

5 I. Aimowany baner Animowany Baner 5

6 I. Aimowany baner Animowany Baner Ad Ten, tworzący dwie zmienne, kod stanowi podstawę całego skryptu. Pierwszy wiersz tworzy zmienną tablicową o nazwie adimages. W tym przypadku zmienna zawiera nazwy trzech obrazów GIF, które będą cyklicznie wyświetlane na stronie. Druga ze zmiennych nazywa się thisad i otrzymuje od razu swoją początkową wartość zero (pierwszy element tablicy) Ad Ten kod sprawdza, czy licznik banerów (zmienna thisad) osiągnął ogólną liczbę elementów w tablicy, a jeżeli tak, to wpisuje do zmiennej wartość 0. Ad Znajdujący się na stronie obrazek, który będzie poddawany podmianom, ma identyfikator adbanner. Ten wiersz kodu przepisuje adres źródła obrazka z tablicy adlmages z pozycji wyznaczanej zmienną thisad. Ad Wbudowane polecenie settimeout() pozwala określić, że po pewnym czasie ma zostać wykonana instrukcja wpisana w poleceniu. W tym przypadku jest to funkcja rotate (), która będzie wywoływana co 3000 milisekund, czyli co trzy sekundy. 6

7 I. Aimowany baner Animowany Baner - WSKAZÓWKI Wskazówki: Można się zastanawiać, po co konstruować animowane banery za pomocą JavaScriptu, zamiast wykorzystać po prostu animowane obrazki GIF. JavaScript pozwala na zastosowanie w animowanych banerach plików w formacie JPG lub PNG, które umożliwiają tworzenie obrazków o dużo lepszej jakości. Dzięki temu banery mogą mieć niemal fotograficzną jakość. W przeciwieństwie do przedstawianych wcześniej przykładów, obrazki banerów nie są ładowane wcześniej do bufora. Każdy z nich ładowany jest dopiero wtedy, gdy ma zostać wyświetlony. Po prostu w tablicy banerów może znajdować się dowolna liczba obrazów, a zmuszanie przeglądarki do pobierania od razu na przykład 100 obrazów spowodowałoby spadek prędkości wyświetlania strony. Poza tym nie miałoby to większego sensu, jeżeli użytkownik zobaczyłby najwyżej 2 lub 3 obrazki, po czym przeszedł na inną stronę. 7

8 I. Aimowany baner Animowany Baner + łacza Jak utworzyć baner będący łączem, które po kliknięciu przeniesie oglądającego na inną stronę 8

9 I. Aimowany baner Animowany Baner + łacza Wskazówka Aby skrypt działał poprawnie, tablica adurl musi mieć dokładnie tyle samo elementów, ile tablica. 9

10 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania 10

11 I. Aimowany baner Animowany Baner Jak przygotować grafikę Proszę zauważyć, że w tej wersji przeglądarki slajdów nazwy obrazków mogą być dowolne. 11

12 II Pokaz slajdów Pokaz slajdów (wersja I) 12

13 II Pokaz slajdów Pokaz slajdów (wersja I) 13

14 II Pokaz slajdów Pokaz slajdów (wersja II) Jak przygotować grafikę 14

15 II Pokaz slajdów Pokaz slajdów (wersja II) Ponieważ nie stosujemy tu PHP wszystkie opisy musimy wstawić do kodu JavaScript w postaci tablicy. 15

16 II Pokaz slajdów Pokaz slajdów (wersja II) 16

17 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania ś Jeżeli na naszej stronie znajduje się dużo grafiki lub prowadzimy galerię sztuki cyfrowej, to prawdopodobnie zainteresuje nas możliwość wyświetlania obrazka losowo wybieranego z kolekcji przy każdorazowym odwiedzeniu strony. 17

18 III Wyświetlanie losowych obrazków Wyświetlanie losowych obrazków 18

19 II Pokaz slajdów Pokaz slajdów (wersja II) Jak przygotować grafikę 19

20 III Wyświetlanie losowych obrazków Wyświetlanie losowych obrazków 20

21 SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania Negrino Tom, Smith Dori, Po prostu JavaScriopt i Ajax, wydanie VI, Helion, Gliwice