Programowanie w językach skryptowych

Prezentacja na temat: "Programowanie w językach skryptowych"— Zapis prezentacji:

1 Programowanie w językach skryptowych
Wykład 2: JavaScript – programowanie oparte o funkcje Materiały źródłowe: Shelley Powers: "JavaScript. Wprowadzenie" Stoyan Stefanov "JavaScript. Programowanie obiektowe" Opracował: dr inż. Wojciech Bieniecki Instytut Informatyki Stosowanej Politechnika Łódzka

2 JavaScript JavaScript jest to język skryptowy dla dokumentów internetowych (od 1995). Skrypty napisane za pomocą JavaScript mogą być umieszczane na stronach WWW. Dzięki temu językowi można np. uzależnić wykonanie jakiejś instrukcji od reakcji osoby przeglądającej daną stronę. JavaScript ma też szerokie zastosowanie w tworzeniu formularzy. Umożliwia wnikanie w ich treści i sprawdzanie poprawności wypełnienia poszczególnych pól czy zaznaczenie odpowiednich opcji. Uwaga: nie istnieje standard JavaScript, tylko określona specyfikacja. Pisanie programów wymaga przetestowania działania skryptu na różnych przeglądarkach Tworzeniem specyfikacji zajmuje się ECMA (European Computer Manufacturers Association)

3 Cechy języka JavaScript
Jest językiem prototypowym (odmiana obiektowości) Jest językiem dynamicznym Jest językiem słabo typowanym Posiada też cechy języka funkcyjnego Rozróżnia wielkość liter (jest case-sensitive). Posiada konstrukcje sterujące identyczne z tymi znanymi z języków Java i C++

4 Obiektowy model dokumentu
Sposób przedstawienia obiektów, z których składa się dokument i relacji między nimi. DOM W3C służy głównie do przedstawienia dokumentów HTML oraz XML. Używają go języki CSS i JavaScript do operowania na dokumentach. Wg W3C DOM dokument to drzewiasty zbiór węzłów. Węzeł może być elementem, ciągiem tekstu, komentarzem, itp. Każdy węzeł może mieć jednego rodzica, dowolną ilość braci i, jeśli jest elementem, dowolną ilość dzieci.

5 DOM i BOM BOM (Browser Object Model) to zbiór obiektów dających dostęp do przeglądarki i ekranu. Najważniejszy obiekt to window – obiekt globalny. Wszystkie zmienne globalne stają się polami tego obiektu. Tworząc nową zmienną globalną zm, tak naprawdę tworzy się zmienną window.zm. Obiekt window zawiera w sobie następujące obiekty navigator – obiekt przechowujący informacje o przeglądarce i jej możliwościach location – obiekt przechowujący informację o adresie URL aktualnie załadowanej strony history – obiekt dający dostęp do stron odwiedzanych wcześniej w ramach tej samej sesji przeglądarki, frames – przechowuje zbiór ramek z bieżącej strony (iframes) screen – zawiera informacje na temat ustawień monitora (rozdzielczości, głębi kolorów) oraz o rozmiarze okna przeglądarki document – obiekt związany z aktualnie załadowanym dokumentem. Zawiera w sobie obiekty z DOM Pola i metody DOM umożliwiają dostęp i modyfikację wszystkich elementów strony

6 Przykłady użycia BOM Przeglądarka – navigator
navigator.appName – nazwa przeglądarki navigator.platform – system operacyjny navigator.language – język przeglądarki Okno przeglądarki – window window.status="Wciśnij mnie" – zmiana paska statusu window.print() – wydrukowanie zawartości okienka window.close() – zamknięcie okienka przeglądarki window.frames["menu"] – odwołanie się do ramki o nazwie menu. window.history.back() – przejście do poprzedniej strony window.outerwidth – szerokość okienka w pixelach Dokument – czyli plik HTML – document document.lastModified() – zwraca datę ostatniej modyfikacji document.images["muzyka"] – odwołanie do obrazka o nazwie muzyka document.write("<B>"+document.lastModified()+"</B>") – wypisanie daty modyfikacji document.location.href="index2.html" – załadowanie nowej strony

