Archiwa kategorii: E.14 Projektowanie Aplikacji Internetowych

JavaScript

Jak korzystać z obiektów wbudowanych?

JavaScript udostępnia obiektów wewnętrznych (lub „wbudowane”). 

Są one Array, Boolean, Date, Error, Function, Global, JSON, Math, numer, Object,RegExp, i String obiektów.

Właściwości obiektu window:

window

Metody:
alert – Tworzy okienko dialogowe z alertem
close – Zamyka dokument
confirm – Tworzy okienko dialogowe z potwierdzeniem – z przyciskami OK i Cancel
open – Otwiera nowe okno
prompt – Tworzy okienko dialogowe zachęcające do wprowadzenia jakichś danych
setTimeout – Wykonuje skrypt JavaScript po upłynięciu podanej liczby milisekund
clearTimeout – Przerywa polecenie setTimeout

 

Przykład:

<script type=”text/ javascript”>
var test=confirm („Test okienka decyzyjnego: ” ) ;
if (test==true) {
document. write („Został kliknięty przycisk OK. „);
}
else {
document. write („Został kliknięty Przycisk Anuluj .” ) ;
)
</script>

 

Właściwości obiektu location:

location

Metody:

assign(URL) – ładuje nową stronę o adresie URL
reload() – przeładowanie bieżącej strony
replace(URL) – zastąpienie bieżącej strony stroną o adresie URL

Przykład:

