SlideShare ist ein Scribd-Unternehmen logo
Powerful mostly unknown
                          Javascript-Features




                                             1


Freitag, 20. November 2009                       1
Sascha Hameister

     - lebt in Berlin
     - Entwickler, App Aware
     - über 10 Jahre Entwicklungserfahrung
     - Speaker auf Fachkonferenzen
     - Autor bei O‘Reilly und Hanser-Verlag
     - Fokus: Mobile, Web



                                                2


Freitag, 20. November 2009                          2
Aron Homberg

     - lebt in München
     - Entwickler, App Aware
     - über 8 Jahre Entwicklungserfahrung
     - Speaker auf Fachkonferenzen
     - Autor bei O‘Reilly und Hanser-Verlag
     - Aktiv in der OpenSource Gemeinschaft
     - Fokus: Web, Datenbanken


                                              3


Freitag, 20. November 2009                        3
Agenda

     - Daten über mehrere Aufrufe persistent halten
     - Anonyme Funktionen verwenden
     - Debugging von Objekten verbessern
     - Standard-Verhalten nativer Funktionen ersetzen
     - Aufrufhierarchien ohne Temporärvariablen
     - Funktionen mit beliebiger Argumentanzahl
     - Funktionalität bestehender Funktionen dynamisch erweitern
     - Folgefehler durch Objektreferenzierung verhindern
     - Keywords
                                                          4


Freitag, 20. November 2009                                         4
Daten über mehrere Aufrufe
                         persistent halten




                                             5


Freitag, 20. November 2009                       5
Daten über mehrere Aufrufe
                             persistent halten
     - Gründe
       - Persistenz im Client abbilden
       - Netzwerktraffic verringern
       - Serverlast verringern




                                                      6


Freitag, 20. November 2009                                6
Client Cookies!




                                               7


Freitag, 20. November 2009                         7
Client Cookies

     - Die Anatomie eines Cookies:
          cookieName=cookieValue



     - Weitere Parameter:
     - Expire date (Default: Zum Ende der Zugriffsphase)
     - Path (Default: Aufrufendes Dokument)
     - Domain (Default: Aktuelle Domain)
     - Secure (Boolscher Parameter: Wird eine verschlüsselte
             Verbindung benötigt? (HTTPS)
                                                               8


Freitag, 20. November 2009                                         8
Client Cookies

     - Setzen eines lokalen Cookies:
          document.cookie = "dieAntwort=42";



     - Das ganze einfach testen:
          alert(document.cookie);

          // Besser (mit Firebug)

          ⋮

          >>> console.debug(document.cookie);
          dieAntwort=42; ... (weitere Cookies)


                                                 9


Freitag, 20. November 2009                           9
Client Cookies

     - Eine schöne Funktion zum speichern:
          function setCookie(name, value, expires, path, domain, secure) {
            var curCookie = name + "=" + escape(value) +
                ((expires) ? "; expires=" + expires.toGMTString() : "") +
                ((path) ? "; path=" + path : "") +
                ((domain) ? "; domain=" + domain : "") +
                ((secure) ? "; secure" : "");
            document.cookie = curCookie;
          }


     - Persistenz bis zur nächsten WebTechCon:
          var naechsteWTC = new Date();
          naechsteWTC.setTime(naechsteWTC.getTime() +
                              365 * 24 * 60 * 60 * 1000);

          setCookie("dieAntwort", 42, naechsteWTC);

Freitag, 20. November 2009                                                   10
Client Cookies

     - Und das ganze auslesen:
          function getCookie(name) {
            var dc = document.cookie;
            var prefix = name + "=";
            var begin = dc.indexOf("; " + prefix);
            if (begin == -1) {
              begin = dc.indexOf(prefix);
              if (begin != 0) return null;
            } else
              begin += 2;
            var end = document.cookie.indexOf(";", begin);
            if (end == -1)
              end = dc.length;
            return unescape(dc.substring(begin + prefix.length, end));
          }

     - Achtung: Cookies werden escaped gespeichert und müssen daher
             durch get/setCookie un/escaped werden.

Freitag, 20. November 2009                                               11
Client Cookies

     - Die Persistenzschicht ist fertig:
          console.log(getCookie("dieAntwort"));

          ⋮

          42


     - Seite neu laden... und das ganze nochmal:
              getCookie("dieAntwort")
              -> 42 :-)
     - Implementiert z.B. im Dojo-Framework im Namespace:
              dojo.cookie



Freitag, 20. November 2009                                  12
Anonyme Funktionen verwenden




                                   13


Freitag, 20. November 2009                13
Anonyme Funktionen
                             verwenden
     - Gründe
       - Implizite Codeübergabe
       - Funktionalität dynamisch injecten
       - Temporärcode ausführen




                                                  14


Freitag, 20. November 2009                             14
Anonyme Funktionen!




                                                   15


Freitag, 20. November 2009                              15
Anonyme Funktionen

     - Eine anonyme Funktion kreieren:
          (function () {
              alert("I am unnamed!");
          }()); // Calls the method directly



     - Einer Funktion eine anonyme Funktion übergeben:
          var obj = {"answer": 33};

          function execOnObject(obj, funcRef) {
              obj.__jailCode = funcRef;
              obj.__jailCode(); // Einfache Variante - oder apply/call()
          }
          execOnObject(obj, function() {
              alert(this.answer); // -> 33
                                                                16
          });

Freitag, 20. November 2009                                                 16
Anonyme Funktionen

     - Iterative Scope-Jail-Execution (z.B. ähnlich dojo.forEach())
          function forEach(map, code) {
              for (key in map) {
                  map[key].__jailCode = code;
                  map[key].__jailCode();
              }
              return map;
          }

          var myMap = [{value: 1}, {value: 2}, {value : 3}];

          myMap = forEach(myMap, function() {
              // This references to map iterator while
              // function execution
              this.value = this.value * 4;
          });

          console.debug(myMap);
                                                                17


