Temat: Obiekty wbudowane: String() oraz Date() 

1. Obiekt String() – zawiera właściwości i metody dotyczące łańcuchów

znaków

length // określa długość łańcucha

var tekst=”obiekty języka JavaScript”

var dl=tekst.length

substring() // zwraca podzbiór łańcucha

var x=tekst.substring(15,19)

toUpperCase() // duże litery

toLowerCase() // małe litery

var c=tekst.toLowerCase()

var n=tekst.toUpperCase()

----------------------------------------------------------------------------------

charAt() // zwraca znak z konkretnej pozycji

String.prototype.duzaLitera=function()

return this.charAt(0).toUpperCase()+this.substr(1);

var q=tekst.duzaLitera();

var txt=’komputer’;

document.write(txt.duzaLitera());

---------------------------------------------------------------------------------------------------------

big() // duża czcionka

blink() // łańcuch będzie migotał jak w znaczniku <blink>

bold() // pogrubienie

italics() // pochylenie

small() // mała czcionka

sub() // indeks dolny

strike() // przekreślenie

sup() // indeks górny

fontColor() // kolor czcionki

fontSize() // rozmiar czcionki

indexOf() // zwraca pozycję określonego podciągu w łańcuchu

znaków

lastindexOf() // zwraca ostatnią pozycję określonego podciągu

w łańcuchu znaków

concat() // łączy tekst z dwóch łańcuchów i zwraca nowy

łańcuch znaków

2. Obiekt Date() – służy do przechowywania wartości daty i czasu. Przy jego

pomocy można odczytać wartości daty i czasu, można też rozłożyć te
wartości na części, odczytując oddzielnie dzień, miesiąc, rok, itp.

Aby odczytać bieżącą datę i czas należy utworzyć obiekt Date() bez
parametrów:

var data=new Date();

Można utworzyć obiekt z określona liczbą parametrów. Tych parametrów może

być od dwóch do siedmiu (rok, miesiąc, dzień, godzina, minuty, sekundy,
milisekundy). Taki obiekt będzie zawierał ściśle określoną wartość daty
i godziny:

var data1=new Date(2018,04,28,9,17,48);

W języku JavaScript wartości daty i czasu są przechowywane w formacie
timestamp, czyli jako liczba milisekund, które upłynęły od północy 1 stycznia
1970 roku.

----------------------------------------------------------------------------------

getDate() // zwraca dzień miesiąca

getDay() // zwraca wartość od 0 do 7, oznaczającą dzień

tygodnia daty reprezentowanej przez obiekt data. Znaczenie poszczególnych
wartości: 0 — niedziela, 1 — poniedziałek, 2 — wtorek, 3 — środa, 4 —
czwartek, 5 — piątek, 6 — sobota. Przykład:
<script type="text/javascript">
var dzien = "nieznany";
var data = new Date();
switch(data.getDay()){
  case 0 : dzien = "niedziela"; break;
  case 1 : dzien = "poniedziałek"; break;
  case 2 : dzien = "wtorek"; break;
  case 3 : dzien = "środa"; break;
  case 4 : dzien = "czwartek"; break;
  case 5 : dzien = "piątek"; break;
  case 6 : dzien = "sobota"; break;
}
document.write("Dziś jest " + dzien + ".");
</script>

getFullYear() // zwraca rok w postaci czterocyfrowej

getHours() // zwraca godzinę z daty

getMinutes() // zwraca minuty z daty

getMonth() // zwraca wartość od 0 do 11, oznaczającą miesiąc

daty reprezentowanej przez obiekt data. Znaczenie poszczególnych wartości to:
0 — styczeń, 1 — luty, 2 — marzec, 3 — kwiecień, 4 — maj, 5 — czerwiec, 6 —
lipiec, 7 — sierpień, 8 — wrzesień, 9 — październik, 10 — listopad, 11 —
grudzień
<script type="text/javascript">
var miesiac = "nieznany";
 var data = new Date();
switch(data.getMonth()){
  case 0 : miesiac = "styczeń"; break;
  case 1 : miesiac = "luty"; break;
  case 2 : miesiac = "marzec"; break;
  case 3 : miesiac = "kwiecień"; break;
  case 4 : miesiac = "maj"; break;
  case 5 : miesiac = "czerwiec"; break;
  case 6 : miesiac = "lipiec"; break;
  case 7 : miesiac = "sierpień"; break;
  case 8 : miesiac = "wrzesień"; break;
  case 9 : miesiac = "październik"; break;
  case 10 : miesiac = "listopad"; break;
  case 11 : miesiac = "grudzień"; break;
}
document.write("Aktualny miesiąc to " + miesiac + ".");
</script>

