What I do www.madpilot.com.au www.88miles.net
JavaScript: A brief history
<ul><li>Developed by Brendan Eich </li></ul>Mocha: A brief history
<ul><li>Developed by Brendan Eich </li></ul><ul><li>At Netscape </li></ul>LiveScript: A brief history
<ul><li>Developed by Brendan Eich </li></ul><ul><li>At Netscape </li></ul><ul><li>Around the time Java was added  </li></u...
<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>Developed by Brendan Eich </li></ul><ul><li>At Netscape </li></ul><ul><li>Around the time Java was added </li></ul...
<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><li>Microsoft invents  </li></ul><ul><li>XMLRequest </li></ul><ul><li>Make server requests </li></ul><ul><li>without r...
<ul><li>Move stuff around </li></ul><ul><li>Dynamic Menus </li></ul><ul><li>Show/hide elements </li></ul>DHTML and the DOM...
<ul><li>Three browsers – three technologies </li></ul><ul><li>Create vector graphics </li></ul><ul><li>Think outside the b...
<ul><li>Separate JS from the HTML </li></ul><ul><li>Creates Business Logic layer </li></ul>Unobstrusive JavaScript 90’s 20...
<ul><li>User interface widgets </li></ul><ul><li>Frameworks a go-go </li></ul><ul><li>Closer to desktop apps </li></ul><ul...
<ul><li>How far can HTML CSS and JavaScript be pushed? </li></ul><ul><li>Pretty far actually… </li></ul>We are losing inte...
<ul><li>Make it think it is an  </li></ul><ul><li>8-bit video console </li></ul>Fool your browser
<ul><li>Prototype JavaScript  Library </li></ul><ul><li>XHTML + CSS + Unobtrusive JS </li></ul><ul><li>DOM manipulation </...
<ul><li>JavaScript supports  </li></ul><ul><li>classes </li></ul><ul><li>Almost supports  </li></ul><ul><li>inheritance </...
<ul><li>Need to create animation loop </li></ul><ul><li>setInterval ( interval ,  function ); </li></ul><ul><li>Check coll...
<ul><li>Pointless without User Input </li></ul><ul><li>Event .observe ( element ,  event ,  handler ); </li></ul><ul><li>L...
<ul><li>An old game technique </li></ul><ul><li>Move background image </li></ul><ul><li>… then mask </li></ul><ul><li>el.s...
<ul><li>Basic square </li></ul><ul><li>Uses vectors </li></ul><ul><li>Check distance </li></ul><ul><li>And direction </li>...
<ul><li>Fixed view point </li></ul><ul><li>Move the background </li></ul><ul><li>Capture arrow events (ignore) </li></ul><...
Wrap it all together
ENDE.
Upcoming SlideShare
Loading in...5
×

Abusing JavaScript for fun and profit

1,422

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,422
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×