SlideShare uma empresa Scribd logo
1 de 55
JavaScript Yoav Rubin,  [email_address] 24.06.10
A little bit about myself ,[object Object],[object Object],[object Object],[object Object],Source: If applicable, describe source origin
JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],JavaScript
[object Object],[object Object],[object Object],[object Object],[object Object],What will  we cover
JavaScript type system
Types ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Type system ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Everything is a boolean ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Everything is a boolean – what is it good for? ,[object Object],[object Object],[object Object],If(a) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Everything is boolean – what is it good for? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var val = obj && obj.methodCall();
Everything is boolean – what is it good for? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var val = possibleVal ||  defaultVal;
Objects are objects ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
I’ll have what she’s having – prototypal inheritance
The prototype ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
The prototype – when is it used? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
The prototype (pType) The object (theObject) theObject.age;   // 32 pType.age ++; The object (theObject) The prototype (pType) theObject.age;   // 33 delete theObject.age;   // nothing happens theObject.age;   // 33 delete pType.age;   // no more age field theObject.age;   // undefined “ Mr” title: “ barber” job: 32 age: “ Jeff” name: “ Mr” title: “ barber” job: 33 age: “ Jeff” name:
The prototype (pType) The object (theObject) theObject.age;   // 32 theObject.age ++;   //  value read from pType, added to theObject The object (theObject) The prototype (pType) theObject.age;   // 33 delete theObject.age;   //  no more age member in theObject theObject.age;   // 32 delete pType.age; theObject.age;   // undefined “ Mr” title: “ barber” job: 32 age: “ Jeff” name: “ Mr” title: “ barber” job: 32 age: “ Jeff” name: 33 age:
Polymorphism  ,[object Object],[object Object],[object Object],[object Object]
(From the tyranny of the compiler)
Functions
Functions are objects ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],Functions are objects
More about functions ,[object Object],[object Object],[object Object],[object Object]
Write a function that calculates the fibonacci value of a number
Classic solution  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Solution with closure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],This pattern is nicknamed memoization
Functions - what else is dynamic  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Functions – arguments  vs  length ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Functions – what’s ‘this’ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Function call forms ,[object Object],[object Object],[object Object],[object Object]
The method form ,[object Object],[object Object],[object Object]
The function form ,[object Object],[object Object],[object Object]
The apply form ,[object Object],[object Object],[object Object],[object Object],[object Object]
The constructor form ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Constructor form – an example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],a.name; // “John” a.title;   // “Mr” a.height; // 3 The code Behind the scenes of the constructor The result
Call forms “ The binding is dependant  upon the way  the function was called”   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],function f(){this.a = 3}; Method form Function form Constructor form Apply form
What about access rights? ,[object Object],[object Object],[object Object],[object Object],[object Object]
function Counter(){ var count = 0; this.getValue = function(){ return count ;}; this.increase = function(){count ++;}; this.decrease = function(){count --;}; this.setValue = function(newVal){count = newVal;}; } var c = new Counter();  c.setValue(5);  c.increase();  c.getValue();  // 6 c. count;  // undefined public public public public private
Anonymous functions ,[object Object],[object Object],[object Object]
Write a function that receives an array of objects and sets their  showIndex  method to show their index in that array
Bad solution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Good solution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
“Everything should be made as simple   as possible, but not simpler” Albert Einstein
What happens when things are too simple (the dark side of JavaScript)
Two scopes ,[object Object],[object Object],[object Object],[object Object]
Global as the default scope ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Semicolon insertion ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],What the developer wrote Behind the scenes of the function The result
The ‘with’ keyword ,[object Object],[object Object],a.b.c = a.b.d +a.b.e; with(a.b){ c=d+e; }
with(obj){ a = b }  if(obj.a === undefined){ if(obj.b === undefined){ a=b ;// two global variables }  else  { a = obj.b;   // a is global, b is not }  else { if(obj.b === undefined){ obj.a=b;   // b is global , a not }  else { obj.a = obj.b;   // both not global } } The ‘with’ keyword obj.a = obj.b;   // both not global obj.a = b;   // b is global, a is not + a = obj.b;   //  a is global, b not a=b;   // two global variables - + - a   (exist in obj)
Bitwise operators ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Numerical calculations ,[object Object],[object Object],[object Object],[object Object]
The utility parseInt ,[object Object],[object Object],[object Object],[object Object],[object Object]
Remember this ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]

Mais conteúdo relacionado

Mais procurados

Exciting JavaScript - Part I
Exciting JavaScript - Part IExciting JavaScript - Part I
Exciting JavaScript - Part IEugene Lazutkin
 
C questions
C questionsC questions
C questionsparm112
 
pointer, virtual function and polymorphism
pointer, virtual function and polymorphismpointer, virtual function and polymorphism
pointer, virtual function and polymorphismramya marichamy
 
Oop2011 actor presentation_stal
Oop2011 actor presentation_stalOop2011 actor presentation_stal
Oop2011 actor presentation_stalMichael Stal
 
Design Patterns in Modern C++
Design Patterns in Modern C++Design Patterns in Modern C++
Design Patterns in Modern C++Dmitri Nesteruk
 
Qcon2011 functions rockpresentation_scala
Qcon2011 functions rockpresentation_scalaQcon2011 functions rockpresentation_scala
Qcon2011 functions rockpresentation_scalaMichael Stal
 
Oop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalOop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalMichael Stal
 
Esoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basicsEsoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basicsRasan Samarasinghe
 
Presentation 4th
Presentation 4thPresentation 4th
Presentation 4thConnex
 
Protocols with Associated Types, and How They Got That Way
Protocols with Associated Types, and How They Got That WayProtocols with Associated Types, and How They Got That Way
Protocols with Associated Types, and How They Got That WayAlexis Gallagher
 
46630497 fun-pointer-1
46630497 fun-pointer-146630497 fun-pointer-1
46630497 fun-pointer-1AmIt Prasad
 
Master in javascript
Master in javascriptMaster in javascript
Master in javascriptRobbin Zhao
 
DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#Rasan Samarasinghe
 
Shapeless- Generic programming for Scala
Shapeless- Generic programming for ScalaShapeless- Generic programming for Scala
Shapeless- Generic programming for ScalaKnoldus Inc.
 

Mais procurados (20)

Exciting JavaScript - Part I
Exciting JavaScript - Part IExciting JavaScript - Part I
Exciting JavaScript - Part I
 
C questions
C questionsC questions
C questions
 
pointer, virtual function and polymorphism
pointer, virtual function and polymorphismpointer, virtual function and polymorphism
pointer, virtual function and polymorphism
 
Oop2011 actor presentation_stal
Oop2011 actor presentation_stalOop2011 actor presentation_stal
Oop2011 actor presentation_stal
 
Functions in C++
Functions in C++Functions in C++
Functions in C++
 
Design Patterns in Modern C++
Design Patterns in Modern C++Design Patterns in Modern C++
Design Patterns in Modern C++
 
Constructors and destructors in C++ part 2
Constructors and destructors in C++ part 2Constructors and destructors in C++ part 2
Constructors and destructors in C++ part 2
 
DIWE - Advanced PHP Concepts
DIWE - Advanced PHP ConceptsDIWE - Advanced PHP Concepts
DIWE - Advanced PHP Concepts
 
Qcon2011 functions rockpresentation_scala
Qcon2011 functions rockpresentation_scalaQcon2011 functions rockpresentation_scala
Qcon2011 functions rockpresentation_scala
 
Oop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalOop2010 Scala Presentation Stal
Oop2010 Scala Presentation Stal
 
Esoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basicsEsoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basics
 
Presentation 4th
Presentation 4thPresentation 4th
Presentation 4th
 
Protocols with Associated Types, and How They Got That Way
Protocols with Associated Types, and How They Got That WayProtocols with Associated Types, and How They Got That Way
Protocols with Associated Types, and How They Got That Way
 
2.dynamic
2.dynamic2.dynamic
2.dynamic
 
Applicative Functor
Applicative FunctorApplicative Functor
Applicative Functor
 
Polymorphism
PolymorphismPolymorphism
Polymorphism
 
46630497 fun-pointer-1
46630497 fun-pointer-146630497 fun-pointer-1
46630497 fun-pointer-1
 
Master in javascript
Master in javascriptMaster in javascript
Master in javascript
 
DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#
 
Shapeless- Generic programming for Scala
Shapeless- Generic programming for ScalaShapeless- Generic programming for Scala
Shapeless- Generic programming for Scala
 

Destaque

Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptdavejohnson
 
The JavaScript Programming Primer
The JavaScript  Programming PrimerThe JavaScript  Programming Primer
The JavaScript Programming PrimerMike Wilcox
 
Functional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks weekFunctional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks weekyoavrubin
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
Functional Programming in JavaScript by Luis Atencio
Functional Programming in JavaScript by Luis AtencioFunctional Programming in JavaScript by Luis Atencio
Functional Programming in JavaScript by Luis AtencioLuis Atencio
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Languageguestceb98b
 

Destaque (11)

Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
 
The JavaScript Programming Primer
The JavaScript  Programming PrimerThe JavaScript  Programming Primer
The JavaScript Programming Primer
 
Functional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks weekFunctional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks week
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Javascript
JavascriptJavascript
Javascript
 
Functional Programming in JavaScript by Luis Atencio
Functional Programming in JavaScript by Luis AtencioFunctional Programming in JavaScript by Luis Atencio
Functional Programming in JavaScript by Luis Atencio
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Language
 
Introduction to JavaScript Programming
Introduction to JavaScript ProgrammingIntroduction to JavaScript Programming
Introduction to JavaScript Programming
 

Semelhante a JavaScript - Programming Languages course

The many facets of code reuse in JavaScript
The many facets of code reuse in JavaScriptThe many facets of code reuse in JavaScript
The many facets of code reuse in JavaScriptLeonardo Borges
 
1669958779195.pdf
1669958779195.pdf1669958779195.pdf
1669958779195.pdfvenud11
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScriptFu Cheng
 
JavaScript(Es5) Interview Questions & Answers
JavaScript(Es5)  Interview Questions & AnswersJavaScript(Es5)  Interview Questions & Answers
JavaScript(Es5) Interview Questions & AnswersRatnala Charan kumar
 
Journey of a C# developer into Javascript
Journey of a C# developer into JavascriptJourney of a C# developer into Javascript
Journey of a C# developer into JavascriptMassimo Franciosa
 
2nd puc computer science chapter 8 function overloading
 2nd puc computer science chapter 8   function overloading 2nd puc computer science chapter 8   function overloading
2nd puc computer science chapter 8 function overloadingAahwini Esware gowda
 
Oop features java presentationshow
Oop features java presentationshowOop features java presentationshow
Oop features java presentationshowilias ahmed
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp DeveloperSarvesh Kushwaha
 
Oopsecondgrouppresentation 180726073512-converted (1)
Oopsecondgrouppresentation 180726073512-converted (1)Oopsecondgrouppresentation 180726073512-converted (1)
Oopsecondgrouppresentation 180726073512-converted (1)Hassan Hashmi
 
Notes5
Notes5Notes5
Notes5hccit
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)Piyush Katariya
 

