Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript
What can I use it for?• Add/remove/modify content• Set CSS styles, add/remove classes• Show/hide/animate parts of the page...
Basic Concept -Comments// this line doesnt do anything!/* These series of linesis a bit longer but italso doesnt do anythi...
Basic Concept -Variablesvar classes = products rocks monkeys;var num = 2;classes = classes +  another;// now: products roc...
Basic Concept -Functions// assigning a function to a variable// so we can call it several timesvar test = function(message...
Basic Concept - Scopevar test = function(message, count) {poorForm = probably a mistake;var test = 1;console.log(message, ...
Basic Concept - jQuery// locate zero or more things on the page:$(css selector);// do something with them$(css selector).m...
Getting setup to run JS• Include jQuery on the page<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.m...
Getting setup to run JS• Add a script block to your page<script type="text/javascript">$(document).ready(function() {/* my...
Simple JS Example• Lets turn all links on the page green<script type="text/javascript">$(document).ready(function() {$(a)....
Interactive JS Example• Lets hide links when they are clicked<script type="text/javascript">$(document).ready(function() {...
Do I need to usejQuery?• No! But a JavaScript framework sure helps.• Cross-Browser Issues• More compact code
Example Fade Out• Plain JS<script type="text/javascript">document.addEventListener(DOMContentLoaded,function(){var s = doc...
Example Fade Out• jQuery<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascrip...
Further Reading &Plugins• AJAX/JSON• WebRTC• Offline Storage• Phonegap• http://www.unheap.com/• http://jqueryui.com/
Upcoming SlideShare
Loading in …5
×

Railsbridge javascript

150 views

Published on

  • Be the first to comment

  • Be the first to like this

Railsbridge javascript

  1. 1. JavaScript
  2. 2. What can I use it for?• Add/remove/modify content• Set CSS styles, add/remove classes• Show/hide/animate parts of the page• React to events (clicks, typing, etc.)• And much, much more!
  3. 3. Basic Concept -Comments// this line doesnt do anything!/* These series of linesis a bit longer but italso doesnt do anything! */$(a).hide(); // hide a$(a).hide(); // hide all links$(a).hide(); // hide links while we validate them
  4. 4. Basic Concept -Variablesvar classes = products rocks monkeys;var num = 2;classes = classes + another;// now: products rocks monkeys anothernum = num * 2;// now: 4
  5. 5. Basic Concept -Functions// assigning a function to a variable// so we can call it several timesvar test = function(message, count) {count = count * 2;console.log(message, count);};test(hello!, 1);test(hello again!, 2);// using a function to delay work$(document).ready(function() {alert(document is ready!);});
  6. 6. Basic Concept - Scopevar test = function(message, count) {poorForm = probably a mistake;var test = 1;console.log(message, count, test, poorForm);};test(hello!, 1);
  7. 7. Basic Concept - jQuery// locate zero or more things on the page:$(css selector);// do something with them$(css selector).method();e.g.$(a) // gets all links$(a.prods) // gets all links with prods class$(a).hide(); // hide all links$(a.prods).hide(); // hide links with prods class$(a.misses).hide(); // no matches? no worries!
  8. 8. Getting setup to run JS• Include jQuery on the page<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
  9. 9. Getting setup to run JS• Add a script block to your page<script type="text/javascript">$(document).ready(function() {/* my fancy JS code goes here! */});</script>
  10. 10. Simple JS Example• Lets turn all links on the page green<script type="text/javascript">$(document).ready(function() {$(a).css(color, green);});</script>
  11. 11. Interactive JS Example• Lets hide links when they are clicked<script type="text/javascript">$(document).ready(function() {$(a).css(color, green);$(a).click(function() {$(this).fadeOut();return false;});});</script>
  12. 12. Do I need to usejQuery?• No! But a JavaScript framework sure helps.• Cross-Browser Issues• More compact code
  13. 13. Example Fade Out• Plain JS<script type="text/javascript">document.addEventListener(DOMContentLoaded,function(){var s = document.getElementById(thing).style;s.opacity = 1;var fade = function(){s.opacity = s.opacity - 0.1;if (s.opacity < 0) {s.display = "none";} else {setTimeout(fade, 40);}};fade();});</script>
  14. 14. Example Fade Out• jQuery<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$(#thing).fadeOut();});</script>
  15. 15. Further Reading &Plugins• AJAX/JSON• WebRTC• Offline Storage• Phonegap• http://www.unheap.com/• http://jqueryui.com/

×