Kurs JavaScript (1)

Kurs przedstawia podstawowe zasady posługiwania się językiem JavaScript i jest przeznaczony dla osób początkujących.
Aby przystąpić do kursu, należy znać język HTML, przynajmniej w stopniu podstawowym.

Kurs JavaScript (1)

spis treści:

JavaScript jest językiem skryptowym przeznaczonym dla dokumentów HTML. Język ten pozwala nadać stronom pewne dynamiczne elementy, przy czym dynamika ta jest realizowana po stronie klienta. To znaczy, że po ściągnięciu skryptu z serwera, jest on interpretowany przez przeglądarkę.

Skrypt umieszczamy bezpośrednio w dokumencie obejmując go znacznikiem <script> np.

 <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 
 <!-- 
 document.write("<B>To jest tekst napisany za pomocą skryptu</B>"); 
 //--> 
 </SCRIPT>

Skrypt objęty jest również znacznikiem komentarza, tak aby starsze przeglądarki nie wyświetlały samego kodu.
Powyższy skrypt zawiera tylko jedną instrukcję, która powoduje wpisanie określonego kodu HTML w dokumencie. Jeżeli w skrypcie występuje więcej niż jedna instrukcja, powinny być one rozdzielone znakiem średnika. Średnik nie jest konieczny, gdy każda z instrukcji występuje w osobnej lini lub w przypadku, gdy jest tylko jedna instrukcja.

Skrypt można również umieścić w zewnętrznym pliku, a w miejscu w którym ma być wywołany należy umieścić:

 <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="plik_zewnetrzny.js"></SCRIPT>

Skrypty można umieszczać w dowolnym miejscu dokumentu HTML, lecz jeśli chodzi o definicje funkcji, to najlepiej jest umieszczać je w sekcji <HEAD>, ponieważ będą one załadowane przed główną częścią dokumentu. Tak więc klasyczna struktura dokumentu HTML wykorzystującego JavaScript powinna wyglądać następująco:

 <HTML> 
 <HEAD> 
 <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 
 <!-- 
 /* Definicje funkcji oraz instrukcje, które mają 
 być wykonane przed rozpoczęciem ładowania głównej 
 części dokumentu */ 
 //--> 
 </SCRIPT> 
 </HEAD> 
 
 <BODY> 
 <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 
 <!-- 
 /* Wywołania funkcji oraz instrukcje JavaScript, 
 które mają być wykonane podczas ładowania się 
 głównej części dokumentu */ 
 //--> 
 </SCRIPT> 
 </BODY> 
 </HTML>

Pierwszym poleceniem JavaScript, jakie poznaliśmy była metoda obiektu document:

 document.write("kod html");

Ktoś mógłby zadać pytanie: Po co komplikować sobie życie pisząc kod HTML za pomocą JavaScript, skoro można to zrobić normalnie, bez użycia skryptu?
Tak, to prawda, ale tylko wtedy gdy wiemy z góry jak ten kod ma wyglądać.
Zanim użyjemy metody document.write(), możemy sprawdzić na przykład jakiej przeglądarki używa osoba, która ogląda naszą stronę lub też w jakiej rozdzielczości pracuje jej monitor i w zależności od tych czynników możemy odpowiednio dostosować kod HTML (lub fragmenty tego kodu).

Przykład:

 <HTML> 
 <HEAD> 
 </HEAD> 
 
 <BODY> 
 <H2>Przegladarka, której używasz to</H2> 
 
 <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 
 <!-- 
 var nazwa=navigator.appName; 
 var wersja=navigator.appVersion; 
 
 document.write("<B>"+ nazwa +" w wersji "+ 
 wersja +"</B>"); 
 //--> 
 </SCRIPT> 
 </BODY> 
 </HTML>

W powyższym przykładzie, zanim skrypt wypisał fragment kodu HTML, przekazaliśmy do zmiennych nazwa i wersja nazwę i wersję przeglądarki jakiej używa osoba oglądająca stronę. Informacje te uzyskaliśmy za pomocą właściwości appName i appVersion (które poznamy dokładniej w dalszej części kursu).
Definiując metodę document.write(), połączyliśmy łańcuchy znakowe (czyli tekst zamknięty w cudzysłowiach) ze zmiennymi nazwa i wersja. W wyniku działania tego kodu, na ekranie użytkownika pojawi się tekst, którego treść będzie uzależniona od rodzaju przeglądarki jakiej używa. Takiego efektu, nigdy nie uzyskalibyśmy w "czystym" HTML-u, bez użycia skryptu.