Semelhante a JavaScript - Programming Languages course (20)

Ajaxworld
AjaxworldAjaxworld
Ajaxworld
 
[2015/2016] JavaScript
[2015/2016] JavaScript[2015/2016] JavaScript
[2015/2016] JavaScript
 
JavaScript Essentials
JavaScript EssentialsJavaScript Essentials
JavaScript Essentials
 
The many facets of code reuse in JavaScript
The many facets of code reuse in JavaScriptThe many facets of code reuse in JavaScript
The many facets of code reuse in JavaScript
 
JavaScript
JavaScriptJavaScript
JavaScript
 
1669958779195.pdf
1669958779195.pdf1669958779195.pdf
1669958779195.pdf
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
 
About Python
About PythonAbout Python
About Python
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
JavaScript(Es5) Interview Questions & Answers
JavaScript(Es5)  Interview Questions & AnswersJavaScript(Es5)  Interview Questions & Answers
JavaScript(Es5) Interview Questions & Answers
 
JavaScript for real men
JavaScript for real menJavaScript for real men
JavaScript for real men
 
Function in C++
Function in C++Function in C++
Function in C++
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
 
Journey of a C# developer into Javascript
Journey of a C# developer into JavascriptJourney of a C# developer into Javascript
Journey of a C# developer into Javascript
 