Freitag, 20. November 2009                                            17
Freitag, 20. November 2009   18
Debugging von Objekten
                              verbessern




                                                  19


Freitag, 20. November 2009                             19
Debugging von Objekten
                              verbessern
     - Gründe
               - Standard-Debugging-Output von Objekten ist stets
                      [object Object]
               - Objekte werden serialisierbar (beispielsweise für den Versand
                      zum Server)


       function Person (firstName, lastName) {

       }

       var p = new Person("Sascha", "Hameister");
       alert(p);          // [object Object]
       alert(p + " FOO"); // [object Object] FOO

                                                                      20


Freitag, 20. November 2009                                                       20
toString und valueOf!




                                                     21


Freitag, 20. November 2009                                21
toString & valueOf

       function Person (firstName, lastName) {

           this.toString = function () {
               return "<Person {firstName: '" +        firstName + "',
       lastName: '" + lastName + "'"} >"
           }

              this.valueOf = function () {
                  return firstName + " " + lastName;
              }
       }

       var p = new Person("Sascha", "Hameister");

       alert(p);
       // <Person {firstName: "Sascha", lastName: ”Hameister”} >

       alert(p + " FOO"); // [object Object] FOO
       // Sascha Hameister FOO
                                                                    22


Freitag, 20. November 2009                                               22
Standard-Verhalten nativer
                        Funktionen ersetzen




                                              23


Freitag, 20. November 2009                         23
Standard-Verhalten nativer
                              Funktionen ersetzen
     - Gründe
           - alert-, con rm-, prompt-Funktionen mit eigener Funktionalität
                   ersetzen und Aufrufbarkeit nativer Funktionalität sicherstellen




                                                                         24


Freitag, 20. November 2009                                                           24
Native function overloading!




                                             25


Freitag, 20. November 2009                        25
Native function overloading

       var _alert = window.alert;

       function alert(msg) {
         console.debug(msg);
       }

       alert("FOO"); // Debugs FOO
       _alert("BAR") // Alerts BAR with native alert-window.

       delete window.alert; // Später dazu mehr :)

       alert("FOO AGAIN!");




                                                               26


Freitag, 20. November 2009                                          26
Aufrufhierarchien ohne
                               Temporärvariablen




                                                      27


Freitag, 20. November 2009                                 27
Aufrufhierarchien ohne
                             Temporärvariablen
   - Gründe
     - Mehrstu ge Aufrufverkettungen gut leserlich implementieren
               (beispielsweise bei Graphenzeichnung oder Charting)




                                                                28


Freitag, 20. November 2009                                           28
Chaining!




                                         29


Freitag, 20. November 2009                    29
Chaining

     - Verkettete Funktionsaufrufe de nieren:
          var validValues = new Array(
              {valid: false, value: 0},
              {valid: true, value: 1}

          ).filter(function(ele) {

                 if (ele.valid) {return ele}

          }).map(function(ele) {

                 return ele.value;

          }).toString();

          console.log(validValues); // -> 1

                                                30


Freitag, 20. November 2009                           30
Chaining

     - Pro‘s:
       - Sehr gut anwendbar, um temporäre Variablen zu vermeiden
       - Kann bei kleinen Chains die Lesbarkeit erhöhen
       - Automatisches „delete“ der - implizit nicht deklarierten -
                 Temporärvariablen (Speicherschonend, weniger Code!)


     - Con‘s:
       - Achtung bei „unde ned“ returns!
       - Achtung bei zu langen Verkettungen! (Lesbarkeit)
                                                               31


Freitag, 20. November 2009                                             31
Funktionen mit beliebiger
                           Argumentanzahl




                                               32


Freitag, 20. November 2009                          32
Funktionen mit beliebiger
                             Argumentanzahl
     - Gründe
       - Realisierung von Funktionen wie printf
       - Realisierung von Funktionen ohne benamte Parameter




                                                         33


Freitag, 20. November 2009                                    33
arguments!




                                          34


Freitag, 20. November 2009                     34
arguments

     - Beliebige Argumentanzahlen verarbeiten:
          function lotOfArgs()
          {
              console.debug(arguments);
          }
          lotOfArgs("A", "B", 3, 4, 20, true, /rg/);

          ⋮

          -> ["A", "B", 3, 4, 20, true, /rg/]

     - „arguments“ ist ein Keyword im Funktionskontext
     - Es ist als Array iterierbar (arguments.length, arguments[i])

                                                                35


Freitag, 20. November 2009                                            35
arguments

     - Tracing des Aufrufers & Dynamische Rekursion:
          var maxThiefTry = 3;
          function thief() {
              attractOfficer();
          }

          function attractOfficer() {
              maxThiefTry--;
              console.log("Arrest thief in... " + maxThiefTry + "times!");
              if (maxThiefTry > 0) {
                   arguments.callee();
              } else {
                   console.log("Thief arrested!")
              }
          }
          thief();

     - arguments.callee references calling function and scope36
Freitag, 20. November 2009                                                   36
arguments

     - Drei Chancen hatte er ;-)
          Arrest thief in... 2times!
          Arrest thief in... 1times!
          Arrest thief in... 0times!
          Thief arrested!


     - Die Aufgerufene Funktion ruft den Aufrufer dynamisch auf und
             muss nichts über dessen Funktionsnamen etc. wissen.
     - Es lassen sich so endliche und unendliche dynamische
             Rekursionsschleifen bzw. Ping-Pongs erstellen.



                                                              37


Freitag, 20. November 2009                                            37
Funktionalität bestehender
            Funktionen dynamisch erweitern




                                      38


