Język programowania JavaScript. dr hab. inż. Marek Wojciechowski

Transkrypt

1 Język programowania JavaScript dr hab. inż. Marek Wojciechowski

2 Historia języka JavaScript Opracowany przez firmę Netscape w 1995 roku Brendan Eich strorzył JavaScript w 10 dni Język skryptowy dla przeglądarki Netscape Navigator jako prostsza alternatywa dla apletów Java (Robocze nazwy: Mocha, LiveScript) Serwerowa implementacja dla Netscape Enterprise Server Nie odniosła sukcesu W 1996 Microsoft udostępnia JScript jako port JavaScript Standaryzacja języka pod nazwą ECMAScript (ECMA-262) st Edition, nd Edition (zmiany edycyjne) rd Edition (try/catch, wyrażenia regularne, ) 4th Edition zarzucona (złożoność języka, względy polityczne) th Edition (strict mode, wsparcie JSON) th Edition, ECMAScript Harmony (klasy, moduły) JavaScript, JScript, ActionScript jako implementacje ECMAScript 2

3 Cechy języka JavaScript Łączy programowanie strukturalne, obiektowe i funkcyjne Język skryptowy, interpretowany Uruchamiany w maszynach wirtualnych nazywanych silnikami JavaScript Silniki JavaScript dostępne w przeglądarkach internetowych, ale nie tylko Kompilacja just-in-time w niektórych przeglądarkach Język dynamiczny Dynamiczne typowanie (typ związany z wartością, a nie zmienną) Dynamiczna zmiana właściwości i funkcjonalności obiektów Definiowanie funkcji w trakcie pracy programu Możliwość wykonania kodu dostarczonego jako łańcuch znaków Funkcja eval() Programowanie obiektowe oparte na prototypach Zamiast dziedziczenia opartego na klasach 3

4 Zastosowania JavaScript Przeglądarki WWW Jedna z 3 podstawowych technologii do tworzenia zawartości stron WWW (obok HTML i CSS) Środowisko uruchomieniowe aplikacji zintegrowane z przeglądarką poprzez wtyczkę (plug-in) Rozwiązania serwerowe dla aplikacji WWW Node.js Bazy danych NoSQL JSON jako format danych, JavaScript do zapytań i przetwarzania danych (MongoDB, CouchDB) Inne zastosowania jako wbudowany język skryptowy Rozszerzenia przeglądarek, Adobe Acrobat i Reader, Open Office, Język pośredni dla transkompilatorów nowych języków TypeScript, CoffeeScript, Dart, 4

5 Zastosowania JS na stronach WWW Dynamic HTML (DHTML) Logika programowa dodana do HTML-a Skrypty dokonują interakcji z obiektowym modelem dokumentu (Document Object Model (DOM)) Przykłady zastosowań: Ajax Animacje, gry, odtwarzanie multimediów Walidacja danych wprowadzanych do formularzy Otwieranie dodatkowych okien Logika prezentacji w JavaScript po stronie przeglądarki Logika biznesowa w dowolnej technologii po stronie serwera Żądania HTTP z poziomu JavaScript wywołujące logikę biznesową Modyfikacje strony w przeglądarce poprzez interfejs DOM 5

6 JavaScript a Java Java is to Javascript as car is to carpet Podobieństwa i związki: Składnia obu języków wywodzi się ze składni języka C Standardowa biblioteka JavaScriptu zachowuje konwencje Javy Obiekty Math i Date w Javascript oparte na Math i Date z Java 1.0 Wszystkie słowa kluczowe języka Java były zastrzeżone w pierwszej wersji JavaScript Najważniejsze różnice: Cecha JavaScript Java Typowanie Dynamiczne Statyczne Kompilacja Brak Do bajtkodu Obiektowość Prototypy Klasy Programowanie funkcyjne Od początku Lambdy od Java 8 Składnia Specyficzne operatory i instrukcje sterujące 6

7 Typy danych w JavaScript Typy proste Liczba (number) 64-bity, zmiennoprzecinkowe (IEEE 754 standard) np. 2, -3, 3.14, 2.9e8, 0xFF, 0b1011, 0o67, Infinity, -Infinity, NaN Łańcuchy znaków (string) ograniczniki: " ", ' '; znaki specjalne: \n, \t, \\, \', \"" np. 'Test stringa\n', "Drugi 'string'." Wartości logiczne (boolean): true, false Struktury danych Tablice, np. [3, 5, -3] Obiekty, np. { marka: 'Opel', nrrej: 'PO65947' ; Specjalne wartości null (typu object, przez pomyłkę ) przypisywana wartość oznaczająca brak wartości, np. brak obiektu undefined (typu undefined) wartość zadeklarowanej, ale nie zainicjalizowanej zmiennej lub właściwości obiektu 7