getSeconds() // zwraca liczbę sekund z daty

getTime() // zwraca liczbę milisekund, jakie upłynęły pomiędzy

1 stycznia 1970 roku, godziną 0:00:00.000, a datą reprezentowaną przez
obiekt data. Dla dat wcześniejszych niż wymieniona zwracana wartość jest
ujemna

getTimezoneOffset() // zwraca liczbę minut stanowiących różnicę czasową

pomiędzy bieżącą strefą czasową a czasem GMT. Dla Polski różnica ta wynosi 2
godziny do tyłu, czyli 120 minut, dla czasu letniego i 1 godzinę do tyłu, czyli 60
minut, dla czasu zimowego. A zatem wywołanie tej metody w polskiej strefie
czasowej powinno dać wynik –120 lub –60

toString() // zwraca datę, czas, strefę

toLocaleString() // zwraca datę i czas dla ustawień regionalnych

toUTCString() // zwraca datę, czas, strefę dla UTC

toGMTString() // zwraca datę, czas, strefę dla GMT

toDateString() // zwraca datę w języku angielskim

toLocaleDateString() // zwraca datę dla ustawień regionalnych

toTimeString() // zwraca czas w języku angielskim

toLocaleTimeString() // zwraca czas dla ustawień regionalnych

Temat: Obiekty wbudowane: Math() oraz Array() 

1. Obiekt Math() – zawiera stałe matematyczne oraz metody pozwalające

na wykonywanie różnych operacji matematycznych, takich jak
pierwiastkowanie, potęgowanie itp.

Właściwości obiektu Math():

LN10 //logarytm naturalny liczby 10

LN2 //logarytm naturalny liczby 2

PI // liczba Pi=3.14

SQRT1_2 // pierwiastek kwadratowy z liczby 1/2

SQRT2 // pierwiastek kwadratowy z liczby 2

E // stała Eulera=2.71

Metody obiektu Math():

abs() // wartość bezwzględna

acos() // arcus cosinus

asin() // arcus sinus

atan() // arcustangens

ceil() // zaokrąglenie w górę

cos() //cosinus

exp() //stała Eulera, e do potęgi x

floor() // zaokrąglenie w dół

log() // logarytm naturalny

max() // zwraca największą z podanych liczb

min() // zwraca najmniejszą z podanych liczb

pow() // potęga lub pierwiastek

random() // zwraca wartość pseudolosową z zakresu 0 – 1

round() // zaokrąglenie

sin() // sinus

sqrt() // pierwiastek

tan() // tangens

Obiekt Array() – obiekt tablicowy. Tablice służą do przechowywania wielu

zmiennych. Aby utworzyć nową tablicę należy zadeklarować obiekt Array w
postaci:

var Nazwa_Tablicy=new Array()

lub

var Nazwa_Tablicy=[]

Jeżeli w nawiasach zostanie podana liczba n, to zostanie utworzona tablica

zawierająca n pustych elementów:

var Tab1=new Array(10)

lub

var Tab2=[15]

Tablicę można również tworzyć wstawiając do niej konkretne wartości:

var Tab3=new Array(‘Anna’, ‘Adam’, ‘Piotr’, ‘Ewa’)

lub
var Tab4=[‘Paweł’, ‘Marcin’, ‘Ela’]

Żeby uzyskać dostęp do elementów tablicy należy podać numer indeksu

danego element. Elementy są indeksowane od zera:

document.write(Tab3[2]);

W wyniku wyświetli się wartość ‘Piotr’.

Aby dodać nową wartość do tablicy należy przypisać tę wartość do

odpowiedniego indeksu tablicy:

var Tab5=new Array(‘kot’, ‘pies’, ‘koń’)

Tab5[3]=’mysz’

Tab5[4]=’chomik’

document.write(Tab5[0]+’ i ’+Tab5[3])

W wyniku wyświetli się tekst ‘kot i mysz’.

Dzięki właściwości length można określić z ilu elementów składa się tablica:

