Karkonoska Państwowa Szkoła Wyższa

Jelenia Góra ul. Lwówecka, tel. 75 645 33 00

JavaScript


Kod języka JavaScript w dokumencie HTML. Stworzenie własnej galerii zdjęć

   Co to jest JavaScript? JavaScript to język skryptowy wprowadzony przez Netscape, który umożliwia tworzenie interaktywnych stron WWW.
Skrypty języka JavaScript mają swoje ulubione miejsce w kodzie źródłowym dokumentu HTML. Jest nim sekcja HEAD - dzięki takiemu ulokowaniu zachowany zostaje porządek w konstrukcji kodu. Sa skrypt umieszczony jest między znacznikami "skrypt" "/skrypt". Takich par znaczników może być wiele - każdemu skryptowi może odpowiadać odrębna para. Umieszczanie skryptów w sekcji HEAD nie jest bezwzględne - można wstawiać skrypty także w innych sekcjach kodu, a czasami jest to wręcz konieczne. Niżej pokazany jest wydruk kodu HTML z wstawionym kodem JavaScript.

Przykładowy kod JavaScript wstawiony w kod HTML strony jest do obejrzenia tutaj JavaScript (przykład) »»» 

   Często stosowanym rozwiązaniem jest zamiast wstawiania skryptów bezpośrednio w kod strony, jest zastępowanie ich skryptami umieszczonymi w dołączanych plikach. Aby taki plik spełnił swoją rolę należy w tym przypadku zastosować dodatkowy atrybut src:

Niżej pokazany jest wydruk kodu HTML z plikiem js kodu JavaScript. JavaScript (plik js) »»» 


Zadania do samodzielnego wykonania (zadania na ocenę)

Zadanie 1 - własna strona internetowa

  • Wykorzystując opisany w temacie 5 sposób postępowania i udostępniony szablon kodu HTML, zbuduj własną stronę internetową, której treść będzie nawiązywała do wcześniej zadeklarowanego tematu. Strona ma zawierać 3 podstrony, z których jedna jest galerią, tj. zbiorem zdjęć z opisami, a pozostałe dwie to dowolnie zestawiony tekst. Logo strony (900x200 px), będące nagłówkiem strony ma zawierać nazwę kierunku, temat oraz nazwisko wykonawcy.
  • Przykładowa strona zawierająca podstronę z galerią i dwie podstrony z zawartością tekstową do obejrzenia tutaj Strona po zmianach »»» 

Zadanie 2 - własna podstrona internetowa z JavaScript

  • Dokonaj zmian w kodzie własnej podstrony internetowej o nazwie galeria z zadania 1, zgodnie z szablonem podstrony grafika udostępnionym niżej oraz załączonym plikiem galeria.js.
  • Tutaj szablon nowej podstrony o nazwie galeria Szablon podstrony grafika z js »»» 
  • Tutaj do pobrania plik galeria.js Plik galeria.js »»» 
  • Pobrany plik galeria.js zapisz w folderze galeria.
  • Przykładowa strona zawierająca podstronę z galerią obsługiwaną przez skrypt JavaScript jest do obejrzenia tutaj Strona po zmianach »»»