Tohuwabohu excorcism

Javascript Programming

APIs

Javascript is composed of libraries and different APIs. The core API is called “ECMAScript”.
Tthere are several different other APIs which are implemented by different Browsers, or may be loaded optionally like “JQuery”.
More about it : https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview

Some APIs which you have to know, when programming JavaScript.

Javascript Web API	Available when programming in browser	https://developer.mozilla.org/en-US/docs/Web/API
JQuery API	Available as an optional lib. Allows to handle DOM much easier	http://api.jquery.com/

IDE

Visual Studio 2013	<fc #FF0000>not free</fc>
Aptana IDE	<fc #00FF00>free</fc>	http://www.aptana.com/products/studio3/download	Code complete, Jquery too, Livereload

Materials

Shortcuts for VisualStudio 2013

http://visualstudioshortcuts.com/2013/

Glossary

Variable hoisting	A Variable declaration is always moved by the compiler to the top of the function. But the initialization stays where it was. // functions are equivalent because of variable hoisting javascript>function {console.log(a); var a=2;} javascript>function {var a; console.log(a); var a=2;}
Closures	Closures is - when a function is returned, which uses existing private variables. // function returns a function which uses internal variables! function getClosure(name) { // private variable var greetings = "Hello "+name; //anonymous function return function (name) { console.log(greetings); } } // create functions at runtime! var closureCreatedAlexFunction = getClosure("Alex"); var closureCreatedGunillaFunction = getClosure("Gunilla Johansdotter"); closureCreatedAlexFunction(); // Hello Alex closureCreatedAlexFunction(); // Hello Gunilla Johansdotter
Function in JS	it's an object it may be a method - if it's within another function it may be a constructor - if it is called with prefix “new” AND the function return nothing or a primitive!
Prototypes	JS is a class-less prototype-based language. It doesn't have any classes, instead it may take existing objects as prototypes! // JS is a class-less prototype-based language. It doesn't have any classes, instead it may take existing objects as prototypes! /* functions may become constructors, when: - they return nothing or a primitive - they are called with the "new" keyword then they return an object, made from the same prototype, as constructor-function */ // has prototype Human.prototype function Human(name) { this.name = name; } // has prototype Human.prototype var alex = new Human("Alexander"); console.log("Human's name: " + alex.name); // prototypes are accessible. They may be extended. Then all the new Humans will inherit the extended functions! Human.prototype.sayName = function () { console.log(this.name) } alex.sayName(); // Alexander not is extended by "sayName()" // Object2 -> Object1 -> Object1.prototype var Object1 = {name:"Sascha", age:99} var Object2 = Object.create(Object1); // Object1 inherits Object2
Constuctors	Functions may be a constructor, which will then create objects. When constructor creates objects gilt - newObject.prototype==constructor.prototype /* this function is a constructor! but it may be called without new... then "this" would point to global Object "Window" and this.name="bla" would create a global var So - check the instance of this and redirect function calls to Object creation */ function Human(name) { // check "this". Return an Object if(!(this instanceof Human)){ return new Human(name); } this.name = name; } var obj1 = new Human("Conan"); // creates object "Conan" var obj2 = Human("Onan"); // creates object "Onan". No "new" is used console.log(obj1); console.log(obj2);

Fallpits

Don't use '==' . Use '===' instead- its more intuitive.
Eval is evil. It enables injections.
Always use 'var' to declare variables.

Importing Javascript Files

close tag explicitely by </script>, <script/> doesnt work!!!
Insert attributes: language=“javascript” type=“text/javascript”

<script language="javascript" type="text/javascript" src="/scratchpad/prototype2/js/custom.js"></script>

Semicolon is set automatically every line end

// returns an object
function foo(){
 return{
   foo:'bar'
 }
}


// returns 'undefined'
function foo(){
 return
 {
   foo:'bar'
 }
}

Equality

            console.log("1==1", 1 == 1);
            console.log("'foo'=='foo'", 'foo' == 'foo');
            console.log("[1, 2, 3] == [1, 2, 3]", [1, 2, 3] == [1, 2, 3]);      // false - arrays are pointers
            console.log("new Array(3).toString()", new Array(3).toString());    // ",," - array converted to line
            console.log("new Array(3) == ',,'", new Array(3) == ",,");          // true
            console.log("new Array(3) === ',,'", new Array(3) === ",,");        // false
            console.log("0.1+0.2 = ", 0.1 + 0.2);                               // 0.30000000000000004 - numbers are all float64
            console.log("(0.1 + 0.2).toFixed(1) = ", (0.1 + 0.2).toFixed(1));                               // 0.30000000000000004 - numbers are all float64

NaN

            //NaN - not a number
            console.log("1==1", Number("666"));                             // 666
            console.log('Number("666diabouls")', Number("666diabouls"));    // NaN
            console.log('parseInt("19bb") ', parseInt("19bb"));             // 19 - parses until first NaN from left
            console.log('parseInt("19.876") ', parseInt("19.876"));         // 19
            console.log('parseFloat("19.876") ', parseFloat("19.876"));       // 19.876                          // 0.30000000000000004 - numbers are all float64

bitlogic

            // JS will always convert to int first, before applying bit logic
            // in JS Negation is a bit logic operator
            /*
              3 = 0000 0000 0000 0000 0000 0000 0011 = (int)3.346346
             ~3 = 1111 1111 1111 1111 1111 1111 1100 = -4
             -3 = 1111 1111 1111 1111 1111 1111 1101
            ~-3 = 0000 0000 0000 0000 0000 0000 0010 =  2
            */

            console.log('~3.346346 =', ~3.346346);         // -4 - when converting
            console.log('~~3.346346 =', ~~3.346346);       // -3 - when converting

            console.log('~3 =', ~3);                // -4
            console.log('~3.346346 =', ~3.346346);  // -4
            console.log('~-3 =', ~-3);              //  2                      // 0.30000000000000004 - numbers are all float64

Achtung: do not mistake the binary negation ~ for Not(!)

Conversion

JS enterpritates from left to right
JS tries to convert String to NUmber and Number to String

12 + “ or ” + “20”; // “12 or 20”
“12” / 2 + 1; // 7
“day” * 2; // NaN
var a = 42; // 42
a.toString(); // “42”
a.toString().length; // 2
a.toString().length.toString(); // “2”

Inheritance

Javascript in Browser

The Objects on a webpage are hierarchically organized. Details: http://www.tutorialspoint.com/javascript/javascript_html_dom.htm

Window object: Top of the hierarchy. It is the outmost element of the object hierarchy.
Document object: Each HTML document that gets loaded into a window becomes a document object. The document contains the content of the page.
Form object: Everything enclosed in the <form>…</form> tags sets the form object.
Form control elements: The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.

Table of Contents