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 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 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.

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