1 / 137

Realizacja Aplikacji Internetowych

Realizacja Aplikacji Internetowych. JavaScript. Quiz. [] + [] [] + {} [0]+1 [0]-1 A = [0] A == A A == !A A = [null, undfined, [] ] A == ”,,”. JavaScript vs ECMAScript. JavaScript is nie jest związany z Javą Wprowadzony w przegladarce Netscape w XII 1995

perry
Télécharger la présentation

Realizacja Aplikacji Internetowych

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Realizacja Aplikacji Internetowych JavaScript

  2. Quiz • [] + [] • [] + {} • [0]+1 • [0]-1 A = [0] • A == A • A == !A A = [null, undfined, [] ] • A == ”,,”

  3. JavaScript vs ECMAScript • JavaScript is nie jest związany z Javą • Wprowadzony w przegladarce Netscape w XII 1995 • Najbardziej popularny język programowania na świecie ? • MS wyprodukował zbliżony język: JScript • Oba języki bazują na standardzie ECMAScript wprowadzonym przez European Computer Manufacturers Association (3 wyd w XII 1999) • JavaScript i JScript są nadzbiorami ECMAScript • Są hostowane w przeglądarkach, ale nie tylko (Acrobat Forms, Node.js)

  4. Typy • Undefined(pojedyncza wartość: undefined) • Null(pojedyncza wartość: null) • Boolean(wartości: true, false) • String(niemutowalna sekwencja znaków Unicode, brak typu znakowego) • Number (64-bitowa liczba zmiennoprzecinkowa, brak typu całkowitego, specjalne wartości NaN i Infinity) • Object • "...i to by było na tyle...".

  5. Nowe operatory • ===jest identyczny (wartość i typ) • !==nie jest identyczny (wartość lub typ)

  6. Zmienne • Dwa poziomy granularności zakresu: globalne i funkcja (brak zakresu bloku) • Tylko zmienne defioniowane jako varw obrebie funkcji mają zakres funkcji – inne są globalne. Nie na sensu używać bloków gdy nie są wymagane przez instrukcje złożone. • varnie zaincjalizowane ex-plicite ma wartość undefined. • varnie jest typowane

  7. Obiekty • Referencjonalne kontenery par nazwa/wartość • Nazwy: napisy (Jeśli treba wykonywan konwersja) • Wartości: dowolny typ danych (właczajac inne obiekty) • Nie trzeba implementować dostępu API (hashtable) • Właściwości tworzone w locie var myObj={}; var myObj=new Object(); myObj.p1=”blah” ; myObj[”p1”]=”blah”; var myObj={”p1”:new String(”blah”)}; • Metody ?

  8. Obiekty Obiekty są w istocie tablicami haszowanymi z ładną składnią Można więc iterować po obiekcie... for (name in object) { if (object.hasOwnProperty(name)) { value = object[name]; } }

  9. Obiekt Globalny • Unikalny, pre-definiowany obiekt który zawiera wszytskie funkcje i zmienne nie zdefionowane wewnątrz innych funkcji lub obiektów • W przeglądarkach implementacja this, windowi selfpokazują na Obiekt Globalny • Wszystkie globalne funkcje i zmienne są zdefiniowane jako funkcje i zmienne Obiektu Globalnego this.NaN=0; //changes value of NaN ‘constant’ ! • Jeśli zmienna/funkcja nie jest zdefiniowana w bieżącym zakresie jest poszukiwana w Obiekcie Globalnym

  10. Tablice • Regularne obiekty (właściwości dostępne za pośrednictem nazw!) properties accessed via names!), ale okreslona klasa nazw (non-negative integers) właściwości traktowana inaczej • Nie typowane (mogą zawierać wartości różnych typów) • Właściwość length jest ustawiana na największy klucz całkowity w tablicy +1 var myArr=[”val0”]; //myArr.length == 1 myArr[1]=”val1”; //myArr.length == 2 myArr[”v2”]=”val2”; //myArr.length == 2 myArr.2=”val2”; //nielegalne

  11. Funkcje • Obiekty typu first-class ze skojarzonym kodem i możliwą operacją call • Składniafunction func(x) {alert(x);} • Operator (nazwa f. jest opcjonalna – f.anonimowe) var func=function(x) {alert(x);}; • Konstruktor (nie ma słowa function) var func=new Funkcja(”x”,”alert(x);”); • Wsparcie dla zmiennej liczby argumentów (właściwość arguments) • Ma zakres leksykalny

  12. Funkcje (c.d.) • Mogą być przypisywane do zmiennych (wcześniejszy przyklad) • Mogą być elementami tablicy var arr=[]; arr[0]=function(x){return x*x;}; arr[1]=arr[0](2); alert(arr[1]); //displays 4 • Mogą mieć swoje właściwości var func=function(x) {alert(x);} func.ownProperty=”test”; • Mogą być właściwościami obiektu (metody!) var obj={”show”: function(){return ”-object-”;}} alert(obj.show()); //displays -object-

  13. Funkcje (c.d.) • Mogą być przekazywane jako argumentfunction square(x) {return x*x;}function opOn(num,func) { return func(num);} opOn(16,square); //displays 256 • Mogą być zwracane jako wartość function createIncrementer() { return function(x){return x+1;} } var inc = createIncrementer(); alert(inc(7)); //displays 8 • Muszą zwracać wartość (domyślnie jest to undefined, z wyjątkiem wołań operatora new)

  14. Metody • Metoda jest funkcją wołaną z kontekstem określonego obiektu • Metody mogą być definiowane przez : • Ustawienie funkcji jako właściwości obiektu myObject.method1=function(...){...} myObject.method1(...) • Ex-plicite wskazany kontekst myFunction.call(myObject,...) • Specjalna zmienna thisjest dostępna wewnątrz funkcji i odnośi się do obiektu wskazanego jako kontekt (lub Obiektu Globalnego dla f. niezwiązanych)

  15. Operator new i konstruktory • operator newjest używany wraz z wywolaniem funkcji: • Tworzy nowy pusty obiekt • Ustawia go jako thisdla wywołanej funkcji • Ustawia go jako domyślny zwrot z funkcji (może być nadpisany) • ... • Jeżeli f. Jest użyta do ustawienia właściwości nowego obiektu wraz z operatoem newmoże być uznana (i jest nazywana) konstruktorem function func() {this.prop1=”val1”;} var x=new func(); alert(x.prop1); //displays val1

  16. Realizacja Aplikacji Internetowych Wielkie udawanie

  17. OOP Emulacja metod • Metody mogą być definiowane przez ustawienie właściwości na daną funkcję myObj1.func=function(){alert(this.name);}; • Połączenie obiekt-metoda jest b. słabe var myObj1={”name”:”obj1”}; var myObj2={”name”:”obj2”}; myObj1.func=function(){alert(this.name);}; myObj1.func(); //displays obj1 myObj1.func.call(myObj2); //displays obj2

  18. OOP Emulacja klas • Konstruktory definiują sposób tworzenia obiektu (OOP klasy) function myConstructor(value) { this.prop1=value; this.check=function(val) { if(this.prop1==val) alert(”ok!”); } } var myObj1=new myConstructor(”obj1”); myObj1.check(”obj1”); //displays ok! myObj1.check(”obj2”); //do nothing

  19. OOP Emulacja klas (c.d.) • Obiekty mogą współdzielić implementację swoich metod function checkFunction(val) { if(this.prop1==val) alert(”ok!”); } function myConstructor(value) { this.prop1=value; this.check=checkFunction; } var myObj1=new myConstructor(”obj1”); myObj1.check(”obj1”); //displays ok!

  20. OOP Emulacja klas (c.d) • Konstruktor (funkcja) nie jest związany z żadnym typem • Każda funkcja może być wywołana jako konstruktor var myObj1={”name”:”obj1”}; myObj1.func=function() { alert(this.name); return {}; }; var x=new myObj1.func(); //x is empty object • Obiektynadpisujądomyslnyzwrot z funkcji. Typyprostejużnie.

  21. OOP emulacja metod statycznych • Ponieważ funkcja konstruktor faktycznie reprezentuje klasę obiektów i może być rozszerzna o własne właściwości implementacja metod i właściwości statyczny jest trywialna function BaseClass(name){ this.name = name; } BaseClass.staticMethod = function() { return new OtherClass(); }; ... var other = BaseClass.staticMethod();

  22. Mamy obiekt i chcielibyśmy mieć drugi - podobny… Application.GUI.Panel; ... Application.GUI.SecondPanel = Application.GUI.Panel; // this is in fact the same object!!! //What about Application.GUI.SecondPanel.Name = “Second”; //What is the name of the first panel? Application.GUI.Panel.Name = ???

  23. Klony nadchodzą Funkcje są obiektami imożna je kopiować! Application.GUI.Panel; ... App.GUI.SecondPanel = {}; App.GUI.SecondPanel.Show = App.GUI.Panel.Show; App.GUI.SecondPanel.Validate = App.GUI.Panel.Validate; //and many, many more…. //what about ? App.GUI.SecondPanel.Config = App.GUI.Panel.Config;

  24. Helper z ExtJS? //this copies all the stuff (including functions) //from Panel to SecondPanel Ext.apply(Application.GUI.SecondPanel,Application.GUI.Panel) // Exemplary implementation Ext.apply = function(d, e, b) {if (d && e && typeof e == "object") {for (var a in e) {d[a] = e[a]}}return d }; • Issues: • shallow copy • prototypes

  25. OOP Emulacja dziedziczenia – podejście funkcyjne function Base(name){ this.name = name; } var b = new Base("b1"); alert(b.name); //displays b1 //class Derived : Base function Derived(name,count) { Base.call(this,name); //this.baseClass=Base; this.count = count; //this.baseClass(); } var d = new Derived("d1",5); alert(d.count); //displays 5 alert(d.name); //displays d1

  26. Prototypy • Każda funkcja ma właściwość prototype wskazującą na obiekt (domyślnie pusty) • Każdy obiekt (włączając funkcje) ma właściwość constructor. Obiekt wskazywany domyślnie przez prototype danej funkcji ma swoją właściwość constructor ustawioną na pierwotną funkcję • Property constructororaz prototype można nadpisać.

  27. Prototypy (c.d.) • Obiekty nie-funkcyjne mają ukrytą (niedostępną) właściwość _prototype, która pokazuje na prototyp (obiekt), który obowiązywał (wskazywało na niego prototype w konstruktorze) w momencie tworzenia obiektu. • Operator newaktualizuje tworzony obiekt: • Ustawia wlaściwość _prototypena prototype konstructora

  28. Emulacja dziedziczenia (c.d.) Łańcuch dziedziczenia po utworzeniu jest stabilny Derived.prototype=new Base1(); var d1=new Derived(...); //d1 cannot be altered to inherit //from object other than Base1 ...ale można go zmienić dla nowych obiektów Derived.prototype=new Base2(); var d2=new Derived(...); //d1 and d2 inherit from //different objects

  29. Prototypy (c.d.) • Jeżeli obiekt nie implementuje żadanej właściwości,sprawdzany jest jego prototyp, stąd: • Obiekt efektywnie "dziedziczy" wszystkie własciwości po swoim prototypie • Zmiany w prototypie są natychmiast widoczne w obiektach potomnych (równiez już utworzonych) • Każda wartość w prototypie może być "nadpisana" w obiekcie • Obiekty potomne mogą być prototypami innych obiektów, tworząc łańcuch dziedziczenia (aż do Obiektu Globalnego) • Ponieważ własciwości są tworzone w locie, obiekty pochodne w momencie zapisu do dziedziczonej (z _prototype) wartości automatycznie tworzą własną kopię ("nadpisując" dziedziczoną wartość)

  30. Prototypy (c.d.)

  31. Dziedziczenie na poziomie obiektu? InheritFromObject (objectToDerrive) { var f = function() {}; f.prototype = objectToDerrive; return new f(); } App.GUI.Panel; ... App.GUI.SecondPanel = InheritFromObject(App.GUI.Panel); // albo nawet zeskładniązbliżoną do f. wbudowanych Object.prototype.BegetObject = function () { var f = function() {}; f.prototype = this; return new f(); } App.GUI.Panel; ... App.GUI.SecondPanel = App.GUI.Panel.BegetObject();

  32. Dziedziczenie na poziomie obiektu Ale: • Object jest globalny więc begetObject może być nadpisane • Co będzie jak oldObject się zmieni?

  33. Zmiany: App.GUI.Panel; ... App.GUI.SecondPanel = App.GUI.Panel.BegetObject(); //some behaviors and attributes can be overwritten App.GUI.SecondPanel.Show = function() {}; App.GUI.SecondPanel.Title = “new panel”; Co będzie w momencie zmiany w App.GUI.Panel ?? Application.GUI.Panel.Validate = function() {}; //they will cause change in behavior SecondPanel in //case when the Hide function wasn’t overridden

  34. Emulacja dziedziczenia klas – podejscie prototypowe function Base(name){ this.name = name; } //here is an example how to create method that will be //shared across all objects of Base ‘class’ Base.prototype.toString = function(){ return "name:" + this.name; }; var b = new Base("b1"); alert(b.toString()); //displays name:b1 //in fact alert() calls toString() method //and Base.toString() overrides Object.toString() method

  35. Emulacja dziedziczenia klas(c.d.) var b = new Base("b1");

  36. Emulacja dziedziczenia klas (c.d.) //class Derived : Base function Derived(name,count) { Base.call(this,name); //Derived : base(name) this.count = count; } //Derived prototype have to be linked with Base prototype Derived.prototype = new Base(); //yes, Derived has custom toString() implementation Derived.prototype.toString = function() { return "name:"+this.name+",count:"+this.count; }; var d = new Derived("d1",5); alert(d.toString()); //displays name:b1,count:5

  37. Emulacja dziedziczenia klas (c.d.) Derived.prototype = new Base(); var d = new Derived("d1",5);

  38. Prototypy • Nie można emulować prywatnych składowych • Brak duplikacji funkcji – rozmiar obiektu nie zależy od liczby ani rozmiaru funkcji • Główny problem to niekontrolowana zmiana zawertości prototypu -

  39. Domknięcia Funkcje mogą być definiowane wewnątrz innych funkcji Wewnętrzne funkcje mają dostep do zmiennych i parametrów f. zewnętrznej Jesli referencja do wewnętrznej funkcji (callback) istnieje – utrzymywana jest przy życiu f. zewnętrzna function createChecker(treshold) { return function(numberToCheck) { return (numberToCheck > treshold) ? true : false; } } var checker100 = createChecker(100); alert(checker100(99)); //displays false

  40. Emulacja prywatnych właściwości Prywatne właściwości można zaemulować przy użyciu domknięć function Person(name){ //C# readonly this.getName=function() {return name;}; var count; this.getCount=function() {return count;}; this.setCount= function(newCount) { count=newCount;}; this.publicMethod=function(){ alert(this.name); //undefined alert(this.getName()); //ok }

  41. Uwaga na prototypy function Base(){ var count; this.GetCount=function() {return count;}; this.SetCount=function(newCount){count=newCount;}; } function Derived() { Base.call(this); //!!! } Derived.prototype = new Base(); var cd1=new Derived(); var cd2=new Derived(); //cd1.GetCount()==cd2.GetCount() cd1.SetCount(100); //cd1.GetCount()!=cd2.GetCount()

  42. Emulacja namespaces Przestrzenie nazw mogą być emulowane jako var DATA={}; DATA.IO={}; DATA.IO.Parsers={}; var SC = DATA.IO.Parsers; //jak C# using DATA.IO.Class1=function(...){...}; DATA.IO.Class1.prototype.toString=function(){...}; var c1 = new SC.Class1(...);

  43. Dziwactwa Javascript-u voidnie jest typem, to prefiksowy operator zwracajacy zawsze wartość undefined Operatory bitowe i przesuniecia są wspierane ale nie ma wbudowanego typu integer. 64-bitowy typ zmiennoprzecinkowy Numberjest konwerowany na 32-bitowy typ całkowity przed operacją i po niej konwertowany ponownie do Number Operator typeofzwraca string opisujący dany obiekt. typeof(newArray())i typeof(null)zwrócą ”object” (zamiast odpowiednio ”array”i ”null”)

  44. Czyjużwszystkojasne?

  45. function getLabel() { var count = 0, concatenation = "" ['dog','cow','rabbit'].forEach(function(animal,i){ count = i+1 concatenation += animal + ' ' }) return { 'count' : count, 'animals' : concatenation } }

  46. Javascriptwymagaśredników … więc je sam sobie dodaje Gdy po nowej linii jest błedny token Gdy po nowej linii następuje ++ lub -- Gdy nowa linia następuje po continue, break, return, throw Na koncu pliku – jeśli to potrzebne ale nie dodaje Gdyby to zaowocowało pustą instrukcją Wewnątrz nagłówka instrukcji for

  47. function getLabel() { var count = 0, concatenation = "" ['dog','cow','rabbit'].forEach(function(animal,i){ count = i+1 ; concatenation += animal + ' ' ; }) ; return ; { 'count' : count, 'animals' : concatenation } ; }

  48. function getLabel() { var count = 0, concatenation = "" ['dog','cow','rabbit'].forEach(function(animal,i){ count = i+1 ; concatenation += animal + ' ' ; }) ; return ; { 'count' : count, 'animals' : concatenation } ; }

  49. ""['dog','cow','rabbit'] return ; { 'count' : count, 'animals' : concatenation } ; undefined Zwracaundefinefined pomijane

  50. ""['dog','cow','rabbit'] return ; { 'count' : count, 'animals' : concatenation } ; Możliwe rozwiazania: Dodajemy wszędzie średniki Dodajemy srednik przed linią która zaczyna się od ‘[‘ ‘(‘ binarnego operatora +- */ Uzywamy JSLinta/JSHinta undefined Zwracaundefinefined pomijane

More Related