SlideShare a Scribd company logo
1 of 125
Download to read offline
UKLUG 2011
JavaScript Blast




                                 Manchester, 2011-05-24


Innovative Software Solutions.
www.assono.de
Thomas Bahn
●
    Graduated in mathematics, University of Hannover
●
    Developing in Java and RDBMS since 1997
●
    Dealing with Notes/Domino since 1999:
    development, administration, consulting
    and trainings
●
    Frequent speaker at technical conferences about
    IBM Lotus Notes/Domino and author for THE VIEW

    tbahn@assono.de
    www.assono.de/blog
    +49/4307/900-401


www.assono.de                                      Page 2
Declaration of Variables
●
    Simple variable declaration:
    var name;
●
    Variable declaration with value assignment:
    var name = value;
●
    SSJS only (Server Side JavaScript): typed variable
    declaration:
    var name : type = value;
●
    Best Practice: Declare all variables at the top of a
    function (like you should in LotusScript, but not in
    Java, because of the scopes, covered later).




www.assono.de                                          Page 3
Types of Variables
●
    “loose typing” doesn't mean untyped!
●
    There are exactly 6 types in JavaScript
     - String
     - Number
     - Boolean
     - Object
     - null
     - undefined




www.assono.de                                 Page 4
Special Strings
●
        escape character
●
     one backslash
●
    ' simple quote
●
    " double quote
●
    n new line
●
    r carriage return
●
    t tabulator
●
    u Unicode character, e.g. u042F ⇒ Я




www.assono.de                               Page 5
String Object
●
    Useful methods of the String object
     - toUpperCase(), toLowerCase(): like LotusScript
     - charAt(position): character at given position
     - indexOf(searchString): position of
       searchString
     - indexOf(searchString, startPos):
       Position of searchString after startPos
     - lastIndexOf(suchstring): ditto, but backwards
     - substring(start, end): part of string
     - slice(start, end): like substring, but when
       end is negative, length is added (counts from end)
     - split(separator): splits string into an array


www.assono.de                                         Page 6
String Concatenation
●
    + and += are fast in all browsers, but IE7 (and older)
●
    array.join is fast in IE7, but slower than + or += in
    all other browsers.
●
    string.concat is mostly slower then simple + or +=.




www.assono.de                                          Page 7
String Trimming
●
    You can trim strings with for loops and charAt to
    determine the first and the last non-whitespace char
    and using slice to cut the result out off the string.
●
    Or you can use regular expressions, e.g.
    if (!String.prototype.trim) {
        String.prototype.trim = function() {
             return this.replace(/^s+/, "").
                           replace(/s+$/, "");
        }
    }
●
    What's faster depends on the amount of whitespace at
    the start and at the end of the string.



www.assono.de                                          Page 8
Numbers and the Number Object
●
    All numbers are 64-bit floating point (“double”).
●
    Rounding differences through binary-decimal-
    conversion
●
    Bit-shifting (<<, >>) possible, but inefficient
●
    Number.MAX_VALUE ⇒ 1.7976931348623157e+308
    Number.MIN_VALUE ⇒ 5e-324
●
    Number.toString(basis), e.g.
●
    var a = 100;
●
    a.toString(16)  "64"
●
    a.toString(2)  "1100100"

www.assono.de                                           Page 9
Heads up: parseInt and Octal Numbers
●
    0x prefix for hexadecimal numbers, e.g. 0xFF
●
    0    prefix for octal numbers, e.g. 014 (=12)
●
    Caution using parseInt(), e.g.
     - parseInt("08") ⇒ 0,
       parsed until first invalid character and
     - parseInt(08) ⇒ Error:
       08 is not a legal ECMA-262 octal constant
●
    Particularly with regard to user input, e.g. month
●
    Better:
    always call with radix as second parameter:
    parseInt("08", 10)


www.assono.de                                            Page 10
Math Object
●
    Useful constants and methods of the Math object:
     - Math.PI ⇒ 3.141592653589793
     - Math.E ⇒ 2.718281828459045
     - Math.SQRT2 ⇒ 1.4142135623730951
     - Math.LN2 ⇒ 0.6931471805599453
     - Math.LN10 ⇒ 2.302585092994046
     - Math.random() ⇒ 0 <= random number < 1
     - Math.round(), Math.floor(), Math.ceil()
     - Math.sin(), Math.cos(), Math.atan()
     - Math.min(), Math.max()
     - Math.pow(), Math.sqrt()



www.assono.de                                          Page 11
NaN = Not a Number
●
    “contagious” in calculations
●
    Not equal to anything (including NaN)
●
    Test with isNaN()
●
    typeof NaN ⇒ "number"




www.assono.de                               Page 12
Infinity
●
    e.g. 1/0 ⇒ Infinity
●
    Greater than the largest valid number:
    Infinity > Number.MAX_VALUE
●
    “contagious” in calculations, but
     - 1/Infinity ⇒ 0
     - Infinity/Infinity ⇒ NaN




www.assono.de                                Page 13
Boolean
●
    !    Logical Not
●
    && Logical And
●
    || Logical Or
●
    Lazy evaluation: calculate only, if (still) necessary
●
    In LotusScript, both sides of And and Or are
    evaluated, even if not necessary for the result.
●
    Example:
    var a = 1;
    true || (a = 2);
    a ⇒ a is still equal 1



www.assono.de                                          Page 14
“Falsy” Values
●
    Following values are “falsy”:
     - false
     - null        (empty, set intentionally)
     - undefined (uninitialized or non-existent)
     - ""          (empty string)
     - 0
     - NaN
●
    All other values are considered true, even
    - "0"
    - "false"




www.assono.de                                      Page 15
Heads up: Test, if Variable is Defined
●
    Seen often, but (over-)simplified:
    if (a) {
       …
    }
●
    Caution: the code block { … } will be executed,
    if a is undefined, but also, if it's equal to false,
    null, "" or 0
●
    Better way:
    if (typeof a !== "undefined") {
       …
    }



www.assono.de                                              Page 16
Comparison Operators
●
    ==          Equality with type conversion (if necessary)
    !=          Inequality with type conversion (if necessary)
●
    ===         Equality without type conversion
    !==         Inequality without type conversion
●
    Examples
     - "1" == 1 ⇒ true
     - "1" === 1 ⇒ false
●
    Best Practice: Always use === and !==
●
    switch
     - Comparison with type conversion



www.assono.de                                             Page 17
Ternary Operator
●
    a ? b : c
     - ? is the Ternary Operator
     - Returns b, if a is true, else c
●
    Example:
    (typeof a !== "undefined") ? a : "Default"




www.assono.de                                Page 18
Default Operator ||
●
    || is logical Or
●
    Example
    var value = arg || "Default value";
●
    Assigns arg to value, if arg is true (not falsy), else
    "Default value"
●
    Useful for optional parameters of a function
●
    Caution, if false, null, "", 0 could be valid values!




www.assono.de                                         Page 19
Guard Operator &&
●
    && is logical And
●
    Example:
    return obj && obj.member;
●
    Returns obj.member, if obj is true (not falsy), else
    obj
●
    Circumvents possible error when accessing
    undefined.member
●
    Caution, if false, null, "", 0 could be valid values!




www.assono.de                                         Page 20
More Operator Magic
●
    + as unary operator converts strings (and date/time
    values) into numbers:
    +"1" === 1
●
    !! converts anything into boolean:
●
    !!"1" === true




www.assono.de                                        Page 21
Arrays
●
    Arrays are objects (inherit from Object)
●
    Their length attribute is always the greatest index
    plus 1
●
    length can also be set.
     - setting a larger number enlarges the array by
       appending undefined values
     - setting it to a smaller number shortens the
       array by cutting surplus elements
●
    Array literals: ["one", "two", "three"]
●
    You can use strings like character arrays:
    var text = "abcd"; text[2] ⇒ "c"


www.assono.de                                         Page 22
Arrays (cont.)
●
    Useful methods of the Array object:
     - push and pop, to use an array as a stack
     - sort: sorts array
     - join(separator): joins the elements to a string
     - slice(start, end): returns part of array,
       doesn't change the source array
     - splice(start, end, additional parameters):
       returns part of array, replaces it by the additional
       parameters or removes it without leaving a gap




www.assono.de                                           Page 23
Heads up: delete
●
    delete arr[2]
    Deletes the 3rd element, or to be more precise:
    sets the 3rd element to undefined.
    var arr = ["one", "two", "three", "four"];
    delete arr[2];
    arr ⇒ ["one", "two", undefined, "four"]
●   arr.splice(2, 1)
    Removes the 3rd element and the remaining
    elements move up
    var arr = ["one", "two", "three", "four"];
    arr.splice(2, 1);
    arr ⇒ ["one", "two", "four"]



www.assono.de                                     Page 24
typeof Operator
●
    Results of typeof are sometimes not too useful:
    Object of type       Result of typeof
    object               "object"
    function             "function"
    array                "object"
    number               "number"
    string               "string"
    boolean              "boolean"
    null                 "object"
    undefined            "undefined"

●
    Use instanceof on objects (details follow)
www.assono.de                                         Page 25
for Loops
●
    for (init; comparison; increment) {
       ...
    }
●
    All three elements can contain multiple statements,
    separated by commas (!), e.g.
    for (
         var i = 0, result = "";
         i < 100;
         i++, result += i + "n"
    ) {...}




www.assono.de                                      Page 26
Loops and Conditions
●
    for, while and do-while loops perform similarly.
●
    Avoid for-in loop whenever possible.
●
    Reduce the number of iterations and the amount of
    work done in one iteration when possible.
●
    Tune if-else if-else if-...-else chains by
    putting the conditions in the “right” order: move
    most frequently met conditions up to the front.
●
    Consider using look-up tables: instead of a long
    switch statement, put the results into an array once
    and access the results by index.



www.assono.de                                           Page 27
Heads up: with
●
    Instead of accessing object members through the dot
    operator (obj.member) you can use with, especially
    if you want to access a lot of members of one object:
    with (obj) {
         member = "value";
    }
●
    If obj contains an attribute with the name member,
    its value will be set to "value" …
●
    … else a new global variable member is created and
    "value" is assigned




www.assono.de                                        Page 28
Heads up: Semicolon Insertion
●
    When an error occurs, the JavaScript interpreter
    inserts an semicolon at the end of a line and
    retries the execution.
●
    Example:
    return
    {
       state: "ok"
    };
●
    will return undefined, because a semicolon will be
    inserted after the return statement.
●
    This behavior can mask errors.



www.assono.de                                          Page 29
Error Handling with try – catch – finally
●
    Just try it... and react on errors
●
    Example:
    try {
       // an error could occur in here
    } catch (e) { // e is an Error object
       // do something about this error
       alert(e.name + ": " + e.message);
    } finally {
       // will be executed regardless of an
       // error, e.g. to free up ressources
    }
●
    Only one catch-block (not many as in Java)


www.assono.de                                    Page 30
Error Handling (cont.)
●
    throw creates (fires) a new error
●
    Examples:
    throw new Error("Message");
    throw {
       name: "Name",
       message: "Message"
    }
●
    window.onerror = myErrorHandler
    Sets error handling function in the browser, which
    will be called on every error afterwards
●
    Thus you can install a global error logging and e.g.
    use AJAX to send an error log to the server.


www.assono.de                                          Page 31
Heads up: References
●
    Variables contain references
●
    Parameters are passed to functions as references,
    not values.
●
    If a parameter is not an object:
     - If the function assigns a new value to it, it's only
       modified in the function, the calling code still only
       sees the old value.
●
    If a parameter is an object:
     - If the function assigns a new object to it, it's only
       modified in the function. The calling code still has
       access to the old object (and only to the old one).
     - Caution: If the function modifies object members,
       the object is changed for the calling code, too!
www.assono.de                                            Page 32
Heads up: References (cont.)
function test1(paramA) {paramA = "changed";}
a = "original";
test1(a);
a ⇒ "original"

function test2(paramA) {paramA = {"m":"new m"};}
a = {"m": "original m"};
test2(a);
a.m ⇒ "original m"

function test3(paramA) {paramA.m = "changed m";}
a = {"m": "original m"};
test3(a);
a.m ⇒ "changed m"



