Enviar búsqueda
Cargar
咩星征服計劃 用 Js 征服地球
•
Descargar como PPTX, PDF
•
3 recomendaciones
•
1,185 vistas
羊 小咩 (lamb-mei)
Seguir
咩星征服計劃 用 Js 征服地球
Leer menos
Leer más
Tecnología
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 95
Descargar ahora
Recomendados
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
JS单元测试之路
JS单元测试之路
Jeaf Wang
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
重新認識Facebook
重新認識Facebook
羊 小咩 (lamb-mei)
那些年,我們一起做的 App
那些年,我們一起做的 App
羊 小咩 (lamb-mei)
咩星征服計劃 用 Js 征服地球 Part III
咩星征服計劃 用 Js 征服地球 Part III
羊 小咩 (lamb-mei)
咩星征服計劃 用 Js 征服地球Part VI
咩星征服計劃 用 Js 征服地球Part VI
羊 小咩 (lamb-mei)
Git由超淺入超深
Git由超淺入超深
羊 小咩 (lamb-mei)
Recomendados
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
JS单元测试之路
JS单元测试之路
Jeaf Wang
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
重新認識Facebook
重新認識Facebook
羊 小咩 (lamb-mei)
那些年,我們一起做的 App
那些年,我們一起做的 App
羊 小咩 (lamb-mei)
咩星征服計劃 用 Js 征服地球 Part III
咩星征服計劃 用 Js 征服地球 Part III
羊 小咩 (lamb-mei)
咩星征服計劃 用 Js 征服地球Part VI
咩星征服計劃 用 Js 征服地球Part VI
羊 小咩 (lamb-mei)
Git由超淺入超深
Git由超淺入超深
羊 小咩 (lamb-mei)
使用openCV做影像辨識 @ iplayground
使用openCV做影像辨識 @ iplayground
羊 小咩 (lamb-mei)
資訊安全從連線加密開始 workshop 2020/01
資訊安全從連線加密開始 workshop 2020/01
羊 小咩 (lamb-mei)
你的APP安全嗎
你的APP安全嗎
羊 小咩 (lamb-mei)
非對稱加密-以橢圓曲線密碼學ECC為例
非對稱加密-以橢圓曲線密碼學ECC為例
羊 小咩 (lamb-mei)
致,第三者 - 從中間人攻擊看Network Debug
致,第三者 - 從中間人攻擊看Network Debug
羊 小咩 (lamb-mei)
咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II
羊 小咩 (lamb-mei)
主管不會教、自己學不會的 Google analytics
主管不會教、自己學不會的 Google analytics
羊 小咩 (lamb-mei)
Más contenido relacionado
Más de 羊 小咩 (lamb-mei)
使用openCV做影像辨識 @ iplayground
使用openCV做影像辨識 @ iplayground
羊 小咩 (lamb-mei)
資訊安全從連線加密開始 workshop 2020/01
資訊安全從連線加密開始 workshop 2020/01
羊 小咩 (lamb-mei)
你的APP安全嗎
你的APP安全嗎
羊 小咩 (lamb-mei)
非對稱加密-以橢圓曲線密碼學ECC為例
非對稱加密-以橢圓曲線密碼學ECC為例
羊 小咩 (lamb-mei)
致,第三者 - 從中間人攻擊看Network Debug
致,第三者 - 從中間人攻擊看Network Debug
羊 小咩 (lamb-mei)
咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II
羊 小咩 (lamb-mei)
主管不會教、自己學不會的 Google analytics
主管不會教、自己學不會的 Google analytics
羊 小咩 (lamb-mei)
Más de 羊 小咩 (lamb-mei)
(7)
使用openCV做影像辨識 @ iplayground
使用openCV做影像辨識 @ iplayground
資訊安全從連線加密開始 workshop 2020/01
資訊安全從連線加密開始 workshop 2020/01
你的APP安全嗎
你的APP安全嗎
非對稱加密-以橢圓曲線密碼學ECC為例
非對稱加密-以橢圓曲線密碼學ECC為例
致,第三者 - 從中間人攻擊看Network Debug
致,第三者 - 從中間人攻擊看Network Debug
咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II
主管不會教、自己學不會的 Google analytics
主管不會教、自己學不會的 Google analytics
咩星征服計劃 用 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 有使用到以前套件使用這個版本 1.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
Descargar ahora