Intro to JavaScriptand JQuery
Hi!LaunchWare.comon the InterTubes          dpickett          on Twitter
Enough about me...    to learn JavaScript!
Our Chat Today• Where is JavaScript?• Great uses of JavaScript• The Basics of JavaScript• An Intro to JQuery
Where’s JavaScript?• Most popularly used for client side  behaviors on web pages• Made popular on the server side with  No...
A Note on Accessibility• Great web developers develop with  accessibility in mind• Make your web pages work great without ...
Google Maps
Twitter
Your First Programalert(“hello BarCamp”);
alert(“hello BarCamp”);function        string
Putting JS on your        webpage<script type="text/javascript">  //your code here  /*       a multiline comment  */</scri...
Putting JS on your         webpage<script type="text/javascript"src="your_filename.js"></script>
Firebug
Chrome Inspector
Node REPL
How to Install NodeJS
Let’s Refactor...function sayHello(msg){    alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
Let’s Refactor...function sayHello(msg){    alert(msg);}        variable assignmentvar myMessage = “Hello BarCamp!”;sayHel...
Let’s Refactor...function sayHello(msg){    alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);function invo...
Let’s Refactor...function declarationfunction sayHello(msg){    alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMe...
Let’s Refactor...                  argumentfunction sayHello(msg){    alert(msg);}var myMessage = “Hello BarCamp!”;sayHell...
Let’s Refactor...function sayHello(msg){  function body  alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
For Optimal Page  PerformancePut your scripts at the  end of your body
Control Logicif(message === Hello){    alert(msg);}else {    alert("Something else was set");}
Control Logicif(typeof window != ‘undefined’){    alert(msg);}else {    console.log(msg);}
So Much More...• Regular Expressions• Loops and Iteration• Arrays• Objects
JQuery• A JavaScript Framework with roots in  Boston (John Resig)• Removes the friction of cross-browser  behaviors for an...
The JQuery Function$(<selector>);$(function(){}); // alias for $(document).ready$(<html markup>);
Selectors<a href="hello.html" class="greeting" style="color: blue;" id="greeter">Say Hello</a><script type="text/javascrip...
What Can I Do With a     Selector?$("a").css("color"); //the color of a: blue$("a").offset().top; //position of the elemen...
What Can I Do With a     Selector?$("a").css("color");               DOM$("a").offset().top;$("a").hide();       Manipulat...
Events<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document).ready(function(){  $("#gr...
Events<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document).ready(function(){  consol...
DOM Ready Shortcut<script type=”text/javascript"> $(function(){  console.log(The Page Has Completely Loaded); });</script>
Events<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document).ready(function(){  $("#gr...
Event Driven DOM     Manipulation<a href=‘hello.html’ id="greeter">Say Hello</a><script type=”text/javascript"> $(document...
Reacting to Input<form> <input id="name" name="name" type="text"></form><script type="text/javascript"> $("#name").change(...
Progressive            Enhancement<a href="hello.html" id="say-hello">Say Hello</a>$(function(){ $("#say-hello").click(fun...
Progressive            Enhancement<a href="hello.html" id="say-hello">Say Hello</a>$(function(){ $("#say-hello").click(fun...
So Much More..• AJAX• JQuery UI• Testing• BackboneJS
More Lengthy     Intro to JSFree, 4 hour sessioncoming this summer!
Thanks!• Follow me on twitter @dpickett and give  me a shout!• Email me at dan.pickett@launchware.com• Chat with me after ...
Upcoming SlideShare
Loading in …5
×

Intro to jquery

286 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
286
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to jquery

  1. 1. Intro to JavaScriptand JQuery
  2. 2. Hi!LaunchWare.comon the InterTubes dpickett on Twitter
  3. 3. Enough about me... to learn JavaScript!
  4. 4. Our Chat Today• Where is JavaScript?• Great uses of JavaScript• The Basics of JavaScript• An Intro to JQuery
  5. 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. 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. 7. Google Maps
  8. 8. Twitter
  9. 9. Your First Programalert(“hello BarCamp”);
  10. 10. alert(“hello BarCamp”);function string
  11. 11. Putting JS on your webpage<script type="text/javascript"> //your code here /* a multiline comment */</script>
  12. 12. Putting JS on your webpage<script type="text/javascript"src="your_filename.js"></script>
  13. 13. Firebug
  14. 14. Chrome Inspector
  15. 15. Node REPL
  16. 16. How to Install NodeJS
  17. 17. Let’s Refactor...function sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  18. 18. Let’s Refactor...function sayHello(msg){ alert(msg);} variable assignmentvar myMessage = “Hello BarCamp!”;sayHello(myMessage);
  19. 19. Let’s Refactor...function sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);function invocation
  20. 20. Let’s Refactor...function declarationfunction sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  21. 21. Let’s Refactor... argumentfunction sayHello(msg){ alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  22. 22. Let’s Refactor...function sayHello(msg){ function body alert(msg);}var myMessage = “Hello BarCamp!”;sayHello(myMessage);
  23. 23. For Optimal Page PerformancePut your scripts at the end of your body
  24. 24. Control Logicif(message === Hello){ alert(msg);}else { alert("Something else was set");}
  25. 25. Control Logicif(typeof window != ‘undefined’){ alert(msg);}else { console.log(msg);}
  26. 26. So Much More...• Regular Expressions• Loops and Iteration• Arrays• Objects
  27. 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. 28. The JQuery Function$(<selector>);$(function(){}); // alias for $(document).ready$(<html markup>);
  29. 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. 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. 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. 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. 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. 34. DOM Ready Shortcut<script type=”text/javascript"> $(function(){ console.log(The Page Has Completely Loaded); });</script>
  35. 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. 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. 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. 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. 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. 40. So Much More..• AJAX• JQuery UI• Testing• BackboneJS
  41. 41. More Lengthy Intro to JSFree, 4 hour sessioncoming this summer!
  42. 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

×