JavaScript: Creative Coding for Browsers

594 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
594
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript: Creative Coding for Browsers

  1. 1. Introducing JavaScript Creative Coding For Browsers
  2. 2. Why focus on the browser? • It is easily accessible, and very powerful.
  3. 3. Creative Examples • http://workshop.chromeexperiments.com/ma chines/# • http://weavesilk.com/ • http://www.soulwire.co.uk/experiments
  4. 4. Origins & Future • Appeared in 1995 – 18 years ago • JavaScript !== Java • ~2005 Ajax • HTML5 APIs (Application Programming Intervace)s • ECMAScript
  5. 5. Features & Syntax • Client Side Scripting Language • Types • C-like • Operators • Loops • Constructors/Classes
  6. 6. Types • Boolean true, false • Interger 1, 2, 4, 5 … • Strings “Hello World” • Arrays [1, “Apple”, obj] • Functions function (arg) {return arg*2; } • Objects {member: “value”} • Variables var date = new Date(), place = “2 Daly Ave”
  7. 7. Objects • Everything is an object • Objects have constructors • Constructors are invoked by “new”, Type and, () • For example: new Date() • Closures
  8. 8. Operators • + - • Assignment = • <, > • Equals (almost) == • Equals === • not ! • AND && • OR || • Typeof
  9. 9. loops • for (var x = 0; x < y.length; x += 1 ) { // do stuff } • while(arr.length) { arr.shift() // do stuff }
  10. 10. Constructors/Classes • looks like a function • “new” • “this” inside the class refers to itself
  11. 11. Tools • JSLint • Browser console – Figuring out syntax – Exploring objects – Debugging (console.log(), console.trace(), debugger)
  12. 12. Tools • Developer Toolbar Tabs – DOM inspector – Network Tab – Sources – Breakpoints • Text Editors (NotePad ++, SublimeText2, TextWrangler)
  13. 13. HTML5 • Moving away from Flash • Audio, Video, Canvas, SVG, LocalStorage, CSS3 • http://caniuse.com
  14. 14. HTML5 • Audio/Video – Different encodings for each browser – Default controls – Pause, Play, Stop all through JS • Canvas – Pixels • SVG – Vector – XML
  15. 15. HTML5 • CSS3 – Animations using GPU – Gradients – Has JavaScript hooks • LocalStorage (unlike cookies) – is an object – persists over sessions – SessionStorage
  16. 16. Libraries/APIs • jQuery – don’t reinvent the wheel – great for Ajax – DOM manipulation
  17. 17. Libraries/APIs • Three.js • Raphaeljs • A library for almost anything
  18. 18. Server Side • Node (JavaScript) • Other Scripting Languages – quick scripts • listing files in directory • database – PHP (Codeigniter) – Python (Flask)
  19. 19. Misc. • Bookmarklets • CoffeeScript • TypeScript, Dart
  20. 20. Resources • MDN (Mozilla Developer Network) • MSDN, Webkit.org • W3Schools • JavaScript the Good Parts by Douglas Crockford • GitHub (version control, libraries, documentation) • Google/StackOverflow

×