docZadanie 1
download 
Reklamacja 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!!
