《Web前端開發(fā)技術(shù)》-HTML5習(xí)題答案_第1頁(yè)
《Web前端開發(fā)技術(shù)》-HTML5習(xí)題答案_第2頁(yè)
《Web前端開發(fā)技術(shù)》-HTML5習(xí)題答案_第3頁(yè)
《Web前端開發(fā)技術(shù)》-HTML5習(xí)題答案_第4頁(yè)
《Web前端開發(fā)技術(shù)》-HTML5習(xí)題答案_第5頁(yè)
已閱讀5頁(yè)，還剩37頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第一章HTML5應(yīng)用概述１．什么是移動(dòng)互聯(lián)？是移動(dòng)和互聯(lián)網(wǎng)融合的產(chǎn)物，不是簡(jiǎn)單的加法，而是乘法———移動(dòng)互聯(lián)網(wǎng)＝移動(dòng)×互聯(lián)網(wǎng)。移動(dòng)互聯(lián)網(wǎng)繼承了移動(dòng)隨時(shí)隨地和互聯(lián)網(wǎng)分享、開放、互動(dòng)的優(yōu)勢(shì)，是整合二者優(yōu)勢(shì)的“升級(jí)版本”。２．移動(dòng)互聯(lián)開發(fā)的技術(shù)有哪些？對(duì)于移動(dòng)互聯(lián)開發(fā)，由于其所涉及的智能設(shè)備平臺(tái)不同，采取的語(yǔ)言也不相同，主要包括：（１）Ａｎｄｒｏｉｄ開發(fā)。采?。谩ⅲ茫?、Ｊａｖａ等開發(fā)語(yǔ)言，Ｊａｖａ作為Ａｎｄｒｏｉｄ的用戶交互語(yǔ)言成為Ａｎｄｒｏｉｄ開發(fā)必備技術(shù)，而喜歡Ｃ、Ｃ＋＋的開發(fā)人員可借助Ａｎｄｒｏｉｄ提供的ＮＤＫ實(shí)現(xiàn)Ａｐｐ的開發(fā)。其開發(fā)工具主要是Ｅｃｌｉｐｓｅ和ＡｎｄｒｏｉｄＳｔｕｄｉｏ。（２）ｉＯＳＡＰＰ開發(fā)。這個(gè)平臺(tái)是蘋果智能設(shè)備使用的標(biāo)準(zhǔn)平臺(tái)，針對(duì)蘋果平臺(tái)開發(fā)的語(yǔ)言主要是ＯｂｊｅｃｔＣ語(yǔ)言以及新的Ｓｗｉｆｔ語(yǔ)言，開發(fā)工具主要是運(yùn)行在ＭＡＣ機(jī)上的ｘｃｏｄｅ，而對(duì)于Ｓｗｉｆｔ語(yǔ)言必須使用ｘｃｏｄｅ６以上版本。（３）ＷｉｎｄｏｗｓＡＰＰ開發(fā)。其與桌面Ｗｉｎｄｏｗｓ系統(tǒng)同屬于微軟公司，其開發(fā)語(yǔ)言借助ＮＥＴ平臺(tái)而更加豐富多樣，開發(fā)者可根據(jù)自己掌握的任何一種ＮＥＴ語(yǔ)言實(shí)現(xiàn)開發(fā)。３．寫出ＪＤＫ的詳細(xì)安裝步驟。（1）從下載最新版本的JavaSE，注意操作系統(tǒng)版本要與使用的操作系統(tǒng)一致，目前提供包括32位和64位安裝，操作系統(tǒng)對(duì)應(yīng)有Linux、Windows、Mac等;（2）windows安裝是可執(zhí)行文件exe，下載后直接雙擊開始執(zhí)行安裝;（3）安裝過程分為JDK和JRE兩個(gè)部分的安裝;（4）所有安裝只需要按照按照向?qū)J(rèn)選擇下一步即可完成;（5）安裝完成后，默認(rèn)JDK和JRE都被安裝在C:\ProgramFiles\Java目錄下;（6）設(shè)置PATH環(huán)境變量，將JDK安裝目錄下的bin目錄設(shè)置在PATH變量中，注意windows的路徑分割符是分號(hào)（;）；（7）設(shè)置JAVA_HOME變量，是JavaJDK安裝目錄即bin目錄的父目錄；（8）JDK安裝完成。４．寫出Ｔｏｍｃａｔ解壓版本的安裝配置步驟。Tomcat安裝分為兩個(gè)版本：壓縮版本和安裝版本。對(duì)于壓縮版本：（1）壓縮版本下載后直接解壓到目錄下即可，如C:\tomcat；（2）設(shè)置JAVA_HOME環(huán)境變量，如果已經(jīng)設(shè)置可以忽略（3）運(yùn)行C:\tomcat\bin目錄下的startup.bat或者shutdown.sh以啟動(dòng)或者關(guān)閉Tomcat對(duì)于安裝版本：（1）運(yùn)行下載的安裝程序，按照安裝向?qū)o需改變?nèi)魏卧O(shè)置即可實(shí)現(xiàn)安裝（2）安裝后Tomcat提供一個(gè)監(jiān)控程序可以方便控制Tomcat的啟動(dòng)和關(guān)閉第二章HTML5技術(shù)（31-1）一、填空題1.超文本標(biāo)記語(yǔ)言2.標(biāo)簽3..html，.htm4.<標(biāo)簽名[<屬性列表>]>標(biāo)簽內(nèi)容</標(biāo)簽名>，<標(biāo)簽名[<屬性列表>]/>5.<ahref=”b.html#booktitle”>…</a>6．絕對(duì)地址，相對(duì)地址，絕對(duì)路徑，相對(duì)地址，當(dāng)前瀏覽的文件所在路徑7．Input，type，texthiddenbutton，checkbox，file，image，password，radio，reset，submit，email，url，number，range，date，search，color二、問答題1．寫出HTML5文檔的結(jié)構(gòu)，并解釋每個(gè)標(biāo)簽的含義。答案：<!DOCTYPEHTML> <!html5標(biāo)準(zhǔn)網(wǎng)頁(yè)聲明><html> <!—html文檔--><head> <!--文檔頭部--><metacharset="utf-8"><title>網(wǎng)頁(yè)標(biāo)題</title></head><body> <!--文檔主體-->...</body></html>2.HTML5的標(biāo)簽可以包括屬性，而ＨＴＭＬ５中每個(gè)標(biāo)簽都可以包括的標(biāo)簽被稱為HTML5的公共屬性，寫出你知道的所有公共屬性，并說明其含義。答案：id：規(guī)定元素的唯一id。class：規(guī)定元素的一個(gè)或多個(gè)類名。title：規(guī)定有關(guān)元素的額外信息。Style：規(guī)定元素的行內(nèi)CSS樣式。Draggable：規(guī)定元素是否可拖動(dòng)。Contextmenu:規(guī)定元素的上下文菜單。上下文菜單在用戶點(diǎn)擊元素時(shí)顯示。3.請(qǐng)按表2-14的格式制作一個(gè)學(xué)籍表。答案：<tableborder="1"width="600"> <tr> <th>姓名</th><th>性別</th><th>專業(yè)</th><th>輔導(dǎo)員</th></tr><tr> <td>吳曉杰</td><td>女</td><td>計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)</td><tdrowspan="2">劉凱</td></tr><tr> <td>張力</td><td>男</td><td>計(jì)算機(jī)應(yīng)用</td></tr></table>4．請(qǐng)按圖2-2所示制作一個(gè)注冊(cè)網(wǎng)頁(yè)。答案<form> <h3>用戶注冊(cè)頁(yè)面</h3><p> 用戶名： <inputtype="text"name="user"><br>密碼：  <inputtype="password"name="pwd"><br>確認(rèn)密碼：<inputtype="password"name="pwd"><br></p><p> 您的年齡層次是？<br> <inputtype="radio"name="age">16周歲以下<inputtype="radio"name="age">17-22周歲<inputtype="radio"name="age">23-28周歲<inputtype="radio"name="age">29周歲以上</p><p> 您的個(gè)人愛好有：<br> <inputtype="checkbox"name="aihao">交友<inputtype="checkbox"name="aihao">上網(wǎng)<inputtype="checkbox"name="aihao">看書<inputtype="checkbox"name="aihao">籃球<inputtype="checkbox"name="aihao">游戲<inputtype="checkbox"name="aihao">其他</p><p> 您來自哪里？<br> <selectvalue="北京市"> <option>北京市</option><option>河北省</option><option>遼寧省</option><option>山東省</option></select></p><p> 自我介紹<br><textareacols="60"rows="4"></textarea></p></form>第三章CSS3技術(shù)（36）1．設(shè)置一個(gè)表頭底紋為綠色的表格。答案：<!doctypehtml><html><head><metacharset="utf-8"><title>表頭底紋綠色</title><styletype="text/css"> table{ width:600px; } thead{ background:#090;}</style></head><body> <tableborder="1"> <thead><tr> <th>姓名</th><th>性別</th><th>年齡</th><th>住址</th></tr></thead><tr> <td>王芳</td><td>女</td><td>20</td><td>承德市</td></tr><tr> <td>張杰</td><td>女</td><td>19</td><td>石家莊</td></tr><tr> <td>趙健強(qiáng)</td><td>男</td><td>20</td><td>衡水市</td></tr></table></body></html>圖3-10圖3-10習(xí)題2按鈕設(shè)計(jì)答案：<!doctypehtml><html><head><metacharset="utf-8"><title>按鈕樣式</title><styletype="text/css">button{ height:60px; width:200px; background:#09F; font-size:24px; border-radius:10px;}button:hover{ background:#006; color:white;}</style></head><body> <button>Download</button></body></html>3.設(shè)計(jì)一個(gè)三列布局的個(gè)人網(wǎng)頁(yè)，利用背景屬性、邊框?qū)傩院投嗔袑傩栽O(shè)計(jì)界面效果。答案：div{ column-count:3; column-width:20em; column-gap:3em; column-rule:6pxsolidblue; -moz-column-count:3; -moz-column-width:20em; -moz-column-gap:3em; -moz-column-rule:6pxsolidblue; -webkit-column-count:3; -webkit-column-width:20em; -webkit-column-gap:5em; -webkit-column-rule:6pxsolidblue; background:#999;}圖3-11習(xí)題圖3-11習(xí)題4菜單設(shè)計(jì)答案：<!doctypehtml><html><head><metacharset="utf-8"><title>水平菜單</title><styletype="text/css">a{ height:30px; width:100px; display:inline-block; background:#CCC; font-family:"宋體"; font-size:14px; text-decoration:none; text-align:center; line-height:30px; color:#333; border-right:2pxsolidwhite;}li{ float:left; list-style-type:none; }a:hover{ background:red; transform:translate(2px,2px); color:white; }</style></head><body><ul> <li><ahref="#">首頁(yè)</a></li><li><ahref="#">產(chǎn)品介紹</a></li><li><ahref="#">服務(wù)介紹</a></li><li><ahref="#">技術(shù)支持</a></li><li><ahref="#">立刻購(gòu)買</a></li><li><ahref="#">聯(lián)系我們</a></li></ul></body></html>5.利用translate()函數(shù)設(shè)計(jì)一個(gè)立方體。答案：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>旋轉(zhuǎn)的立方體</title><style>.stage{perspective:800px;}.container{width:150px;height:150px;margin:200pxauto;position:relative;height:200px;transition:5s;transform-origin:centercenter75px;transform-style:preserve-3d;backface-visibility:hidden;}.container.side{position:absolute;width:150px;height:150px;border:2pxsolid#0033FF;text-align:center;line-height:150px;}.left{left:-152px;transform:rotateY(90deg);transform-origin:right;background:url(../images/photo5.jpg);background-size:100%100%;}.right{left:152px;transform:rotateY(-90deg);transform-origin:left;background:url(../images/photo4.jpg);background-size:100%100%;}.top{top:-152px;transform:rotateX(-90deg);transform-origin:bottom;background:url(../images/photo3.jpg);background-size:100%100%;}.bottom{top:152px;transform:rotateX(90deg);transform-origin:top;background:url(../images/photo2.jpg);background-size:100%100%;}.front{transform:translateZ(152px);z-index:2;background:url(../images/photo1.jpg);background-size:100%100%;}.back{z-index:1;background:url(../images/photo.jpg);background-size:100%100%;}.container:hover{transform:rotateY(360deg)}</style></head><body><divclass="stage"><divclass="container"><divclass="sidefront"></div><divclass="sideback"></div><divclass="sideleft"></div><divclass="sideright"></div><divclass="sidetop"></div><divclass="sidebottom"></div></div></div></body></html>6.利用CSS3變形方法制作一個(gè)照片墻效果的網(wǎng)頁(yè)。答案：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>照片墻</title><styletype="text/css"> .pic{ background:#ffc; margin:0auto; width:980px; height:700px; position:absolute;/*絕對(duì)定位*/ top:50%; left:50%; transform:translate(-50%,-50%);/*移動(dòng)*/ } .picimg{ width:160px; height:260px; margin:20px; border:10pxsolid#fff; box-shadow:0px4px3px#ccc; } .picimg:nth-of-type(1), .picimg:nth-of-type(5){ transform:rotate(5deg); } .picimg:nth-of-type(2), .picimg:nth-of-type(6){ transform:rotate(-3deg); } .picimg:nth-of-type(3), .picimg:nth-of-type(8){ transform:rotate(2deg); } .picimg:nth-of-type(4), .picimg:nth-of-type(7){ transform:rotate(-7deg); } .picimg:hover{ transform:rotate(0deg); transform:scale(1.1); }</style></head><body><divclass="pic"><imgsrc="img/1.jpg"><imgsrc="img/2.jpg"><imgsrc="img/3.jpg"><imgsrc="img/4.jpg"><imgsrc="img/2.jpg"><imgsrc="img/3.jpg"><imgsrc="img/4.jpg"><imgsrc="img/1.jpg"></div></body></html>第四章JavaScript技術(shù)（39）１．列舉ＤＯＭ里常用的至少４個(gè)對(duì)象，并寫出ｗｉｎｄｏｗ對(duì)象的常用方法（至少５個(gè)）。（1）window對(duì)象，代表了當(dāng)前網(wǎng)頁(yè)瀏覽的窗口或框架，方法常見的有parseInt()將數(shù)字串轉(zhuǎn)換成對(duì)應(yīng)進(jìn)制的整型、parseFloat()將數(shù)字轉(zhuǎn)換成浮點(diǎn)數(shù)據(jù)、alert()警告對(duì)話框、confirm()確認(rèn)對(duì)話框、setInterval()間隔一定時(shí)間執(zhí)行給定的代碼、setTimeout()等待給定時(shí)間后執(zhí)行一次給定代碼、clearInteval()清除間隔執(zhí)行操作、clearTimeout()清除等待執(zhí)行操作；（2）document對(duì)象，當(dāng)前窗口加載的HTML文檔對(duì)象（3）navigator對(duì)象，當(dāng)前窗口的導(dǎo)航對(duì)象（4）history對(duì)象，當(dāng)前瀏覽器的瀏覽歷史對(duì)象（5）location對(duì)象，當(dāng)前訪問的URL地址對(duì)象（6）console對(duì)象，瀏覽器控制臺(tái)對(duì)象，通常用用來向控制臺(tái)輸出消息２．簡(jiǎn)述文檔對(duì)象模型ＤＯＭ里ｄｏｃｕｍｅｎｔ對(duì)象常用的訪問節(jié)點(diǎn)的方法并作簡(jiǎn)單說明。獲得節(jié)點(diǎn)對(duì)象使用方法getElementById()，該方法通過HTML標(biāo)簽的id屬性獲取HTML標(biāo)簽的JavaScript對(duì)象；向?yàn)g覽器窗口輸出文本方法write()，該方法將傳入?yún)?shù)以文本形式輸出到瀏覽器窗口并顯示在網(wǎng)頁(yè)上；３．通過ＨＴＭＬ５、ＣＳＳ３、ＪａｖａＳｃｒｉｐｔ編寫五子棋游戲，無須設(shè)計(jì)計(jì)算機(jī)玩家。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><styletype="text/css">#gamepanel{width:600px;height:600px;position:relative;border:1pxsolidred;background-color:pink;}.vline{border-top:1pxblacksolid;}.hline{border-left:1pxblacksolid;}.line{position:absolute;}.bqz{background:white;border-radius:16px;}.wqz{background:black;border-radius:16px;}.qz{width:32px;height:32px;position:absolute;}</style><scripttype="text/javascript">varGZW=32;//棋盤每個(gè)格子的寬度varGZH=32;//棋盤每個(gè)格子的高度varQPW=512;//棋盤寬度varQPH=512;//棋盤高度varINITX=44;//棋子初始化x位置varINITY=44;//棋子初始化y位置varBLACK=1;varWHITE=-1;varcurrentColor=WHITE;//當(dāng)前要下的棋子，-1為白色，1為黑色varqiziArray=newArray();//存儲(chǔ)已經(jīng)下的棋子，0無，1為黑色，-1白色vargameover=false;functioninitArray(){for(vari=0;i<QPW/GZW;i++){qiziArray[i]=newArray();for(varj=0;j<QPH/GZH;j++){ qiziArray[i][j]=0; }}}functiondrawgamepanel(){varic=QPW/GZW;for(vari=0;i<=ic;i++){vard=document.createElement("div");//繪制橫線d.className="vlineline";d.style.width=QPW+"px";d.style.left=INITX+"px";d.style.top=INITY+i*GZH+"px"; d.addEventListener("click",function(event){ //當(dāng)點(diǎn)擊棋子時(shí)，取消冒泡行為，防止出發(fā)棋盤點(diǎn)擊事件 (event.stopPropagation())||(window.event.cancelBubble=true); });varp=document.getElementById("gamepanel");p.appendChild(d);d=document.createElement("div");//繪制豎線d.className="hlineline"; d.addEventListener("click",function(event){ //當(dāng)點(diǎn)擊棋子時(shí)，取消冒泡行為，防止出發(fā)棋盤點(diǎn)擊事件 (event.stopPropagation())||(window.event.cancelBubble=true); });d.style.height=QPH+"px";d.style.left=INITX+i*GZW+"px";d.style.top=INITY+"px";p.appendChild(d);} initArray();//初始化記錄數(shù)組} functionxy(mx,my){//計(jì)算棋子的坐標(biāo) varcurrentQz={}; currentQz.mx=mx; currentQz.my=my; //鼠標(biāo)坐標(biāo)是相對(duì)父節(jié)點(diǎn)的偏移值，減去棋盤下棋的開始位置初始化值除以格子就是鼠標(biāo)點(diǎn)擊棋盤哪個(gè)格子索引 //加0.5是為了四舍五入 currentQz.i=parseInt(((mx-INITX)/GZW+0.5),10);//二位數(shù)組的坐標(biāo) currentQz.j=parseInt(((my-INITY)/GZH+0.5),10); currentQz.ax=INITX+currentQz.i*GZW;//十字位置坐標(biāo) currentQz.ay=INITY+currentQz.j*GZH;//十字位置 currentQz.x=currentQz.ax-GZW/2;//下棋坐標(biāo) currentQz.y=currentQz.ay-GZH/2; returncurrentQz; }functiondrawqz(evt){varevent=window.event||evt;varmx=event.offsetX;//鼠標(biāo)坐標(biāo)varmy=event.offsetY; varqzxy=xy(mx,my);//計(jì)算棋子相關(guān)坐標(biāo) if(gameover)return; //判斷該位置是否已經(jīng)下棋 if(qiziArray[qzxy.i][qzxy.j]!=0){//已經(jīng)有棋子了 return;//不下 }vard=document.createElement("div");if(currentColor==BLACK){ d.className="wqzqz";}else{d.className="bqzqz";} //記錄該位置已經(jīng)下棋 qiziArray[qzxy.i][qzxy.j]=currentColor; d.addEventListener("click",function(event){ //當(dāng)點(diǎn)擊棋子時(shí)，取消冒泡行為，防止出發(fā)棋盤點(diǎn)擊事件 (event.stopPropagation())||(window.event.cancelBubble=true); });currentColor=0-currentColor;//換顏色d.style.left=qzxy.x+"px";d.style.top=qzxy.y+"px";varp=document.getElementById("gamepanel");p.appendChild(d); console.log(qzxy); if(isWin(qzxy)){ return; }}//判斷當(dāng)前下棋方是否贏了functionisWin(cz){//當(dāng)前下的顏色varcc=qiziArray[cz.i][cz.j];//水平方向判斷是否夠五個(gè)varshuiping=1;for(vari=cz.i-1;i>=0;i--){if(qiziArray[i][cz.j]==cc){ shuiping++; }else{ break; }}for(vari=cz.i+1;i<qiziArray.length;i++){if(qiziArray[i][cz.j]==cc){ shuiping++; }else{ break; }}//垂直方向判斷varchuizhi=1;for(varj=cz.j-1;j>=0;j--){if(qiziArray[cz.i][j]==cc){ chuizhi++; }else{ break; }}for(varj=cz.j+1;j<qiziArray[cz.i].length;j++){if(qiziArray[cz.i][j]==cc){ chuizhi++; }else{ break; }}//左上右下45度方向varzuoshang=1;for(vari=cz.i-1,j=cz.j-1;j>=0&&i>=0;j--,i--){if(qiziArray[i][j]==cc){ zuoshang++; }else{ break; }}for(vari=cz.i+1,j=cz.j+1;i<qiziArray.length&&j<qiziArray[cz.i].length;i++,j++){if(qiziArray[i][j]==cc){ zuoshang++; }else{ break; }}//右上左下45度方向varyoushang=1;for(vari=cz.i+1,j=cz.j-1;j>=0&&i<qiziArray.length;j--,i++){if(qiziArray[i][j]==cc){ youshang++; }else{ break; }}for(vari=cz.i-1,j=cz.j+1;i>=0&&j<qiziArray[cz.i].length;i--,j++){if(qiziArray[i][j]==cc){ youshang++; }else{ break; }}if(shuiping==5||chuizhi==5||zuoshang==5||youshang==5){alert(cc==BLACK?"黑方贏了！":"白方贏了！"); gameover=true; returntrue;}returnfalse;}functionstartGame(){gameover=false; varp=document.getElementById("gamepanel"); p.innerHTML=""; drawgamepanel();}</script></head><body><table><tr><tdwidth="100px"><buttononclick="startGame();">開始游戲</button></td><td><divid="gamepanel"onclick="drawqz(event)"></div></td></tr></table></body><scripttype="text/javascript">drawgamepanel();</script></html>第五章數(shù)據(jù)傳輸格式（19）１．編寫一個(gè)網(wǎng)站用戶的ＪＳＯＮ對(duì)象，并通過ＪａｖａＳｃｒｉｐｔ語(yǔ)言的ｄｏｃｕｍｅｎｔ.ｗｒｉｔｅ（）方法將所有信息顯示在瀏覽器窗口中。<!DOCTYPEhtml><html><head><title>JSON對(duì)象應(yīng)用</title></head><body><scripttype=”text/javascript”>varuser={id”:”1”,”name”:”John”,”relname”:”張三”,”email”:”zs@163.com”,”mobile”:”12356897”};document.write(user.id);document.write();</script></body></html>２．通過ＸＭＬ格式編寫網(wǎng)站用戶資料，并將之輸出到瀏覽器窗口中。<!DOCTYPEhtml><html><head><title>JavaScript解析XML數(shù)據(jù)</title></head><body><scripttype="text/xml"id="a"><用戶id="123"><姓名>張三</姓名> <性別>男</性別> <電子郵件>zs@</電子郵件></用戶></script> <scripttype="text/javascript"> varxml=document.getElementById("a"); varparser=newDOMParser(); varxmlDoc=parser.parseFromString(xml.text,"text/xml"); varresovler=document.createNSResolver(xmlDoc.ownerDocument==null?xmlDoc.documentElement:xmlDoc.ownerDocument.documentElement); //XPath等價(jià)/用戶/姓名 varxpathResult=document.evaluate("http://姓名",xmlDoc,resovler,XPathResult.STRING_TYPE,null); //XPath等價(jià)/用戶/@id varxpathResult1=document.evaluate("http://@id",xmlDoc,resovler,XPathResult.STRING_TYPE,null); document.write("來自XML中的姓名："+xpathResult.stringValue); document.write("<br>"); document.write("來自XML中的編號(hào)："+xpathResult1.stringValue); </script></body></html>３．定義一個(gè)班級(jí)信息的ＸＭＬ格式文件，在ＸＭＬ文件中包括本班級(jí)所有學(xué)生的資料。<?xmlversion=”1.0”encoding=”UTF-8”?><班級(jí)><學(xué)生學(xué)號(hào)=”201101010501”><姓名>張三</姓名><性別>男</性別></學(xué)生><學(xué)生學(xué)號(hào)=”201101010502”><姓名>王芳</姓名><性別>女</性別></學(xué)生>…</班級(jí)>４．通過ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ對(duì)象向服務(wù)器端發(fā)送最新通知列表的遠(yuǎn)程請(qǐng)求，并將請(qǐng)求獲得的新聞列表顯示在界面上。<!DOCTYPEhtml><html><head><title></title></head><body><divid="newslist"></div></body><scripttype="text/javascript">varxmlhttp;functionloadXMLDoc(url){xmlhttp=null;if(window.XMLHttpRequest){//創(chuàng)建請(qǐng)求對(duì)象xmlhttp=newXMLHttpRequest();}elseif(window.ActiveXObject){//對(duì)于IE兼容xmlhttp=newActiveXObject("Microsoft.XMLHTTP");}if(xmlhttp!=null){xmlhttp.onreadystatechange=loadComplete;xmlhttp.open("GET",url,true);xmlhttp.send(null);}else{alert("對(duì)象不存在，不支持AJAX操作");}}functionloadComplete(){if(xmlhttp.readyState==4){//4="加載完成"if(xmlhttp.status==200)//200=OK{//處理數(shù)據(jù) varnews=xmlhttp.responseXML; variterator=document.evaluate('//CD',news,null,XPathResult.UNORDERED_NODE_ITERATOR_TYPE,null); varnewstext="<ul>"; try{ varthisNode=iterator.iterateNext(); while(thisNode){ vartitle=thisNode.getElementsByTagName("標(biāo)題")[0].textContent; varnewid=thisNode.getElementsByTagName("編號(hào)")[0].textContent; vars="<li><ahref='newdetail?id"+newid+"'>"+title+"</a></li>"; thisNode=iterator.iterateNext(); } newstext+=s+"</ul>"; } catch(e){ dump('Error:Documenttreemodifiedduringiteration'+e); }document.getElementById('newslist').innerHTML=newstext;}}else{alert("數(shù)據(jù)獲取失敗！");}}}</script></html>５．編寫兩個(gè)網(wǎng)站應(yīng)用，一個(gè)網(wǎng)站使用ＪＳＰ實(shí)現(xiàn)ＪＳＯＮ或ＸＭＬ格式數(shù)據(jù)輸出，另一個(gè)網(wǎng)站通過ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ對(duì)象發(fā)送跨域請(qǐng)求，并將獲得的數(shù)據(jù)顯示在瀏覽器中。請(qǐng)求端：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>AJAX跨域請(qǐng)求</title></head><body><divid="result"></div></body><scripttype="text/javascript">varxmlhttp;functionloadData(url){xmlhttp=null;if(window.XMLHttpRequest){//創(chuàng)建請(qǐng)求對(duì)象xmlhttp=newXMLHttpRequest();}elseif(window.ActiveXObject){//對(duì)于IE兼容xmlhttp=newActiveXObject("Microsoft.XMLHTTP");}if(xmlhttp!=null){xmlhttp.onreadystatechange=loadComplete;xmlhttp.open("GET",url,true);xmlhttp.send(null);}else{alert("對(duì)象不存在，不支持AJAX操作");}}functionloadComplete(){if(xmlhttp.readyState==4){//4="加載完成"if(xmlhttp.status==200)//200=OK{//處理數(shù)據(jù) varjsondata=xmlhttp.responseText; vardata=JSON.parse(jsondata); varresult="姓名："++",年齡："+data.age+"，喜好："+data.fav;document.getElementById('result').innerHTML=result;}else{alert("數(shù)據(jù)獲取失??！");}}}loadData("09:8080/data.jsp");</script></html>09服務(wù)器端data.jsp內(nèi)容：<%@pagepageEncoding=”UTF-8”%><%//執(zhí)行非憑據(jù)跨域請(qǐng)求，可以使用*,所有程序可跨域請(qǐng)求該數(shù)據(jù)response.setHeader(“Access-Control-Allow-Origin”,”*”);%>{“name”:“Tom”,“age”:12,“fav”:“Basketball”}第六章文檔對(duì)象模型（17）１．在網(wǎng)頁(yè)上編寫顯示星期數(shù)的電子表。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>電子表，帶星期</title></head><body><divid="clock"></div><scripttype="text/javascript">functionclock(){ vard=newDate(); vary=d.getFullYear(); varm=d.getMonth()+1; vard1=d.getDate(); varh=d.getHours(); varmm=d.getMinutes(); vars=d.getSeconds(); varw=d.getDay(); varc=document.getElementById("clock"); varweek=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; c.innerHTML=y+"年"+m+"月"+d1+"日"+h+"時(shí)"+mm+"分"+s+"秒"+week[w]; } clock(); setInterval("clock()",1000);</script></body></html>２．在網(wǎng)頁(yè)上編寫猜數(shù)字的游戲。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>猜數(shù)字</title></head><body><inputtype="number"id="num"><buttononclick="guessnum();">提交</button><buttononclick="n=parseInt(Math.random()*100+1,10);count=0;">重來</button><labelid="message"></label><scripttype="text/javascript">varn=parseInt(Math.random()*100+1,10); varcount=0;functionguessnum(){ varmsg=document.getElementById("message"); varv=document.getElementById("num").value; count++; if(v>n){ msg.innerText="你輸入的數(shù)大了"; } if(v<n){ msg.innerText="你輸入的數(shù)小了"; } if(v==n){ msg.innerText="恭喜你，猜對(duì)了！共猜了"+count+"次"; } }</script></body></html>３．網(wǎng)頁(yè)上常見的對(duì)話框包括哪幾個(gè)？常見對(duì)話框包括alert，confirm和prompt，都是window對(duì)象得方法。４．ｓｅｔＩｎｔｅｒｖａｌ（）和ｓｅｔＴｉｍｅｏｕｔ（）方法的區(qū)別是什么？varid=setInterval(code,delay)方法每間隔delay毫秒執(zhí)行一次code，一直循環(huán)執(zhí)行，直到調(diào)用clearInterval(id)方法清理，才會(huì)停止。varid=setTimeout(code,delay)方法延遲delay毫秒后執(zhí)行，但只執(zhí)行一次，執(zhí)行后或者運(yùn)行clearTimeout(id);結(jié)束。５．判斷用戶使用的瀏覽器類型以及版本，并通過對(duì)話框提示用戶。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>瀏覽器判斷</title><scripttype="text/javascript">

