Introduction to JavaScript and JQuery

A quick, 30 minute crash course exploring JavaScript and JQuery

Transcript

1. Intro to JavaScript and JQuery
2. Hi! dpickett on Twitter LaunchWare.com on the InterTubes
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); } var myMessage = “Hello BarCamp!”; sayHello(myMessage); variable assignment
19. Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello BarCamp!”; sayHello(myMessage); function invocation
20. Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello BarCamp!”; sayHello(myMessage); function declaration
21. Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello BarCamp!”; sayHello(myMessage); argument
22. Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello BarCamp!”; sayHello(myMessage); function body
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"); $("a").offset().top; $("a").hide(); $("a").remove(); $("a").addClass("context"); $("a").insertAfter($("<p>Hello</p>")); DOM Manipulation
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