varTablica= new Array (‘Anna’, ‘Michał’, ‘Robert’, ‘Zenon’, ‘Ewa’, ‘Ala’,

‘Cynthia’);

for(i=0;i<Tablica.length;i++)

document.write(Tablica[i]+”<br>”);

W wyniku zostaną wyświetlone po kolei wszystkie elementy tablicy.

Tablice wielowymiarowe:
W tablicy wielowymiarowej element jest opisywany za pomocą indeksu
określającego jego położenie w wierszu i kolumnie.

varTablica=[];

Tablica[0]=[’Michał’, ‘Dudek’];

Tablica[1]=[‘Michał’, ‘Kowalski’];

Tablica[2]=[’Patryk’, ‘Nowak’];

Tablica[3]=[‘Kacper’ , ‘Kowalczyk’];

document.write(‘imie: ‘ +Tablica[0][0]+’nazwisko:‘+Tablica[0][1]+”<br>”);

document.write(‘imie: ‘+Tablica[1][0]+’nazwisko:‘+Tablica[1][1]+”<br>”);

document.write(‘imie: ‘+Tablica[2][0]+’nazwisko:‘+Tablica[2][1]+”<br>”);

document.write(‘imie: ‘+Tablica[3][0]+’nazwisko:‘+Tablica[3][1]+”<br>”);

Łączenie elementów tablicy:

Za pomocą metody join() mona łączyć elementy tablicy w jeden tekst.

W metodzie tej można opcjonalnie podać parametr, który określi znak
oddzielający kolejne elementy tablicy. Jeżeli nie zostanie podana wartość tego
parametru , domyślnym znakiem będzie przecinek.

varTablica=new Array(‘Anna’, ‘Adam’, ‘Piotr’);

document.write(Tablica.join()+”<br>”);

document.write(Tablica.join(“ – “)+”<br>”);

Odwracanie kolejności elementów tablicy:

Za pomocą metody reverse() można odwrócić kolejność elementów tablicy.

varTablica=new Array(‘Anna’, ‘Adam’, Piotr’);

document.write(Tablica.join()+”<br>”);

Tablica.reverse();

document.write(Tablica.join()+”<br>”);

Sortowanie:

Do sortowania elementów tablicy służy metoda sort():

var Tablica=new Array(‘Paweł’, ‘Anna’, Maria’,’Adam’,’Piotr’);

Tablica.sort();

document.write(Tablica.join());

Domyślnie tablica jest sortowana leksykograficznie. Powoduje to, że liczba

12459 będzie mniejsza od 4567, ponieważ cyfra na pierwszej pozycji jest
mniejsza. Aby temu zaradzić, można sortować tablicę według własnych
kryteriów. Należy skorzystać z dodatkowego parametru metody sort().
Parametrem będzie własna funkcja sortująca. Tworząc taka funkcję, należy
pamiętać o trzech zasadach, które muszą być spełnione:

- jeżeli funkcja(a,b) zwróci wartość mniejszą od 0, to wartości a zostanie nadany

indeks mniejszy od indeksu przyznanego wartości b,

- jeżeli funkcja(a,b) zwróci wartość równą 0, to wartości indeksów pozostaną

bez zmian,

- jeżeli funkcja(a,b) zwróci wartość większą od 0, to wartości a zostanie nadany

indeks większy od indeksu przyznanego wartości b.

Stosując się do tych zasad, można tworzyć własne metody sortowania

w tablicy.

function porownaj(a,b)