var

uAgent

=

navigator.userAgent.toLowerCase();varbrowser=

{}; varb=""; console.log(uAgent.match(/chrome\/([\d.]+)/)); if(window.ActiveXObject){ browser.IE=uAgent.match(/msie([\d.]+)/)[1]; b="IE"; }elseif(document.getBoxObjectFor){ browser.FIREFOX=uAgent.match(/firefox\/([\d.]+)/)[1]; b="FIREFOX"; }elseif(window.MessageEvent

&&

!document.getBoxObjectFor){ browser.CHROME=uAgent.match(/chrome\/([\d.]+)/)[1]; b="CHROME"; }elseif(window.opera){ browser.OPERA=uAgent.match(/opera.([\d.]+)/)[1]; b="OPERA"; }elseif(window.openDatabase){ browser.SAFARI=uAgent.match(/version\/([\d.]+)/)[1]; b="SAFARI"; } console.log(browser);alert("你當(dāng)前使用的瀏覽器是"+b+"，版本："+browser[b]);</script></head><body></body></html>第七章jQuery庫(kù)介紹（26）１．什么是選擇器？ｊＱｕｅｒｙ庫(kù)包含哪些基本的選擇器？選擇器是jQuery匹配HTML標(biāo)簽元素的模式，包含基本的選擇器有ID選擇器、元素選擇器、類選擇器、屬性選擇器等。２．什么是Ｄｅｆｅｒｒｅｄ對(duì)象？其作用是什么？Deferred是一種延遲處理模式對(duì)象，可鏈?zhǔn)秸{(diào)用其方法，能夠同時(shí)注冊(cè)多個(gè)回調(diào)函數(shù)進(jìn)入回調(diào)隊(duì)列，并轉(zhuǎn)發(fā)成功或失敗標(biāo)志。所謂回調(diào)就是一個(gè)執(zhí)行動(dòng)作完成后（無論成功與失敗）進(jìn)行的調(diào)用。Deferred對(duì)象的作用是更加靈活處理異步或同步過程的調(diào)用處理。３．ｊＱｕｅｒｙ庫(kù)如何向動(dòng)態(tài)添加的ＤＯＭ元素增加事件，并編寫程序?qū)崿F(xiàn)動(dòng)態(tài)添加元素事件？（動(dòng)態(tài)添加元素是指在文檔加載完成后，通過程序方式添加的ＤＯＭ元素）jQuery中通過on方法向元素添加事件，也可通過事件名稱對(duì)應(yīng)的方法快速添加事件。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery向動(dòng)態(tài)添加的DOM添加事件</title><scripttype="text/javascript"src="jquery-1.12.4.js"></script></head><body><div>靜態(tài)div</div><buttononclick="addiv()">添加一個(gè)div</button><scripttype="text/javascript">functionaddiv(){$("<div>動(dòng)態(tài)添加的div</div>").appendTo(document.body);}$(document.body).on("click","div",function(){alert($(this).text()+"被點(diǎn)擊");});</script></body></html>４．編寫程序，當(dāng)鼠標(biāo)在界面上點(diǎn)擊時(shí)，讓一個(gè)給定的＜ｄｉｖ＞元素移動(dòng)到鼠標(biāo)單擊的位置。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery移動(dòng)div</title><scripttype="text/javascript"src="jquery-1.12.4.js"></script></head><body><divid="moveme"style="position:absolute">任意位置點(diǎn)擊鼠標(biāo)，我會(huì)移動(dòng)哦</div><scripttype="text/javascript">$(document).click(function(event){varevt=event||window.event; $("#moveme").animate({ left:evt.pageX,top:evt.pageY },3000);});</script></body></html>５．編寫程序，實(shí)現(xiàn)一個(gè)下拉導(dǎo)航菜單。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery移動(dòng)div</title> <styletype="text/css"> #menunavul{margin:0;padding:0;} .menubar{list-style:none;background:#555;color:white;} .menubar.menu{display:inline-block;position:relative;padding:10px;} .submenu{display:none;position:absolute;background:#555;list-style-type:none;top:38px;min-width:100px;} .submenumenuitem{border-bottom:1pxsolid#ccc;} .menuitem1{background:#999;} </style><scripttype="text/javascript"src="jquery-1.12.4.js"></script></head><body><divid="menunav"></div><scripttype="text/javascript">varmenus=[{id:1,name:"文件",submenu:[{id:11,name:"新建"},{id:12,name:"打開"},{id:13,name:"退出"}]},{id:2,name:"編輯",submenu:[{id:21,name:"復(fù)制"},{id:22,name:"粘貼"},{id:23,name:"剪切"}]}];functioncreateMenu(mb){varilen=menus.length; varmenu=$("<ulclass='menubar'></ul>").appendTo(mb); for(vari=0;i<ilen;i++){ varm=menus[i]; varmm=$("<limid='"+m.id+"'class='menu'>"++"</li>").appendTo(menu).mouseover(function(){ $(".submenu").hide(); $(this).find(".submenu").show(); }); if(m.submenu!=null&&m.submenu.length>0) mm.append(createSubMenu(m.submenu)); } $(document).click(function(){$(".submenu").hide();});}functioncreateSubMenu(sm){varilen=sm.length; varmenu=$("<ulclass='submenu'></ul>"); for(vari=0;i<ilen;i++){ $("<limid='"+sm[i].id+"'class='menuitem'>"+sm[i].name+"</li>").appendTo(menu).mouseover(function(){ $(".menuitem").removeClass("menuitem1"); $(this).addClass("menuitem1"); }); } returnmenu;}createMenu("#menunav");</script></body></html>第八章Ｂｏｏｔｓｔｒａｐ樣式庫(kù)和插件（22-1）１．Ｂｏｏｔｓｔｒａｐ與ｊＱｕｅｒｙ有何區(qū)別和聯(lián)系？jQuery是一個(gè)JavaScript語(yǔ)言開發(fā)的函數(shù)庫(kù)，其中包括了豐富的JavaScript函數(shù)，能夠讓開發(fā)者快速、簡(jiǎn)單實(shí)現(xiàn)需要得功能。Bootstrap是一個(gè)樣式及UI組件庫(kù)，能夠幫助開發(fā)這快速開發(fā)界面，但Bootstrap得組件庫(kù)均以jQuery插件形式提供，必須由jQuery支持。２．通過Ｂｏｏｔｓｔｒａｐ實(shí)現(xiàn)一個(gè)模式對(duì)話框，顯示一個(gè)登錄表單。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Bootstrap模式對(duì)話框</title> <linkrel="stylesheet"type="text/css"href="../bootstrap-3.3.6-dist/css/bootstrap.css"><scripttype="text/javascript"src="jquery-1.12.4.js"></script><scripttype="text/javascript"src="bootstrap.min.js"></script></head><body><buttonclass="btnbtn-default"data-toggle="modal"data-target="#logindlg">登陸</button><divid="logindlg"class="modal"role="dialog"aria-labelledby="登陸"><divclass="modal-dialog"role="document"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-label="關(guān)閉"><spanaria-hidden="true">×</span></button> <divclass="modal-title">登陸</div> </div> <divclass="modal-body"> <form> <divclass="form-group"> <labelfor="username">用戶</label> <inputtype="text"class="form-control"id="username"name="username"placeholder="輸入登陸賬號(hào)"> </div> <divclass="form-group"> <labelfor="password">密碼</label> <inputtype="password"class="form-control"id="password"placeholder="輸入登陸密碼"> </div> </form> </div> <divclass="modal-footer"><buttonclass="btnbtn-success"id="loginbtn">登陸</button></div> </div> </div></div><scripttype="text/javascript">$("#loginbtn").click(function(){alert($("#username").val()+","+$("#password").val()); $(".close").click();});</script></body></html>３．用Ｂｏｏｔｓｔｒａｐ實(shí)現(xiàn)一個(gè)網(wǎng)站主導(dǎo)航菜單，如圖８－２所示。圖８－２網(wǎng)站的導(dǎo)航菜單<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Bootstrap導(dǎo)航菜單</title> <linkrel="stylesheet"type="text/css"href="../bootstrap-3.3.6-dist/css/bootstrap.css"><scripttype="text/javascript"src="jquery-1.12.4.js"></script><scripttype="text/javascript"src="bootstrap.min.js"></script></head><body><divclass="navbarnavbar-default"><divclass="container-fluid"> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#menu1"> <spanclass="sr-only">打開導(dǎo)航菜單</span> <spanclass="glyphiconglyphicon-menu-hamburger"></span> </button> </div> <divclass="collapsenavbar-collapse"id="menu1"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="#">網(wǎng)頁(yè)</a></li> <li><ahref="#">新聞</a></li> <li><ahref="#">貼吧</a></li> <li><ahref="#">知道</a></li> <li><ahref="#">音樂</a></li> <li><ahref="#">圖片</a></li> <li><ahref="#">視頻</a></li> <li><ahref="#">地圖</a></li> <li><ahref="#">文庫(kù)</a></li> <liclass="dropdown"> <arole="button"class="dropdown-toggle"data-toggle="dropdown"> 更多 <spanclass="caret"></span> </a> <ulclass="dropdown-menu"><li>精品課程</li><li>數(shù)字圖書館</li></ul> </li> </ul> </div></div></div></body></html>４．通過Ｂｏｏｔｓｔｒａｐ實(shí)現(xiàn)“/”網(wǎng)站的首頁(yè)面。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Bootstrap網(wǎng)站</title> <linkrel="stylesheet"type="text/css"href="../bootstrap-3.3.6-dist/css/bootstrap.css"><scripttype="text/javascript"src="jquery-1.12.4.js"></script><scripttype="text/javascript"src="bootstrap.min.js"></script><styletype="text/css">.pagetop{background:#027

溫馨提示

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

評(píng)論

0/150

提交評(píng)論