咩星征服計劃 用 Js 征服地球

998 views

Published on

咩星征服計劃
用 Js 征服地球

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
998
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

咩星征服計劃 用 Js 征服地球

  1. 1. 咩星征服計劃 用 JS 征服地球
  2. 2. 羊小咩 Lamb Mei Lamb-mei@homakimi.com lamb@lamb-mei.com 現任 禾米數位創意 Consultant
  3. 3. Current Status • FLASH • App (Native , Hybrid ) • Web (Mobile , RWD , Parallax Scrolling) • Interactive installation
  4. 4. Time of use
  5. 5. 19:00 – 22:00 圖片來源 mtmorriscommunitychurch
  6. 6. Why running this course
  7. 7. Why running this course 佛心來的 圖片來源 SANA漫畫網誌
  8. 8. Why running this course 事情是這樣的 … 以下內容純屬虛構如有雷同純屬巧合
  9. 9. Boss 咩 圖片來源 Ragemaker
  10. 10. 小咩,找時間幫 同事 Tarinling Boss 咩 圖片來源 Ragemaker
  11. 11. 小咩,找時間幫 同事 Tarinling 咩 喔 圖片來源 Ragemaker Boss
  12. 12. 湊巧同一天…
  13. 13. 我想學JS教我 友(企劃) 咩 圖片來源 Ragemaker
  14. 14. 企劃學尛 JS 友(企劃) 咩 圖片來源 Ragemaker
  15. 15. 事後…
  16. 16. 我也要一起上 JS 友(設計) 咩 圖片來源 Ragemaker 圖片來源 Ragemaker
  17. 17. 學好你的去背啦! X 沒看到這張圖有 毛邊嗎? 友(設計) 咩
  18. 18. Why running this course 那… 一次怎麼滿足三個願望 圖片來源 Ragemaker
  19. 19. Why running this course 建達出奇蛋 圖片來源 http://yashuzuki.pixnet.net/album/photo/87254673
  20. 20. Why running this course 摻在一起做成瀨尿牛丸不就好了,笨蛋! 圖片來源 米羅拔的生活實驗室
  21. 21. Why running this course 孟子曾說
  22. 22. Why running this course 與少樂樂,與眾樂樂,孰樂?
  23. 23. Why running this course 與少樂樂,與眾樂樂,孰樂? 不若與眾。
  24. 24. Why running this course 看不懂文言文沒關係 啟動翻譯
  25. 25. Why running this course 少數人爽和大家一起爽 哪個比較爽? 當然自己爽就好了 當然是大家一起爽 (好像有哪裡怪怪的)
  26. 26. Why running this course 所以…
  27. 27. 咩星征服計畫 用 JS 征服地球
  28. 28. 進入正題
  29. 29. 先別管正題了 你聽過安麗嗎?
  30. 30. 對不起不鬧了 這次真的進入正題了
  31. 31. course goal
  32. 32. course goal • 了解網頁基本觀念
  33. 33. course goal • 了解網頁基本觀念 • 認識程式語言
  34. 34. course goal • 了解網頁基本觀念 • 認識程式語言 • 提高察覺錯誤的方式
  35. 35. course goal • • • • 了解網頁基本觀念 認識程式語言 提高察覺錯誤的方式 增加解決問題的能力
  36. 36. course goal • • • • • 了解網頁基本觀念 認識程式語言 提高察覺錯誤的方式 增加解決問題的能力 增加程式設計師溝通點
  37. 37. course goal • • • • • • 了解網頁基本觀念 認識程式語言 提高察覺錯誤的方式 增加解決問題的能力 增加程式設計師溝通點 提早下班回家 & 升職加薪
  38. 38. course content
  39. 39. course content • • • • 瀏覽器運作原理 HTML Javascript CSS Javascript 基礎 jQuery 基礎
  40. 40. 瀏覽器運作原理
  41. 41. 瀏覽器運作原理 瀏覽器元件 圖片來源 how browsers work
  42. 42. 瀏覽器運作原理 宣染引擎流程 圖片來源 how browsers work
  43. 43. 瀏覽器運作原理 宣染引擎流程 圖片來源 how browsers work
  44. 44. 瀏覽器運作原理 宣染引擎流程 圖片來源 how browsers work
  45. 45. 瀏覽器運作原理 宣染引擎流程 圖片來源 how browsers work
  46. 46. 瀏覽器運作原理 Main flow 圖片來源 how browsers work
  47. 47. HTML Javascript CSS
  48. 48. HTML Javascript CSS 網頁若是是一個人
  49. 49. HTML Javascript CSS HTML 就像描述有甚麼器官 手 腳 圖片來源 http://www.wowbox.com.tw/blog/attachments/month_1212/w2012121153552.jpg
  50. 50. HTML Javascript CSS CSS 描述各器官的樣式 顏色 大小 位置 圖片來源 http://www.cpasitesolutions.com/cpa-websites/wp-content/uploads/2013/01/css-code.jpeg
  51. 51. HTML Javascript CSS Javascript 就是在控制器官如何運作 也可修改樣式 圖片來源 http://media.smashingmagazine.com/wp-content/uploads/2010/02/javascript-techniques-25.jpg
  52. 52. Javascript 基礎
  53. 53. Javascript 基礎 • • • • 圖片來源 變數定義 運算子 Function 定義 陳述式 http://ocpsoft.org/wp-content/uploads/2013/01/javascript_logo_unofficial-300x300.png?b704a8
  54. 54. Javascript 基礎 -變數定義 var 定義一個值所使用的關鍵字
  55. 55. Javascript 基礎 -變數定義 數值定義 var yearsold = 18 var g = 9.81
  56. 56. Javascript 基礎 -變數定義 字串定義 var name = “羊小咩” Note : JS 是鬆散程式語言,宣告沒有硬性規定一 定要使用 var ,但在 function 會影響變數
  57. 57. Javascript 基礎 -變數定義 布林值定義 var isMale = true
  58. 58. Javascript 基礎 – 運算子 指定運算子 = += -= *= /= != %= 算數運算子 + - * ++ -- % 邏輯運算子 > < >= <= == != ! && ||
  59. 59. Javascript 基礎 - Function 定義 function 定義一個方法使用的關鍵字 當需要重覆使用自定的功能 就會使用 function
  60. 60. Javascript 基礎 - Function 定義 function 方法名稱1(){ } function 方法名稱2(參數){ } function 方法名稱3(參數1 ,參數2){ }
  61. 61. Javascript 基礎 - Function 定義 方法執行 方法名稱1() 方法名稱2(參數) 方法名稱3(參數1 ,參數2)
  62. 62. Javascript 基礎 -陳述式 大部分陳述式為控制流程 判斷式 if...else switch 迴圈 for while
  63. 63. Javascript 基礎 -陳述式 判斷式 if...else if ( 判斷內容 ) { //執行的內容 }
  64. 64. Javascript 基礎 -陳述式 判斷式 if...else if ( 判斷內容 ) { //為true執行內容 }else{ //為false執行內容 }
  65. 65. Javascript 基礎 -陳述式 判斷式 if...else if ( 判斷內容 ) { //符合條件執行內容 }else if ( 判斷內容 ) { //符合條件執行內容 }else{ //都不符合條件執行 }
  66. 66. Javascript 基礎 -陳述式 判斷式 switch switch ( 值 ) { case “str” : //符合字串執行 break }
  67. 67. Javascript 基礎 -陳述式 判斷式 switch switch ( 值 ) { case “str” : //符合字串執行 break case 1 : //符合數值1執行 break default: //都不符合執行 break }
  68. 68. Javascript 基礎 -陳述式 迴圈 for for ( i =0 ; i < 10 ; i++ ) { //重覆執行10次 }
  69. 69. Javascript 基礎 -陳述式 迴圈 while while ( 條件為真 ) { //重覆執行到break為止 }
  70. 70. Javascript 基礎 -陳述式 迴圈for while Note : 迴圈可以用 break 跳出
  71. 71. Javascript 基礎 practice
  72. 72. jQuery 基礎
  73. 73. jQuery 基礎 What is jQuery 圖片來源 http://jquery.com/
  74. 74. jQuery 基礎 - What is jQuery jQuery是一個快速,體積小,功能豐富的 JavaScript Lib。 處理 HTML DOM 遍歷和操作,事件處理,動畫 和Ajax和一個易於使用的API,並簡單處理多種 瀏覽器的問題。 圖片來源 http://jquery.com/
  75. 75. jQuery 基礎 - download 版本 1.9.x 有使用到以前套件使用這個版本 1.10.2 在此版本有很多舊方法都被棄用 2.x 不支援 IE 6 7 8 http://jquery.com/download/
  76. 76. jQuery 基礎 – 如何運作 $("div").addClass("special");
  77. 77. jQuery 基礎 – 如何運作 $("div").addClass("special"); 選取的元素
  78. 78. jQuery 基礎 – 如何運作 要做的事情 $("div").addClass("special"); 選取的元素
  79. 79. jQuery 基礎 –選取元素 <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
  80. 80. jQuery 基礎 –選取元素 $("div") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取所有DIV
  81. 81. jQuery 基礎 –選取元素 $("#body") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 取 id 為 body 的元素
  82. 82. jQuery 基礎 –選取元素 $("div#body") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取 id 為 body 的 <div>
  83. 83. jQuery 基礎 –選取元素 $(".contents") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取 class 為 contents 的元素
  84. 84. jQuery 基礎 –選取元素 $("div.contents p") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取 class 為 contents 的 <div> 所包住的所有下層的 <p>
  85. 85. jQuery 基礎 –選取元素 $("div > div") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取被 <div> 包住的下一層 <div>
  86. 86. jQuery 基礎 –選取元素 $("div:has(div)") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 和前一個範例相反 選取至少有包住一個 <div> 的 <div>
  87. 87. jQuery 基礎 –選取元素 $("div[id]") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 查找所有含有 id 属性的div元素
  88. 88. jQuery 基礎 –選取元素 $("div[class='contents']") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 查找屬性 class 為contents 的 div 元素。
  89. 89. jQuery 基礎 – Ready 事件 jQuery Ready 是 DOMContentLoaded
  90. 90. jQuery 基礎 – Ready 事件 jQuery Ready 是 DOMContentLoaded DOMContentLoaded 當準備好DOM Tree 就會觸發
  91. 91. jQuery 基礎 – Ready 事件 jQuery Ready 是 DOMContentLoaded DOMContentLoaded 當準備好DOM Tree 就會觸發 window.onload 所有文件內的元件,包含圖檔等等全部 下載完成後才會觸發
  92. 92. jQuery 基礎 – Ready 事件 $(document).ready(function() { //do something });
  93. 93. jQuery 基礎 – Ready 事件 縮寫 $(function() { //do something });
  94. 94. jQuery 基礎 –選取元素 practice
  95. 95. Thank You! 羊小咩 Lamb Mei Lamb-mei@homakimi.com lamb@lamb-mei.com 2013 / 12 / 26

×