Introduction to 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 [email protected] • Chat with me after the talk