RkBlog

Hardware, programming and astronomy tutorials and reviews.

Podstawy JavaScript

Kurs podstaw języka JavaScript opisujący składnię języka, formy jego wykorzystania na stronach internetowych oraz podstawowych zbiór funkcji i obiektów JS.

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

14 July 2008;

Comment article