We’ve all used JavaScript. At least, we’ve all used jQuery to manipulate some part of the DOM. Maybe we think we understand the syntax enough, so we ‘improvise’ when we’re forced to write some. Maybe we’ve tried it a few years ago and ran screaming from this seemingly broken language. In 2011, JavaScript has a lot to offer once you get past its ‘java-ish’ syntax. The ‘little language that could’ has a rapidly growing, vibrant online community and opens the door to a diverse world of MVC browser based apps, high-speed 2D and 3D graphics and real-time server development. Spending a little time to learn JavaScript will allow you to easily increase the capabilities of your applications in a safe, error free and most of all fun way. At this workshop, I re-introduced JavaScript and then moved on to building a real-time geospatial app with some interesting libraries; Backbone.js and Node.js. The code for this tutorial is available here: https://github.com/tokumine/conferenciarails-js-workshop along with a handout to go with the slides here: https://docs.google.com/document/pub?id=16GAjYlGOhyD-mwtIZSRb75WywwUUCWyCxzBb_QLjsg4 JavaScript is a Lisp at heart. You may be surprised to find parts of Ruby that you love have been hiding out in JavaScript all along, waiting for you to find them.

1. JavaScript
for Rubyists

2. jQuery
but I already do JS?

3. “JavaScript is the only language that people
think they can program without actually
learning it.” - D.Crockford

4. refresher
backbone and node need it

5. basic grammar

6. familiar object model
Ruby JS
object object

7. familiar object model
Ruby
JS
object object
JS
primitive

8. JS datatypes
primitives objects
• Boolean • Object
• Number (fp) • Array (object)
• String (16-bit)
• nil/undefined/NaN

9. Core syntax
Ruby JavaScript
• no semicolons • optional semicolons*
• # + =begin/=end • // + /* */
• implicit return • return required
• do/end or {} • {}

10. the bad stuff
hey! It was made in 10 days

11. beware!
• Global variables •+
• Scope • NaN
• Semicolon insertion • Phony arrays
• Reserved words • Falsy values
• typeof • ==
• parseInt • eval

12. the good stuff
it’s actually very lispy

13. functions are objects
Ruby JavaScript
1 def my_function arg1 1 function myFunction(arg1){
2 something arg1 2 something(arg1);
3 end 3 }
4 4
5 var myFunction = function(arg1){
6 something(arg1);
7 }
8

14. functions are objects
Ruby JavaScript
1 def my_function arg1 1 function myFunction(arg1){
2 something arg1 2 something(arg1);
3 end 3 }
4 4
5 my_function = lambda do |arg1| 5 var myFunction = function(arg1){
6 something arg1 6 something(arg1);
7 end 7 }
8 8

15. object literals
Ruby JavaScript
1 # hashie gem + objects 1 // new object with var
2 require (‘hashie’) 2 var obj = {name: ‘simon’};
3
4 a = {:name => ‘simon’}
5 obj = Hashie::Mash.new a
6 obj.name #=> simon

16. dynamic objects
Ruby JavaScript
1 # hashie gem + objects 1 // new object with var
2 require (‘hashie’) 2 var obj = {name: ‘simon’};
3 3
4 a = {:name => ‘simon’} 4 // new object with function
5 obj = Hashie::Mash.new a 5 obj.hello_world = function(){
6 obj.name #=> simon 6 return “Hola Mundo”;
7 7 }
8 def obj.hello_world
9 puts "Hola Mundo"
10 end

17. want to try?
http://jsconsole.com

18. resources
• http://www.youtube.com/watch?v=hQVTIJBZook
• http://oreilly.com/catalog/9780596517748
• http://javascript.crockford.com/survey.html

19. thanks!
@tokumin