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
AHC041解説
terryu16
0
590
最近のVS Codeで気になるニュース 2025/01
74th
1
250
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
『品質』という言葉が嫌いな理由
korimu
0
160
Immutable ActiveRecord
megane42
0
130
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Optimizing for Happiness
mojombo
376
70k
Become a Pro
speakerdeck
PRO
26
5.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
A Philosophy of Restraint
colly
203
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
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