JavaScript Intro
1 like604 views
The document provides an overview of JavaScript including its history and influences, present uses, ubiquity, syntax, and debugging environments. It describes JavaScript's origins in 1995 and C-like syntax, discusses how it is used in browsers, engines, servers and toolkits. The summary explores JavaScript's object model and prototypal inheritance, and provides resources to learn more.
![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](https://image.slidesharecdn.com/javascriptintro-110622182651-phpapp02/85/JavaScript-Intro-17-320.jpg)
JavaScript Intro
- 1. JavaScript The Ubiquitous Language Friday, June 24, 2011
- 2. What Is It? How Can I Use It? JavaScript Why Should I Care? How Does It Work? Friday, June 24, 2011
- 3. What Is JavaScript? A quick survey of what it is and isn't. Friday, June 24, 2011
- 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 syntax Friday, June 24, 2011
- 5. What's In A Name? • Mocha, LiveScript, & EcmaScript YES • JScript & ActiveScript SORT OF • JQuery NOT REALLY • Java NO • The "J" in both AJaX and JSON Friday, June 24, 2011
- 6. Present Realities • Not just for browsers. • It's a full-featured, general-purpose language. • It's 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. Why JavaScript? Why should I learn this thing anyway? Friday, June 24, 2011
- 8. It's Ubiquitous • Its rough start kept it from being a target, and it had time to spread everywhere. • Historically it is unmatched. • It's on every mainstream browser. • There are many stand-alone engines. • There are a handful of server-side systems. • It's even embedded in things like PDF and Flash. Friday, June 24, 2011
- 9. The Browser Situation • Fighting for the top spot: • Chrome • Safari • Firefox • Also quite good: • Opera • It exists: • Microsoft Internet Explorer Friday, June 24, 2011
- 10. The Open Engine Situation • Also driven by competition. • Three contenders for top spot: • V8 • JavaScriptCore • SpiderMonkey • Other options are available: • Rhino • K7 Friday, June 24, 2011
- 11. The Server Situation • Less competitive than browsers and engines. • All rely on the open engines. • One big player: • Node • Others of note: • Narwhal • Flusspferd Friday, June 24, 2011
- 12. The Toolkit Situation • Many frameworks and toolkits are built on top of JavaScript: • Dojo • JQuery • Prototype • MooTools • YUI • ExtJS Friday, June 24, 2011
- 13. The Overall Situation • Initially seen as a toy, it was left alone and it matured. • Many modern implementations do JIT compilation. • It's already quite fast and efficient. • Several big companies have stakes in it. • It's driven by competition and getting better & better. • It's poised to become the most popular computer language the world has yet seen. Friday, June 24, 2011
- 14. What’s the Syntax Like? What are the technical details of the language? Friday, June 24, 2011
- 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. Simple Variable Types • Booleans • Numbers • Predefined constants: • true • false • undefined • Infinity •NaN Friday, June 24, 2011
- 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. Text • Strings • Similar to arrays • Many built-in methods • Literals: 'val' and "val" • Regular Expressions • Support most popular expressions • Literals: /pattern/flags Friday, June 24, 2011
- 19. Objects • Used for holding named items. • Items need not be of the same type or even scalar. • Item keys don't need quotes. • Support array indexing. • Use for associative arrays. • Predefined sentinel null is distinct from {}. Friday, June 24, 2011
- 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. 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. 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. Friday, June 24, 2011
- 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. 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. 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. How Does One Use JavaScript? What about debuggers and environments? Friday, June 24, 2011
- 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, don't expect too much in the mobile world. Friday, June 24, 2011
- 29. Firefox (Firebug) The first really good offering. Friday, June 24, 2011
- 30. Safari & Chrome (Web Inspector) Keeps pressure on Firefox & Firebug. Friday, June 24, 2011
- 31. Opera (Dragonfly) Friday, June 24, 2011
- 32. MSIE (Developer Tools) First packaged with version 8. The Developer Toolbar is available for prior versions. Friday, June 24, 2011
- 33. Where Can I Learn More? A short list of selected references. Friday, June 24, 2011
- 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/dd565622 Friday, June 24, 2011