SlideShare a Scribd company logo
JavaScript
                        The Ubiquitous Language
Friday, June 24, 2011
What Is It?

                            How Can I Use It?




                                                JavaScript

                                                             Why Should I Care?

                        How Does It Work?




Friday, June 24, 2011
What Is JavaScript?
                        A quick survey of what it is and isn't.




Friday, June 24, 2011
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
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
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
Why JavaScript?
                        Why should I learn this thing anyway?




Friday, June 24, 2011
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
The Browser Situation
           • Fighting for the top spot:
             • Chrome
             • Safari
             • Firefox
           • Also quite good:
             • Opera
           • It exists:
             • Microsoft Internet Explorer

Friday, June 24, 2011
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
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
The Toolkit Situation
           • Many frameworks and toolkits
               are built on top of JavaScript:

                • Dojo
                • JQuery
                • Prototype
                • MooTools
                • YUI
                • ExtJS

Friday, June 24, 2011
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
What’s the Syntax Like?
                        What are the technical details of the language?




Friday, June 24, 2011
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
Simple Variable Types
           • Booleans
           • Numbers
           • Predefined constants:
             • true
             • false
             • undefined
             • Infinity
             •NaN


Friday, June 24, 2011
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
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
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
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
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
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
Friday, June 24, 2011
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
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
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
How Does One Use
                            JavaScript?
                        What about debuggers and environments?




Friday, June 24, 2011
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
Firefox (Firebug)




                         The first really good offering.

Friday, June 24, 2011
Safari & Chrome
                               (Web Inspector)




                        Keeps pressure on Firefox & Firebug.

Friday, June 24, 2011
Opera (Dragonfly)




Friday, June 24, 2011
MSIE (Developer Tools)




               First packaged with version 8. The Developer Toolbar
                           is available for prior versions.
Friday, June 24, 2011
Where Can I Learn
                             More?
                        A short list of selected references.




Friday, June 24, 2011
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

More Related Content

PDF
Milkyway@home rcos presentation_4_8_2011
PDF
Introducing the Ceylon Project
PDF
مقدمة عن لغة سكالا
KEY
OOP in JS
PPTX
Introduction to python
PPT
Paul de Bra's UnKeynote at Web Art Science London
PPTX
Introduction to Javascript
PPTX
Intro to Javascript
Milkyway@home rcos presentation_4_8_2011
Introducing the Ceylon Project
مقدمة عن لغة سكالا
OOP in JS
Introduction to python
Paul de Bra's UnKeynote at Web Art Science London
Introduction to Javascript
Intro to Javascript

Viewers also liked (11)

PDF
NodeJs Intro - JavaScript Zagreb Meetup #1
PDF
Intro to JavaScript
PDF
Intro to javascript (4 week)
PPTX
PDF
Javascript intro for MAH
KEY
Intro to Javascript
PPTX
JavaScript - Intro
PDF
Intro to Javascript and jQuery
PDF
Intro to JavaScript
PDF
Intro to JavaScript
PDF
बेसिक जावा प्रोग्रामिंग हिंदी में
NodeJs Intro - JavaScript Zagreb Meetup #1
Intro to JavaScript
Intro to javascript (4 week)
Javascript intro for MAH
Intro to Javascript
JavaScript - Intro
Intro to Javascript and jQuery
Intro to JavaScript
Intro to JavaScript
बेसिक जावा प्रोग्रामिंग हिंदी में
Ad

Similar to JavaScript Intro (20)

PDF
A Re-Introduction to JavaScript
PDF
Evolving js
PDF
javascript teach
PDF
JSBootcamp_White
PPTX
Java script
PDF
AD114 - Don't be afraid of curly brackets reloaded - even more JavaScript for...
PDF
Javascript FTW
PDF
Javascript Basics - part 1
PDF
JavaScript Miller Columns
PDF
Enterprise javascriptsession1
PDF
Splash
PPTX
JavaScript as Development Platform
KEY
JavaScript Neednt Hurt - JavaBin talk
PPT
Javascript
PPTX
WT Unit-3 PPT.pptx
PDF
Lecture7
PDF
Javascript, Do you speak it!
PDF
JavaScript 1.5 to 2.0 (TomTom)
PDF
Training javascript 2012 hcmut
A Re-Introduction to JavaScript
Evolving js
javascript teach
JSBootcamp_White
Java script
AD114 - Don't be afraid of curly brackets reloaded - even more JavaScript for...
Javascript FTW
Javascript Basics - part 1
JavaScript Miller Columns
Enterprise javascriptsession1
Splash
JavaScript as Development Platform
JavaScript Neednt Hurt - JavaBin talk
Javascript
WT Unit-3 PPT.pptx
Lecture7
Javascript, Do you speak it!
JavaScript 1.5 to 2.0 (TomTom)
Training javascript 2012 hcmut
Ad

Recently uploaded (20)

PDF
Revolutionize Operations with Intelligent IoT Monitoring and Control
PPTX
Telecom Fraud Prevention Guide | Hyperlink InfoSystem
PDF
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
PDF
Top Generative AI Tools for Patent Drafting in 2025.pdf
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
PDF
This slide provides an overview Technology
PDF
Dell Pro 14 Plus: Be better prepared for what’s coming
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
PDF
A Day in the Life of Location Data - Turning Where into How.pdf
PDF
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
DevOps & Developer Experience Summer BBQ
PDF
Test Bank, Solutions for Java How to Program, An Objects-Natural Approach, 12...
PDF
SparkLabs Primer on Artificial Intelligence 2025
PPTX
ABU RAUP TUGAS TIK kelas 8 hjhgjhgg.pptx
PDF
Smarter Business Operations Powered by IoT Remote Monitoring
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
PDF
NewMind AI Monthly Chronicles - July 2025
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
PDF
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Revolutionize Operations with Intelligent IoT Monitoring and Control
Telecom Fraud Prevention Guide | Hyperlink InfoSystem
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
Top Generative AI Tools for Patent Drafting in 2025.pdf
ChatGPT's Deck on The Enduring Legacy of Fax Machines
This slide provides an overview Technology
Dell Pro 14 Plus: Be better prepared for what’s coming
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
A Day in the Life of Location Data - Turning Where into How.pdf
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Understanding_Digital_Forensics_Presentation.pptx
DevOps & Developer Experience Summer BBQ
Test Bank, Solutions for Java How to Program, An Objects-Natural Approach, 12...
SparkLabs Primer on Artificial Intelligence 2025
ABU RAUP TUGAS TIK kelas 8 hjhgjhgg.pptx
Smarter Business Operations Powered by IoT Remote Monitoring
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
NewMind AI Monthly Chronicles - July 2025
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...

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
  • 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
  • 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