Tohuwabohu excorcism

User Tools

Site Tools

Trace:
programming:javascript

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
programming:javascript [2023/11/01 07:31] – removed - external edit (Unknown date) 127.0.0.1programming:javascript [2023/11/01 07:31] (current) – ↷ Page moved from camunda:programming:javascript to programming:javascript skipidar
Line 1: Line 1:
 +==== 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}}