www.assono.de                              Page 33
Functions – Data – Objects
●
    Functions are first-class objects!
     - They can have attributes and methods (i.e. inner
       functions).
●
    Functions are data!
     - They can be stored in variables.
     - They can be passed to and returned by functions.
●
    This can't be done in LotusScript, nor Java.
●
    JavaScript is a functional language.




www.assono.de                                        Page 34
Definition of Functions
●
    function f (args) { ... };
    is an abbreviation for
    var f = function (arg) { ... } ;
●
    Anonymous functions
    function (args) { ... };
●
    Inner functions
    function f(args) {
       function g(args) { ... };
       var h = function (args) { ... };
       this.i = function (args) { ... };
    }
●
    new Function(args, body)
    f = new Function("a", "b", "return a + b");

www.assono.de                                Page 35
Source Code of a Function
●
    Useful: f.toString() returns the definition of
    function f, i.e. its source code
●
    Doesn't work with predefined functions though.
●
    Examples:
    function f() {
       alert(new Date());
    };
    f.toString()
    ⇒ "function f() { alert(new Date); }"

    Object.toString.toString()
    ⇒ "function toString() { [native code] }"


www.assono.de                                        Page 36
Function Parameters
●
    Declaration of a function contains the list of the
    expected parameters
●
    Parameters are local variables of the function




www.assono.de                                            Page 37
“Unexpected” Function Parameters with arguments
●
    Access to all parameters with arguments, an array-
    like construct
●
    Example:
    function sum() {
       var i, result = 0;
       for (i = 0; i < arguments.length; i++) {
             result += arguments[i];
       }
       return result;
    }
    sum(1, 2, 3, 4, 5) ⇒ 15




www.assono.de                                      Page 38
arguments (cont.)
●
    arguments has the attribute length, but not the
    other methods of the Array object.
●
    Work around: Function.prototype.apply()
    function removeFirstArgument() {
        var slice = Array.prototype.slice;
        return slice.apply(arguments, [1]);
    } ;
    removeFirstArgument(1, 2, 3, 4)
    ⇒ [2, 3, 4]
●
    arguments.callee contains a reference to the called
    function, which can become handy in anonymous
    functions (“banned” in HTML 5)


www.assono.de                                         Page 39
Configuration Object
●
    Tip: Use an object as (only) parameter, which
    contains all needed information.
●
    Benefits:
    - You can always add new “inner parameters”
      without changing existing code calling this
      function.
    - You have “named parameters”.
    - Defaults should be used for all parameters not in
      the value object.




www.assono.de                                        Page 40
Configuration Object (cont.)
●
    Example:
    function showHide(argsList) {
       var node = argsList.node || document;
       var state = argsList.state || "show";
       var term = argsList.term || "true";
       ...
    };
    showHide({
       node: document.getElementById("blubb"),
       state: "hide";
    })




www.assono.de                                Page 41
Heads up: Function Results
●
    A function without return returns undefined.
●
    A function with return x returns x.
●
    A constructor (details follow) without return
    returns a reference to the new object.
●
    Caution: A constructor with return x returns x, if
    x is an object, else it returns the new object.




www.assono.de                                       Page 42
Memoization
●
    Cache results of function calls for later reuse
●
  Example:
function factorial(n) {

      if (!factorial.cache) {
           factorial.cache = {"0": 1, "1": 1};
      }

      if (!factorial.cache.hasOwnProperty(n)) {
           factorial.cache[n] = n * factorial(n-1);
      }

      return factorial.cache[n];
}



www.assono.de                                         Page 43
Function Calls and this
●
    Functions always run in a context.
●
    this points to the current context.
●
    An inner function cannot access its outer function's
    current context.
●
    Convention: var that = this;
●
    There are (at least) 4 ways to call functions:




www.assono.de                                         Page 44
Function Calls (cont.)
●
    1st Functional form f(args):
    f will be executed in the global context.
●
    2nd Method form obj.f(args) and obj["f"](args):
    f will be executed with obj as context.
●
    3rd Constructor form new f(args):
    f runs in the context of the newly created, empty
    object, which will be returned by the function.
●
    4th f.apply(obj, args) and
    f.call(obj, arg1, arg2, ...):
    f runs in the context of obj.
    f doesn't need to be method of obj!


www.assono.de                                           Page 45
Function Calls (cont.)
●
    Caution:
    If you want to call a method of an object, but forget
    to specify the object, no error will be thrown and the
    method will be executed in the global context.




www.assono.de                                          Page 46
Call Chaining
●
    By returning this in (all) methods, you can “chain”
    method calls to one object and get more concise
    code, do less typing, and structure your code better.
●
    Example:
    var obj = { value: 1,
       increment: function () {
             this.value += 1; return this;
       },
       add: function (v) {
             this.value += v; return this;
       },
       shout: function () {
             alert(this.value); return this;
       }
    };
    obj.increment().add(3).shout(); // output: 5
www.assono.de                                         Page 47
Anonymous Functions
●
    Used as parameters for other functions
     - when they are used only for this purpose
     - in the called functions they have a name:
       the name of the parameter
●
    Example:
    call-back functions for Ajax calls, for setTimeout()
    or setInterval():
    setTimeout(
        function() { alert(new Date()); },
        1000
    )
●
    For immediate, one-time execution, e.g. for
    initializing

www.assono.de                                       Page 48
Anonymous Functions (cont.)
●
    You can hide code with anonymous functions.
●
    Example:
    (function () {
       var message = "Bye Bye!";
       window.onunload = function () {
             alert(message);
       };
    })(); // define function and execute it
●
    Keeps the global object clean
●
    Variable message is accessible by the anonymous
    function, but is invisible and inaccessible for other
    code (Closure!)


www.assono.de                                           Page 49
Self-Modifying Functions
●
    Example:
    f = function() {
       alert("First time");
       return function() {
             alert("Next time");
       };
    }();
    f();
    f.toString()
    ⇒ "function() { alert("Next time"); }"
●
    2 Alerts: "First time" and "Next time"
●
    Typical usage: one-time initialization and creation
    of an appropriate function for a special environment,
    e.g. the current browser
www.assono.de                                         Page 50
Currying
●
    Create a new function with at least one parameter
    less than an existing one.
●
    Example:
    function addGenerator(a) {
       return function(b) {
             return a + b;
       };
    };
    addOne = addGenerator(1);
    addOne(47) ⇒ 48




www.assono.de                                       Page 51
Function Object
●
    Useful attributes and methods of the Function
    object:
     - length: number of expected parameters
     - caller: calling function (not standardized)
     - call(obj, param1, param2, ...):
       executes function in the context of obj
     - apply(obj, paramsArray):
       like call, but all function parameters in one array




www.assono.de                                          Page 52
“eval is evil”
●
    Performance is bad.
●
    Security: use only on absolutely trustworthy
    argument
●
    Same considerations apply to
    new Function(args, body)
●
    and to call setInterval and setTimeout with strings
    instead of function literals.




www.assono.de                                      Page 53
alert()
●
    Auxiliary “debugger”
●
    Blocks execution of JavaScript
●
    Caution when using alert() in combination with
    asynchronous Ajax calls




www.assono.de                                        Page 54
Heads up: Scopes
●
    Scope: Where is a variable visible and accessible?
●
    There are only two kinds of scopes in JavaScript:
     - global scope
     - function scope
●
    In particular, there is no block scope like in Java
●
    Caution: Accessing an undeclared variable doesn't
    throw an error, but creates a new, global variable
    (think about typos).
●
    Example:
    function () {
       a = 1; // without var: a is global!
    }

www.assono.de                                             Page 55
Scopes (cont.)
●
    Which output do you expect here?

    var a = 1;
    function f() {
        alert(a);
        var a = 2;
        alert(a);
    }
    f()




www.assono.de                          Page 56
Scopes (cont.)
●
    Results in 2 alerts




●
    2 phases:
     - local variables are found and memory reserved
     - code is executed and e.g. values assigned




www.assono.de                                          Page 57
Scopes (cont.)
●
    JavaScript has a lexical scope.
●
    The context of a function is created, when the
    function is defined, not when it is executed.




www.assono.de                                        Page 58
Speed of Data Access
●
    Literal values are fastest to access
●
    Local variables are second.
●
    Array items and object members are considerably
    slower.
●
    Going up the scope chain is costly.
●
    This is true for the prototype chain, too.
●
    Best Practice:
    Create local variables to cache array items, object
    members, global variables or those variables “up the
    chain”, especially when handling DOM/BOM objects.



www.assono.de                                         Page 59
Context
●
    Context: “place” where variables and members “live”
●
    Each object has it own context.
●
    Plus there is a global context.
●
    Functions have access to the attributes and method of
    the context, in which they have been defined …
●
    … and all the way up to the global context.




www.assono.de                                       Page 60
Context (cont.)
●
    The global object in browsers is the window object!
●
    Example:
    a = 1;
    window.a ⇒ 1
●
    Global functions like parseInt are methods of the
    global object:
    parseInt === window.parseInt ⇒ true




www.assono.de                                         Page 61
Context (cont.)
●
    Lexical context, i.e. “as written in code”, not as
    executed
●
    Example:
    function outer() {
       var o = 1;
       function inner() {
             alert(o);
       }
    }
●
    At the time inner is defined, o is already known.




www.assono.de                                            Page 62
Context (cont.)
●
    Another example:
    function outer() {
       var o = 1;
       return (function() {
             alert(o);
       })
    };
    var f = outer();
    f() ⇒ 1
    delete outer;
    f() ⇒ 1 (!)
●
    o is still known, after outer has been executed – even
    after it has been deleted, f has still access to o!


www.assono.de                                        Page 63
Closures
●
    Even after an outer function has been completed,
    inner functions can access its attributes and functions.
●
    This feature is called Closure.
●
    Most unusual concept of JavaScript for LotusScript
    and Java developers.
●
    But Closures are probably the single most important
    feature of the JavaScript language!




www.assono.de                                          Page 64
Heads up: Reference, not Copy of Value
●
    f has a reference to o, not a copy of its value at
    definition time.
●
    When o is modified after f has been defined, this
    effects f.
●
    Decoupling with mediator function: a function, which
    is defined and immediately executed.




www.assono.de                                            Page 65
Heads up: Reference, not Copy of Value (cont.)
●
    Example with an unexpected result:
    function f() {
       var a = [];
       for (var i = 0; i < 5; i++) {
            a[i] = function() {
                  return i;
            }
       }
       return a;
    };
    var a = f();
    a[0]() ⇒ 5 (should be 0)




www.assono.de                                    Page 66
Heads up: Reference, not Copy of Value (cont.)
●
    Improved example:
    function f() {
       var a = [];
       for (var i = 0; i < 5; i++) {
            a[i] = (function(x) {
                 return function() {
                      return x;
                 }
            })(i);
       }
       return a;
    };
    var a = f();
    a[0]() ⇒ 0

www.assono.de                                    Page 67
Objects
●
    Objects are sets of name-value pairs.
●
    Names are Strings.
●
    Values can be of any type.
●
    Like lists in LotusScript
●
    Correlate to “associative arrays” or “hash maps” in
    other programming languages




www.assono.de                                         Page 68
Creation of Objects
●
    Object literals like {}
    var object = {};
●   new
    var object = new Constructor();
●
    Object.create(...)
    actually, you probably never need this




www.assono.de                                Page 69
Object Literals and Access to Members
●
    var obj = {
       firstName: "Thomas",
       "city of birth": "Hannover",
       "123": 123,
       "@$&%": 1,
       doIt: function() {
            alert(this.firstName);
       }
    };
    obj.doIt()
●
    obj.firstName is "Thomas",
    obj["city of birth"] is "Hannover" etc.
●
    The second kind is necessary for reserved words
    and invalid identifiers.
www.assono.de                                         Page 70
Modifying Objects
●
    var obj = {
       firstName: "Thomas",
       doIt: function() {
            alert(this.firstName);
       }
    };
    obj.firstName = "Lydia";
    obj.doIt = function() {
       alert("First Name: " + this.firstName);
    };
    obj.doIt()
●
    Attributes and methods can be changed at run-time.
●
    This isn't possible in class-based programming
    languages like LotusScript.