2nd puc computer science chapter 8 function overloading
 2nd puc computer science chapter 8   function overloading 2nd puc computer science chapter 8   function overloading
2nd puc computer science chapter 8 function overloading
 
Oop features java presentationshow
Oop features java presentationshowOop features java presentationshow
Oop features java presentationshow
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp Developer
 
Oopsecondgrouppresentation 180726073512-converted (1)
Oopsecondgrouppresentation 180726073512-converted (1)Oopsecondgrouppresentation 180726073512-converted (1)
Oopsecondgrouppresentation 180726073512-converted (1)
 
Notes5
Notes5Notes5
Notes5
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)
 

Mais de yoavrubin

CR17 - Designing a database like an archaeologist
CR17 - Designing a database like an archaeologistCR17 - Designing a database like an archaeologist
CR17 - Designing a database like an archaeologistyoavrubin
 
Designing a database like an archaeologist
Designing a database like an archaeologistDesigning a database like an archaeologist
Designing a database like an archaeologistyoavrubin
 
Clojure's take on concurrency
Clojure's take on concurrencyClojure's take on concurrency
Clojure's take on concurrencyyoavrubin
 
Functional OOP, Clojure style
Functional OOP, Clojure styleFunctional OOP, Clojure style
Functional OOP, Clojure styleyoavrubin
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojoyoavrubin
 