Freitag, 20. November 2009                   38
Funktionalität bestehender
                             Funktionen dynamisch erweitern
     - Gründe
       - Bestehende Funktionen nicht weiter aufblähen
       - Mixen mehrerer Funktionalitäten zu einer neuen Funktion




                                                           39


Freitag, 20. November 2009                                         39
Delegation!




                                           40


Freitag, 20. November 2009                      40
Delegation

     - Funktionen miteinander vereinen (Mixing)
          function delegate() {
              var stack = arguments;

                 return function() {
                     for (var i=0; i<stack.length; i++) {
                         stack[i](arguments);
                     }
                 };
          }
          var func1 = function() {console.debug(arguments)};
          var func2 = function() {console.debug(arguments)};

          func3 = delegate(func1, func2);
          func3("C");

     - „func3()“ ruft „func1()“ und „func2()“ mit seinen
             Aufrufparametern auf!                             41


Freitag, 20. November 2009                                          41
Folgefehler durch
           Objektreferenzierung verhindern




                                      42


Freitag, 20. November 2009                   42
Folgefehler durch
                             Objektreferenzierung verhindern
     - Standard: Mit Referenzen arbeiten:
          var aron   = {name: "Aron Homberg"};
          var sascha = aron;
          sascha.name = "Sascha Hameister";

          console.debug(aron);

          -> aron.name -> „Sascha Hameister“

     - Achtung: Versteckte Bugs!
             Durch die Verwendung als Referenz wurde das Objekt Aron
             ebenfalls manipuliert!
     - Skalare Typen werden immer kopiert, nie referenziert.
                                                               43


Freitag, 20. November 2009                                             43
Objekte klonen!




                                               44


Freitag, 20. November 2009                          44
Objekte klonen

     - Lösung: Objekte und ihre Attribute (1st-Level) klonen!
          function clone(props) {
              var tobj = {};
              for(var x in props){
                   tobj[x] = props[x];
              }
              return tobj;
          }
          var aron    = {name: "Aron Homberg"};
          var sascha = clone(aron);
          sascha.name = "Sascha Hameister";

          console.debug(aron);

          -> aron.name -> „Aron Homberg“ // Bleibt unverändert!

     - Diese Funktion klont lediglich die erste Attribut-Ebene eines
             Objekts. In tieferen Ebenen blieben Referenzen erhalten.

Freitag, 20. November 2009                                              45
Keywords




                                        46


Freitag, 20. November 2009                   46
Keywords

     - instanceof
     - typeof
     - with
     - delete
     - in
     - continue
     - new


                                        47


Freitag, 20. November 2009                   47
Keyword: instanceof




                                                   48


Freitag, 20. November 2009                              48
Keyword: instanceof

       - Gibt true zurück, wenn das Objekt die Instanz einer gegebenen
               Klasse ist.


        var example = 'FOO';
        alert(example instanceof String); // false

        var example = new String('FOO');
        alert(example instanceof String); // true




                                                             49


Freitag, 20. November 2009                                               49
Keyword: typeof




                                               50


Freitag, 20. November 2009                          50
Keyword: typeof

       var example = 'FOO';
       alert(typeof example); // string

       var example = 10;
       alert(typeof example); // number

       var example = true;
       alert(typeof example); // boolean

       var example = /foo/ig
       alert(typeof example); // object

       var example = [];
       alert(typeof example); // object

       var example = {};
       alert(typeof example); // object

                                               51


Freitag, 20. November 2009                          51
Keyword: with




                                             52


Freitag, 20. November 2009                        52
Keyword: with


       with (document.getElementById('example')) {
         innerHTML = 'HTML INHALT';
         style.color = '#123456';
         style.height = '20px';
       }




                                                     53


Freitag, 20. November 2009                                53
Keyword: delete




                                               54


Freitag, 20. November 2009                          54
Keyword: delete

     - Per delete können Zuweisungen aller Art hart gelöscht werden:
       var object = {
          attribute1 : 'value1',
          attribute2 : 'value2'
       };

       ⋮

       delete object.attribute1;



     Mit „delete“ lässt sich Speicher freiräumen. Temporärvariablen bei
       Iterationen sollten so immer „Garbage collected“ werden.

                                                              55


Freitag, 20. November 2009                                                55
Keyword: delete

     - Aufpassen bei Arrays oder Iterationen!

       var anArray = ['foo', 'bar'];

       delete anArray[1];

       for (var i = 0; i < anArray.length; i++) {
         console.log(anArray[i]); // foo, undefined
       }



     Es wird hart gelöscht. Eine Änderung der Indizes oder des length-
        Attributes des Arrays erfolgt nicht!

                                                             56


Freitag, 20. November 2009                                               56
Keyword: delete

     - ACHTUNG: delete() löscht je nach Implementation (Javascript-
             VM / Interpreter) hart die Referenz aus dem Memory.
     - Bei Zugriff auf einen so gelöschten Wert können dadurch
             kritische Interpreter / VM-Runtime Execution Fehler auftreten.




                                                                 57


Freitag, 20. November 2009                                                    57
Keyword: in




                                           58


Freitag, 20. November 2009                      58
Keyword: in

       var object = {
          attribute1 : 'value1',
          attribute2 : 'value2'
       };

       'attribute1' in object // TRUE


       var object = {
          attribute1 : 'value1',
          attribute2 : 'value2'
       };

       var idx;
       for (idx in object) {
         alert(object[idx]); // two alerts… value1, value2
       }

                                                             59


Freitag, 20. November 2009                                        59
Keyword: in (Prototypes!)

       Object.prototype.example = function () {};

       var object = {
          attribute1 : 'value1',
          attribute2 : 'value2'
       };

       var idx;
       for (idx in object) {
         alert(object[idx]); // Was erwarten Sie?
       }




       value1
       value2
       function () {}
                                                         60


