Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JS
Search
nctunba
March 14, 2012
Programming
11
640
JS
nctunba
March 14, 2012
Tweet
Share
More Decks by nctunba
See All by nctunba
被 Qt 快樂的玩弄
nctunba
2
400
被 Qt 快樂的玩弄 part 1
nctunba
1
290
Node - Express - Socket.io
nctunba
1
420
Python
nctunba
3
520
node
nctunba
9
50k
jQuery
nctunba
9
610
Other Decks in Programming
See All in Programming
Laravel Boost 超入門
fire_arlo
3
220
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Featured
See All Featured
A better future with KSS
kneath
239
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
The Invisible Side of Design
smashingmag
301
51k
A Tale of Four Properties
chriscoyier
160
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing Experiences People Love
moore
142
24k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Into the Great Unknown - MozCon
thekraken
40
2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building an army of robots
kneath
306
46k
Transcript
JavaScript
“The World's Most Misunderstood Programming Language” Douglas Crackford
A Re-introduction to JavaScript
has nothing to do with Java JavaScript
runs not only in web browsers JavaScript
History
1995 by Brendan Eich for Netscape LiveScript
None
“I had to be done in ten days or something
worse than JS would have happened.” Brendan Eich
base on Scheme LiveScript
renamed JavaScript LiveScript
Standardized ECMAScript
Language Overview
No compilation Interpreter Based
None
No class Prototypical Inheritance
except for null and undefined Object Everything
My dad is Scheme Functional Programming
“Lisp in C's Clothing” Douglas Crackford
None
Not my business Input/Output?
Variable & Types
Object Array Function null Number Boolean String undefined
Number
var a = 42;
The only number type is Number Number
double-precision 64-bit IEEE 754 Number
var a = 0.1; // 0.1 a = 010; //
8 a = 0xab; // 171
String
var a = 'hello world';
'qouted like this' ”double qouted” String
'string'.length // 6 'string'[2] // 'r' 'hello'.substr(0, 2) // 'he'
'hello' + 'world' // 'helloworld' 'string' + 2 // 'string2'
var a = 42; a = 'hello world';
JavaScript is loosely typed values are typed, variables are not
Boolean
var a = true;
true & false Boolean
'123' == 123 // true '123' === 123 // false
Content equality ==
Object identity ===
Null
var a = null; // null
Nothing Exists but nothing Null
Undefined
var a; // undefined
Not even nothing Undefined
var a; // undefined a = 5; // 5
Everything in JavaScript is undefined Until you assign something to
it
[ ] Array
var a = [4, 5, 6];
Just a list Array
var a = [4, true, 'hello']; a[0] // 4 a[3]
// undefined
var a = [4, 5, [6, 7]]; a[2] // [6,
7] a.push(7) // a → [4, 5, [6, 7], 7]
var a = [4, 5, , 6]; a.length // 4
a.toString() // '4,5,undefined,6'
{ } Object
var a = {};
Hash table Object
var bob = { name: 'bob', Job: 'teacher', age: 36
};
Name-value pair { name: value } Object
var bob = { name: 'bob' };
dynamic Object
var bob = { name: 'bob' }; bob.hair = 'brown';
bob['hair'] = 'brown';
bob.hair; // 'brown' bob['name']; // 'Bob' Bob.banana; // undefined
delete bob.hair; delete bob['name']; // bob → {};
var alice = { name: 'alice', pet: { cat: 'bob',
fish: ['a', 'b'] } }; alice.pet.fish[0] // 'a'
Now, what've we got?
JSON JS Object Notation
lightweight text-based human-readable
var alice = { name: 'alice', pet: { cat: 'bob',
fish: ['a', 'b'] } };
None
Function
var lambda = function () {};
value Function
var a = function () {}, b = 5, c
= function () { // ... };
Invoke using () Function
var five = function () { return 5; }; five;
// undefined five(); // 5
Always return Function
var void = function () { // ... }; var
a = void(); // a → undefined
Higher-order (a.k.a fantastic) Function
var chef = function (recipe, ingr) { return recipe(ingr); };
var pie = function (ingr) { return ingr + ' pie'; }; chef(pie, 'apple'); // 'apple pie'
Mom, I'm passing FUNCTIONS!!
var grandma = function () { return function () {
Return 'lol'; }; }; grandma()(); // 'lol'
Closure Function
var add = function (a, b) { return a +
b; };
var addHalf = function (a) { return function (b) {
return a + b; }; }; var add4 = addHalf(4); add4(5); // 9;
Arguments Function
var addFirstThree = function () { return arguments[0] + arguments[1]
+ arguments[2]; }; Func(1, 2, 3, 2, 3); // 6;
Length Function
var func = function (a, b) { // ... };
func.length; // 2
Control Statements
C-like ; )
Scoping
var a = 2; // a → 2
var a = 2; if () { // a →
2 } // a → 2
if () { var a = 2; // a →
2 } // a → 2
var a = 2; // a → 2
No block scope
Only Functions can make scopes
var func = function () { var a = 2;
} // a → undefined
var func = function () { var a = 2;
} // a → undefined
Local variables Var
var a = 2; // a :: Local (in Global)
a = 2; // a :: Global
var func = function () { var a = 2;
// a :: Local };
var func = function () { a = 2; //
a :: Global };
Global is bad
Never drop your var Always use them
Scope Chains
Function var Closure var Global
var addHalf = function (a) { return function (b) {
return a + b; }; }; var add4 = addHalf(4); add4(5); // 9;
Constructor Function
Function as Constructor
var Cat = function () { this.name = 'Bob'; };
var bob = new Cat; Bob.name; // 'Bob'
What is this ?
var Cat = function () { this; // Cat };
var foo = { name: 'bob', miaou: function () {
this; // foo } };
var Cat = function (name) { this.name = name ||
'Bob'; }; var bob = new Cat, alice = new Cat('Alice'); bob.name; // 'Bob' alice.name; // 'Alice'
var Cat = function () { this.name = 'Bob'; this.miaou
= function () { return this.name }; }; var bob = new Cat; bob.miaou(); // 'Bob'
var Cat = function () { this.name = 'Bob'; };
Cat.prototype.miaou = function () { return this.name }; var bob = new Cat; bob.miaou(); // 'Bob'
An attribute of every object Prototype
mom Prototype
ancenstors Prototype Chain
me mom grandma
Q & A