SlideShare a Scribd company logo
1 of 28
JavaScript 從零開始
Adam Hung
magic.music@gmail.com
關於變數 (variable)
 var 變數名 ;
 變數名要用英文開頭 ( 函數名也是 )
 沒打 var 就是全域變數 ( 函數內外皆可用 )
 字串要用’’或””包住
 字串轉數字前面放 +
 數字轉字串後面放””
 JavaScript 以 ; 做為陳述的結尾
註解方式
 // 單行註解方式
 /* 多行註解方式
多行註解方式 */
宣告一個變數
 var nickName = “ 小花” ;
 globalInt = 35+””; // 等同於 globalInt = “35”;
 var num = -10; // 等同於 var num = +”-10”;
 var weight = 123.45;
 var start = true; // 相反就是 start = false;
關於函數 (function)
宣告一個函數
 function ona_fun() { // 這是沒有參數的函數
alert(”Hello”); // 彈出 Hello 文字
}
ona_fun(); // 執行
 var flower_fun = function (word) {
alert(word); // 彈出 Hello 文字
};
flower_fun(‘Hello’); // 執行
var adam_fun = new Function(‘alert(“Hello”)’);
執行一個匿名函式
 (function() {
alert(“Hello”);
})(); // 這樣寫可以馬上執行
 (function() {
alert(“Hello”);
}()); // 也可以這樣寫,一樣馬上執行
函數中的 return
 return 表示結束目前函數,並傳回值 ( 也可傳回函數 )
 舉個例,順便綜合練習
function doWork() {
return function calculate(y) { return y + 1; };
// 以下不管寫任何東西都不會被執行
}
var func = doWork();
var x = func(5);
alert(x); // 會彈出數字 6
變數的作用範圍
<script type=“text/javascript”> // 也可以簡寫成 <script>
var rain = 1; // 定義全域 ( 局 ) 變數 rain
function check(){
var rain = 100; // 定義私域 ( 局部 ) 變數 rain
alert( rain ); // 會彈出數字 100
}
check();
alert( rain ); // 會彈出數字 1
</script>
算數運算子
 + 加
 - 減
 * 乘
 / 除
 % 取餘數 (mod) 例: 5%3 為 2
 ++ 例: x++; 等同 x = x+1;
 -- 例: x--; 等同 x = x-1;
指定運算子
 += 例: x+=2; 等同 x = x+2;
 *= 例: x*=3; 等同 x = x*3;
 /= 例: x/=4; 等同 x = x/4;
 %= 例: x%=5; 等同 x = x%5;
字串運算子
 + 字串相加
 += 字串相加後返回
 舉個例子
var word = "alpha";
word += "bet";
alert(word); // 會彈出 alphabet
邏輯運算子
 && (AND, 交集 ) 兩者皆為 true 才返回 true
true&&true 為 true, false&&false 為 false
true&&false 為 false
 || (OR, 聯集 ) 其一為 true 就返回 true
true||true 為 true, false||false 為 false
true||false 為 true
 !(NOT) 例: !true 為 false 例: !false 為 true
三元運算子
 ? :
 條件 ? 條件成立時做的事 : 條件不成立時做的
事
 舉個例子
var sex = "m";
sex_full = (sex == "m") ? "Male" : "Female";
alert(sex_full); // 彈出 Male
流程控制 if
 If ( 條件 ) {
// 執行內容
}
 流程控制只要執行內容只有一行, {} 可省略
 舉個彈出 Hello 的例子
var i = 1;
If (i===1) alert(“Hello”); //== 寫成 === 執行比較快
流程控制 if … else
 If ( 條件 ) {
// 條件成立時執行的內容
} else {
// 條件不成立時執行的內容
}
 如果執行內容只有一行,效果就跟 ?: 一樣
流程控制 for
 for ( 起始 ; 條件 ; 執行後做什麼 ) {
// 條件成立時執行的內容,直到條件不成立才停止
}
 // 印出 1 到 10 的平方
for (i=1; i<=10; i++) {
alert(i*i);
}
流程控制 while
 while ( 條件 ) {
// 條件成立時執行的內容,直到條件不成立才停止
}
 // 印出 1 到 10 的平方
