SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
Javascript
2015/04/24
李佳駿
Selector
JavaScript
◦ document.getElementById('demo').innerHTML
Jquery
$( "#test" )
$( “.test" )
$( ":button" )
….
Match()
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/g);
->ain,ain,ain
/g 取得所有比對符合的
var res = str.match(/ain/gi);
->ain,AIN,ain,ain
/g取得所有比對符合的 /i不區分大小寫
Object/function
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function(c) {
return this.firstName + " " + this.lastName;
}
};
Extracting String Parts
There are 3 methods for extracting a part of a string:
var str = "Apple, Banana, Kiwi";
slice(start, end)
◦ str.slice(-12,-6) -> Banana
◦ str.slice(7) -> Banana, Kiwi
substring(start, end)
substr(start, length)
Split()
var str = "a,b,c,d,e,f";
var arr = str.split(",");
->arr[0] = a
var str = “Hello";
var arr = str.split("");
->arr[0] = H
Javascript Numbers
function myFunction() {
var x = 0.2 + 0.1;
document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;
}
</script>
->0.2 + 0.1 = 0.30000000000000004
var x = 999999999999999; // x will be 999999999999999
var y = 9999999999999999; // y will be 10000000000000000
JavaScript Infinity
<script>
function myFunction() {
var x = 2/0;
var y = -2/0;
document.getElementById("demo").innerHTML = x + "<br>" + y;
}
</script>
->Infinity
->-Infinity
If(x == Infinity){}
Array delete
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction() {
delete fruits[0];
document.getElementById("demo").innerHTML = fruits[0];
}
Array splice
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, ["Lemon", "Kiwi"]);
-> Banana,Orange,Lemon,Kiwi,Apple,Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1, 2);
-> Banana, Orange
Comparison Operators
== equal to
=== equal value and equal type
var x = 500;
var y = new Number(500);
// (x == y) is true because x and y have equal values
// (x === y) is false because x and y have different types
ECMAScript
do-while
while
for
for-in
ECMAScript 6 - let
類似於var,但是所聲明的變量,只在let命令所在的代碼區域有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b //1
ECMAScript 6 - let
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
如果使用var定義變量n,最後輸出的值就是10。
ECMAScript 6 - let
塊級作用域的出現,實際上使得獲得廣泛應用的立即執行函數(IIFE)不再必要了。
IIFE:Javascript的立即函式
(Immediately Invoked Function Expression):
ECMAScript 6 - let
// IIFE寫法
(function () {
var tmp = ...;
}());
// 塊級作用域寫法
{
let tmp = ...;
...
}
ECMAScript 6 - Set
成員的值都是唯一的,沒有重複的值。
var s = new Set();
[2,3,5,4,5,2,2].map(x => s.add(x));
for (i of s) {console.log(i)}
// 2 3 4 5
ECMAScript 6 - Set
size:返回成員總數。
add(value):添加某個值。
delete(value):刪除某個值。
has(value):返回一個bool,表示該值是否為set的成員。
clear():清除所有成員。
ECMAScript 6 - Map
一個 { key:value } 的集合
var m = new Map();
o = {p: "Hello World"};
m.set(o, "content")
console.log(m.get(o))
// "content"
ECMAScript 6 - Map
size:返回成員總數。
set(key, value):設置一個 key:value 。
get(key):讀取一個key。
has(key):返回一個bool,表示某個鍵是否在Map數據結構中。
delete(key):刪除某個key。
clear():清除所有成員。
ECMAScript 6 - Map
var m = new Map();
m.set(262, "standard") // 鍵是數值
m.set(undefined, "nah") // 鍵是undefined
m.has("years") // false
m.has(undefined) // true
m.has(262) // true
m.delete(undefined)
m.has(undefined) // false
m.get(hello) // Hello ES6!
ECMAScript 6 - rest(...)
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
ECMAScript 6 - rest(...)
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log(item);
});
}
var a = [];
push(a, "a1", "a2", "a3", "a4");
ECMAScript 6 - rest(...)
function f(s1, s2, s3, s4, s5) {
console.log(s1 + s2 + s3 + s4 +s5);
}
var a = ["a2", "a3", "a4", "a5"];
f("a1", ...a)
// a1a2a3a4a5
ECMAScript 6 – 擴充
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Weitere ähnliche Inhalte

Was ist angesagt?

数式を構文解析した話
数式を構文解析した話数式を構文解析した話
数式を構文解析した話y1r96 Ueno
 
Para la suma y la multiplicacion de 2
Para la suma y la multiplicacion de 2Para la suma y la multiplicacion de 2
Para la suma y la multiplicacion de 2fabiorodriguez123
 
Javascrpt arale
Javascrpt araleJavascrpt arale
Javascrpt araleAlipay
 
珠三角技术沙龙新语言场 C++11
珠三角技术沙龙新语言场 C++11珠三角技术沙龙新语言场 C++11
珠三角技术沙龙新语言场 C++11翀 周
 
โปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐานโปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐานknangsmiley
 
Тененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговлеТененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговлеPlatonov Sergey
 
The Flavor of TypeScript
The Flavor of TypeScriptThe Flavor of TypeScript
The Flavor of TypeScriptDmitry Sheiko
 
Rafael torrest
Rafael torrestRafael torrest
Rafael torrestrfltorres
 
Collection pipeline par Mathieu Godart
Collection pipeline par  Mathieu GodartCollection pipeline par  Mathieu Godart
Collection pipeline par Mathieu GodartCocoaHeads France
 
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習BAtsushi Tadokoro
 
Алексей Кутумов, C++ без исключений, часть 3
Алексей Кутумов,  C++ без исключений, часть 3Алексей Кутумов,  C++ без исключений, часть 3
Алексей Кутумов, C++ без исключений, часть 3Platonov Sergey
 

Was ist angesagt? (18)

数式を構文解析した話
数式を構文解析した話数式を構文解析した話
数式を構文解析した話
 
Para la suma y la multiplicacion de 2
Para la suma y la multiplicacion de 2Para la suma y la multiplicacion de 2
Para la suma y la multiplicacion de 2
 
Passato
PassatoPassato
Passato
 
Javascrpt arale
Javascrpt araleJavascrpt arale
Javascrpt arale
 
Mainfinal
MainfinalMainfinal
Mainfinal
 
珠三角技术沙龙新语言场 C++11
珠三角技术沙龙新语言场 C++11珠三角技术沙龙新语言场 C++11
珠三角技术沙龙新语言场 C++11
 
Convert bilangan
Convert bilanganConvert bilangan
Convert bilangan
 
Fila em C
Fila em CFila em C
Fila em C
 
โปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐานโปรแกรมย่อยและฟังก์ชันมาตรฐาน
โปรแกรมย่อยและฟังก์ชันมาตรฐาน
 
Тененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговлеТененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговле
 
The Flavor of TypeScript
The Flavor of TypeScriptThe Flavor of TypeScript
The Flavor of TypeScript
 
Gauss jordan
Gauss jordanGauss jordan
Gauss jordan
 
Rafael torrest
Rafael torrestRafael torrest
Rafael torrest
 
Collection pipeline par Mathieu Godart
Collection pipeline par  Mathieu GodartCollection pipeline par  Mathieu Godart
Collection pipeline par Mathieu Godart
 
latihan SAP
latihan SAPlatihan SAP
latihan SAP
 
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
 
Алексей Кутумов, C++ без исключений, часть 3
Алексей Кутумов,  C++ без исключений, часть 3Алексей Кутумов,  C++ без исключений, часть 3
Алексей Кутумов, C++ без исключений, часть 3
 
Triangle
TriangleTriangle
Triangle
 

Andere mochten auch

Creating Sentiment Line Chart with Watson
Creating Sentiment Line Chart with Watson Creating Sentiment Line Chart with Watson
Creating Sentiment Line Chart with Watson Dev_Events
 
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespaceLearningTech
 
Data visualization with d3 may19
Data visualization with d3 may19Data visualization with d3 may19
Data visualization with d3 may19Michael Posso
 

Andere mochten auch (6)

Data to d3
Data to d3Data to d3
Data to d3
 
Creating Sentiment Line Chart with Watson
Creating Sentiment Line Chart with Watson Creating Sentiment Line Chart with Watson
Creating Sentiment Line Chart with Watson
 
Absolute layout
Absolute layoutAbsolute layout
Absolute layout
 
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace
 
The D3 Toolbox
The D3 ToolboxThe D3 Toolbox
The D3 Toolbox
 
Data visualization with d3 may19
Data visualization with d3 may19Data visualization with d3 may19
Data visualization with d3 may19
 

Mehr von LearningTech

Mehr von LearningTech (20)

vim
vimvim
vim
 
PostCss
PostCssPostCss
PostCss
 
ReactJs
ReactJsReactJs
ReactJs
 
Docker
DockerDocker
Docker
 
Semantic ui
Semantic uiSemantic ui
Semantic ui
 
node.js errors
node.js errorsnode.js errors
node.js errors
 
Process control nodejs
Process control nodejsProcess control nodejs
Process control nodejs
 
Expression tree
Expression treeExpression tree
Expression tree
 
SQL 效能調校
SQL 效能調校SQL 效能調校
SQL 效能調校
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504
 
Reflection &amp; activator
Reflection &amp; activatorReflection &amp; activator
Reflection &amp; activator
 
Peggy markdown
Peggy markdownPeggy markdown
Peggy markdown
 
Node child process
Node child processNode child process
Node child process
 
20160415ken.lee
20160415ken.lee20160415ken.lee
20160415ken.lee
 
