JavaScript to nazwa języka programowania opracowanego przez frimy Sun Microsystems i Netscape. Umożliwia on umieszczanie na stronach WWW aktywnych elementów, takich jak przyciski zmieniające wygląd, gdy przesunie się nad nimi myszką, tekst przesuwający się w pasku statusu przeglądarki czy odsyłacze otwierające nowe okna. To są najbardziej popularne zastosowania, ale można też tworzyć bardziej skomplikowane i pożyteczniejsze skrypty.
JS, jak sama nazwa wskazuje, jest skryptowym językiem programowania. Oznacza to w sporym uproszczeniu, że w przeciwieństwie do tradycyjnych programów, te tworzone w JS nie są kompilowane przez autora. Kod (skrypt) umieszcza się bezpośrednio w dokumenicie HTML (choc są wyjątki) i jest on kompilowany (albo raczej interpretowany) dopiero przez przeglądarkę użytkownika. Dzięki temu JS, podobnie jak Java, jest uniwersalny i może być wykorzystywany we wszystkich systemach operacyjnych, jeśli tylko przeglądarka WWW na to pozwala. Oprócz tego JS posiada mniejsze możliwości niż często mylona z nim Java (czyli pełnowartościowy, wieloplatformowy język programowania).
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ć.
Kod JavaScript musi być umieszczony pomiędzy znacznikami HTML <SCRIPT>
i </SCRIPT>. Znaczniki te można umieszczać w dowolnym miejscu dokumentu, jednak przyjmuje się, że jeżeli jest to tylko możliwe, należy umieścić je na początku pliku HTML przed znacznikiem <BODY>.
Znacznik ten powinien zawierać parametr LANGUAGE, który może przyjmować dwie wartości: LiveScript lub JavaScript. Wartość LiveScript jest pozostałością po wczesnych wersjach języka i służy zachowaniu kompatybilności. Powinniśmy użyć wartości JavaScript.
Umieść w standardowym kodzie HTML znacznik <SCRIPT>.
<HTML>
<HEAD>
</HEAD>
<SCRIPT language = "JavaScript">
</SCRIPT>
<BODY>
</BODY>
</HTML>
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>
Instrukcja document.write() pozwala na wyprowadzenie tekstu na ekran przeglądarki. Tekst, który chcemy wyświetlić, należy ująć w nawiasy i cudzysłowy i podać zaraz za document.write() np.
document.write ("Jaki miły mamy dzień!")
skrypt wyświetlający tekst „Jaki miły mamy dzień!” na ekranie przeglądarki.
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<SCRIPT language = "JavaScript">
document.write ("Jaki miły mamy dzień!")
</SCRIPT>
<BODY>
</BODY>
</HTML>
document.write ("Jaki miły mamy dzień")
document to obiekt, który reprezentuje aktualną stronę. write to tzw. metoda, czyli pewna funkcja działająca na obiekcie document i, w tym przypadku, wyświetlająca na ekranie tekst. Tekst ten podajemy jako argument w nawiasach. Ogólnie można zapisać:
obiekt.metoda (argumenty metody)
Taki ciąg jest instrukcją i powinien zostać zakończony średnikiem. W JavaScript nie jest to jednak obligatoryjne, chyba że chcemy zapisać kilka instrukcji w jednej linii np.:
document.writeln (”Witamy”);document.write (”na naszej stronie”);
Wymieniona tutaj, nowa funkcja writeln() działa tak samo jak write(), z tym że na końcu wyświetlanego ciągu znaków dodaje znak przejścia do nowego wiersza. Niestety, nie zobaczymy tego efektu, jeżeli całość nie znajdzie się w bloku tekstu preformatowanego, tzn. pomiędzy znacznikami <PRE> i </PRE>.
Komentarz może się również zaczynać od sekwencji /* i kończyć */. W takim przypadku wszystko, co znajduje się pomiędzy tymi znakami, uznane zostanie za komentarz.
<HTML>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!-- Ukrycie przed przeglądarkami nie osbługującymi JavaScript
/*
Komentarz blokowy
Wyświetlenie napisu w oknie przeglądarki
*/
document.write ("Hello, Jaki miły mamy dzień!")
// Koniec kodu JavaScript -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
W tym przypadku tekst, który ma być wyświetlony, gdy przegladarka nie obsluguje, umieszczamy pomiędzy znacznikami <NOSCRIPT> i </NOSCRIPT>.
<HTML>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript
document.write ("Jaki miły mamy dzień!")
// Koniec kodu JavaScript -->
</SCRIPT>
<NOSCRIPT>
Twoja przeglądarka niestety nie obsługuje JavaScriptów.<BR>
Sugerujemy użycie przeglądarki Netscape Navigator lub Microsoft Internet Explorer!
</NOSCRIPT>
<BODY>
</BODY>
</HTML>
Formatowanie tekstu:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScriptów
document.write ("<FONT SIZE=+2>Witamy ");
document.write ("na naszej stronie");
document.writeln ("<PRE>Witamy");
document.write ("na naszej stronie</PRE></FONT>");
// Koniec kodu JavaScript -->
</SCRIPT>
<BODY>
</BODY>
</HTML>
Oprócz znaczników HTML w wyświetlanych łańcuchach znakowych mogą też pojawić się znaki specjalne, takie jak np. rozpoczęcie nowego wiersza. Jeśli chcemy wyświetlić znak specjalny, musimy zastosować sekwencję — ukośnik (backslash) plus litera symbolizująca dany znak. Sekwencje te przedstawione są w tabeli
Sekwencja znaków specjalnych |
Znaczenie |
\b |
Backspace |
\f |
wysunięcie kartki (ang. form feed) |
\n |
nowy wiersz (ang. new line character) |
\r |
enter (ang. carriage return) |
\t |
tabulator (ang. tab character) |
parseFloat(zmienna) - konwersja zmiennej do typu float
parseInt(zmienna) - konwersja zmiennej do typu int (liczbowego)
toString(zmienna) - konwersja zmiennej do typu łańcuchowego
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
</HEAD>
<SCRIPT LANGUAGE = "JavaScript">
<!-- Ukrycie przed przeglądarkami nieobsługującymi JavaScript
var zmienna1 = prompt ("Podaj swoje imię:", "");
zmienna1 = parseInt(zmienna1);
var zmienna2 = 5;
var zmienna3 = zmienna1 + zmienna2
document.write (zmienna3 + " " + (zmienna1 + 4) + " " );
zmienna3 = zmienna1 / 3;
document.write (zmienna3 + " " + zmienna1 * zmienna2);
// Koniec kodu JavaScript -->
</SCRIPT>
<BODY>
</BODY>
</HTML>