www.assono.de                                        Page 71
Constructors
●
    Functions can be used as constructors (with new):
    function Factory(location) {
        this.location = location;
    };
    var f = new Factory("Kiel")
●
    A new, empty object is created and Factory is
    executed in its context.
●
    Default return value is this newly constructed object.
●
    When a constructor is completed with return x, x
    will be returned, (only) if x is an object, else the new
    object is returned.



www.assono.de                                           Page 72
Constructors (cont.)
●
    Objects have an constructor attribute, which points
    to the constructor of the object at its creation time.
●
    Example creates new, similar object:
    function Factory(totalEmployees) {
       this.totalEmployees = totalEmployees;
    };
    var f1 = new Factory(100);
    var f2 = new f1.constructor(200);
    f2 ⇒ Object { totalEmployees = 200 }




www.assono.de                                         Page 73
Constructors (cont.)
●
    Convention: Constructor names should start with an
    capital letter.
●
    Caution:
    If you forget new, the function will still be executed,
    but in the global context instead in the context of
    the newly created object.




www.assono.de                                            Page 74
Self-Invoking Constructors
●
    In order to avoid the problem with the missing new,
    write your constructors this way:
    function Car() {
        if (!(this instanceof Car)) {
              return new Car();
        }
        // do the normal construction stuff
    }
●
    If Car is executed without new, it runs in the global
    context, therefore this points the global object, which
    is not a Car.




www.assono.de                                          Page 75
instanceof Operator
●
    instanceof operator compares with constructor:
    f1 instanceof Factory ⇒ true
    f1 instanceof Object ⇒ true
    f1 instanceof String ⇒ false
●
    instanceof is true for “super-objects”, too.




www.assono.de                                        Page 76
for ... in Loops
●
    Iterate over all attributes and methods of an object –
    and its “ancestors” (but not all properties are
    “enumerable”).
●
    Example:
    for (prop in obj) {
       alert(prop.toString());
    }
●
    Best Practice: Use obj.hasOwnProperty("name"),
    which is true, only if obj has the attribute name, to
    distinguish between “own” and “inherited” properties.




www.assono.de                                         Page 77
Enhancing Existing Objects
●
    You can enhance existing objects after they have
    been created …
●
    … even objects of the JavaScript language, like
    Function, Object and String!
●
    Example:
    String.prototype.trim = function() {
       return this.replace(/^s+|s+$/g, "");
    }
    "'" + "   test   ".trim() + "'" ⇒ "'test'"
●
    Some people consider augmenting built-in prototypes
    a bad practice.



www.assono.de                                         Page 78
Enhancing Existing Objects (cont.)
●
    Caution: What if the next version of JavaScript has
    your addition built-in?
●
    Or other developers have the same idea?
●
    At least, you should check before you enhance
    language objects.
●
    Example:
    if (!String.prototype.trim) {
       String.prototype.trim = function() {
           return this.replace(/^s+|s+$/g, "");
       }
    }



www.assono.de                                        Page 79
Public Attributes and Methods
●
    Principally, all properties, i.e. attributes and methods
    of an object are publically visible and usable.
●
    Example:
    function Factory() {
       this.totalGoods = 0;
       this.produce = function() {
             this.totalGoods++;
       };
    };
    var f = new Factory();
    f.totalGoods = 1000;
    f.produce();
    f.totalGoods ⇒ 1001


www.assono.de                                           Page 80
Private Attributes and Methods
●
    Local variables and parameters of the constructor
    get private attributes and methods of all objects
    created with function.
●
    Only inner functions of the constructor can access its
    local variables and functions, its private properties.
●
    Example:
    function Factory(totalEmployees) {
       var totalGoods = 0;
       var produce = function() {
             totalGoods++;
       };
    };
    var f = new Factory();
    f.produce() ⇒ Error
www.assono.de                                         Page 81
Privileged Methods
●
    Privileged methods are publically callable and can
    access private properties.
●
    Definition in the constructor:
    this.privilegedFunction = function() {...}
●
    They cannot be added to the constructor later!
●
    Closures again!




www.assono.de                                        Page 82
Privileged Methods (cont.)
●
    Example:
    function Factory() {
       var totalGoods = 0;
       this.produce = function(count) {
             totalGoods += count;
       };
       this.getTotalGoods = function() {
             return totalGoods;
       }
    };
    var f = new Factory();
    f.produce(5);
    f.getTotalGoods() ⇒ 5



www.assono.de                              Page 83
“Class Attributes”
●
    In Java, there is a static modifier for class
    attributes and methods.
●
    In JavaScript, there are no classes, but …
●
    … you can add attributes to the constructor function
    itself (the Function object), which are usable like
    class attributes.
●
    Useful for logging, book keeping (counting created
    objects), object pools, configuration of an “object
    factory” etc.




www.assono.de                                         Page 84
“Class Attributes” (cont.)
●
    Example:
    var Factory = function() {
       Factory.totalFactories++;
       var totalGoods = 0;
       this.produce = function(count) {
             totalGoods += count;
       };
       this.getTotalGoods = function() {
             return totalGoods;
       }
    };
    Factory.totalFactories = 0;
    var f1 = new Factory();
    var f2 = new Factory();
    Factory.totalFactories ⇒ 2
www.assono.de                              Page 85
Inheritance à la JavaScript
●
    Each object has a prototype attribute, normally {}.
●
    Functions are objects, constructors are functions,
    therefore constructors have this attribute, too.
●
    You can add new properties to a prototype object
    or even replace it completely.




www.assono.de                                            Page 86
Inheritance à la JavaScript (cont.)
●
    Search sequence for properties:
     - current object a
     - a.constructor.prototype
     - a.constructor.prototype.constructor.prototype
     - etc.
     - at last: Object
●
    Prototype chain
●
    This can be used as “inheritance”.
●
    All changes to an object's prototype take effect
    immediately – to the object itself and it “successors”
    in the prototype chain.


www.assono.de                                          Page 87
Inheritance à la JavaScript (cont.)
●
    Properties of an object superimpose properties with
    the same name up in the chain – they override
    “inherited” properties.
●
    Methods in a constructor are copied into each
    created object and use up some memory.
●
    You can add them to the object's prototype instead.
●
    This consumes less memory, but costs some
    performance (more lookups up the chain).




www.assono.de                                        Page 88
Prototypical Inheritance
●
    Example:
    var Factory = function() {
       this.totalGoods = 0;
    };
    var f = new Factory();
    Factory.prototype.produce =
       function(count) {
             this.totalGoods += count;
       };
    f.produce(10);
    f.totalGoods ⇒ 10




www.assono.de                            Page 89
Prototypical Inheritance (cont.)
●
    This works even after the object's creation!
●
    In the example: Object f is created, then produce is
    defined and added to the Factory's prototype.
●
    The function produce is not found directly in f, but in
    its prototype chain.
●
    Instead of
    Factory.prototype.produce = ...
    you can write
    f.constructor.prototype.produce = ...




www.assono.de                                          Page 90
Prototypical Inheritance (cont.)
●
    Another example:
    var Person = function (name) {
       this.name = name;
    };
    Person.prototype.getName = function () {
       return this.name;
    };
    var User = function(name, password) {
       this.name = name;
       this.password = password;
    };
    User.prototype = new Person();
    var me = new User("Thomas", "secret");
    alert("User " + me.getName() + " created")


www.assono.de                                Page 91
Heads up: Replacing the prototype Object
●
    If you replace the prototype object instead of
    enhancing the existing one, this only takes effect on
    objects created afterwards.
●
    Objects has an internal pointer to the prototype
    object at the time, they were created. This pointer
    isn't changed, when you overwrite the prototype
    object.
●
    In Firefox, this internal attribute is called __proto__.
●
    Besides, after replacing the prototype object the
    constructor attribute sometimes points to the
    wrong object. Therefore you should also set the
    constructor after replacing the prototype object.

www.assono.de                                           Page 92
Heads up: Replacing the prototype Object (cont.)
●
    Example:
    var Person = function (name) {
       this.name = name;
    };
    Person.prototype.getName = function () {
       return this.name;
    };
    var User = function(name, password) {
       this.name = name;
       this.password = password;
    };
    User.prototype = new Person();
    User.prototype.constructor = User;



www.assono.de                                      Page 93
Access the “Super Class” with uber
●
    There is no direct access to the “super class”
●
    Convention: set the uber attribute to the prototype
    of the “super class”
●
    Example:
    User.prototype = new Person();
    User.prototype.constructor = User;
    User.uber = Person.prototype;




www.assono.de                                        Page 94
Simplification
●
    Simplify this by introducing a helper function:
    function extend(child, parent) {
       var F = function() {}; // empty function
       F.prototype = parent.prototype;
       Child.prototype = new F();
       Child.prototype.construtor = child;
       Child.uber = parent.prototype;
    }
●
    Usage:
    extend(User, Person);




www.assono.de                                    Page 95
Classical Inheritance in JavaScript
●
    There are different approaches to “simulate”
    classical, i.e. class-based inheritance in JavaScript
     - Douglas Crockford
     - Markus Nix
     - Prototype (JavaScript library)
     - many, many more




www.assono.de                                           Page 96
Classical Inheritance: Crockford's Way
●
    3 enhancements of Function
●
    Method method to simplify additions to Function
    Function.prototype.method = function (name, func)
    {
      this.prototype[name] = func;
      return this; // useful for call chaining
    };
●
    Method inherits for inheritance
    Function.method("inherits", function(parent) {
      this.prototype = new parent();
      return this;
    }); // minimalistic version without uber();




www.assono.de                                         Page 97
Classical Inheritance: Crockford's Way (cont.)
●
    3 enhancements of Function (cont.)
●
    Method swiss to copy properties from a parent
    object:
    Function.method("swiss", function (parent) {
      for (var i = 1; i < arguments.length; i += 1) {
        var name = arguments[i];
        this.prototype[name] = parent.prototype[name];
      };
      return this;
    });
●
    With swiss you can simulate multiple-inheritance or
    interfaces.



www.assono.de                                       Page 98
Classical Inheritance: Crockford's Way (cont.)
●
    Example of usage:
    var Person = function(name){this.name = name};
    Person.method("getName", function() {
        return this.name;
    });
    var User = function(name, password) {
        this.name = name;
        this.password = password;
    };
    User.inherits(Person);
    User.method("getPassword", function() {
        return this.password;
    });
    var b = new User("Thomas", "secret");
    b.getName() ⇒ "Thomas"
www.assono.de                                    Page 99
Parasitic Inheritance
●
    In a constructor call another constructor and return
    the object, it returns, after enhancing it.
●
    Example:
    function ExistingConstructor(a) {...};
    function NewConstructor(a, b) {
        var that = new ExistingConstructor(a);
        that.anotherAttribute = 0;
        that.anotherMethod = function (b) {...};
        return that; // instead of this (implicit)
    }
    var obj = new NewConstructor();
    obj



www.assono.de                                      Page 100
Parasitic Inheritance (cont.)
●
    Drawback: Changes and enhancements of
    NewConstructor.prototype won't be inherited.
●
    Example:
    var obj = new NewConstructor();
    NewConstructor.prototype.a = 1;
    typeof obj.a ⇒ "undefined"




www.assono.de                                 Page 101
Binding
●
    With function.call and function.apply you can
    borrow methods from other objects (remember use
    of function.slice with the arguments object).
●
    You can use this to permanently bind a method to an
    object, using a function like this:
    function bind(o, m) {
        return function () {
              return m.apply(o,
                          [].slice.call(arguments));
        };
    }
●
    Usage:
    var newObj = bind(oldObj, anotherObj.m);
    newObj.m();
●
    In HTML 5 there is a bind method in Function.
www.assono.de                                       Page 102
Copying Properties
●
    Instead of inheriting properties in some way, you can
    simply copy them to another object:
    function extend(parent, child) {
        var prop;
        child = child || {};
        for (prop in parent) {
             if (parent.hasOwnProperty(prop)) {
                    child[prop] = parent[prop];
             }
        }
        return child;
    }
●
    Usage:
    var kid = extend(parent);
    // add/overwrite properties of kid here

