technologie internetowe – wykład 8

Transkrypt

TECHNOLOGIE INTERNETOWE – WYKŁAD 8
JavaScript – Obiekty własne JavaScript
Najczęściej wykorzystywane w dowolnych skryptach
spotykanych w sieci. Oprócz właściwości i metod jakie możemy
na nich wykonać przybliżę niektóre sposoby ich wykorzystania.
1. Obiekt array
Czyli Tablica - jest używana do przechowywania zbioru
wartości, kolejno ułożonych, do których odwołujemy się poprzez
nazwę tablicy i indeks. Obiekt array jest używany do
przechowywania wielu wartości pod jedną zmienną.
Jeżeli mamy listę elementów(niech to będą samochody), to
możemy je stworzyć poprzez:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
A co będzie gdy tych samochodów jest np. 300 lub gdy chcemy
poszukać jakiś konkretny samochód?
1
1. Obiekt array
Najlepszym rozwiązaniem jest użycie obiektu tablicowego –
array.
Tworzenie obiektu array. Obiekt array można stworzyć na
trzy sposoby:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
var myCars=new Array("Saab","Volvo","BMW"); densed array
var myCars=["Saab","Volvo","BMW"];
2
1. Obiekt array
Dostęp do elementów obiektu array.
Jeżeli chcemy dotrzeć do konkretnego elementu array,
odwołujemy się do niego poprzez nazwę tablicy i indeks elementu.
Indeks rozpoczyna się cyfrą 0.
Następująca linia kodu:
document.write(myCars[0]);
da w efekcie:
Saab
Modyfikowanie tablicy:
Aby zmodyfikować jakiś element tablicy – array, po prostu
dodaj nowy element tablicy z właściwym indeksem.
myCars[0]="Opel";
document.write(myCars[0]);
spowoduje pojawienie się elementu:
Opel
3
1. Obiekt array
<html>
<body>
<script type="text/javascript">
Wyjście ze skryptu:
var i;
Saab
var mycars = new Array();
Volvo
mycars[0] = "Saab";
BMW
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />");
}
</script>
</body>
</html>
4
2. Obiekt boolean
Służy do tworzenia i przechowywania wartości logicznych
prawda lub fałsz.
Jeżeli chcemy stworzyć obiekt którego wartość logiczna
wynosi fałsz, to mamy szereg możliwości:
var
var
var
var
var
var
var
b1=new
b2=new
b3=new
b4=new
b5=new
b6=new
b7=new
Boolean()
Boolean(0)
Boolean(null)
Boolean("")
Boolean(false)
Boolean(NaN)
Boolean(undefined)
var
var
var
var
var
var
b1=new
b2=new
b3=new
b4=new
b5=new
b6=new
Boolean(true)
Boolean("true")
Boolean("false")
Boolean("prawda")
Boolean("fałsz")
Boolean("Janek"))
Na czarnym polu po prawej stronie slajdu pokazano
sposoby tworzenia obiektów z wartością logiczna prawda:
5
2. Obiekt boolean
Wyjście ze skryptu:
<html>
0 is boolean false
<body>
1 is boolean true
An empty string is boolean false
var b1=new Boolean( 0);
null is boolean false
var b2=new Boolean(1);
NaN is boolean false
var b3=new Boolean("");
The string 'false' is boolean
var b4=new Boolean(null);
true
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 is boolean "+ b1 +"<br />");
document.write("1 is boolean "+ b2 +"<br />");
document.write("An empty string is boolean "+ b3 + "<br
/>");
document.write("null is boolean "+ b4+ "<br />");
document.write("NaN is boolean "+ b5 +"<br />");
document.write("The string 'false' is boolean "+ b6 +"<br
/>");
</script>
</body>
</html>
6
3. Obiekt date
Obiekty date (data) są używane do operowania datą i
czasem. Obiekty te są tworzone przy pomocy konstruktora
Date(). Są cztery sposoby inicjowania zmiennych typu date:
new Date() // obecna data i czas
new Date(milliseconds) //milisekundy od 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds,
milliseconds)
Przykłady inicjalizacji obiektów typu date:
var
var
var
var
dzisiaj = new Date()
d1 = new Date(„Listopad 13, 1975 11:13:00")
d2 = new Date(79,5,24)
d3 = new Date(79,5,24,11,33,0)
7
3. Obiekt date
Ustalenie daty. W łatwy sposób można manipulować datami,
korzystając z metod dostępnych. Poniżej pokazano jak ustalić
datę na konkretną wielkość, na 14 stycznia 2010 roku:
var myDate=new Date();
myDate.setFullYear(2010,0,14);
W następnym przykładzie data jest ustalona na pięć dni
naprzód:
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
Porównanie dwóch dat.
Przykład pokazany w następnym slajdzie porównuje dwie daty,
dzień dzisiejszy z 14 stycznia 2100 roku:
8
3. Obiekt date
var x=new Date();
x.setFullYear(2100,0,14);
var dzisiaj = new Date();
if (x>dzisiaj)
{
alert("Dzisiaj jest przed 14 stycznia 2100 roku");
}
else
{
alert("Dzisiaj jest po 14 stycznia 2100 roku");
}
9
3. Obiekt date
Ustalenie aktualnego „pełnego” roku
<html>
<body>
Wynik:
2011
var d=new Date();
document.write(d.getFullYear());
</script>
</body>
</html>
10
4. Obiekt math
Gdy potrzebujemy wykonać bardziej skomplikowane
operacje matematyczne poza tymi, które umożliwiają
operatory arytmetyczne, korzystamy ze stałych i funkcji
obiektu math.
Przykładowo, gdy chcemy wylosować jakąś liczbę, użyć
stałej pi lub obliczyć pierwiastek kwadratowy z jakiejś
liczby:
var liczba=Math.random();
var x=Math.PI;
var y=Math.sqrt(16);
Dalsze przykłady:
11
4. Obiekt math
Zaokrąglenie liczby
document.write(Math.round(4.7));
Wynik:
5
Wyznaczenie liczby losowej zawartej między 0 i 1.
document.write(Math.random()); //Wynik np. 0.24470329183658362
Wyznaczenie liczby losowej zawartej między 0 i 10.
Tutaj używamy metod: floor () i random().
document.write(Math.floor(Math.random()*11));
Wynik:
Np. 5
12
5. Obiekt number
Składnia: tworzenie obiektu number:
var value= new Number(liczba);
Korzystanie z metod i właściwości:
Number.wlasciwosc|metoda
Obiekty i wartości liczbowe są wewnętrznie
definiowane jako 64-bitowe.
Liczby możemy zapisywać z wykładnikiem:
1e6 = 1*10^6
1e-4 = 1*10^(-4)
Liczby w zapisie dziesiętnym, szesnastkowym i
ósemkowym:
dziesiętne nie mogą zaczynać się od zer wiodących,
wartości szesnastkowe zaczynamy od 0x lub 0X,
w postaci ósemkowej zaczynamy od zera wiodącego i
używamy cyfr 0-7.
13
5. Obiekt number
Zamiana łańcuchów na liczby:
parseInt(łańcuch[, podstawa])
parseFloat(łańcuch[, podstawa])
podstawa systemu liczbowego 10, 16 lub 8 - ale liczba
całkowita
parseInt("010") = 8
parseInt("010",10) = 10
parseInt("F2") = NaN
parseInt("F2",16) = 242
Zamiana liczb na łańcuchy:
dolarow=2500;
dolarow.toString(); // wynik="2500"
14
5. Obiekt number
Parametr do określenia systemu liczbowego:
Gdy wartość nie jest liczbą:
Not a Number // NaN
funkcja .isNaN(wartość) zwraca true gdy wartość nie
jest liczbą i false gdy jest.
Właściwości.
MAX_VALUE MIN_VALUE NaN NEGATIVE_INFINITY
POSITIVE_INFINITY prototype
najmniejsza wartość np.: 2.22E-308 największa 1.79E+308
Metody
toString()
15
6. Obiekt String
Znaki specjalne wewnątrz łańcuchów:
\" podwójny cudzysłów
\' pojedynczy cudzysłów (apostrof)
\\ ukośnik lewy
\b backspace
\t znacznik tabulacji
\n znak nowej linii
\r znak powrotu karetki
\f znak przewinięcia strony
Składnia: tworzenie obiektu string:
var napis=new String("łańcuch znaków");
Korzystanie z metod i wlaściwości:
string.właściwość|metoda //patrz plik Word’owy
16
JavaScript – Zdarzenia elementów HTML
1. Zdarzenia
Zdarzenia są to akcje podejmowane przez
przeglądarkę w odpowiedzi na ruchy myszki,
klawiatury, bądź ogólnie - na zmianę stanu dokumentu
w danym momencie (np. załadowanie się obrazka, kodu
strony).
Dzięki JavaScript możemy kontrolować większość
zdarzeń jakie zachodzą na naszych stronach. Najczęściej
wykorzystywane zdarzenia przedstawione są w pliku
Word’owym JavaScript.
17
http://www.w3schools.com/htmldom/default.asp
JavaScript – Zdarzenia elementów HTML
2. HTML DOM
DOM to skrót od Document Object Model - czyli model
obiektów dokumentu. Jest to tzw. interfejs programowania
dla elementów HTML jakie mogą pojawiać się na stronach.
HTML DOM to standard określający sposoby dostępu oraz
zmiany zawartości, właściwości, parametrów poszczególnych
elementów HTML. Dzięki temu do zawartości stron HTML
mogą dostawać się wszystkie typy przeglądarek i języków
programowania.
Każdy z elementów HTML ma określone właściwości i
metody, które są zaimplementowane również w JavaScript.
Nie ma sensu zamieszczanie tutaj pełnego opisu tych
elementów. Wszystkie potrzebne informacje można znaleźć
pod adresami:
http://www.w3schools.com/htmldom/default.asp
http://www.w3schools.com/js/js_obj_htmldom.asp
18

technologie internetowe – wykład 8

Transkrypt

Podobne dokumenty

JavaScript - Wste.szczecin.pl

Hasło javascript

Generate PDF

.NET Developer na froncie

Web Developer

ELEMENTY ANALIZY ALGORYTMÓW 1. Każdy algorytm powinien

javascript developer

8 Marca - Międzynarodowy Dzień Kobiet

Senior Web Developer

specj. Technologie sieciowe i bazy danych