0
講師:Jollen Chen <jollen@jollen.org>          Blog:http://www.jollen.org/blog          課程:http://www.moko365.com          課程...
http://www.moko365.com/enterprise/html5-app-javascript-frontend                                                           ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                              LICENSE NOTICE          This work is licensed under a Creative C...
使用	 JavaScript	 製作動畫:                                    使用	 GreenSockCopyright (C) 2013 Moko365 Inc. All Rights Reserved....
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                              GreenSockCopyright (C) 2013 Moko365 Inc. All Rights Reserved.   ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                       GSAP       GreenSock Animation Platform (GSAP)       使⽤...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                               Tool Suite       TweenLite       TweenMax       TimelineLite   ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                              Crazy FastCopyright (C) 2013 Moko365 Inc. All Rights Reserved.  ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                關於 JavaScript 效能       在上⼀一堂課所介紹的觀念,效能由瀏覽器引擎的品質決定       在多媒體應⽤用⽅方⾯面,好的 Browser...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                               使⽤用 GSAP       官⽅方⼊入⾨門教學      ➡    http://www.greensock.com/jum...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                          使⽤用 TweenLite<!--- The following scripts are necessary to do TweenLi...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》   第⼀一個 GSAP 程式 (TweenLite)           logo 元素將以 1 秒的時間,擁有⼀一個 CSS property {left:632px}        ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                             TweenLite.to()TweenLite.to( [target object], [duration in seconds...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                           Scale & Opacity              <div id="demo">                 <div c...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                    Use jQuery Selector              <div id="demo">                 <div clas...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                           Event Callbacks           onStart           onUpdate           onCo...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                    Use Event Callbacks var logo = document.getElementById("logo"),   updateOu...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                         Control Playback           play(), play(5)           pause()         ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                              使⽤用 EasePack <!--- loading easePack because the tween uses a Lin...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  Call restart() Method          <div id="demo">             <div id="logo"></...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                   TweenMax           從 TweenLite 升級到 TweenMax           更多的 A...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                           使⽤用 TweenMax     <!-- TweenMax includes TweenLite, TimelineLite, Ti...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                   使⽤用 Stagger           staggerTo()           staggerFrom()So...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》            Call staggerTo() Method     <div id="demo">       <div class="box" id="red"></div>...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                           TimelineLite       建⽴立⼀一系列的動畫效果 (animation sequences)       使⽤用 Tim...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                        實例化 TimelineLite<script>$(window).load(function() {  var logo = $("#lo...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》            使⽤用 TimelineLite Lables           加⼊入 lables 以做為導覽列 (navigation)tl.append("skew") ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                             TimelineMax       如同 TweenLite 與 TweenMax 的關係       TimelineMax 可...
多屏	 Layout	 &	 CSS	 定義:                             Adaptive	 CSS	 FrameworkCopyright (C) 2013 Moko365 Inc. All Rights Res...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  Less Framework 4Copyright (C) 2013 Moko365 Inc. All Rights Reserved.        ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                  課程回顧Copyright (C) 2013 Moko365 Inc. All Rights Reserved.    ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                  adapt.js       前次課程使⽤用       替代 CSS Media Query      ➡    有瀏...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                           使⽤用 adapt.js    <script>    var ADAPT_CONFIG = {     path: css/,   ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》           認識 Less Framework 4        CSS grid system        For designing adaptive websites  ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                               4 LayoutsSource: http://lessframework.comCopyright (C) 2013 Mok...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》          使⽤用 Less Framework 4Source: http://lessframework.comCopyright (C) 2013 Moko365 Inc. ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                       技術⾯面       有對基礎的 element 做 reset      ➡    html, body, ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》      技術細節:使⽤用 Media Query/*         Wide Mobile Layout: 480px.           Gutters: 24px.      ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》技術細節:Retina Media Query/*   Retina media query.     Overrides styles for devices with a     de...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                        總結       使⽤用 Media Query 做為⼋八屏的基本技術       不需從新寫起,但要了解其...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                        Less+ FrameworkSource: http://www.angrycreative.se/wordpress/plugins/l...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》           簡介 Less+ Framework       Less+ Framework is a cross-device CSS grid system using   ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               使⽤用 Less+ Framework          <!-- Global Stylesheets -->          <link rel="st...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                        總結       “reset” + “base” 將成為 cross device 的重要技術      ...
Feature	 Detection	 &	 yepnope	 載入器Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護          ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                        ⺫⽬目的       負責實作 HTML5 標準的是瀏覽器       我們所製作的 HTML5 應⽤用程式...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》     例如:WebSocket 的⽀支援性       請參考 http://en.wikipedia.org/wiki/WebSocketCopyright (C) 2013 Mok...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 主要瀏覽器的 WebSocket ⽀支援       Firefox 6 以後       Google Chrome 14 以後       Internet Explorer 10 ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》             使⽤用 yepnope LoaderCopyright (C) 2013 Moko365 Inc. All Rights Reserved.           ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  關於 yepnope Loader           An asynchronous conditional resource loader     ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                       使⽤用 ModernizrCopyright (C) 2013 Moko365 Inc. All Rights Reserved.      ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                       關於 Modernizr       可協助開發者進⾏行 feature detection       可客製化 Javascript li...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》          使⽤用 modernizr Library   <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8">  ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                     是否⽀支援 Canvas<!DOCTYPE html><html><head><meta charset="utf-8"><title>A HTM...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                   檢查 LocalStorage    if (Modernizr.localstorage) {         // Good    } else ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》           是否⽀支援 Web Workers    if (Modernizr.webworkers) {         // Good    } else {       ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  Application Cache   if (Modernizr.applicationcache) {        // Good   } els...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                         Touch Events       檢查瀏覽器是否⽀支援 touch event      ➡    if (Modernizr.tou...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》             使⽤用 yepnode Loader       不要使⽤用 <script> 來載⼊入 JavaScript        <head>            ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》              使⽤用 ‘yepnope’ Loader  10   window.addEventListener("load", function() {  11  12 ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                          Sync and Async <script type="text/javascript" src="js/greensock/plug...
JavaScript	 教學(2)Copyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                            ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  使⽤用 Local Storage <textarea id="input"></textarea> <script>      var input =...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》              使⽤用 Session Storage  <textarea id="input"></textarea>  <script>  var input = doc...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  關於 Web Workers       JavaScript threading       無法存取 DOM       可實作 “Message ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                    Web Worker 的⽤用法          var worker = new Worker(“worker.js”);          wo...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》  Web Worker 範例:計算 Prime<p>The highest prime number is: <output id="result"></output></p> <scr...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                 Prototype 的技術⾯面       基於 JavaScript 的 Prototype 觀念      ➡    JavaScript OO   ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》          JavaScript 的 Prototype       每個 JavaScript 物件都有⼀一個 “prototype” 屬性       JavaScript 引...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》             Class 宣告 & Instance   function Person(name, job) {         this.name = name;     ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》           定義 Functional Object    var Person = function (name, job) {         this.name = nam...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》              動態加⼊入新的 Method    var Person = function (name, job) {         this.name = name; ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》     改變的是 Prototype (Class)    var Person = function (name, job) {         this.name = name;  ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》什麼要學 JavaScript Prototype       Prototype 改變的是 “base object”       DOM 裡有許多 Function Object (c...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                        引⼊入 Prototype.jsSee more: http://prototypejs.orgCopyright (C) 2013 Mok...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                    使⽤用 Prototype.js       加⼊入 prototype.js      ➡    JavaScript prototype lib...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                      關於 Prototype.js       Prototype provides functions to make HTML DOM     ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                         Prototype.js 範例                                          See more: ht...
實作	 Drag	 and	 DropCopyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作與維護                          ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               關於 Drag and Drop       HTML5 的正式標準       可⽀支援任何的 Element       直接實作       或使⽤用 ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 Drag and Drop 標籤屬性<!DOCTYPE HTML>                                                 div1<ht...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》     實作 Taget 的 onDrop() 事件 <script>                                  Source: http://www.w3sch...
講師:Jack Sun      認識	 jQuery	 與	 Javascript	 UI	 FrameworkCopyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                   Agenda       Introduce jQuery          Concept          Hel...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  Concept of jQuery       Client side & Server sideCopyright (C) 2013 Moko365 ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  Concept of jQuery       JavaScript Foundations          HTML DOM  – HTML Doc...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                           Hello jQuery       Write less, do more.                           <...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》<!doctype html><html><head>                        jQuery Examples    <meta charset=utf-8>    ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》            JavaScript UI Framework       What’s the different between…          jQuery       ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》            JavaScript UI Framework       The Alternatives for Mobile Development          Zep...
如何應用	 Bootstrap	 製作	 Responsive	 Website	 DesignCopyright (C) 2013 Moko365 Inc. All Rights Reserved.          本教材由仕橙3G教室製作...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                                   Agenda       Introduce Bootstrap          What’s Bootstrap ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               Introduce Bootstrap       What’s BootstrapCopyright (C) 2013 Moko365 Inc. All R...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               Introduce Bootstrap       File StructureCopyright (C) 2013 Moko365 Inc. All Rig...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               Introduce Bootstrap       What’s included          Scaffolding       Global sty...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               Introduce Bootstrap       HTML TemplateCopyright (C) 2013 Moko365 Inc. All Righ...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               Introduce Bootstrap       ExampleCopyright (C) 2013 Moko365 Inc. All Rights Res...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》               Introduce Bootstrap       CustomizeCopyright (C) 2013 Moko365 Inc. All Rights R...
《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》                  Bootstrap Tutorial  Create a Responsive Design Blog using Bootstrap.Copyrigh...
更多資訊請上 Go8Panel.com                      100
Upcoming SlideShare
Loading in...5
×

課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(2)

2,222

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,222
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
126
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "課程名稱:八屏一雲時代來臨 教你HTML5六小時打通(2)"

  1. 1. 講師:Jollen Chen <jollen@jollen.org> Blog:http://www.jollen.org/blog 課程:http://www.moko365.com 課程專案:鴻海科技集團贊助課程 課程名稱:⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關(2) 課程⽇日期:2013/1/24 (四) 課程時間:10:00~17:00 講義版本:v1.3.0 八屏一雲時代來臨 教你HTML5六小時打通關(2)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 1
  2. 2. http://www.moko365.com/enterprise/html5-app-javascript-frontend 2
  3. 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 workUnder 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 authors 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. 4. 使用 JavaScript 製作動畫: 使用 GreenSockCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 4
  5. 5. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 GreenSockCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 5
  6. 6. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 GSAP GreenSock Animation Platform (GSAP) 使⽤用 JavaScriptCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 6
  7. 7. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Tool Suite TweenLite TweenMax TimelineLite TimelineMaxCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 7
  8. 8. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Crazy FastCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 8
  9. 9. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 關於 JavaScript 效能 在上⼀一堂課所介紹的觀念,效能由瀏覽器引擎的品質決定 在多媒體應⽤用⽅方⾯面,好的 Browser engine + 好的 JavaScript animation library,開始有能⼒力取代傳統的 Native 實作⽅方法Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 9
  10. 10. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 GSAP 官⽅方⼊入⾨門教學 ➡ http://www.greensock.com/jump-start-js/ 可單獨執⾏行 ➡ 無須搭配其它 JavaScript 平臺 (eg. jQuery) 可與 jQuery 搭配使⽤用 ➡ 建議只將 jQuery 做為 selector ➡ 不使⽤用 jQuery 的 animation 功能Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 10
  11. 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. 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. 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. 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. 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 SelectorSource: http://www.greensock.com Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 15
  16. 16. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Event Callbacks onStart onUpdate onComplete onReverse onReverseCompleteSource: http://www.greensock.com Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 16
  17. 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. 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. 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. 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
  21. 21. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 TweenMax 從 TweenLite 升級到 TweenMax 更多的 Animation 功能 並⽀支援許多 plugins ➡ CSSPlugin ➡ BezierPlugin ➡ RoundPropsPluginSource: http://www.greensock.com Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 21
  22. 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 repeatsSource: http://www.greensock.com Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 22
  23. 23. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 Stagger staggerTo() staggerFrom()Source: http://www.greensock.com Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 23
  24. 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. 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. 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. 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. 28. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 TimelineMax 如同 TweenLite 與 TweenMax 的關係 TimelineMax 可⽀支援 ➡ set repeat ➡ yoyo ➡ currentLabel() ➡ getLabelAfter() ➡ getLablesArray() ➡ tweenFromTo()Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 28
  29. 29. 多屏 Layout & CSS 定義: Adaptive CSS FrameworkCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 29
  30. 30. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Less Framework 4Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 30
  31. 31. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 課程回顧Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 31
  32. 32. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 adapt.js 前次課程使⽤用 替代 CSS Media Query ➡ 有瀏覽器相容性問題 Less Framework 4 是⽐比 adapt.js 更重量級的⼯工具Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 32
  33. 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. 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.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 34
  35. 35. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 4 LayoutsSource: http://lessframework.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 35
  36. 36. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 Less Framework 4Source: http://lessframework.comCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 36
  37. 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. 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 5px 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. 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. 40. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 總結 使⽤用 Media Query 做為⼋八屏的基本技術 不需從新寫起,但要了解其原理 (第⼀一堂課) 使⽤用現有的 UI Framework (如 Less Framework 4) 以 Less Framework 4 為例,有些⼋八屏 (cross devices) 的技術細節 未考慮到Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 40
  41. 41. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Less+ FrameworkSource: http://www.angrycreative.se/wordpress/plugins/less-framework/ Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 41
  42. 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. 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: InternetExplorer 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. 44. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 總結 “reset” + “base” 將成為 cross device 的重要技術 ⼤大部份 UI Framework 都會進⾏行 “reset” “base” 部份⺫⽬目前仍需由開發者⾃自⾏行處理 Cross device (⼋八屏) 的技術關鍵 ➡ cross-device CSS grid systemCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 44
  45. 45. Feature Detection & yepnope 載入器Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 45
  46. 46. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 ⺫⽬目的 負責實作 HTML5 標準的是瀏覽器 我們所製作的 HTML5 應⽤用程式會使⽤用到許多 HTML5 特⾊色 檢查⺫⽬目的瀏覽器是否⽀支援這些特⾊色 (features)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 46
  47. 47. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 例如:WebSocket 的⽀支援性 請參考 http://en.wikipedia.org/wiki/WebSocketCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 47
  48. 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 內建瀏覽器不⽀支援 WebSocketCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 48
  49. 49. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 yepnope LoaderCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 49
  50. 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 okSee more: http://yepnopejs.com Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 50
  51. 51. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 ModernizrCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 51
  52. 52. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 關於 Modernizr 可協助開發者進⾏行 feature detection 可客製化 Javascript library 包含 yepnope loaderCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 52
  53. 53. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 modernizr Library <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A HTML5 Page</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 53
  54. 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. 55. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 檢查 LocalStorage if (Modernizr.localstorage) { // Good } else { // No good }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 55
  56. 56. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 是否⽀支援 Web Workers if (Modernizr.webworkers) { // Good } else { // No good }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 56
  57. 57. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Application Cache if (Modernizr.applicationcache) { // Good } else { // No good }Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 57
  58. 58. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Touch Events 檢查瀏覽器是否⽀支援 touch event ➡ if (Modernizr.touch)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 58
  59. 59. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 yepnode Loader 不要使⽤用 <script> 來載⼊入 JavaScript <head> <meta charset="utf-8"> <title>NO Game</title> <script src="modernizr.min.js"></script> <script src="loader.js"></script> ... </head>Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 59
  60. 60. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 使⽤用 ‘yepnope’ Loader 10 window.addEventListener("load", function() { 11 12 Modernizr.load([ 13 { 14 load : [ 15 "jquery.min.js", 16 "CSSPlugin.min.js", 17 "TweenLite.min.js" 18 ], 19 complete : function() { 20 start(); 21 } 22 } 23 ]); 24 25 }, false);Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 60
  61. 61. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Sync and Async <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> 12 Modernizr.load([ 13 { 14 load : [ 15 "jquery.min.js", 16 "CSSPlugin.min.js", 17 "TweenLite.min.js" 18 ], 19 complete : function() { 20 start(); 21 } 22 } 23 ]);Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 61
  62. 62. JavaScript 教學(2)Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 62
  63. 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. 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. 65. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 關於 Web Workers JavaScript threading 無法存取 DOM 可實作 “Message Handler” 不共⽤用資料 ➡ 無法存取 Parent Thread 的資料Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 65
  66. 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. 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. 68. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Prototype 的技術⾯面 基於 JavaScript 的 Prototype 觀念 ➡ JavaScript OO 直接在瀏覽器與 HTML DOM 裡⾯面加⼊入功能 (methods) 擴充 element 的原貌 (prototype) 與 jQuery pattern 有何不同? ➡ 延續第⼀一堂課Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 68
  69. 69. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 JavaScript 的 Prototype 每個 JavaScript 物件都有⼀一個 “prototype” 屬性 JavaScript 引擎的實作並不提供 class 觀念 ➡ 延續第⼀一堂課的觀念 ➡ 使⽤用 function() 來表⽰示 class,再使⽤用 “new” 來取得 instance ➡ Constructor pattern 與 Factory method pattern ➡ 上述做法,class 並不具備 OOP (C++/Java) 的必要特性 因此,使⽤用 JavaScript 的 “prototype” 來模擬 class 的 OO 特性Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 69
  70. 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. 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. 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(); // JollenCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 72
  73. 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(); // JollenCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 73
  74. 74. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》什麼要學 JavaScript Prototype Prototype 改變的是 “base object” DOM 裡有許多 Function Object (class) ➡ 如何改變其 base object ? 使⽤用 JavaScript “prototype” 屬性 更簡單 “extend DOM’ 的⽅方式 ➡ 使⽤用 prototype.jsCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 74
  75. 75. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 引⼊入 Prototype.jsSee more: http://prototypejs.orgCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 75
  76. 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. 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.aspCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 77
  78. 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. 79. 實作 Drag and DropCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 79
  80. 80. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 關於 Drag and Drop HTML5 的正式標準 可⽀支援任何的 Element 直接實作 或使⽤用 jQuery UI 更為⽅方便 ➡ 可將任何 Element 設定為 DraggableCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 80
  81. 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.aspCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 81
  82. 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. 83. 講師:Jack Sun 認識 jQuery 與 Javascript UI FrameworkCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 83
  84. 84. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Agenda Introduce jQuery Concept Hello jQuery Examples JavaScript UI Framework Overview Mobile Development jQuery UI Examples Sencha Touch UI ExamplesCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 84
  85. 85. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Concept of jQuery Client side & Server sideCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 85
  86. 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. 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
  88. 88. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》<!doctype html><html><head> jQuery Examples <meta charset=utf-8> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <style> .emphasis { font-weight: bold;} </style> <script> $(document).ready(function() { $(li:first-child).addClass(emphasis); }); </script></head><body><ul> <li>hello</li> <li>hello 2</li> <li>hello 3</li></ul>Copyright (C) 2013 Moko365 Inc. All Rights Reserved.</body> 88</html>
  89. 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. 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. 91. 如何應用 Bootstrap 製作 Responsive Website DesignCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 本教材由仕橙3G教室製作與維護 91
  92. 92. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Agenda Introduce Bootstrap What’s Bootstrap File Structure What’s Included HTML Template Example Customize Bootstrap TutorialCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 92
  93. 93. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Introduce Bootstrap What’s BootstrapCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 93
  94. 94. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Introduce Bootstrap File StructureCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 94
  95. 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. 96. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Introduce Bootstrap HTML TemplateCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 96
  97. 97. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Introduce Bootstrap ExampleCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 97
  98. 98. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Introduce Bootstrap CustomizeCopyright (C) 2013 Moko365 Inc. All Rights Reserved. 98
  99. 99. 《⼋八屏⼀一雲時代來臨 教你HTML5六⼩小時打通關 》 Bootstrap Tutorial Create a Responsive Design Blog using Bootstrap.Copyright (C) 2013 Moko365 Inc. All Rights Reserved. 99
  100. 100. 更多資訊請上 Go8Panel.com 100
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×