www.assono.de                                       Page 103
Mix-Ins
●
    Instead of just copying from one object, you can have
    the effect of “multiple inheritance” by having more than
    one source object:
    function mix() {
      var arg, prop, child = {};
      for (arg=0; arg<arguments.length; arg+=1) {
         for (prop in arguments[arg]) {
            if (arguments[arg].
                hasOwnProperty(prop)) {
              child[prop] = arguments[arg][prop];
            }
         }
      }
      return child;
    }


www.assono.de                                        Page 104
Global Variables

   Global Variables are evil  and you should avoid
   using them, wherever possible.
   Imagine the problems, if some JavaScript libraries
   use the same global variables – you'll get
   unpredictable (undeterministic) results...




www.assono.de                                       Page 105
Namespaces
●
    Namespaces help to keep the global context clean.
●
    Example:
    var de = {};
    de.assono = {};
    de.assono.HtmlHelper = {
       appendDiv: function(child, parent) {...};
       ...
    }
●
    Best Practice: Use the least amount of global
    variables possible; organize your code inside of
    namespace objects.



www.assono.de                                          Page 106
Loading JavaScript
●
    <script> tag in an HTML file: loads (if external) and
    executes JavaScript
●
    Loading JavaScript blocks loading of other resources
    (except some modern browsers).
●
    Executing JavaScript blocks everything else (loading,
    rendering) in the browser.
●
    Best Practice: Place <script> tags at the end of the
    HTML (where possible), then everything can be loaded
    and the page rendered beforehand.
●
    The page “seems” to load faster, users can read it...
●
    Best Practice: Combine many small JavaScript files
    to less bigger ones: Less requests, less overhead.
www.assono.de                                         Page 107
Loading JavaScript (cont.)
●
    <script> tag got a new, optional attribute in HTML 4:
    defer
●
    but it is only implemented in IE 4+ and Firefox 3.5+
●
    <script> tags programmatically created and inserted
    into the DOM don't block anything.
●
    If code is self-executing, you're done, else you have to
    react, when it's ready.
●
    In IE use script.onreadystatechange and
    script.readyState, else use script.onload to install
    a function to run, when the script is ready.



www.assono.de                                         Page 108
Helper function loadScript
function loadScript(url, callback) {

var script = document.createElement("script");
script.type = "text/javascript";

if (script.readyState) { // IE
   script.onreadystatechange = function() {
         if (script.readyState == "loaded" ||
             script.readyState == "complete") {
              script.onreadystatechange = null;
              callback();
         }
   };
} else {
…



www.assono.de                              Page 109
Helper function loadScript (cont.)
function loadScript(url, callback){
…
} else { // other browsers
   script.onload = function(){ callback(); };
}

script.src = url;
var head = document.getElementsByTagName("head");
head[0].appendChild(script);
}
●
    If necessary, you can chain loadScript calls.
●
    Very Best Practice: Load only loadScript directly in
    your page and use it to get the rest.



www.assono.de                                       Page 110
Scripting the DOM
●
    Accessing DOM objects is slow!
●
    Minimize the access to them, use local variables.
●
    One big modification is better than many small ones.
●
    Using innerHTML can be faster then using DOM
    methods, but not considerably faster (and even
    slower in some WebKit based browsers).
●
    Prefer the convenient and fast Selectors API methods
    (doc.querySelectorAll and doc.querySelector) to
    doc.getElementBy… whenever available (modern
    browsers).



www.assono.de                                           Page 111
Scripting the DOM (cont.)
●
    Reduce the number of repaints, and even more
    important, the number of reflows.
●
    Repaint: visible change of DOM, but no change of sizes.
●
    Reflow: visible change of DOM and the size and
    positions of the elements have to be recalculated.
●
    Cache style information.
●
    Combine or batch changes.
●
    Take elements out of the DOM tree, manipulate them
    and put them back.
●
    Use document fragments to build a DOM sub-tree
    (doc.createDocumentFragment) and add it in one step
    to the DOM.
www.assono.de                                        Page 112
Event Delegation
●
    Uncaught events bubble up the DOM tree.
●
    For repeating structures like tables or lists it's better
    to have one event handler for all events than one for
    each sub-element (e.g. row).
●
    The original target is stored in the event object.




www.assono.de                                            Page 113
Event Delegation (cont.)
●
  Example:
table.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
// exit, if target is not a row
if (target.nodeName !== 'TR') { return; }
// do something with the target, e.g. change style
// prevent default action and cancel bubbling
if (typeof e.preventDefault === 'function') {
   e.preventDefault();
   e.stopPropagation();
} else {
   e.returnValue = false;
   e.cancelBubble = true;
}
};
www.assono.de                              Page 114
Keeping the User Interface Responsive
●
    Execution of JavaScript blocks the UI
●
    Avoid long running scripts when possible, else split the
    task up and use timers to schedule the work.
●
    Example:
    function processArray(items, process, callback){
       var todo = items.concat(); // clone them
       setTimeout(function(){
             process(todo.shift());

              if (todo.length > 0){
                   setTimeout(arguments.callee, 25);
              } else {
                   callback(items);
              }
         }, 25);
    }
www.assono.de                                         Page 115
Keeping the User Interface Responsive (cont.)
●
    You can measure the time and continue, until a limit is
    reached. Then you set up a timer to continue from
    here on later.
●
    Example (excerpt in pseudo code):
    var start = +new Date();
    do {
       // do something
    } until (+new Date() - start > limit);
    if (still something to do) {
       // set up the timer
    }
●
    You add overhead, but the UI keeps responsive.
●
    Use the web workers API (new in HTML 5), when it's
    available in “your” target browsers.
www.assono.de                                        Page 116
Tools
●
    Mozilla Firefox with
    - Firebug:
      http://getfirebug.com/
    - Venkman (JavaScript debugger):
      http://www.hacksrus.com/~ginda/venkman/
●
    For other browsers (mainly for testing)
     - Firebug Lite:
       http://getfirebug.com/firebuglite
     - Fiddler:
       http://www.fiddler2.com/fiddler2/




www.assono.de                                   Page 117
Books
●
    Douglas Crockford: “JavaScript: The Good Parts”
    O'Reilly, Yahoo! Press, 2008, ISBN 978-0-596-51774-8,
    176 pages




    Douglas' Web site: http://www.crockford.com/


www.assono.de                                      Page 118
Books (cont.)
●
    Nicholas C. Zakas: “High Performance JavaScript”
    O'Reilly, Yahoo! Press, 2010, ISBN 978-0-596-80279-0,
    240 pages




    Nicholas' Web site: http://www.nczonline.net/


www.assono.de                                       Page 119
Books (cont.)
●
    Stoyan Stefanov: “JavaScript Patterns”
    O'Reilly, Yahoo! Press, 2010, ISBN 978-0-596-80675-0,
    240 pages




    Web site: http://jspatterns.com/


www.assono.de                                     Page 120
Books (cont.)
●
    Stoyan Stefanov: “Object-Oriented JavaScript”
    Packt Publishing, ISBN 978-1-847194-14-5, 337 pages




    Stoyan's Web site: http://www.phpied.com/


www.assono.de                                    Page 121
Books (cont.)
●
    John Resig: “Pro JavaScript Techniques”
    Apress, ISBN 1-59059-727-3, 359 pages




    John's Web site: http://ejohn.org/


www.assono.de                                 Page 122
Books (cont.)
●
    Ross Harmes, Dustin Diaz:
    “Pro JavaScript Design Patterns”
    Apress, ISBN 978-1-59059-908-2, 269 pages




    Ross' Web site: http://techfoolery.com/
    Dustin's Web site: http://www.dustindiaz.com/

www.assono.de                                       Page 123
The JavaScript Standard
●
    Standard ECMA-262
    ECMAScript Language Specification
    http://www.ecma-international.org/publications/
    standards/Ecma-262.htm




www.assono.de                                         Page 124
Questions?




Ask questions now — or later:
  tbahn@assono.de
  www.assono.de/blog
  04307/900-401
Presentation will be posted in our blog at:
www.assono.de/blog/d6plinks/UKLUG-2011-JavaScript-Blast

www.assono.de                                      Page 125

More Related Content

What's hot

Monoids - Part 1 - with examples using Scalaz and Cats
Monoids - Part 1 - with examples using Scalaz and CatsMonoids - Part 1 - with examples using Scalaz and Cats
Monoids - Part 1 - with examples using Scalaz and CatsPhilip Schwarz
 
Getting started in c++
Getting started in c++Getting started in c++
Getting started in c++Neeru Mittal
 
The Functional Programming Triad of Folding, Scanning and Iteration - a first...
The Functional Programming Triad of Folding, Scanning and Iteration - a first...The Functional Programming Triad of Folding, Scanning and Iteration - a first...
The Functional Programming Triad of Folding, Scanning and Iteration - a first...Philip Schwarz
 
Library functions in c++
Library functions in c++Library functions in c++
Library functions in c++Neeru Mittal
 
Mcai pic u 4 function, storage class and array and strings
Mcai pic u 4 function, storage class and array and stringsMcai pic u 4 function, storage class and array and strings
Mcai pic u 4 function, storage class and array and stringsRai University
 
Bsc cs i pic u-4 function, storage class and array and strings
Bsc cs i pic u-4 function, storage class and array and stringsBsc cs i pic u-4 function, storage class and array and strings
Bsc cs i pic u-4 function, storage class and array and stringsRai University
 
The Ring programming language version 1.5.2 book - Part 175 of 181
The Ring programming language version 1.5.2 book - Part 175 of 181The Ring programming language version 1.5.2 book - Part 175 of 181
The Ring programming language version 1.5.2 book - Part 175 of 181Mahmoud Samir Fayed
 
Write a program to check a given number is prime or not
Write a program to check a given number is prime or notWrite a program to check a given number is prime or not
Write a program to check a given number is prime or notaluavi
 
Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)Brendan Eich
 
Operators expressions-and-statements
Operators expressions-and-statementsOperators expressions-and-statements
Operators expressions-and-statementsCtOlaf
 
operators and expressions in c++
 operators and expressions in c++ operators and expressions in c++
operators and expressions in c++sanya6900
 
Extensible Operators and Literals for JavaScript
Extensible Operators and Literals for JavaScriptExtensible Operators and Literals for JavaScript
Extensible Operators and Literals for JavaScriptBrendan Eich
 

What's hot (20)

Monoids - Part 1 - with examples using Scalaz and Cats
Monoids - Part 1 - with examples using Scalaz and CatsMonoids - Part 1 - with examples using Scalaz and Cats
Monoids - Part 1 - with examples using Scalaz and Cats
 
Getting started in c++
Getting started in c++Getting started in c++
Getting started in c++
 
Arrays
ArraysArrays
Arrays
 
The Functional Programming Triad of Folding, Scanning and Iteration - a first...
The Functional Programming Triad of Folding, Scanning and Iteration - a first...The Functional Programming Triad of Folding, Scanning and Iteration - a first...
The Functional Programming Triad of Folding, Scanning and Iteration - a first...
 
Library functions in c++
Library functions in c++Library functions in c++
Library functions in c++
 
Mcai pic u 4 function, storage class and array and strings
Mcai pic u 4 function, storage class and array and stringsMcai pic u 4 function, storage class and array and strings
Mcai pic u 4 function, storage class and array and strings
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
 
Bsc cs i pic u-4 function, storage class and array and strings
Bsc cs i pic u-4 function, storage class and array and stringsBsc cs i pic u-4 function, storage class and array and strings
Bsc cs i pic u-4 function, storage class and array and strings
 
The Ring programming language version 1.5.2 book - Part 175 of 181
The Ring programming language version 1.5.2 book - Part 175 of 181The Ring programming language version 1.5.2 book - Part 175 of 181
The Ring programming language version 1.5.2 book - Part 175 of 181
 
Write a program to check a given number is prime or not
Write a program to check a given number is prime or notWrite a program to check a given number is prime or not
Write a program to check a given number is prime or not
 
Java 2
Java 2Java 2
Java 2
 
Codejunk Ignitesd
Codejunk IgnitesdCodejunk Ignitesd
Codejunk Ignitesd
 
Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)Value Objects, Full Throttle (to be updated for spring TC39 meetings)
Value Objects, Full Throttle (to be updated for spring TC39 meetings)
 
First c program
First c programFirst c program
First c program
 