Skoro w poprzednim przykładzie użyliśmy zmiennych, to powiedzmy sobie również kilka słów na ten temat.
Zmienna to dowolna nazwa (lecz bez spacji i polskich znaków), której możemy nadać dowolną wartość i wykorzystać ją w dalszej części skryptu. Zmienne deklarujemy przy użyciu słowa kluczowego var.
Na przykład:

 var Moja_zmienna;

Jeżeli, deklarując zmienną, nie nadamy jej żadnej wartości (tak jak powyżej), to wartością tej zmiennej jest undefined.

Podczas deklaracji zmiennej, możemy jej nadać określoną wartość, używając operatora przypisania =.
Na przykład:

 var Moja_zmienna = 2; 
 var druga_zmienna = 3.5 + Moja_zmienna; 
 /* druga_zmienna będzie miała wartość 5,5. 
 Pamiętajmy, że w liczbach używamy kropki a nie przecinka */

Użycie słowa kluczowego var w tym przypadku nie jest konieczne, lecz taki sposób deklaracji (bez var) powoduje, że zmienna staje się zmienną globalną nawet wtedy, gdy zostanie zadeklarowana wewnątrz funkcji (więcej szczegółów na temat zmiennych lokalnych i globalnych w dalszej części kursu).

Oprócz wartości liczbowych, zmienna może też przybrać wartość, którą jest łańcuch znakowy (czyli tekst)
Na przykład:

 var Moja_zmienna = "jakiś tekst";

lub

 var Moja_zmienna = 'jakiś tekst';

Innym typem wartości jest wartość logiczna, która może mieć tylko dwie wartości: true (prawda) lub false (fałsz).
Na przykład:

 var Moja_zmienna = true;

Należy pamiętać, że wielkość liter w nazwie zmiennej ma znaczenie. Moja_zmienna i moja_Zmienna to dwie różne zmienne.

Okna dialogowe

Przy pomocy JavaScript możemy w przeglądarce wyświetlić trzy rodzaje okienek dialogowych:

Ostrzeżenie - okno wyświetlające dowolny tekst z jednym klawiszem OK zamykającym to okno.

 alert("tekst wyświetlany"); 
 
 
 -------------------------------------------------------------------------------- 
 Potwierdzenie - okno wyświetlające dowolny tekst z dwoma klawiszami OK i ANULUJ. 
 confirm("tekst wyświetlany");

Metoda ta zwraca wartość true, jeżeli użytkownik naciśnie klawisz OK lub false w przypadku klawisza ANULUJ. Tak więc możemy podjąć różne działania, w zależności od tego jaki klawisz został naciśnięty.
Zanim przejdziemy do analizowania następnego przykładu, chciałbym żebyśmy się zapoznali z krótkim tekstem na temat instrukcji warunkowej if...else.

Przykład:

 if(confirm("tekst")) 
 { 
 ... 
 /* ciąg instrukcji wykonywanych w przypadku naciśnięcia klawisza OK */ 
 ... 
 } 
 else 
 { 
 /* ciąg instrukcji wykonywanych w przypadku naciśnięcia klawisza ANULUJ */ 
 } 
 
 
 -------------------------------------------------------------------------------- 
 Zapytanie - okno, które wyświetla tekst zapytania, dwa klawisze OK i ANULUJ, 
ponadto daje użytkownikowi możliwość wpisania odpowiedzi. 
 prompt("tekst zapytania","tekst domyślny");

Jeżeli użytkownik naciśnie klawisz OK, to metoda ta zwraca wartość, którą jest wpisany tekst.
Jeżeli użytkownik naciśnie klawisz ANULUJ, to wartością zwrotną jest null.
Tekst wpisany przez użytkownika możemy przypisać jakiejś zmiennej i wykorzystać to w dalszej części dokumentu np.:
var zmienna=prompt("Jak masz na imię?","");

if(zmienna!=null)
/* Jeżeli użytkownik nie nacisnął klawisza ANULUJ to */

if(confirm("Czy chcesz zobaczyć jeszcze jedno okienko?"))
/* Jeżeli użytkownik nacisnął klawisz OK to */
alert("Cześć "+ zmienna);

Powyższy kod powoduje wyświetlenie wszystkich trzech rodzajów okienek. Jeśli chcesz zobaczyć efekt jego działania to kliknij tutaj.

strona 1 Autor: Bogdan Błaszczak

Kurs JavaScript (1)

Kurs przedstawia podstawowe zasady posługiwania się językiem JavaScript i jest przeznaczony dla osób początkujących. Aby przystąpić do kursu, należy znać język HTML, przynajmniej w stopniu podstawowym.

Kurs JavaScript (1)

Kurs przedstawia podstawowe zasady posługiwania się językiem JavaScript i jest przeznaczony dla osób początkujących.
Aby przystąpić do kursu, należy znać język HTML, przynajmniej w stopniu podstawowym.