Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to JavaScript and JQuery

Introduction to JavaScript and JQuery

A quick, 30 minute crash course exploring JavaScript and JQuery

Dan Pickett

April 07, 2012
Tweet

More Decks by Dan Pickett

Other Decks in Programming

Transcript

  1. Our Chat Today • Where is JavaScript? • Great uses

    of JavaScript • The Basics of JavaScript • An Intro to JQuery
  2. 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
  3. 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)
  4. Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello

    BarCamp!”; sayHello(myMessage); variable assignment
  5. Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello

    BarCamp!”; sayHello(myMessage); function invocation
  6. Let’s Refactor... function sayHello(msg){ alert(msg); } var myMessage = “Hello

    BarCamp!”; sayHello(myMessage); function declaration
  7. 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
  8. 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>
  9. 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
  10. 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
  11. 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); }); });
  12. 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>
  13. Thanks! • Follow me on twitter @dpickett and give me

    a shout! • Email me at [email protected] • Chat with me after the talk