Your SlideShare is downloading. ×
0
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
Intro to jquery
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

Intro to jquery

115

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
115
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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

Transcript

  • 1. Intro to JavaScriptand JQuery
  • 2. Hi!LaunchWare.comon the InterTubes dpickett on Twitter
  • 3. Enough about me... to learn JavaScript!
  • 4. Our Chat Today• Where is JavaScript?• Great uses of JavaScript• The Basics of JavaScript• An Intro to JQuery
  • 5. Where’s JavaScript?• Most popularly used for client side behaviors on web pages• Made popular on the server side with NodeJS• Start with the client side
  • 6. A Note on Accessibility• Great web developers develop with accessibility in mind• Make your web pages work great without JavaScript using progressive enhancement (more on this later)
  • 7. Google Maps
  • 8. Twitter
  • 9. Your First Programalert(“hello BarCamp”);
  • 10. alert(“hello BarCamp”);function string
  • 11. Putting JS on your webpage<script type="text/javascript"> //your code here /* a multiline comment */</script>
  • 12. Putting JS on your webpage<script type="text/javascript"src="your_filename.js"></script>
  • 13. Firebug
  • 14. Chrome Inspector
  • 15. Node REPL
  • 16. How to Install NodeJS
  • 17. Let’s Refactor...function sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  • 18. Let’s Refactor...function sayHello(msg){ alert(msg);} variable assignmentvar myMessage = “Hello BarCamp!”;sayHello(myMessage);
  • 19. Let’s Refactor...function sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);function invocation
  • 20. Let’s Refactor...function declarationfunction sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  • 21. Let’s Refactor... argumentfunction sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  • 22. Let’s Refactor...function sayHello(msg){ function body alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  • 23. For Optimal Page PerformancePut your scripts at the end of your body
  • 24. Control Logicif(message === Hello){ alert(msg);}else { alert("Something else was set");}
  • 25. Control Logicif(typeof window != ‘undefined’){ alert(msg);}else { console.log(msg);}
  • 26. So Much More...• Regular Expressions• Loops and Iteration• Arrays• Objects
  • 27. JQuery• A JavaScript Framework with roots in Boston (John Resig)• Removes the friction of cross-browser behaviors for animation, event handling, AJAX, and DOM manipulation
  • 28. The JQuery Function$(<selector>);$(function(){}); // alias for $(document).ready$(<html markup>);
  • 29. Selectors<a href="hello.html" class="greeting" style="color: blue;" id="greeter">Say Hello</a><script type="text/javascript"> $("a"); $("a:first"); $("a.greeting"); $("#greeter"); //most efficient selector</script>
  • 30. What Can I Do With a Selector?$("a").css("color"); //the color of a: blue$("a").offset().top; //position of the element$("a").hide(); //hide the element$("a").remove(); //remove the element$("a").addClass("context"); //add a class$("a").after("<p>Hello</p>")); //append
  • 31. What Can I Do With a Selector?$("a").css("color"); DOM$("a").offset().top;$("a").hide(); Manipulation$("a").remove();$("a").addClass("context");$("a").insertAfter($("<p>Hello</p>"));
  • 32. Events<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document).ready(function(){ $("#greeter").click(function(event){ event.preventDefault(); alert("Hello BarCamp!"); });
  • 33. Events<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document).ready(function(){ console.log(The Page Has Completely Loaded); });</script>
  • 34. DOM Ready Shortcut<script type=”text/javascript"> $(function(){ console.log(The Page Has Completely Loaded); });</script>
  • 35. Events<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document).ready(function(){ $("#greeter").click(function(event){ event.preventDefault(); alert("Hello BarCamp!"); });
  • 36. Event Driven DOM Manipulation<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document).ready(function(){ $("#greeter").click(function(event){ event.preventDefault(); var paragraph = $("<p>").html("Hello Barcamp!"); $(this).after(paragraph); }); });
  • 37. Reacting to Input<form> <input id="name" name="name" type="text"></form><script type="text/javascript"> $("#name").change(function(event){ console.log("Hello " + $("#name").val() + "!"); });</script>
  • 38. Progressive Enhancement<a href="hello.html" id="say-hello">Say Hello</a>$(function(){ $("#say-hello").click(function(e){ e.preventDefault(); //enhance the experience });});
  • 39. Progressive Enhancement<a href="hello.html" id="say-hello">Say Hello</a>$(function(){ $("#say-hello").click(function(e){ e.preventDefault(); //enhance the experience });});
  • 40. So Much More..• AJAX• JQuery UI• Testing• BackboneJS
  • 41. More Lengthy Intro to JSFree, 4 hour sessioncoming this summer!
  • 42. Thanks!• Follow me on twitter @dpickett and give me a shout!• Email me at dan.pickett@launchware.com• Chat with me after the talk

×