==== 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|<WRAP> A Variable **declaration** is always **moved by the compiler to the top** of the function. But the initialization stays where it was. 
<sxh javascript>
// 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;}
</sxh></WRAP>|
|Closures|<WRAP>Closures is - when a function is returned, which uses existing private variables. 
<sxh> 
            // 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
</sxh></WRAP>|
|Function in JS |<WRAP>
  - 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!
</WRAP>|
|Prototypes|<WRAP> JS is a class-less prototype-based language. It doesn't have any classes, instead it may take existing objects as prototypes!
<sxh javascript> 
            // 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
</sxh></WRAP>|
|Constuctors|<WRAP> Functions may be a constructor, which will then create objects. When constructor creates objects gilt - newObject.prototype==constructor.prototype
<sxh javascript> 
            /*
                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);


</sxh></WRAP>|
==== 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"**

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

== Semicolon is set automatically every line end  ==

<sxh javascript>
// returns an object
function foo(){
 return{
   foo:'bar'
 }
}


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


== Equality  ==
<sxh javascript>
            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
</sxh>

== NaN ==
<sxh javascript>
            //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
</sxh>

== bitlogic ==
<sxh javascript>
            // 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
</sxh>

**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
<sxh javascript>
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”
</sxh>


== Inheritance == 
{{http://i.imgur.com/3fvndqx.png?600}}



==== 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.

{{http://www.tutorialspoint.com/images/html-dom.jpg}}