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
340
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
270
03 - PHP II - OpenWebSchool
openwebschool
2
390
04 - CSS - OpenWebSchool
openwebschool
4
360
01 - W3 intro - OpenWebSchool
openwebschool
3
240
02 - PHP I - OpenWebSchool
openwebschool
3
270
Other Decks in Programming
See All in Programming
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
190
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
9
3.4k
ARA Ansible for the teams
kksat
0
150
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
490
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Ruby on cygwin 2025-02
fd0
0
140
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
120
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
410
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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