Wprowadzenie do JavaScript - Część 1
Wprowadzenie do JavaScript
Część 1
Co to jest JavaScript?
JavaScript jest nowym językiem skryptowym dla dokumentów internetowych. Skrypty napisane za pomocą JavaScript mogą być umieszczane bezpośrednio na stronach HTML. Język daje obszerne możliwości wzbogacania stron w interesujące elementy. Na przykład możesz zdefiniować reakcję na zainicjowane przez czytelnika działania. Niektóre efekty jeszcze niedawno były możliwe jedynie przy użyciu CGI, a teraz jesteś w stanie zbudować wyrafinowane konstrukcyjnie strony za pomocą JavaScript. Wiele przykładów użycia języka możesz zobaczyć w Internecie - sporo odsyłaczy znajdziesz na stronie Gamelan (w części dotyczącej JavaScript). Pod adresem http://home.netscape.com znajdziesz dokumentację dostarczoną przez Netscape Communications.
Jaka jest różnica między językami Java i JavaScript?
Mimo zbieżności nazw Java nie jest tożsama z JavaScript. Są to dwie odrębne techniki programowania w Internecie. Java jest językiem programowania, natomiast JavaScript jest językiem skryptowym, jak zresztą sugeruje sama nazwa. Różnica polega na tym,że Java pozwala tworzyć rzeczywiste programy. Ale nie zawsze musisz sobie zaprzątać głowę prawdziwym programowaniem, aby uzyskaćładny efekt na swojej stronie. JavaScript jest pomyślany jako narzędzie łatwe do zrozumienia i zastosowania. Autorów piszących w JavaScript nie musi zbytnio obchodzić programowanie. Można powiedzieć,że JavaScript jest raczej rozszerzeniem HTML niż odrębnym językiem komputerowym. Oczywiście nie jest to "oficjalna" definicja, ale myślę,że pozwala ona łatwiej uchwycić różnicę między Javą i JavaScript. Więcej informacji na temat obu języków znajdziesz w serwisie Gamelan, a także na stronie Netscape.
Jak można uruchamiać skrypty JavaScript?
Pierwszą przeglądarką obsługującą JavaScript był Netscape Navigator 2.0, jak i, oczywiście, poźniejsze jego wersje. Być może wiesz,że nie wszystkie wersje Navigatora czytają Javę, ale JavaScript jest interpretowany na wszystkich platformach, choć występują pewne problemy w niektórych wersjach. Wersja dla Macintosha, dla przykładu, wydaje się mieć pewną ilość błędów. W najbliższej przyszłości dalsze przeglądarki będą wyposażone w możliwość interpretacji JavaScript, m.in. Microsoft Internet Explorer 3.0. Przeglądarki takie szybko się upowszechnią, więc warto poznać tę technikę już teraz. Wszystko, co powinieneś znać, to podstawowe techniki i radzenie sobie z problemami, które mogą się pojawić.
Naturalnie powinieneś już dysponować pewną znajomością języka HTML, zanim rozpoczniesz naukę JavaScript. Wiele wartościowych materiałów szkoleniowych na ten temat znajdziesz w sieci - przeszukaj choćby serwis Yahoo (możesz także skorzystać z polskiego podręcznika dla początkujących na stronie Wydawnictwa Lupus - przyp. tłum.). Materiały online są zazwyczaj bardziej aktualne niż książki - Internet zmienia się ostatnio bardzo szybko...
A teraz pokażę Ci kilka małych skryptów, które zilustrują sposób ich implementowania na stronie HTML i możliwości oferowane przez nowy język. Rozpocznę od skryptu, który będzie po prostu wyświetlał jakiś tekst.
<html>
<head>
My first JavaScript!
</head>
<body>
<br>
To jest normalny dokument HTML.
<br>
<script language="LiveScript">
document.write("To jest JavaScript!")
</script>
<br>
I znowu dokument HTML.
</body>
</html>
Jeśli Twoja przeglądarka akceptuje JavaScript, powinieneś zobaczyć poniżej wszystkie trzy wiersze przykładu. Jeśli nie, zobaczysz tylko dwa.
To jest normalny dokument HTML.
I znowu dokument HTML.
Muszę przyznać, że nie jest to zbyt użyteczny skrypt. W języku HTML napiszesz to na pewno szybciej i prościej. Ale chciałem pokazać, jak powinieneś stosować znaczniki <script>. Możesz je zastosować w dowolnym miejscu swojego dokumentu HTML.
Nie chcę Ci zawracać głowy głupimi skryptami. Przejdźmy więc do funkcji. Nie są one trudne do zrozumienia, a za to, wierz mi, znacznie bardziej użyteczne! Funkcje najlepiej jest deklarować w ramach znacznika <head> dokumentu HTML. Są one wtedy ładowane zanim jeszcze czytelnik strony będzie mógł wykonać coś, co jest związane z funkcją. Skrypty powinny być umieszczone w ramach komentarzy, aby sama definicja skryptu nie była wyświetlana w przeglądarkach, które nie interpretują JavaScript.
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Hello!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Naciśnij mnie" onclick="pushbutton()">
</form>
</body>
</html>
Jeśli chcesz wypróbować działanie skryptu i dysponujesz przeglądarką interpretującą JavaScript, kliknij na poniższym przycisku.
Skrypt pozwala utworzyć przycisk, którego naciśnięcie powoduje wyświetlenie okienka informacyjnego z napisem "Hello!". Czyż to nie wspaniałe? A zatem, jak to działa?
Najpierw do pamięci jest ładowana sama funkcja. Potem, za pomocą zwykłego znacznika <form> jest tworzony przycisk. Coś nowego pojawia się przy znaczniku <input>. Możesz tam zobaczyć 'onclick', który mówi przeglądarce, jaką funkcję należy wywołać po kliknięciu na przycisku (jeśli, rzecz jasna, przeglądarka potrafi interpretować JavaScript). Funkcja 'pushbutton' jest zadeklarowana w nagłówku. Gdy naciśniemy przycisk zostanie uruchomiona ta właśnie funkcja. Jeszcze inna nowość w skrypcie to metoda 'alert'. Metoda jest wbudowana w JavaScript, a więc wystarczy ją jedynie przywołać. Jest wiele różnych metod, które możemy przywoływać. Niektóre z nich zostaną pokazane w naszym przewodniku. Pełny ich opis znajdziesz na serwerze Netscape. Sądzę,że ich lista w niedługim czasie znacznie się wydłuży. Ale już w tym momencie możesz zrobić z nimi sporo ciekawych rzeczy.
(Nie sądzę, aby metoda 'alert' miała być używana w taki właśnie sposób - ale w końcu dopiero się uczymy, a taki sposób jest dość łatwy do zrozumienia. Mam nadzieję, że mi darujecie...)
Jak dotąd zaszliśmy już całkiem daleko. W rzeczywistości zyskujemy mnóstwo możliwości, dodając po prostu kolejne funkcje do naszych skryptów. Teraz pokażę Ci, jak możesz odczytać coś, co czytelnik strony wprowadził do formularza.
<html>
<head>
<script language="JavaScript">
<!-- hide script from old browsers
function getname(str) {
alert("Hi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Wpisz swoje imię:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
A teraz przetestuj ponownie działanie skryptu:
Wpisz swoje imię:
W skrypcie ponownie znalazło się kilka nowych elementów. Po pierwsze, zapewne zauważyłeś obecność w skrypcie komentarza. W taki właśnie sposób możesz ukryć treść skryptu przed przeglądarkami, które nie potrafią interpretować JavaScript. Powinieneś się trzymać pokazanej tu kolejności! Początek komentarza powinien się znajdować zaraz za pierwszym znacznikiem <script>. Komentarz kończy się tuż przed znacznikiem </script>. W bieżącym dokumencie HTML znalazł się formularz, w którym czytelnik może wpisać swoje imię. 'onBlur' w znaczniku <input> mówi przeglądarce, jaką funkcję należy wywołać, gdy wprowadzimy jakąś treść do formularza. Funkcja 'getname(str)' zostanie uruchomiona wtedy, gdy usuniesz kursor z formularza lub naciśniesz klawisz Enter. Funkcja przyjmie ciąg znaków, wpisany w polu formularza, za pomocą polecenia 'getname(this.value)'. 'this.value' oznacza wartość, którą wpisałeś w tym elemencie formularza.
Myślę,że następna rzecz jest także całkiem przyjemna. W naszym skrypcie zaimplementujemy funkcję daty. Gdy tworzysz dokument HTML, możesz spowodować, aby przeglądarka czytelnika wyświetliła datę ostatniej aktualizacji dokumentu. Nie musisz wpisywać daty w dokumencie ręcznie. Wpisz po prostu mały skrypt, a gdy wprowadzisz jakieś zmiany na swojej stronie, data zmieni się automatycznie.
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
W pierwszej wersji Wprowadzenia użyłem lastmodified. Taki styl wymuszał Netscape 2.0 beta 2. Obecnie otrzymałem wersję beta 4, w której zmieniło się to na lastModified. Zauważ więc, że język JavaScript jest wrażliwy na wielkość liter. lastmodified i lastModified to dwie różne rzeczy. To był powód, dla którego pierwsze wydanie nie miało daty na końcu, gdy było oglądane za pomocą pewnych wersji Navigatora.
W tym momencie ta własność wydaje się funkcjonować nie na każdej maszynie. Niektóre serwery pokazują jedynie datę 1/1/1970. Z funkcją wiążą się pewne problemy. Musimy zaczekać na następną aktualizację i mam nadzieję, że język będzie działać na każdej maszynie. Ale Ty musisz sam wypróbować swoją maszynę - na niektórych działa to bardzo dobrze.
Jak już powiedziałem, sprawy toczą się bardzo szybko. Niech więc Was nie zdziwi, gdy w następnym tygodniu pojawi się w JavaScript jakaś poważniejsza zmiana. Musisz więc pilnie śledzić przyszłe zmiany w języku, który jest przecież jeszcze bardzo młody. Miej na uwadze, że niektóre szczegóły, o których tutaj mówimy, także mogły ulec modyfikacji. Ale sądzę, że zasady pozostaną niezmienne.
Indeks -
Część 2 -
Część 3 -
Część 4 -
Część 5 -
Część 6 -
Część 7
aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch
Wyszukiwarka
Podobne podstrony:
javascript 4 (2)XHTML CSS i JavaScript Pierwsza pomoc twowppjavascript katPo prostu JavaScript Wydanie VIII ppjsc8JavaScript cwiczenia praktyczne Wydanie II cwjas2javascript 4JavaScript cwiczenia praktyczne Wydanie IIIwięcej podobnych podstron