Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Programowanie w językach skryptowych Wykład 2: JavaScript – programowanie oparte o funkcje Opracował: dr inż. Wojciech Bieniecki

Podobne prezentacje


Prezentacja na temat: "Programowanie w językach skryptowych Wykład 2: JavaScript – programowanie oparte o funkcje Opracował: dr inż. Wojciech Bieniecki"— Zapis prezentacji:

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

2 JavaScript JavaScript jest to język skryptowy dla dokumentów internetowych (od 1995). 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) 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.

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 4 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 navigator.appName – nazwa przeglądarki navigator.platform – system operacyjny navigator.language – język przeglądarki 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 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 Okno przeglądarki – window Dokument – czyli plik HTML – document document.lastModified() – zwraca datę ostatniej modyfikacji document.images["muzyka"] – odwołanie do obrazka o nazwie muzyka document.write(" "+document.lastModified()+" ") – wypisanie daty modyfikacji document.location.href="index2.html" – załadowanie nowej strony document.lastModified() – zwraca datę ostatniej modyfikacji document.images["muzyka"] – odwołanie do obrazka o nazwie muzyka document.write(" "+document.lastModified()+" ") – 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: document.write(" Ten tekst został napisany dzięki JavaScript ") Ten zaś został napisany w HTML-u -znacznik 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: //To jest zalecany sposób umieszczania skryptu //Sposób niezalecany /*zadeklarowanie wykorzystywanej wersji JS - tutaj deklarujemy standard ECMAScript 3, czyli inaczej JavaScript 1.5 - tak informujemy przeglądarkę, że ma uruchamiać skrypt tylko jeśli obsługuje tą wersję*/

12 JS i stare przeglądarki nowa przeglądarka zobaczy znak 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 imie="Jacek "; nazwisko="Kowalski"; tekst=imie+nazwisko; document.write(tekst) Zmienne używamy podobnie jak w innych językach skryptowych. Typy zmiennych: boolean byte chardouble floatint var Nazwy zmiennych Pierwsza litera nazwy musi być literą, podkreśleniem lub znakiem dolara. Nie musimy ich wcześniej definiować ani przydzielać konkretnego typu, jednak jest to możliwe. 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 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); 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

17 Pętle Przykład: wypisywanie ciągu potęg liczby 2 w tabelce document.write(" ");//Tu tworzymy początek tabeli liczba=1; licznik=1; for(licznik;licznik "+liczba+" "); } document.write(" "); 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) confirm – okienko pytające (zwraca true lub false) prompt – wprowadzanie danych (input box) alert – okienko informacyjne (message box) confirm – okienko pytające (zwraca true lub false) prompt – wprowadzanie danych (input box)

19 Obsługa zdarzeń Dokument Zdarzenia związane z myszą: onClick Kliknięcie myszą onDblClick Podwójne kliknięcie onMouseDown Wciśnięcie przycisku onMouseUp Puszczenie przycisku onClick Kliknięcie myszą onDblClick Podwójne kliknięcie onMouseDown Wciśnięcie przycisku onMouseUp Puszczenie przycisku Zdarzenia związane z klawiaturą: onKeyDownWciśnięcie przycisku onKeyUpPuszczenie przycisku onKeyPressNaciśnięcie i zwolnienie przycisku onKeyDownWciśnięcie przycisku onKeyUpPuszczenie przycisku onKeyPressNaciśnięcie i zwolnienie przycisku onMouseMoveRuch myszy nad obiektem onMouseOverWjechanie myszy nad obiekt onMouseOutZjechanie myszy z obiektu onMouseMoveRuch myszy nad obiektem onMouseOverWjechanie myszy nad obiekt onMouseOutZjechanie myszy z obiektu

20 Zdarzenie onClick Umożliwia korzystanie z przycisku BUTTON Strona główna Ostrzeżenie o działaniu linku Potwierdzenie kliknięcia linku Usun plik

21 Metody rejestrowania zdarzeń 21 Rejestrowanie zdarzenia inline polega na określeniu zdarzenia wewnątrz znacznika. kliknij kliknij 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ń 22 Rejestrowanie zdarzenia w sekcji skryptu var element = document.getElementById('Przycisk'); element.onclick = funkcja1; element2.onmouseover = funkcja2; var element = document.getElementById('Przycisk'); element.onclick = funkcja1; element2.onmouseover = funkcja2; Przykład 1 – z zastosowaniem funkcji nazwanej function wypisz() { alert('zostałem klikniety!'); } document.getElementById('Przycisk').onclick = wypisz function wypisz() { alert('zostałem klikniety!'); } document.getElementById('Przycisk').onclick = wypisz document.getElementById('Przycisk').onclick = function() { alert('zostałem klikniety!'); } Przykład 2 – z zastosowaniem funkcji anonimowej

