網(wǎng)絡(luò)編程試驗報告_第1頁
網(wǎng)絡(luò)編程試驗報告_第2頁
網(wǎng)絡(luò)編程試驗報告_第3頁
網(wǎng)絡(luò)編程試驗報告_第4頁
網(wǎng)絡(luò)編程試驗報告_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

學(xué)生學(xué)號0121110680實驗課成績武漢理工大學(xué)學(xué)生實驗報告書實驗課程名稱網(wǎng)絡(luò)軟件編程技術(shù)開課學(xué)院計算機科學(xué)與技術(shù)學(xué)院指導(dǎo)老師姓名毛雪濤學(xué)生姓名學(xué)生專業(yè)班級軟件sy11012013—2014學(xué)年第二學(xué)期實驗課程名稱：網(wǎng)絡(luò)軟件編程技術(shù)實驗項目名稱構(gòu)建移動HTML輸入表單實驗成績實驗者專業(yè)班級組別同組者實驗日期2014年6月4日一部分：實驗預(yù)習(xí)報告（包括實驗?zāi)康?、意義，實驗基本原理與方法，主要儀器設(shè)備及耗材，實驗方案與技術(shù)路線等）實驗?zāi)康模豪斫馊绾瓮ㄟ^一些簡單的CSS（包括CSS3）讓W(xué)EB表單具有與原生應(yīng)用類似的感官與體驗，以及如何規(guī)范大量Javascript應(yīng)用的組織結(jié)構(gòu)。實驗基本原理與方法：body{margin:0px;min-height:480px;font-family:Arial;}formul{margin:0px;padding:6px;list-style-type:none;}formulli{margin:004px0;-webkit-border-radius:4px;border:1pxsolid#666666;padding:4px;}formulli.naked{-webkit-border-radius:0px;border:0;padding:0;}ul.errors-inlineli{border:0px;color:red;padding:0px;}input[type=submit]{border:1pxsolidwhite;background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.0,#F8F8F8),color-stop(1.0,#AAAAAA));-webkit-border-radius:6px;-webkit-box-shadow:004px#333333;width:100%;padding:6px;}h1.simple{font-size:0.9em;padding:8px4px4px8px;background:#333333;color:#AAAAAA;border-bottom:2pxsolid#AAAAAA;margin:004px0;}h1.fancy{background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.0,#666666),color-stop(0.5,#3A3A3A),color-stop(0.5,#222222),color-stop(1.0,#000000));-webkit-box-shadow:02px1px#AAAAAA;-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;font-size:1.1em;color:white;padding:10px8px;margin:06px6px6px;text-align:center;}主要儀器及耗材：基于X8086處理器的PC機RAM:2GHSSD：40G第二部分：實驗過程記錄上機房進行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論面向移動WEB的HTML與面向桌面的HTML相差無幾---只不過屏幕尺寸更小。此外，人們越來越多的將精力放在了性能優(yōu)化上，因為通過移動寬帶連接進行瀏覽時，移動設(shè)備的帶塊要低很多，所以我們要學(xué)會使用適當(dāng)?shù)募夹g(shù)使得應(yīng)用在硬件設(shè)備遠遜于桌面設(shè)備的移動設(shè)備上有更好的顯示。實驗課程名稱：網(wǎng)絡(luò)軟件編程技術(shù)實驗項目名稱HTML5StorageAPI實驗成績實驗者專業(yè)班級組別同組者實驗日期2014年6月4日一部分：實驗預(yù)習(xí)報告（包括實驗?zāi)康?、意義，實驗基本原理與方法，主要儀器設(shè)備及耗材，實驗方案與技術(shù)路線等）實驗?zāi)康模簩W(xué)習(xí)如何使用HTML5中的API進行客戶端儲存數(shù)據(jù)，比如WEBStorageWebSQLDatabase.實驗基本原理與方法：<html><head><title>WebStorageTester</title><metaname="viewport"content="width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;"/><linkrel="stylesheet"media="screen"href="../../css/snippets.css"/><scripttype="text/javascript"src="../../js/jquery-1.4.2.min.js"></script><scripttype="text/javascript"src="../../js/json2.js"></script><scripttype="text/javascript"src="../../js/prowebapps.js"></script><scripttype="text/javascript"src="webstorage-test.js"></script></head><body><h1class="fancy">WebStorageJSONWrapper</h1><ulid="items"><liclass="header">ItemsinStorage(taptoremove)</li></ul> <ulid="newitem"><liclass="header">NewItem</li><liclass="bordered"><inputtype="text"id="newtitle"placeholder="Title"/></li> </ul><ulid="actions"><li><buttonid="add">Add</button></li><li><buttonid="clear">Clear</button></li></ul></body></html>$(document).ready(function(){//readthedatafromlocalstoragefortheitemsvaritems=PROWEBAPPS.Storage.get("listitems");varloadTicks=newDate().getTime();functiondisplayItems(){loadTicks=newDate().getTime();$("#itemsli[class!='header']").remove();if(items){//createlistitemstodisplaythecurrentitemsfor(varii=0;ii<items.length;ii++){varitemAge=Math.floor((loadTicks-items[ii].created)/1000);$("#items").append("<li>"+items[ii].title+"(created"+itemAge+"sago)</li>");}//for}else{$("#items").append("<li>Noitems</li>");//initialisetheitemsarrayitems=[];}//if..else}//displayItems$("#add").click(function(){items.push({title:$("#newtitle").val(),created:newDate().getTime()});//savetheitemsPROWEBAPPS.Storage.set("listitems",items);displayItems();});$("#clear").click(function(){items=null;PROWEBAPPS.Storage.remove("listitems");displayItems();});displayItems();});主要儀器及耗材：基于X8086處理器的PC機RAM:2GHSSD：40G第二部分：實驗過程記錄上機房進行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論雖然W3C已經(jīng)提出了用于替代WebSQLDatabase的INDEXEDDBAPI，但是各個版本的Android都沒有提供對該規(guī)范的支持。所以基于WEBKIT瀏覽器使用WebStorage與WebSQLDatabase都是對于移動開發(fā)在線儲存最合適選擇的API組件。實驗課程名稱：網(wǎng)絡(luò)軟件編程技術(shù)實驗項目名稱構(gòu)建多頁面應(yīng)用實驗成績實驗者專業(yè)班級組別同組者實驗日期2014年6月4日一部分：實驗預(yù)習(xí)報告（包括實驗?zāi)康?、意義，實驗基本原理與方法，主要儀器設(shè)備及耗材，實驗方案與技術(shù)路線等）實驗?zāi)康模簩τ趹?yīng)用程序創(chuàng)建一個顯示界面以便能夠追蹤任務(wù)欄，并通過日期的順序進行排序。實驗基本原理與方法：TODOLIST=(function(){varMILLISECONDS_TO_DAYS=86400000;functionshowTaskDetails(selector,task){varcontainer=jQuery(selector),daysDue=task.getDaysDue();//updatetherelevanttaskdetailscontainer.find(".task-name").html();container.find(".task-description").html(task.description);if(daysDue<0){container.find(".task-daysleft").html("OVERDUEBY"+Math.abs(daysDue)+"DAYS").addClass("overdue");}else{container.find(".task-daysleft").html(daysDue+"days").removeClass("overdue");}//if..elsecontainer.slideDown();}//showTaskDetailsfunctionpopulateTaskList(){functionpad(n){returnn<10?'0'+n:n;}varlistHtml="",monthNames=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];//iteratethroughthecurrenttasksfor(varii=0;ii<currentTasks.length;ii++){vardueDateHtml="<ulclass='calendarright'>"+"<liclass='day'>"+pad(currentTasks[ii].due.getDate())+"</li>"+"<liclass='month'>"+monthNames[currentTasks[ii].due.getMonth()]+"</li>"+"<liclass='year'>"+currentTasks[ii].due.getFullYear()+"</li>"+"</ul>";//addthelistitemforthetasklistHtml+="<liid='task_"+currentTasks[ii].id+"'>"+dueDateHtml+"<divclass='task-header'>"+currentTasks[ii].name+"</div>"+"<divclass='task-details'>"+currentTasks[ii].description+"<br/>"+"<ahref='#'class='task-completeright'>COMPLETETASK</a> "+"</div>"+"</li>";}//forjQuery("ul#tasklist").html(listHtml);}//populateTaskListfunctiontoggleDetailsDisplay(listItem){//slideupanyactivetaskdetailspanesjQuery(".task-details").slideUp();//ifthecurrentitemisselectedimplementatoggleif(activeItem==listItem){activeItem=null;return;}//inthecurrentlistitemtogglethedisplayofthedetailspanejQuery(listItem).find(".task-details").slideDown();//updatetheactiveitemactiveItem=listItem;}//toggleDetailsDisplay//defineanarraythatwillholdthecurrenttasksvarcurrentTasks=[],activeItem=null;主要儀器及耗材：基于X8086處理器的PC機RAM:2GHSSD：40G第二部分：實驗過程記錄上機房進行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論完成上述工作之后，該任務(wù)清單應(yīng)用就會擁有多個界面了。雖然我們可以通過單獨的HTML頁面做到這一點。但是這樣會導(dǎo)致加載不必要的頁面，我們要實現(xiàn)類似于JQTouch的功能，創(chuàng)建包含了多個應(yīng)用界面的單獨的HTML文檔。實驗課程名稱：網(wǎng)絡(luò)軟件編程技術(shù)實驗項目名稱為應(yīng)用添加輕量級動畫與類似原生應(yīng)用的布局實驗成績實驗者專業(yè)班級組別同組者實驗日期2014年6月4日一部分：實驗預(yù)習(xí)報告（包括實驗?zāi)康?、意義，實驗基本原理與方法，主要儀器設(shè)備及耗材，實驗方案與技術(shù)路線等）實驗?zāi)康模菏褂肏TML5CSS3JAVASCRIPT等技術(shù)為應(yīng)用添加瀏覽器的動畫特性，能夠確保特定的可視化元素具有固定的位置。實驗基本原理與方法：TODOLIST=(function(){varMILLISECONDS_TO_DAYS=86400000;functionshowTaskDetails(selector,task){varcontainer=jQuery(selector),daysDue=task.getDaysDue();//updatetherelevanttaskdetailscontainer.find(".task-name").html();container.find(".task-description").html(task.description);if(daysDue<0){container.find(".task-daysleft").html("OVERDUEBY"+Math.abs(daysDue)+"DAYS").addClass("overdue");}else{container.find(".task-daysleft").html(daysDue+"days").removeClass("overdue");}//if..elsecontainer.slideDown();}//showTaskDetailsfunctionpopulateTaskList(){functionpad(n){returnn<10?'0'+n:n;}varlistHtml="",monthNames=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];//iteratethroughthecurrenttasksfor(varii=0;ii<currentTasks.length;ii++){vardueDateHtml="<ulclass='calendarright'>"+"<liclass='day'>"+pad(currentTasks[ii].due.getDate())+"</li>"+"<liclass='month'>"+monthNames[currentTasks[ii].due.getMonth()]+"</li>"+"<liclass='year'>"+currentTasks[ii].due.getFullYear()+"</li>"+"</ul>";//addthelistitemforthetasklistHtml+="<liid='task_"+currentTasks[ii].id+"'>"+dueDateHtml+"<divclass='task-header'>"+currentTasks[ii].name+"</div>"+"<divclass='task-details'>"+currentTasks[ii].description+"<br/>"+"<ahref='#'class='task-completeright'>COMPLETETASK</a> "+"</div>"+"</li>";}//forjQuery("ul#tasklist").html(listHtml);}//populateTaskListfunctiontoggleDetailsDisplay(listItem){//slideupanyactivetaskdetailspanesjQuery(".task-details").slideUp();//ifthecurrentitemisselectedimplementatoggleif(activeItem==listItem){activeItem=null;return;}//inthecurrentlistitemtogglethedisplayofthedetailspanejQuery(listItem).find(".task-details").slideDown();//updatetheactiveitemactiveItem=listItem;}//toggleDetailsDisplay//defineanarraythatwillholdthecurrenttasksvarcurrentTasks=[],activeItem=null;//definethemodulevarmodule={主要儀器及耗材：基于X8086處理器的PC機RAM:2GHSSD：40G第二部分：實驗過程記錄上機房進行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論僅僅通過HTML.CSS與JAVASCRIPT就能開發(fā)出強大并且多樣化的移動WEB應(yīng)用，但是目前為止我們并沒有實現(xiàn)原生應(yīng)用的感官。我們使用了CSS3來實現(xiàn)了動畫與過度效果。我們下一步的目標(biāo)就是使用最新的HTML5規(guī)范以及Chrome瀏覽器添加地理位置與離線支持。此時我們將會擁有一個獨立的與原生應(yīng)用非常接近的移動WEB應(yīng)用。實驗課程名稱：網(wǎng)絡(luò)軟件編程技術(shù)實驗項目名稱與云端服務(wù)器實現(xiàn)同步實驗成績實驗者專業(yè)班級組別同組者實驗日期2014年6月4日一部分：實驗預(yù)習(xí)報告（包括實驗?zāi)康?、意義，實驗基本原理與方法，主要儀器設(shè)備及耗材，實驗方案與技術(shù)路線等）實驗?zāi)康模菏褂们把氐募夹g(shù)比如：NOSQL云端托管方案，實現(xiàn)新的方式去處理數(shù)據(jù)。實驗基本原理與方法：functionsynchronizeOnline(callback){db.transaction(function(transaction){transaction.executeSql("SELECTrowidasid,*FROMtask",[],function(transaction,results){vartasksSynchronized=0;//initialiseanarraytoholdthetasks//readeachoftherowsfromthedb,andcreatetasksfor(varii=0;ii<results.rows.length;ii++){vartask=newmodule.Task(results.rows.item(ii)),taskJson=JSON.stringify(task);$.post("/_je/tasks",{_doc:taskJson,_docId:task.id},function(){//oncetheposthascompleted,incrementthecountertasksSynchronized+=1;//andchecktoseeifwehavefinishedthesyncoperationif(callback&&(tasksSynchronized===results.rows.length)){callback(tasksSynchronized,true);}//if});}//for//firethecallbackandprovideinformationonthenumber//oftaskstha

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論