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

1. 咩星征服計劃
用 JS 征服地球

2. 羊小咩 Lamb Mei
Lamb-mei@homakimi.com
lamb@lamb-mei.com
現任 禾米數位創意 Consultant

3. Current Status
• FLASH
• App (Native , Hybrid )
• Web
(Mobile , RWD , Parallax Scrolling)
• Interactive installation

4. Time of use

5. 19:00 – 22:00
圖片來源 mtmorriscommunitychurch

6. Why running this course

7. Why running this course
佛心來的
圖片來源 SANA漫畫網誌

8. Why running this course
事情是這樣的 …
以下內容純屬虛構如有雷同純屬巧合

9. Boss
咩
圖片來源 Ragemaker

10. 小咩，找時間幫
同事 Tarinling
Boss
咩
圖片來源 Ragemaker

11. 小咩，找時間幫
同事 Tarinling
咩
喔
圖片來源 Ragemaker
Boss

12. 湊巧同一天…

13. 我想學JS教我
友(企劃)
咩
圖片來源 Ragemaker

14. 企劃學尛 JS
友(企劃)
咩
圖片來源 Ragemaker

15. 事後…

16. 我也要一起上 JS
友(設計)
咩
圖片來源 Ragemaker
圖片來源 Ragemaker

17. 學好你的去背啦! X
沒看到這張圖有
毛邊嗎?
友(設計)
咩

18. Why running this course
那…
一次怎麼滿足三個願望
圖片來源 Ragemaker

19. Why running this course
建達出奇蛋
圖片來源 http://yashuzuki.pixnet.net/album/photo/87254673

20. Why running this course
摻在一起做成瀨尿牛丸不就好了，笨蛋！
圖片來源 米羅拔的生活實驗室

21. Why running this course
孟子曾說

22. Why running this course
與少樂樂，與眾樂樂，孰樂？

23. Why running this course
與少樂樂，與眾樂樂，孰樂？
不若與眾。

24. Why running this course
看不懂文言文沒關係
啟動翻譯

25. Why running this course
少數人爽和大家一起爽
哪個比較爽？
當然自己爽就好了
當然是大家一起爽
(好像有哪裡怪怪的)

26. Why running this course
所以…

27. 咩星征服計畫
用 JS 征服地球

28. 進入正題

29. 先別管正題了
你聽過安麗嗎？

30. 對不起不鬧了
這次真的進入正題了

31. course goal

32. course goal
• 了解網頁基本觀念

33. course goal
• 了解網頁基本觀念
• 認識程式語言

34. course goal
• 了解網頁基本觀念
• 認識程式語言
• 提高察覺錯誤的方式

35. course goal
•
•
•
•
了解網頁基本觀念
認識程式語言
提高察覺錯誤的方式
增加解決問題的能力

36. course goal
•
•
•
•
•
了解網頁基本觀念
認識程式語言
提高察覺錯誤的方式
增加解決問題的能力
增加程式設計師溝通點

37. course goal
•
•
•
•
•
•
了解網頁基本觀念
認識程式語言
提高察覺錯誤的方式
增加解決問題的能力
增加程式設計師溝通點
提早下班回家 & 升職加薪

38. course content

39. course content
•
•
•
•
瀏覽器運作原理
HTML Javascript CSS
Javascript 基礎
jQuery 基礎

40. 瀏覽器運作原理

41. 瀏覽器運作原理
瀏覽器元件
圖片來源 how browsers work

42. 瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work

43. 瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work

44. 瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work

45. 瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work

46. 瀏覽器運作原理
Main flow
圖片來源 how browsers work

47. HTML Javascript CSS

48. HTML Javascript CSS
網頁若是是一個人

49. HTML Javascript CSS
HTML 就像描述有甚麼器官 手 腳
圖片來源
http://www.wowbox.com.tw/blog/attachments/month_1212/w2012121153552.jpg

50. HTML Javascript CSS
CSS 描述各器官的樣式 顏色 大小 位置
圖片來源
http://www.cpasitesolutions.com/cpa-websites/wp-content/uploads/2013/01/css-code.jpeg

51. HTML Javascript CSS
Javascript 就是在控制器官如何運作
也可修改樣式
圖片來源
http://media.smashingmagazine.com/wp-content/uploads/2010/02/javascript-techniques-25.jpg

52. Javascript 基礎

53. Javascript 基礎
•
•
•
•
圖片來源
變數定義
運算子
Function 定義
陳述式
http://ocpsoft.org/wp-content/uploads/2013/01/javascript_logo_unofficial-300x300.png?b704a8

54. Javascript 基礎 -變數定義
var
定義一個值所使用的關鍵字

55. Javascript 基礎 -變數定義
數值定義
var yearsold = 18
var g = 9.81

