Intro to jquery
•
0 likes•369 views
This document provides an introduction to JavaScript and jQuery. It discusses where JavaScript is used, some popular uses of JavaScript like Google Maps and Twitter, and the basics of JavaScript including variables, functions, and control logic. It also introduces jQuery, describing what it is and how it can be used to select elements, handle events, and manipulate the DOM. The document recommends putting scripts at the end of the page body for optimal performance and emphasizes progressive enhancement.
Report
Share
Intro to jquery
- 1. Intro to JavaScript and JQuery
- 2. Hi! LaunchWare.com on 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 Program alert(“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 assignment var 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 declaration function sayHello(msg){ alert(msg); } var myMessage = “Hello BarCamp!”; sayHello(myMessage);
- 21. Let’s Refactor... argument function 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 Performance Put your scripts at the end of your body
- 24. Control Logic if(message === 'Hello'){ alert(msg); } else { alert("Something else was set"); }
- 25. Control Logic if(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 JS Free, 4 hour session coming 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