Peggy elasticsearch應用
Peggy elasticsearch應用Peggy elasticsearch應用
Peggy elasticsearch應用
 
Expression tree
Expression treeExpression tree
Expression tree
 
Vic weekly learning_20160325
Vic weekly learning_20160325Vic weekly learning_20160325
Vic weekly learning_20160325
 
D3js learning tips
D3js learning tipsD3js learning tips
D3js learning tips
 
git command
git commandgit command
git command
 

JavaScript

  • 3. Match() var str = "The rain in SPAIN stays mainly in the plain"; var res = str.match(/ain/g); ->ain,ain,ain /g 取得所有比對符合的 var res = str.match(/ain/gi); ->ain,AIN,ain,ain /g取得所有比對符合的 /i不區分大小寫
  • 4. Object/function var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function(c) { return this.firstName + " " + this.lastName; } };
  • 5. Extracting String Parts There are 3 methods for extracting a part of a string: var str = "Apple, Banana, Kiwi"; slice(start, end) ◦ str.slice(-12,-6) -> Banana ◦ str.slice(7) -> Banana, Kiwi substring(start, end) substr(start, length)
  • 6. Split() var str = "a,b,c,d,e,f"; var arr = str.split(","); ->arr[0] = a var str = “Hello"; var arr = str.split(""); ->arr[0] = H
  • 7. Javascript Numbers function myFunction() { var x = 0.2 + 0.1; document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x; } </script> ->0.2 + 0.1 = 0.30000000000000004 var x = 999999999999999; // x will be 999999999999999 var y = 9999999999999999; // y will be 10000000000000000
  • 8. JavaScript Infinity <script> function myFunction() { var x = 2/0; var y = -2/0; document.getElementById("demo").innerHTML = x + "<br>" + y; } </script> ->Infinity ->-Infinity If(x == Infinity){}
  • 9. Array delete var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction() { delete fruits[0]; document.getElementById("demo").innerHTML = fruits[0]; }
  • 10. Array splice var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 2, ["Lemon", "Kiwi"]); -> Banana,Orange,Lemon,Kiwi,Apple,Mango var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(1, 2); -> Banana, Orange
  • 11. Comparison Operators == equal to === equal value and equal type var x = 500; var y = new Number(500); // (x == y) is true because x and y have equal values // (x === y) is false because x and y have different types
  • 13. ECMAScript 6 - let 類似於var,但是所聲明的變量,只在let命令所在的代碼區域有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b //1
  • 14. ECMAScript 6 - let function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5 } 如果使用var定義變量n,最後輸出的值就是10。
  • 15. ECMAScript 6 - let 塊級作用域的出現,實際上使得獲得廣泛應用的立即執行函數(IIFE)不再必要了。 IIFE:Javascript的立即函式 (Immediately Invoked Function Expression):
  • 16. ECMAScript 6 - let // IIFE寫法 (function () { var tmp = ...; }()); // 塊級作用域寫法 { let tmp = ...; ... }
  • 17. ECMAScript 6 - Set 成員的值都是唯一的,沒有重複的值。 var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)); for (i of s) {console.log(i)} // 2 3 4 5
  • 18. ECMAScript 6 - Set size:返回成員總數。 add(value):添加某個值。 delete(value):刪除某個值。 has(value):返回一個bool,表示該值是否為set的成員。 clear():清除所有成員。
  • 19. ECMAScript 6 - Map 一個 { key:value } 的集合 var m = new Map(); o = {p: "Hello World"}; m.set(o, "content") console.log(m.get(o)) // "content"
  • 20. ECMAScript 6 - Map size:返回成員總數。 set(key, value):設置一個 key:value 。 get(key):讀取一個key。 has(key):返回一個bool,表示某個鍵是否在Map數據結構中。 delete(key):刪除某個key。 clear():清除所有成員。
  • 21. ECMAScript 6 - Map var m = new Map(); m.set(262, "standard") // 鍵是數值 m.set(undefined, "nah") // 鍵是undefined m.has("years") // false m.has(undefined) // true m.has(262) // true m.delete(undefined) m.has(undefined) // false m.get(hello) // Hello ES6!
  • 22. ECMAScript 6 - rest(...) function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
  • 23. ECMAScript 6 - rest(...) function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log(item); }); } var a = []; push(a, "a1", "a2", "a3", "a4");
  • 24. ECMAScript 6 - rest(...) function f(s1, s2, s3, s4, s5) { console.log(s1 + s2 + s3 + s4 +s5); } var a = ["a2", "a3", "a4", "a5"]; f("a1", ...a) // a1a2a3a4a5
  • 25. ECMAScript 6 – 擴充 Number.isInteger(Infinity) // false Number.isNaN("NaN") // false Math.acosh(3) // 1.762747174039086 Math.hypot(3, 4) // 5 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2 "abcde".contains("cd") // true "abc".repeat(3) // "abcabcabc"