{
return a-b;

var Tablica= new Array(27,100,10,450,1654,320);

document.write(‘Bezsortowania: ‘+Tablica.join()+”<br>”);

document.write(‘Sortowanie domyślne: ‘’+‘’<br>”);

Tablica.sort();

document.write(Tablica.join()+”<br>”);

document.write(‘Sortowanie poprawne: ‘+”<br>”);

Tablica.sort(porownaj);

document.write(Tablica.join());

W podanym przykładzie została zdefiniowana funkcja porownaj(a,b), która

zwróci wartość mniejszą od zera, równą zero lub większą od zera. W zależności
od zwróconej wartości elementy tablicy zostaną uporządkowane od wartości
najmniejszej do największej.

Łączenie dwóch tablic:

Do łączenia dwóch tablic służy metoda concat(). Działa ona w taki

sposób, że na końcu tablicy tablica1 zostaną dodane elementy
przekazane w postaci argumentu. Jako argumentu można użyć listy
wartości oddzielonych od siebie przecinkami bądź też innej tablicy,
a także listy tablic. Załóżmy przykładowo, że w kodzie znalazły się trzy
tablice w postaci:

var tab1 = [1, 2, 3];

var tab2 = [3, 4, 5];

var tab3 = [6, 7, 8];

Jeżeli wykonamy operację:

var tab4 = tab1.concat(tab2);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 3, 4, 5.

Jeżeli wykonamy operację:

var tab4 = tab1.concat(tab3, tab2);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 6, 7, 8, 3, 4, 5.

Jeżeli wykonamy operację:

var tab4 = tab1.concat(4, 5);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 4, 5.

Jeżeli wykonamy operację:

var tab4 = tab1.concat(4, 5, tab3, 9);

w wyniku otrzymamy tablicę tab4 o zawartości 1, 2, 3, 4, 5, 6, 7, 8, 9.

Pozostałe metody obiektu Array():

pop() // metoda pop pobiera z tablicy ostatni element

i jednocześnie usuwa go (tym samym tablica zostaje skrócona o ostatni
element)
push() // jest przeciwieństwem metody pop i dodaje na
końcu tablicy nowe elementy przekazane w postaci argumentów. Poszczególne
dodawane elementy należy oddzielić od siebie znakami przecinka

shift() // pobiera i usuwa pierwszy element tablicy oraz

zwraca wartość tego elementu. Wszystkie elementy zostaną też
przenumerowane, czyli indeks każdego z nich zmniejszy się o jeden

unshift() // odwrotność metody shift. Wstawia element na

początku tablicy

Temat: OBSŁUGA ZDARZEŃ

1. Tworzone w języku JavaScript skrypty mogą służyć do obsługi zdarzeń.

Skrypty takie definiują zachowanie się przeglądarki w przypadku
wystąpienia określonego zdarzenia. Większość zdarzeń wywoływana jest
przez działanie użytkownika. Gdy wystąpi takie zdarzenie, przeglądarka
przechodzi do wykonania skryptu związanego z zaistniałym zdarzeniem.

2. Przykłady zdarzeń:
- kliknięcie przez użytkownika myszą
- przesunięcie myszy na element
- wczytanie strony internetowej
- wczytanie obrazu
- zmiana zawartości pola wprowadzania
- naciśnięcie klawisza

3. Każdy skrypt opisujący zdarzenie skojarzony jest z określonym obiektem

strony internetowej. W kodzie HTML w znaczniku opisującym obiekt musi
znaleźć się specyfikacja tego skryptu. Np. zdarzenie onMouseOver
zachodzi wówczas, gdy wskaźnik myszy pojawi się nad obiektem.
 Zdarzenie to może w kodzie HTML zostać opisane w następujący sposób:

<img src=”przycisk.gif” onMouseOver=”funkcja()”>

4. Aby obsłużyć zdarzenie, nie zawsze trzeba tworzyć funkcję. Jeżeli kod,
który ma zostać wywołany jest pojedynczą instrukcją, można wpisać
skrypt bezpośrednio w znaczniku:

<input type=”button” value=”Pokaż” onclick=”alert(‘Witaj’)”>

5. Zdarzenia myszy:

onClick // kliknięcie myszą

onDblClick // podwójne kliknięcie myszą

onMouseDown // przycisk myszy został wciśnięty

onMouseUp // przycisk myszy został zwolniony

onMouseOver // kursor myszy został umieszczony na elemencie

onMouseMove // kursor myszy został przesunięty wewnątrz elementu

onMouseOut // kursor myszy został przesunięty poza element

6. Zdarzenia klawiatury:

onKeyPress// klawisz został naciśnięty i zwolniony

onKeyDown// klawisz wciśnięty ale nie zwolniony

onKeyUp// klawisz został zwolniony

 7. Zdarzenia formularza:

onSubmit// generowany przy wysyłaniu formularza

onReset// generowany przy czyszczeniu formularza z zawartości

8. Zdarzenia elementów formularza:

onFocus// element formularza otrzymał zaznaczenie

onBlur// element stracił zaznaczenie

onSelect// element został wybrany

onChange// zawartość elementu formularza uległa zmianie

9. Zdarzenia dokumentu:

onLoad// strona została załadowana

onUnload// strona jest zamykana