6 operators-in-c
6 operators-in-c6 operators-in-c
6 operators-in-c
 
Overloading of io stream operators
Overloading of io stream operatorsOverloading of io stream operators
Overloading of io stream operators
 
Operators expressions-and-statements
Operators expressions-and-statementsOperators expressions-and-statements
Operators expressions-and-statements
 
operators and expressions in c++
 operators and expressions in c++ operators and expressions in c++
operators and expressions in c++
 
Chapter 5
Chapter 5Chapter 5
Chapter 5
 
Extensible Operators and Literals for JavaScript
Extensible Operators and Literals for JavaScriptExtensible Operators and Literals for JavaScript
Extensible Operators and Literals for JavaScript
 

Similar to JavaScript blast

Optionals by Matt Faluotico
Optionals by Matt FaluoticoOptionals by Matt Faluotico
Optionals by Matt FaluoticoWithTheBest
 
pure-functional-programming.pdf
pure-functional-programming.pdfpure-functional-programming.pdf
pure-functional-programming.pdfPuneetChaturvedi23
 
Interview questions slide deck
Interview questions slide deckInterview questions slide deck
Interview questions slide deckMikeBegley
 
Meetup C++ A brief overview of c++17
Meetup C++  A brief overview of c++17Meetup C++  A brief overview of c++17
Meetup C++ A brief overview of c++17Daniel Eriksson
 
Programming in scala - 1
Programming in scala - 1Programming in scala - 1
Programming in scala - 1Mukesh Kumar
 
Python bible
Python biblePython bible
Python bibleadarsh j
 
JavaScript - Chapter 5 - Operators
 JavaScript - Chapter 5 - Operators JavaScript - Chapter 5 - Operators
JavaScript - Chapter 5 - OperatorsWebStackAcademy
 
JavaScript introduction 1 ( Variables And Values )
JavaScript introduction 1 ( Variables And Values )JavaScript introduction 1 ( Variables And Values )
JavaScript introduction 1 ( Variables And Values )Victor Verhaagen
 
Introduction of python Introduction of python Introduction of python
Introduction of python Introduction of python Introduction of pythonIntroduction of python Introduction of python Introduction of python
Introduction of python Introduction of python Introduction of pythonGandaraEyao
 
Our Friends the Utils: A highway traveled by wheels we didn't re-invent.
Our Friends the Utils: A highway traveled by wheels we didn't re-invent. Our Friends the Utils: A highway traveled by wheels we didn't re-invent.
Our Friends the Utils: A highway traveled by wheels we didn't re-invent. Workhorse Computing
 

Similar to JavaScript blast (20)

Optionals by Matt Faluotico
Optionals by Matt FaluoticoOptionals by Matt Faluotico
Optionals by Matt Faluotico
 
pure-functional-programming.pdf
pure-functional-programming.pdfpure-functional-programming.pdf
pure-functional-programming.pdf
 
Interview questions slide deck
Interview questions slide deckInterview questions slide deck
Interview questions slide deck
 
Meetup C++ A brief overview of c++17
Meetup C++  A brief overview of c++17Meetup C++  A brief overview of c++17
Meetup C++ A brief overview of c++17
 
Dart workshop
Dart workshopDart workshop
Dart workshop
 
Programming in scala - 1
Programming in scala - 1Programming in scala - 1
Programming in scala - 1
 
Python bible
Python biblePython bible
Python bible
 
Pythonintro
PythonintroPythonintro
Pythonintro
 
Short intro to ECMAScript
Short intro to ECMAScriptShort intro to ECMAScript
Short intro to ECMAScript
 
C tour Unix
C tour UnixC tour Unix
C tour Unix
 
Javascript
JavascriptJavascript
Javascript
 
iPython
iPythoniPython
iPython
 
JavaScript - Chapter 5 - Operators
 JavaScript - Chapter 5 - Operators JavaScript - Chapter 5 - Operators
JavaScript - Chapter 5 - Operators
 
JavaScript introduction 1 ( Variables And Values )
JavaScript introduction 1 ( Variables And Values )JavaScript introduction 1 ( Variables And Values )
JavaScript introduction 1 ( Variables And Values )
 
JavaScript Data Types
JavaScript Data TypesJavaScript Data Types
JavaScript Data Types
 
Should i Go there
Should i Go thereShould i Go there
Should i Go there
 
Kotlin
KotlinKotlin
Kotlin
 
Introduction of python Introduction of python Introduction of python
Introduction of python Introduction of python Introduction of pythonIntroduction of python Introduction of python Introduction of python
Introduction of python Introduction of python Introduction of python
 
Our Friends the Utils: A highway traveled by wheels we didn't re-invent.
Our Friends the Utils: A highway traveled by wheels we didn't re-invent. Our Friends the Utils: A highway traveled by wheels we didn't re-invent.
Our Friends the Utils: A highway traveled by wheels we didn't re-invent.
 
Matlab tutorial 3
Matlab tutorial 3Matlab tutorial 3
Matlab tutorial 3
 

More from dominion

What is a itil and how does it relate to your collaborative environment uklug
What is a itil and how does it relate to your collaborative environment   uklugWhat is a itil and how does it relate to your collaborative environment   uklug
What is a itil and how does it relate to your collaborative environment uklugdominion
 
iOS enterprise
iOS enterpriseiOS enterprise
iOS enterprisedominion
 
cloud session uklug
cloud session uklugcloud session uklug
cloud session uklugdominion
 
Uklug 2011 administrator development synergy
Uklug 2011 administrator development synergyUklug 2011 administrator development synergy
Uklug 2011 administrator development synergydominion
 
Uklug 2011 client management
Uklug 2011 client managementUklug 2011 client management
Uklug 2011 client managementdominion
 
Populating your domino directory or any domino database with tivoli directory...
Populating your domino directory or any domino database with tivoli directory...Populating your domino directory or any domino database with tivoli directory...
Populating your domino directory or any domino database with tivoli directory...dominion
 
Uklug2011 Know your Notes
Uklug2011 Know your NotesUklug2011 Know your Notes
Uklug2011 Know your Notesdominion
 
Taking themes to the next level
Taking themes to the next levelTaking themes to the next level
Taking themes to the next leveldominion
 
Supersize me
Supersize meSupersize me
Supersize medominion
 
Aussie outback
Aussie outbackAussie outback
Aussie outbackdominion
 
Learning to run
Learning to runLearning to run
Learning to rundominion
 
Implementing xpages extension library
Implementing xpages extension libraryImplementing xpages extension library
Implementing xpages extension librarydominion
 
Abb presentation uklug
Abb presentation uklugAbb presentation uklug
Abb presentation uklugdominion
 
Uklug2011.lotus.on.linux.report.technical.edition.v1.0
Uklug2011.lotus.on.linux.report.technical.edition.v1.0Uklug2011.lotus.on.linux.report.technical.edition.v1.0
Uklug2011.lotus.on.linux.report.technical.edition.v1.0dominion
 
Domino testing presentation
Domino testing presentationDomino testing presentation
Domino testing presentationdominion
 
Composite applications tutorial
Composite applications tutorialComposite applications tutorial
Composite applications tutorialdominion
 
Maximizing application performance
Maximizing application performanceMaximizing application performance
Maximizing application performancedominion
 
Error handling in XPages
Error handling in XPagesError handling in XPages
Error handling in XPagesdominion
 
wcm domino
wcm dominowcm domino
wcm dominodominion
 

More from dominion (20)

What is a itil and how does it relate to your collaborative environment uklug
What is a itil and how does it relate to your collaborative environment   uklugWhat is a itil and how does it relate to your collaborative environment   uklug
What is a itil and how does it relate to your collaborative environment uklug
 
iOS enterprise
iOS enterpriseiOS enterprise
iOS enterprise
 
cloud session uklug
cloud session uklugcloud session uklug
cloud session uklug
 
Uklug 2011 administrator development synergy
Uklug 2011 administrator development synergyUklug 2011 administrator development synergy
Uklug 2011 administrator development synergy
 
Uklug 2011 client management
Uklug 2011 client managementUklug 2011 client management
Uklug 2011 client management
 
Populating your domino directory or any domino database with tivoli directory...
Populating your domino directory or any domino database with tivoli directory...Populating your domino directory or any domino database with tivoli directory...
Populating your domino directory or any domino database with tivoli directory...
 
Uklug2011 Know your Notes
Uklug2011 Know your NotesUklug2011 Know your Notes
Uklug2011 Know your Notes
 
Quickr
QuickrQuickr
Quickr
 
Taking themes to the next level
Taking themes to the next levelTaking themes to the next level
Taking themes to the next level
 
Supersize me
Supersize meSupersize me
Supersize me
 
Aussie outback
Aussie outbackAussie outback
Aussie outback
 
Learning to run
Learning to runLearning to run
Learning to run
 
Implementing xpages extension library
Implementing xpages extension libraryImplementing xpages extension library
Implementing xpages extension library
 
Abb presentation uklug
Abb presentation uklugAbb presentation uklug
Abb presentation uklug
 
Uklug2011.lotus.on.linux.report.technical.edition.v1.0
Uklug2011.lotus.on.linux.report.technical.edition.v1.0Uklug2011.lotus.on.linux.report.technical.edition.v1.0
Uklug2011.lotus.on.linux.report.technical.edition.v1.0
 
Domino testing presentation
Domino testing presentationDomino testing presentation
Domino testing presentation
 
Composite applications tutorial
Composite applications tutorialComposite applications tutorial
Composite applications tutorial
 
Maximizing application performance
Maximizing application performanceMaximizing application performance
Maximizing application performance
 
Error handling in XPages
Error handling in XPagesError handling in XPages
Error handling in XPages
 
wcm domino
wcm dominowcm domino
wcm domino
 

Recently uploaded

3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 

Recently uploaded (20)

3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 