Freitag, 20. November 2009                                    60
Keyword: in (Prototypes!)

     - Bei der Nutzung von in bei jedem Cycle Plausibilitätsprüfung
             des aktuellen Typs

       Object.prototype.example = function () {};

       var object = {
          attribute1 : 'value1',
          attribute2 : 'value2'
       };

       var currentObject;
       var idx;
       for (idx in object) {
         currentObject = object[idx];
         if (typeof currentObject === 'string') {
            alert(object[idx]); // two alerts… value1, value2
         }
       }                                                        61


Freitag, 20. November 2009                                            61
Keyword: continue




                                                 62


Freitag, 20. November 2009                            62
Keyword: continue

       outerLabel: for (var i = 0; i < 5; i++) {
         innerLabel: for (var j = 0; j < 5; j++) {
            if (j == 2) {
              continue outerLabel;
           }
         }
       }




                                                     63


Freitag, 20. November 2009                                63
Keyword: new




                                            64


Freitag, 20. November 2009                       64
Keyword: new

       function MyClass () {}

       var foo = new MyClass();

       var bar = MyClass();

       // Unterschied?




       function MyClass () {
           if (!(this instanceof MyClass)) {
               throw 'You tried to instantiate MyClass without new.';
           }
       }



                                                              65


Freitag, 20. November 2009                                              65
Powerful known Javascript-
                             Features!
                             Vielen Dank! :-)


                                                66


Freitag, 20. November 2009                           66

Weitere ähnliche Inhalte

Was ist angesagt?

Java Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s StapelnJava Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s Stapeln
gedoplan
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
Stephan Schmidt
 
Javascript done right
Javascript done rightJavascript done right
Javascript done rightDirk Ginader
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
Reto Zahner
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
Sebastian Springer
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
Oliver Thiele
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauen
johofer
 
Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit ant
roskakori
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
AOE
 
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010Patrick Lauke
 
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Gregor Biswanger
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3marco-huber
 
digitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-AppsdigitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-AppsdigitalSTROM.org
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
SpeedPartner GmbH
 
Serverprovisioning in einer dynamischen Infrastruktur
Serverprovisioning in einer dynamischen InfrastrukturServerprovisioning in einer dynamischen Infrastruktur
Serverprovisioning in einer dynamischen Infrastrukturinovex GmbH
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Gregor Biswanger
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 

Was ist angesagt? (20)

Java Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s StapelnJava Batch: Der neue Standard für‘s Stapeln
Java Batch: Der neue Standard für‘s Stapeln
 
Web 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface LibraryWeb 2.0 Mit Der Yahoo User Interface Library
Web 2.0 Mit Der Yahoo User Interface Library
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Typo3 und Varnish
Typo3 und VarnishTypo3 und Varnish
Typo3 und Varnish
 
Einfacher bauen
Einfacher bauenEinfacher bauen
Einfacher bauen
 
Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit ant
 
Performance durch Caching
Performance durch CachingPerformance durch Caching
Performance durch Caching
 
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
Schöne neue Welt von HTML5 - WebTech 2010 Mainz 12.10.2010
 
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und KubernetesVerteilte Anwendungen bei Azure mit Docker und Kubernetes
Verteilte Anwendungen bei Azure mit Docker und Kubernetes
 
Mvc public
Mvc publicMvc public
Mvc public
 
PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3
 
digitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-AppsdigitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
 
Web-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnishWeb-Performance-Optimierung mit varnish
Web-Performance-Optimierung mit varnish
 
Serverprovisioning in einer dynamischen Infrastruktur
Serverprovisioning in einer dynamischen InfrastrukturServerprovisioning in einer dynamischen Infrastruktur
Serverprovisioning in einer dynamischen Infrastruktur
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 

Andere mochten auch

Design für alle Sinne
Design für alle SinneDesign für alle Sinne
Kritische Erfolgsfaktoren für Business Strategien in Virtuellen Welten
Kritische Erfolgsfaktoren für Business Strategien in Virtuellen WeltenKritische Erfolgsfaktoren für Business Strategien in Virtuellen Welten
Kritische Erfolgsfaktoren für Business Strategien in Virtuellen WeltenBokowsky + Laymann GmbH
 
20151202 Social media nu - Gemeente Utrecht
20151202 Social media nu - Gemeente Utrecht20151202 Social media nu - Gemeente Utrecht
20151202 Social media nu - Gemeente Utrecht
Paulus Veltman
 
Adsense optimierung
Adsense optimierungAdsense optimierung
Adsense optimierung
Axel Metayer
 
Crowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und KreativprozessenCrowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Michael Gebert
 
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3cdialog
 
A textual DSL for UI Developement - Lessons from the Practice
A textual DSL for UI Developement - Lessons from the PracticeA textual DSL for UI Developement - Lessons from the Practice
A textual DSL for UI Developement - Lessons from the Practice
rmuecke
 
GPA-djp Social Media
GPA-djp Social MediaGPA-djp Social Media
GPA-djp Social Media
Thomas Kreiml
 
Persönliche Kataloge
Persönliche KatalogePersönliche Kataloge
Persönliche KatalogeJakob .
 
Ausgereiftes Bedienkonzept für Biogasanlagen
Ausgereiftes Bedienkonzept für BiogasanlagenAusgereiftes Bedienkonzept für Biogasanlagen
Ausgereiftes Bedienkonzept für BiogasanlagenThomas Schulz
 
Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...
Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...
Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...
Telekom MMS
 
Getting Things Done (GfA Präsentation)
Getting Things Done (GfA Präsentation)Getting Things Done (GfA Präsentation)
Getting Things Done (GfA Präsentation)
Jens Oberender
 
Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...
Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...
Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...
Telekom MMS
 
