JavaScript Intro

1,187 views
1,118 views

Published on

Introduction to JavaScript, an ubiquitous, modern computer language.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,187
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript Intro

  1. 1. JavaScript The Ubiquitous LanguageFriday, June 24, 2011
  2. 2. What Is It? How Can I Use It? JavaScript Why Should I Care? How Does It Work?Friday, June 24, 2011
  3. 3. What Is JavaScript? A quick survey of what it is and isnt.Friday, June 24, 2011
  4. 4. Influences • Invented by Brendan Eich in 1995 • Initially no one took it seriously • Resembles the earlier NewtonScript in many ways • Designed to work well within a constrained environment • "Feels" a little like Python, but different, too • C inspired syntaxFriday, June 24, 2011
  5. 5. Whats In A Name? • Mocha, LiveScript, & EcmaScript YES • JScript & ActiveScript SORT OF • JQuery NOT REALLY • Java NO • The "J" in both AJaX and JSONFriday, June 24, 2011
  6. 6. Present Realities • Not just for browsers. • Its a full-featured, general-purpose language. • Its a modern interpreted language. • Good support for object-oriented paradigms. • Also good support for functional programming. • And even aspect-oriented or genetic programming.Friday, June 24, 2011
  7. 7. Why JavaScript? Why should I learn this thing anyway?Friday, June 24, 2011
  8. 8. Its Ubiquitous • Its rough start kept it from being a target, and it had time to spread everywhere. • Historically it is unmatched. • Its on every mainstream browser. • There are many stand-alone engines. • There are a handful of server-side systems. • Its even embedded in things like PDF and Flash.Friday, June 24, 2011
  9. 9. The Browser Situation • Fighting for the top spot: • Chrome • Safari • Firefox • Also quite good: • Opera • It exists: • Microsoft Internet ExplorerFriday, June 24, 2011
  10. 10. The Open Engine Situation • Also driven by competition. • Three contenders for top spot: • V8 • JavaScriptCore • SpiderMonkey • Other options are available: • Rhino • K7Friday, June 24, 2011
  11. 11. The Server Situation • Less competitive than browsers and engines. • All rely on the open engines. • One big player: • Node • Others of note: • Narwhal • FlusspferdFriday, June 24, 2011
  12. 12. The Toolkit Situation • Many frameworks and toolkits are built on top of JavaScript: • Dojo • JQuery • Prototype • MooTools • YUI • ExtJSFriday, June 24, 2011
  13. 13. The Overall Situation • Initially seen as a toy, it was left alone and it matured. • Many modern implementations do JIT compilation. • Its already quite fast and efficient. • Several big companies have stakes in it. • Its driven by competition and getting better & better. • Its poised to become the most popular computer language the world has yet seen.Friday, June 24, 2011
  14. 14. What’s the Syntax Like? What are the technical details of the language?Friday, June 24, 2011
  15. 15. The Basics • Operators, loops, and conditionals similar to C • But, variables are dynamically typed • "Optional" semicolons (never omit them) • "Optional" var keyword (never omit it)Friday, June 24, 2011
  16. 16. Simple Variable Types • Booleans • Numbers • Predefined constants: • true • false • undefined • Infinity •NaNFriday, June 24, 2011
  17. 17. Arrays • Used for holding ordered items. • Items need not be of the same type or even scalar. • Indexing syntax works as expected and is zero-based: a[1]=1 for [0,1,true] • A length property is maintained: a.length is 3. • Not for associative arrays.Friday, June 24, 2011
  18. 18. Text • Strings • Similar to arrays • Many built-in methods • Literals: val and "val" • Regular Expressions • Support most popular expressions • Literals: /pattern/flagsFriday, June 24, 2011
  19. 19. Objects • Used for holding named items. • Items need not be of the same type or even scalar. • Item keys dont need quotes. • Support array indexing. • Use for associative arrays. • Predefined sentinel null is distinct from {}.Friday, June 24, 2011
  20. 20. Dates • JavaScript provides a pre- defined Date object. • It holds a full timestamp, not just a date. • It supports a few different constructor signatures. • It features lots of methods to work with individual parts.Friday, June 24, 2011
  21. 21. Math • The global Math object provides many basic mathematical functions and constants. • Math.abs, Math.ceil, Math.floor, Math.round, Math.log, Math.exp, Math.max, Math.min, Math.sin, Math.cos, Math.tan, Math.sqrt, Math.random, etc. • Math.PI, Math.E, Math.SQRT2, Math.LN2, Math.LN10, etc.Friday, June 24, 2011
  22. 22. Functions • Functions are full-class citizens in JavaScript. • Functions can be passed into other functions. • Functions can return functions. • Partials, curries, closures, etc. are all good. • Anonymous functions are fine. • Functional programming, à la LISP, but without all the parentheses.Friday, June 24, 2011
  23. 23. Friday, June 24, 2011
  24. 24. Scope • Scope is defined only by function blocks. • Closures can sometimes be surprising to those not used to them. • Anonymous functions are often used to control scope. • Enclosing scopes are also searched.Friday, June 24, 2011
  25. 25. Objects Revisited • The combination of first-class functions and associative arrays leads to "real" objects. • Members may be public or private. • All JavaScript objects inherit from a base Object. • Object inheritance is a little different from what may be familiar...Friday, June 24, 2011
  26. 26. Inheritance • JavaScript uses differential inheritance (a variation of prototypal inheritance) • There are no classes. • No "protected" equivalent. • Objects inherit from similar objects and declare differences. • Links to prototypes are preserved.Friday, June 24, 2011
  27. 27. How Does One Use JavaScript? What about debuggers and environments?Friday, June 24, 2011
  28. 28. Different Environments, Different Debuggers • All the command-line examples in this presentation were entered live into node. • It can also be used for running scripts. • Most modern browsers also have their own environments for inspecting JavaScript and even trying code live. • These environments vary greatly in quality; in particular, dont expect too much in the mobile world.Friday, June 24, 2011
  29. 29. Firefox (Firebug) The first really good offering.Friday, June 24, 2011
  30. 30. Safari & Chrome (Web Inspector) Keeps pressure on Firefox & Firebug.Friday, June 24, 2011
  31. 31. Opera (Dragonfly)Friday, June 24, 2011
  32. 32. MSIE (Developer Tools) First packaged with version 8. The Developer Toolbar is available for prior versions.Friday, June 24, 2011
  33. 33. Where Can I Learn More? A short list of selected references.Friday, June 24, 2011
  34. 34. A Few Sites of Interest • shouldilearnjavascript.com • developer.mozilla.org/en/JavaScript • dojotoolkit.org • nodejs.org • npmjs.org • getfirebug.com • trac.webkit.org/wiki/WebInspector • opera.com/dragonfly/ • msdn.microsoft.com/library/dd565622Friday, June 24, 2011

×