56. Javascript 基礎 -變數定義
字串定義
var name = “羊小咩”
Note : JS 是鬆散程式語言，宣告沒有硬性規定一
定要使用 var ，但在 function 會影響變數

57. Javascript 基礎 -變數定義
布林值定義
var isMale = true

58. Javascript 基礎 – 運算子
指定運算子
= += -= *= /= != %=
算數運算子
＋ － ＊ ++ -- %
邏輯運算子
> < >= <=
== != ! && ||

59. Javascript 基礎 - Function 定義
function
定義一個方法使用的關鍵字
當需要重覆使用自定的功能
就會使用 function

60. Javascript 基礎 - Function 定義
function 方法名稱1（）｛
｝
function 方法名稱2（參數）｛
｝
function 方法名稱3（參數1 ,參數2）｛
｝

61. Javascript 基礎 - Function 定義
方法執行
方法名稱1（）
方法名稱2（參數）
方法名稱3（參數1 ,參數2）

62. Javascript 基礎 -陳述式
大部分陳述式為控制流程
判斷式 if...else switch
迴圈 for while

63. Javascript 基礎 -陳述式
判斷式 if...else
if ( 判斷內容 ) ｛
//執行的內容
｝

64. Javascript 基礎 -陳述式
判斷式 if...else
if ( 判斷內容 ) ｛
//為true執行內容
}else{
//為false執行內容
}

65. Javascript 基礎 -陳述式
判斷式 if...else
if ( 判斷內容 ) ｛
//符合條件執行內容
}else if ( 判斷內容 ) ｛
//符合條件執行內容
}else{
//都不符合條件執行
}

66. Javascript 基礎 -陳述式
判斷式 switch
switch ( 值 ) ｛
case “str” :
//符合字串執行
break
}

67. Javascript 基礎 -陳述式
判斷式 switch
switch ( 值 ) ｛
case “str” :
//符合字串執行
break
case 1 :
//符合數值1執行
break
default:
//都不符合執行
break
}

68. Javascript 基礎 -陳述式
迴圈 for
for ( i =0 ; i < 10 ; i++ ) ｛
//重覆執行10次
}

69. Javascript 基礎 -陳述式
迴圈 while
while ( 條件為真 ) ｛
//重覆執行到break為止
}

70. Javascript 基礎 -陳述式
迴圈for while
Note : 迴圈可以用 break 跳出

71. Javascript 基礎
practice

72. jQuery 基礎

73. jQuery 基礎
What is jQuery
圖片來源
http://jquery.com/

74. jQuery 基礎 - What is jQuery
jQuery是一個快速，體積小，功能豐富的
JavaScript Lib。
處理 HTML DOM 遍歷和操作，事件處理，動畫
和Ajax和一個易於使用的API，並簡單處理多種
瀏覽器的問題。
圖片來源
http://jquery.com/

75. jQuery 基礎 - download
版本
1.9.x
有使用到以前套件使用這個版本
１.10.2
在此版本有很多舊方法都被棄用
2.x
不支援 IE 6 7 8
http://jquery.com/download/

76. jQuery 基礎 – 如何運作
$("div").addClass("special");

77. jQuery 基礎 – 如何運作
$("div").addClass("special");
選取的元素

78. jQuery 基礎 – 如何運作
要做的事情
$("div").addClass("special");
選取的元素

79. jQuery 基礎 –選取元素
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>

80. jQuery 基礎 –選取元素
$("div")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取所有DIV

81. jQuery 基礎 –選取元素
$("#body")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
取 id 為 body 的元素

82. jQuery 基礎 –選取元素
$("div#body")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取 id 為 body 的 <div>

83. jQuery 基礎 –選取元素
$(".contents")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取 class 為 contents 的元素

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. jQuery 基礎 –選取元素
$("div > div")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
選取被 <div> 包住的下一層 <div>

86. jQuery 基礎 –選取元素
$("div:has(div)")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
和前一個範例相反
選取至少有包住一個 <div> 的 <div>

87. jQuery 基礎 –選取元素
$("div[id]")
<div id="body">
<h2>Some Header</h2>
<div class="contents">
<p>...</p>
<p>...</p>
</div>
</div>
查找所有含有 id 属性的div元素

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. jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded

90. jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded
當準備好DOM Tree 就會觸發

91. jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded
當準備好DOM Tree 就會觸發
window.onload
所有文件內的元件，包含圖檔等等全部
下載完成後才會觸發

92. jQuery 基礎 – Ready 事件
$(document).ready(function() {
//do something
});

93. jQuery 基礎 – Ready 事件
縮寫
$(function() {
//do something
});

94. jQuery 基礎 –選取元素
practice

95. Thank You!
羊小咩 Lamb Mei
Lamb-mei@homakimi.com
lamb@lamb-mei.com
2013 / 12 / 26