Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript 從零開始

2,742 views

Published on

讀書分享會簡報

Published in: Technology
  • Be the first to comment

JavaScript 從零開始

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

×