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
07 - Javascript - OpenWebSchool
Search
openwebschool
August 16, 2012
Programming
3
340
07 - Javascript - OpenWebSchool
openwebschool
August 16, 2012
Tweet
Share
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
350
09 - Node.JS - OpenWebSchool
openwebschool
1
390
08 - js frontend & jQuery - OpenWebSchool
openwebschool
3
280
05 - MySQL - OpenWebSchool
openwebschool
1
250
06 - PHP & MySQL - OpenWebSchool
openwebschool
1
280
03 - PHP II - OpenWebSchool
openwebschool
2
390
04 - CSS - OpenWebSchool
openwebschool
4
360
01 - W3 intro - OpenWebSchool
openwebschool
3
250
02 - PHP I - OpenWebSchool
openwebschool
3
270
Other Decks in Programming
See All in Programming
Go言語はstack overflowの夢を見るか?
logica0419
0
430
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
CSC509 Lecture 06
javiergs
PRO
0
260
EMこそClaude Codeでコード調査しよう
shibayu36
0
150
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
190
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
480
Introduce Hono CLI
yusukebe
6
2.8k
CSC305 Lecture 04
javiergs
PRO
0
270
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
170
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Documentation Writing (for coders)
carmenintech
75
5.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Writing Fast Ruby
sferik
629
62k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Context Engineering - Making Every Token Count
addyosmani
7
260
Docker and Python
trallard
46
3.6k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
GitHub's CSS Performance
jonrohan
1032
470k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
JavaScript
Brendan Eich
“I had to be done in ten days or something
worse than JS would have happened”
Netscape 找他來幫網頁弄個程式語言 1995
Netscape 當時與 Sun 合作 從 LiveScript 更名為 JavaScript 1995
跟 Java 一點關係都沒有
送交 ECMA 國際 標準化成 ECMAScript 1996
直譯式語言 但現在速度已經不輸編譯式語言 :P
環境獨立 語言規範沒有輸入輸出 由執行環境提供
物件導向 原型繼承 不是用 Class 的意思
Lisp in C's Clothing 骨子裡是函數式語言,他爸是 Scheme
變數
var a; // undefined
undefined 未初始化
var a = 4; // 4 a = banana; //
undefined a = 6; // 6
var a = 4; // 4 a = ‘hello’; //
‘hello’
動態型別 擁有型別的是值,不是變數
型別
Array Object Function Number String Boolean
數字
42
64 位元雙精浮點數
運算子都跟 C 的一樣的樣子
Math 野生的物件
Math.sin(0); // 0 Math.round(1.5); // 2 Math.random(); // 0.11533094733022153 Math.PI;
// 3.14159265....
parseInt parseFloat 少數幾個野生的內建函式
parseInt(‘5’, 10); // 5 parseInt(‘hello’, 10); // NaN
NaN Not a Number
字串
‘Hello’ “Hello”
‘hello’ + ‘ world’ // ‘hello world’ ‘hello’ + 42
// ‘hello42’ 42 + ‘hello’ // ‘42hello’
‘hello’.length // 5 ‘hello’.toUpperCase() // ‘HELLO’ ‘hello’.substring(1, 3) // ‘el’
布林
true false
42 == 42 // true 42 != 42 // false
42 == ’42’ // true
Equality Operators 內容相等就好 :P
NaN == NaN // false
Identity Operators 連型別都要相等
42 === 42 // true 42 === ’42’ // false
列表
[42, 5, 23]
[42, true, ‘hello’]
[1, 2, 3, 4].length // 4 [1, 2, 3, 4][0]
// 1 [1, 2, 3, 4][99] // undefined
var a = [1, 2, 3, 4]; a[2] = ‘banana’;
// [1, ‘banana’, 3, 4]
var a = [1, 2, 3, 4]; typeof a; //
‘object’ Array.isArray(a); // true
var a = [1, 5, 2, 4].pop(); // 4 //
a === [1, 5, 2] a.sort(); // [1, 2, 5]
物件
{ name: ‘Bob’ }
{ name: ‘Bob’, age: 4 }
{ name: ‘Bob’, age: 4 }.name; // ‘Bob’ { name:
‘Bob’, age: 4 }[‘name’]; // ‘Bob’ { name: ‘Bob’, age: 4 }.banana; // undefined
var obj = { name: ‘Bob’, age: 4 }; obj.name
= ‘Alice’; // obj === { name: ‘Alice’, age: 4 } obj[‘name’] = ‘Alice’; // obj === { name: ‘Alice’, age: 4 }
var obj = { name: ‘Bob’, age: 4 }; delete
obj.name; // obj === { age: 4 }
var obj = { name: ‘Bob’, age: 4 }; delete
obj.name; // obj === { age: 4 }
Null 沒有東西存在的意思
typeof null; // ‘object’
JSON
JavaScript Object Notaion
目前最流行的資料交換格式之一
Douglas Crockford
{ ‘name’: ‘Bob’, ’age’: 4, ‘pet’: { ‘dog’: [‘Bob’, ‘Cob’],
‘cat’: [‘Dub’] }, ‘dead’: false }
函數
function (a) { return a; }
var f = function () {};
函數是一種值 函數式語言優良血統
var two = function () { return 2; }; two;
// function () { return 2; } two(); // 2
var cakeRecipe = function (ingredient) { return ingredient + ‘
cake’; }; var cookieRecipe = function (ingredient) { return ingredient + ‘ cookie’; }; cookieRecipe(‘chocolate’); // chocolate cookie
var cook = function (recipe, ingredient) { return recipe(ingredient); };
cook(cakeRecipe, ‘chocolate’); // chocolate cake cook(cookieRecipe, ‘chocolate’); // chocolate cookie
cook(function (ingredient) { return ingredient + ‘ icecream’ }, ‘banana’);
// banana icecream
var parser = function (base) { return function (x) {
return parseInt(x, base); }; }; var parseBin = parser(2); parseBin(‘1010’); // 10
var f = function () { return arguments[1]; }; f(2,
3, true, { foo: ‘bar’ }); // 3
流程控制
好像跟 C 一樣呵呵
for (var i = 0; i < 5; i++) {
// 做五次 }
var obj = { name: ‘Bob’, age: 4 }; ‘name’
in obj; // true ‘banana’ in obj; // false
for (var prop in obj) { return obj.prop; } //
‘Bob’, 42
Scope
和 C 不一樣的地方在於
JS 的大括號不會形成 scope 只有函數的才會形成 scope
if (true) { var a = 4; } a; //
4
var f = function () { var a = 4;
}; f(); a; // undefined
列表迭代 A_A
var a = [1, 2, 3]; for (var i =
0, len = a.length; i < len; i++) { a[i]; // 1, 2, 3 ... }
var a = [1, 2, 3]; a.forEach(function (n, i, array)
{ n; // 1, 2, 3; });
var a = [1, 2, 3]; var b = a.map(function
(n) { return n * 2; }); b; // [2, 4, 6]
var b = [1, 2, 3].filter(function (n) { return n
< 3; }); b; // [1, 2]
var add = function (a, b) { return a +
b; }; [1, 2, 3].reduce(add, 0); // 6