8/8/2019 Javascript Crock Ford
1/164
The JavaScript
Programming Language
Douglas Crockford
8/8/2019 Javascript Crock Ford
2/164
Overview
History
Language
Advanced Features
Platforms
Standards
Style
8/8/2019 Javascript Crock Ford
3/164
HistoryHistory
8/8/2019 Javascript Crock Ford
4/164
The World's Most
Misunderstood
Programming Language
8/8/2019 Javascript Crock Ford
5/164
Sources of
Misunderstanding
The Name
Mispositioning
Design Errors
Bad Implementations
The Browser
Bad Books
Substandard Standard
JavaScript is a Functional Language
8/8/2019 Javascript Crock Ford
6/164
History
1992
Oak, Gosling at Sun & FirstPerson
1995HotJava
LiveScript, Eich at Netscape
1996
JScript at Microsoft
1998
ECMAScript
8/8/2019 Javascript Crock Ford
7/164
Not a Web Toy
It is a real language
Small, but sophisticated
It is not a subset of Java
8/8/2019 Javascript Crock Ford
8/164
Key IdeasKey Ideas
8/8/2019 Javascript Crock Ford
9/164
Key Ideas
Load and go delivery
Loose typing
Objects as general containers
Prototypal inheritance
Lambda
Linkage though global variables
8/8/2019 Javascript Crock Ford
10/164
ValuesValues
8/8/2019 Javascript Crock Ford
11/164
Values
Numbers
Strings
Booleans
Objects
null
undefined
8/8/2019 Javascript Crock Ford
12/164
Numbers
Only one number type
No integers
64-bit floating point
IEEE-754 (aka Double)
Does not map well to common
understanding of arithmetic:
0.1 + 0.2 = 0.30000000000000004
8/8/2019 Javascript Crock Ford
13/164
NaN
Special number: Not a Number
Result of undefined or erroneous
operations
Toxic: any arithmetic operation with
NaN as an input will haveNaN as a
result
NaN is not equal to anything,
includingNaN
8/8/2019 Javascript Crock Ford
14/164
Number function
Number(value)
Converts the value into a number.
It producesNaN if it has a problem.
Similar to + prefix operator.
8/8/2019 Javascript Crock Ford
15/164
parseInt function
parseInt(value, 10)
Converts the value into a number.
It stops at the first non-digit character.
The radix (10) should be required.
parseInt("08") === 0" " ===
8/8/2019 Javascript Crock Ford
16/164
Math
Math object is modeled on Java's Math class.
It contains
abs absolute value
floor integer
log logarithm
max maximum
pow raise to a power
random random number
round nearest integer
sin sine
8/8/2019 Javascript Crock Ford
17/164
Strings
Sequence of 0 or more 16-bitcharacters
UCS-2, not quite UTF-16
No awareness of surrogate pairs
No separate character type
Characters are represented as strings with
a length of 1 Strings are immutable
Similar strings are equal ( == )
String literals can use single or double
8/8/2019 Javascript Crock Ford
18/164
String length
string.length
The length property determines thenumber of 16-bit characters in a
string.
8/8/2019 Javascript Crock Ford
19/164
String function
String(value)
Converts value to a string
8/8/2019 Javascript Crock Ford
20/164
String Methods
charAt concat indexOf lastIndexOfmatch replace search slice
split substring toLowerCase toUpperCase
8/8/2019 Javascript Crock Ford
21/164
Booleans
true
false
8/8/2019 Javascript Crock Ford
22/164
8/8/2019 Javascript Crock Ford
23/164
null
A value that isn't anything
8/8/2019 Javascript Crock Ford
24/164
undefined
A value that isn't even that
The default value for variables andparameters
The value of missing members in
objects
8/8/2019 Javascript Crock Ford
25/164
Falsy values
false
null
undefined
"" (empty string)
0
NaN
All other values (including all objects)are truthy.
"0" "false"
8/8/2019 Javascript Crock Ford
26/164
Everything Else Is Objects
8/8/2019 Javascript Crock Ford
27/164
Dynamic Objects
Unification of Object and Hashtable
new Object()produces an empty container of
name/value pairs
A name can be any string, a value can be any
value except undefined
members can be accessed with dot notation
or subscript notation
No hash nature is visible (no hash codes or
8/8/2019 Javascript Crock Ford
28/164
Loosely Typed
Any of these types can be stored in
an variable, or passed as a
parameter to any function
The language is not "untyped"
8/8/2019 Javascript Crock Ford
29/164
C
JavaScript is syntactically a C
family language
It differs from C mainly in its type
system, which allows functions to
be values
8/8/2019 Javascript Crock Ford
30/164
Identifiers
Starts with a letter or _ or$
Followed by zero or more letters, digits, _ or$
By convention, all variables, parameters,
members, and function names start with
lower case
Except for constructors which start withupper case
Initial _ should be reserved for
implementations
8/8/2019 Javascript Crock Ford
31/164
Reserved Words
abstractbooleanbreak bytecasecatch char class const continuedebugger defaultdeletedo doubleelse enum export extends
false final finally float forfunctiongotoif implements import ininstanceof intinterfacelongnative new null
package private protected publicreturnshort static super switch synchronizedthisthrow throws transient true trytypeof
var volatilevoidwhilewith
8/8/2019 Javascript Crock Ford
32/164
Comments
// slashslash line comment
/*
slashstarblock
comment
*/
8/8/2019 Javascript Crock Ford
33/164
Operators
Arithmetic
+ - * / %
Comparison
== != < > =
Logical
&& || !
Bitwise
& | ^ >> >>>
8/8/2019 Javascript Crock Ford
34/164
+
Addition and concatenation
If both operands are numbers,
thenadd them
else
convert them both to stringsconcatenate them
'$' + 3 + 4 = '$34'
8/8/2019 Javascript Crock Ford
35/164
+
Unary operator can convert strings
to numbers
+"42" = 42
Also
Number("42") = 42
Also parseInt("42", 10) = 42
+"3" + (+"4") = 7
8/8/2019 Javascript Crock Ford
36/164
/
Division of two integers can produce
a non-integer result
10 / 3 = 3.3333333333333335
8/8/2019 Javascript Crock Ford
37/164
== !=
Equal and not equal
These operators can do typecoercion
It is better to use === and !==, which
do not do type coercion.
8/8/2019 Javascript Crock Ford
38/164
&&
The guard operator, aka logical and
If first operand is truthy
then result is second operand
else result is first operand
It can be used to avoid null references if (a) {
return a.member; } else {
return a; }
can be written as
8/8/2019 Javascript Crock Ford
39/164
||
The default operator, aka logical or
If first operand is truthy
then result is first operand
else result is second operand
It can be used to fill in default values.
var last = input || nr_items;
(Ifinput is truthy, then last is input,
otherwise set last to nr_items.)
8/8/2019 Javascript Crock Ford
40/164
!
Prefix logical notoperator.
If the operand is truthy, the result is
false. Otherwise, the result is true. !! produces booleans.
8/8/2019 Javascript Crock Ford
41/164
Bitwise
& | ^ >> >>>
8/8/2019 Javascript Crock Ford
42/164
Statements
expression
if switch
while do forbreak continue return try/throw
8/8/2019 Javascript Crock Ford
43/164
Break statement
Statements can have labels.
Break statements can refer to those
labels.
loop: for (;;) {
...
if (...) {break loop;
}
...
}
8/8/2019 Javascript Crock Ford
44/164
For statement
Iterate through all of the elements of
an array:
for (var i = 0; i < array.length; i += 1) {
// within the loop,
//iis the index of the current member//array[i] is the current element
}
8/8/2019 Javascript Crock Ford
45/164
For statement
Iterate through all of the members of
an object:
for (var nameinobject) {if (object.hasOwnProperty(name)) {
// within the loop,
//name is the key of current member
//object[name] is the current value
}}
8/8/2019 Javascript Crock Ford
46/164
Switch statement
Multiway branch
The switch value does not need to anumber. It can be a string.
The case values can be expressions.
8/8/2019 Javascript Crock Ford
47/164
8/8/2019 Javascript Crock Ford
48/164
Throw statement
throw new Error(reason);
throw {
name: exceptionName,
message: reason
};
8/8/2019 Javascript Crock Ford
49/164
Try statement
try { ...
} catch (e) {
switch (e.name) {
case 'Error':
...
break;
default: throw e;
}
}
8/8/2019 Javascript Crock Ford
50/164
Try Statement
The JavaScript implementation can
produce these exception names:
'Error'
'EvalError'
'RangeError'
'SyntaxError'
'TypeError' 'URIError'
8/8/2019 Javascript Crock Ford
51/164
With statement
Intended as a
short-hand
Ambiguous
Error-prone
Don't use it
with (o) {
foo = null;
}
o.foo = null;
foo = null;
8/8/2019 Javascript Crock Ford
52/164
Function statement
functionname(parameters) {
statements;
}
8/8/2019 Javascript Crock Ford
53/164
Var statement
Defines variables within a function.
Types are not specified.
Initial values are optional.
var name;
var nrErrors = 0;var a, b, c;
8/8/2019 Javascript Crock Ford
54/164
Scope
In JavaScript, {blocks} do not have
scope.
Only functions have scope.
Vars defined in a function are not
visible outside of the function.
8/8/2019 Javascript Crock Ford
55/164
Return statement
returnexpression;
or
return;
If there is no expression, then the
return value is undefined.
Except for constructors, whose
default return value is this.
8/8/2019 Javascript Crock Ford
56/164
ObjectsObjects
8/8/2019 Javascript Crock Ford
57/164
Objects
Everything else is objects
Objects can contain data andmethods
Objects can inherit from other
objects
8/8/2019 Javascript Crock Ford
58/164
Collections
An object is an unordered collection ofname/value pairs
Names are strings
Values are any type, including otherobjects
Good for representing records andtrees
8/8/2019 Javascript Crock Ford
59/164
Objects:Objects:Object LiteralsObject Literals
8/8/2019 Javascript Crock Ford
60/164
Object Literals
Object literals are wrapped in { }
Names can be names or strings
Values can be expressions
: separates names and values
, separates pairs
Ob ect literals can be used an where a
8/8/2019 Javascript Crock Ford
61/164
Object Literals
var myObject = {name: "Jack B. Nimble",'goto': 'Jail', grade: 'A', level: 3};
3"level"
"A""grade"
"Jail""goto"
"Jack B. Nimble""name"
var theName = myObject.name;var destination = myObject['goto'];
8/8/2019 Javascript Crock Ford
62/164
Example: maker Function
function maker(name, where, grade, level) {var it = {};
it.name = name;
it['goto'] = where;
it.grade = grade;
it.level = level;
return it;
}
myObject = maker("Jack B. Nimble",
'Jail', 'A', 3);
8/8/2019 Javascript Crock Ford
63/164
Object Literals
var myObject = {name: "Jack B. Nimble",'goto': 'Jail', grade: 'A',format:{type: 'rect', width: 1920, height: 1080,interlace: false, framerate: 24}};
8/8/2019 Javascript Crock Ford
64/164
Object Literalsvar myObject = {
name: "Jack B. Nimble",
'goto': 'Jail',
grade: 'A',
format: {
type: 'rect',
width: 1920,
height: 1080,
interlace: false,
framerate: 24
}
};
8/8/2019 Javascript Crock Ford
65/164
Object Literals
myFunction({
type: 'rect',
width: 1920,
height: 1080
});
throw {
name: 'error',
message: 'out of bounds'
};
8/8/2019 Javascript Crock Ford
66/164
Object Literals
function SuperDiv(width, height,left, top, zIndex, position,color, visibility, html,
cssClass)
function SuperDiv(spec)
8/8/2019 Javascript Crock Ford
67/164
Objects:Objects:Object AugmentationObject Augmentation
8/8/2019 Javascript Crock Ford
68/164
Object Augmentation
New members can be added to any
object by simple assignment
There is no need to define a new
class
myObject.format.colorModel ='YCgCb';
myObject[name] = value;
8/8/2019 Javascript Crock Ford
69/164
Objects:Objects:LinkageLinkage
8/8/2019 Javascript Crock Ford
70/164
Linkage
Objects can be created with a secretlink to another object.
If an attempt to access a name fails,the secret linked object will be used.
The secret link is not used whenstoring. New members are only addedto the primary object.
The object(o) function makes a new
8/8/2019 Javascript Crock Ford
71/164
Linkage
3"level"
"A""grade"
"Jail""goto"
"Jack B. Nimble""name"
var myNewObject = object(myOldObject);
myNewObject
myOldObject
8/8/2019 Javascript Crock Ford
72/164
Linkage
"pignapping""crime"
4"level"
"Tom Piperson""name"
myNewObject.name = "Tom Piperson";
myNewObject.level += 1;
myNewObject.crime = 'pignapping';
3"level"
"A""grade"
"Jail""goto"
"Jack B. Nimble""name"
8/8/2019 Javascript Crock Ford
73/164
Objects:Objects:InheritanceInheritance
8/8/2019 Javascript Crock Ford
74/164
Inheritance
Linkage provides simple inheritance.
An object can inherit from an olderobject.
8/8/2019 Javascript Crock Ford
75/164
Prototypal Inheritance
Some languages have classes,
methods, constructors, and modules.
JavaScript's functions do the work of
all of those.
Instead of Classical Inheritance,
JavaScript has Prototypal Inheritance.
It accomplishes the same things, but
differently.
It offers greater expressive power.
'
8/8/2019 Javascript Crock Ford
76/164
Prototypal Inheritance
Instead of organizing objects into rigid
classes, new objects can be made that are
similar to existing objects, and then
customized.
Object customization is a lot less work than
making a class, and less overhead, too.
One of the keys is the object(o)function.
The other key is functions.
8/8/2019 Javascript Crock Ford
77/164
Objects:Objects:Object MethodsObject Methods
8/8/2019 Javascript Crock Ford
78/164
Object Methods
All objects are linked directly or indirectly
to Object.prototype
All objects inherit some basic methods.
None of them are very useful.
hasOwnProperty(name)
Is the name a true member of this
object?
No copy method.
No equals method.
8/8/2019 Javascript Crock Ford
79/164
Objects:Objects:Object ConstructionObject Construction
8/8/2019 Javascript Crock Ford
80/164
Object Construction
Make a new empty object
All three of these expressions have
exactly the same result:
new Object()
{}
object(Object.prototype)
{} is the preferred form.
8/8/2019 Javascript Crock Ford
81/164
Objects:Objects:ReferenceReference
R f
8/8/2019 Javascript Crock Ford
82/164
Reference
Objects can be passed as
arguments to functions, and can be
returned by functions
Objects are passed by reference.
Objects are not passed by value.
The === operator compares object
references, not values true only if both operands are the same
object
D l t
8/8/2019 Javascript Crock Ford
83/164
Delete
Members can be removed from an
object with the delete operator
deletemyObject[name];
8/8/2019 Javascript Crock Ford
84/164
ArraysArrays
A
8/8/2019 Javascript Crock Ford
85/164
Arrays
Array inherits from Object.
Indexes are converted to strings and
used as names for retrieving values. Very efficient for sparse arrays.
Not very efficient in most other cases.
One advantage: No need to provide a
length or type when creating an array.
8/8/2019 Javascript Crock Ford
86/164
A Lit l
8/8/2019 Javascript Crock Ford
87/164
Array Literals
An array literal uses []
It can contain any number of
expressions, separated by commas
myList = ['oats', 'peas', 'beans'];
New items can be appended
myList[myList.length] = 'barley';
The dot notation should not be used
with arrays.
[] is preferred to new Array().
A M th d
8/8/2019 Javascript Crock Ford
88/164
Array Methods
concat join
pop
push slice
sort
splice
D l ti El t
8/8/2019 Javascript Crock Ford
89/164
Deleting Elements
delete array[number]
Removes the element, but leaves a
hole in the numbering.array.splice(number, 1)
Removes the element andrenumbers all the following
elements.
D l ti El t
8/8/2019 Javascript Crock Ford
90/164
Deleting Elements
myArray = ['a', 'b', 'c', 'd'];
delete myArray[1];
// ['a', undefined, 'c', 'd']
myArray.splice(1, 1);
// ['a', 'c', 'd']
A Obj t
8/8/2019 Javascript Crock Ford
91/164
Arrays v Objects
Use objects when the names are
arbitrary strings.
Use arrays when the names are
sequential integers.
Don't get confused by the term
Associative Array.
Di ti i hi A
8/8/2019 Javascript Crock Ford
92/164
Distinguishing Arrays
value.constructor === Array
value instanceof Array
Neither of these work when the value
comes from a different frame.
Arra s and Inheritance
8/8/2019 Javascript Crock Ford
93/164
Arrays and Inheritance
Dont use arrays as prototypes.
The object produced this way does not
have array nature. It will inherit the array's
values and methods, but not its length. You can augment an individual array.
Assign a method to it.
This works because arrays are objects.
You can augment all arrays.
Assign methods toArray.prototype
8/8/2019 Javascript Crock Ford
94/164
FunctionsFunctions
Functions
8/8/2019 Javascript Crock Ford
95/164
Functions
Functions are first-class objects
Functions can be passed, returned,
and stored just like any other value
Functions inherit from Object and
can store name/value pairs.
Function operator
8/8/2019 Javascript Crock Ford
96/164
Function operator
The function operator takes an
optional name, a parameter list, and
a block of statements, and returns a
function object.
functionname(parameters) {
statements
}
A function can appear anywhere
that an expression can appear.
lambda
8/8/2019 Javascript Crock Ford
97/164
lambda
What JavaScript calls function,
other languages call lambda.
It is a source of enormous
expressive power.
Unlike most power-constructs, it is
secure.
Function statement
8/8/2019 Javascript Crock Ford
98/164
Function statement
The function statement is just a
short-hand for avar statement with
a function value.
function foo() {}
expands to
var foo = function foo() {};
Inner functions
8/8/2019 Javascript Crock Ford
99/164
Inner functions
Functions do not all have to be
defined at the top level (or left
edge).
Functions can be defined inside of
other functions.
Scope
8/8/2019 Javascript Crock Ford
100/164
Scope
An inner function has access to the
variables and parameters of
functions that it is contained within.
This is known as Static Scoping or
Lexical Scoping.
Closure
8/8/2019 Javascript Crock Ford
101/164
Closure
The scope that an inner function
enjoys continues even after the
parent functions have returned.
This is called closure.
Closure Example
8/8/2019 Javascript Crock Ford
102/164
Closure Example
function fade(id) { var dom = document.getElementById(id), level = 1; function step () { var h = level.toString(16); dom.style.backgroundColor =
'#FFFF' + h + h; if (level < 15) { level += 1;
setTimeout(step, 100); } } setTimeout(step, 100); }
Function Objects
8/8/2019 Javascript Crock Ford
103/164
Function Objects
Functions are objects, so they can
contain name/value pairs.
This can serve the same purpose as
static members in other languages.
8/8/2019 Javascript Crock Ford
104/164
Invocation
8/8/2019 Javascript Crock Ford
105/164
Invocation
If a function is called with too many
arguments, the extra arguments are
ignored.
If a function is called with too fewarguments, the missing values will
be undefined.
There is no implicit type checkingon the arguments.
Invocation
8/8/2019 Javascript Crock Ford
106/164
Invocation
There are four ways to call a function:
Method form
thisObject.methodName(arguments)
thisObject["methodName"](arguments)
Function form
functionObject(arguments)
Constructor formnewfunctionObject(arguments)
Apply form
functionObject.apply(thisObject,
Method form
8/8/2019 Javascript Crock Ford
107/164
Method form
thisObject.methodName(arguments)
When a function is called in the
method form, this is set tothisObject, the object containing the
function.
This allows methods to have areference to the object of interest.
Function form
8/8/2019 Javascript Crock Ford
108/164
Function form
functionObject(arguments)
When a function is called in the
function form, this is set to the
global object.
That is not very useful.
It makes it harder to write helper
functions within a method because the
helper function does not get access to
the outerthis.
var that = this;
Constructor form
8/8/2019 Javascript Crock Ford
109/164
Constructor form
newfunctionObject(arguments)
When a function is called with the
new operator, a new object iscreated and assigned to this.
If there is not an explicit return
value, then this will be returned.
8/8/2019 Javascript Crock Ford
110/164
thisthis
this
8/8/2019 Javascript Crock Ford
111/164
this
this is an extraparameter. Its
value depends on
the calling form. this gives
methods access
to their objects.
this is bound atinvocation time.
the new
objectconstructor
the objectmethod
the globalobject
function
thisInvocationform
8/8/2019 Javascript Crock Ford
112/164
argumentsarguments
arguments
8/8/2019 Javascript Crock Ford
113/164
arguments
When a function is invoked, in additionto its parameters, it also gets a special
parameter called arguments.
It contains all of the arguments fromthe invocation.
It is an array-like object.
arguments.length is the number ofarguments passed.
Example
8/8/2019 Javascript Crock Ford
114/164
Example
function sum() { var i,
n = arguments.length,
total = 0; for (i = 0; i < n; i += 1) { total += arguments[i]; }
return total;}
8/8/2019 Javascript Crock Ford
115/164
Extending Built-in TypesExtending Built-in Types
Augmenting Built-in Types
8/8/2019 Javascript Crock Ford
116/164
Augmenting Built in Types
Object.prototypeArray.prototype
Function.prototype
Number.prototype String.prototype
Boolean.prototype
trim
8/8/2019 Javascript Crock Ford
117/164
String.prototype.trim = function () {
return this.replace(
/^\s*(\S*(\s+\S+)*)\s*$/, "$1");};
supplant
8/8/2019 Javascript Crock Ford
118/164
pp
var template = '' +'Last{last}' +
'First{first}' +
'';
var data = {first: "Carl",last: "Hollywood",border: 2
};
mydiv.innerHTML = template.supplant(data);
supplant
8/8/2019 Javascript Crock Ford
119/164
pp
String.prototype.supplant = function (o) {return this.replace(/{([^{}]*)}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' ?r : a;
}
);
};
typeof
8/8/2019 Javascript Crock Ford
120/164
yp
The typeof prefix operator returns astring identifying the type of a value.
'undefined'undefined
'object'null
'boolean'boolean'string'string
'number'number
'object'array
'function'function
'object'object
typeoftype
eval
8/8/2019 Javascript Crock Ford
121/164
eval
eval(string)
The eval function compiles andexecutes a string and returns the
result.
It is what the browser uses to convert
strings into actions.
It is the most misused feature of thelanguage.
Function function
8/8/2019 Javascript Crock Ford
122/164
Function function
new Function(parameters,body)
The Function constructor takes zero ormore parameter name strings, and a
body string, and uses the JavaScript
compiler to produce a function object.
It should only be used to compile fresh
source from a server.
It is closely related to eval.
Built-in Type Wrappers
8/8/2019 Javascript Crock Ford
123/164
Built in Type Wrappers
Java has int and Integer, twoincompatible types which can both
carry the same value with differing
levels of efficiency andconvenience.
JavaScript copied this pattern to no
advantage. Avoid it. Avoid new Boolean()
Avoid new String()
Avoid new Number()
Confession
8/8/2019 Javascript Crock Ford
124/164
Co ess o
function object(o) {function F() {}
F.prototype = o;return new F();
}
Augmentation
8/8/2019 Javascript Crock Ford
125/164
g
We can directly modify individualobjects to give them just the
characteristics we want.
We can do this without having tocreate classes.
We can then use our new object as the
prototype for lots of new objects, eachof which can also be augmented.
Working with the Grain
8/8/2019 Javascript Crock Ford
126/164
g
Classical patterns are less effectivethan prototypal patterns or parasitic
patterns.
Formal classes are not needed for
reuse or extension.
8/8/2019 Javascript Crock Ford
127/164
Global ObjectsGlobal Objects
(global) Object
8/8/2019 Javascript Crock Ford
128/164
(g ) j
The object that dares not speak itsname.
It is the container for all global
variables and all built-in objects. Sometimes this points to it.
var global = this;
On browsers, window is the globalobject.
Global variables are evil
8/8/2019 Javascript Crock Ford
129/164
Functions within an application can
clobber each other.
Cooperating applications can
clobber each other.
Use of the global namespace must
be minimized.
Implied Global
8/8/2019 Javascript Crock Ford
130/164
p
Any var which is not properly declaredis assumed to be global by default.
This makes it easy for people who do
not know or care about encapsulationto be productive, but it makes
applications less reliable.
JSLint is a tool which helps identifyimplied globals and other weaknesses.
http://www.JSLint.com
8/8/2019 Javascript Crock Ford
131/164
NamespaceNamespace
Namespace
8/8/2019 Javascript Crock Ford
132/164
p
Every object is a separate namespace.
Use an object to organize your
variables and functions.
The YAHOO Object.
YAHOO={};
http://twiki.corp.yahoo.com/view/Devel/TheYAHOOObject
Encapsulate
8/8/2019 Javascript Crock Ford
133/164
p
Function scope can create an
encapsulation.
Use an anonymous function to wrap
your application.
Example
8/8/2019 Javascript Crock Ford
134/164
pYAHOO.Trivia = function () {
// define your common vars here
// define your common functions here
return {
getNextPoser: function (cat, diff) {...
},
showPoser: function () {
...
}
};
} ();
8/8/2019 Javascript Crock Ford
135/164
TypeType
Thinking about type
8/8/2019 Javascript Crock Ford
136/164
Trading type-safety for dynamism.
JavaScript has no cast operator.
Reflection is really easy, and usually
unnecessary.
Why inheritance?
Automatic castingCode reuse
Trading brittleness for flexibility.
Date
8/8/2019 Javascript Crock Ford
137/164
The Date function is based on Java'sDate class.
It was not Y2K ready.
RegExp
8/8/2019 Javascript Crock Ford
138/164
Regular expression pattern matcher
Patterns are enclosed in slashes
Example: a pattern that matches
regular expressions
/\/(\\[^\x00-\x1f]|\[(\\[^\x00-\x1f]|[^\x00-
\x1f\\\/])*\]|[^\x00-\x1f\\\/\[])+\/[gim]*/
Bizarre notation, difficult to read.
Threads
8/8/2019 Javascript Crock Ford
139/164
The language definition is neutral onthreads
Some language processors (like
SpiderMonkey) provide thread support
Most application environments (like
browsers) do not provide it
8/8/2019 Javascript Crock Ford
140/164
PlatformsPlatforms
Platforms
8/8/2019 Javascript Crock Ford
141/164
Browsers
WSH and Dashboard
Yahoo!Widgets
DreamWeaver and Photoshop
Embedded
8/8/2019 Javascript Crock Ford
142/164
VariantsVariants
8/8/2019 Javascript Crock Ford
143/164
E4X
8/8/2019 Javascript Crock Ford
144/164
Extensions to ECMAScript for XML
Proposed by BEA
Allowsliterals
Not compatible with ECMAScript
Third Edition
Not widely accepted yet Not in IE7
ECMAScript Fourth Edition
8/8/2019 Javascript Crock Ford
145/164
A very large set of new features arebeing considered.
Mozilla and Opera are committed.
It is not clear that Microsoft will
adopt it.
No word from Safari yet.
8/8/2019 Javascript Crock Ford
146/164
StyleStyle
Style
8/8/2019 Javascript Crock Ford
147/164
Programming style isn't aboutpersonal taste.
It is about rigor in expression.
It is about clearness in presentation.
It is about product adaptability and
longevity. Good rules help us to keep the
quality of our programs high.
Style and JavaScript
8/8/2019 Javascript Crock Ford
148/164
Style is critically important forJavaScript.
The dynamic nature of the language
is considered by some to be "toosoft". Discipline is necessary for
balance.
Most of the world's body ofJavaScript programs is crap.
8/8/2019 Javascript Crock Ford
149/164
Semicolon insertion
8/8/2019 Javascript Crock Ford
150/164
When the compiler sees an error, itattempts to replace a nearby linefeed
with a semicolon and try again.
This should alarm you.
It can mask errors.
Always use the full, correct forms,
including semicolons.
Line Ending
8/8/2019 Javascript Crock Ford
151/164
Break a line after a punctuator:, . ; : { } ( [ = < > ? ! + - * / %~ ^ | & == != = += -= *= /= %=^= |= &= > || && === !== =
>>> >>>= Do not break after a name, string,
number, or ) ] ++ --
Defense against copy/paste errors.
Comma
8/8/2019 Javascript Crock Ford
152/164
Avoid tricky expressions using thecomma operators.
Do not use extra commas in array
literals.
Good: [1, 2, 3]
Bad: [1, 2, 3,]
Required Blocks
8/8/2019 Javascript Crock Ford
153/164
Good: if (a) {
b();
} Bad:
if (a) b();
Forbidden Blocks
8/8/2019 Javascript Crock Ford
154/164
Blocks do not have scope in JavaScript.
Blocks should only be used with structured
statements
function if
switch
while
for
do try
Variables
8/8/2019 Javascript Crock Ford
155/164
Define all variables at the beginningof the function.
JavaScript does not have block
scope, so their is no advantage in
declaring variables at the place of
their first use.
Expression Statements
8/8/2019 Javascript Crock Ford
156/164
Any expression can be used as astatement. That can mask errors.
Only assignment expressions and
invocation expressions should be usedas statements.
Good: foo();
Bad: foo && foo();
switch Statement
8/8/2019 Javascript Crock Ford
157/164
Avoid using fallthrough.
Each clause should explicitlybreak
orreturn orthrow.
Assignment Expressions
8/8/2019 Javascript Crock Ford
158/164
Do not use assignment expressionsin the condition parts ofif, while, or
for.
It is more likely that
if (a = b) { ... }
was intended to be
if (a == b) { ... }
Avoid tricky expressions.
== and !=
8/8/2019 Javascript Crock Ford
159/164
Be aware that == and != do typecoercion.
Bad
if (a == null) { ... }
Good:
if (a === null) { ... }
if (!a) { ... }
Labels
8/8/2019 Javascript Crock Ford
160/164
Use labels only on thesestatements:
do
forswitch
while
Never use javascript: as a label.
JSLint
8/8/2019 Javascript Crock Ford
161/164
JSLint can help improve the robustnessand portability of your programs.
It enforces style rules.
It can spot some errors that are verydifficult to find in debugging.
It can help eliminate implied globals.
Currently available on the web and as aKonfabulator widget.
Soon, in text editors and Eclipse.
http://www.JSLint.com/
UHOH!
8/8/2019 Javascript Crock Ford
162/164
Universal Header Onerror Handler
Inserted into 0.1% of pages
Reports on JavaScript errors
http://uhoh.corp.yahoo.com/
Key Ideas
8/8/2019 Javascript Crock Ford
163/164
Load and go delivery
Loose typing
Objects as general containers
Prototypal inheritance
Lambda
Linkage though global variables
8/8/2019 Javascript Crock Ford
164/164
The JavaScript
Programming Language
Douglas Crockford
crock@ ahoo inc com
mailto:[email protected]:[email protected]Top Related