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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (11)

Semelhante a JavaScript Intro

Semelhante a JavaScript Intro (20)

Último

Último (20)

JavaScript Intro