3. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
LICENSE NOTICE
This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
You are free:
• to Share — to copy, distribute and transmit the work
• to make commercial use of the work
Under the following conditions:
• Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any
way that suggests that they endorse you or your use of the work).
• No Derivative Works — You may not alter, transform, or build upon this work.
With the understanding that:
• Waiver — Any of the above conditions can be waived if you get permission from the copyright holder.
• Public Domain — Where the work or any of its elements is in the public domain under applicable law, that
status is in no way affected by the license.
• Other Rights — In no way are any of the following rights affected by the license:
◦ Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations;
◦ The author's moral rights;
◦ Rights other persons may have either in the work itself or in how the work is used, such as publicity or
privacy rights.
• Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The
best way to do this is with a link to this web page.
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
3
4. 使用 JavaScript 製作動畫:
使用 GreenSock
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
4
11. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 TweenLite
<!--- The following scripts are necessary to do TweenLite tweens on CSS properties -->
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
11
12. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
第⼀一個 GSAP 程式 (TweenLite)
logo 元素將以 1 秒的時間,擁有⼀一個 CSS property {left:632px}
tween
<script>
window.onload = function(){
var logo = document.getElementById("logo");
TweenLite.to(logo, 1, {css:{left:"632px"}});
}
</script>
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
12
13. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
TweenLite.to()
TweenLite.to( [target object], [duration in seconds], [destination values] )
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
13
14. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Scale & Opacity
<div id="demo">
<div class="box" id="red"></div>
<div class="box" id="yellow"></div>
<div class="box" id="green"></div>
</div>
var red = document.getElementById("red"),
yellow = document.getElementById("yellow"),
green = document.getElementById("green");
TweenLite.to([red, yellow, green], 1, {css:{scale:0.2, opacity:0.3}});
(JavaScript array)
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
14
15. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Use jQuery Selector
<div id="demo">
<div class="box" id="red"></div>
<div class="box" id="yellow"></div>
<div class="box" id="green"></div>
</div>
var red = document.getElementById("red"),
yellow = document.getElementById("yellow"),
green = document.getElementById("green");
TweenLite.to($(".box"), 1, {css:{scale:0.2, opacity:0.3}});
jQuery Selector
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
15
16. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Event Callbacks
onStart
onUpdate
onComplete
onReverse
onReverseComplete
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
16
17. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Use Event Callbacks
var logo = document.getElementById("logo"),
updateOutput = document.getElementById("updateOutput"),
completeOutput = document.getElementById("completeOutput"),
updateCount = 0;
TweenLite.to(logo, 2, {css:{left:"300px"},
onUpdate:updateHandler,
onComplete:completeHandler,
onCompleteParams:["animation complete!"]});
function updateHandler() {
updateCount++;
updateOutput.innerHTML = "onUpdate fired " + updateCount;
}
function completeHandler(message) {
completeOutput.innerHTML = "onComplete fired <br/> completeParams = " + message;
}
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
17
18. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Control Playback
play(), play(5)
pause()
resume()
reverse(), reverse(1)
seek(), seek(3)
timeScale(), timeScale(0.5), timeScale(2)
restart()
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
18
19. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 EasePack
<!--- loading easePack because the tween uses a Linear ease -->
<script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
19
20. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Call restart() Method
<div id="demo">
<div id="logo"></div>
</div>
<input type="button" id="restartBtn" value="restart animation">
var logo = document.getElementById("logo"),
restartBtn = document.getElementById("restartBtn"),
tween = TweenLite.to(logo, 1, {css:{left:"632px"}});
restartBtn.onclick = function() {
tween.restart();
}
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
20
22. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 TweenMax
<!-- TweenMax includes TweenLite, TimelineLite, TimelineMax, EasePack, RoundPropsPlugin
and CSSPlugin -->
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
var logo = document.getElementById("logo");
TweenMax.to(logo, 1, {css:{left:"300px"}, repeat:3, yoyo:true});
set repeat Tween will smoothly reverse direction
each time it repeats
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
22
23. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 Stagger
staggerTo()
staggerFrom()
Source: http://www.greensock.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
23
24. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Call staggerTo() Method
<div id="demo">
<div class="box" id="red"></div>
<div class="box" id="yellow"></div>
<div class="box" id="green"></div>
<div class="box" id="blue"></div>
<div class="box" id="pink"></div>
<div class="box" id="purple"></div>
</div>
var red = document.getElementById("red"),
yellow = document.getElementById("yellow"),
green = document.getElementById("green"),
The fourth parameter called stagger sets the
blue = document.getElementById("blue"),
amount of time that will transpire between the
pink = document.getElementById("pink"), start of each animation.
purple = document.getElementById("purple");
//The last parameter with value of .25 is the stagger amount. Try changing it to 1 see how it impacts the animation.
TweenMax.staggerTo([red, yellow, green, blue, pink, purple], 1, {css:{scale:0.2, opacity:0.3}}, 0.25);
Source: http://www.greensock.com Inc. All Rights Reserved.
Copyright (C) 2013 Moko365
24
25. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
TimelineLite
建⽴立⼀一系列的動畫效果 (animation sequences)
使⽤用 TimelineLite 的實例來儲存多個動畫 ( thousands of
animations)
將多個動畫群組化 (group)
並視為 single tween 來控制
可將 playback control 使⽤用於 Timeline 群組
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
25
26. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
實例化 TimelineLite
<script>
$(window).load(function() {
var logo = $("#logo"),
timelineLite = $("#timelinelite"),
tagline = $("#tagline span"),
restartBtn = $("#restartBtn"),
tl = new TimelineLite(); // Timeline 的實例化
tl.from(logo, 0.5, {css:{left:"-=60px"}, ease:Back.easeOut})
.from(timelinelite, 0.5, {css:{width:"0px", alpha:0}}, -0.02)
.staggerFrom(tagline, 0.5, {css:{top:"-=30px", rotation:"-40deg", alpha:0, scale:1.8}, ease:Back.easeOut}, 0.2);
restartBtn.click(function() {
tl.restart();
});
//show the demoBackground div after DOM is ready and all images loaded
TweenLite.set($("#demoBackground"), {css:{visibility:"visible"}});
});
</script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
26
27. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 TimelineLite Lables
加⼊入 lables 以做為導覽列 (navigation)
tl.append("skew") // adds a new label
.append(getSkewAnimation()) // method returns a TimelineLite instance that gets nested at the end
.append(getStaggerAnimation(), "stagger") //creates new label and adds animation there
.append(getParticlesAnimation(), "particles")
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
27
28. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
TimelineMax
如同 TweenLite 與 TweenMax 的關係
TimelineMax 可⽀支援
➡ set repeat
➡ yoyo
➡ currentLabel()
➡ getLabelAfter()
➡ getLablesArray()
➡ tweenFromTo()
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
28
29. 多屏 Layout & CSS 定義:
Adaptive CSS Framework
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
29
32. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
adapt.js
前次課程使⽤用
替代 CSS Media Query
➡ 有瀏覽器相容性問題
Less Framework 4 是⽐比 adapt.js 更重量級的⼯工具
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
32
33. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 adapt.js
<script>
var ADAPT_CONFIG = {
path: 'css/',
dynamic: true,
range: [
'0px to 480px = 480.css',
'480px to 600px = 600.css',
'600px to 720px = 720.css',
'720px to 800px = 800.css'
]
};
</script>
<script src="./adapt.js"></script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
33
34. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
認識 Less Framework 4
CSS grid system
For designing adaptive websites
4 layouts
3 sets of typography presets
基於 Media Query 技術
Permissive license (MIT license)
⽀支援 Retina Media Query *
Source: http://lessframework.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
34
35. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
4 Layouts
Source: http://lessframework.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
35
36. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 Less Framework 4
Source: http://lessframework.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
36
37. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
技術⾯面
有對基礎的 element 做 reset
➡ html, body, div, span ...
沒有對不同的瀏覽器與裝置做 “base”
➡ 請參考第⼀一堂課介紹
➡ Cross browser and cross devices
使⽤用 “px” 較不合適
➡ 請參考第⼀一堂課介紹
➡ 改⽤用 “rem” 等較合適的單位
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
37
38. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
技術細節:使⽤用 Media Query
/* Wide Mobile Layout: 480px.
Gutters: 24px.
Outer margins: 22px.
Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols 1 2 3 4 5
px 68 160 252 344 436 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
body {
width: 436px;
padding: 36px 22px 48px;
}
}
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
38
39. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
技術細節:Retina Media Query
/* Retina media query.
Overrides styles for devices with a
device-pixel-ratio of 2+, such as iPhone 4.
----------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
body {
}
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
39
40. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
總結
使⽤用 Media Query 做為⼋八屏的基本技術
不需從新寫起,但要了解其原理 (第⼀一堂課)
使⽤用現有的 UI Framework (如 Less Framework 4)
以 Less Framework 4 為例,有些⼋八屏 (cross devices) 的技術細節
未考慮到
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
40
41. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Less+ Framework
Source: http://www.angrycreative.se/wordpress/plugins/less-framework/
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
41
42. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
簡介 Less+ Framework
Less+ Framework is a cross-device CSS grid system using
media queries
Less Framework 4 的⼀一個擴充插件
改⽤用 jQuery Media Query
➡ 取代 CSS Media Query
➡ 以克服課堂所提的問題
同樣有對基礎的 element 做 “reset”
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
42
43. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 Less+ Framework
<!-- Global Stylesheets -->
<link rel="stylesheet" href="reset.css" media="all" />
<link rel="stylesheet" href="fonts.css" media="all" />
<link rel="stylesheet" href="style.css" media="all" />
<!-- Fallback if browser does not support media queries + javascript (Read: Internet
Explorer 7 - 8) -->
<link rel="stylesheet" href="10col.css" media="all" />
<!-- Media Queries / LESS -->
<link rel="stylesheet" href="10col.css" media="only screen and (min-width: 992px)" /
>
<link rel="stylesheet" href="8col.css" media="only screen and (min-width: 768px)
and (max-width: 991px)" />
<link rel="stylesheet" href="3col.css" media="only screen and (max-width: 767px)" />
<link rel="stylesheet" href="5col.css" media="only screen and (min-width: 480px)
and (max-width: 767px)" />
Source: http://www.angrycreative.se/wordpress/plugins/less-framework/
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
43
44. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
總結
“reset” + “base” 將成為 cross device 的重要技術
⼤大部份 UI Framework 都會進⾏行 “reset”
“base” 部份⺫⽬目前仍需由開發者⾃自⾏行處理
Cross device (⼋八屏) 的技術關鍵
➡ cross-device CSS grid system
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
44
45. Feature Detection & yepnope 載入器
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
45
46. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
⺫⽬目的
負責實作 HTML5 標準的是瀏覽器
我們所製作的 HTML5 應⽤用程式會使⽤用到許多 HTML5 特⾊色
檢查⺫⽬目的瀏覽器是否⽀支援這些特⾊色 (features)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
46
47. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
例如:WebSocket 的⽀支援性
請參考 http://en.wikipedia.org/wiki/WebSocket
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
47
48. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
主要瀏覽器的 WebSocket ⽀支援
Firefox 6 以後
Google Chrome 14 以後
Internet Explorer 10 Developer Preview 以後
Opera 11 以後⽀支援舊版 WebSocket 實作
Safari 5 以後⽀支援舊版 WebSocket 實作
iOS 4.2 以後⽀支援舊版 WebSocket 實作
Android 4.x 內建瀏覽器不⽀支援 WebSocket
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
48
50. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
關於 yepnope Loader
An asynchronous conditional resource loader
Super-fast
Allows you to load only the scripts that your users need
➡ Load on demand
以⾮非同步⽅方式載⼊入 Javascript 或其它 resource,可增強 usability
Yep - yes, has, ok
Nope - no, doesn’t has, not ok
See more: http://yepnopejs.com
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
50
54. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
是否⽀支援 Canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A HTML5 Page</title>
<script src="modernizr.min.js"></script>
</head>
<body>
<script>
if (Modernizr.canvas) {
alert("Your browser supports Canvas");
} else {
alert("Oh my god. Your need a good browser!");
}
</script>
</body>
</html>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
54
55. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
檢查 LocalStorage
if (Modernizr.localstorage) {
// Good
} else {
// No good
}
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
55
56. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
是否⽀支援 Web Workers
if (Modernizr.webworkers) {
// Good
} else {
// No good
}
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
56
57. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Application Cache
if (Modernizr.applicationcache) {
// Good
} else {
// No good
}
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
57
58. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Touch Events
檢查瀏覽器是否⽀支援 touch event
➡ if (Modernizr.touch)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
58
63. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 Local Storage
<textarea id="input"></textarea>
<script>
var input = document.getElementById("input");
input.value = localStorage.getItem("mytext") ¦¦ "";
input.addEventListener("keyup", function() {
localStorage.setItem("mytext", input.value);
}, false);
</script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
63
64. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 Session Storage
<textarea id="input"></textarea>
<script>
var input = document.getElementById("input");
input.value = sessionStorage.getItem("mytext") ¦¦ "";
input.addEventListener("keyup", function() {
sessionStorage.setItem("mytext", input.value);
}, false);
</script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
64
65. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
關於 Web Workers
JavaScript threading
無法存取 DOM
可實作 “Message Handler”
不共⽤用資料
➡ 無法存取 Parent Thread 的資料
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
65
66. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Web Worker 的⽤用法
var worker = new Worker(“worker.js”);
worker.terminate();
worker.postMessage(“hello webworker”);
worker.onmessage(function(event) {});
➡ worker.addEventListener(“message”, function(event) {}, false);
See more: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
66
67. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Web Worker 範例:計算 Prime
<p>The highest prime number is: <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
// worker.js
1 var n = 1;
2 search: while (true) {
3 n += 1;
4 for (var i = 2; i <= Math.sqrt(n); i += 1)
5 if (n % i == 0)
6 continue search;
7 // found a prime!
8 postMessage(n); // Don t use return
9}
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
67
68. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Prototype 的技術⾯面
基於 JavaScript 的 Prototype 觀念
➡ JavaScript OO
直接在瀏覽器與 HTML DOM 裡⾯面加⼊入功能 (methods)
擴充 element 的原貌 (prototype)
與 jQuery pattern 有何不同?
➡ 延續第⼀一堂課
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
68
70. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Class 宣告 & Instance
function Person(name, job) {
this.name = name;
this.job = job;
this.queryJob = function() {
alert(this.job);
};
}
var person = new Person("Jollen", "Software Developer");
person.queryJob();
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
70
71. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
定義 Functional Object
var Person = function (name, job) {
this.name = name;
this.job = job;
this.queryJob = function() {
alert(this.job);
};
};
var jollen = new Person("Jollen", "Software Developer");
jollen.queryJob();
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
71
72. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
動態加⼊入新的 Method
var Person = function (name, job) {
this.name = name;
this.job = job;
this.queryJob = function() {
alert(this.job);
};
};
Person.prototype.getName = function () {
return this.name;
}
var jollen = new Person("Jollen", "Software Developer");
jollen.queryJob(); // Software Developer
jollen.getName(); // Jollen
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
72
73. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
改變的是 Prototype (Class)
var Person = function (name, job) {
this.name = name;
this.job = job;
this.queryJob = function() {
alert(this.job);
};
};
var jollen = new Person("Jollen", "Software Developer");
// 順序交換不改變其結果
Person.prototype.getName = function () {
return this.name;
}
jollen.queryJob(); // Software Developer
jollen.getName(); // Jollen
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
73
74. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
什麼要學 JavaScript Prototype
Prototype 改變的是 “base object”
DOM 裡有許多 Function Object (class)
➡ 如何改變其 base object ?
使⽤用 JavaScript “prototype” 屬性
更簡單 “extend DOM’ 的⽅方式
➡ 使⽤用 prototype.js
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
74
75. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
引⼊入 Prototype.js
See more: http://prototypejs.org
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
75
76. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 Prototype.js
加⼊入 prototype.js
➡ JavaScript prototype library
<script
src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js>
</script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
76
77. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
關於 Prototype.js
Prototype provides functions to make HTML DOM
programming easier
Like jQuery, Prototype has its $() function
The $() function accepts HTML DOM element id values (or
DOM elements), and adds new functionality to DOM objects
Unlike jQuery, Prototype has no ready() method to take the
place of window.onload(). Instead, Prototype adds
extensions to the browser and the HTML DOM
See more: http://www.w3schools.com/js/js_lib_prototype.asp
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
77
78. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Prototype.js 範例
See more: http://www.w3schools.com/dom/dom_element.asp
<div id="watch"></div>
<script>
var w = document.getElementById("watch");
w.setAttribute(); // OK. DOM Element 裡的 method
// Prototype.js 的官方範例
var MyUtils = {
truncate: function(element, length){
element = $(element);
return element.update(element.innerHTML.truncate(length));
},
updateAndMark: function(element, html){
return $(element).update(html).addClassName('updated');
}
See more: http://prototypejs.org
};
Element.addMethods(MyUtils); // Prototype.js 擴充 DOM
$('watch').truncate(100); // OK. 使用 Prototype 擴充了 Element
$('watch').helloWorld(); // OK.
w.helloWorld(); // OK. 呼叫 DOM
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
</script>
78
79. 實作 Drag and Drop
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
79
80. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
關於 Drag and Drop
HTML5 的正式標準
可⽀支援任何的 Element
直接實作
或使⽤用 jQuery UI 更為⽅方便
➡ 可將任何 Element 設定為 Draggable
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
80
81. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
使⽤用 Drag and Drop 標籤屬性
<!DOCTYPE HTML> div1
<html>
<head> (target) ondrop
</head>
<body> ondragover
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"
width="336" height="69">
</body>
</html>
Source: http://www.w3schools.com/html/html5_draganddrop.asp
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
81
82. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
實作 Taget 的 onDrop() 事件
<script>
Source: http://www.w3schools.com/html/html5_draganddrop.asp
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
prevent the browser default handling of the data
(default is open as link on drop)
function drop(ev) (任何的 event callbacks 都有其 default 處理方式)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
82
83. 講師:Jack Sun
認識 jQuery 與 Javascript UI Framework
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
83
84. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Agenda
Introduce jQuery
Concept
Hello jQuery
Examples
JavaScript UI Framework
Overview
Mobile Development
jQuery UI Examples
Sencha Touch UI Examples
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
84
85. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Concept of jQuery
Client side & Server side
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
85
86. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Concept of jQuery
JavaScript Foundations
HTML DOM
– HTML Document Object Model
AJAX
– Asynchronous JavaScript and XML
jQuery is the most popular
JavaScript library.
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
86
87. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Hello jQuery
Write less, do more.
<script src=“http://code.jquery.com/jquery-
latest.min.js”></script>
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
87
89. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
JavaScript UI Framework
What’s the different between…
jQuery
- Is a way to find stuff on a page and work with that
stuff.
- Write less, do more, a JavaScript library.
jQuery UI
- Is a UI library that works with jQuery. (need jQuery)
jQuery Mobile
- Is a UI library for Mobile devices that works with
jQuery as well. (need jQuery)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
89
90. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
JavaScript UI Framework
The Alternatives for Mobile Development
Zepto (not fully support IE)
Xui How about use all of these…
jqmobi / jqui jQuery
: 'libs/jquery/jquery-loader',
Handlebars
: 'libs/handlebars/handlebars-
Use Cases : loader',
Underscore
: 'libs/underscore/underscore-
jQuery + jQuery UI loader',
Backbone
: 'libs/backbone/backbone-loader',
jQuery + jQuery Mobile WebSocket
: 'libs/websocket-loader',
order
: 'libs/require/order-1.0.5',
Zepto/jQuery + jQTouch text
: 'libs/require/text-1.0.7',
domReady
: 'libs/require/domReady-1.0.0',
jQuery/Zepto/Xui + Custom UI
iScroll
: 'libs/iscroll/iscroll-loader',
PhoneGap
: 'libs/phonegap/phonegap-loader',
Sencha Touch (commercial)
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
90
91. 如何應用 Bootstrap 製作 Responsive Website Design
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
本教材由仕橙3G教室製作與維護
91
92. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Agenda
Introduce Bootstrap
What’s Bootstrap
File Structure
What’s Included
HTML Template
Example
Customize
Bootstrap Tutorial
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
92
93. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Introduce Bootstrap
What’s Bootstrap
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
93
94. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Introduce Bootstrap
File Structure
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
94
95. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Introduce Bootstrap
What’s included
Scaffolding
Global styles for the body to reset type and background, link styles, grid
system, and two simple layouts.
Base CSS
Styles for common HTML elements like typography, code, tables, forms, and
buttons. Also includes Glyphicons, a great little icon set.
Components
Basic styles for common interface components like tabs and pills, navbar,
alerts, page headers, and more.
JavaScript plugins
Similar to Components, these JavaScript plugins are interactive components for
things like tooltips, popovers, modals, and more.
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
95
96. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Introduce Bootstrap
HTML Template
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
96
97. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Introduce Bootstrap
Example
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
97
98. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Introduce Bootstrap
Customize
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
98
99. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》
Bootstrap Tutorial
Create a Responsive Design Blog using Bootstrap.
Copyright (C) 2013 Moko365 Inc. All Rights Reserved.
99