Luxemburg nach dem ersten weltkrieg
Luxemburg nach dem ersten weltkriegLuxemburg nach dem ersten weltkrieg
Luxemburg nach dem ersten weltkriegIsabelle Deville
 
Communardo Social Business Solution Guide
Communardo Social Business Solution GuideCommunardo Social Business Solution Guide
Communardo Social Business Solution Guide
Communardo GmbH
 
Booklet83 Cases
Booklet83 CasesBooklet83 Cases
Booklet83 Cases
Booklet83
 
Deutsch heute Umfrage1
Deutsch heute Umfrage1Deutsch heute Umfrage1
Deutsch heute Umfrage1
carla asquini
 

Andere mochten auch (20)

Design für alle Sinne
Design für alle SinneDesign für alle Sinne
Design für alle Sinne
 
Kritische Erfolgsfaktoren für Business Strategien in Virtuellen Welten
Kritische Erfolgsfaktoren für Business Strategien in Virtuellen WeltenKritische Erfolgsfaktoren für Business Strategien in Virtuellen Welten
Kritische Erfolgsfaktoren für Business Strategien in Virtuellen Welten
 
20151202 Social media nu - Gemeente Utrecht
20151202 Social media nu - Gemeente Utrecht20151202 Social media nu - Gemeente Utrecht
20151202 Social media nu - Gemeente Utrecht
 
Adsense optimierung
Adsense optimierungAdsense optimierung
Adsense optimierung
 
Crowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und KreativprozessenCrowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
Crowdsourcing - Auslagerung von Arbeits- und Kreativprozessen
 
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
3C DIALOG Stellenanzeige: Telefonischer Vertriebsmitarbeiter (m/w) B2B
 
A textual DSL for UI Developement - Lessons from the Practice
A textual DSL for UI Developement - Lessons from the PracticeA textual DSL for UI Developement - Lessons from the Practice
A textual DSL for UI Developement - Lessons from the Practice
 
GPA-djp Social Media
GPA-djp Social MediaGPA-djp Social Media
GPA-djp Social Media
 
Inflation
InflationInflation
Inflation
 
Persönliche Kataloge
Persönliche KatalogePersönliche Kataloge
Persönliche Kataloge
 
Die Burg Des Mittelalters
Die Burg Des MittelaltersDie Burg Des Mittelalters
Die Burg Des Mittelalters
 
Ausgereiftes Bedienkonzept für Biogasanlagen
Ausgereiftes Bedienkonzept für BiogasanlagenAusgereiftes Bedienkonzept für Biogasanlagen
Ausgereiftes Bedienkonzept für Biogasanlagen
 
Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...
Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...
Webinar "Film ab in Ihrem Unternehmen" - Leistungsfähiges und sicheres Videos...
 
Getting Things Done (GfA Präsentation)
Getting Things Done (GfA Präsentation)Getting Things Done (GfA Präsentation)
Getting Things Done (GfA Präsentation)
 
Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...
Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...
Webinar "Schöne neue Arbeitswelt mit Social Business" - IBM, Jive und Microso...
 
Fuchs Ocr Impact Workshop MUC
Fuchs Ocr Impact Workshop MUCFuchs Ocr Impact Workshop MUC
Fuchs Ocr Impact Workshop MUC
 
Luxemburg nach dem ersten weltkrieg
Luxemburg nach dem ersten weltkriegLuxemburg nach dem ersten weltkrieg
Luxemburg nach dem ersten weltkrieg
 
Communardo Social Business Solution Guide
Communardo Social Business Solution GuideCommunardo Social Business Solution Guide
Communardo Social Business Solution Guide
 
Booklet83 Cases
Booklet83 CasesBooklet83 Cases
Booklet83 Cases
 
Deutsch heute Umfrage1
Deutsch heute Umfrage1Deutsch heute Umfrage1
Deutsch heute Umfrage1
 

Ähnlich wie Powerful mostly unknown Javascript-Features

Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
Sebastian Springer
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittdominion
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
Cenarion Information Systems GmbH
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-Patterns
Josef Adersberger
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-Patterns
QAware GmbH
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
emrox
 
Grundlagen puppet
Grundlagen puppetGrundlagen puppet
Grundlagen puppetinovex GmbH
 
Docker Entwicklungsumgebung für TYPO3 mit xdebug
Docker Entwicklungsumgebung für TYPO3 mit xdebugDocker Entwicklungsumgebung für TYPO3 mit xdebug
Docker Entwicklungsumgebung für TYPO3 mit xdebug
Alexander Bohndorf
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
Hendrik Lösch
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_script
Manfred Steyer
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
LeanIX GmbH
 
FMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam AugustingFMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam Augusting
Verein FM Konferenz
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
Jens Siebert
 
Logging mit log4net
Logging mit log4netLogging mit log4net
Logging mit log4net
Thomas Mentzel
 
Ausrollen von Multi-Tier-Applikationen mit Docker
Ausrollen von Multi-Tier-Applikationen mit DockerAusrollen von Multi-Tier-Applikationen mit Docker
Ausrollen von Multi-Tier-Applikationen mit Docker
B1 Systems GmbH
 
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...inovex GmbH
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrants0enke
 
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
GFU Cyrus AG
 

Ähnlich wie Powerful mostly unknown Javascript-Features (20)

Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-Patterns
 
Docker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-PatternsDocker und Kubernetes Patterns & Anti-Patterns
Docker und Kubernetes Patterns & Anti-Patterns
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
Grundlagen puppet
Grundlagen puppetGrundlagen puppet
Grundlagen puppet
 
Docker Entwicklungsumgebung für TYPO3 mit xdebug
Docker Entwicklungsumgebung für TYPO3 mit xdebugDocker Entwicklungsumgebung für TYPO3 mit xdebug
Docker Entwicklungsumgebung für TYPO3 mit xdebug
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_script
 
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
CodeTalks Vortrag: Automatisierung mit Ansible & Jenkins @ LeanIX Enterprise ...
 
FMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam AugustingFMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam Augusting
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
Logging mit log4net
Logging mit log4netLogging mit log4net
Logging mit log4net
 
Ausrollen von Multi-Tier-Applikationen mit Docker
Ausrollen von Multi-Tier-Applikationen mit DockerAusrollen von Multi-Tier-Applikationen mit Docker
Ausrollen von Multi-Tier-Applikationen mit Docker
 
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
Continuous Delivery - Development Tool Chain - Virtualisierung, Packer, Vagra...
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
 
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
Java Code Quality: Gute Software braucht guten Code - Regeln für verständlich...
 

Powerful mostly unknown Javascript-Features

  • 1. Powerful mostly unknown Javascript-Features 1 Freitag, 20. November 2009 1
  • 2. Sascha Hameister - lebt in Berlin - Entwickler, App Aware - über 10 Jahre Entwicklungserfahrung - Speaker auf Fachkonferenzen - Autor bei O‘Reilly und Hanser-Verlag - Fokus: Mobile, Web 2 Freitag, 20. November 2009 2
  • 3. Aron Homberg - lebt in München - Entwickler, App Aware - über 8 Jahre Entwicklungserfahrung - Speaker auf Fachkonferenzen - Autor bei O‘Reilly und Hanser-Verlag - Aktiv in der OpenSource Gemeinschaft - Fokus: Web, Datenbanken 3 Freitag, 20. November 2009 3
  • 4. Agenda - Daten über mehrere Aufrufe persistent halten - Anonyme Funktionen verwenden - Debugging von Objekten verbessern - Standard-Verhalten nativer Funktionen ersetzen - Aufrufhierarchien ohne Temporärvariablen - Funktionen mit beliebiger Argumentanzahl - Funktionalität bestehender Funktionen dynamisch erweitern - Folgefehler durch Objektreferenzierung verhindern - Keywords 4 Freitag, 20. November 2009 4
  • 5. Daten über mehrere Aufrufe persistent halten 5 Freitag, 20. November 2009 5
  • 6. Daten über mehrere Aufrufe persistent halten - Gründe - Persistenz im Client abbilden - Netzwerktraffic verringern - Serverlast verringern 6 Freitag, 20. November 2009 6
  • 7. Client Cookies! 7 Freitag, 20. November 2009 7
  • 8. Client Cookies - Die Anatomie eines Cookies: cookieName=cookieValue - Weitere Parameter: - Expire date (Default: Zum Ende der Zugriffsphase) - Path (Default: Aufrufendes Dokument) - Domain (Default: Aktuelle Domain) - Secure (Boolscher Parameter: Wird eine verschlüsselte Verbindung benötigt? (HTTPS) 8 Freitag, 20. November 2009 8
  • 9. Client Cookies - Setzen eines lokalen Cookies: document.cookie = "dieAntwort=42"; - Das ganze einfach testen: alert(document.cookie); // Besser (mit Firebug) ⋮ >>> console.debug(document.cookie); dieAntwort=42; ... (weitere Cookies) 9 Freitag, 20. November 2009 9
  • 10. Client Cookies - Eine schöne Funktion zum speichern: function setCookie(name, value, expires, path, domain, secure) { var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); document.cookie = curCookie; } - Persistenz bis zur nächsten WebTechCon: var naechsteWTC = new Date(); naechsteWTC.setTime(naechsteWTC.getTime() + 365 * 24 * 60 * 60 * 1000); setCookie("dieAntwort", 42, naechsteWTC); Freitag, 20. November 2009 10
  • 11. Client Cookies - Und das ganze auslesen: function getCookie(name) { var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf("; " + prefix); if (begin == -1) { begin = dc.indexOf(prefix); if (begin != 0) return null; } else begin += 2; var end = document.cookie.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin + prefix.length, end)); } - Achtung: Cookies werden escaped gespeichert und müssen daher durch get/setCookie un/escaped werden. Freitag, 20. November 2009 11
  • 12. Client Cookies - Die Persistenzschicht ist fertig: console.log(getCookie("dieAntwort")); ⋮ 42 - Seite neu laden... und das ganze nochmal: getCookie("dieAntwort") -> 42 :-) - Implementiert z.B. im Dojo-Framework im Namespace: dojo.cookie Freitag, 20. November 2009 12
  • 13. Anonyme Funktionen verwenden 13 Freitag, 20. November 2009 13
  • 14. Anonyme Funktionen verwenden - Gründe - Implizite Codeübergabe - Funktionalität dynamisch injecten - Temporärcode ausführen 14 Freitag, 20. November 2009 14
  • 15. Anonyme Funktionen! 15 Freitag, 20. November 2009 15
  • 16. Anonyme Funktionen - Eine anonyme Funktion kreieren: (function () { alert("I am unnamed!"); }()); // Calls the method directly - Einer Funktion eine anonyme Funktion übergeben: var obj = {"answer": 33}; function execOnObject(obj, funcRef) { obj.__jailCode = funcRef; obj.__jailCode(); // Einfache Variante - oder apply/call() } execOnObject(obj, function() { alert(this.answer); // -> 33 16 }); Freitag, 20. November 2009 16
  • 17. Anonyme Funktionen - Iterative Scope-Jail-Execution (z.B. ähnlich dojo.forEach()) function forEach(map, code) { for (key in map) { map[key].__jailCode = code; map[key].__jailCode(); } return map; } var myMap = [{value: 1}, {value: 2}, {value : 3}]; myMap = forEach(myMap, function() { // This references to map iterator while // function execution this.value = this.value * 4; }); console.debug(myMap); 17 Freitag, 20. November 2009 17
  • 19. Debugging von Objekten verbessern 19 Freitag, 20. November 2009 19
  • 20. Debugging von Objekten verbessern - Gründe - Standard-Debugging-Output von Objekten ist stets [object Object] - Objekte werden serialisierbar (beispielsweise für den Versand zum Server) function Person (firstName, lastName) { } var p = new Person("Sascha", "Hameister"); alert(p); // [object Object] alert(p + " FOO"); // [object Object] FOO 20 Freitag, 20. November 2009 20
  • 21. toString und valueOf! 21 Freitag, 20. November 2009 21
  • 22. toString & valueOf function Person (firstName, lastName) { this.toString = function () { return "<Person {firstName: '" + firstName + "', lastName: '" + lastName + "'"} >" } this.valueOf = function () { return firstName + " " + lastName; } } var p = new Person("Sascha", "Hameister"); alert(p); // <Person {firstName: "Sascha", lastName: ”Hameister”} > alert(p + " FOO"); // [object Object] FOO // Sascha Hameister FOO 22 Freitag, 20. November 2009 22
  • 23. Standard-Verhalten nativer Funktionen ersetzen 23 Freitag, 20. November 2009 23
  • 24. Standard-Verhalten nativer Funktionen ersetzen - Gründe - alert-, con rm-, prompt-Funktionen mit eigener Funktionalität ersetzen und Aufrufbarkeit nativer Funktionalität sicherstellen 24 Freitag, 20. November 2009 24
  • 25. Native function overloading! 25 Freitag, 20. November 2009 25
  • 26. Native function overloading var _alert = window.alert; function alert(msg) { console.debug(msg); } alert("FOO"); // Debugs FOO _alert("BAR") // Alerts BAR with native alert-window. delete window.alert; // Später dazu mehr :) alert("FOO AGAIN!"); 26 Freitag, 20. November 2009 26
  • 27. Aufrufhierarchien ohne Temporärvariablen 27 Freitag, 20. November 2009 27
  • 28. Aufrufhierarchien ohne Temporärvariablen - Gründe - Mehrstu ge Aufrufverkettungen gut leserlich implementieren (beispielsweise bei Graphenzeichnung oder Charting) 28 Freitag, 20. November 2009 28
  • 29. Chaining! 29 Freitag, 20. November 2009 29
  • 30. Chaining - Verkettete Funktionsaufrufe de nieren: var validValues = new Array( {valid: false, value: 0}, {valid: true, value: 1} ).filter(function(ele) { if (ele.valid) {return ele} }).map(function(ele) { return ele.value; }).toString(); console.log(validValues); // -> 1 30 Freitag, 20. November 2009 30
  • 31. Chaining - Pro‘s: - Sehr gut anwendbar, um temporäre Variablen zu vermeiden - Kann bei kleinen Chains die Lesbarkeit erhöhen - Automatisches „delete“ der - implizit nicht deklarierten - Temporärvariablen (Speicherschonend, weniger Code!) - Con‘s: - Achtung bei „unde ned“ returns! - Achtung bei zu langen Verkettungen! (Lesbarkeit) 31 Freitag, 20. November 2009 31
  • 32. Funktionen mit beliebiger Argumentanzahl 32 Freitag, 20. November 2009 32
  • 33. Funktionen mit beliebiger Argumentanzahl - Gründe - Realisierung von Funktionen wie printf - Realisierung von Funktionen ohne benamte Parameter 33 Freitag, 20. November 2009 33
  • 34. arguments! 34 Freitag, 20. November 2009 34
  • 35. arguments - Beliebige Argumentanzahlen verarbeiten: function lotOfArgs() { console.debug(arguments); } lotOfArgs("A", "B", 3, 4, 20, true, /rg/); ⋮ -> ["A", "B", 3, 4, 20, true, /rg/] - „arguments“ ist ein Keyword im Funktionskontext - Es ist als Array iterierbar (arguments.length, arguments[i]) 35 Freitag, 20. November 2009 35
  • 36. arguments - Tracing des Aufrufers & Dynamische Rekursion: var maxThiefTry = 3; function thief() { attractOfficer(); } function attractOfficer() { maxThiefTry--; console.log("Arrest thief in... " + maxThiefTry + "times!"); if (maxThiefTry > 0) { arguments.callee(); } else { console.log("Thief arrested!") } } thief(); - arguments.callee references calling function and scope36 Freitag, 20. November 2009 36
  • 37. arguments - Drei Chancen hatte er ;-) Arrest thief in... 2times! Arrest thief in... 1times! Arrest thief in... 0times! Thief arrested! - Die Aufgerufene Funktion ruft den Aufrufer dynamisch auf und muss nichts über dessen Funktionsnamen etc. wissen. - Es lassen sich so endliche und unendliche dynamische Rekursionsschleifen bzw. Ping-Pongs erstellen. 37 Freitag, 20. November 2009 37
  • 38. Funktionalität bestehender Funktionen dynamisch erweitern 38 Freitag, 20. November 2009 38
  • 39. Funktionalität bestehender Funktionen dynamisch erweitern - Gründe - Bestehende Funktionen nicht weiter aufblähen - Mixen mehrerer Funktionalitäten zu einer neuen Funktion 39 Freitag, 20. November 2009 39
  • 40. Delegation! 40 Freitag, 20. November 2009 40
  • 41. Delegation - Funktionen miteinander vereinen (Mixing) function delegate() { var stack = arguments; return function() { for (var i=0; i<stack.length; i++) { stack[i](arguments); } }; } var func1 = function() {console.debug(arguments)}; var func2 = function() {console.debug(arguments)}; func3 = delegate(func1, func2); func3("C"); - „func3()“ ruft „func1()“ und „func2()“ mit seinen Aufrufparametern auf! 41 Freitag, 20. November 2009 41
  • 42. Folgefehler durch Objektreferenzierung verhindern 42 Freitag, 20. November 2009 42
  • 43. Folgefehler durch Objektreferenzierung verhindern - Standard: Mit Referenzen arbeiten: var aron = {name: "Aron Homberg"}; var sascha = aron; sascha.name = "Sascha Hameister"; console.debug(aron); -> aron.name -> „Sascha Hameister“ - Achtung: Versteckte Bugs! Durch die Verwendung als Referenz wurde das Objekt Aron ebenfalls manipuliert! - Skalare Typen werden immer kopiert, nie referenziert. 43 Freitag, 20. November 2009 43
  • 44. Objekte klonen! 44 Freitag, 20. November 2009 44
  • 45. Objekte klonen - Lösung: Objekte und ihre Attribute (1st-Level) klonen! function clone(props) { var tobj = {}; for(var x in props){ tobj[x] = props[x]; } return tobj; } var aron = {name: "Aron Homberg"}; var sascha = clone(aron); sascha.name = "Sascha Hameister"; console.debug(aron); -> aron.name -> „Aron Homberg“ // Bleibt unverändert! - Diese Funktion klont lediglich die erste Attribut-Ebene eines Objekts. In tieferen Ebenen blieben Referenzen erhalten. Freitag, 20. November 2009 45
  • 46. Keywords 46 Freitag, 20. November 2009 46
  • 47. Keywords - instanceof - typeof - with - delete - in - continue - new 47 Freitag, 20. November 2009 47
  • 48. Keyword: instanceof 48 Freitag, 20. November 2009 48
  • 49. Keyword: instanceof - Gibt true zurück, wenn das Objekt die Instanz einer gegebenen Klasse ist. var example = 'FOO'; alert(example instanceof String); // false var example = new String('FOO'); alert(example instanceof String); // true 49 Freitag, 20. November 2009 49
  • 50. Keyword: typeof 50 Freitag, 20. November 2009 50
  • 51. Keyword: typeof var example = 'FOO'; alert(typeof example); // string var example = 10; alert(typeof example); // number var example = true; alert(typeof example); // boolean var example = /foo/ig alert(typeof example); // object var example = []; alert(typeof example); // object var example = {}; alert(typeof example); // object 51 Freitag, 20. November 2009 51
  • 52. Keyword: with 52 Freitag, 20. November 2009 52
  • 53. Keyword: with with (document.getElementById('example')) { innerHTML = 'HTML INHALT'; style.color = '#123456'; style.height = '20px'; } 53 Freitag, 20. November 2009 53
  • 54. Keyword: delete 54 Freitag, 20. November 2009 54
  • 55. Keyword: delete - Per delete können Zuweisungen aller Art hart gelöscht werden: var object = { attribute1 : 'value1', attribute2 : 'value2' }; ⋮ delete object.attribute1; Mit „delete“ lässt sich Speicher freiräumen. Temporärvariablen bei Iterationen sollten so immer „Garbage collected“ werden. 55 Freitag, 20. November 2009 55
  • 56. Keyword: delete - Aufpassen bei Arrays oder Iterationen! var anArray = ['foo', 'bar']; delete anArray[1]; for (var i = 0; i < anArray.length; i++) { console.log(anArray[i]); // foo, undefined } Es wird hart gelöscht. Eine Änderung der Indizes oder des length- Attributes des Arrays erfolgt nicht! 56 Freitag, 20. November 2009 56
  • 57. Keyword: delete - ACHTUNG: delete() löscht je nach Implementation (Javascript- VM / Interpreter) hart die Referenz aus dem Memory. - Bei Zugriff auf einen so gelöschten Wert können dadurch kritische Interpreter / VM-Runtime Execution Fehler auftreten. 57 Freitag, 20. November 2009 57
  • 58. Keyword: in 58 Freitag, 20. November 2009 58
  • 59. Keyword: in var object = { attribute1 : 'value1', attribute2 : 'value2' }; 'attribute1' in object // TRUE var object = { attribute1 : 'value1', attribute2 : 'value2' }; var idx; for (idx in object) { alert(object[idx]); // two alerts… value1, value2 } 59 Freitag, 20. November 2009 59
  • 60. Keyword: in (Prototypes!) Object.prototype.example = function () {}; var object = { attribute1 : 'value1', attribute2 : 'value2' }; var idx; for (idx in object) { alert(object[idx]); // Was erwarten Sie? } value1 value2 function () {} 60 Freitag, 20. November 2009 60
  • 61. Keyword: in (Prototypes!) - Bei der Nutzung von in bei jedem Cycle Plausibilitätsprüfung des aktuellen Typs Object.prototype.example = function () {}; var object = { attribute1 : 'value1', attribute2 : 'value2' }; var currentObject; var idx; for (idx in object) { currentObject = object[idx]; if (typeof currentObject === 'string') { alert(object[idx]); // two alerts… value1, value2 } } 61 Freitag, 20. November 2009 61
  • 62. Keyword: continue 62 Freitag, 20. November 2009 62
  • 63. Keyword: continue outerLabel: for (var i = 0; i < 5; i++) { innerLabel: for (var j = 0; j < 5; j++) { if (j == 2) { continue outerLabel; } } } 63 Freitag, 20. November 2009 63
  • 64. Keyword: new 64 Freitag, 20. November 2009 64
  • 65. Keyword: new function MyClass () {} var foo = new MyClass(); var bar = MyClass(); // Unterschied? function MyClass () { if (!(this instanceof MyClass)) { throw 'You tried to instantiate MyClass without new.'; } } 65 Freitag, 20. November 2009 65
  • 66. Powerful known Javascript- Features! Vielen Dank! :-) 66 Freitag, 20. November 2009 66