JavaScript jako przykład obiektowego języka zorientowanego na prototypy

2,328 views

Published on

Prezentacja z wykładu o javascript, który poprowadziłem 17 stycznia 2009 roku na PG w Gdańsku.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,328
On SlideShare
0
From Embeds
0
Number of Embeds
181
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide



























  • JavaScript jako przykład obiektowego języka zorientowanego na prototypy

    1. 1. JavaScript jako przykład obiektowego języka zorientowanego na prototypy (c) 2008/9 - Rafał Piekarski
    2. 2. Plan prezentacji Przykłady podstawowych zastosowań. Historia powstania, języki pochodne i wersje. Informacje o literałach i podstawach składni. Tablice i obiekty. Specyficzne konstrukcje języka oraz wyjątki. Tworzenie obiektów i mechanizm wyzwalania atrybutów. Domknięcia (ang. clousures), czyli this, a może that? Zakresy zmiennych (symulacja private). Usuwanie obiektów: operator delete, wartość undefined, null, oraz GarbageCollector. Aplikacje internetowe i przykłady zaawansowanego wykorzystania JavaScriptu - frameworki.
    3. 3. Przykład podstawowego wykorzystania otwieranie okien - pop-upy prosta podmiana styli elementów ładowanie danych z innych stron dynamicznie
    4. 4. Historia JScript AJAX Java Flash i ActionScript 3 Przeglądarki ECMAScript internetowe prototypowanie inne podobne języki (lua, Self, Object Lisp.... )
    5. 5. Składnia języka Definiowanie zmiennych var liczba = 123; var napis = “jakiś tekst”; var innaLiczba = 1.23; Działania liczba = liczba * 2 + 2; / 248 / napis += “ jest”; / “jakiś tekst jest” / innaLiczba = innaLiczba - 3; / -1.77 / napis = -1 + “ tekst”; / “-1 tekst” / liczba = parseFloat(“1.23”) + 2; / 3.23 /
    6. 6. Prawda czy fałsz? var prawda = true; var falsz = false; $ $ $ falsz = 0; / zero / $ $ $ falsz = quot;quot;; / pusty napis / $ $ $ falsz = undefined; / niezdefiniowana zmienna / $ $ $ falsz = null; / pusty obiekt / $ $ $ falsz = NaN; / nieliczba (not a number) / $ $ $ falsz = !prawda; / zanegowana prawda / $ $ $ falsz = !![]; / /podwójna negacja pustej / tablicy /
    7. 7. Operatory < > <= >= === == !== != porównania=> jednoargumentowe=> ! -- ++ +-*/ <=matematyczne += -= *= /= = przypisania=> << >> & ^ | && || bitowe i logiczne=> ?: trójargumentowy=> Porównywanie wartości false == 0; / true / false === undefined; / false / true === !!null; / true / true === true; / true /
    8. 8. Instrukcje warunkowe i pętle var x = 10; var x = 10; switch(x) { var y = quot;11quot;; case 9: if ( x < 11) { case 10: $ x++; x++; } case 11: else if (y === 11) {$ / false (niezgodność typów) / break; y--;$$ case 12: } x--; else if (y <= 11) {$/ true (domyślna konwersja / default: / do innego typu, może być / x = “”; / niebezpieczne) / } } var i = 10; else { } while (i--) { } $$$ $$$ for (var i=10 ; i>0 ; i--) {$ } $$$ do { $ i++; } while(i < 5);
    9. 9. Funkcje function suma (a1, a2) {$ var suma2 = function (a, b, c) { $ var e = -1;$ $ return a + b + c; $ }$ $ return ++a1 + a2 + e; suma2(1,2, 3);$ / 6 / } suma(1,2, 3); / 3 / Funkcja jako zmienna var policz = function (funkcja, a1, a2) { $ return funkcja(a1, a2); } policz(suma, 2, 4); / 6 / policz(suma2, 3, 1); / 4 /
    10. 10. Tablice i obiekty var tablica = [1, 2, quot;3quot;, 4.00001]; tablica.length; / 4 / tablica[4] = tablica[0] - tablica[1] + tablica[2]; / quot;-13quot; / tablica.length; / 5 / tablica[9] = false; tablica.length; / 10 / Typy tablica[8]; / undefined / typeof 123;$ $ $ / “number” / typeof quot;napisquot;; $ / “string” / typeof true;$$ $ / “boolean” / typeof tablica; / “object” / typeof null;$ $ $ / “object” / typeof undefined;$ / “undefined” / typeof 3.14;$$ $ / “number” /
    11. 11. var obiekt = { }; Tablica, a może obiekt? obiekt.x = 10; var tablica = [1, 2, quot;3quot;, 4.00001]; obiekt.tytul = 'jakis tekst'; var tablica = { obiekt['klass'] = { 0: 1, ! x: 11, 1: 2, ! nazwa: 'jakas nazwa', 2: quot;3quot;, ! f: function (a, b, c) { 3: 4.00001, length: 4 !! }; ! }, ! ole: [1,2,3,4,5,6] obiekt['klass'].x; / 11 / } obiekt.klass['nazwa']; / 'jakas nazwa' / obiekt.klass.f(3,4,5); var podobiekt = obiekt['klass']; podobiekt.nazwa; / 'jakas nazwa' / podobiekt.f(1,2,3);
    12. 12. Obiektowość Wbudowane typy a obiekty String(“Napis”); / “Napis” / String(quot;Napisquot;); / równoznaczne z: quot;Napisquot; / Number(123); / 123 / Array(2,3,4); / [2,3,4] / quot;Componentsquot;.toUpperCase()$ // quot;COMPONENTSquot; Boolean(1); / true / .replace('N', '?')$ $ $ $ $ // quot;COMPO?ENTSquot; Function(quot;xquot;, quot;yquot;,quot;return x+y;quot;); .replace('O', '0')$ $ $ $ $ // quot;C0MPO?ENTSquot; .substr(1, 3)$ $ $ $ $ $ // quot;0MPquot; / function(x,y){ return x+y; } / .indexOf('M');$ $ $ $ $ // 1 Object(); Wyjątki Math; / itd... / try { $ throw {message: quot;oops!quot;}; var myRandomValue = function(max) { } $ return Math.ceil(Math.random() catch(e if e instanceof Object) { } * max % max); catch(e) { }(10);$ $ $ / np. 3 / $ document.writeln(e.message); / quot;oops!quot; / }
    13. 13. Operowanie na obiektach Zamiana wartości var obiekt = { var a = 5, b = 6; ! x: 123, [a, b] = [b, a]; ! n: quot;napisquot;, a; / 6 / ! f: function() { return this.x+this.n; } b; / 5 / } var z = quot;spoza obiektu `obiekt`quot;; with(obiekt){ ! document.writeln(x);! ! / 123 / ! document.writeln(n);! ! / quot;napisquot; / ! document.writeln(f);! ! / quot;function () { return this.x + this.n; }quot; / ! document.writeln(f()); ! / quot;123napisquot; / ! document.writeln(z);! ! / quot;spoza obiektu `obiekt`quot; / } for (var key in obiekt) { ! if(obiekt.hasOwnProperty(key)) { ! ! document.writeln(key + quot;: quot; + obiekt[key]); ! } }
    14. 14. Tworzenie obiektów i prototypy A może java? Konstruktory public class Kot { $ public String imie; var Kot = function(imie) { $ public Integer dl_ogona = 20; $ this.imie = imie;$ $ $ this.dl_ogona = arguments[1] || 20; $ public Kot(String imie) { } $ $ this.imie = imie; $} var mruczek = new Kot(“mruczek”); $ $$$ $ public Kot(String imie, Integer ogon) { mruczek.imie; / “mruczek” / $ this.imie = imie; mruczek. dl_ogona; / 20 / $ dl_ogona = ogon; $} var innyKot = new Kot(“wojtuś”, 25); } innyKot. dl_ogona; / 25 /

    ×