1 / 19

JavaScript Functions

JavaScript Functions. We’ll Cover syntax arguments context closures Goal : you <3 JavaScript Functions. You.learn(). Jupiter IT. Why?. Functions are first class Closures are powerful Building block of JS knowledge. Jupiter IT. The Basics. Function keyword. Arguments.

Download Presentation

JavaScript Functions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation 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 Function keyword Arguments Function reference varsquare=function(x){ returnx*x; } square(5) Code body Return value Jupiter IT

  4. 3 Ways to Declare a Function varf=function(){alert('hi')} functionf(){alert('hi')} window.f=function(){alert('hi')} Jupiter IT

  5. Everything is an Object varf=function(a,b){returna-b}; varg= “hi”; varh= 1; I ask "girl can I have closures, canvas, advanced features for my project?"You say "sure, but keep it simple, everything is an object"I say "JavaScript you've come a long way from copy-paste hacks"You blush "I know, but please, call me AJAX" -- Digital Crush Jupiter IT

  6. Functions are First Class • Argument • Variable • Return varf=function(a,b){returna-b}; [1,2,3,4].sort(f); varg=function(){returntrue;} functionbark(){ returnfunction(){ alert('bark'); } } Jupiter IT

  7. Functions are First Class • Object attribute • Array element varobj={ func:function(){ alert('i am a function'); } } obj.func(); vara=[]; a[0]=function(){returntrue;} a[0](); Jupiter IT

  8. Passing Arguments • Pass by value • Pass by reference functionchange(x){ x=x+1; } vara=1; change(a); alert(a); // alerts 1 functionchange(obj){ obj.a=obj.val+1; } varobj={ a:1 }; change(obj); alert(obj.a); // alerts 2 Jupiter IT

  9. Context • this keyword functionf(){ this.barkCount++; } f(); vardog={ 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 functionsum(){ vars=0; for(vari=0;i<arguments.length;i++){ s+=arguments[i]; } returns; } alert(sum(1,2,3)); // alerts 6 Jupiter IT

  12. Arguments • Argument length functionf(a,b){ if(arguments.length!=f.length) alert('wrong nbr of args'); else alert(‘right nbr of args’); } f(1); f(1,2); // alerts “wrong nbr of args” // alerts “right nbr of args” Jupiter IT

  13. Closures • Functions can access the variables and functions declared in its scope vara=1; functionf(arg){ alert(a); varb=1; functiong(){ alert(a+b); } g(); } Jupiter IT

  14. Closures • Private variables varDog=function(){ varbreed; this.getBreed=function(){ returnbreed; } this.setBreed=function(newBreed){ breed=newBreed; } } vardog=newDog(); 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(){ varcount=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 vara={}; for(vari=0;i<3;i++){ a[i]=function(){alert(i)}; } a[0](); a[1](); a[2](); // alerts 2 // alerts 2 // alerts 2 Jupiter IT

  18. Closures • Most Common Misunderstanding • Solution is another closure that “captures” state vara={}; for(vari=0;i<3;i++){ (function(j){ a[j]=function(){alert(j)}; })(i) } a[0](); a[1](); a[2](); // alerts 0 // alerts 1 // alerts 2 Jupiter IT

  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 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 Jupiter IT

More Related