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
8
620
Other Decks in Programming
See All in Programming
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
370
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
15k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
290
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
250
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
650
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Context Engineering - Making Every Token Count
addyosmani
8
300
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
A Tale of Four Properties
chriscoyier
161
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Invisible Side of Design
smashingmag
302
51k
What's in a price? How to price your products and services
michaelherold
246
12k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Docker and Python
trallard
46
3.6k
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