7 Data ostatniej modyfikacji
Ten skrypt możemy umieszczać w każdym pliku HTML. Odczytuje on odpowiednie atrybuty pliku HTML i wyświetla datę. Ustawienia monitora Ten skrypt bada ustawienia rozdzielczości ekranu i ilość kolorów

8 Pozycja pliku w przeglądarce
Skrypt ten pobiera adres URL załadowanego dokumentu HTML. W tym przykładzie adres ten jest wyświetlany w okienku formularza, ale skrypt ten może zabezpieczać przed uruchomieniem strony po jej ściągnięciu na dysk lokalny (musimy sprawdzić, czy plik rzeczywiście jest tam, gdzie powinien).

9 Pora dnia

10 Umieszczanie skryptów JS:
<HTML> <BODY> <SCRIPT type="text/javascript"> document.write("<B>Ten tekst został napisany dzięki JavaScript</B>") </SCRIPT> Ten zaś został napisany w HTML-u </BODY> </HTML> <SCRIPT type="text/javascript" src="programik.js"> </SCRIPT> znacznik <script> możemy umieszczać wielokrotnie w dowolnym miejscu pliku HTML (najczęściej w sekcji HEAD) kod źródłowy skryptu można umieścić w osobnym pliku z rozszerzeniem .js Uwaga: skrypt wykonuje się od razu po załadowaniu dokumentu!

11 Umieszczanie skryptów JS:
<SCRIPT type="text/javascript"> //To jest zalecany sposób umieszczania skryptu </SCRIPT> <SCRIPT language="JavaScript"> //Sposób niezalecany </SCRIPT> <SCRIPT type="text/javascript" language="JavaScript1.5"> /*zadeklarowanie wykorzystywanej wersji JS - tutaj deklarujemy standard ECMAScript 3, czyli inaczej JavaScript tak informujemy przeglądarkę, że ma uruchamiać skrypt tylko jeśli obsługuje tą wersję*/ </SCRIPT>

12 JS i stare przeglądarki
Starsze przeglądarki mogą sobie nie radzić z JS - dlatego stosuje się sztuczkę <script type="text/javascript"> <!-- var zmienna="Java Script"; alert("Witaj"+zmienna); //--> </script> stara przeglądarka nie rozpozna znacznika <script> ale zobaczy komentarze <!--, więc zignoruje cały kod między tymi znacznikami. nowa przeglądarka zobaczy znak komentarza <!-- ale dla JS znak ten oznacza komentarz tylko w 1 linii, więc tę linię zignoruje, ale wykona kod JS będący w linijkach niżej. Zamykający znacznik komentarza --> jest dodatkowo komentarzem JS (//), bo inaczej byłby błędem dla JS, a musi on być po to, aby stara przeglądarka rozpoznała gdzie kończy się blok komentarza, który pomija.

13 Zmienne Zmienne używamy podobnie jak w innych językach skryptowych.
<HTML> <HEAD></HEAD> <BODY> <SCRIPT language="JavaScript"> imie="Jacek "; nazwisko="Kowalski"; tekst=imie+nazwisko; document.write(tekst) </SCRIPT> </BODY> </HTML> Nie musimy ich wcześniej definiować ani przydzielać konkretnego typu, jednak jest to możliwe. Typy zmiennych: boolean byte char double float int var Nazwy zmiennych Pierwsza litera nazwy musi być literą, podkreśleniem lub znakiem dolara. Nie używamy w nazwach spacji Wielkość znaków w nazwach ma znaczenie. Zaleca się korzystać w nazwach tylko z małych liter. Nie wolno korzystać ze słów zastrzeżonych - na przykład słowa var

14 Działania na zmiennych
<script type="text/javascript"> var sek = 60; var min = 60; var godz = 24; var sekundy_w_dniu = sek * min * godz; var napis1 = "1 dzień składa się z:"; var napis2 = " sekund"; var wynik = napis1 + sekundy_w_dniu + napis2; alert(wynik); </script> Obliczanie ilości sekund w dobie to proste mnożenie (inne to analogicznie +,-,/) . W zmiennej wynik znak + pozwala na łączenie ciągów znakowych (konkatenacja)

