• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript Basics - part 1
 

Javascript Basics - part 1

on

  • 4,112 views

Presentation from tech meeting @applicake on 6.06.2011

Presentation from tech meeting @applicake on 6.06.2011

Statistics

Views

Total Views
4,112
Views on SlideShare
4,109
Embed Views
3

Actions

Likes
0
Downloads
40
Comments
0

2 Embeds 3

http://a0.twimg.com 2
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript Basics - part 1 Javascript Basics - part 1 Presentation Transcript

    • JS - Basics part 1Thursday, June 9, 2011
    • JS - overview • JavaScript =/= DOM • Prototypal inheritance (objects not classes) • Dynamic language • Closures (lambda) • Loosely & dynamically typed • Event loop • Functional language • ECMA5 • Almost everything is an • SSJS objectThursday, June 9, 2011
    • VariablesThursday, June 9, 2011
    • Globals & Locals • only function scope • no block scope (ok, this is not exactly true...) • never, ever without varThursday, June 9, 2011
    • Globals & Locals var a = 5; (function() { var a = 7; })(); console.log(a) // 5Thursday, June 9, 2011
    • Globals & Locals var a = 5; (function() { a = 7; })(); console.log(a) // 7Thursday, June 9, 2011
    • Globals & Locals • watch out for loops for(var i = 0; i < 3; i++) { // be sure youre not making i global! }Thursday, June 9, 2011
    • var & let • let - variable with block scope • implemented in JS 1.7 (part of ECMA6) • sweet but not yet thereThursday, June 9, 2011
    • var & let <script type="application/ javascript;version=1.7"> var a = 6; if(true) { var b = 7; } console.log(a); // 6 console.log(b); // 7 </script>Thursday, June 9, 2011
    • var & let <script type="application/ javascript;version=1.7"> var a = 6; if(true) { let b = 7; } console.log(a); // 6 console.log(b); // Error: b is not defined </script>Thursday, June 9, 2011
    • module pattern • extremely useful in apps that have more than one JS file • easy way to encapsulate and limit the amount of global variables • use please :) • JavaScript Module Pattern: In-Depth - by Ben Cherry http://bit.ly/j4vhTiThursday, June 9, 2011
    • module pattern (function(){ // om nom nom, do stuff, nothing gets out of here })() var MyApp = function() { // do stuff and return some object for future use return { om : nom } } (); MyApp.om // nomThursday, June 9, 2011
    • module pattern var MyApp = function() { var privateVariable; function privateFunction(someVar) { // mess around with privateVariable and someVar } var thisWillBePublic = function(someVar) { return privateFunction(someVar) } return { myAppMethod: thisWillBePublic } } (); MyApp.myAppMethod();Thursday, June 9, 2011
    • variable types • undefined - variable that has no value assigned • null - object with no value • boolean - true or false • string - this "and that" • number - double precision 64bit number & NaN • object - everything else (yes, arrays and functions too)Thursday, June 9, 2011
    • Dynamic Typing • Data types can change var foo = 42; foo = "Blah"; • „+” can convert to number +"42" // 42 • „+” can convert to string 33 + " oops" // "33 oops" "37" - 7 // 30 "37" + 7 // "377" • Don’t kill the compiler - avoid changing types!Thursday, June 9, 2011
    • Falsy Values • undefined • null • false • NaN, 0 (both are numbers) • "" (empty strings) !null; !undefined; !0; !; !false; !NaN // trueThursday, June 9, 2011
    • Falsy Values 0 == ; 0 == false; == false // true 0 == undefined; 0 == null // false undefined == null // true NaN == NaN // falseThursday, June 9, 2011
    • Literals vs Built-in Objects var a = 1; typeof a; // "number" a instanceof Number; // false a instanceof Object; // false var b = new Number(1); typeof b; // "object" b instanceof Number; // true b instanceof Object; // true a == b // true a === b // false Same happens with strings & booleansThursday, June 9, 2011
    • Literals vs Built-in Objects var a = []; typeof a; // "object" a instanceof Array; // true a instanceof Object; // true var b = new Array(1); typeof b; // "object" b instanceof Array; // true b instanceof Object // true a == b // false - comparing references, not values! a === b // false - same case With arrays, objects and functions it works both waysThursday, June 9, 2011
    • Built-in Objects • Object • RegExp • Function • Error • Array • ... • String • Boolean • DateThursday, June 9, 2011
    • OperatorsThursday, June 9, 2011
    • Operators || and && function a(b){ function a(b){ return b || 7; return b && 7; } } a(); // 7 a(); // undefined a(9); // 9 a(9); // 7 a([]); // [] a([]); // 7 a(0); // 7 a(0); // 0Thursday, June 9, 2011
    • Operator !! • makes a boolean out of anything: !!0 !! !!null !!undefined !!NaN // false !!5 !!om nom nom // true !![] !!{} // true !!function(){} // trueThursday, June 9, 2011
    • Operators ~~ and | • get integer from any number (fastest way) ~~3.75 0 | 3.75 parseInt(3.75)Thursday, June 9, 2011
    • == && === • == checks only the value • === checks also the type • always use === [] == ![] // true [] === ![] // falseThursday, June 9, 2011
    • ObjectsThursday, June 9, 2011
    • Objects • almost everything is an object: • functions, arrays, object literals, constructor instances.. • everything that is not a string, number, boolean (literals!), null or undefined • objects are always passed by reference (no clone method) • comparing objects compares references (no equal method) • objects are dynamic - can be modified after creating • they can inherit from each otherThursday, June 9, 2011
    • Objects var a = { b : om }, a1 = { b : om } var c = a; a === a1 // false c === a // true a.b // om c.b // om c.b = nom a.b // nom (function(obj) { obj.d = ninja! })(a) c.d // ninja!Thursday, June 9, 2011
    • Objects var obj = {key1 : 5} obj.key1 // 5 obj[key1]; // 5 var a = key1; obj[a] // 5 obj.someKey // undefined obj.someKey.value // errorThursday, June 9, 2011
    • Objects - creating var obj = { key1 : ”value”, var obj = {}; key2 : 7, obj.key1 = str; key3 : true, obj.key2 = 7; key4 : {}, obj.key3 = {}; key5 : [], obj.key3.boo = function() {} key6: function(){}, key7: myFun } function myFun() {}Thursday, June 9, 2011
    • Arrays • Indexes are converted to strings and used as names for retrieving values. • Very efficient for sparse arrays. • length is not actual size of array but highest index + 1 • typeof [] returns ”object” • Arrays can be augmented (as any other object)Thursday, June 9, 2011
    • Arrays - length property var arr = []; arr[3] = 1; arr.length // 4 arr // [undefined, undefined, undefined, 1]Thursday, June 9, 2011
    • Arrays - deleting elements var arr = [1, 2, 3] // [1, 2, 3] delete arr[1] // [1, undefined, 3] var arr = [1, 2, 3] // [1, 2, 3] arr.splice(1, 1) // [1, 3]Thursday, June 9, 2011
    • Arrays - iterating • Use for or while loop • ECMA5 has more methods for iteration like forEach • for...in is dangerous and (usually) ineffective as it uses not only array elements but also object properties • for..in can be effective in case of sparse arrays but has to be used with hasOwnProperty methodThursday, June 9, 2011
    • Arrays - iterating Array.prototype.myArrMethod = function() { return thisIsMyArrMethod } var arr = []; arr[3] = 3; arr[1000] = 1000; for(var i = 0, len = arr.length; i < len; i++){ console.log(arr[i]) } // 3 x undefined, 3, 996 x undefined, 1000 for(var i in arr) { console.log(arr[i]) } // 3, 1000, function () { return thisIsMyArrMethod } for(var i in arr) { if(arr.hasOwnProperty(i)) { console.log(arr[i]) } } // 3, 1000Thursday, June 9, 2011
    • FunctionsThursday, June 9, 2011
    • Functions • Functions are first class objects – can be passed, returned or stored • typeof function(){} returns ”function” • In JS function is what in other languages is called lambda • Functions can be defined inside each other • Functions return undefined if not set differently (unless new operator is used)Thursday, June 9, 2011
    • Functions - defining function foo() {} • is equivalent of: var foo = function() {} • Functions can be defined and called right away: var foo = function(){}() (function(a){})(123)Thursday, June 9, 2011
    • Functions - closures Function keeps a reference to its private variables even after it has returned function setPuppyBasket(initialPuppy) { var basket = [initialPuppy] return function(puppy) { if(puppy) { basket.push(puppy) } return basket.toString(); } } var puppyBasket = setPuppyBasket(black); puppyBasket(); // black puppyBasket(white) // black,white puppyBasket(white) // black,white,whiteThursday, June 9, 2011
    • Function - closures • Allow to use private variables and methods • Can cause problems when not used with caution • Excessive use of closures can affect script performance - all objects are kept in memoryThursday, June 9, 2011
    • <p id="help">Helpful notes will appear here</p> <p>E-mail: <input type="text" id="email" name="email"></p> <p>Name: <input type="text" id="name" name="name"></p> <p>Age: <input type="text" id="age" name="age"></p> function showHelp(help) { document.getElementById(help).innerHTML = help; } function setupHelp() { var helpText = [ {id: email, help: Your e-mail address}, {id: name, help: Your full name}, {id: age, help: Your age (you must be over 16)} ]; for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; document.getElementById(item.id).onfocus = function() { showHelp(item.help); } } }Thursday, June 9, 2011
    • for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; var elem = document.getElementById(item.id); elem.onfocus = function() { showHelp(item.help); } } for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; var elem = document.getElementById(item.id); elem.onfocus = function(helpItem) { return function() { showHelp(helpItem); } }(item.help) } }Thursday, June 9, 2011
    • Functions - arguments • special ‘array like’ object accessible inside every function • contains all arguments with which function was invoked • has length property but no other array methods like splice or sortThursday, June 9, 2011
    • Functions - arguments function joiner(separator) { // make real array from arguments var args = [].splice.call(arguments, 1) return args.join(separator) } function joiner(separator) { var len = arguments.length; var joined = ; for(var i = 1; i < len; i++) { joined += arguments[i] if(arguments[i+1]) { joined += separator; } } return joined; } joiner(:, 1, 2, 3); // 1:2:3Thursday, June 9, 2011
    • Functions - length • fnName.length - number of parameters function expects • arguments.length - number of parameters actually passed to the function function joiner(separator) { console.log(joiner.length: + joiner.length) console.log(arguments.length: + arguments.length) } joiner(:, 1, 2, 3); // joiner.length: 1 // arguments.length: 4Thursday, June 9, 2011
    • Function - invocation • Function form functionObject(arguments) • Method form thisObject.methodName(arguments) thisObject["methodName"](arguments) • Constructor form new functionObject(arguments) • Apply/call form functionObject.apply(thisObj,[arguments])Thursday, June 9, 2011
    • Functions - this • this is an extra parameter. Its value depends on the calling form. • It’s the context in which function is called • this gives methods access to their objects • this is bound at invocation time • Treat it like something that will be changing • More information on this and context http://j.mp/jFFgUBThursday, June 9, 2011
    • Function - invocation in function form functionObject(arguments) • When a function is called in the function form, this is set to the global object (always!) • Most common usage but not very useful one • It makes it harder to write helper functions within a method because the helper function does not get access to the outer this. var that = this;Thursday, June 9, 2011
    • Example function oohLaLa() { alert(this == window) } oohLaLa(); // trueThursday, June 9, 2011
    • Function - method form myObject.methodName(args) myObject["methodName"](args) • When a function is called in the method form, this is set to myObject - the object containing the function. • This allows methods to have a reference to the parent objectThursday, June 9, 2011
    • Example var ooh = { laLa: function() { alert(this === ooh) } } ooh.laLa(); // true var domNode = document.getElementById(elem); domNode.onclick = ooh.laLa; // false - context is domNode! var domNode = document.getElementById(elem); domNode.onclick = function() { ooh.laLa(); // true - context is ooh object }Thursday, June 9, 2011
    • Function - constructor new functionObject(args) • When a function is called with the new operator, a new object is created and assigned to this. • If there is not an explicit return value, then this will be returned.Thursday, June 9, 2011
    • Example var Ooh = function() {} Ooh.prototype.laLa = function(obj) { alert(this === obj) } var myOoh = new Ooh(); // myOoh is created, // set to this and returned myOoh.laLa(myOoh); // trueThursday, June 9, 2011
    • Function apply/call fnObject.apply(thisObj,[arg1, arg2]) fnObject.call(thisObj, arg1, arg2) • this is set explicitelyThursday, June 9, 2011
    • Function - bind fnObject.bind(thisObj, arg1, arg2) • Available in ECMA5 • Binding this object & presetting the arguments • Calling bind returns new - curried -Thursday, June 9, 2011
    • Example function sum() { var sum = 0; for(var i = 0; i < arguments.length; i++) { sum += arguments[i] } return sum } var addToOne = sum.bind(null, 1); addToOne(2) // this === null, returns 3 var addToThree = sum.bind(null, 1, 2); addToThree(3) // this === null, returns 6Thursday, June 9, 2011
    • To be (hopefully) continued with event loop, inheritance & other JS sweetnessThursday, June 9, 2011