Podstawy JavaScript

14 July 2008 Comments

JavaScript to prosty język skryptowy wykonywalny po stronie klienta (czyli nie może zmieniać niczego na serwerze). By użyć go na stronie HTML można kod JS umieścić w pliku *.js i dołączyć go do strony (co jest zalecane) lub umieścić go bezpośrednio na stronie między tagami SCRIPT:

<script language="javascript" type="text/javascript">
alert('witaj świecie');
</script>

Powyższy kod wygeneruje okienko komunikatu z podanym tekstem (wielkość liter ma znaczenie). By wstawić plik *.js wystarczy skorzystać z taga:

<script language="javascript" type="text/javascript" src="nazwa_pliku.js">

FUNKCJE

alert to przykład prostej funkcji JS. Funkcja to pewien kod wykonujący określone działanie. JS posiada zbiór własnych funkcji lecz można też tworzyć i własne funkcje. Inna funkcja to prompt przyjmująca dwa argumenty - tekst okna oraz domyślny tekst:

<script language="javascript" type="text/javascript">
prompt('Podaj swoje imię', 'Tutaj wpisz imię');
</script>

TYPY DANYCH

Do dyspozycji mamy liczby - podajemy liczby bez cudzysłowów, łańcuchy - tekst, liczby umieszczony w cudzysłowach oraz wartości logiczne - true i false. Łańcuchy mogą dodatkowo zawierać sekwencje specjalne:
- znak backspace
- nowy wiersz
- powrót kursora
- tabulacja
' - apostrof
" - cudzysłów
\ - ukośnik

STAŁE I ZMIENNE

Stałe to identyfikatory przechowujące określone dane, których nie można zmieniać. By zadeklarować stałą wystarczy napisać:

const x = 12;
const bla = "tekst";
alert(bla);

W przykładzie mamy dwie stałe, a drugą dodatkowo wyświetlamy za pomocą funkcji alert. Zmienne natomiast deklarujemy tak:

var x = 12;

I do danej zmiennej można przypisywać nowe wartości. Oto trochę inny przykład:

<script language="javascript" type="text/javascript">
const intro = "Podaj imię";
// definiujemy zmienną
var wynik;
// wynik funkcji przypisujemy do zmiennej
wynik = prompt(intro);
alert(wynik);
</script>

Funkcja prompt zwraca łańcuch - wpisany tekst, tak więc można przypisać wynik jej działania do zmiennej a następnie np. wyświetlić dane ze zmiennej.

KONWERSJA TYPÓW ZMIENNYCH

isFinite(zmienna) - zwraca true jeżeli zmienna ma wartośc nieskończoność
isNaN(zmienna) - zwraca true jeżeli zmienna nie jest liczbą ("Not a Number")
Number(zmienna) - sprawdza czy zmienna jest typu liczbowego (zwraca NaN jeżeli nie, zwraca wartość jeżeli tak)
parseFloat(zmienna) - konwersja zmiennej do typu float
parseInt(zmienna) - konwersja zmiennej do typu int (liczbowego)
toString(zmienna) - konwersja zmiennej do typu łańcuchowego

OPERATORY ARYTMETYCZNE

+ - dodawanie
- - odejmowanie
/ - dzielenie
* - mnożenie
% - dzielenie module (reszta z dzielenia)
++ - inkrementacja
-- - dekrementacja

<script language="javascript" type="text/javascript">
var x =2;
var y = 3;
var wynik;
wynik = x+y;
alert('2+3 to: ' + wynik);
wynik = x/y;
alert('2/3 to: ' + wynik);
wynik = x%y;
alert('2%3 to: ' + wynik);
x++;
alert(x);
</script>

2/3 - da wynik 0.66... jeżeli zmienna byłaby typu int (liczba całkowita) to otrzymalibyśmy 0. Dzielenie modulo 2%3 zwraca 2 gdyż 3*0+2 = 2 (3 - dzielnik, 0 - wynik dzielenia 2/3 jako int, 2 - reszta dzielenia, = 2 - dzielna, liczba, która jest dzielona).

OPERATORY LOGICZNE

== - równe
=== - identyczne (do typu zmiennej)
!= - różne
< <= - mniejsz, mniejsze bądź równe
> >= - większe, większe bądź równe
! - negacja wartości logicznej
&& - koniunkcja wartości logicznych (coś "i" coś)
|| - alternatywa wartości logicznych (coś "lub" coś)

OPERATOR WARUNKOWY

Operator warunkowy pozwala na określenie wartości jaka ma być zwrócona w zależności od wyrażenia warunkowego. Składnia:

warunek ? wartość : wartość

<script language="javascript" type="text/javascript">
var a = 4;
var b = 3;
wynik = (a == b) ? 'Zmienna są równe' : 'Zmienne mają różne wartości';
alert(wynik);
</script>