JavaScript blast

  • 1. UKLUG 2011 JavaScript Blast Manchester, 2011-05-24 Innovative Software Solutions. www.assono.de
  • 2. Thomas Bahn ● Graduated in mathematics, University of Hannover ● Developing in Java and RDBMS since 1997 ● Dealing with Notes/Domino since 1999: development, administration, consulting and trainings ● Frequent speaker at technical conferences about IBM Lotus Notes/Domino and author for THE VIEW tbahn@assono.de www.assono.de/blog +49/4307/900-401 www.assono.de Page 2
  • 3. Declaration of Variables ● Simple variable declaration: var name; ● Variable declaration with value assignment: var name = value; ● SSJS only (Server Side JavaScript): typed variable declaration: var name : type = value; ● Best Practice: Declare all variables at the top of a function (like you should in LotusScript, but not in Java, because of the scopes, covered later). www.assono.de Page 3
  • 4. Types of Variables ● “loose typing” doesn't mean untyped! ● There are exactly 6 types in JavaScript - String - Number - Boolean - Object - null - undefined www.assono.de Page 4
  • 5. Special Strings ● escape character ● one backslash ● ' simple quote ● " double quote ● n new line ● r carriage return ● t tabulator ● u Unicode character, e.g. u042F ⇒ Я www.assono.de Page 5
  • 6. String Object ● Useful methods of the String object - toUpperCase(), toLowerCase(): like LotusScript - charAt(position): character at given position - indexOf(searchString): position of searchString - indexOf(searchString, startPos): Position of searchString after startPos - lastIndexOf(suchstring): ditto, but backwards - substring(start, end): part of string - slice(start, end): like substring, but when end is negative, length is added (counts from end) - split(separator): splits string into an array www.assono.de Page 6
  • 7. String Concatenation ● + and += are fast in all browsers, but IE7 (and older) ● array.join is fast in IE7, but slower than + or += in all other browsers. ● string.concat is mostly slower then simple + or +=. www.assono.de Page 7
  • 8. String Trimming ● You can trim strings with for loops and charAt to determine the first and the last non-whitespace char and using slice to cut the result out off the string. ● Or you can use regular expressions, e.g. if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^s+/, ""). replace(/s+$/, ""); } } ● What's faster depends on the amount of whitespace at the start and at the end of the string. www.assono.de Page 8
  • 9. Numbers and the Number Object ● All numbers are 64-bit floating point (“double”). ● Rounding differences through binary-decimal- conversion ● Bit-shifting (<<, >>) possible, but inefficient ● Number.MAX_VALUE ⇒ 1.7976931348623157e+308 Number.MIN_VALUE ⇒ 5e-324 ● Number.toString(basis), e.g. ● var a = 100; ● a.toString(16)  "64" ● a.toString(2)  "1100100" www.assono.de Page 9
  • 10. Heads up: parseInt and Octal Numbers ● 0x prefix for hexadecimal numbers, e.g. 0xFF ● 0 prefix for octal numbers, e.g. 014 (=12) ● Caution using parseInt(), e.g. - parseInt("08") ⇒ 0, parsed until first invalid character and - parseInt(08) ⇒ Error: 08 is not a legal ECMA-262 octal constant ● Particularly with regard to user input, e.g. month ● Better: always call with radix as second parameter: parseInt("08", 10) www.assono.de Page 10
  • 11. Math Object ● Useful constants and methods of the Math object: - Math.PI ⇒ 3.141592653589793 - Math.E ⇒ 2.718281828459045 - Math.SQRT2 ⇒ 1.4142135623730951 - Math.LN2 ⇒ 0.6931471805599453 - Math.LN10 ⇒ 2.302585092994046 - Math.random() ⇒ 0 <= random number < 1 - Math.round(), Math.floor(), Math.ceil() - Math.sin(), Math.cos(), Math.atan() - Math.min(), Math.max() - Math.pow(), Math.sqrt() www.assono.de Page 11
  • 12. NaN = Not a Number ● “contagious” in calculations ● Not equal to anything (including NaN) ● Test with isNaN() ● typeof NaN ⇒ "number" www.assono.de Page 12
  • 13. Infinity ● e.g. 1/0 ⇒ Infinity ● Greater than the largest valid number: Infinity > Number.MAX_VALUE ● “contagious” in calculations, but - 1/Infinity ⇒ 0 - Infinity/Infinity ⇒ NaN www.assono.de Page 13
  • 14. Boolean ● ! Logical Not ● && Logical And ● || Logical Or ● Lazy evaluation: calculate only, if (still) necessary ● In LotusScript, both sides of And and Or are evaluated, even if not necessary for the result. ● Example: var a = 1; true || (a = 2); a ⇒ a is still equal 1 www.assono.de Page 14
  • 15. “Falsy” Values ● Following values are “falsy”: - false - null (empty, set intentionally) - undefined (uninitialized or non-existent) - "" (empty string) - 0 - NaN ● All other values are considered true, even - "0" - "false" www.assono.de Page 15
  • 16. Heads up: Test, if Variable is Defined ● Seen often, but (over-)simplified: if (a) { … } ● Caution: the code block { … } will be executed, if a is undefined, but also, if it's equal to false, null, "" or 0 ● Better way: if (typeof a !== "undefined") { … } www.assono.de Page 16
  • 17. Comparison Operators ● == Equality with type conversion (if necessary) != Inequality with type conversion (if necessary) ● === Equality without type conversion !== Inequality without type conversion ● Examples - "1" == 1 ⇒ true - "1" === 1 ⇒ false ● Best Practice: Always use === and !== ● switch - Comparison with type conversion www.assono.de Page 17
  • 18. Ternary Operator ● a ? b : c - ? is the Ternary Operator - Returns b, if a is true, else c ● Example: (typeof a !== "undefined") ? a : "Default" www.assono.de Page 18
  • 19. Default Operator || ● || is logical Or ● Example var value = arg || "Default value"; ● Assigns arg to value, if arg is true (not falsy), else "Default value" ● Useful for optional parameters of a function ● Caution, if false, null, "", 0 could be valid values! www.assono.de Page 19
  • 20. Guard Operator && ● && is logical And ● Example: return obj && obj.member; ● Returns obj.member, if obj is true (not falsy), else obj ● Circumvents possible error when accessing undefined.member ● Caution, if false, null, "", 0 could be valid values! www.assono.de Page 20
  • 21. More Operator Magic ● + as unary operator converts strings (and date/time values) into numbers: +"1" === 1 ● !! converts anything into boolean: ● !!"1" === true www.assono.de Page 21
  • 22. Arrays ● Arrays are objects (inherit from Object) ● Their length attribute is always the greatest index plus 1 ● length can also be set. - setting a larger number enlarges the array by appending undefined values - setting it to a smaller number shortens the array by cutting surplus elements ● Array literals: ["one", "two", "three"] ● You can use strings like character arrays: var text = "abcd"; text[2] ⇒ "c" www.assono.de Page 22
  • 23. Arrays (cont.) ● Useful methods of the Array object: - push and pop, to use an array as a stack - sort: sorts array - join(separator): joins the elements to a string - slice(start, end): returns part of array, doesn't change the source array - splice(start, end, additional parameters): returns part of array, replaces it by the additional parameters or removes it without leaving a gap www.assono.de Page 23
  • 24. Heads up: delete ● delete arr[2] Deletes the 3rd element, or to be more precise: sets the 3rd element to undefined. var arr = ["one", "two", "three", "four"]; delete arr[2]; arr ⇒ ["one", "two", undefined, "four"] ● arr.splice(2, 1) Removes the 3rd element and the remaining elements move up var arr = ["one", "two", "three", "four"]; arr.splice(2, 1); arr ⇒ ["one", "two", "four"] www.assono.de Page 24
  • 25. typeof Operator ● Results of typeof are sometimes not too useful: Object of type Result of typeof object "object" function "function" array "object" number "number" string "string" boolean "boolean" null "object" undefined "undefined" ● Use instanceof on objects (details follow) www.assono.de Page 25
  • 26. for Loops ● for (init; comparison; increment) { ... } ● All three elements can contain multiple statements, separated by commas (!), e.g. for ( var i = 0, result = ""; i < 100; i++, result += i + "n" ) {...} www.assono.de Page 26
  • 27. Loops and Conditions ● for, while and do-while loops perform similarly. ● Avoid for-in loop whenever possible. ● Reduce the number of iterations and the amount of work done in one iteration when possible. ● Tune if-else if-else if-...-else chains by putting the conditions in the “right” order: move most frequently met conditions up to the front. ● Consider using look-up tables: instead of a long switch statement, put the results into an array once and access the results by index. www.assono.de Page 27
  • 28. Heads up: with ● Instead of accessing object members through the dot operator (obj.member) you can use with, especially if you want to access a lot of members of one object: with (obj) { member = "value"; } ● If obj contains an attribute with the name member, its value will be set to "value" … ● … else a new global variable member is created and "value" is assigned www.assono.de Page 28
  • 29. Heads up: Semicolon Insertion ● When an error occurs, the JavaScript interpreter inserts an semicolon at the end of a line and retries the execution. ● Example: return { state: "ok" }; ● will return undefined, because a semicolon will be inserted after the return statement. ● This behavior can mask errors. www.assono.de Page 29
  • 30. Error Handling with try – catch – finally ● Just try it... and react on errors ● Example: try { // an error could occur in here } catch (e) { // e is an Error object // do something about this error alert(e.name + ": " + e.message); } finally { // will be executed regardless of an // error, e.g. to free up ressources } ● Only one catch-block (not many as in Java) www.assono.de Page 30
  • 31. Error Handling (cont.) ● throw creates (fires) a new error ● Examples: throw new Error("Message"); throw { name: "Name", message: "Message" } ● window.onerror = myErrorHandler Sets error handling function in the browser, which will be called on every error afterwards ● Thus you can install a global error logging and e.g. use AJAX to send an error log to the server. www.assono.de Page 31
  • 32. Heads up: References ● Variables contain references ● Parameters are passed to functions as references, not values. ● If a parameter is not an object: - If the function assigns a new value to it, it's only modified in the function, the calling code still only sees the old value. ● If a parameter is an object: - If the function assigns a new object to it, it's only modified in the function. The calling code still has access to the old object (and only to the old one). - Caution: If the function modifies object members, the object is changed for the calling code, too! www.assono.de Page 32
  • 33. Heads up: References (cont.) function test1(paramA) {paramA = "changed";} a = "original"; test1(a); a ⇒ "original" function test2(paramA) {paramA = {"m":"new m"};} a = {"m": "original m"}; test2(a); a.m ⇒ "original m" function test3(paramA) {paramA.m = "changed m";} a = {"m": "original m"}; test3(a); a.m ⇒ "changed m" www.assono.de Page 33
  • 34. Functions – Data – Objects ● Functions are first-class objects! - They can have attributes and methods (i.e. inner functions). ● Functions are data! - They can be stored in variables. - They can be passed to and returned by functions. ● This can't be done in LotusScript, nor Java. ● JavaScript is a functional language. www.assono.de Page 34
  • 35. Definition of Functions ● function f (args) { ... }; is an abbreviation for var f = function (arg) { ... } ; ● Anonymous functions function (args) { ... }; ● Inner functions function f(args) { function g(args) { ... }; var h = function (args) { ... }; this.i = function (args) { ... }; } ● new Function(args, body) f = new Function("a", "b", "return a + b"); www.assono.de Page 35
  • 36. Source Code of a Function ● Useful: f.toString() returns the definition of function f, i.e. its source code ● Doesn't work with predefined functions though. ● Examples: function f() { alert(new Date()); }; f.toString() ⇒ "function f() { alert(new Date); }" Object.toString.toString() ⇒ "function toString() { [native code] }" www.assono.de Page 36
  • 37. Function Parameters ● Declaration of a function contains the list of the expected parameters ● Parameters are local variables of the function www.assono.de Page 37
  • 38. “Unexpected” Function Parameters with arguments ● Access to all parameters with arguments, an array- like construct ● Example: function sum() { var i, result = 0; for (i = 0; i < arguments.length; i++) { result += arguments[i]; } return result; } sum(1, 2, 3, 4, 5) ⇒ 15 www.assono.de Page 38
  • 39. arguments (cont.) ● arguments has the attribute length, but not the other methods of the Array object. ● Work around: Function.prototype.apply() function removeFirstArgument() { var slice = Array.prototype.slice; return slice.apply(arguments, [1]); } ; removeFirstArgument(1, 2, 3, 4) ⇒ [2, 3, 4] ● arguments.callee contains a reference to the called function, which can become handy in anonymous functions (“banned” in HTML 5) www.assono.de Page 39
  • 40. Configuration Object ● Tip: Use an object as (only) parameter, which contains all needed information. ● Benefits: - You can always add new “inner parameters” without changing existing code calling this function. - You have “named parameters”. - Defaults should be used for all parameters not in the value object. www.assono.de Page 40
  • 41. Configuration Object (cont.) ● Example: function showHide(argsList) { var node = argsList.node || document; var state = argsList.state || "show"; var term = argsList.term || "true"; ... }; showHide({ node: document.getElementById("blubb"), state: "hide"; }) www.assono.de Page 41
  • 42. Heads up: Function Results ● A function without return returns undefined. ● A function with return x returns x. ● A constructor (details follow) without return returns a reference to the new object. ● Caution: A constructor with return x returns x, if x is an object, else it returns the new object. www.assono.de Page 42
  • 43. Memoization ● Cache results of function calls for later reuse ● Example: function factorial(n) { if (!factorial.cache) { factorial.cache = {"0": 1, "1": 1}; } if (!factorial.cache.hasOwnProperty(n)) { factorial.cache[n] = n * factorial(n-1); } return factorial.cache[n]; } www.assono.de Page 43
  • 44. Function Calls and this ● Functions always run in a context. ● this points to the current context. ● An inner function cannot access its outer function's current context. ● Convention: var that = this; ● There are (at least) 4 ways to call functions: www.assono.de Page 44
  • 45. Function Calls (cont.) ● 1st Functional form f(args): f will be executed in the global context. ● 2nd Method form obj.f(args) and obj["f"](args): f will be executed with obj as context. ● 3rd Constructor form new f(args): f runs in the context of the newly created, empty object, which will be returned by the function. ● 4th f.apply(obj, args) and f.call(obj, arg1, arg2, ...): f runs in the context of obj. f doesn't need to be method of obj! www.assono.de Page 45
  • 46. Function Calls (cont.) ● Caution: If you want to call a method of an object, but forget to specify the object, no error will be thrown and the method will be executed in the global context. www.assono.de Page 46
  • 47. Call Chaining ● By returning this in (all) methods, you can “chain” method calls to one object and get more concise code, do less typing, and structure your code better. ● Example: var obj = { value: 1, increment: function () { this.value += 1; return this; }, add: function (v) { this.value += v; return this; }, shout: function () { alert(this.value); return this; } }; obj.increment().add(3).shout(); // output: 5 www.assono.de Page 47
  • 48. Anonymous Functions ● Used as parameters for other functions - when they are used only for this purpose - in the called functions they have a name: the name of the parameter ● Example: call-back functions for Ajax calls, for setTimeout() or setInterval(): setTimeout( function() { alert(new Date()); }, 1000 ) ● For immediate, one-time execution, e.g. for initializing www.assono.de Page 48
  • 49. Anonymous Functions (cont.) ● You can hide code with anonymous functions. ● Example: (function () { var message = "Bye Bye!"; window.onunload = function () { alert(message); }; })(); // define function and execute it ● Keeps the global object clean ● Variable message is accessible by the anonymous function, but is invisible and inaccessible for other code (Closure!) www.assono.de Page 49
  • 50. Self-Modifying Functions ● Example: f = function() { alert("First time"); return function() { alert("Next time"); }; }(); f(); f.toString() ⇒ "function() { alert("Next time"); }" ● 2 Alerts: "First time" and "Next time" ● Typical usage: one-time initialization and creation of an appropriate function for a special environment, e.g. the current browser www.assono.de Page 50
  • 51. Currying ● Create a new function with at least one parameter less than an existing one. ● Example: function addGenerator(a) { return function(b) { return a + b; }; }; addOne = addGenerator(1); addOne(47) ⇒ 48 www.assono.de Page 51
  • 52. Function Object ● Useful attributes and methods of the Function object: - length: number of expected parameters - caller: calling function (not standardized) - call(obj, param1, param2, ...): executes function in the context of obj - apply(obj, paramsArray): like call, but all function parameters in one array www.assono.de Page 52
  • 53. “eval is evil” ● Performance is bad. ● Security: use only on absolutely trustworthy argument ● Same considerations apply to new Function(args, body) ● and to call setInterval and setTimeout with strings instead of function literals. www.assono.de Page 53
  • 54. alert() ● Auxiliary “debugger” ● Blocks execution of JavaScript ● Caution when using alert() in combination with asynchronous Ajax calls www.assono.de Page 54
  • 55. Heads up: Scopes ● Scope: Where is a variable visible and accessible? ● There are only two kinds of scopes in JavaScript: - global scope - function scope ● In particular, there is no block scope like in Java ● Caution: Accessing an undeclared variable doesn't throw an error, but creates a new, global variable (think about typos). ● Example: function () { a = 1; // without var: a is global! } www.assono.de Page 55
  • 56. Scopes (cont.) ● Which output do you expect here? var a = 1; function f() { alert(a); var a = 2; alert(a); } f() www.assono.de Page 56
  • 57. Scopes (cont.) ● Results in 2 alerts ● 2 phases: - local variables are found and memory reserved - code is executed and e.g. values assigned www.assono.de Page 57
  • 58. Scopes (cont.) ● JavaScript has a lexical scope. ● The context of a function is created, when the function is defined, not when it is executed. www.assono.de Page 58
  • 59. Speed of Data Access ● Literal values are fastest to access ● Local variables are second. ● Array items and object members are considerably slower. ● Going up the scope chain is costly. ● This is true for the prototype chain, too. ● Best Practice: Create local variables to cache array items, object members, global variables or those variables “up the chain”, especially when handling DOM/BOM objects. www.assono.de Page 59
  • 60. Context ● Context: “place” where variables and members “live” ● Each object has it own context. ● Plus there is a global context. ● Functions have access to the attributes and method of the context, in which they have been defined … ● … and all the way up to the global context. www.assono.de Page 60
  • 61. Context (cont.) ● The global object in browsers is the window object! ● Example: a = 1; window.a ⇒ 1 ● Global functions like parseInt are methods of the global object: parseInt === window.parseInt ⇒ true www.assono.de Page 61
  • 62. Context (cont.) ● Lexical context, i.e. “as written in code”, not as executed ● Example: function outer() { var o = 1; function inner() { alert(o); } } ● At the time inner is defined, o is already known. www.assono.de Page 62
  • 63. Context (cont.) ● Another example: function outer() { var o = 1; return (function() { alert(o); }) }; var f = outer(); f() ⇒ 1 delete outer; f() ⇒ 1 (!) ● o is still known, after outer has been executed – even after it has been deleted, f has still access to o! www.assono.de Page 63
  • 64. Closures ● Even after an outer function has been completed, inner functions can access its attributes and functions. ● This feature is called Closure. ● Most unusual concept of JavaScript for LotusScript and Java developers. ● But Closures are probably the single most important feature of the JavaScript language! www.assono.de Page 64
  • 65. Heads up: Reference, not Copy of Value ● f has a reference to o, not a copy of its value at definition time. ● When o is modified after f has been defined, this effects f. ● Decoupling with mediator function: a function, which is defined and immediately executed. www.assono.de Page 65
  • 66. Heads up: Reference, not Copy of Value (cont.) ● Example with an unexpected result: function f() { var a = []; for (var i = 0; i < 5; i++) { a[i] = function() { return i; } } return a; }; var a = f(); a[0]() ⇒ 5 (should be 0) www.assono.de Page 66
  • 67. Heads up: Reference, not Copy of Value (cont.) ● Improved example: function f() { var a = []; for (var i = 0; i < 5; i++) { a[i] = (function(x) { return function() { return x; } })(i); } return a; }; var a = f(); a[0]() ⇒ 0 www.assono.de Page 67
  • 68. Objects ● Objects are sets of name-value pairs. ● Names are Strings. ● Values can be of any type. ● Like lists in LotusScript ● Correlate to “associative arrays” or “hash maps” in other programming languages www.assono.de Page 68
  • 69. Creation of Objects ● Object literals like {} var object = {}; ● new var object = new Constructor(); ● Object.create(...) actually, you probably never need this www.assono.de Page 69
  • 70. Object Literals and Access to Members ● var obj = { firstName: "Thomas", "city of birth": "Hannover", "123": 123, "@$&%": 1, doIt: function() { alert(this.firstName); } }; obj.doIt() ● obj.firstName is "Thomas", obj["city of birth"] is "Hannover" etc. ● The second kind is necessary for reserved words and invalid identifiers. www.assono.de Page 70
  • 71. Modifying Objects ● var obj = { firstName: "Thomas", doIt: function() { alert(this.firstName); } }; obj.firstName = "Lydia"; obj.doIt = function() { alert("First Name: " + this.firstName); }; obj.doIt() ● Attributes and methods can be changed at run-time. ● This isn't possible in class-based programming languages like LotusScript. www.assono.de Page 71
  • 72. Constructors ● Functions can be used as constructors (with new): function Factory(location) { this.location = location; }; var f = new Factory("Kiel") ● A new, empty object is created and Factory is executed in its context. ● Default return value is this newly constructed object. ● When a constructor is completed with return x, x will be returned, (only) if x is an object, else the new object is returned. www.assono.de Page 72
  • 73. Constructors (cont.) ● Objects have an constructor attribute, which points to the constructor of the object at its creation time. ● Example creates new, similar object: function Factory(totalEmployees) { this.totalEmployees = totalEmployees; }; var f1 = new Factory(100); var f2 = new f1.constructor(200); f2 ⇒ Object { totalEmployees = 200 } www.assono.de Page 73
  • 74. Constructors (cont.) ● Convention: Constructor names should start with an capital letter. ● Caution: If you forget new, the function will still be executed, but in the global context instead in the context of the newly created object. www.assono.de Page 74
  • 75. Self-Invoking Constructors ● In order to avoid the problem with the missing new, write your constructors this way: function Car() { if (!(this instanceof Car)) { return new Car(); } // do the normal construction stuff } ● If Car is executed without new, it runs in the global context, therefore this points the global object, which is not a Car. www.assono.de Page 75
  • 76. instanceof Operator ● instanceof operator compares with constructor: f1 instanceof Factory ⇒ true f1 instanceof Object ⇒ true f1 instanceof String ⇒ false ● instanceof is true for “super-objects”, too. www.assono.de Page 76
  • 77. for ... in Loops ● Iterate over all attributes and methods of an object – and its “ancestors” (but not all properties are “enumerable”). ● Example: for (prop in obj) { alert(prop.toString()); } ● Best Practice: Use obj.hasOwnProperty("name"), which is true, only if obj has the attribute name, to distinguish between “own” and “inherited” properties. www.assono.de Page 77
  • 78. Enhancing Existing Objects ● You can enhance existing objects after they have been created … ● … even objects of the JavaScript language, like Function, Object and String! ● Example: String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); } "'" + " test ".trim() + "'" ⇒ "'test'" ● Some people consider augmenting built-in prototypes a bad practice. www.assono.de Page 78
  • 79. Enhancing Existing Objects (cont.) ● Caution: What if the next version of JavaScript has your addition built-in? ● Or other developers have the same idea? ● At least, you should check before you enhance language objects. ● Example: if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); } } www.assono.de Page 79
  • 80. Public Attributes and Methods ● Principally, all properties, i.e. attributes and methods of an object are publically visible and usable. ● Example: function Factory() { this.totalGoods = 0; this.produce = function() { this.totalGoods++; }; }; var f = new Factory(); f.totalGoods = 1000; f.produce(); f.totalGoods ⇒ 1001 www.assono.de Page 80
  • 81. Private Attributes and Methods ● Local variables and parameters of the constructor get private attributes and methods of all objects created with function. ● Only inner functions of the constructor can access its local variables and functions, its private properties. ● Example: function Factory(totalEmployees) { var totalGoods = 0; var produce = function() { totalGoods++; }; }; var f = new Factory(); f.produce() ⇒ Error www.assono.de Page 81
  • 82. Privileged Methods ● Privileged methods are publically callable and can access private properties. ● Definition in the constructor: this.privilegedFunction = function() {...} ● They cannot be added to the constructor later! ● Closures again! www.assono.de Page 82
  • 83. Privileged Methods (cont.) ● Example: function Factory() { var totalGoods = 0; this.produce = function(count) { totalGoods += count; }; this.getTotalGoods = function() { return totalGoods; } }; var f = new Factory(); f.produce(5); f.getTotalGoods() ⇒ 5 www.assono.de Page 83
  • 84. “Class Attributes” ● In Java, there is a static modifier for class attributes and methods. ● In JavaScript, there are no classes, but … ● … you can add attributes to the constructor function itself (the Function object), which are usable like class attributes. ● Useful for logging, book keeping (counting created objects), object pools, configuration of an “object factory” etc. www.assono.de Page 84
  • 85. “Class Attributes” (cont.) ● Example: var Factory = function() { Factory.totalFactories++; var totalGoods = 0; this.produce = function(count) { totalGoods += count; }; this.getTotalGoods = function() { return totalGoods; } }; Factory.totalFactories = 0; var f1 = new Factory(); var f2 = new Factory(); Factory.totalFactories ⇒ 2 www.assono.de Page 85
  • 86. Inheritance à la JavaScript ● Each object has a prototype attribute, normally {}. ● Functions are objects, constructors are functions, therefore constructors have this attribute, too. ● You can add new properties to a prototype object or even replace it completely. www.assono.de Page 86
  • 87. Inheritance à la JavaScript (cont.) ● Search sequence for properties: - current object a - a.constructor.prototype - a.constructor.prototype.constructor.prototype - etc. - at last: Object ● Prototype chain ● This can be used as “inheritance”. ● All changes to an object's prototype take effect immediately – to the object itself and it “successors” in the prototype chain. www.assono.de Page 87
  • 88. Inheritance à la JavaScript (cont.) ● Properties of an object superimpose properties with the same name up in the chain – they override “inherited” properties. ● Methods in a constructor are copied into each created object and use up some memory. ● You can add them to the object's prototype instead. ● This consumes less memory, but costs some performance (more lookups up the chain). www.assono.de Page 88
  • 89. Prototypical Inheritance ● Example: var Factory = function() { this.totalGoods = 0; }; var f = new Factory(); Factory.prototype.produce = function(count) { this.totalGoods += count; }; f.produce(10); f.totalGoods ⇒ 10 www.assono.de Page 89
  • 90. Prototypical Inheritance (cont.) ● This works even after the object's creation! ● In the example: Object f is created, then produce is defined and added to the Factory's prototype. ● The function produce is not found directly in f, but in its prototype chain. ● Instead of Factory.prototype.produce = ... you can write f.constructor.prototype.produce = ... www.assono.de Page 90
  • 91. Prototypical Inheritance (cont.) ● Another example: var Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; var User = function(name, password) { this.name = name; this.password = password; }; User.prototype = new Person(); var me = new User("Thomas", "secret"); alert("User " + me.getName() + " created") www.assono.de Page 91
  • 92. Heads up: Replacing the prototype Object ● If you replace the prototype object instead of enhancing the existing one, this only takes effect on objects created afterwards. ● Objects has an internal pointer to the prototype object at the time, they were created. This pointer isn't changed, when you overwrite the prototype object. ● In Firefox, this internal attribute is called __proto__. ● Besides, after replacing the prototype object the constructor attribute sometimes points to the wrong object. Therefore you should also set the constructor after replacing the prototype object. www.assono.de Page 92
  • 93. Heads up: Replacing the prototype Object (cont.) ● Example: var Person = function (name) { this.name = name; }; Person.prototype.getName = function () { return this.name; }; var User = function(name, password) { this.name = name; this.password = password; }; User.prototype = new Person(); User.prototype.constructor = User; www.assono.de Page 93
  • 94. Access the “Super Class” with uber ● There is no direct access to the “super class” ● Convention: set the uber attribute to the prototype of the “super class” ● Example: User.prototype = new Person(); User.prototype.constructor = User; User.uber = Person.prototype; www.assono.de Page 94
  • 95. Simplification ● Simplify this by introducing a helper function: function extend(child, parent) { var F = function() {}; // empty function F.prototype = parent.prototype; Child.prototype = new F(); Child.prototype.construtor = child; Child.uber = parent.prototype; } ● Usage: extend(User, Person); www.assono.de Page 95
  • 96. Classical Inheritance in JavaScript ● There are different approaches to “simulate” classical, i.e. class-based inheritance in JavaScript - Douglas Crockford - Markus Nix - Prototype (JavaScript library) - many, many more www.assono.de Page 96
  • 97. Classical Inheritance: Crockford's Way ● 3 enhancements of Function ● Method method to simplify additions to Function Function.prototype.method = function (name, func) { this.prototype[name] = func; return this; // useful for call chaining }; ● Method inherits for inheritance Function.method("inherits", function(parent) { this.prototype = new parent(); return this; }); // minimalistic version without uber(); www.assono.de Page 97
  • 98. Classical Inheritance: Crockford's Way (cont.) ● 3 enhancements of Function (cont.) ● Method swiss to copy properties from a parent object: Function.method("swiss", function (parent) { for (var i = 1; i < arguments.length; i += 1) { var name = arguments[i]; this.prototype[name] = parent.prototype[name]; }; return this; }); ● With swiss you can simulate multiple-inheritance or interfaces. www.assono.de Page 98
  • 99. Classical Inheritance: Crockford's Way (cont.) ● Example of usage: var Person = function(name){this.name = name}; Person.method("getName", function() { return this.name; }); var User = function(name, password) { this.name = name; this.password = password; }; User.inherits(Person); User.method("getPassword", function() { return this.password; }); var b = new User("Thomas", "secret"); b.getName() ⇒ "Thomas" www.assono.de Page 99
  • 100. Parasitic Inheritance ● In a constructor call another constructor and return the object, it returns, after enhancing it. ● Example: function ExistingConstructor(a) {...}; function NewConstructor(a, b) { var that = new ExistingConstructor(a); that.anotherAttribute = 0; that.anotherMethod = function (b) {...}; return that; // instead of this (implicit) } var obj = new NewConstructor(); obj www.assono.de Page 100
  • 101. Parasitic Inheritance (cont.) ● Drawback: Changes and enhancements of NewConstructor.prototype won't be inherited. ● Example: var obj = new NewConstructor(); NewConstructor.prototype.a = 1; typeof obj.a ⇒ "undefined" www.assono.de Page 101
  • 102. Binding ● With function.call and function.apply you can borrow methods from other objects (remember use of function.slice with the arguments object). ● You can use this to permanently bind a method to an object, using a function like this: function bind(o, m) { return function () { return m.apply(o, [].slice.call(arguments)); }; } ● Usage: var newObj = bind(oldObj, anotherObj.m); newObj.m(); ● In HTML 5 there is a bind method in Function. www.assono.de Page 102
  • 103. Copying Properties ● Instead of inheriting properties in some way, you can simply copy them to another object: function extend(parent, child) { var prop; child = child || {}; for (prop in parent) { if (parent.hasOwnProperty(prop)) { child[prop] = parent[prop]; } } return child; } ● Usage: var kid = extend(parent); // add/overwrite properties of kid here www.assono.de Page 103
  • 104. Mix-Ins ● Instead of just copying from one object, you can have the effect of “multiple inheritance” by having more than one source object: function mix() { var arg, prop, child = {}; for (arg=0; arg<arguments.length; arg+=1) { for (prop in arguments[arg]) { if (arguments[arg]. hasOwnProperty(prop)) { child[prop] = arguments[arg][prop]; } } } return child; } www.assono.de Page 104
  • 105. Global Variables Global Variables are evil and you should avoid using them, wherever possible. Imagine the problems, if some JavaScript libraries use the same global variables – you'll get unpredictable (undeterministic) results... www.assono.de Page 105
  • 106. Namespaces ● Namespaces help to keep the global context clean. ● Example: var de = {}; de.assono = {}; de.assono.HtmlHelper = { appendDiv: function(child, parent) {...}; ... } ● Best Practice: Use the least amount of global variables possible; organize your code inside of namespace objects. www.assono.de Page 106
  • 107. Loading JavaScript ● <script> tag in an HTML file: loads (if external) and executes JavaScript ● Loading JavaScript blocks loading of other resources (except some modern browsers). ● Executing JavaScript blocks everything else (loading, rendering) in the browser. ● Best Practice: Place <script> tags at the end of the HTML (where possible), then everything can be loaded and the page rendered beforehand. ● The page “seems” to load faster, users can read it... ● Best Practice: Combine many small JavaScript files to less bigger ones: Less requests, less overhead. www.assono.de Page 107
  • 108. Loading JavaScript (cont.) ● <script> tag got a new, optional attribute in HTML 4: defer ● but it is only implemented in IE 4+ and Firefox 3.5+ ● <script> tags programmatically created and inserted into the DOM don't block anything. ● If code is self-executing, you're done, else you have to react, when it's ready. ● In IE use script.onreadystatechange and script.readyState, else use script.onload to install a function to run, when the script is ready. www.assono.de Page 108
  • 109. Helper function loadScript function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if (script.readyState) { // IE script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { … www.assono.de Page 109
  • 110. Helper function loadScript (cont.) function loadScript(url, callback){ … } else { // other browsers script.onload = function(){ callback(); }; } script.src = url; var head = document.getElementsByTagName("head"); head[0].appendChild(script); } ● If necessary, you can chain loadScript calls. ● Very Best Practice: Load only loadScript directly in your page and use it to get the rest. www.assono.de Page 110
  • 111. Scripting the DOM ● Accessing DOM objects is slow! ● Minimize the access to them, use local variables. ● One big modification is better than many small ones. ● Using innerHTML can be faster then using DOM methods, but not considerably faster (and even slower in some WebKit based browsers). ● Prefer the convenient and fast Selectors API methods (doc.querySelectorAll and doc.querySelector) to doc.getElementBy… whenever available (modern browsers). www.assono.de Page 111
  • 112. Scripting the DOM (cont.) ● Reduce the number of repaints, and even more important, the number of reflows. ● Repaint: visible change of DOM, but no change of sizes. ● Reflow: visible change of DOM and the size and positions of the elements have to be recalculated. ● Cache style information. ● Combine or batch changes. ● Take elements out of the DOM tree, manipulate them and put them back. ● Use document fragments to build a DOM sub-tree (doc.createDocumentFragment) and add it in one step to the DOM. www.assono.de Page 112
  • 113. Event Delegation ● Uncaught events bubble up the DOM tree. ● For repeating structures like tables or lists it's better to have one event handler for all events than one for each sub-element (e.g. row). ● The original target is stored in the event object. www.assono.de Page 113
  • 114. Event Delegation (cont.) ● Example: table.onclick = function(e) { e = e || window.event; var target = e.target || e.srcElement; // exit, if target is not a row if (target.nodeName !== 'TR') { return; } // do something with the target, e.g. change style // prevent default action and cancel bubbling if (typeof e.preventDefault === 'function') { e.preventDefault(); e.stopPropagation(); } else { e.returnValue = false; e.cancelBubble = true; } }; www.assono.de Page 114
  • 115. Keeping the User Interface Responsive ● Execution of JavaScript blocks the UI ● Avoid long running scripts when possible, else split the task up and use timers to schedule the work. ● Example: function processArray(items, process, callback){ var todo = items.concat(); // clone them setTimeout(function(){ process(todo.shift()); if (todo.length > 0){ setTimeout(arguments.callee, 25); } else { callback(items); } }, 25); } www.assono.de Page 115
  • 116. Keeping the User Interface Responsive (cont.) ● You can measure the time and continue, until a limit is reached. Then you set up a timer to continue from here on later. ● Example (excerpt in pseudo code): var start = +new Date(); do { // do something } until (+new Date() - start > limit); if (still something to do) { // set up the timer } ● You add overhead, but the UI keeps responsive. ● Use the web workers API (new in HTML 5), when it's available in “your” target browsers. www.assono.de Page 116
  • 117. Tools ● Mozilla Firefox with - Firebug: http://getfirebug.com/ - Venkman (JavaScript debugger): http://www.hacksrus.com/~ginda/venkman/ ● For other browsers (mainly for testing) - Firebug Lite: http://getfirebug.com/firebuglite - Fiddler: http://www.fiddler2.com/fiddler2/ www.assono.de Page 117
  • 118. Books ● Douglas Crockford: “JavaScript: The Good Parts” O'Reilly, Yahoo! Press, 2008, ISBN 978-0-596-51774-8, 176 pages Douglas' Web site: http://www.crockford.com/ www.assono.de Page 118
  • 119. Books (cont.) ● Nicholas C. Zakas: “High Performance JavaScript” O'Reilly, Yahoo! Press, 2010, ISBN 978-0-596-80279-0, 240 pages Nicholas' Web site: http://www.nczonline.net/ www.assono.de Page 119
  • 120. Books (cont.) ● Stoyan Stefanov: “JavaScript Patterns” O'Reilly, Yahoo! Press, 2010, ISBN 978-0-596-80675-0, 240 pages Web site: http://jspatterns.com/ www.assono.de Page 120
  • 121. Books (cont.) ● Stoyan Stefanov: “Object-Oriented JavaScript” Packt Publishing, ISBN 978-1-847194-14-5, 337 pages Stoyan's Web site: http://www.phpied.com/ www.assono.de Page 121
  • 122. Books (cont.) ● John Resig: “Pro JavaScript Techniques” Apress, ISBN 1-59059-727-3, 359 pages John's Web site: http://ejohn.org/ www.assono.de Page 122
  • 123. Books (cont.) ● Ross Harmes, Dustin Diaz: “Pro JavaScript Design Patterns” Apress, ISBN 978-1-59059-908-2, 269 pages Ross' Web site: http://techfoolery.com/ Dustin's Web site: http://www.dustindiaz.com/ www.assono.de Page 123
  • 124. The JavaScript Standard ● Standard ECMA-262 ECMAScript Language Specification http://www.ecma-international.org/publications/ standards/Ecma-262.htm www.assono.de Page 124
  • 125. Questions? Ask questions now — or later: tbahn@assono.de www.assono.de/blog 04307/900-401 Presentation will be posted in our blog at: www.assono.de/blog/d6plinks/UKLUG-2011-JavaScript-Blast www.assono.de Page 125