Your SlideShare is downloading. ×

Intro to jquery

109

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
109
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

×