var i = 1;
while ( i<=10) {
alert(i*i);
i++;
}
流程控制 break
 終止 for 與 while 迴圈時用
 // 從 1 至 10 ,印出平方數小於 50 的所有平方數
var i = 1;
while ( i<=10) {
if(i*i >= 50) {
break;
}
alert(i*i);
i++;
}
流程控制 continue
 終止 for 與 while 迴圈某次執行,檢查如果條件成立,繼續下一次執行
 // 從 1 至 10 ,印出所有奇數的平方數
var i = 1;
while ( i<=10) {
if(i%2===0) {
continue;
}
alert(i*i);
i++;
}
Object( 物件 )
// 如何宣告
var smallflower = new Object();
// 設定屬性與賦值
smallflower.living = true;
smallflower.age = 19;
smallflower.gender = 'male';
smallflower.getGender = function() {return
smallflower.gender;};
// 一次宣告屬性與賦值
var smallflower = {
// 設定屬性與賦值
living:true,
age:19,
gender:'male',
getGender:function() {return
smallflower.gender;
};
// 印出物件
console.log(smallflower);
// 印出物件的所有屬性的值
for (key in smallflower) {
if (smallflower.hasOwnProperty(key)) {
console.log(key);
}
}
// 印出特定屬性的值
console.log(smallflower.gender);
Array( 陣列 )
// 宣告與賦值
var colorArray = ['blue', 'green', 'orange', 'red'];
// 依照索引印出內容
console.log(colorArray[0]); //0 為第一個索引值
// 物件 ( 又稱關聯陣列 )
var colorObject = {
'blue':'blue',
'green':'green',
'orange':'orange',
'red':'red'
};
// 印出某物件的鍵值
console.log(colorObject['blue']);
. 語法和 [''] 存取資料的不
同
 編譯器檢查正確性 (. 語法 )
 可使用運算子 ([""] 語法 )
// 宣告並直接賦值
var colorArray = new Array('blue', 'green',
'orange', 'red');
// 先宣告後賦值
var colorArray(4);
colorArray[0] = 'blue';
colorArray[1] = 'green';
colorArray[2] = 'orange';
colorArray[3] = 'red';
// 常用陣列屬性
length
// 常用陣列操作方法
pop
push
reverse
shift
sort
splice
unshift
contact
join
slice

More Related Content

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

JavaScript 從零開始

  • 2. 關於變數 (variable)  var 變數名 ;  變數名要用英文開頭 ( 函數名也是 )  沒打 var 就是全域變數 ( 函數內外皆可用 )  字串要用’’或””包住  字串轉數字前面放 +  數字轉字串後面放””  JavaScript 以 ; 做為陳述的結尾
  • 3. 註解方式  // 單行註解方式  /* 多行註解方式 多行註解方式 */
  • 4. 宣告一個變數  var nickName = “ 小花” ;  globalInt = 35+””; // 等同於 globalInt = “35”;  var num = -10; // 等同於 var num = +”-10”;  var weight = 123.45;  var start = true; // 相反就是 start = false;
  • 6. 宣告一個函數  function ona_fun() { // 這是沒有參數的函數 alert(”Hello”); // 彈出 Hello 文字 } ona_fun(); // 執行  var flower_fun = function (word) { alert(word); // 彈出 Hello 文字 }; flower_fun(‘Hello’); // 執行 var adam_fun = new Function(‘alert(“Hello”)’);
  • 7. 執行一個匿名函式  (function() { alert(“Hello”); })(); // 這樣寫可以馬上執行  (function() { alert(“Hello”); }()); // 也可以這樣寫,一樣馬上執行
  • 8. 函數中的 return  return 表示結束目前函數,並傳回值 ( 也可傳回函數 )  舉個例,順便綜合練習 function doWork() { return function calculate(y) { return y + 1; }; // 以下不管寫任何東西都不會被執行 } var func = doWork(); var x = func(5); alert(x); // 會彈出數字 6
  • 9. 變數的作用範圍 <script type=“text/javascript”> // 也可以簡寫成 <script> var rain = 1; // 定義全域 ( 局 ) 變數 rain function check(){ var rain = 100; // 定義私域 ( 局部 ) 變數 rain alert( rain ); // 會彈出數字 100 } check(); alert( rain ); // 會彈出數字 1 </script>
  • 10. 算數運算子  + 加  - 減  * 乘  / 除  % 取餘數 (mod) 例: 5%3 為 2  ++ 例: x++; 等同 x = x+1;  -- 例: x--; 等同 x = x-1;
  • 11. 指定運算子  += 例: x+=2; 等同 x = x+2;  *= 例: x*=3; 等同 x = x*3;  /= 例: x/=4; 等同 x = x/4;  %= 例: x%=5; 等同 x = x%5;
  • 12. 字串運算子  + 字串相加  += 字串相加後返回  舉個例子 var word = "alpha"; word += "bet"; alert(word); // 會彈出 alphabet
  • 13. 邏輯運算子  && (AND, 交集 ) 兩者皆為 true 才返回 true true&&true 為 true, false&&false 為 false true&&false 為 false  || (OR, 聯集 ) 其一為 true 就返回 true true||true 為 true, false||false 為 false true||false 為 true  !(NOT) 例: !true 為 false 例: !false 為 true
  • 14. 三元運算子  ? :  條件 ? 條件成立時做的事 : 條件不成立時做的 事  舉個例子 var sex = "m"; sex_full = (sex == "m") ? "Male" : "Female"; alert(sex_full); // 彈出 Male
  • 15. 流程控制 if  If ( 條件 ) { // 執行內容 }  流程控制只要執行內容只有一行, {} 可省略  舉個彈出 Hello 的例子 var i = 1; If (i===1) alert(“Hello”); //== 寫成 === 執行比較快
  • 16. 流程控制 if … else  If ( 條件 ) { // 條件成立時執行的內容 } else { // 條件不成立時執行的內容 }  如果執行內容只有一行,效果就跟 ?: 一樣
  • 17. 流程控制 for  for ( 起始 ; 條件 ; 執行後做什麼 ) { // 條件成立時執行的內容,直到條件不成立才停止 }  // 印出 1 到 10 的平方 for (i=1; i<=10; i++) { alert(i*i); }
  • 18. 流程控制 while  while ( 條件 ) { // 條件成立時執行的內容,直到條件不成立才停止 }  // 印出 1 到 10 的平方 var i = 1; while ( i<=10) { alert(i*i); i++; }
  • 19. 流程控制 break  終止 for 與 while 迴圈時用  // 從 1 至 10 ,印出平方數小於 50 的所有平方數 var i = 1; while ( i<=10) { if(i*i >= 50) { break; } alert(i*i); i++; }
  • 20. 流程控制 continue  終止 for 與 while 迴圈某次執行,檢查如果條件成立,繼續下一次執行  // 從 1 至 10 ,印出所有奇數的平方數 var i = 1; while ( i<=10) { if(i%2===0) { continue; } alert(i*i); i++; }
  • 21. Object( 物件 ) // 如何宣告 var smallflower = new Object(); // 設定屬性與賦值 smallflower.living = true; smallflower.age = 19; smallflower.gender = 'male'; smallflower.getGender = function() {return smallflower.gender;};
  • 22. // 一次宣告屬性與賦值 var smallflower = { // 設定屬性與賦值 living:true, age:19, gender:'male', getGender:function() {return smallflower.gender; };
  • 23. // 印出物件 console.log(smallflower); // 印出物件的所有屬性的值 for (key in smallflower) { if (smallflower.hasOwnProperty(key)) { console.log(key); } } // 印出特定屬性的值 console.log(smallflower.gender);
  • 24. Array( 陣列 ) // 宣告與賦值 var colorArray = ['blue', 'green', 'orange', 'red']; // 依照索引印出內容 console.log(colorArray[0]); //0 為第一個索引值
  • 25. // 物件 ( 又稱關聯陣列 ) var colorObject = { 'blue':'blue', 'green':'green', 'orange':'orange', 'red':'red' }; // 印出某物件的鍵值 console.log(colorObject['blue']);
  • 26. . 語法和 [''] 存取資料的不 同  編譯器檢查正確性 (. 語法 )  可使用運算子 ([""] 語法 )
  • 27. // 宣告並直接賦值 var colorArray = new Array('blue', 'green', 'orange', 'red'); // 先宣告後賦值 var colorArray(4); colorArray[0] = 'blue'; colorArray[1] = 'green'; colorArray[2] = 'orange'; colorArray[3] = 'red';