15 Konstrukcje językowe - instrukcje warunkowe

16 Konstrukcje językowe -instrukcje warunkowe

17 Pętle Inne pętle – analogicznie jak w języku C, Java, PHP
<P>Przykład: wypisywanie ciągu potęg liczby 2 w tabelce <script> document.write("<TABLE><TR>");//Tu tworzymy początek tabeli liczba=1; licznik=1; for(licznik;licznik<=10;licznik++) { liczba*=2;//Liczbę podwajamy document.write("<TD>"+liczba+"</TD>"); } document.write("</TR></TABLE>"); </script> Inne pętle – analogicznie jak w języku C, Java, PHP while(warunek) { ciąg_wyrażeń; } do { ciąg_wyrażen; }while(warunek);

18 Okienka dialogowe: alert – okienko informacyjne (message box)
<FORM> <INPUT type="button" value="Pokaż adres strony„ onClick="alert('Jesteś na stronie:'+document.URL);"> <P> <INPUT type="button" value="Zamknij to okno" onClick=" if (confirm('Czy na pewno tego chcesz?')) { window.close() }";> <P> <INPUT type="button" value="Połącz się...„ onClick="adres=prompt('Wprowadź adres strony',' if (adres!=null) { location.href=adres }"> </FORM> alert – okienko informacyjne (message box) confirm – okienko pytające (zwraca true lub false) prompt – wprowadzanie danych (input box)

19 Obsługa zdarzeń Zdarzenia związane z myszą:
<a href="doc.html" onMouseOver="document.status='Clik Me'; return true"> Dokument </a> Zdarzenia związane z myszą: onClick Kliknięcie myszą onDblClick Podwójne kliknięcie onMouseDown Wciśnięcie przycisku onMouseUp Puszczenie przycisku onMouseMove Ruch myszy nad obiektem onMouseOver Wjechanie myszy nad obiekt onMouseOut Zjechanie myszy z obiektu Zdarzenia związane z klawiaturą: onKeyDown Wciśnięcie przycisku onKeyUp Puszczenie przycisku onKeyPress Naciśnięcie i zwolnienie przycisku

20 Zdarzenie onClick Umożliwia korzystanie z przycisku BUTTON
<INPUT TYPE="BUTTON" OnClick="document.location.href=' VALUE="Powrot do strony glownej KIS"> Ostrzeżenie o działaniu linku <A HREF=" OnClick="alert('Dokument otworzy sie w nowym okienku')" target="_blank"> Strona główna</a> Potwierdzenie kliknięcia linku <A HREF=" OnClick="return confirm('czy chcesz wykonać tę operację?')" > Usun plik</a>

21 Metody rejestrowania zdarzeń
Rejestrowanie zdarzenia inline polega na określeniu zdarzenia wewnątrz znacznika. <a href="strona.html" onclick="alert(' Kliknąłeś! ')">kliknij</a> Wady: Mieszanie skryptów JS z kodem HTML (podobnie jak wpisane CSS) rozwiązanie nie jest obiektowe – wewnątrz funkcji nie mamy dostępu do this czyli właściwości obiektu, na którym wywołano zdarzenie

22 Metody rejestrowania zdarzeń
Rejestrowanie zdarzenia w sekcji skryptu var element = document.getElementById('Przycisk'); element.onclick = funkcja1; element2.onmouseover = funkcja2; Przykład 1 – z zastosowaniem funkcji nazwanej <input type="button" id="Przycisk" value="kliknij" /> <script type="text/javascript">     function wypisz() {         alert('zostałem klikniety!');     }     document.getElementById('Przycisk').onclick = wypisz </script> Przykład 2 – z zastosowaniem funkcji anonimowej document.getElementById('Przycisk').onclick = function() { alert('zostałem klikniety!'); }

