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
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Design Foundational Data Engineering Observability
sucitw
3
200
🔨 小さなビルドシステムを作る
momeemt
4
690
RDoc meets YARD
okuramasafumi
4
170
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.1k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Into the Great Unknown - MozCon
thekraken
40
2k
Context Engineering - Making Every Token Count
addyosmani
3
60
Balancing Empowerment & Direction
lara
3
620
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Adaptive Systems
keathley
43
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
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