Your SlideShare is downloading. ×
0
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
JavaScript: Creative Coding for Browsers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript: Creative Coding for Browsers

208

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
208
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×