Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

You Can't Fear JavaScript Anymore

You Can't Fear JavaScript Anymore

Presented at GRDevDay '11.

Daniel Morrison

November 05, 2011
Tweet

More Decks by Daniel Morrison

Other Decks in Programming

Transcript

  1. function  toggleBinder(){    showBinder  =  (showBinder  !=  false  ?  

    false  :  true  );    if(showBinder) {  myBinder.style.display="";} else{myBinder.style.display="none";} }function  toggleSound(){    pSound  =  (pSound  !=  false  ?  false  :   true  ); } Saturday, November 5, 11
  2. Who Should Read This Guide The reader of the Gecko

    DOM Reference is a web developer or savvy web user who knows something about how web pages are constructed. Saturday, November 5, 11
  3. var  crazyTalk  =  function()  {    alert('JavaScript  functions  are  Crazy!');

    } $('a#crazy-­‐talk').on('click',  crazyTalk); Saturday, November 5, 11
  4. var  person  =  {    name:  "Bob",    age:  47,

       children:  ["Alice",  "Ted",  "Carol"] } Saturday, November 5, 11
  5. var  conference  =  {    capacity:  200,    attendees:  [],

       addPerson:  function(person)  {        if  (this.attendees.length  <  this.capacity)  {            this.attendees.push(person);        }    },        announce:  function()  {        alert('Attendee  count  is  '  +  this.attendees.length);    } } conference.addPerson(person); Saturday, November 5, 11
  6. <a  href="/items/5/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/6/delete"  onclick="return  confirm('Are

     you  sure?')">Delete</a> <a  href="/items/7/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/8/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/9/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> <a  href="/items/10/delete"  onclick="return  confirm('Are  you  sure?')">Delete</a> Saturday, November 5, 11
  7. <div  class="delete">    <a  href="/items/5/delete">Delete</a>    <a  href="/items/6/delete">Delete</a>    <a

     href="/items/7/delete">Delete</a>    <a  href="/items/8/delete">Delete</a> </div> //  In  external  file $('.delete  a').on('click',  function()  {    return  confirm('Are  you  sure?'); }); Saturday, November 5, 11
  8. test("a  basic  test  example",  function()  {    ok(  true,  "this

     test  is  fine"  );    var  value  =  "hello";    equal(  value,  "hello",  "We  expect  value  to  be  hello"  ); }); module("Module  A"); test("first  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); test("second  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); module("Module  B"); test("some  other  test",  function()  {    expect(2);    equal(  true,  false,  "failing  test"  );    equal(  true,  true,  "passing  test"  ); }); Saturday, November 5, 11
  9. test("a  basic  test  example",  function()  {    ok(  true,  "this

     test  is  fine"  );    var  value  =  "hello";    equal(  value,  "hello",  "We  expect  value  to  be  hello"  ); }); module("Module  A"); test("first  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); test("second  test  within  module",  function()  {    ok(  true,  "all  pass"  ); }); module("Module  B"); test("some  other  test",  function()  {    expect(2);    equal(  true,  false,  "failing  test"  );    equal(  true,  true,  "passing  test"  ); }); Saturday, November 5, 11
  10. describe("Hello  world",  function()  {    it("says  hello",  function()  {  

         expect(helloWorld()).toEqual("Hello  world!");    }); }); Saturday, November 5, 11
  11. Feature:  Purchasing  a  book    Scenario:  Ordering  a  book  

         When  I  go  to  the  home  page        And  I  follow  "Books"        And  I  follow  "Customize"        And  I  press  "Add  to  Cart"        And  I  select  "Standard  ($7.99)"  from  "Shipping"        And  I  press  "Checkout"        Then  I  should  see  "Order  Confirmation" Saturday, November 5, 11
  12. When  /^(?:|I  )press  "([^"]*)"$/  do  |button|    click_button(button) end Then

     /^(?:|I  )should  see  "([^"]*)"$/  do  |text|    assert  page.has_content?(text) end Saturday, November 5, 11
  13. fill  =  (container,  liquid  =  "coffee")  -­‐>    "Filling  the

     #{container}  with  #{liquid}..." Saturday, November 5, 11
  14. fill  =  (container,  liquid  =  "coffee")  -­‐>    "Filling  the

     #{container}  with  #{liquid}..." var  fill; fill  =  function(container,  liquid)  {    if  (liquid  ==  null)  liquid  =  "coffee";    return  "Filling  the  "  +  container  +  "  with  "  +  liquid  +  "..."; }; Saturday, November 5, 11
  15. class  Animal    constructor:  (@name)  -­‐>    move:  (meters)  -­‐>

           alert  @name  +  "  moved  #{meters}m." class  Snake  extends  Animal    move:  -­‐>        alert  "Slithering..."        super  5 class  Horse  extends  Animal    move:  -­‐>        alert  "Galloping..."        super  45 sam  =  new  Snake  "Sammy  the  Python" tom  =  new  Horse  "Tommy  the  Palomino" sam.move() tom.move() Saturday, November 5, 11
  16. class  Animal    constructor:  (@name)  -­‐>    move:  (meters)  -­‐>

           alert  @name  +  "  moved  #{meters}m." class  Snake  extends  Animal    move:  -­‐>        alert  "Slithering..."        super  5 class  Horse  extends  Animal    move:  -­‐>        alert  "Galloping..."        super  45 sam  =  new  Snake  "Sammy  the  Python" tom  =  new  Horse  "Tommy  the  Palomino" sam.move() tom.move()        return  alert(this.name  +  ("  moved  "  +  meters  +  "m."));    };    return  Animal; })(); Snake  =  (function()  {    __extends(Snake,  Animal);    function  Snake()  {        Snake.__super__.constructor.apply(this,  arguments);    }    Snake.prototype.move  =  function()  {        alert("Slithering...");        return  Snake.__super__.move.call(this,  5);    };    return  Snake; })(); Horse  =  (function()  {    __extends(Horse,  Animal);    function  Horse()  {        Horse.__super__.constructor.apply(this,  arguments);    }    Horse.prototype.move  =  function()  {        alert("Galloping...");        return  Horse.__super__.move.call(this,  45);    };    return  Horse; })(); sam  =  new  Snake("Sammy  the  Python"); tom  =  new  Horse("Tommy  the  Palomino"); sam.move(); tom.move(); Saturday, November 5, 11