23 Metody rejestrowania zdarzeń
Rejestrowanie zdarzenia w sekcji skryptu dla wielu obiektów var akapity = document.getElementsByTagName('p'); for (i=0; i<akapity.length; i++) {     akapity[i].onclick = function () {         this.style.color = 'red';     } } Poza rejestrowaniem zdarzeń dla elementów, możemy też takie zdarzenia wywołać z innego miejsca w JS document.getElementById('Akapit1').onclick()

24 Metody rejestrowania zdarzeń
Rejestrowanie zdarzenia z użyciem addEventListener. W ten sposób możemy podpiąć kilka funkcji obsługujących zdarzenie var element = document.getElementById('Przycisk'); element.addEventListener('click', startDragDrop, false); element.addEventListener('click', wypiszCos, false); element.addEventListener('click', function() {this.style.color = 'red'; }, false); Ta metoda pozwala również usuwać obsługę zdarzeń przy pomocy removeEventListener element.removeEventListener('click', startDragDrop, false); element.removeEventListener('click', wypiszCos, false); Metoda removeEventListener nie będzie działała dla funkcji anonimowej

25 Rozszerzona obsługa zdarzeń
Polega na pobraniu wartości pseudoparametru funkcji obsługi zdarzenia document.getElementById('Przycisk').onclick = function(evt) {     alert('Typ zdarzenia: ' + evt.type); } SrcElement Element, który wywołał zdarzenie type Typ zdarzenia returnValue Określa, czy zdarzenie zostało odwołane cancelBubble Może odwołać kaskadowe wywołanie zdarzeń clientX, clientY Współrzędne kursora myszy (względem okna) offsetX, offsetY Współrzędne kursora myszy (względem elementu) button Czy wciśnięto jakiś przycisk myszy? altKey, ctrlKey, shiftKey Czy trzymano przyciski Alt, Ctrl lub Shift keyCode Wartość unicode wciśniętego klawisza Wstrzymanie domyślnej akcji element.addEventListener('click',function (e) {     alert('Ten link nigdzie nie przeniesie.');     e.preventDefault(); },false);

26 Bąbelki - Kaskadowe wykonywanie zdarzeń
Załóżmy istnienie zagnieżdżonych bloków <div style="..." id="blok1">1     <div style="..." id="blok2">2             <div style="..." id="blok3">3</div>     </div> </div> <script type="text/javascript"> document.getElementById('blok1').onclick = function() { alert('Kliknąłeś mnie!')}; </script> Kliknięcie w element wewnętrzny powoduje po wykonaniu zdarzenia przesłanie go do elementu otaczającego (tu zawsze wywoła się alert) Wyłączenie tego zjawiska realizujemy poprzez funkcję stopPropagation function stopBubble(e) {   if (!e) var e = window.event;   e.cancelBubble = true;   if (e.stopPropagation) e.stopPropagation(); } document.getElementById('blok31').onclick = function() {  alert('Kliknąłeś mnie!')} document.getElementById('blok32').onclick = function(e){ stopBubble(e);} document.getElementById('blok33').onclick =

27 Przykłady: Pole tekstowe Szukaj
<FORM METHOD="POST"> <input type="text" name="search" value="Szukaj..." onblur="if(this.value=='') this.value='Szukaj...';" onfocus="if(this.value=='Szukaj...') this.value='';"/> <input type="submit" VALUE="Szukaj!"> </FORM> JS przez zdarzenia onBlur oraz onFocus powoduje zmianę atrybut value pola typu input. W momencie kliknięcia w pole tekstowe sprawdzane jest czy wartość to "Szukaj..." (onfocus) Jeśli tak to zmieniane jest to na puste. W momencie ponownego kliknięcia gdzieś na stronie (poza polem tekstowym) sprawdzane jest czy pole ma value puste - jeśli tak to ustawiane jest ono na "Szukaj..." .

