Railsbridge javascript

Railsbridge javascript

• 1.
  JavaScript
• 2.
  What can Iuse 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.
  Basic Concept - Comments //this line doesn't do anything! /* These series of lines is a bit longer but it also doesn't do anything! */ $('a').hide(); // hide 'a' $('a').hide(); // hide all links $('a').hide(); // hide links while we validate them
• 4.
  Basic Concept - Variables varclasses = 'products rocks monkeys'; var num = 2; classes = classes + ' another'; // now: products rocks monkeys another num = num * 2; // now: 4
• 5.
  Basic Concept - Functions //assigning a function to a variable // so we can call it several times var 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.
  Basic Concept -Scope var test = function(message, count) { poorForm = 'probably a mistake'; var test = 1; console.log(message, count, test, poorForm); }; test('hello!', 1);
• 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.
  Getting setup torun 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.
  Getting setup torun JS • Add a script block to your page <script type="text/javascript"> $(document).ready(function() { /* my fancy JS code goes here! */ }); </script>
• 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.
  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.
  Do I needto use jQuery? • No! But a JavaScript framework sure helps. • Cross-Browser Issues • More compact code
• 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.
  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.
  Further Reading & Plugins •AJAX/JSON • WebRTC • Offline Storage • Phonegap • http://www.unheap.com/ • http://jqueryui.com/