SlideShare una empresa de Scribd logo
1 de 14
JavaScript
OBJECT -> “Namespace”, “classes”, “constructor”,
prototypes, fluent “interface”, jQuery live example, MVVM,
Knockoutjs
• 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 it
starter        
               
                 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
• NULL
               • One of the JavaScript primitive types
               • Represents the absence of value
  Null         • Evaluates to false in Boolean expressions
  and       • UNDEFINED
               •   Primitive type
undefined      •   Represents an unknown value
               •   Returned when a non-existent object property is called
               •   Evaluates to false in Boolean expressions
 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
 Top-level function
         Simple way to test for numbers and failed mathematical
isNaN     expressions
         parseFloat method is helpful to convert a string in a number
 Comparision == OR ===
DEMO    Prototype
 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
            }());
 We create a class in js by a pattern
Classes    Use it to prevent name collisions and polluting parent namespace
           Keep everything tidy
           Use the new keyword to invoke the constructor
 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 undefined
Functions    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”
 Closure
        Class
DEMO    Namespace – Module
        Namespace – Inherit
 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-driven
MVVM 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).
Simplify dynamic JavaScript UIs by applying the Model-View-
Knockoutjs   ViewModel (MVVM)
 Knockout – visible or invisible
        Knockout – list
DEMO    Matt and Leigh example
•
                 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

Más contenido relacionado

La actualidad más candente

An Introduction to JavaScript
An Introduction to JavaScriptAn Introduction to JavaScript
An Introduction to JavaScript
tonyh1
 
Real-World Scala Design Patterns
Real-World Scala Design PatternsReal-World Scala Design Patterns
Real-World Scala Design Patterns
NLJUG
 
Java class 1
Java class 1Java class 1
Java class 1
Edureka!
 

La actualidad más candente (20)

09 Object Oriented Programming in PHP #burningkeyboards
09 Object Oriented Programming in PHP #burningkeyboards09 Object Oriented Programming in PHP #burningkeyboards
09 Object Oriented Programming in PHP #burningkeyboards
 
PHP- Introduction to Object Oriented PHP
PHP-  Introduction to Object Oriented PHPPHP-  Introduction to Object Oriented PHP
PHP- Introduction to Object Oriented PHP
 
JS - Basics
JS - BasicsJS - Basics
JS - Basics
 
Object Oriented Javascript part2
Object Oriented Javascript part2Object Oriented Javascript part2
Object Oriented Javascript part2
 
Oops concepts in php
Oops concepts in phpOops concepts in php
Oops concepts in php
 