28 Zdarzenie onSubmit <FORM action="index.html" method="POST" id="formularz" onSubmit="return waliduj();"> ... Tu występują pola formularza <INPUT type="submit" value="Wyślij"> </FORM> W ten sposób uruchamiamy funkcję waliduj() przed wysłaniem danych. Jeżeli zwróci ona true to formularz zostanie wysłany

29 Formularz – quiz <script type="text/javascript"> <!--
function obslugaFormularza() { var punkty = 0; if (window.document.quiz.pytanie1.checked == true){ punkty = punkty+1; } else { window.document.quiz.pytanie1.checked = true; punkty = punkty-1; } if (window.document.quiz.pytanie2.checked == true){ window.document.quiz.pytanie2.checked = true; if (window.document.quiz.pytanie3.checked == false){ window.document.quiz.pytanie3.checked = false; alert("Zdobyles "+punkty+ "punktów na 3 możliwe! Poprawne odpowiedzi zostaly przedstawione na ekranie!"); //--> </script>

30 Formularz - quiz <form name="quiz">
<input type="checkbox" name="pytanie1"/>2+2 wynosi 4<br/> <input type="checkbox" name="pytanie2"/>To jest Kurs JavaScript<br/> <input type="checkbox" name="pytanie3"/>Maciek to imię żeńskie<br/> <input type="submit" value="Go!" onclick="obslugaFormularza(); return false;" /> </form>

31 Instrukcje warunkowe Operatory:
godz=(prompt("ile godzin spędzasz na czacie?")); switch(godz) { case 0: napis="Nie wiesz co to jest?"; break; case 1: napis="To w zupełności wystarczy."; break; case 2: napis="Jesteś maniakiem."; break; default: napis="Powinieneś się leczyć"; break; } Operatory: < - mniejsze niż > -większe niż <= >= -mniejsze lub równe == - równe != - różne && - koniunkcja || - alternatywa ! - negacja

32 jako reakcja na zdarzenie
Tablice i funkcje <SCRIPT language="JavaScript"> function sortuj() { wyraz=new Array(); wyraz[0]=document.forms["wyrazy"].wyr1.value; wyraz[1]=document.forms["wyrazy"].wyr2.value; wyraz[2]=document.forms["wyrazy"].wyr3.value; wyraz.sort(); alfab=wyraz[0]+" "+wyraz[1]+" "+wyraz[2]; document.forms["wyrazy"].posortowane.value=alfab; } </SCRIPT> Tak definiujemy funkcję Tak definiujemy Indeksujemy od 0 tablicę <FORM name="wyrazy"> Wpisz w te pola jakieś wyrazy.<BR> <INPUT type="text" size="10" name="wyr1"> <INPUT type="text" size="10" name="wyr2"> <INPUT type="text" size="10" name="wyr3"> <P><INPUT type="button" value="Gotowe" onClick="sortuj()"> <P>Wyrazy te w kolejności alfabetycznej:<BR> <INPUT type="text" size="50" name="posortowane"> </FORM> Wywołanie funkcji jako reakcja na zdarzenie

33 Formularze i tablice asocjacyjne
<script type="text/javascript"> <!-- var ksiazka = new Array(); ksiazka["puste"] = "Wybierz osobę..."; ksiazka["Czesław"] = " "; ksiazka["Gienek"] = " "; ksiazka["Marianna"] = " "; function pokazNumer(tablica_z_ksiazka,osoba) { window.document.formularz.numer.value = tablica_z_ksiazka[osoba]; } //--> </script>

34 Formularze i tablice asocjacyjne
<form name="formularz"> Osoba :<br/> <select onchange="pokazNumer(ksiazka,this.options[this.selectedIndex].value);"> <option value="puste">--Wybierz osobę--</option> <option value="Czesław">Czesiek</option> <option value="Gienek">Gienio</option> <option value="Marianna">Marianna</option> </select> <br/>NUMER :<br/> <input type="text" name="numer" value="Wybierz osobę..."/> </form>

35 Sposoby definiowania funkcji
Funkcje deklaratywne function nazwa_funkcji(parametr1, parametr2, ,parametrn) { instrukcje funkcji } Funkcja deklaratywna jest analizowana składniowo tylko raz kiedy strona jest ładowana a wynik tej analizy jest wykorzystywany za każdym razem, gdy funkcja jest wywoływana. Funkcja posiada nazwę pod którą jest dostępna. Funkcje anonimowe var zm = new Function("par1", "par2", ,"parn", "cialo funkcji"); W JS funkcje są obiektami. Mogą być tworzone za pomocą konstruktora. Funkcja taka jest przetwarzana przez analizator składniowy za każdym razem, kiedy jest wywoływana. Dlatego też zawartość ciała funkcji może być dynamiczna

36 Funkcja anonimowa - przykład
<!doctype HTML> <HTML> <body> <script type="text/JavaScript"> var func = prompt("Wprowadź ciało funkcji"); var x = prompt("Wprowadź wartość argumentu x"); var y = prompt("Wprowadź wartość argumentu y"); var op = new Function("x", "y", func); var wynik = op(x, y); alert("wynikiem jest wartość " + wynik); </script> </body> </html> Nie poleca się zezwalania odwiedzającym strony internetowe na definiowanie własnych funkcji na naszych stronach.

37 Literały funkcji var zm = function(par1, par2, ,parn) { instrukcje funkcji } Literały funkcji (inaczej wyrażenia funkcji ang. function expressions) są utworzone wewnątrz innej instrukcji jako część wyrażenia. Są one przetwarzane przez analizator składniowy tylko raz, są statyczne, mogą otrzymać nazwę (ale nie muszą). Jeśli funkcja zostanie nazwana, jej nazwa jest dostępna tylko wewnątrz bloku, w którym jest zdefiniowana. function f1(x, y, z) { alert(z(x,y)); } f1(3, 2, function(x,y){ return x*y });

38 Funkcje zwrotne Istnieją metody zależne od funkcji, które są wywoływane automatycznie w oparciu o jakieś zdarzenie. Dla obiektu Array są to filter, forEach, every, map, some. Przykłady zastosowania: every – funkcja przegląda każdy element tablicy wywołując na nim funkcję zwrotną, dopóki funkcja nie zwróci false. some – zwróci prawdę, jeśli dla chociaż jednego z elementów funkcja zwrotna da true. filter – tworzy tablicę składającą się z elementów, dla których funkcja zwrotna daje true. var czyLiczba = function(x) { var RegExp = /^(-)?(\d+)$/; return String(x).match(RegExp); } var tab1 = [1,2,3,4,5,6,7,8,9,0]; var tab2 = [1,2,3,4,5,6,7,8,9,'zero']; document.writeln(tab1.every(czyLiczba)); // true document.writeln(tab2.every(czyLiczba)); // false document.writeln(tab2.some(czyLiczba)); // true document.writeln(tab2.filter(czyLiczba)); // [1,2,3,4,5,6,7,8,9]

39 Funkcje zagnieżdżone i domknięcia
function zewnetrzna(argumenty){ function wewnetrzna(argumenty){ Instrukcje funkcji wewnetrznej } Funkcja wewnętrzna może wykorzystywać niektóre argumenty funkcji zewnętrznej oraz jej zmienne. Funkcja zewnętrzna może też zwracać obiekt funkcji wewnętrznej function komunikat(tekst1){ var wykrzyknik = "!"; function dajTekst(tekst2){ return tekst1 + " " + tekst2 + wykrzyknik; } return dajTekst; var zm1 = komunikat("Witaj"); //utworzenie obiektu funkcji wewnętrznej var zm2 = zm1("świecie"); // fun. wewn. ma dostęp do zm. fun. zewn. alert(zm2); var zm3 = zm1("Studencie!"); // fun. wewn. nadal ma dostęp do zm. fun. zewn. alert(zm3); Zwrócenie literału funkcji utworzonego jako obiekt wewnętrzny i przypisanie go do zmiennej nazywa się domknięciem (ang. closure)

40 Zmienna liczba parametrów
Funkcje można wywoływać z dowolną liczbą argumentów, a nie z taką, z jaką zadeklarowano, że przyjmuje. W chwili wywołania w funkcji dostępny jest obiekt arguments, który zawiera wszystkie parametry wywołania. Jeżeli funkcja zostanie wywołana z mniejszą ilością argumentów niż zadeklarowano, to przyjmą one wartość null function dodaj(a, b) { alert(arguments.length); return a + b; } dodaj(2, 3, 4, 5); //wyświetli 4 (bo 4 argumenty), zwróci wynik 5 dodaj(1); //wyświetli 1, zwróci wynik NaN (bo 1 + null == NaN) function dodaj_wiele() { var wynik = 0; for(i in arguments) { wynik += arguments[i]; } return wynik; dodaj_wiele(1, 2, 3, 4, 5); //zwróci 15

41 Definiowanie i używanie obiektów
Przy definiowaniu obiektów JavaScript używa się notacji JSON. Można wtedy pominąć cudzysłowie przy kluczu. var obj = { imie: 'Adam', nazwisko: 'Kwiatkowski', technologie: ['ExtJS', 'JavaScript', 'HTML5'] }; Dostęp do pół obiektów uzyskuje się przy pomocy operatora kropki lub indeksowania jak przy tablicy asocjacyjnej. alert(obj.imie); alert(obj['imie']); Po elementach obiektu można iterować używając for var obiekt = { imie: 'Anna', nazwisko: 'Nowak', wydzial: 'EEIA' }; for(pole in obiekt) { alert(pole); } //Wyświetli: "imie", "nazwisko", "wydzial" alert(obiekt[pole]); } //Wyświetli: "Anna", "Nowak", "EEIA"

42 Właściwości obiektów JS
Każdy typ zmiennych jest obiektem Funkcja również jest obiektem Wbudowane w JavaScript typy to: Object, Array, Function, Boolean, Number, String, Math, Date, RegExp oraz Error W języku większość typów jest typami referencyjnymi. Typami prostymi są: Number, Boolean i String W obiektach można definiować metody Dostęp do metod odbywa się tak samo jak dostęp do zwykłych pól: przy użyciu notacji z kropką lub notacji nawiasowej. Metody wywołuje się jak inne funkcje. W języku występuje słowo kluczowe this, które wskazuje na obiekt w kontekście którego została wywołana funkcja.

43 Metody Każda funkcja, jako że jest obiektem, zawiera też metody.
Jedną z najważniejszych jest metoda call. Przyjmuje ona jako pierwszy argument obiekt, na rzecz którego ma zostać wywołana. Po pierwszym parametrze, podajemy argumenty, które normalnie przyjmuje funkcja, na rzecz której wywołano metodę call. var obj = { nazwa: 'obiekt', wyswietl: function() { alert("Jestem " + this.nazwa); } var fun = function(arg) { alert("Nazwa: " + this.nazwa + ", arg:" + arg); obj.wyswietl(); //wyświetli "Jestem obiekt" fun.call(obj, "parametr"); //wyświetli "Nazwa: obiekt, arg: parametr„

44 Konstruktory W JavaScript obiekty można tworzyć przy użyciu funkcji nazwanych konstruktorami. Pozwalają one tworzyć obiekty własnych typów. Przy pomocy konstruktorów można tworzyć własne „klasy”, mimo, że język nie definiuje słowa kluczowego class. Konstruktor wywołuje się przy pomocy operatora new. function Osoba(imie, nazwisko, wiek) { this.imie = imie; this.nazwisko = nazwisko; this.wiek = wiek; this.przedstawSie = function(ktos) { alert('Cześć ' + ktos + ', nazywam się ' + this.imie + ' ' + this.nazwisko + ' i mam ' + this.wiek + ' lat!'); }; } var osoba = new Osoba("Jan", "Kowalski", 30); osoba.przedstawSie("Adam"); W czasie gdy obiekt jest tworzony, otrzymuje on specjalne pole o nazwie constructor. Zawiera ono referencję do konstruktora. Można więc za jego pomocą tworzyć nowe obiekty danego typu. var osoba2 = new osoba.constructor("Adam", "Małysz", 35);

45 Instanceof i typeof Operator instanceof służy do sprawdzania, czy dany obiekt został utworzony danym konstruktorem. Operator typeof, zwraca typ obiektu. Operator dla prawie wszystkich typów zwraca wartość „object”, prócz dla Number, String, Boolean, Function i wartości undefined. osoba instanceof Object; //zwróci true osoba instanceof Osoba; //zwróci true osoba instanceof Array; //zwróci false typeof osoba; //zwróci "object" var arr = [1, 2, 3]; arr instanceof Array; //zwróci true typeof arr; //zwróci "object" typeof 2; //zwróci "number"

46 Prototypy Obiekty funkcyjne posiadają pole prototype.
Tworzone jest ono automatycznie w czasie definicji funkcji. Domyślną wartością jest pusty obiekt. Dodanie nowych pól i metod do prototypu nie wpłynie na działanie funkcji. Zostaną one użyte tylko podczas wywołania funkcji jako konstruktora i będą dodane do nowo tworzonego obiektu function Student(imie, nazwisko, indeks) { this.imie = imie; this.nazwisko = nazwisko; this.indeks = indeks; } Student.prototype.mow = function() { alert("Cześć, jestem " + this.imie); Student.prototype.ocena = 5; var s = new Student("Jan", "Kowalski", 12345); s.mow(); //wyświetli "Cześć, jestem Jan" alert(s.ocena); //wyświetli 5

47 Prototypy Dzięki prototypom możliwe jest dodawanie nowych funkcjonalności do typów wbudowanych. Przykład: Dodać do obiektów typu Array możliwość sprawdzenia wystąpienia elementu. Array.prototype.inArray = function(element) { for(var i in this) { if(this[i] === element) return true; } return false; var tab = [1, 2, 3]; tab.inArray(2); //zwróci true tab.inArray(5); //zwróci false Każdy obiekt posiada metodę isPrototypeOf(). Zwraca ona informację o tym, czy obiekt jest prototypem innego. Array.prototype.isPrototypeOf(tab); //zwróci true

48 Dziedziczenie w JS W JS nie występuje słowo kluczowe class, mimo to można tworzyć własne typy przy pomocy konstruktorów i prototypów. Standardowym sposobem implementacji dziedziczenia, opisanym w standardzie ECMAScript jest tworzenie łańcucha prototypów. Polega to na przypisywaniu obiektu klasy bazowej do prototypu klasy dziedziczącej. function Figura() { this.nazwa = 'figura'; this.toString = function() {return this.nazwa; } } function Figura2D() { this.nazwa = 'figura2D'; Figura2D.prototype = new Figura(); Figura2D.prototype.constructor = Figura2D; function Trojkat(bok, wysokosc) { this.nazwa = 'trojkat'; this.bok = bok; this.wysokosc = wysokosc; this.pobierzPole = function() { return this.bok * this.wysokosc * 0.5; Trojkat.prototype = new Figura2D(); Trojkat.prototype.constructor = Trojkat;

49 Pożyczanie konstruktora
Jeżeli istnieje potrzeba skopiowania funkcjonalności jakiejś klasy, jednak nie chcemy jej włączać do hierarchii dziedziczenia, można skorzystać z pożyczenia konstruktora. W konstruktorze klasy, która ma odziedziczyć funkcjonalność, należy wywołać konstruktor innej klasy. Tak rozszerzona klasa nie będzie instancją klasy od której pożyczyła funkcjonalność, będzie jednak posiadała jej pola i metody. Można wykonać pożyczanie konstruktora od wielu klas jednocześnie. function Figura() { this.nazwa = 'figura'; this.toString = function() { return this.nazwa; } } function Figura2D() { Figura.call(this); this.nazwa = 'figura2D'; var f = new Figura2D(); f.toString(); //zwróci figura2D f instanceof Figura2D //zwróci true f instanceof Figura //zwróci false – nie ma dziedziczenia