JavaScriptOBJECT -> “Namespace”, “classes”, “constructor”,prototypes, fluent “interface”, jQuery live example, MVVM,Knocko...
• JavaScript is object based, everything in JS is an object          • Variables created using var          • You should a...
• NULL               • One of the JavaScript primitive types               • Represents the absence of value  Null        ...
 Objects are only equal to themselves                      Primitives are equal if the values match (“salvo” === “salvo”...
 Top-level function         Simple way to test for numbers and failed mathematicalisNaN     expressions         parseFl...
 Comparision == OR ===DEMO    Prototype
 The window object in browsers is a global namespace             Variables defined outside a function are in the global ...
 We create a class in js by a patternClasses    Use it to prevent name collisions and polluting parent namespace        ...
 A function start with the keyword function             A function can have a name or not             A function can ha...
 Closure        ClassDEMO    Namespace – Module        Namespace – Inherit
 http://en.wikipedia.org/wiki/Model_View_ViewModel                The Model View ViewModel (MVVM) is an architectural   ...
Simplify dynamic JavaScript UIs by applying the Model-View-Knockoutjs   ViewModel (MVVM)
 Knockout – visible or invisible        Knockout – listDEMO    Matt and Leigh example
•                 Some useful links    Strict Mode - http://msdn.microsoft.com/en-us/library/ie/br230269(v=vs.94).aspx•   ...
Upcoming SlideShare
Loading in...5
×

Javascript fundamentals and not

293

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
293
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/
  • Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/
  • Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/
  • Javascript fundamentals and not

    1. 1. JavaScriptOBJECT -> “Namespace”, “classes”, “constructor”,prototypes, fluent “interface”, jQuery live example, MVVM,Knockoutjs
    2. 2. • JavaScript is object based, everything in JS is an object • Variables created using var • You should always use semicolons, and an object is a collection of name/value name: value • JavaScript is case sensitive • Always use strict mode, declared with “use strict”  Restrictions  Cannot use a variable without declaring itstarter   Cannot write to a read-only property Cannot add properties to non-extensible objects  Cannot illegally delete functions and variables  Cannot define a property more than once in an object literal  Cannot use a parameter name more than once in a function  Cannot use reserved words, eval, or arguments, as names for functions and variables  The value of this in a function is no longer the window object  Cannot declare functions inside of statements  Cannot change the members of the arguments array
    3. 3. • NULL • One of the JavaScript primitive types • Represents the absence of value Null • Evaluates to false in Boolean expressions and • UNDEFINED • Primitive typeundefined • Represents an unknown value • Returned when a non-existent object property is called • Evaluates to false in Boolean expressions
    4. 4.  Objects are only equal to themselves  Primitives are equal if the values match (“salvo” === “salvo”)  Two sets of equality operators ( == and ===) Avoid coercive  never use == or != INSTEAD of === or !==equality operators 0 == 0; 0 === 0; //true //false false == 0; //true false === 0; //false
    5. 5.  Top-level function  Simple way to test for numbers and failed mathematicalisNaN expressions  parseFloat method is helpful to convert a string in a number
    6. 6.  Comparision == OR ===DEMO  Prototype
    7. 7.  The window object in browsers is a global namespace  Variables defined outside a function are in the global namespace  Variables defined without the var keyword are in the global namespace  Always create your own namespace by a pattern  The module pattern was made by Eric Miraglia of YUI in the 2007  Use it to prevent name collisions and polluting parent namespace  Keep everything tidy  Module Export Pattern:Namespace var MODULE = (function () { var my = {}, privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; }());  Anonymous Closures Pattern: (function () { // ... all vars and functions are in this scope only // still maintains access to all globals }());
    8. 8.  We create a class in js by a patternClasses  Use it to prevent name collisions and polluting parent namespace  Keep everything tidy  Use the new keyword to invoke the constructor
    9. 9.  A function start with the keyword function  A function can have a name or not  A function can have parameters  The delimiters of the function are { }  A function can return a value, and that value can be itself  Cannot be overloaded!!!  Parameters not passed are setted undefinedFunctions  Function without parameters has a default param called (arguments)  Is possible to have a function inside a function Closure  Functions have this  Every function has a property named prototype  Useful to add a new function to a “class”
    10. 10.  Closure  ClassDEMO  Namespace – Module  Namespace – Inherit
    11. 11.  http://en.wikipedia.org/wiki/Model_View_ViewModel  The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the presentation model design pattern introduced by Martin Fowler.[1] Largely based on the model–view–controller pattern (MVC), MVVM is targeted at modern UI development platforms which support Event-drivenMVVM Pattern programming, such as HTML5,[2][3] Windows Presentation Foundation(WPF), Silverlight and the ZK framework.  MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back end logic known as the model (also known as the data model to distinguish it from the view model).
    12. 12. Simplify dynamic JavaScript UIs by applying the Model-View-Knockoutjs ViewModel (MVVM)
    13. 13.  Knockout – visible or invisible  Knockout – listDEMO  Matt and Leigh example
    14. 14. • Some useful links Strict Mode - http://msdn.microsoft.com/en-us/library/ie/br230269(v=vs.94).aspx• Strict Mode - http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/• Knockoutjs - http://knockoutjs.com/• JavaScript info - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/• Namespace function - https://github.com/smith/namespacedotjs/blob/master/example/sandbox.js
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×