JavaScript: The Good Parts
-
Upload
dmytro-shteflyuk -
Category
Documents
-
view
27.152 -
download
1
description
Transcript of JavaScript: The Good Parts
![Page 1: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/1.jpg)
JavaScript: The Good Parts
Douglas Crockford
Yahoo! Inc.
http://www.crockford.com/codecamp/
![Page 2: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/2.jpg)
The World's Most Misunderstood Programming
Language
![Page 3: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/3.jpg)
A language of many contrasts.
![Page 4: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/4.jpg)
The broadest range of programmer skills of any programming language.
From computer scientists to cut-n-pasters
and everyone in between.
![Page 5: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/5.jpg)
Complaints
• "JavaScript is not a language I know."
• "The browser programming experience is awful."
• "It's not fast enough."
• "The language is just a pile of mistakes."
![Page 6: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/6.jpg)
Hidden under a huge steaming pile of good
intentions and blunders is an elegant, expressive
programming language.
JavaScript has good parts.
![Page 7: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/7.jpg)
JavaScript is succeeding very well in an environment where
Java was a total failure.
![Page 8: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/8.jpg)
Influences
• Self
prototypal inheritance
dynamic objects
• Scheme
lambda
loose typing
• Java
syntax
conventions
• Perl
regular expressions
![Page 9: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/9.jpg)
Bad Parts
• Global Variables
• + adds and concatenates
• Semicolon insertion
• typeof
• with and eval
• phony arrays
• == and !=
• false, null, undefined, NaN
![Page 10: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/10.jpg)
Transitivity? What's That?• '' == '0' // false
• 0 == '' // true
• 0 == '0' // true
• false == 'false' // false
• false == '0' // true
• false == undefined // false
• false == null // false
• null == undefined // true
• " \t\r\n " == 0 // true
![Page 11: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/11.jpg)
value = myObject[name];
if (value == null) {
alert(name + ' not found.');
}
Two errors that cancel each other out.
![Page 12: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/12.jpg)
value = myObject[name];
if (value === undefined) {
alert(name + ' not found.');
}
![Page 13: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/13.jpg)
Good features that interact badly
• Objects can inherit from other objects.
• Functions can be members of objects.
• for..in statement mixes inherited functions with the desired data members.
![Page 14: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/14.jpg)
for in is troublesome
• Design question: Should for..in do a shallow skim or a deep dredge?
• Decision: Deep dredge. The programmer must explicitly filter out the deep members.
• Except: They didn't tell anybody!
• Consequence: Lots of confusion about how to use for..in.
![Page 15: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/15.jpg)
for in is troublesome
• Better Decision: Don't release the language broadly until we have enough experience to have confidence that we made the right choice.
• Historical Context: Getting it right at Netscape wasn't an option.
![Page 16: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/16.jpg)
Bad Heritage
• Blockless statements if (foo)
bar();
• Expression statements
foo;
• Floating point arithmetic 0.1 + 0.2 !== 0.3
• ++ and --
• switch
![Page 17: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/17.jpg)
Good Parts
• Lambda
• Dynamic Objects
• Loose Typing
• Object Literals
![Page 18: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/18.jpg)
Inheritance
• Inheritance is object-oriented code reuse.
• Two Schools:
• Classical
• Prototypal
![Page 19: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/19.jpg)
Prototypal Inheritance
• Class-free.
• Objects inherit from objects.
• An object contains a link to another object: Delegation. Differential Inheritance.
var newObject =
Object.create(oldObject);newObject
__proto__
oldObject
![Page 20: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/20.jpg)
Prototypal Inheritance
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
![Page 21: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/21.jpg)
new
• The new operator is required when calling a Constructor function.
• If new is omitted, the global object is clobbered by the constructor.
• There is no compile-time or run-time warning.
![Page 22: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/22.jpg)
Global
var names = ['zero', 'one', 'two',
'three', 'four', 'five', 'six',
'seven', 'eight', 'nine'];
var digit_name = function (n) {
return names[n];
};
alert(digit_name(3)); // 'three'
![Page 23: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/23.jpg)
Slow
var digit_name = function (n) {
var names = ['zero', 'one', 'two',
'three', 'four', 'five', 'six',
'seven', 'eight', 'nine'];
return names[n];
};
alert(digit_name(3)); // 'three'
![Page 24: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/24.jpg)
Closure
var digit_name = function () {
var names = ['zero', 'one', 'two',
'three', 'four', 'five', 'six',
'seven', 'eight', 'nine'];
return function (n) {
return names[n];
};
}();
alert(digit_name(3)); // 'three'
![Page 25: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/25.jpg)
A Module Patternvar singleton = function () {
var privateVariable;
function privateFunction(x) {
...privateVariable...
}
return {
firstMethod: function (a, b) {
...privateVariable...
},
secondMethod: function (c) {
...privateFunction()...
}
};
}();
![Page 26: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/26.jpg)
Module pattern is easily transformed into a powerful
constructor pattern.
![Page 27: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/27.jpg)
Power Constructors
1. Make an object.
• Object literal
• new
• Object.create
• call another power constructor
![Page 28: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/28.jpg)
Power Constructors
1. Make an object.
• Object literal, new, Object.create, call another power constructor
2. Define some variables and functions.
• These become private members.
![Page 29: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/29.jpg)
Power Constructors
1. Make an object.
• Object literal, new, Object.create, call another power constructor
2. Define some variables and functions.
• These become private members.
3. Augment the object with privileged methods.
![Page 30: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/30.jpg)
Power Constructors
1. Make an object.
• Object literal, new, Object.create, call another power constructor
2. Define some variables and functions.
• These become private members.
3. Augment the object with privileged methods.
4. Return the object.
![Page 31: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/31.jpg)
Step One
function myPowerConstructor(x) { var that = otherMaker(x);}
![Page 32: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/32.jpg)
Step Two
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x);}
![Page 33: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/33.jpg)
Step Three
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x that ... };}
![Page 34: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/34.jpg)
Step Four
function myPowerConstructor(x) { var that = otherMaker(x); var secret = f(x); that.priv = function () { ... secret x that ... }; return that;}
![Page 35: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/35.jpg)
Closure
• A function object contains
A function (name, parameters, body)
A reference to the environment in which it was created (context).
• This is a very good thing.
![Page 36: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/36.jpg)
Style Isn't Subjective
block
{
....
}
• Might work well in other languages
block {
....
}
• Works well in JavaScript
![Page 37: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/37.jpg)
Style Isn't Subjective
return
{
ok: false
};
• SILENT ERROR!
return {
ok: true
};
• Works well in JavaScript
![Page 38: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/38.jpg)
Style Isn't Subjective
return
{
ok: false
};
![Page 39: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/39.jpg)
Style Isn't Subjective
return; // semicolon insertion
{
ok: false
};
![Page 40: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/40.jpg)
Style Isn't Subjective
return;
{ // block
ok: false
};
![Page 41: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/41.jpg)
Style Isn't Subjective
return;
{
ok: false // label
};
![Page 42: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/42.jpg)
Style Isn't Subjective
return;
{ // useless
ok: false // expression
}; // statement
![Page 43: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/43.jpg)
Style Isn't Subjective
return;
{
ok: false; // semicolon
}; // insertion
![Page 44: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/44.jpg)
Style Isn't Subjective
return;
{
ok: false;
}; // empty statement
![Page 45: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/45.jpg)
Style Isn't Subjective
return;
{ // unreachable statement
ok: false;
}
![Page 46: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/46.jpg)
Style Isn't Subjective
return
{
ok: false
};
• Bad style
return;
{
ok: false;
}
• Bad results
![Page 47: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/47.jpg)
Working with the Grain
![Page 48: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/48.jpg)
A Personal Journey
Beautiful Code
![Page 49: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/49.jpg)
JSLint
• JSLint defines a professional subset of JavaScript.
• It imposes a programming discipline that makes me much more confident in a dynamic, loosely-typed environment.
• http://www.JSLint.com/
![Page 50: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/50.jpg)
WARNING!JSLint will hurt your
feelings.
![Page 51: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/51.jpg)
Unlearning Is Really Hard
Perfectly Fine == Faulty
![Page 52: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/52.jpg)
It's not ignorance does so much damage; it's knowin' so
derned much that ain't so.
Josh Billings
![Page 53: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/53.jpg)
The Very Best Part:
StabilityNo new design errors
since 1999!
![Page 54: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/54.jpg)
Coming Soon
• [ES3.1] ECMAScript Fourth Edition
• Corrections
• Reality
• Support for object hardening
• Strict mode for reliability
• Waiting on implementations
![Page 55: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/55.jpg)
Not Coming Soon
• [ES4] This project has been cancelled.
• Instead, [ES-Harmony].
• So far, this project has no defined goals or rules.
![Page 56: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/56.jpg)
Safe Subsets
• The most effective way to make this language better is to make it smaller.
• FBJS
• Caja & Cajita
• ADsafe
• These subsets will be informing the design of a new secure language to replace JavaScript.
![Page 57: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/57.jpg)
The Good Parts
• Your JavaScript application can reach a potential audience of billions.
• If you avoid the bad parts, JavaScript works really well. There is some brilliance in it.
• It is possible to write good programs with JavaScript.
![Page 58: JavaScript: The Good Parts](https://reader033.fdocuments.us/reader033/viewer/2022061117/54676bd2b4af9f493f8b56ac/html5/thumbnails/58.jpg)