23 Metody rejestrowania zdarzeń 23 Rejestrowanie zdarzenia w sekcji skryptu dla wielu obiektów var akapity = document.getElementsByTagName('p'); for (i=0; i { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.pl/1216279/3/slides/slide_22.jpg", "name": "Metody rejestrowania zdarzeń 23 Rejestrowanie zdarzenia w sekcji skryptu dla wielu obiektów var akapity = document.getElementsByTagName( p ); for (i=0; i

24 Metody rejestrowania zdarzeń 24 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); 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); 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ń 25 document.getElementById('Przycisk').onclick = function(evt) { alert('Typ zdarzenia: ' + evt.type); } document.getElementById('Przycisk').onclick = function(evt) { alert('Typ zdarzenia: ' + evt.type); } Polega na pobraniu wartości pseudoparametru funkcji obsługi zdarzenia SrcElementElement, który wywołał zdarzenie typeTyp zdarzenia returnValueOkreśla, czy zdarzenie zostało odwołane cancelBubbleMoże odwołać kaskadowe wywołanie zdarzeń clientX, clientYWspółrzędne kursora myszy (względem okna) offsetX, offsetYWspółrzędne kursora myszy (względem elementu) buttonCzy wciśnięto jakiś przycisk myszy? altKey, ctrlKey, shiftKeyCzy trzymano przyciski Alt, Ctrl lub Shift keyCodeWartość unicode wciśniętego klawisza Wstrzymanie domyślnej akcji element.addEventListener('click',function (e) { alert('Ten link nigdzie nie przeniesie.'); e.preventDefault(); },false); element.addEventListener('click',function (e) { alert('Ten link nigdzie nie przeniesie.'); e.preventDefault(); },false);

26 Bąbelki - Kaskadowe wykonywanie zdarzeń 26 Załóżmy istnienie zagnieżdżonych bloków 1 2 3 document.getElementById('blok1').onclick = function() { alert('Kliknąłeś mnie!')}; 1 2 3 document.getElementById('blok1').onclick = function() { alert('Kliknąłeś mnie!')}; 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(); } 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 = function(e){ stopBubble(e);} document.getElementById('blok31').onclick = function() { alert('Kliknąłeś mnie!')} document.getElementById('blok32').onclick = function(e){ stopBubble(e);} document.getElementById('blok33').onclick = function(e){ stopBubble(e);}

27 Przykłady: Pole tekstowe Szukaj 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

... Tu występują pola formularza 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

30 Formularz - quiz 2+2 wynosi 4 To jest Kurs JavaScript Maciek to imię żeńskie

31 Instrukcje warunkowe 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 < - mniejsze niż > -większe niż = -mniejsze lub równe == - równe != - różne && - koniunkcja || - alternatywa ! - negacja != - różne && - koniunkcja || - alternatywa ! - negacja

32 Wpisz w te pola jakieś wyrazy. Wyrazy te w kolejności alfabetycznej: 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; } Tablice i funkcje Tak definiujemy funkcję Tak definiujemy Indeksujemy od 0 tablicę Wywołanie funkcji jako reakcja na zdarzenie

33 Formularze i tablice asocjacyjne

34 Formularze i tablice asocjacyjne Osoba : --Wybierz osobę-- Czesiek Gienio Marianna NUMER :

35 Sposoby definiowania funkcji 35 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 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 var zm = new Function("par1", "par2",...,"parn", "cialo funkcji");

36 Funkcja anonimowa - przykład 36 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); Nie poleca się zezwalania odwiedzającym strony internetowe na definiowanie własnych funkcji na naszych stronach.

37 Literały funkcji 37 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. function f1(x, y, z) { alert(z(x,y)); } f1(3, 2, function(x,y){ return x*y }); 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.

38 Funkcje zwrotne 38 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: 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] 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.

39 Funkcje zagnieżdżone i domknięcia 39 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 40 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 41 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" for(pole in obiekt) { alert(obiekt[pole]); } //Wyświetli: "Anna", "Nowak", "EEIA"

42 Właściwości obiektów JS 42 Każdy typ zmiennych jest obiektem Wbudowane w JavaScript typy to: Object, Array, Function, Boolean, Number, String, Math, Date, RegExp oraz Error Funkcja również jest obiektem 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 43 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 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.

44 Konstruktory 44 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 45 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 46 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 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 47 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 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 48 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; 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 49 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 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


Pobierz ppt "Programowanie w językach skryptowych Wykład 2: JavaScript – programowanie oparte o funkcje Opracował: dr inż. Wojciech Bieniecki"

Podobne prezentacje


Reklamy Google