Your SlideShare is downloading. ×
  • Like
JavaScript Functions
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JavaScript Functions

  • 1,143 views
Published

Brian Moschel's March 2009 JS.Chi() presentation on JavaScript Functions.

Brian Moschel's March 2009 JS.Chi() presentation on JavaScript Functions.

Published in Technology , Lifestyle
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,143
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
52
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • By the end: Understand complex JS code Be comfortable with passing functions around like its nothin Have a decent understanding of closures and how to use them Fully “Functional”

Transcript

  • 1. JavaScript Functions
    • We’ll Cover
      • syntax
      • arguments
      • context
      • closures
    • Goal : you <3 JavaScript Functions
    You.learn() Jupiter IT
  • 2. Why?
    • Functions are first class
    • Closures are powerful
    • Building block of JS knowledge
    Jupiter IT
  • 3. The Basics var square = function ( x ){ return x * x ; } square(5) Function reference Function keyword Arguments Code body Return value Jupiter IT
  • 4. 3 Ways to Declare a Function var f = function (){ alert ( 'hi' )} function f (){ alert ( 'hi' )} window . f = function (){ alert ( 'hi' )} Jupiter IT
  • 5. Everything is an Object I ask &quot;girl can I have closures, canvas, advanced features for my project?&quot; You say &quot;sure, but keep it simple, everything is an object&quot; I say &quot;JavaScript you've come a long way from copy-paste hacks&quot; You blush &quot;I know, but please, call me AJAX&quot; -- Digital Crush Jupiter IT var f = function ( a , b ){ return a - b }; var g = “hi”; var h = 1;
  • 6. Functions are First Class
    • Argument
    • Variable
    • Return
    var f = function ( a , b ){ return a - b }; [1,2,3,4].sort ( f ); var g = function (){ return true ;} function bark (){ return function (){ alert ( 'bark' ); } } Jupiter IT
  • 7. Functions are First Class
    • Object attribute
    • Array element
    var obj = { func : function (){ alert ( 'i am a function' ); } } obj.func(); var a = []; a [ 0 ] = function (){ return true ;} a[0](); Jupiter IT
  • 8. Passing Arguments
    • Pass by value
    • Pass by reference
    function change ( obj ){ obj . a = obj . val + 1 ; } var obj = { a : 1 }; change ( obj ); alert ( obj . a ); function change ( x ){ x = x + 1 ; } var a = 1 ; change ( a ); alert ( a ); Jupiter IT // alerts 1 // alerts 2
  • 9. Context
    • this keyword
    function f (){ this . barkCount ++; } f(); var dog = { barkCount : 0 , bark : function (){ this . barkCount ++; } } dog . bark (); Jupiter IT
  • 10. Context
    • Apply & Call
      • Invoke as if function is a method of any object
      • Pass in an array of arguments
    doYourBusiness . call ( dog , 1 , 2 ); doYourBusiness . apply ( dog , [ 1 , 2 ]); dog . doYourBusiness ( 1 , 2 ); Jupiter IT
  • 11. Arguments
    • Overloading functions
    function sum (){ var s = 0 ; for ( var i = 0 ; i < arguments . length ; i ++){ s += arguments [ i ]; } return s ; } alert ( sum ( 1 , 2 , 3 )); Jupiter IT // alerts 6
  • 12. Arguments
    • Argument length
    function f ( a , b ){ if ( arguments . length != f . length ) alert ( 'wrong nbr of args' ); else alert(‘right nbr of args’); } f ( 1 ); f ( 1,2 ); Jupiter IT // alerts “wrong nbr of args” // alerts “right nbr of args”
  • 13. Closures
    • Functions can access the variables and functions declared in its scope
    var a = 1 ; function f ( arg ){ alert ( a ); var b = 1 ; function g (){ alert ( a + b ); } g(); } Jupiter IT
  • 14. Closures
    • Private variables
    var Dog = function (){ var breed ; this . getBreed = function (){ return breed ; } this . setBreed = function ( newBreed ){ breed = newBreed ; } } var dog = new Dog (); dog . setBreed ( 'doberman' ); alert ( dog . getBreed ()); dog.breed Jupiter IT
  • 15. Closures
    • Callbacks
    Todo = { markAsCompleted : function ( task_name ){ MVC . Ajax ( '/complete/' + task_name , { onSuccess : function ( transport ){ alert ( task_name ); } }) } } Jupiter IT
  • 16. Closures
    • (function(){…})()
      • Don’t pollute global namespace
    ( function (){ var count = 0 ; $ ( 'some_div' )[ 0 ]. click ( function (){ count = count + 1 ; alert ( count ); }) })(); Jupiter IT
  • 17. Closures
    • Most Common Misunderstanding
      • Closures store reference to variable, not a copy
    var a = {}; for ( var i = 0 ; i < 3 ; i ++){ a [ i ] = function (){ alert ( i )}; } a [ 0 ](); a [ 1 ](); a [ 2 ](); Jupiter IT // alerts 2 // alerts 2 // alerts 2
  • 18. Closures
    • Most Common Misunderstanding
      • Solution is another closure that “captures” state
    var a = {}; for ( var i = 0 ; i < 3 ; i ++){ ( function ( j ){ a [ j ] = function (){ alert ( j )}; })( i ) } a [ 0 ](); a [ 1 ](); a [ 2 ](); Jupiter IT // alerts 0 // alerts 1 // alerts 2
  • 19. Two Things to Remember
    • You can treat a function like any other object
    • Closures are a way to use outside variables inside a function
    Jupiter IT Poppin' bottles with Document Object Models, So many lonely nights with Prototype. Opera, IE, Firefox, or Chrome, I write cross browser code and give you a home. -- Digital Crush