Zadanie 1
Transkrypt
Zadanie 1
Fragmenty strony http://www.poradnik-webmastera.com/kursy/javascript/wstawianie_skryptow_na_strone.php (przystosowano do przygotowania zadań szkolnych) Kurs języka JavaScript Skrypt JavaScript moŜna umieścić na stronie na dwa podstawowe sposoby: umieścić go bezpośrednio w treści strony, lub umieścić go w zewnętrznym pliku, który następnie będzie dołączony do strony. Obydwa sposoby mają swoje wady i zalety: pierwszy z nich jest łatwiejszy, gdyŜ nie trzeba się bawić z dodatkowymi plikami. Jest on jednak niewygodny, gdy ten skrypt musi być umieszczony na wielu stronach - konieczność wprowadzenia tej samej poprawki do skryptu w wielu plikach to nie jest to co tygrysy lubią najbardziej ;). Dlatego teŜ w takich przypadkach warto umieścić skrypt w osobnym pliku; to rozwiązanie ma teŜ tą zaletę, Ŝe przeglądarka wczyta taki plik z serwera przy wyświetleniu pierwszej strony, i przy kolejnych stronach juŜ nie będzie go ponownie ściągać z serwera. Dzięki temu strony będą mniejsze i będą się szybciej ładować. Znacznik słuŜący do umieszczania skryptów na stronie to <script> </script>. <script type="text/javascript"> <!-alert("Hello World!"); //--> </script> Umieszczenie skryptu w pliku html wygląda następująco: <html> <script type="text/javascript"> <!-alert("Hello World!"); //--> </script> </html> W takiej postaci moŜe być zapisany pod dowolną nazwą z rozszerzeniem html. Wstawienie powyŜszego skryptu na stronę spowoduje Ŝe w momencie ładowania strony pojawi się okienko z komunikatem "Hello World!" (takie jak po kliknięciu linku poniŜej skryptu). Cały skrypt JavaScript umieszczony wewnątrz znacznika <script>...</script> został dodatkowo otoczony komentarzem HTML. Dzięki czemuś takiemu przeglądarki które nie wspierają JavaScript zignorują cały skrypt poniewaŜ jest on umieszczony wewnątrz komentarza. Gdyby komentarza nie było, to przeglądarka wyświetliłaby kod skryptu na stronie WWW, co jest raczej mało poŜądane. Z tego powodu warto skrypty umieszczać wewnątrz komentarzy HTML. Przed znacznikiem kończącym komentarz HTML (czyli -->) umieszczone jest dodatkowo dwa slashe "//" - w ten sposób rozpoczyna się komentarz w JavaScript. Jest on tu umieszczony dlatego poniewaŜ koniec komentarza HTML jest niepoprawną instrukcją JavaScript, więc przeglądarka mogłaby zacząć zgłaszać błędy lub nie chcieć wykonać skryptu. Dzięki takiemu trikowi wszystko będzie działać poprawnie. Fragmenty strony http://www.poradnik-webmastera.com/kursy/javascript/wstawianie_skryptow_na_strone.php (przystosowano do przygotowania zadań szkolnych) Wspomniane dwa slashe "//" rozpoczynają komentarz, który kończy się na końcu linii wszystko co znajduje się poza tymi dwoma shashami jest ignorowane. Istnieje jeszcze drugi rodzaj komentarza, tzw. komentarz blokowy. Rozpoczyna się on slashem i gwiazdką "/*", a kończy gwiazdką i slashem "*/". Komentarz taki moŜe się rozciągać na wiele linii, zatem jest to wygodny sposób tymczasowego wyłączenia wykonywania fragmentów skryptu w trakcie ich pisania. W przykładzie poniŜej dodatkowe gwiazdki wstawione zostały tylko po to aby komentarz ładniej wyglądał :) // To jest komentarz /***************************** * To * * teŜ * * jest * * komentarz * *****************************/ Pokazany wcześniej skrypt wyświetlał okienko z komunikatem za pomocą funkcji alert(). Funkcja ta przyjmuje tutaj jeden parametr - tekst który ma zostać wyświetlony w okienku. Parametry funkcji (tutaj jest tylko jeden) naleŜy podawać w nawiasach okrągłych (rozdzielone przecinkami, jeŜeli ich jest więcej). KaŜda komenda musi być zakończona znakiem średnika ";". Drugą metodą pozwalającą umieścić skrypt JavaScript na stronie jest wczytanie go z zewnętrznego pliku. Plik ten powinien zawierać cały skrypt JavaScript (bez znaczników <script> i komentarza HTML). Pliki ze skryptami JavaScript zazwyczaj mają rozszerzenie nazwy .js (np. skrypt.js). Taki plik ze skryptem moŜna załadować stosując równieŜ znacznik <script>. W tym przypadku jednak znacznik ten będzie pusty w środku. Zamiast tego naleŜy podać dodatkowy atrybut src określający ścieŜkę (lub adres url) do pliku ze skryptem: <script type="text/javascript" src="skrypt.js"></script> Znacznik <script> moŜna umieścić na stronie wewnątrz znacznika <head> lub wewnątrz znacznika <body>. Przyjęło się iŜ wewnątrz znacznika <head> umieszcza się skrypty które będą uŜywane później (np. wykorzystywane później funkcje), zaś w sekcji <body> umieszcza się skrypty które mają za zadanie modyfikować (np. poprzez drukowanie czegoś) wygląd strony HTML w trakcie jej ładowania: <script type="text/javascript"> <!-document.write("<b>Hello World!</b>"); //--> </script> Hello World! W powyŜszym przykładzie uŜyłem funkcji document.write() która słuŜy do drukowania dowolnego fragmentu kodu HTML. W przypadku jak powyŜej, gdy skrypt np. coś drukuje, warto zadbać o przeglądarki które nie obsługują lub mają wyłączony JavaScript (oraz takŜe o wyszukiwarki) poprzez dostarczenie Fragmenty strony http://www.poradnik-webmastera.com/kursy/javascript/wstawianie_skryptow_na_strone.php (przystosowano do przygotowania zadań szkolnych) im alternatywnej treści do wyświetlenia zamiast wyniku działania skryptu. SłuŜy do tego znacznik <noscript> </noscript>, który naleŜy umieścić poniŜej wstawionego skryptu: <script type="text/javascript"> <!-document.write("<p><b>Hello World!</b></p>"); //--> </script> <noscript> <p><b>Hello World!</b></p> </noscript> Hello World! Hello World! W podany powyŜej sposób moŜna drukować do momentu aŜ strona załaduje się do końca (wtedy zostanie wygenerowane zdarzenie onload). Po zakończeniu ładowania się strony wywołania document.write() spowodują usunięcie obecnie załadowanej strony, i rozpoczęcie tworzenia nowej. Dlatego teŜ do modyfikacji wyglądu strony po jej załadowaniu naleŜy uŜyć innych metod, które operują na drzewie dokumentu DOM (Document Object Model). Dwa kolejne sposoby umieszczania skryptów to zdarzenia oraz adresy url rozpoczynające się od javascript:. Obydwa sposoby opiszę dokładniej w rozdziale opisującym Zdarzenia w JavaScript. Tutaj podam tylko ich składnię: <p onclick="alert('Cześć!')">Kliknij tutaj</p> <p><a href="javascript:alert('Hello!')">Kliknij tutaj</a></p> W tej lekcji kursu podawałem pełne przykłady skryptów (razem ze znacznikami <script> </script>). W kolejnych lekcjach zazwyczaj nie będę juŜ ich podawał - pamiętaj zatem aby samemu je dodać do skryptów które chcesz samemu sprawdzić. zadanie 1 Wykonaj stronę internetową zawierającą skrypt wyświetlający komunikat: Twój poziom wesołego nastroju jest zbyt niski!! Zainstaluj oprogramowanie rozweselające!!