<script type=”text/javaascript”>
function przekierowanie ( ) {
window.locationaton.replace („http://www.wsip.pl/”);
}
setTimeout („przekierowanie () ;”, 10000);
document.write(„Za 10 s. nastąpi przekierowanie na stronę
<br>”);
document.write („www.wsip.pl”) ;
</script>

 

 

Właściwości obiektu location:

dokument

Metody:

clear,
close,
open,
write,
writeln

 

Własności:

length – zwraca wartość liczbową charakteryzującą liczbę znaków w łańcuchu

Metody:

anchor(nazwa) – Czyni ze stringu kotwicę
big() – Nadaje atrybut big
blink() – Nadaje atrybut blink
bold() – Nadaje atrybut bold
charAt(indeks) – pobiera znak z pewnej pozycji stringu
fixed() – Wyświetla string za pomocą atrybutu TT
fontcolor(kolor) – Określa kolor stringu
fontsize(wielkość) – Określa wielkość czcionki w stringu
indexOf(łańcuch,indeks) – Szuka pierwszego wystąpienia poszukiwanej wartości w stringu
italics() – Nadaje strybut italics
lastIndexOf(łańcuch,indeks) – Szuka ostatniego wystąpienia poszukiwanej wartości w stringu
link(href) – Czyni ze stringu odsyłacz
small() – Nadaje atrybut small
strike() – Nadaje atrybut strike through (linia przekreślająca ciąg)
sub() – Nadaje atrybut subscript
substring(indeksPoczątku,indeksKońca) – Zwraca łańcuch rozpoczynający się od pewnego znaku i kończący na innym znaku
sup() – Nadaje atrybut superscript
toLowerCase() – Nadaje atrybut lower case
toUpperCase() – Nadaje atrybut upper case

 

Właściwości obiektu date:

Obiekt date jest bardzo użyteczną i wyrafinowaną funkcją. Pozwala ci pracować z datą i czasem – latami, dniami, godzinami, minutami, sekundami etc. JavaScript przechowuje daty jako liczby milisekund, które upłynęły od 1 stycznia 19700, g. 00:00:00.:

Metody:
getDate() – Wyświetla dzień miesiąca dla ustalonej daty (liczba całkowita z zakresu 1-31)
getDay() – Wyświetla dzień tygodnia dla ustalonej daty (liczba całkowita, od 0=Niedziela do 6=Sobota)
getHours() – Wyświetla godzinę dla ustalonej daty (liczba całkowita z zakresu 0-23)
getMinutes() – Wyświetla minuty dla ustalonej daty (liczba całkowita z zakresu 0-59)
getMonth() – Wyświetla miesiąc dla ustalonej daty (liczba całkowita z zakresu 0=Styczeń – 11=Grudzień)
getSeconds() – Wyświetla sekundy dla bieżącego czasu (liczba całkowita z zakresu 0-59)
getTime() – Pokazuje ustaloną datę z użyciem liczb (liczba milisekund od 1 stycznia 1970 00:00:00)
getTimezoneOffset() – Wyświetla w minutach różnicę czasu między czasem lokalnym i czasem Greenwich (GMT)
getYear() – Wyświetla rok dla ustalonej daty (liczba dwucyfrowa)
parse() – Wyświetla liczbę milisekund od 1/1/70 00:00:00 do podanej daty
setDate() – Ustawia dzień miesiąca dla aktualnego obiektu date
setHours() – Ustawia godzinę dla aktualnego obiektu date
setMinutes() – Ustawia minuty dla aktualnego obiektu date
setMonth() – Ustawia miesiąc dla aktualnego obiektu date
SetSeconds() – Ustawia liczbę sekund dla aktualnego obiektu date
setTime() – Ustawia datę i godzinę dla aktualnego obiektu date, w milisekundach od 1/1/70 00:00:00
setYear() – Ustawia rok dla aktualnego obiektu date (rok jest liczbą całkowitą większą od 1900)
toGMTString() – Zwraca aktualną datę i czas z użyciem G.M.T. (Greenwich Mean Time)
toLocaleString() – Zwraca aktualną datę i godzinę z użyciem bieżącej lokalizacji użytkownika
UTC() – Wyświetla liczbę milisekund od 1/1/70 00:00:00 z użyciem G.M.T.

Właściwości obiektu math:

E – Zwraca stałą Eulera, która wynosi ok. 2.718
LN2 – Zwraca logarytm dwóch, tj. ok. 0.693
LN10 – Zwraca logarytm z dziesięciu, tj. ok. 2.302
LOG2E – Zwraca logarytm o podstawie 2 z liczby E, czyli ok. 1.442
LOG10E – Zwraca logarytm o podstawie 10 z E, czyli ok. 0.434
PI – Zwraca wartość liczby Pi, czyli ok. 3.14159
SQRT1_2 – Zwraca pierwiastek kwadratowy z 0.5, czyli ok. 0.707
SQRT2 – Zwraca pierwiastek kwadratowy z 2, czyli ok. 1.414

 

Metody:
abs(liczba) – Zwraca wartość absolutną liczby
acos(liczba) – Zwraca arcus cosinus z liczby (podanej w radianach)
asin(liczba) – Zwraca arcus sinus z liczby (podanej w radianach)
atan(liczba) – Zwraca arcus tangens z liczby (podanej w radianach)
ceil(liczba) – Zwraca najmniejszą liczbę całkowitą, większą lub równą podanej liczbie
cos(liczba) – Zwraca cosinus liczby (podanej w radianach)
exp(liczba) – Zwraca wartość E podniesionej do potęgi wyrażonej podanym argumentem
floor(liczba) – Zwraca największą liczbę całkowitą mniejszą lub równą podanej liczbie
log(liczba) – Zwraca logarytm naturalny liczby
max(liczba1,liczba2) – Zwraca większą z dwóch liczb
min(liczba1,liczba2) – Zwraca mniejszą z dwóch liczb
pow(liczba1,liczba2) – Zwraca wartość liczby1 podniesionej do potęgi liczby2
random() – Zwraca wartość pseudolosową z przedziału 0-1
round(liczba) – Zwraca zaokrąglenie danej liczby do najbliższej liczby całkowitej
sin(liczba) – Zwraca sinus liczby (podanej w radianach)
sqrt(liczba) – Zwraca pierwiaastek kwadratowy liczby
tan(liczba) – Zwraca tangens liczby (podanej w radianach)

Autor: Marcin Połetek
JavaScript

Co to jest obiekt ? Javascript

. Obiekty.

Czasami zachodzi sytuacja, w której potrzeba nam „zmiennej” bardziej szczegółowo opisującej rzecz, stan, osobę czy zjawisko której dotyczy. Jeżeli opisujemy np. samochód, to nie wystarczy nam, gdy podamy tylko rok produkcji, tylko jego markę, lub maksymalną prędkość, czy pojemność silnika. Chcielibyśmy mieć możliwość opisania wszystkich właściwości samochodu, jakie nam będą potrzebne i jednocześnie przy tym nie robić bałaganu w kodzie, poprzez wiele niepotrzebnych zmiennych, lub innych zastępczych rozwiązań, typu tablice. Do tego właśnie służą obiekty. Odzwierciedlają one „coś” ze świata rzeczywistego w świat komputera.

Obiekty są konstrukcjami programistycznymi posiadającymi tzw. właściwości, którymi mogą być zmienne lub inne obiekty. Z obiektami powiązane są funkcje wykonujące operacje na jego właściwościach, a nazywamy je metodami. Do właściwości danego obiektu możemy się dostać używając zapisu:
nazwa_obiektu.nazwa_właściwości
Np. jeśli mamy obiekt „auto”, może on mieć właściwości: marka, rok, cena. Aby określić właściwości naszego obiektu będziemy musieli wykonać instrukcje:

auto.marka=”Opel Omega”
auto.rok=1996
auto.cena=25000

Można również skorzystać z innej notacji w zależności od upodobań:
nazwa_obiektu[nazwa_właściwości]
np. auto[cena]

Aby korzystać z obiektów w naszych skryptach, musimy go zdefiniować, tworząc funkcję zwaną konstruktorem, a następnie powołać do życia za pomocą operatora new.

function auto(marka,rok,cena,wlasciciel) { // w sekcji HEAD
this.marka=marka
this.rok=rok
this.cena=cena
this.wlasciciel=wlasciciel
}function osoba(imie,nazwisko) {
this.nazwisko=nazwisko
this.imie=imie
}

posiadacz=new osoba(„Jan”,”Kowalski”) // dalej w kodzie HTML
bryka=new auto(„Ferrari”,2003,200000,posiadacz)
document.write(„Marka: „+ bryka.marka +” rocznik: „+ bryka.rok +” cena: „+ bryka.cena)
document.write(„<br>Wlasciciel: „+ bryka.wlasciciel.imie +” „+ bryka.wlasciciel.nazwisko)

Jednak takie wyciąganie danych z obiektów wcale nie czyni ich wygodnymi w użyciu – właśnie dlatego mamy dodatkowo możliwość zdefiniowania metod. Do naszego przykładu dodamy metody wyświetlające właściwości naszych obiektów. Modyfikujemy kod tak jak poniżej:

function pokaz_auto() {
dane=”Marka: „+ this.marka +” Rocznik: „+ this.rok +” Cena: „+ this.cena +”<br>”
document.write(dane)
this.wlasciciel.pokaz() // metoda pokaz obiektu osoba
}function pokaz_osoba() {
dane=”imie: „+ this.imie +” nazwisko: „+ this.nazwisko +”<br>”
document.write(dane)
}

function auto(marka,rok,cena,wlasciciel) {
this.marka=marka
this.rok=rok
this.cena=cena
this.wlasciciel=wlasciciel
this.pokaz=pokaz_auto // dodajemy metode pokazujaca dane naszego auta
}

function osoba(imie,nazwisko) {
this.nazwisko=nazwisko
this.imie=imie
this.pokaz=pokaz_osoba // dodajemy metode pokazujaca nasza osobe
}
// tu koniec funkcji pisanych w sekcji HEAD
// potem gdzieś gdzie nam potrzeba:

posiadacz=new osoba(„Jan”,”Kowalski”)
bryka=new auto(„Ferrari”,2003,200000,posiadacz)
bryka.pokaz() // pokazuje nam wszystkie wlasciwosci naszego obiektu

źródło: http://javascript.xn--rzeniczak-sbc.pl/03lekc3.php
JavaScript

Jak stosować pętle w Java Script

Pętla for

Pierwszą pętlą którą omówię jest pętla for. Posiada ona następującą składnię:

for ( inicjalizacja; test_logiczny; inkrementacja )
    instrukcja;

lub

for ( inicjalizacja; test_logiczny; inkrementacja )
{
    instrukcja1;
    instrukcja2;
    ...
}

Jak pokazują powyższe przykłady, instrukcja for posiada trzy wyrażenia rozdzielone średnikami które można podać wewnątrz nawiasów okrągłych: inicjalizacja, test_logiczny i inkrementacja. Ich znaczenie jest następujące:

  • inicjalizacja– instrukcja wykonywana tylko raz na samym początku pętli. Zwykle używa się jej do przypisania wartości początkowej do zmiennej która np. będzie zwiększana po każdym obiegu pętli. Zmienna taka zwykle nazywana jest też licznikiem pętli;
  • test_logiczny– dowolny warunek który będzie sprawdzany przed każdym obiegiem pętli (także tym pierwszym). W momencie gdy będzie on fałszywy, wykonywanie pętli zostanie przerwane;
  • inkrementacja– instrukcja która będzie wykonywana po każdym obiegu pętli, a która ma za zadanie np. zwiększenie wartości zmiennej pełniącej rolę licznika pętli.

Zatem pętla która ma wypisać kolejne cyfry od 0 do 9 może wyglądać następująco:

for (n = 0; n < 10; ++n)
    document.write(n);

Zwróć uwagę na sposób w jaki testuję warunek zakończenia pętli – stosuję ostrą nierówność. Oczywiście można też użyć nieostrej nierówności i uzyskać ten sam rezultat:

for (n = 0; n <= 9; ++n)
    document.write(n);

W pewnych przypadkach gdy potrzebujesz coś wykonać 10 razy ale nie interesuje Cię wartość licznika pętli możesz też liczyć od 1 do 10:

for (n = 1; n <= 10; ++n)
    zrob_cos_ciekawego();

Osobiście polecam tą pierwszą wersję (z ostrą nierównością) z prostego powodu – tablice w JavaScript są indeksowane od zera, i łatwo można odczytać ilość elementów w tablicy. Poza tym konsekwentne stosowanie jednej wersji zmniejsza prawdopodobieństwo że napiszemy pętlę która wykonuje się o jeden raz za mało lub za dużo, czyli uprości to uruchamianie własnych skryptów.

Każdy z trzech elementów znajdujących się wewnątrz okrągłych nawiasów pętli for może też być bardziej skomplikowanym wyrażeniem, np.:

for (n = wartosc_startowa(); czy_kontynuowac(n); n = nastepna_wartosc(n))
    zrob_cos_smiesnego(n);

Można także napisać pętlę która posiada kilka liczników (lub inaczej mówiąc wykonuje kilka instrukcji). Można to zrobić w częściach inicjalizacja i inkrementacja, poprzez rozdzielenie wyrażeń za pomocą przecinka. Aby zrobić coś takiego w części test_logiczny, należy użyć jednego zoperatorów logicznych.

for (n = 0, k = 1; n < 10; ++n, k += 3)
    document.write(n * k);

Pętle można też oczywiście zagnieżdżać – poniższy przykład po uruchomieniu wypisze wszystkie iloczyny liczb od 0 do 9:

for (n = 0; n < 10; ++n)
    for (k = 0; k < 10; ++k)
        document.write(n * k);

Powyżej napisałem że instrukcja for może wewnątrz nawiasów okrągłych posiadać trzy części: inicjalizacja, test_logiczny i inkrementacja. Nie są one jednak obowiązkowe – każdą z nich można pominąć. Należy jedynie pamiętać o pozostawieniu średników. Można nawet pominąć wszystkie, w efekcie czego powstanie pętla nieskończona jak poniżej. Osobiście odradzam tworzenie takich pętli. Ponieważ jednak nowoczesne przeglądarki posiadają zabezpieczenie przed długo działającymi skryptami i po jakimś czasie zadają pytanie czy przerwać skrypt, jeżeli to Cię bardzo ciekawi możesz go spróbować uruchomić.

for (;;)
    document.write("pętla nieskończona<br>");

W praktyce taką pętlę stosuje się rzadko. Jeżeli już, to razem z instrukcjami które pozwalają na jej przerwanie. Jedną z takich instrukcji jest break. Przy jej zastosowaniu można tak zapisać znaną już pętlę wypisującą cyfry od 0 do 9:

for (n = 0; ; ++n)
{
    if (n == 10)
        break;
    document.write(n);
}

Pozostałe instrukcje które powodują przerwanie pętli to return (powrót z funkcji) i throw (rzucenie wyjątku).

Kolejną instrukcją którą warto poznać jest continue – jej wykonanie powoduje że pętla natychmiast zaczyna wykonywać kolejną iterację (czyli wykonuje inkrementację, a następnie sprawdza warunek kontynuacji pętli). Można w ten sposób np. wyświetlić tylko cyfry parzyste:

for (n = 0; n < 10; ++n)
{
    if (n % 2 != 0)
        continue;
    document.write(n);
}

Oczywiście w praktyce lepiej jest inkrementować licznik o 2 – powyższy przykład umieściłem tylko dla zademonstrowania zastosowania komendy continue.

Pętla while

Pętla while posiada następującą składnię:

while ( test_logiczny )
    instrukcja;

lub

while ( test_logiczny )
{
    instrukcja1;
    instrukcja2;
    ...
}

Jest ona funkcjonalnym odpowiednikiem następującej wersji pętli for:

for ( ; test_logiczny;  )
    instrukcja;

Zachowuje się też identycznie jak podana wersja pętli for, czyli najpierw sprawdza czy test_logiczny jest prawdziwy i jeżeli tak to wykonuje instrukcje, po czym powtarza to ażtest_logiczny stanie się fałszywy.

Taką pętlę stosuje się zwykle gdy nie występuje jawnie inicjalizacja pętli i/lub jej inkrementacja, lub też są one bardziej złożone i przez to zapisanie ich w ramach instrukcji forbyłoby kłopotliwe.

Znany nam już przykład z wypisywaniem cyfr od 0 do 9 wygląda tak z zastosowaniem pętliwhile:

n = 0;
while (n < 10)
{
    document.write(n);
    ++n;
}

Wewnątrz pętli while można też stosować opisane wcześniej instrukcje break icontinue.

Pętla do/while

Pętla do/while jest bardzo podobna do omówionej wcześniej pętli while. Posiada ona następującą składnię:

do
    instrukcja;
while ( test_logiczny )

lub

do
{
    instrukcja1;
    instrukcja2;
    ...
}
while ( test_logiczny );

W działaniu te dwie pętle różnią się momentem kiedy sprawdzana jest prawdziwość warunkutest_logiczny – pętla while robi to przed wykonaniem instrukcji, natomiast pętla do/while robi to po. Oznacza to że gdy warunek będzie fałszywy już na początku pętli, to wtedy pętlawhile nie wykona się ani razu, ale pętla do/while wykona się jeden raz.

W poniższych przykładach liczba 10 zostanie wypisana tylko w drugim przypadku:

n = 10;
while (n < 10)
{
    document.write(n);
    ++n;
}
n = 10;
do
{
    document.write(n);
    ++n;
}
while (n < 10);

Wewnątrz pętli while można też stosować opisane wcześniej instrukcje break i continue.

Pętla for/in

Pętla ta służy do łatwego wyliczania kolejnych elementów tablic i właściwości obiektów. Posiada ona następującą składnię:

for (zmienna in tablica_lub_obiekt)
    instrukcja;

lub

for (zmienna in tablica_lub_obiekt)
{
    instrukcja1;
    instrukcja2;
    ...
}

zmiennajest to nazwa zmiennej która ma być użyta jako licznik tej pętlitablica_lub_obiekt  jest natomiast tablicą lub obiektem której/którego zawartość ma zostać wyliczona przez pętlę. Pętla ta w trakcie wykonywania się będzie do zmiennej zmienna przypisywać kolejne indeksy (klucze) tablicy. Przykładowo poniższy przykład wypisze kolejno cyfry od zero do trzy:

tablica = Array( 'a', 'b', 'c', 'd' );
for (n in tablica)
{
    document.write(n);
}

Aby wypisać to co znajduje się w tablicy pod każdym z indeksów (czyli kolejne literki), trzeba dokonać niewielkiej modyfikacji tego kodu:

tablica = Array( 'a', 'b', 'c', 'd' );
for (n in tablica)
{
    document.write(tablica[n]);
}

Oczywiście w tej pętli można też stosować instrukcje break i continue.

źródło: poradnik-webmastera.com

Bartosz Pszczoła