Dojo - from web page to web apps
Dojo - from web page to web appsDojo - from web page to web apps
Dojo - from web page to web appsyoavrubin
 

Mais de yoavrubin (6)

CR17 - Designing a database like an archaeologist
CR17 - Designing a database like an archaeologistCR17 - Designing a database like an archaeologist
CR17 - Designing a database like an archaeologist
 
Designing a database like an archaeologist
Designing a database like an archaeologistDesigning a database like an archaeologist
Designing a database like an archaeologist
 
Clojure's take on concurrency
Clojure's take on concurrencyClojure's take on concurrency
Clojure's take on concurrency
 
Functional OOP, Clojure style
Functional OOP, Clojure styleFunctional OOP, Clojure style
Functional OOP, Clojure style
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojo
 
Dojo - from web page to web apps
Dojo - from web page to web appsDojo - from web page to web apps
Dojo - from web page to web apps
 

JavaScript - Programming Languages course

  • 1. JavaScript Yoav Rubin, [email_address] 24.06.10
  • 2.
  • 3.
  • 4.
  • 5.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. I’ll have what she’s having – prototypal inheritance
  • 15.
  • 16.
  • 17. The prototype (pType) The object (theObject) theObject.age; // 32 pType.age ++; The object (theObject) The prototype (pType) theObject.age; // 33 delete theObject.age; // nothing happens theObject.age; // 33 delete pType.age; // no more age field theObject.age; // undefined “ Mr” title: “ barber” job: 32 age: “ Jeff” name: “ Mr” title: “ barber” job: 33 age: “ Jeff” name:
  • 18. The prototype (pType) The object (theObject) theObject.age; // 32 theObject.age ++; // value read from pType, added to theObject The object (theObject) The prototype (pType) theObject.age; // 33 delete theObject.age; // no more age member in theObject theObject.age; // 32 delete pType.age; theObject.age; // undefined “ Mr” title: “ barber” job: 32 age: “ Jeff” name: “ Mr” title: “ barber” job: 32 age: “ Jeff” name: 33 age:
  • 19.
  • 20. (From the tyranny of the compiler)
  • 22.
  • 23.
  • 24.
  • 25. Write a function that calculates the fibonacci value of a number
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39. function Counter(){ var count = 0; this.getValue = function(){ return count ;}; this.increase = function(){count ++;}; this.decrease = function(){count --;}; this.setValue = function(newVal){count = newVal;}; } var c = new Counter(); c.setValue(5); c.increase(); c.getValue(); // 6 c. count; // undefined public public public public private
  • 40.
  • 41. Write a function that receives an array of objects and sets their showIndex method to show their index in that array
  • 42.
  • 43.
  • 44. “Everything should be made as simple as possible, but not simpler” Albert Einstein
  • 45. What happens when things are too simple (the dark side of JavaScript)
  • 46.
  • 47.
  • 48.
  • 49.
  • 50. with(obj){ a = b } if(obj.a === undefined){ if(obj.b === undefined){ a=b ;// two global variables } else { a = obj.b; // a is global, b is not } else { if(obj.b === undefined){ obj.a=b; // b is global , a not } else { obj.a = obj.b; // both not global } } The ‘with’ keyword obj.a = obj.b; // both not global obj.a = b; // b is global, a is not + a = obj.b; // a is global, b not a=b; // two global variables - + - a (exist in obj)
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.