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.

Abusing JavaScript for fun and profit

1,944 views

Published on

In this talk I outline some of the cool things you can do with JavaScript - including writing a old skool 2d side scrolling platformer!

Published in: Economy & Finance, Technology
  • Be the first to comment

  • Be the first to like this

Abusing JavaScript for fun and profit

  1. 2. What I do www.madpilot.com.au www.88miles.net
  2. 3. JavaScript: A brief history
  3. 4. <ul><li>Developed by Brendan Eich </li></ul>Mocha: A brief history
  4. 5. <ul><li>Developed by Brendan Eich </li></ul><ul><li>At Netscape </li></ul>LiveScript: A brief history
  5. 6. <ul><li>Developed by Brendan Eich </li></ul><ul><li>At Netscape </li></ul><ul><li>Around the time Java was added </li></ul>JavaScript: A brief history
  6. 7. <ul><li>Developed by Brendan Eich </li></ul><ul><li>At Netscape </li></ul><ul><li>Around the time Java was added </li></ul><ul><li>Was implented in IE 3.0 </li></ul>JScript: A brief history
  7. 8. <ul><li>Developed by Brendan Eich </li></ul><ul><li>At Netscape </li></ul><ul><li>Around the time Java was added </li></ul><ul><li>Was implented in IE 3.0 </li></ul><ul><li>Became an official ECMA standard </li></ul>ECMAScript: A brief history
  8. 9. <ul><li>Mouseovers </li></ul><ul><li>Status bars </li></ul><ul><li>Annoying Popups </li></ul><ul><li>Get’s a bad name </li></ul>JavaScript in the 90s 90’s 2000 2002 2004 2006 Today
  9. 10. <ul><li>Microsoft invents </li></ul><ul><li>XMLRequest </li></ul><ul><li>Make server requests </li></ul><ul><li>without refreshing </li></ul>AJAX 90’s 2000 2002 2004 2006 Today
  10. 11. <ul><li>Move stuff around </li></ul><ul><li>Dynamic Menus </li></ul><ul><li>Show/hide elements </li></ul>DHTML and the DOM 90’s 2000 2002 2004 2006 Today
  11. 12. <ul><li>Three browsers – three technologies </li></ul><ul><li>Create vector graphics </li></ul><ul><li>Think outside the box </li></ul>Canvas/SVG/VML 90’s 2000 2002 2004 2006 Today
  12. 13. <ul><li>Separate JS from the HTML </li></ul><ul><li>Creates Business Logic layer </li></ul>Unobstrusive JavaScript 90’s 2000 2002 2004 2006 Today
  13. 14. <ul><li>User interface widgets </li></ul><ul><li>Frameworks a go-go </li></ul><ul><li>Closer to desktop apps </li></ul><ul><li>Cool Experiments </li></ul>We ♥ JavaScript 90’s 2000 2002 2004 2006 Today
  14. 15. <ul><li>How far can HTML CSS and JavaScript be pushed? </li></ul><ul><li>Pretty far actually… </li></ul>We are losing interest…
  15. 16. <ul><li>Make it think it is an </li></ul><ul><li>8-bit video console </li></ul>Fool your browser
  16. 17. <ul><li>Prototype JavaScript Library </li></ul><ul><li>XHTML + CSS + Unobtrusive JS </li></ul><ul><li>DOM manipulation </li></ul><ul><li>JS Events </li></ul>Our tools
  17. 18. <ul><li>JavaScript supports </li></ul><ul><li>classes </li></ul><ul><li>Almost supports </li></ul><ul><li>inheritance </li></ul><ul><li>Create sprite classes </li></ul>Oh, so classy
  18. 19. <ul><li>Need to create animation loop </li></ul><ul><li>setInterval ( interval , function ); </li></ul><ul><li>Check collisions </li></ul><ul><li>Render animations </li></ul><ul><li>JS isn’t threaded! </li></ul>Using timers
  19. 20. <ul><li>Pointless without User Input </li></ul><ul><li>Event .observe ( element , event , handler ); </li></ul><ul><li>Listen to keypress, window load </li></ul><ul><li>Create some pseudo events </li></ul>Input Events
  20. 21. <ul><li>An old game technique </li></ul><ul><li>Move background image </li></ul><ul><li>… then mask </li></ul><ul><li>el.style.backgroundPosition = '0px 0px'; </li></ul>Animation strips
  21. 22. <ul><li>Basic square </li></ul><ul><li>Uses vectors </li></ul><ul><li>Check distance </li></ul><ul><li>And direction </li></ul>Collision Detection
  22. 23. <ul><li>Fixed view point </li></ul><ul><li>Move the background </li></ul><ul><li>Capture arrow events (ignore) </li></ul><ul><li>Move character – background scrolls </li></ul>Sideways scrolling
  23. 24. Wrap it all together
  24. 25. ENDE.

×