JavaScript

JavaScript jest językiem skryptowym interpretowanym przez przeglądarki WWW.
Istnieją różne sposoby umieszczania kodu JavaScript w kodzie HTML
1. <script language="JavaScript" type="text/javascript">
<!-Treść skryptu
// -->
</script>
Treść skryptu najlepiej jest ująć w znakach komentarza (<!-- i // -->), aby przeglądarki nieinterpretujące JavaScript go
zignorowały.
Np.
<SCRIPT>
<!-document.write("Dzień dobry");
//-->
</SCRIPT>
2.
Skrypty mogą być umieszczone w osobnych plikach o rozszerzeniu js.
W znaczniku <SCRIPT> dodajemy atrybut SRC="url", gdzie url to adres pliku z kodem JS.
Np.
<script language="javascript" type="text/javascript" src="skrypty.js"></script>
W JavaScript mamy możliwość komentowania tekstu na dwa sposoby:
- ujęcie dowolnego fragmentu tekstu w znaczniki /* i */
- znacznik // powodujący potraktowanie jako komentarz tekstu stojącego za znacznikiem do końca linii
Język składa się z instrukcji które mówią co ma wykonać komputer .
Instrukcje operują na zmiennych - miejscach w których mogą być
przechowywane wartości - identyfikowanych przez nazwę.
Nazwa zmiennej musi być pojedynczym słowem rozpoczynającym się
literą.
Zmienne mogą zawierać wartości różnych typów:
-Wartości proste - napisy, liczby całkowite lub zmiennopozycyjne,
wartości logiczne
-Wartości złożone - tablice lub obiekty - zawierające "podzmienne" do
których możemy się dostać używając odpowiednich konstrukcji
języka
Zmienne
Zmienne w programie zaczynają się od litery.
Jeśli chcemy zapisać do zmiennej wartość - używamy konstrukcji:
zmienna = wartość
Zmienną możemy traktować jak szufladkę do której można schować różne przedmioty. Ta sama
zmienne (o tej samej nazwie), może mieć różną wartość w zależności od tego w którym
momencie będziemy pobierać jej wartość.
Wprowadzenie do kodu zmiennej nie wymaga jej wcześniejszego deklarowania (nie podajemy
jej typu). Wystarczy użyc np. liczba = 12.
Podanie przed nazwą zmiennej słowa VAR oznacza jej lokalną deklarację. Bez tego słowa
zmienna traktowana jest globalna.
Zmienne mogą mieć następujące wartości:
liczbowa:
np.: x = 10 x = 3.14 x = -7.45 + 12
ciąg znaków
np.: s = "Witaj!"
tekst = "To jest początek tekstu. "
Uwaga: wartością "rok" + 2001 jest ciąg znaków "rok 2001"
Znaki specjalne:
\n - koniec linii
\" - cudzysłów
logiczna:
true lub false (bez cudzysłowia)
null - wartość pusta.
Użycie:
VAR zmienna jest równoważne:
VAR zmienna = null
Wartością zmiennej niezadeklarowanej jest undefined
Operatory
binarne: +, -, *, /, % (dzielenie modulo)
unarne: negacja (-) oraz inkrementacja i dekremetacja (zmienna++ , zmienna += 1)
przypisania: a += b (to samo co: a = a + b), a -= b, a *= b, a /= b, a %= b
logiczne: && (konkatenacja), || (alternatywa), ! (negacja)
porównania: == (równe), != (nie równe), <=, >=, <, >.
Możemy porównywać ciągi znaków np. "ala" < "alb"
wyrażenia warunkowe: zmienna = (warunek) ? wartość_prawda : wartość_fałsz
% - dzielenie modulo dzizła jak reszta z dzielenia
| - suma logiczna bitów - 1|1=1; 1|0=1; 0|1=1; 0|0=0;
& - iloczyn logiczny bitów - 1&1=1; 1&0=0; 0&1=0; 0&0=0;
^ - suma modulo 2 - 1^1=0; 1^0=1; 0^1=1; 0^0=0;
|| - suma logiczna - dla wartości logicznych - true gdy co najmniej jedna wartośc
jest true
&& - iloczyn logiczny - dla wartości logicznych - true gdy obie jedna wartości są
true
++ - zwiększenie wartości o 1
-- - zmniejszenie wartości o 1
~ - negacja logiczna bitów
! - negacja logiczna wartości logicznej
== równa się
!= różne od
> większe od
< mniejsze od
>= niemniejsze od
<= niewiększe od
Funkcje
Ciągi instrukcji które powtarzają się w programie możemy połączyć w funkcję - i używać jej jak
pojedynczego polecenia.
Funkcję deklarujemy słowem function po którym powinna wystąpić nazwa funkcji, oraz para
nawiasów. Następnie w nawiasach klamrowych umieszczamy wszystkie te instrukcje z których
składa się funkcja.
function Nazwa_Funkcji(argument1, argument2, ... , argumentn) {
// treść
}
Wywołanie funkcji:
Funkcja1(argument1, argument2);
Funkcja2();
Zmienna = Funkcja3(argument);
Np.
function NapiszTekst()
{
document.write("To jest tekst pisany " +
"przez funkcję o nazwie NapiszTekst");
}
Instrukcje umieszczone wewnątrz funkcji nie są wykonywane dopóki funkcja nie jest wywołana.
Funkcję wywołujemy pisząc jej nazwę oraz parę nawiasów.
Funkcję możem,y wywoływać wielokrotnie, bez konieczności jej ponownego definiowania..
NapiszTekst();
Zadanie 1 - napisać funkcję wypisującą 100 razy tekst "Nie będę rozmawiać na lekcji."
Krok pierwszy:
function NTxt()
{
document.write("Nie będę rozmawiać na lekcji. ");
}
Krok drugi: funkcje mogą zawierać inne funkcje...
function NTx10()
{
NTxt(); NTxt(); NTxt(); NTxt(); NTxt();
NTxt(); NTxt(); NTxt(); NTxt(); NTxt();
}
Krok trzeci:
zbudować funkcję NTxt100 - i ją wywołać.
function NTxt100()
{
NTxt10(); NTxt10(); NTxt10(); NTxt10(); NTxt10(); NTxt10();NTxt10(); NTxt10(); NTxt10();
NTxt10();
}
Ntxt100();
Folder Napisz tekst
Instrukcja pętli
W języku JavaScript jest specjalna instrukcja która pozwala na powtórzenie następującej po niej
instrukcji określoną liczbę razy.
Podstawową instrukcją pętli jest instrukcja for
for(przed; warunek; po)
instrukcja;
W nawiasach umieszczamy dwie instrukcje oraz wyrażenie które jest sprawdzane sprawdzane
przed każdym wykonaniem instrukcji która znajduje się w pętli.
Pierwsza z instrukcji wykonywana jest przed rozpoczęciem wykonywania pętli - i tylko raz.
Druga - po każdym wykonaniu instrukcji pętli
Zadanie 1 z wykorzystaniem pętli for:
Aby zliczyć ilość wykonań pętli - potrzebujemy licznika - zmiennej w której będziemy pamiętać
który raz wypisujemy tekst.
Licznik na początku trzeba zainicjować. W każdym obiegu pętli zwiększać, i sprawdzać czy nie
osiągnęliśmy już wartości 100.
for(var licznik=0; licznik<100; ++licznik)
document.write("Nie będe rozmawiać na lekcji");
Plik petla
Zadania 2 wyświetlić każde zdanie w oddzielnej linii
Krok 1: numerujemy każde z powtórzeń tekstu
for (var licznik=0; licznik<100; ++licznik)
document.write(licznik);
document.write(". Nie będe rozmawiać na
lekcji<br>");
Brak rezultatów
Krok 2: Użycie dwu pętli
for (var licznik=0; licznik<100; ++licznik)
document.write(licznik);
for (var licznik=0; licznik<100; ++licznik)
document.write(". Nie będe rozmawiać na
lekcji<br>");
Brak rezultatów
Krok 3:Wszędzie tam gdzie wymagana jest jedna instrukcja można użyć instrukcji złożonej - czyli ciągu
instrukcji zamkniętego w nawiasach klamrowych.
for (var licznik=0; licznik<100; ++licznik)
{
document.write(licznik);
document.write(". Nie będę rozmawiać na
lekcji<br>");
}
Pliki petla2 oraz petla3
Parametry funkcji
Działanie funkcji można uzależnić od parametrów. Pozwalają one na przekazanie wartości do
wnętrza funkcji.
Jeśli nie wiemy co ani ile razy mamy przepisać, ale wiemy, że zadanie polega na przepisywaniu
tego samego tekstu - możemy napisać funkcję:
function przepisuj(tekst, ilerazy)
{
for(var i=1; i<=ilerazy; ++i)
{
document.write(i);
document.write(". " + tekst);
document.write("<br>");
}
}
przepisuj("Codziennie będę odrabiać zadania domowe", 100);
Plik parametr
Jeśli chcemy wypisać znak cudzysłowu na stronie, lub użyć innego znaku specjalnego to
poprzedzamyje backslashem - i \
document.write("Na ekranie zobaczysz<br>C:\\>")
document.write("Polecam film \"Wladca Pierścieni\"")
document.write("<b><a href=\"spis.htm\">Spis treści</a></b>")
Wartości funkcji
Funkcje nie muszą niczego wyświetlać ani wypisywać na ekranie
Funkcje mogą także służyć do przygotowywania wartości lub wykonywania obliczeń.
Funkcje zwracają wartość instrukcją return Wykonanie tej instrukcji kończy wykonywanie
funkcji.
function dodaj(a, b)
{
var w = a + b;
return w;
}
var x = dodaj(10, 15);
x = dodaj(x, 15);
document.write( dodaj(x, 12) );
Instrukcja warunkowa
Często w programie trzeba podjąć decyzję - czy wykonać jakąś instrukcję czy też nie.
Instrukcja if, while, switch:
do
instrukcja;
while (warunek);
while (warunek)
instrukcja;
switch (wyrażenie )
{
case wartość1:
instrukcja1;
break;
case wartość2:
instrukcja2;
break;
default:
instrukcja0
break;
}
if (warunek)
instrukcja;
if (warunek)
instrukcja1;
else
instrukcja2
Przykład:
if ((dzień == "sobota") || (dzień == "niedziela"))
{ alert("Uwielbiam weekendy!");
confirm("Czy Ty też?");
} else
if (dzień == "poniedziałek")
alert("Nie cierpię poniedziałków");
Plik tabliczka
Zadanie 3 Wypisz silnie kolejnych liczb naturalnych od 1 do 4
Pętla while
var i = 1;
var x = 1;
while (i < 5)
{
x = x * i;
writeln(i + "! = " + x);
i++;
}
Pętla for
nie musimy ręcznie zwiększać stanu licznika (w naszym przykładzie było to i)
var x = 1;
for (var i = 1; i < 5; i++)
{
x = x * i;
writeln(i + "! = " + x);
}
i++;
Obiekty
Obiekty w JavaScript można tworzyć samemu lub korzystać z już gotowych.
Każdy obiekt może mieć pewne własności i metody. Własność obiektu zachowuje się jak
zmienna (albo kolejny obiekt), a metoda to nic innego jak funkcja odnosząca się do obiektu.
Własności i metody obiektów wywołuje się następująco:
obiekt.własność
obiekt.metoda()
Przy odwoływaniu się do metod lub własności obiektu można użyć instrukcji with, np.:
with (obiekt)
{
wlasnosc = 'aaa';
metoda(parametr);
}
Nowy obiekt tworzy się instrukcją new. Konstruktor obiektu jest funkcją, w której do
konstruowanego obiektu odwoływać się można poprzez słowo this:
function mojObiekt()
{
this.wlasnosc1 = null;
this.wlasnosc2 = null;
return this;
}
Użycie:
nowyObiekt = new mojObiekt();
Czyli:
Obiekty to nie tylko grupy danych - dla obiektu możemy zdefiniować także funkcje które na
danym obiekcie mogą być wykonywane.
Funkcje takie nazywane są metodami
Metody mogą być wywoływana tylko dla konkretnego obiektu. Wywołujemy je podobnie jak
zwykłe funkcje ale poprzedzamy je nazwąobiektu i kropką.
Większość elementów z jakimi mamy do czynienia w programamch - to obiekty.
Przykładem obiektu jest document w którym wywoływaliśmy metodę write aby dopisać
fragment dokumentu
Napisy
Za napisy w języku JavaScript odpowiada klasa String
Jeśli chcemy zamienić dowolną wartość na obiekt typu napis - wystarczy, że potraktujemy
String jak funkcję zwracającą obiekt
Napisy pozwalają na wykonanie wielu przydatnych operacji:
charAt - wskazany znak
charCodeAt - kod wskazanego znaku
concat - łączy napisy
indexOf - zwraca miejsce podnapisu
replace - zamienia fragment w napisie
split - rozdziela na tablice w miejscach określonych separatorami
substr - zwraca fragment napisu
substring - podobnie jak poprzednia
Data
Date jest obiektem pozwalającym na zarządzanie datą i godziną
Posiada metody pozwalające na dostęp do wszystkich składników daty:
getDay - dzień tygodnia (0..6)
getDate, setDate - dzień miesiąca (1..31)
getMonth, setMonth - miesiąc (0..11)
getYear, setYear - rok (00-99)
getFullYear - rok - w pełnym zapisie (0000-9999)
getHours, setHours - godziny (0..23)
getMinutes, setMinutes - minuty (0..59)
getSeconds, setSeconds - sekundy (0..59)
getMiliseconds, setMiliseconds - milisekundy (0..999)
Date - użycie:
zmienna = new Date()
zmienna = new Date(hours, minutes, seconds)
zmienna = new Date(year, month, day)
Dostępne metody: getDate(), setDate(), getTime(), getDay(), setTime() itp.
Przykład programu
var d = new Date();
d.setDate(1);
var m = d.getMonth()
d.setDate( 1 - d.getDay() );
do
{
document.write("<tr>");
for (var i=0; i<7; ++i)
{
document.write("<td>");
document.write( d.getDate() );
document.write("</td>");
d.setDate( d.getDate() + 1 )
}
document.write("</tr>");
} while (d.getMonth() == m)
Tablice
W języku JavaScript - tablice są obiektami które muszą być utworzone instrukcją new
var tab = new Array();
Do elementów tablicy możemy się dostawać używając ich pozycji.
Elementy numerowane są od 0. Tablice mają taki rozmiar jaki jest w danej chwili potrzebny by
pomieścić wszystkie elementy.
Nie jest wymagane by wszystkie elementy były tego samego typu.
Wielkość tablicy można sprawdzić używając funkcji lenght
tab[0] = 12.9;
tab[1] = "Napis";
tab[2] = 1e-12;
document.write( tab.length; }
Inicjalizacja tablic
Tworząc tablicę, możemy od razu wypełnić ją wartościami podając je w nawiasach:
var miesiace = new Array( "styczeń", "luty",
"marzec", "kwiecień", "maj", "czerwiec",
"lipiec", "sierpień", "wrzesień",
"październik", "listopad", "grudzień");
Możemy podać ciąg wartości, lub liczbę elementów - jeśli podamy jako parametr przy tworzeniu
tablicy - liczbę - będzie potraktowana jak liczba elementów
Wartości nadane początkowo - mogą być zmieniane przez program
Zdarzenia
Na stronie WWW wiele elementów może generować zdarzenia
Zdarzenia mogą być związane z działaniami użytkownika takimi jak kliknięcie na jakimś
elemencie lub przesunięcie kursora myszki ponad elementem strony.
OnClick , onFocus, onChange
Mogą także pochodzić od systemu i informować na przykład o tym, że strona jest w całości
załadowana lub właśnie jest zmieniana
onLoad, onUnload
Przykład zdarzenia
Typowym zdarzeniem jest naciśnięcie przycisku
Możemy na przykład wyświetlić komunikat poleceniem alert
<html>
<body>
<form name=f1>
<input type=button name=b1 value="Nie dotykać"
onClick="alert('Auu !')">
</form>
</body>
</html>
Możemy także wywołać funkcję którą sami napiszemy
<script>
function zdarzenie()
{
alert('Auu !')
}
</script>
<form name=f1>
<input type=button name=b1 value="Nie dotykać"
onClick="zdarzenie()">
</form>
Możemy także modyfikować zawartość elementów dokumentu
function zdarzenie()
{
alert('Auu !');
document.f1.b1.value =
"Mowiłem, żeby nie dotykać"; }
Folder zdarzenia
<IMG SRC="coś tam" eventHandler="polecenie 1; polecenie 2; polecenie 3">
W miejsce eventHandler należy wstawić odpowiednie określenie zdarzenia.
Oto lista najużyteczniejszych zdarzeń:
Event handler
Opis
onClick klinięcie myszką na dany element
onFocus wybranie danego pola formularza
onBlur odwrotne do onFocus
onChange zmiana zawartości elementu formularza
onSelect gdy zawartość pola formularza zostaje wybrana
onMouseOver gdy kursor wejdzie nad element
onMouseOut gdy kursor opuści obszar nad elementem
onLoad gdy dokument jest ładowany (dotyczy BODY oraz obiektu window)
onUnload gdy dana strona jest opuszczana (dotyczy BODY oraz obiektu window)
Wbudowane funkcje
alert("tekst") - wyświetla okienko z tekstem
eval("kod") - oblicza i zwraca wartość wygenerowaną przez "kod" (może to być ciąg instrukcji)
parseFloat("ciąg") - konwertuje ciąg znaków na liczbę zmiennoprzecinkową
parseInt("ciąg") - konweruje ciąg znaków na liczbę całkowitą
Przykład:
<script language="JavaScript">
<!-function wyswietl() {
alert(eval("5+10"));
}
//-->
</script>
<input type="button" value="Kliknij tu" onClick="wyswietl()">
<input type="button" value="I tu też" onClick="alert('Tekścik')">