Abstraction in java [abstract classes and Interfaces
Abstraction in java [abstract classes and InterfacesAbstraction in java [abstract classes and Interfaces
Abstraction in java [abstract classes and Interfaces
 
Java script
Java scriptJava script
Java script
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Design patterns illustrated-2015-03
Design patterns illustrated-2015-03Design patterns illustrated-2015-03
Design patterns illustrated-2015-03
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
An Introduction to JavaScript
An Introduction to JavaScriptAn Introduction to JavaScript
An Introduction to JavaScript
 
Design Patterns - Factory Method & Abstract Factory
Design Patterns - Factory Method & Abstract FactoryDesign Patterns - Factory Method & Abstract Factory
Design Patterns - Factory Method & Abstract Factory
 
Js ppt
Js pptJs ppt
Js ppt
 
8 introduction to_java_script
8 introduction to_java_script8 introduction to_java_script
8 introduction to_java_script
 
Typescript
TypescriptTypescript
Typescript
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Real-World Scala Design Patterns
Real-World Scala Design PatternsReal-World Scala Design Patterns
Real-World Scala Design Patterns
 
Object oriented javascript
Object oriented javascriptObject oriented javascript
Object oriented javascript
 
WHAT IS ABSTRACTION IN JAVA
WHAT IS ABSTRACTION IN JAVAWHAT IS ABSTRACTION IN JAVA
WHAT IS ABSTRACTION IN JAVA
 
Java class 1
Java class 1Java class 1
Java class 1
 

Destacado (6)

Sharepoint saturday 18 may 2013
Sharepoint saturday   18 may 2013Sharepoint saturday   18 may 2013
Sharepoint saturday 18 may 2013
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
Javascript for the c# developer
Javascript for the c# developerJavascript for the c# developer
Javascript for the c# developer
 
Cv
CvCv
Cv
 
El contrato de compraventa (II Bimestre - Derecho Civil IV, Obligaciones y Co...
El contrato de compraventa (II Bimestre - Derecho Civil IV, Obligaciones y Co...El contrato de compraventa (II Bimestre - Derecho Civil IV, Obligaciones y Co...
El contrato de compraventa (II Bimestre - Derecho Civil IV, Obligaciones y Co...
 
Daftar Riwayat Hidup = Nike Kusuma Wati
Daftar Riwayat Hidup = Nike Kusuma WatiDaftar Riwayat Hidup = Nike Kusuma Wati
Daftar Riwayat Hidup = Nike Kusuma Wati
 

Similar a Javascript fundamentals and not

Jquery Plugin
Jquery PluginJquery Plugin
Jquery Plugin
Ravi Mone
 
Java session05
Java session05Java session05
Java session05
Niit Care
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
Sopheak Sem
 

Similar a Javascript fundamentals and not (20)

ITT 202 PRINCIPLES OF OBJECT ORIENTED TECHNIQUE
ITT 202 PRINCIPLES OF OBJECT ORIENTED TECHNIQUEITT 202 PRINCIPLES OF OBJECT ORIENTED TECHNIQUE
ITT 202 PRINCIPLES OF OBJECT ORIENTED TECHNIQUE
 
Only oop
Only oopOnly oop
Only oop
 
SMI - Introduction to Java
SMI - Introduction to JavaSMI - Introduction to Java
SMI - Introduction to Java
 
JavaScript OOPS Implimentation
JavaScript OOPS ImplimentationJavaScript OOPS Implimentation
JavaScript OOPS Implimentation
 
Java Basics Presentation
Java Basics PresentationJava Basics Presentation
Java Basics Presentation
 
Built to last javascript for enterprise
Built to last   javascript for enterpriseBuilt to last   javascript for enterprise
Built to last javascript for enterprise
 
OOPS in java | Super and this Keyword | Memory Management in java | pacakages...
OOPS in java | Super and this Keyword | Memory Management in java | pacakages...OOPS in java | Super and this Keyword | Memory Management in java | pacakages...
OOPS in java | Super and this Keyword | Memory Management in java | pacakages...
 
Jquery Plugin
Jquery PluginJquery Plugin
Jquery Plugin
 
Java notes
Java notesJava notes
Java notes
 
Java+8-New+Features.pdf
Java+8-New+Features.pdfJava+8-New+Features.pdf
Java+8-New+Features.pdf
 
JavaScript Coding with Class
JavaScript Coding with ClassJavaScript Coding with Class
JavaScript Coding with Class
 
Enterprise js pratices
Enterprise js praticesEnterprise js pratices
Enterprise js pratices
 
Java Basics for selenium
Java Basics for seleniumJava Basics for selenium
Java Basics for selenium
 
Statics in java | Constructors | Exceptions in Java | String in java| class 3
Statics in java | Constructors | Exceptions in Java | String in java| class 3Statics in java | Constructors | Exceptions in Java | String in java| class 3
Statics in java | Constructors | Exceptions in Java | String in java| class 3
 
JavaScript Cheatsheets with easy way .pdf
JavaScript Cheatsheets with easy way .pdfJavaScript Cheatsheets with easy way .pdf
JavaScript Cheatsheets with easy way .pdf
 
PHP 5
PHP 5PHP 5
PHP 5
 
Android Training (Java Review)
Android Training (Java Review)Android Training (Java Review)
Android Training (Java Review)
 
1669958779195.pdf
1669958779195.pdf1669958779195.pdf
1669958779195.pdf
 
Java session05
Java session05Java session05
Java session05
 
Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02Javascriptinobject orientedway-090512225827-phpapp02
Javascriptinobject orientedway-090512225827-phpapp02
 

Javascript fundamentals and not

  • 1. JavaScript OBJECT -> “Namespace”, “classes”, “constructor”, prototypes, fluent “interface”, jQuery live example, MVVM, Knockoutjs
  • 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 it starter   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. • NULL • One of the JavaScript primitive types • Represents the absence of value Null • Evaluates to false in Boolean expressions and • UNDEFINED • Primitive type undefined • Represents an unknown value • Returned when a non-existent object property is called • Evaluates to false in Boolean expressions
  • 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.  Top-level function  Simple way to test for numbers and failed mathematical isNaN expressions  parseFloat method is helpful to convert a string in a number
  • 6.  Comparision == OR === DEMO  Prototype
  • 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.  We create a class in js by a pattern Classes  Use it to prevent name collisions and polluting parent namespace  Keep everything tidy  Use the new keyword to invoke the constructor
  • 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 undefined Functions  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.  Closure  Class DEMO  Namespace – Module  Namespace – Inherit
  • 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-driven MVVM 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. Simplify dynamic JavaScript UIs by applying the Model-View- Knockoutjs ViewModel (MVVM)
  • 13.  Knockout – visible or invisible  Knockout – list DEMO  Matt and Leigh example
  • 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

Notas del editor

  1. Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/
  2. Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/
  3. Strict mode: http://www.nczonline.net/blog/2012/03/13/its-time-to-start-using-javascript-strict-mode/