• /  44
  • 下載費用: 10.00積分  

HTML5跨平臺開發基礎與實戰 王寅峰電子任務9 使用HTML5數據存儲.ppt

'HTML5跨平臺開發基礎與實戰 王寅峰電子任務9 使用HTML5數據存儲.ppt'
跨平臺HTML5實戰軟件學院 王寅峰任務9 使用HTML5數據存儲學習目標【知識目標】 ? 了解HTML5數據存儲的特點和優點; ? 重點掌握HTML5的本地存儲方法; ? 掌握HTML5中拖拽功能的實現。 【技能目標】 ? 能結合前面內容開發網頁; ? 能在網頁采用離線存儲功能; ? 能設計支持離線注冊的在線游戲。 引例描述 在傳統的HTML中,站點的訪問和應用均需要依賴用戶端與因特網保持連接,一旦離線,則只能瀏覽過去歷史記錄。HTML5離線存儲功能非常強大,可以讓用戶在離線后照樣可以訪問站點或應用,并在用戶再一次連接因特網時自動更新緩存數據。 任務陳述 本任務為LocalStorage(本地儲存)的經典案例-注冊登入。結合HTML5 + CSS + jQuery技術,需要設計一個主要功能有登入、注冊、查看登入賬號和密碼,以及光標自動進入控件的功能。 實施步驟如下: 第一步:編輯UI界面(用戶界面),排版布局; 第二步:實現注冊,登入,查看,光標事件的功能的邏輯; 第三步:實現界面跳轉。 1 本地存儲2 拖曳文件3 JQuery的基本結構知識準備1 HTML5本地存儲1 HTML5本地存儲HTML5 提供了兩種在客戶端存儲數據的新方法:localStorage(沒有時間限制的數據存儲)sessionStorage(針對一個 session 會話的數據存儲)在 HTML5 中,數據不是由每個服務器請求傳遞的,而是只有在請求時使用數據。在不影響網站性能的情況下存儲大量數據。對于不同的網站,數據存儲于不同位置,并且一個網站只能訪問其自身的數據。在HTML5中存取大量數據使用 JavaScript來完成。 1 HTML5本地存儲 在使用localStorage或sessionStorage方法之前,我們需要檢測瀏覽器是否支持Web本地存儲的API。目前在IE8+,Firefox,Chrome,Opera和Safari 5上都支持這個特性??梢允褂肑avaScript檢測瀏覽器是否支持,關鍵代碼如下: if(typeof(Storage)!=="undefined"){ // 瀏覽器支持! // 瀏覽器支持本地存儲時執行這里的代碼 }else{ // 瀏覽器不支持時執行這里的代碼 } 1 HTML5本地存儲localStorage 方法 localStorage 方法存儲的數據沒有時間限制,可以一直儲存在本地之中,采用的是key-value(鍵值)方式保存。 如下示例代碼所示,通過localStorage方法保存數據于key(鍵值)savedVar中,使用document.write()方法輸出保存的內容: 1 HTML5本地存儲localStorage 方法 刷新訪問次數 1 HTML5本地存儲SessionStorage 方法 SessionStorage 方法針對一個 session會話進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除。 1 HTML5本地存儲SessionStorage 方法刷新訪問次數 1 HTML5本地存儲本地存儲之應用緩存 HTML5的緩存特性使用戶可以離線瀏覽網站或應用內容。 HTML5的Application Cache應用程序緩存為應用和網站帶來三個優勢:離線瀏覽速度減少服務器負載 1 HTML5本地存儲本地存儲之應用緩存應用實例: 例如一網站中包含下列文件: main.html theme.css logo.gif main.js login.asp 1 HTML5本地存儲創建main.manifest文件,文件內容如下代碼所示: CACHE MANIFEST # 2013-06-01 v1.0.0 #這是注釋,可以通過上面注釋時間和版本號以便使用JavaScript對緩存更新 /main.html/theme.css /logo.gif /main.js #緩存的文件列表 NETWORK: login.asp#不被緩存的列表 1 HTML5本地存儲本地存儲之應用緩存添加了 cache manifest 文件后,還需要修改“main.html”,把 標簽的 manifest 屬性設置為“main.manifest”。修改后的“main.html”代碼如下。 ...... 修改后,當用戶在線訪問“main.html”時,瀏覽器會緩存“main.html”、“theme.css”、“logo.gif”和“main.js”文件;而當用戶離線訪問時,這個 Web 應用也可以正常使用了。 2 拖曳文件2 拖曳文件 拖拽文件功能在日常生活中非常普遍,如將文件拖拽進郵件附件中,或者上傳文件時拖拽。2 拖曳文件 在以往HTML標準中,拖拽功能的實現需要使用大量復雜的JavaScript代碼來實現這一功能,在HTML5中,原生提供了拖拽功能的API 。 主要技術: 1. HTML5 Drag & Drop拖拽功能API 2. HTML5的File文件API 2 拖曳文件 HTML5 Drag & Drop拖拽功能APIDrag & Drop API優點: ? 不需要編寫復雜的JavaScript代碼,通過事件方式瀏覽器原生支持拖放功能 ? 大大減少HTML文檔的大小,加快打開網頁和減少帶寬消耗 ? 使用dataTransfer來儲存數據,支持自定義拖放操作 ? 支持從瀏覽器外的拖放,如從桌面拖拽入瀏覽器 1. HTML5 Drag & Drop拖拽功能API 應用實例:在兩個框框中移動小物體。2 拖曳文件1. HTML5 Drag & Drop拖拽功能API 應用實例主要代碼(html部分):2 拖曳文件1. HTML5 Drag & Drop拖拽功能API應用實例主要代碼(html部分):2 拖曳文件Drag & Drop API屬性 介紹: draggable屬性 : 設置元素的是否可被拖拽和元素默認可以被拖拽,其它元素需要加上draggable=”true”屬性令其可以被拖拽1. HTML5 Drag & Drop拖拽功能API應用實例主要代碼(html部分):2 拖曳文件Drag & Drop API事件 介紹:1 ondragstart :拖動開始事件,用于要拖動的對象元素上。2 ondragover:拖動對象拖到當前元素對象上時的事件,這個事件會持續觸發。3 ondrop:在當前元素中停止拖拽(放下)元素對象時的事件。1. HTML5 Drag & Drop拖拽功能API應用實例主要代碼(script部分):2 拖曳文件設置對象的拖曳效果設置拖動某一對象時,跟隨鼠標移動的圖片使用dataTransfer API方法支持拖放數據的存儲讀取1. HTML5 Drag & Drop拖拽功能API應用實例主要代碼(script部分):2 拖曳文件在ondragover事件中,需要禁用默認的事件處理,使用event.preventDefault()方法才能讓ondrop事件觸發和dropEffect生效。 2. HTML5的File文件API HTML5為我們提供了全新的File API,讓我們在網頁中可以展示文件列表,選擇或讀取文件等。 File API提供了幾個訪問本地文件的接口: File(獨立的文件) FileList(File 對象的類數組序列) Blob(二進制對象,文件原始的二進制數據)2 拖曳文件2. HTML5的File文件API 應用實例:設置一個框框用于拖拽,將瀏覽器外的圖片拖入,并修改CSS的背景圖片屬性修改該圖片為背景2 拖曳文件2. HTML5的File文件API 應用實例主要代碼(html部分) :2 拖曳文件Drag & Drop API事件 介紹:1 ondragenter :拖動對象拖入到元素區域內的事件。2. HTML5的File文件API 應用實例主要代碼(script部分) :2 拖曳文件 function dodragenter(o,e){ e.stopPropagation();//禁止默認事件 e.preventDefault(); } function dodragover(o,e){ e.stopPropagation(); e.preventDefault(); }使用event.preventDefault()來禁止默認拖拽事件才能讓ondrop和dropEffect生效,讀取文件還需要添加event.stopPropagation()方法禁止File對象的默認事件。2. HTML5的File文件API 應用實例主要代碼(script部分) :2 拖曳文件使用File API需要先實例化File對象。File API讀取文件具有成功事件onload 。onerror事件用于處理錯誤。事件用于處理錯誤: 。3 JQuery3 JQuery jQuery 是一個跨瀏覽器的免費開源 JavaScript 庫。其核心設計思想是“寫更少的代碼,做更多的事情”(Write Less Do More)。 jQuery 提供了一套易于使用的API。這些API 極大地簡化了客戶端(瀏覽器)編程過程中的許多方面,包括: ? HTML DOM 的遍歷與操作; ? 瀏覽器事件處理; ? AJAX(Asynchronous JavaScript And XML)編程; ? 特效(如動畫效果)。 3 JQuery基礎語法是:$(selector).action()。美元符號定義 jQuery,選擇符(selector)“查詢”和“查找” HTML元素,jQuery的action() 執行對元素的操作。 jQuery使用CSS選擇器來選取HTML元素。 ? $("p") 選取 元素。 ? $("p.intro") 選取所有 class="intro" 的 元素。 ? $(“p#demo”) 選取所有 id=“demo” 的 元素。 3 JQuery jQuery 屬性選擇器,使用XPath表達式來選擇帶有給定屬性的元素。 ? $(“[href]”) 選取所有帶有 href 屬性的元素。 ? $("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。 ? $("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。 ? $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。$(this).hide() - 隱藏當前元素;$(“p”).hide() - 隱藏所有段落; $(".myclass").hide() - 隱藏所有 class="myclass" 的所有元素;$("#test").hide() - 隱藏所有 id="test" 的元素。 3 JQuery 應用實例:使用JQuery實現點擊按鈕后改變樣式。 3 JQuery 應用實例源碼 任務實施本任務為LocalStorage(本地儲存)的經典案例-注冊登入。結合HTML5 + CSS + jQuery技術,我們需要設計一個主要功能有登入、注冊、查看登入的賬號和密碼,以及光標自動進入控件的功能。 實施步驟如下: 第一步:編輯UI界面(用戶界面),排版布局; 第二步:實現注冊,登入,查看,光標事件的功能的邏輯; 第三步:實現界面跳轉。的基本結構任務實施實現效果登錄界面實現效果注冊界面實現效果登錄成功后查看賬號和密碼界面小 結
關 鍵 詞:
html5 html 任務 電子 實戰 使用 基礎 開發 跨平臺 數據
 天天文庫所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
關于本文
本文標題:HTML5跨平臺開發基礎與實戰 王寅峰電子任務9 使用HTML5數據存儲.ppt
鏈接地址: http://www.476824.live/p-51617383.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服點擊這里,給天天文庫發消息,QQ:1290478887 - 聯系我們

本站為“文檔C2C交易模式”,即用戶上傳的文檔直接賣給(下載)用戶,本站只是中間服務平臺,本站所有文檔下載所得的收益歸上傳人(含作者)所有【成交的100%(原創)】。本站是網絡服務平臺方,若您的權利被侵害,侵權客服QQ:1290478887 歡迎舉報。

[email protected] 2017-2027 http://www.476824.live 網站版權所有

粵ICP備19057495號 

收起
展開
球探网即时蓝球比分 厦门 股票配资 吉林11选5开奖结果直播 在线配资炒股 甘肃快三结果走势图 广东十一选五开奖结果历史 北京股票配资公司 陕西快乐10分钟号码推荐 云南快乐十分任选5遗漏 湖北11选五任三最大遗漏 安徽快3二码遗漏走势图