8 Operatory w JavaScript., [], () Arytmetyczne: +, -, *, /, %, **, ++, -- Konkatenacja łańcuchów znaków: +, += Bitowe: &,, ^, ~, <<, >>, >>> Przypisania: =, +=, -=,, <<=,, &=, Porównania: ==,!=, ===,!==, >, >=, <, <= Logiczne: &&,,! (skrócone wartościowanie && i ) new, delete, typeof, void, in, instanceof operator przecinka:, operator warunkowy (ternarny):?: destrukturyzacja tablicy/obiektu (ES6): [v1, v2, ] = tab, {p1: v1, p2: v2, = obj 8

9 Automatyczna konwersja typów console.log(5 * null) // 0 console.log(null * 5) // 0 console.log("6" - 1) // 5 console.log(6 - "1") // 5 console.log("6" + 1) //61 console.log(6 + "1") // 61 console.log("three" * 2) // NaN console.log(2 * "three") // NaN console.log(3 + null); // 3 console.log(3 + undefined); // NaN console.log(3 + false); // 3 console.log(true + true); // 2 9

10 Operatory ==/!= i ===/!== ===/!== testują precyzyjną równość Oprócz wartości uwzględniają typ danych console.log(false == 0); // true console.log(false === 0); // false console.log(null == undefined); console.log(null === undefined); console.log(null == 0); console.log(null === 0); console.log(false!= 0); console.log(false!== 0); console.log(null!= undefined); console.log(null!== undefined); console.log(null!= 0); console.log(null!== 0); // true // false // false // false // false // true // false // true // true // true 10

11 Pułapki porównań przez == Elastyczność języka JavaScript w zakresie konwersji typów sprawia, że wyniki porównań operatorem == mogą nie być oczywiste console.log(0 == '0'); // true console.log(0 == ''); // true console.log('' == '0'); //... false! console.log(false == undefined); // false console.log(false == null); // false console.log(null == undefined); //... true! 11

12 Zmienne i stałe Zmienne nie posiadają typu (typ mają przypisane wartości) Nazwa zmiennej musi być poprawnym identyfikatorem Deklaracja zmiennej: var zasięg funkcji let zasięg bloku kodu (ES6) Odwołanie do niezadeklarowanej zmiennej powoduje jej poszukiwanie w górę zasięgów aż do globalnego obiektu (w przeglądarkach: window) Zabronione w trybie strict ("use strict";) Odczyt niezainicjalizowanej niezadeklarowanej zmiennej kończy się błędem (dla zadeklarowanej zwraca undefined) Deklaracja stałej: const (ES6) 12

13 Zmienne i stałe - Przykłady var nazwisko = "Kowalski"; var imie = 'Jan'; var _$_dziwna zmienna_99 = 0xabcd; var flaga = true; var innaflaga = (5 > 7); var mojeauto = { marka: 'Fiat', nrrej: 'PNC2781' ; var tablica = [4, 7, 9]; const pi = 3.14; 13

14 Tablice Obsługa tablic za pomocą obiektu Array Nie jest konieczne jawne korzystanie z niego Możliwość deklaracji i inicjalizacji tablicy konstrukcją [] Indeksowane od 0 (tylko indeksy liczbowe!) Składowa length Użyteczne metody, np. push, pop, sort, foreach, Rzadka indeksacja tablic ( dziury w numeracji komórek ) Dostęp do elementów tablicy operatorem [] 14

15 Tablice - Przykłady var miasta = new Array('Berlin','Londyn','Nowy Jork'); var kraje = ['Niemcy','Wielka Brytania','USA']; var kontynenty = new Array(2); kontynenty[0] = 'Europa'; kontynenty[1] = 'Ameryka Północna'; console.log(kontynenty.length); // 2 kontynenty[3] = "Afryka"; // 4 console.log(kontynenty.length); kontynenty.push("azja"); console.log(kontynenty.length); // 5 console.log(kontynenty); // ["Europa", "Ameryka Północna", 3: "Afryka", 4: "Azja"] 15

16 Instrukcje sterujące Warunkowe: if, if/else, switch Pętle: while, do/while, for, for in, for of (ES6) Instrukcje używane w pętlach: break, continue Obsługa wyjątków: try/catch/finally Deprecjonowane: for each in, with 16

17 Pętle for in i for of for in iteruje po właściwościach obiektu Uwaga: tablice też są obiektami for of iteruje po wartościach właściwości obiektów iterowalnych (tablice, mapy, ) let car = { marka: "Fiat", cena: 27000; for (let i in car) { console.log(i); // "marka", "cena" // for (let i of car) { // error! for (let i in car) { console.log(car[i]); // "Fiat",

18 Pętle for in i for of (c.d.) let arr = [3, 5, 7]; for (let i in arr) { console.log(i); // 0, 1, 2 for (let i of arr) { console.log(i); // 3, 5, 7 for (let i in arr) { console.log(arr[i]); // 3, 5, 7 18

19 Funkcje Blok kodu, który wykonuje się gdy zostanie wywołany Typowo nazwany blok programu Funkcja może być utworzona jako anonimowa Funkcja może przyjmować parametry Przy wywołania można przekazać mniejszą lub większą liczbę parametrów niż zadeklarowano Nieustawione zadeklarowane parametry są undefined Dostęp do wszystkich parametrów poprzez obiekt arguments Funkcja może zwracać wartość (instrukcja return opcjonalna) Funkcje same są obiektami (!) Funkcję można przypisać do zmiennej lub składowej obiektu Funkcję można przekazać jako argument funkcji Funkcja może zwracać funkcję jako wynik Konstruktor - funkcja specjalna 19

20 Zasięg zmiennych: funkcji i bloku function testvar() { var x = 5; if (x == 5) { var x = 8; // ta sama zmienna o zasięgu funkcji console.log(x); // 8 console.log(x); // 8 function testlet() { let x = 5; if (x == 5) { let x = 8; // nowa zmienna, lokalna dla bloku kodu console.log(x); // 8 console.log(x); // 5 20

21 Programowanie funkcyjne var t = [3, 8, 9]; t.foreach(function(element) { console.log(element); ) var showelements = function(element) { console.log(element); ; t.foreach(showelements); function showelementdetails(element, index, array) { console.log('a[' + index + '] = ' + element); [2, 25,, 19].forEach(showElementDetails); 21

22 Programowanie funkcyjne (c.d.) var numbers = [3, 8, 9]; var squares = numbers.map(function(x) { return(x*x) ; ) console.log(squares); // [9, 64, 81] var numbers = [3, 8, 9]; var squares = numbers.map((x) => {return x*x; ) console.log(squares); // [9, 64, 81] var numbers = [3, 8, 9]; var squares = numbers.map( x => x*x ) console.log(squares); // [9, 64, 81] Funkcje strzałkowe (ES6) 22

23 Problem: Ograniczenie dostępu do zmiennych wykorzystywanych przez funkcję Zmienna globalna Możliwy dostęp z zewnątrz Zmienna lokalna w funkcji Odrębne instancje w kolejnych wywołaniach funkcji var counter = 0; function add() { counter += 1; add(); add(); // 2 function add() { var counter = 0; counter += 1; add(); add(); //??? * Przykład z w3schools.com 23

24 Domknięcie (ang. closure) Zagnieżdżona funkcja, która ma dostęp do lokalnych zmiennych funkcji nadrzędnej Również po zakończeniu działania funkcji nadrzędnej! Środowisko przechowuje nielokalne obiekty używane przez funkcję var add = (function () { var counter = 0; return function () {return counter += 1; )(); add(); add(); // 2 * Przykład z w3schools.com 24

25 Obiekty w JavaScript Obiekt = kolekcja dowolnych właściwości Właściwości mogą być dodawane i usuwane w czasie życia obiektu Właściwości mogą być funkcjami = metody obiektu var person = {firstname: "Marek", lastname: "Wojciechowski", hello: function() {console.log('hi!');; console.log(typeof(person)); // object person.hello(); console.log(person.firstname); console.log(person['firstname']); person.age = 43; person.bye = function() {console.log('bye!');; person.bye(); console.log(person.age); delete person.firstname; console.log(person.firstname); // undefined 25

26 Obiekty w JavaScript (c.d.) Obiekty mogą być używane jako mapy (tablice asocjacyjne) Operator in umożliwia sprawdzenie czy właściwość jest zdefiniowana w obiekcie Pętla for in iteruje po właściwościach Object.keys zwraca tablicę kluczy var person = {firstname: "Marek", lastname: "Wojciechowski"; for (var p in person) // firstname, lastname console.log(p); person["age"] = 43; delete person.firstname; for (var q in person) // lastname, age console.log(q); console.log("firstname" in person); // false console.log("lastname" in person); // true console.log(object.keys(person)); // ["lastname", "age"] 26

27 Gettery i settery w JavaScript var person = { firstname: 'Marek', lastname: 'Wojciechowski', get fullname() { return this.firstname + ' ' + this.lastname;, set fullname (fname) { var names = fname.tostring().split(' '); this.firstname = names[0] ''; this.lastname = names[1] ''; console.log(person.fullname) person.fullname = 'Jan Kowalski'; console.log(person.firstname); console.log(person.lastname) // Marek Wojciechowski // Jan // Kowalski 27

28 Enumerowalne i nie-enumerowalne właściwości Właściwości definiowane w obiektach poprzez przypisanie są enumerowalne Widoczne w pętli for in Zwracane przez Object.keys() var person = {firstname: "Marek"; person.lastname = "Wojciechowski"; person["age"] = 43; person.sayhi = function () { console.log("hi!"); ; for (var q in person) // firstname, lastname, age, sayhi console.log(q); Możliwe jest definiowanie właściwości nie-enumerowalnych za pomocą Object.defineProperty() 28

29 Object.defineProperty() Definiuje lub modyfikuje właściwość obiektu Składnia: Object.defineProperty(obj, property, descriptor) Atrybuty deskryptora: Dla danych (w tym funkcji) i akcesorów: configurable, enumerable Dla danych (w tym funkcji): value, writable Dla akcesorów: get, set var person = {firstname: "Marek", lastname: "Wojciechowski"; Object.defineProperty(person, "age", {enumerable: false, writable: true, value: 43); for (var q in person) // firstname, lastname console.log(q); console.log(object.keys(person)); // ["firstname", "lastname"] console.log(person.age); // 43 person.age=44; console.log(person.age); // 44 29

30 Konstruktory Funkcje wykorzystywane do tworzenia obiektów Wywoływane poprzez operator new Umożliwiają programową inicjalizację obiektu Niejawnie zwracają nowo tworzony obiekt Mają dostęp do zmiennej this wskazującej na bieżący obiekt Zapewniają jednolitą strukturę i funkcjonalność obiektów danego rodzaju (w momencie ich utworzenia) function Rabbit(type) { this.type = type; var killerrabbit = new Rabbit("killer"); var blackrabbit = new Rabbit("black"); console.log(blackrabbit.type); // black 30

31 Metody obiektów Metody można dodawać dynamicznie do obiektów Obiekty utworzone tym samym konstruktorem mogą później różnić się funkcjonalnością Jak zapewnić na starcie ten sam zestaw metod obiektom danego rodzaju? Można dodać metody w ciele konstruktora Obiekty będą miały własny zestaw tych samych metod function Rabbit(type) { this.type = type; this.speak = function(line) { console.log("the " + this.type + " rabbit says '" + line + "'"); ; Lepszym rozwiązaniem jest wykorzystanie prototypu Zestaw metod w prototypie współdzielony przez obiekty na nim oparte 31

32 Prototypy Prototyp (ang. prototype) to w JavaScript to obiekt który dla danego obiektu stanowi zapasowe źródło właściwości Prototypem większości obiektów w JS jest Object.prototype Dostarcza kilka metod np. tostring(), valueof() Jego właściwości są nie-enumerowalne Prototypy tworzą drzewiastą hierarchię Odpowiednik hierarchii dziedziczenia klas Odczyt prototypu: Object.getPrototypeOf() Tworzenie obiektu z prototypu: Object.create(prototyp); Zmiana prototypu (ES6): Object.setPrototypeOf() Operacja czasochłonna, niezalecana Rozróżnienie własnych i odziedziczonych właściwości: hasownproperty(), Object.getOwnPropertyNames(), Object.getOwnPropertyDescriptor() 32

33 Konstruktory i prototypy Konstruktory (jak inne funkcje) posiadają właściwość prototype Umożliwia ona przypisanie zestawu metod, które mają być dostępne dla obiektów tworzonych danym konstruktorem Uwaga: NIE jest to prototyp funkcji jako obiektu (prototypem funkcji jest domyślnie Function.prototype) function Rabbit(type) { this.type = type; Rabbit.prototype.speak = function(line) { console.log("the " + this.type + " rabbit says '" + line + "'"); ; var blackrabbit = new Rabbit("black"); blackrabbit.speak("hi!!!"); 33

34 Klasy (ES6) Inny sposób definiowania funkcji konstruktorowych z prototypami Składnia bardziej naturalna dla programistów migrujących z języków C++, C#, Java Klasy w JS nie są obiektami, tylko funkcjami class Shape { constructor (id, x, y) { this.id = id this.move(x, y) move (x, y) { this.x = x this.y = y var shape = new Shape(101, 10, 20); 34

35 Dziedziczenie (ES6) Bardziej intuicyjna składnia niż przy dziedziczeniu funkcjonalności obiektów z prototypów class Rectangle extends Shape { constructor (id, x, y, width, height) { super(id, x, y) this.width = width this.height = height class Circle extends Shape { constructor (id, x, y, radius) { super(id, x, y) this.radius = radius 35

36 Metody statyczne (ES6) Wołane ZAWSZE na rzecz klasy, dziedziczone class First { static show () { console.log("first") First.show() class Second extends First { static show() { console.log("second extends") super.show() Second.show() 36

37 Gettery i settery w klasach (ES6) class Rectangle { constructor (width, height) { this._width = width this._height = height set width(width) { this._width = width get width() { return this._width set height(height) { this._height = height get height() { return this._height get area() { return this._width * this._height var r = new Rectangle(5, 3) r.width = 6 console.log(r.area) Problem prywatności wewnętrznych składowych 37

38 Obsługa wyjątków Instrukcja throw Rzucić można wszystko (np. number, string), ale zalecane rzucanie obiektów Error lub podtypów Natywne typy wyjątków EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError Instrukcja try/catch/finally Po try musi być blok catch lub finally (mogą być oba) finally wykonuje się niezależnie od tego czy w bloku try wystąpił wyjątek czy nie W bloku catch można sprawdzić rodzaj wyjątku operatorem instanceof 38

39 Wyjątki Przykład (ES6) class MyError extends Error { constructor(m) { super(m); this.name = this.constructor.name; try { throw new MyError("Fatal error"); catch (e) { if (e instanceof MyError) { console.log(e.message); // Fatal error console.log(e.name); // MyError else console.log('unknown Error'); 39

40 JSON (JavaScript Object Notation) Tekstowy format danych do reprezentacji i transmisji obiektów zawierających pary atrybut:wartość Wywodzi się z języka JavaScript (serializacja obiektów) Obecnie parsowanie i generacja JSON wspierane przez różne języki programowania Wiele różnych zastosowań RESTful Web Services AJAX (AJAJ) Bazy danych NoSQL Typ MIME: application/json Rozszerzenie pliku:.json 40

41 Składnia i typy danych JSON Podstawowe typy danych Number (NaN niedozwolony, nierozróżnialne całk. i zmiennoprzec.)) String (Unicode, cudzysłowy jako ograniczniki, \ jako escape) Boolean (true/false) Obiekty: { atrybut1 :wartość1, atrybut2 :wartość2, Tablice: [element1, element2, ] null Białe spacje nie mają znaczenia Brak możliwości komentarzy 41

42 JSON - Przykład { "firstname": "Marek", "lastname": "Wojciechowski", "age": 43, "married": true, "languages": [ "Polish", "English", "German", "Russian", "Spanish" ], "phonenumber": { "type": "mobile", "number": " " 42

43 Generacja JSON w JavaScript JSON.stringify(value[, replacer[, space]]) Zwraca String reprezentujący przekazaną wartość Opcjonalne parametry umożliwiają: Zmianę zachowania procesu serializacji Dodanie białych spacji dla czytelności Uwagi o sposobie działania: Nie gwarantuje zachowania kolejności właściwości obiektów niebędących tablicami Obiekty typów String, Boolean i Number są zamieniane na odpowiadające wartości proste Wartości undefined i funkcje są: W obiektach: pomijane W tablicach: zamieniane na null Nie-enumerowalne właściwości (niewidoczne dla pętli for in) są ignorowane 43

44 Parsowanie JSON w JavaScript JSON.parse(text[, reviver]) Wynikiem jest Object Gdy parsowany tekst nie jest poprawnym zapisem JSON, rzucany jest wyjątek SyntaxError Opcjonalna funkcja reviver umożliwia transformację parsowanych wartości eval() Funkcja do wartościowania dynamicznych wyrażeń Wykorzystuje fakt, że składnia JSON jest (prawie) podzbiorem składni JavaScript Potencjalnie niebezpieczna jeśli tekst do parsowania pochodzi z niepewnego źródła (np. zagnieżdżone funkcje) 44

45 Parsowanie i generacja JSON w JavaScript - Przykład var person = {firstname: "Marek", lastname: "Wojciechowski", age: 43, salary: undefined, married: true, languages: ['Polish','English','German']; console.log(json.stringify(person)); var json = '{"firstname":"marek","lastname":"wojciechowski",' + '"age":43,"married":true,' + '"languages":["polish","english","german"]; person1 = JSON.parse(json); console.log(person1.firstname); person2 = eval('(' + json + ')'); // w ogólności niebezpieczne console.log(person2.firstname); 45

46 Terminologia dotycząca JS Minification Obfuscation Vanilla JS Unobtrusive JS Polyfill 46