版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
国家开放大学《JavaScript程序设计》形考作业1-5参考答案形考作业1实训一：设计系统主页作业1.题目设计系统主页。2.目的（1）熟悉Web前端项目开发环境。（2）掌握如何建立Web前端项目，学会规划项目结构。（3）掌握动态生成页面内容的方法。（4）理解如何使用Flash显示图片新闻。（5）会在应用系统中编写播放动态新闻的程序。3.内容建立项目结构，并设计一个系统的主页，在主页中嵌入Flash播放新闻。4.要求（1）建立Web前端项目，规划好程序结构。（2）使用document.write()方法生成播放Flash的JavaScript代码。（3）可以方便地增减播放的图片新闻数量。（4）单击图片时能够打开对应的新闻页面。<linkhref="/zyzx/baseFiles/gzk/nerc_gzk/style/addcss.css"rel="stylesheet"type="text/css"参考答案：1、让:8000可以直接访问首页添加一条urls.py配置：urlpatterns=[re_path('^$',views.index),#访问:8000可以直接访问首页]2、应用bootstrap快速编写index首页导航条（1）引入bootstrap核心文件和jquery<head><!--引入Bootstrap核心CSS文件-->linkrel="stylesheet"href="/static/blog/bootstrap-3.3.7/css/bootstrap.css"><!--jQuery(Bootstrap的所有JavaScript插件都依赖jQuery，所以必须放在前边)--><scriptsrc="/static/js/jquery-3.3.1.js"></script><!--引入Bootstrap核心JavaScript文件--><scriptsrc="/static/blog/bootstrap-3.3.7/js/bootstrap.js"></script><!--依赖jquery--></head>（2）拷入bootstrap导航条模板代码拷贝这些代码到index页面的body标签内。（3）对导航条代码做适当调整由于我们的页面导航栏用不上，删除模板中的form标签和<liclass="dropdown">标签的内容。形考作业2实训二：显示数据列表1.题目显示数据列表。2.目的（1）掌握流程控制语句的使用。（2）掌握函数的使用。（3）理解闭包的概念。（4）应会设计基本的应用程序。3.内容在所设计的项目中，实现显示数据列表。数据以表格的方式显示，不同的行显示不同的颜色。当单击每行数据的标题时，将会弹出窗口，显示详细信息。4.要求（1）数据存放在数组中，用程序实现数据显示。（2）以闭包的方式定义工具，窗口函数封装在工具中。（3）通过循环生成数据行，用条件判断实现不同行显示不同的颜色。参考答案：Ntotype.NaN0=function(){return
isNaN(this)?0:this;}function
getPosition(e){
var
left
=
0;
var
top
=
0;
while
(e.offsetParent){
left
+=
e.offsetLeft
+
(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top
+=
e.offsetTop
+
(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e
=
e.offsetParent;
}
left
+=
e.offsetLeft
+
(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top
+=
e.offsetTop
+
(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
return
{x:left,
y:top};}$('table#thailand-qhtbodytr').each(function(){$('td:even',this).css('font-weight','bold');$('td:eq(0)',this).css({'text-align':'left','font-weight':'normal'});});$('table#thailand-qhtbodytr:odd').addClass('thailand-qh-tbody-tr-odd');$('table#thailand-qhtbodytr:even').addClass('thailand-qh-tbody-tr-even');};functionGetIframeInnerHtml(objIFrame){variFrameHTML="";if(objIFrame.contentDocument){//ForNS6iFrameHTML=objIFrame.contentDocument.innerHTML;}elseif(objIFrame.contentWindow){//ForIE5.5andIE6iFrameHTML=objIFrame.contentWindow.document.body.innerHTML;}elseif(objIFrame.document){//ForIE5iFrameHTML=objIFrame.document.body.innerHTML;}returniFrameHTML;}</script><iframesrc="test.htm"id="frmIn"name="frmIn"></iframe><inputtype="button"value="click"onclick="alert(GetIframeInnerHtml(document.all.frmIn))">实训三：随机显示题头图片1.题目随机显示题头图片。2.目的（1）掌握图像显示的基本知识。（2）掌握对象建立的方法。（3）掌握Math的使用方法。（3）会应利用随机函数编写应用程序。3.内容结合一个具体应用的需求，设计随机显示题头的程序。4.要求（1）针对一个具体应用的需求，设计界面。（2）使用对象的方式存储图像信息，利用随机函数抽取图像。参考答案：#lr_systembox{width:980px;height:50px;background-color:#CCC;sition:relative;margin:0auto;z-index:100000;}.lr_systembtn{width:201px;height:35px;line-height:33px;position:absolute;top:0px;right:0px;z-index:100004;}.lr_systembtn.lr_abtn{width:100%;height:35px;display:block;font-size:15px;font-weight:bold;color:#666666;background-image:url(lr_images/btn_system.png);background-repeat:no-repeat;background-position:lefttop;}.lr_systembtn.lr_abtn:hover{color:#333333;background-position:leftbottom;}.lr_systembtn.lr_abtnspan{padding-left:28px;}.lr_menu{width:184px;padding:8px6px8px6px;background-color:#ffffff;border:#ACACACsolid2px;filter:alpha(opacity=90);opacity:0.90;position:absolute;top:35px;right:0px;
z-index:100005;display:none;}.lr_menudl{width:100%;display:block;overflow:hidden;}.lr_menua{width:100%;display:block;color:#666666;border-bottom:#ACACACdashed1px;height:30px;line-height:30px;font-size:14px;background-image:url(lr_images/jt1.gif);background-repeat:no-repeat;background-position:6pxcenter;}.lr_menua:hover{background-color:#E2E2E2;color:#333333;text-decoration:none;}.lr_menudt{}.lr_menudta{font-weight:bold;text-indent:14px;}.lr_menudda{text-indent:24px;background-position:16pxcenter;}<divid="lr_systembox">
<divid="lr_systembtn"class="lr_systembtn">
<ahref="#"class="lr_abtn"><span></span></a>
<divid="lr_menu"class="lr_menu">
<dl><dt><ahref="/js/"target="_blank">jquery特效</a></dt>
</dl>
<dl>
<dt><ahref="/js/nav/"target="_blank">导航菜单</a></dt>
<dd><ahref="#"target="_blank">三级菜单测试</a></dd>
<dd><ahref="#"target="_blank">三级菜单测试</a></dd>
</dl>
<dl>
<dt><ahref="/js/slide/"target="_blank">焦点幻灯片</a></dt>
</dl>
<dl>
<dt><ahref="/js/texiao/"target="_blank">网页特效</a></dt>
</dl>
<dl><dt><ahref="/qqkefu/"target="_blank">qq在线客服代码</a></dt>
</dl>
<dl>
<dt><ahref="/jquery_tanchu/"target="_blank">jquery弹出层</a></dt>
</dl>
</div>
</div></div>实训四：实现日期显示1.题目实现日期显示。2.目的（1）掌握Date对象的使用方法。（2）掌握通过Date获得年月日的方法。（3）巩固对多分支结构的掌握和应用。（3）利用Date设计应用程序。3.内容结合一个具体应用的需求，实现日期的显示。4.要求（1）针对一个具体应用，设计日期显示的格式。（2）用JavaScript实现日期的显示。参考答案：importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;importjava.util.Scanner;publicclassDateCalculator{publicstaticvoidmain(String[]args){获取用户输入的起始日期和天数Scannerscanner=newScanner(System.in);System.out.print("请输入起始日期（格式：yyyy-MM-dd）：");();System.out.print("请输入天数：");intdays=scanner.nextInt();解析起始日期("yyyy-MM-dd");DatestartDate;try{(startDateStr);catch(ne){System.out.println("日期格式不正确");return;使用Calendar类进行日期计算.getInstance();calendar.setTime(startDate);(Calendar.DAY_OF_MONTH。days);格式化计算后的日期StringresultDate=sdf.format(calendar.getTime());输出计算结果System.out.println("计算后的日期"+resultDate);形考作业3实训五：设计登录和注册页1.题目设计登录和注册页。2.目的（1）掌握表单域的引用方法。（2）掌握常用控件的基本方法。（3）掌握事件的处理方法。（4）理解Cookie的原理和应用。3.内容针对所设计的系统，设计登录和注册页。4.要求（1）登录界面能对输入的数据进行验证，要求非空，且符合一定的要求。（2）登录时，用条件判断输入的数据，模拟登录判断。登录成功后，用Cookie保存登录状态，并进入主页。（3）主页含有注销功能。（4）注册界面能对数据进行验证。如电子邮件、电话号码等要符合格式要求。参考答案：<html><head><title>用户注册</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"></head><boby><formaction=""method="post"><tableborder="1"align="center"><tr><tdcolspan="2"align="center">注册页面</td></tr><tr><td>用户名：</td><td><inputtype="text"name="userName"/></td></tr><tr><td>密码</td><td><inputype="password"name="password1"/></td></tr><tr><td>确认密码：</td><td><inputtype="password"name="password2"/></td></tr><tr><td>个人爱好：</td><td><inputtype="checkbox"name="checkbox1"/>足球<inputtype="checkbox"name="checkbox2"/>蓝球<inputtype="checkbox"name="checkbox3"/>排球</td></tr><tr><td>个人职业：</td><td><selectname="select"><optionvalue="学生">学生</option><optionvalue="员工">员工</option><optionvalue="其他">其他</option></select></td></tr><tr><td>性别：</td><td><inputtype="radio"name="radiobutton"/>男<inputtype="radio"name="radiobutton"/>女</td></tr><tr><td>邮箱：</td><td><inputtype="text"name="email"/></td></tr><tr><td>生日：</td><td><selectname="select1"><optionvalue="1978">1978</option><optionvalue="1979">1979</option><optionvalue="1980">1980</option><optionvalue="1981">1981</option><optionvalue="1982">1982</option><optionvalue="1983">1983</option><optionvalue="1984">1984</option><optionvalue="1985">1985</option><optionvalue="1986">1986</option><optionvalue="1987">1987</option><optionvalue="1988">1988</option><optionvalue="1989">1989</option><optionvalue="1990">1990</option><optionvalue="1991">1991</option><optionvalue="1992">1992</option><optionvalue="1993">1993</option><optionvalue="1994">1994</option><optionvalue="1995">1995</option><optionvalue="1996">1996</option><optionvalue="1997">1997</option><optionvalue="1998">1998</option><optionvalue="1999">1999</option><optionvalue="2000">2000</option></select>年<selectname="select2"><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="4">4</option><optionvalue="5">5</option><optionvalue="6">6</option><optionvalue="7">7</option><optionvalue="8">8</option><optionvalue="9">9</option><optionvalue="10">10</option><optionvalue="11">11</option><optionvalue="12">12</option></select>月<selectname="select3"><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="4">4</option><optionvalue="5">5</option><optionvalue="6">6</option><optionvalue="7">7</option><optionvalue="8">8</option><optionvalue="9">9</option><optionvalue="10">10</option><optionvalue="11">11</option><optionvalue="12">12</option><optionvalue="12">13</option><optionvalue="12">14</option><optionvalue="12">15</option><optionvalue="12">16</option><optionvalue="12">17</option><optionvalue="12">18</option><optionvalue="12">19</option><optionvalue="12">20</option><optionvalue="12">21</option><optionvalue="12">22</option><optionvalue="12">23</option><optionvalue="12">24</option><optionvalue="12">25</option><optionvalue="12">26</option><optionvalue="12">27</option><optionvalue="12">28</option><optionvalue="12">29</option><optionvalue="12">30</option><optionvalue="12">31</option></select>日</td></tr><tr><td>你所在地：</td><td><selectname="select4"><optionvalue="1"selected>北京</option><optionvalue="2">天津</option><optionvalue="3">河北</option><optionvalue="4">上海</option><optionvalue="5">河南</option><optionvalue="6">吉林</option><optionvalue="7">黑龙江</option><optionvalue="8">内蒙古</option><optionvalue="9">山东</option><optionvalue="10">山西</option><optionvalue="11">陕西</option><optionvalue="12">甘肃</option><optionvalue="13">宁夏</option><optionvalue="14">青海</option><optionvalue="15">新疆</option><optionvalue="16">辽宁</option><optionvalue="17">江苏</option><optionvalue="18">浙江</option><optionvalue="19">安徽</option><optionvalue="20">广东</option><optionvalue="21">海南</option><optionvalue="22">广西</option><optionvalue="23">云南</option><optionvalue="24">贵州</option><optionvalue="25">四川</option><optionvalue="26">重庆</option><optionvalue="27">西藏</option><optionvalue="28">香港</option><optionvalue="29">澳门</option><optionvalue="30">福建</option><optionvalue="31">江西</option><optionvalue="32">湖南</option><optionvalue="33">湖北</option><optionvalue="34">台湾</option><optionvalue="35">其他</option></select>省</td></tr><tr><td><inputtype="submit"name="Submit"value="提交"/></td><td><inputtype="reset"name="Submit2"value="重置"/></td></tr></table></form></boby></html>实训六：设计简单的购物车1.题目设计简单的购物车。2.目的（1）掌握JSON的使用方法。（2）掌握数据列表的动态生成方法。（3）掌握WebStorage的使用方法。（4）会利用所学知识设计简单的应用程序。3.内容设计产品浏览页面，用户可以单击产品的“添加到购物车”链接将产品加入购物车，同时，显示购物车。可以对购物车中的产品执行增减或删除操作。4.要求（1）针对一个具体应用，设计产品列表。（2）要动态生成产品及购物车数据列表。（3）将购物车的数据存放在WebStorage中。参考答案：lPrice=totalPrice;
}
//添加商品进购物车的方法
publicbooleanaddGoodsInCart(Itemsitem,intnumber)
{
if(goods.containsKey(item))
{
goods.put(item,goods.get(item)+number);
}
else
{
goods.put(item,number);
}
calTotalPrice();//重新计算购物车的总金额
returntrue;
}
//删除商品的方法
publicbooleanremoveGoodsFromCart(Itemsitem)
{
goods.remove(item);
calTotalPrice();//重新计算购物车的总金额
returntrue;
}
//统计购物车的总金额
publicdoublecalTotalPrice()
{
doublesum=0.0;
Set<Items>keys=goods.keySet();//获得键的集合
Iterator<Items>it=keys.iterator();//获得迭代器对象
while(it.hasNext())
{
Itemsi=it.next();
sum+=i.getPrice()*goods.get(i);
}
this.setTotalPrice(sum);//设置购物车的总金额
returnthis.getTotalPrice();
}
publicstaticvoidmain(String[]args){
//先创建两个商品对象
Itemsi1=newItems(1,"沃特篮球鞋","温州",200,500,"001.jpg");
Itemsi2=newItems(2,"李宁运动鞋","广州",300,500,"002.jpg");
Itemsi3=newItems(1,"沃特篮球鞋","温州",200,500,"001.jpg");
Cartc=newCart();
c.addGoodsInCart(i1,1);
c.addGoodsInCart(i2,2);
//再次购买沃特篮球鞋，购买3双
c.addGoodsInCart(i3,3);
//变量购物商品的集合
Set<Map.Entry<Items,Integer>>items=c.getGoods().entrySet();
for(Map.Entry<Items,Integer>obj:items)
{
System.out.println(obj);
}
System.out.println("购物车的总金额："+c.getTotalPrice());
}}2、Items类package
entity;//商品类public
class
Items{
private
int
id
;
//商品编号
private
String
name
;
//商品名称
private
String
city
;
//产地
private
int
price
;
//价格
private
int
number
;
//库存
private
String
picture
;
//商品图片
//保留此不带参数的构造方法
public
Items()
{
}
public
Items(
int
id,Stringname,Stringcity,
int
price,
int
number,Stringpicture)
{
this
.
id
=id;
this
.
name
=name;
this
.
city
=city;
this
.
picture
=picture;
this
.
price
=price;
this
.
number
=number;
}
public
int
getId(){
return
id
;
}
public
void
setId(
int
id){
this
.
id
=id;
}
public
StringgetName(){
return
name
;
}
public
void
setName(Stringname){
this
.
name
=name;
}
public
StringgetCity(){
return
city
;
}
public
void
setCity(Stringcity){
this
.
city
=city;
}
public
int
getPrice(){
return
price
;
}
public
void
setPrice(
int
price){
this
.
price
=price;
}
public
int
getNumber(){
return
number
;
}
public
void
setNumber(
int
number){
this
.
number
=number;
}
public
StringgetPicture(){
return
picture
;
}
public
void
setPicture(Stringpicture){
this
.
picture
=picture;
}
@Override
public
int
hashCode(){
//
TODO
Auto-generatedmethodstub
return
this
.getId()+
this
.getName().hashCode();
}
@Override
public
boolean
equals(Objectobj){
//
TODO
Auto-generatedmethodstub
if
(
this
==obj)
{
return
true
;
}
if
(obj
instanceof
Items)
{
Itemsi=(Items)obj;
if
(
this
.getId()==i.getId()&&
this
.getName().equals(i.getName()))
{
return
true
;
}
else
{
return
false
;
}
}
else
{
return
false
;
}
}
public
StringtoString()
{
return
"商品编号："
+
this
.getId()+
",商品名称："
+
this
.getName();
}
}形考作业4实训七：实现用户管理功能1.题目实现用户管理功能。2.目的（1）理解Node.js程序的基本原理。（2）掌握利用Node.js建立服务器程序的基本方法。（3）理解Ajax的工作原理。（4）掌握编写Ajax程序的基本方法。（5）会利用所学知识设计简单的应用程序。3.内容设计程序能够对用户进行管理，实现查询、删除、注册、登录功能。4.要求（1）用户管理界面，以列表的方式显示用户数据，并提供删除功能。数据通过Ajax请求服务器端程序，从数据库中获取。（2）注册界面Ajax请求服务器端程序能够将用户信息保存到数据库。（3）注册界面在输入用户名时能实现动态验证的唯一性。（4）登录功能通过数据库查询进行验证。参考答案：XXX:UserManagementnXXXObjective:1.UnderstandtheXXXprograms.2.MasterthebasicmethodsofbuildingserverprogramsusingNode.js.3.UnderstandtheXXX.4.MasterthebasicmethodsofwritingAjaxprograms.5.Beabletodesignsimplensusingtheknowledgelearned.Content:Designaprogramthatcanmanageusersandimplementquery。delete。register。andloginns.Requirements:1.Theusermanagementinterfacedisplaysuserdatainalistandprovidesadeleten。DataisobtainedfromthedatabasebymakinganAjaxrequesttotheserver-sideprogram.2.TheninterfacecansaveuserntothedatabasebymakinganAjaxrequesttotheserver-sideprogram.3.XXXwhenentered.4.Theloginnisverifiedthroughadatabasequery.CodeXXX:template>divclass="common-table">el-table:data="tableData"height="100%"stripev-loading="config.loading">el-table>nclass="pager"backgroundlayout="prev,pager,next":total="config.total":current.sync="config.page"@current-change="changePage">div>template>template>divclass="common-table">el-table>el-table-columnlabel="n"style="width:100px">el-table-column>el-table>current.sync="config.page"synchronizesthepagenumberoftheparentcomponent@current-change="changePage"triggerstheeventtochangethepagenumberandpassthedatatotheparentcomponent-->nclass="pager"backgroundlayout="prev,pager,next":total="config.total":current.sync="config.page"@current-change="changePage">div>template>script>exportdefault{methods:{changePage(page){codetochangethepagenumberscript>XXX>template>divclass="manage">changePage="getList"接收子组件传递过来的页数-->Table:XXX="tableData":XXX":config="config"@changePage="getList">div>template>script>exportdefault{data(){return{XXX:[]。tableLabel:[prop:'birth'。label:'出生日期'。width:200prop:'addr'。label:'地址'。width:300config:{page:1。pageSize:10。total:0。loading:falsemethods:{getList(){this.config.loading=true;this.$http.get('/api/user/getUser'。{params:{page:this.config.page。pageSize:this.config.pageSizethen(res=。{this.tableData=res.data.list.map(item=。{item.sexLabel=item.sex===0.'女':'男';returnitemthis.config.total=res.data.count;this.config.loading=false;created(){this.getList()script>形考作业5实训八：使用jQuery技术实现企业信息展示系统的相关功能1.题目使用jQuery技术实现企业信息展示系统的相关功能。2.目的（1）掌握jQuery的基本知识。（2）掌握jQuery的应用方法。（3）进一步理解Ajax程序的设计方法。（4）会利用所学知识设计简单的应用程序。3.内容用jQuery技术实现产品的查询、添加、修改与删除，用户的登录、注册、查询和删除。4.要求（1）从下载jQuery库。（2）将在客户端网页中使用的MyTools中的函数转换为jQuery函数。请求服务器端程序能够将用户信息保存到数据库。（3）进一步完善功能，优化界面。参考答案：javascriptclassJq{constructor(arg。root){记录上次操作的节点；if(typeofroot=='undefined'){this.prevObject=newJq(document。null);if(root){this.prevObject=root;if(typeofarg=="string"){字符串leteles=document.querySelectorAll(arg);this.addEvent(eles);elseif(typeofarg=="n"){window.addEventListener("DOMContentLoaded"。arg);else{原生节点；if(typeofarg.length=="undefined"){this[0]=arg;this.length=1;else{this.addEvent(arg);addEvent(eles){eles.forEach((el。index)=。{this[index]=el;this.length=eles.length;eq(index){returnnewJq(this[index]。this);end(){retur
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 微生物实验室院感相关制度
- 文明施工措施
- 高考物理一轮复习 第十章 第2讲 法拉第电磁感应定律 自感现象课时作业（含解析）-人教版高三物理试题
- 2024中考作文冲刺热点押题-家园
- 中学午餐配送服务投标方案（技术方案）
- 工贸行业专项类重大 事故隐患详细解读
- 2023-2024学年新疆乌鲁木齐市第四十四中学中考数学三模试卷
- 个人简历模板
- 2024-2030全球与中国隔离器芯片市场现状及未来发展趋势
- 山西省2024九年级物理全册电学复习1电流和电路课件新版新人教版
- 管道图纸基础知识
- 小学综合实践活动-我做场馆志愿者教学设计学情分析教材分析课后反思
- 电磁场与电磁波智慧树知到课后章节答案2023年下同济大学
- 未参加会议的情况说明
- 黑龙江省大庆市2023年九年级上学期语文期中试卷（附答案）
- 低压电线架空施工方案
- 国内油气储运工程
- 【语文】2023-202学年统编版高中语文必修上册整本书阅读《乡土中国-男女有别》课件
- 哈尔滨工程大学PPT背景模板
- 大象版三年级科学下册不一样的物体课件公开课一等奖课件省赛课获奖课件
- 雨季焊接专项技术措施
评论
0/150
提交评论