Warunek musi zwracać wartość True lub False.

OPERATORY PRZYPISANIA

= - przypisanie wartości
+= - powiększenie wartości zmiennej
-= - pomniejszenie wartości zmiennej
*= - pomnożenie wartości zmiennej
/= %= - podzielenie, podzielenie modulo zmiennej

INSTRUKCJA IF

Składnia:

if (warunek) instrukcja;

<script language="javascript" type="text/javascript">
var a = 4;
var b = 4;
if (a == b) alert('Wartości są te same');

if (a == b && a > 2 && b > 1)
{
alert('złożony warunek');
}
else
{
alert('nie spełniony złożony warunek');
}
</script>

INSTRUKCJA SWITCH

switch (wyrażenie)
{
case wartość1: instrukcja1;
case wartość2: instrukcja2;
default: instrukcja;
}

Wyrażenie ze switch zwraca jakąś wartość. Jeżeli wartość ta będzie taka sama jak w jednej z podanych wartości case to wykonane zostaną jej instrukcje. Jeżeli nie zostanie znaleziona pasująca wartość w case to zostanie wykonana instrukcja z default (jeżeli podana).

<script language="javascript" type="text/javascript">
var a = 4;
var b = 4;
switch (a+b)
{
case 5: alert('mamy 5');
case 8: alert('mamy 8');
default: alert('odpowiedź domyślna');
}
</script>

INSTRUKCJA FOR

Pętla For ma składnie taką jak w wielu innych językach: for(zmienna=wart_początkowa; warunek końca; zmiana wartości)

<script language="javascript" type="text/javascript">
for (i = 1; i <= 5; i++)
{
alert(i);
}
</script>

INSTRUKCJA WHILE i DO WHILE

<script language="javascript" type="text/javascript">
var i = 0;
while (i < 4)
{
i++;
alert(i);
}

var j = 0;
do
{
alert(j);
j++;
}
while (j < 2);
</script>

FUNKCJE

Oto prosty szablon funkcji:

function nazwa_funkcji (ARGUMENTY)
{
kod funkcji
return wartość;
}

Argumenty są opcjonalne, tak samo return - komenda, która zwróci na zewnątrz określoną wartość. Zmiennej poza funkcją nie są dostępne wewnątrz funkcji i na odwrót, tak więc najczęściej by przekazać jakieś wartości ze zmiennych do funkcji to stosuje się parametry (lub ew. zmienne globalne). Przykład funkcji:

<script language="javascript" type="text/javascript">
function moja_funk(a, b, c)
	{
	z = a+b;
	z = z/c;
	return z;
	}
alert(moja_funk(2, 4, 7));
</script>

ZDARZENIA

JavaScript obsługuje zdarzenia. Zdarzeniem może być np. kliknięcie na element, najechanie na niego kursorem itd. Oto lista zdarzeń niektórych JS: onabort - występuje w przypadku przerwania ładowania strony/rysunku
onblur - występuje, gdy dany element przestaje być aktywny
onchange - występuje w przypadku zmiany zawartości elementu
onclick - występuje w momencie kliknięcia na dany element
ondbclick - występuje w momencie podwójnego kliknięcia na elemencie
onerror - występuje w przypadku wystąpienia błędu na stronie
onfocus - występuje, gdy dany element staje się aktywny
onload - występuje w czasie ładowania strony
onmousemove - występuje, kiedy przesuniemy kursor myszy nad elementem
onmouseout - występuje, kiedy przesuniemy kursor myszy poza element
onmouseover - występuje, kiedy przesuniemy kursor myszy na element
onsubmit - występuje przy wciśnięciu pola typu submit formularzy

<img src="foto.jpg" onclick="alert('aaaaaaaaa');">

OBIEKT DOCUMENT

JavaScript to język obiektowy i zawiera sporą grupę własnych obiektów z których można korzystać. Jednym z nich jest obiekt document.
Właściwości:

title - tytuł dokumentu (z tagów title /title)
URL - adres URL dokumentu

Metody:

getElementById() - uzyskuje dostęp do elementu w dokumencie, któremu określono podany atrybut Id
getElementByName() - to samo dla podanego atrybutu name
getElementByTagName() - uzyskuje dostęp do elementów w dokumencie, których znaczniki są podanej treści
write() - wyświetla tekst
open() - otwiera strumień danych w oknie przeglądarki
close() - zamyka strumień danych

<img src="foto.jpg" onclick="alert('aaaaaaaaa');" name="nazwa" pierdoly="jakiś tekst">
<script language="javascript" type="text/javascript">
document.write(document.URL);
document.write(document.nazwa.pierdoly);
</script>

Opis wszystkich metoda i obiektów JS znajdziecie w sieci :) Wystarczy google

RkBlog

PHP w Akcji, 14 July 2008