咩星征服計劃 用 js 征服地球
Post on 09-May-2015
686 Views
Preview:
DESCRIPTION
TRANSCRIPT
咩星征服計劃
用 JS 征服地球
羊小咩 Lamb MeiLamb-mei@homakimi.comlamb@lamb-mei.com
現任 禾米數位創意 Consultant
Current Status
• FLASH• App (Native , Hybrid )• Web
(Mobile , RWD , Parallax Scrolling)• Interactive installation
Time of use
Why running this course
佛心來的
圖片來源 SANA漫畫網誌
Why running this course
事情是這樣的 …
以下內容純屬虛構如有雷同純屬巧合
Why running this course
湊巧同一天…
事後…
咩
學好你的去背啦 ! X
沒看到這張圖有毛邊嗎 ?
友 ( 設計 )
建達出奇蛋
Why running this course
圖片來源 http://yashuzuki.pixnet.net/album/photo/87254673
摻在一起做成瀨尿牛丸不就好了，笨蛋！
Why running this course
圖片來源 米羅拔的生活實驗室
孟子曾說
Why running this course
與少樂樂，與眾樂樂，孰樂？
Why running this course
與少樂樂，與眾樂樂，孰樂？
不若與眾。
Why running this course
看不懂文言文沒關係啟動翻譯
Why running this course
少數人爽和大家一起爽哪個比較爽？
當然是大家一起爽( 好像有哪裡怪怪的 )
Why running this course
當然自己爽就好了
所以…
Why running this course
咩星征服計畫用 JS 征服地球
進入正題
先別管正題了你聽過安麗嗎？
對不起不鬧了這次真的進入正題了
course goal
• 了解網頁基本觀念
course goal
• 了解網頁基本觀念• 認識程式語言
course goal
• 了解網頁基本觀念• 認識程式語言• 提高察覺錯誤的方式
course goal
• 了解網頁基本觀念• 認識程式語言• 提高察覺錯誤的方式• 增加解決問題的能力
course goal
• 了解網頁基本觀念• 認識程式語言• 提高察覺錯誤的方式• 增加解決問題的能力• 增加程式設計師溝通點
course goal
• 了解網頁基本觀念• 認識程式語言• 提高察覺錯誤的方式• 增加解決問題的能力• 增加程式設計師溝通點• 提早下班回家 & 升職加薪
course goal
course content
course content
• 瀏覽器運作原理• HTML Javascript CSS• Javascript 基礎• jQuery 基礎
瀏覽器運作原理
瀏覽器運作原理
瀏覽器元件
圖片來源 how browsers work
瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work
瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work
瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work
瀏覽器運作原理
宣染引擎流程
圖片來源 how browsers work
瀏覽器運作原理
Main flow
圖片來源 how browsers work
HTML Javascript CSS
HTML Javascript CSS
網頁若是是一個人
HTML Javascript CSS
HTML 就像描述有甚麼器官 手 腳
圖片來源 http://www.wowbox.com.tw/blog/attachments/month_1212/w2012121153552.jpg
HTML Javascript CSS
CSS 描述各器官的樣式 顏色 大小 位置
圖片來源 http://www.cpasitesolutions.com/cpa-websites/wp-content/uploads/2013/01/css-code.jpeg
HTML Javascript CSS
Javascript 就是在控制器官如何運作也可修改樣式
圖片來源 http://media.smashingmagazine.com/wp-content/uploads/2010/02/javascript-techniques-25.jpg
Javascript 基礎
Javascript 基礎
• 變數定義• 運算子• Function 定義• 陳述式
圖片來源 http://ocpsoft.org/wp-content/uploads/2013/01/javascript_logo_unofficial-300x300.png?b704a8
Javascript 基礎 - 變數定義
var 定義一個值所使用的關鍵字
Javascript 基礎 - 變數定義
數值定義
var yearsold = 18
var g = 9.81
Javascript 基礎 - 變數定義
字串定義
var name = “ 羊小咩”
Note : JS 是鬆散程式語言，宣告沒有硬性規定一定要使用 var ，但在 function 會影響變數
Javascript 基礎 - 變數定義
布林值定義
var isMale = true
Javascript 基礎 – 運算子
指定運算子 = += -= *= /= != %=算數運算子 ＋ － ＊ \ ++ -- %邏輯運算子> < >= <= == != ! && ||
Javascript 基礎 - Function 定義
function 定義一個方法使用的關鍵字
當需要重覆使用自定的功能就會使用 function
Javascript 基礎 - Function 定義
function 方法名稱 1（）｛ ｝
function 方法名稱 2（參數）｛
｝
function 方法名稱 3（參數 1 ,參數 2）｛
｝
Javascript 基礎 - Function 定義
方法名稱 1（）方法名稱 2（參數）方法名稱 3（參數 1 ,參數 2）
方法執行
Javascript 基礎 - 陳述式
大部分陳述式為控制流程
判斷式 if...else switch
迴圈 for while
Javascript 基礎 - 陳述式
判斷式 if...else
if ( 判斷內容 ) ｛ //執行的內容｝
Javascript 基礎 - 陳述式
判斷式 if...else
if ( 判斷內容 ) ｛ //為 true執行內容}else{ //為 false執行內容}
Javascript 基礎 - 陳述式
判斷式 if...else
if ( 判斷內容 ) ｛ //符合條件執行內容}else if ( 判斷內容 ) ｛ //符合條件執行內容}else{
//都不符合條件執行}
Javascript 基礎 - 陳述式
判斷式 switch
switch ( 值 ) ｛case “str” :
// 符合字串執行break
}
Javascript 基礎 - 陳述式
判斷式 switchswitch ( 值 ) ｛
case “str” : // 符合字串執行break
case 1 : // 符合數值 1 執行break
default:// 都不符合執行break
}
Javascript 基礎 - 陳述式
迴圈 for
for ( i =0 ; i < 10 ; i++ ) ｛
// 重覆執行 10 次
}
Javascript 基礎 - 陳述式
迴圈 while
while ( 條件為真 ) ｛
// 重覆執行到 break 為止
}
Javascript 基礎 - 陳述式
迴圈 for while
Note : 迴圈可以用 break 跳出
Javascript 基礎
practice
jQuery 基礎
jQuery 基礎 - What is jQuery
圖片來源 http://jquery.com/
jQuery 是一個快速，體積小，功能豐富的JavaScript Lib 。
處理 HTML DOM 遍歷和操作，事件處理，動畫和 Ajax 和一個易於使用的 API ，並簡單處理多種瀏覽器的問題。
jQuery 基礎 - download
http://jquery.com/download/
版本
1.9.x有使用到以前套件使用這個版本１ .10.2在此版本有很多舊方法都被棄用2.x不支援 IE 6 7 8
jQuery 基礎 – 如何運作
$("div").addClass("special");
jQuery 基礎 – 如何運作
$("div").addClass("special");
選取的元素
jQuery 基礎 – 如何運作
$("div").addClass("special");
選取的元素
要做的事情
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div")
選取所有 DIV
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("#body")
取 id 為 body 的元素
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div#body")
選取 id 為 body 的 <div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$(".contents")
選取 class 為 contents 的元素
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div.contents p")
選取 class 為 contents 的 <div> 所包住的所有下層的 <p>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div > div")
選取被 <div> 包住的下一層 <div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div:has(div)")
和前一個範例相反 選取至少有包住一個 <div> 的 <div>
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div[id]")
查找所有含有 id 属性的 div 元素
jQuery 基礎 –選取元素
<div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
$("div[class='contents']")
查找屬性 class 為 contents 的 div 元素。
jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded 當準備好 DOM Tree 就會觸發
jQuery 基礎 – Ready 事件
jQuery Ready 是 DOMContentLoaded
DOMContentLoaded 當準備好 DOM Tree 就會觸發
window.onload所有文件內的元件，包含圖檔等等全部下載完成後才會觸發
jQuery 基礎 – Ready 事件
$(document).ready(function() {
//do something});
jQuery 基礎 – Ready 事件
$(function() {//do something
});
縮寫
practice
jQuery 基礎 –選取元素
羊小咩 Lamb MeiLamb-mei@homakimi.comlamb@lamb-mei.com
2013 / 12 / 26
Thank You!
top related