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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Functions

1,210

Published on

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,210
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
53
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 <ul><li>We’ll Cover </li></ul><ul><ul><li>syntax </li></ul></ul><ul><ul><li>arguments </li></ul></ul><ul><ul><li>context </li></ul></ul><ul><ul><li>closures </li></ul></ul><ul><li>Goal : you <3 JavaScript Functions </li></ul>You.learn() Jupiter IT
    • 2. Why? <ul><li>Functions are first class </li></ul><ul><li>Closures are powerful </li></ul><ul><li>Building block of JS knowledge </li></ul>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 <ul><li>Argument </li></ul><ul><li>Variable </li></ul><ul><li>Return </li></ul>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 <ul><li>Object attribute </li></ul><ul><li>Array element </li></ul>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 <ul><li>Pass by value </li></ul><ul><li>Pass by reference </li></ul>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 <ul><li>this keyword </li></ul>function f (){ this . barkCount ++; } f(); var dog = { barkCount : 0 , bark : function (){ this . barkCount ++; } } dog . bark (); Jupiter IT
    • 10. Context <ul><li>Apply & Call </li></ul><ul><ul><li>Invoke as if function is a method of any object </li></ul></ul><ul><ul><li>Pass in an array of arguments </li></ul></ul>doYourBusiness . call ( dog , 1 , 2 ); doYourBusiness . apply ( dog , [ 1 , 2 ]); dog . doYourBusiness ( 1 , 2 ); Jupiter IT
    • 11. Arguments <ul><li>Overloading functions </li></ul>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 <ul><li>Argument length </li></ul>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 <ul><li>Functions can access the variables and functions declared in its scope </li></ul>var a = 1 ; function f ( arg ){ alert ( a ); var b = 1 ; function g (){ alert ( a + b ); } g(); } Jupiter IT
    • 14. Closures <ul><li>Private variables </li></ul>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 <ul><li>Callbacks </li></ul>Todo = { markAsCompleted : function ( task_name ){ MVC . Ajax ( '/complete/' + task_name , { onSuccess : function ( transport ){ alert ( task_name ); } }) } } Jupiter IT
    • 16. Closures <ul><li>(function(){…})() </li></ul><ul><ul><li>Don’t pollute global namespace </li></ul></ul>( function (){ var count = 0 ; $ ( 'some_div' )[ 0 ]. click ( function (){ count = count + 1 ; alert ( count ); }) })(); Jupiter IT
    • 17. Closures <ul><li>Most Common Misunderstanding </li></ul><ul><ul><li>Closures store reference to variable, not a copy </li></ul></ul>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 <ul><li>Most Common Misunderstanding </li></ul><ul><ul><li>Solution is another closure that “captures” state </li></ul></ul>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 <ul><li>You can treat a function like any other object </li></ul><ul><li>Closures are a way to use outside variables inside a function </li></ul>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

    ×