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

下載本文檔

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

文檔簡(jiǎn)介

學(xué)生學(xué)號(hào)0121110680實(shí)驗(yàn)課成績(jī)武漢理工大學(xué)學(xué)生實(shí)驗(yàn)報(bào)告書(shū)實(shí)驗(yàn)課程名稱(chēng)網(wǎng)絡(luò)軟件編程技術(shù)開(kāi)課學(xué)院計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院指導(dǎo)老師姓名毛雪濤學(xué)生姓名學(xué)生專(zhuān)業(yè)班級(jí)軟件sy11012013—2014學(xué)年第二學(xué)期實(shí)驗(yàn)課程名稱(chēng)：網(wǎng)絡(luò)軟件編程技術(shù)實(shí)驗(yàn)項(xiàng)目名稱(chēng)構(gòu)建移動(dòng)HTML輸入表單實(shí)驗(yàn)成績(jī)實(shí)驗(yàn)者專(zhuān)業(yè)班級(jí)組別同組者實(shí)驗(yàn)日期2014年6月4日一部分：實(shí)驗(yàn)預(yù)習(xí)報(bào)告（包括實(shí)驗(yàn)?zāi)康?、意義，實(shí)驗(yàn)基本原理與方法，主要儀器設(shè)備及耗材，實(shí)驗(yàn)方案與技術(shù)路線(xiàn)等）實(shí)驗(yàn)?zāi)康模豪斫馊绾瓮ㄟ^(guò)一些簡(jiǎn)單的CSS（包括CSS3）讓W(xué)EB表單具有與原生應(yīng)用類(lèi)似的感官與體驗(yàn)，以及如何規(guī)范大量Javascript應(yīng)用的組織結(jié)構(gòu)。實(shí)驗(yàn)基本原理與方法：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機(jī)RAM:2GHSSD：40G第二部分：實(shí)驗(yàn)過(guò)程記錄上機(jī)房進(jìn)行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論面向移動(dòng)WEB的HTML與面向桌面的HTML相差無(wú)幾---只不過(guò)屏幕尺寸更小。此外，人們?cè)絹?lái)越多的將精力放在了性能優(yōu)化上，因?yàn)橥ㄟ^(guò)移動(dòng)寬帶連接進(jìn)行瀏覽時(shí)，移動(dòng)設(shè)備的帶塊要低很多，所以我們要學(xué)會(huì)使用適當(dāng)?shù)募夹g(shù)使得應(yīng)用在硬件設(shè)備遠(yuǎn)遜于桌面設(shè)備的移動(dòng)設(shè)備上有更好的顯示。實(shí)驗(yàn)課程名稱(chēng)：網(wǎng)絡(luò)軟件編程技術(shù)實(shí)驗(yàn)項(xiàng)目名稱(chēng)HTML5StorageAPI實(shí)驗(yàn)成績(jī)實(shí)驗(yàn)者專(zhuān)業(yè)班級(jí)組別同組者實(shí)驗(yàn)日期2014年6月4日一部分：實(shí)驗(yàn)預(yù)習(xí)報(bào)告（包括實(shí)驗(yàn)?zāi)康?、意義，實(shí)驗(yàn)基本原理與方法，主要儀器設(shè)備及耗材，實(shí)驗(yàn)方案與技術(shù)路線(xiàn)等）實(shí)驗(yàn)?zāi)康模簩W(xué)習(xí)如何使用HTML5中的API進(jìn)行客戶(hù)端儲(chǔ)存數(shù)據(jù)，比如WEBStorageWebSQLDatabase.實(shí)驗(yàn)基本原理與方法：<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機(jī)RAM:2GHSSD：40G第二部分：實(shí)驗(yàn)過(guò)程記錄上機(jī)房進(jìn)行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論雖然W3C已經(jīng)提出了用于替代WebSQLDatabase的INDEXEDDBAPI，但是各個(gè)版本的Android都沒(méi)有提供對(duì)該規(guī)范的支持。所以基于WEBKIT瀏覽器使用WebStorage與WebSQLDatabase都是對(duì)于移動(dòng)開(kāi)發(fā)在線(xiàn)儲(chǔ)存最合適選擇的API組件。實(shí)驗(yàn)課程名稱(chēng)：網(wǎng)絡(luò)軟件編程技術(shù)實(shí)驗(yàn)項(xiàng)目名稱(chēng)構(gòu)建多頁(yè)面應(yīng)用實(shí)驗(yàn)成績(jī)實(shí)驗(yàn)者專(zhuān)業(yè)班級(jí)組別同組者實(shí)驗(yàn)日期2014年6月4日一部分：實(shí)驗(yàn)預(yù)習(xí)報(bào)告（包括實(shí)驗(yàn)?zāi)康摹⒁饬x，實(shí)驗(yàn)基本原理與方法，主要儀器設(shè)備及耗材，實(shí)驗(yàn)方案與技術(shù)路線(xiàn)等）實(shí)驗(yàn)?zāi)康模簩?duì)于應(yīng)用程序創(chuàng)建一個(gè)顯示界面以便能夠追蹤任務(wù)欄，并通過(guò)日期的順序進(jìn)行排序。實(shí)驗(yàn)基本原理與方法：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機(jī)RAM:2GHSSD：40G第二部分：實(shí)驗(yàn)過(guò)程記錄上機(jī)房進(jìn)行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論完成上述工作之后，該任務(wù)清單應(yīng)用就會(huì)擁有多個(gè)界面了。雖然我們可以通過(guò)單獨(dú)的HTML頁(yè)面做到這一點(diǎn)。但是這樣會(huì)導(dǎo)致加載不必要的頁(yè)面，我們要實(shí)現(xiàn)類(lèi)似于JQTouch的功能，創(chuàng)建包含了多個(gè)應(yīng)用界面的單獨(dú)的HTML文檔。實(shí)驗(yàn)課程名稱(chēng)：網(wǎng)絡(luò)軟件編程技術(shù)實(shí)驗(yàn)項(xiàng)目名稱(chēng)為應(yīng)用添加輕量級(jí)動(dòng)畫(huà)與類(lèi)似原生應(yīng)用的布局實(shí)驗(yàn)成績(jī)實(shí)驗(yàn)者專(zhuān)業(yè)班級(jí)組別同組者實(shí)驗(yàn)日期2014年6月4日一部分：實(shí)驗(yàn)預(yù)習(xí)報(bào)告（包括實(shí)驗(yàn)?zāi)康?、意義，實(shí)驗(yàn)基本原理與方法，主要儀器設(shè)備及耗材，實(shí)驗(yàn)方案與技術(shù)路線(xiàn)等）實(shí)驗(yàn)?zāi)康模菏褂肏TML5CSS3JAVASCRIPT等技術(shù)為應(yīng)用添加瀏覽器的動(dòng)畫(huà)特性，能夠確保特定的可視化元素具有固定的位置。實(shí)驗(yàn)基本原理與方法：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機(jī)RAM:2GHSSD：40G第二部分：實(shí)驗(yàn)過(guò)程記錄上機(jī)房進(jìn)行代碼調(diào)試工作，顯示如下圖所示的即為調(diào)試成功。第三部分結(jié)果與討論僅僅通過(guò)HTML.CSS與JAVASCRIPT就能開(kāi)發(fā)出強(qiáng)大并且多樣化的移動(dòng)WEB應(yīng)用，但是目前為止我們并沒(méi)有實(shí)現(xiàn)原生應(yīng)用的感官。我們使用了CSS3來(lái)實(shí)現(xiàn)了動(dòng)畫(huà)與過(guò)度效果。我們下一步的目標(biāo)就是使用最新的HTML5規(guī)范以及Chrome瀏覽器添加地理位置與離線(xiàn)支持。此時(shí)我們將會(huì)擁有一個(gè)獨(dú)立的與原生應(yīng)用非常接近的移動(dòng)WEB應(yīng)用。實(shí)驗(yàn)課程名稱(chēng)：網(wǎng)絡(luò)軟件編程技術(shù)實(shí)驗(yàn)項(xiàng)目名稱(chēng)與云端服務(wù)器實(shí)現(xiàn)同步實(shí)驗(yàn)成績(jī)實(shí)驗(yàn)者專(zhuān)業(yè)班級(jí)組別同組者實(shí)驗(yàn)日期2014年6月4日一部分：實(shí)驗(yàn)預(yù)習(xí)報(bào)告（包括實(shí)驗(yàn)?zāi)康?、意義，實(shí)驗(yàn)基本原理與方法，主要儀器設(shè)備及耗材，實(shí)驗(yàn)方案與技術(shù)路線(xiàn)等）實(shí)驗(yàn)?zāi)康模菏褂们把氐募夹g(shù)比如：NOSQL云端托管方案，實(shí)現(xiàn)新的方式去處理數(shù)據(jù)。實(shí)驗(yàn)基本原理與方法：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. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論