JavaScript Intro

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?


What Is JavaScript?
A quick survey of what it is and isn't.


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

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


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.

Why JavaScript?
Why should I learn this thing anyway?


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.

The Browser Situation
• Fighting for the top spot:
• Chrome
• Safari
• Firefox
• Also quite good:
• Opera
• It exists:
• Microsoft Internet Explorer


The Open Engine Situation
• Also driven by competition.
• Three contenders for top spot:
• V8
• JavaScriptCore
• SpiderMonkey
• Other options are available:
• Rhino
• K7


The Server Situation
• Less competitive than browsers
and engines.

• All rely on the open engines.
• One big player:
• Node
• Others of note:
• Narwhal
• Flusspferd


The Toolkit Situation
• Many frameworks and toolkits
are built on top of JavaScript:

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


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.


What’s the Syntax Like?
What are the technical details of the language?


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)


Simple Variable Types
• Booleans
• Numbers
• Predefined constants:
• true
• false
• undefined
• Infinity
•NaN


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.


Text
• Strings
• Similar to arrays
• Many built-in methods
• Literals: 'val' and "val"
• Regular Expressions
• Support most popular
expressions

• Literals: /pattern/flags


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 {}.


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.


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.


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.


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.


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


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.


How Does One Use
JavaScript?
What about debuggers and environments?


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.


Firefox (Firebug)

The first really good offering.


Safari & Chrome
(Web Inspector)

Keeps pressure on Firefox & Firebug.


Opera (Dragonfly)


MSIE (Developer Tools)

First packaged with version 8. The Developer Toolbar
is available for prior versions.

Where Can I Learn
More?
A short list of selected references.


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


JavaScript Intro

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Similar to JavaScript Intro

Similar to JavaScript Intro (20)

Recently uploaded

Recently uploaded (20)

JavaScript Intro